/*
Theme Name: Food Business Theme
Theme URI: https://yoursite.com
Description: A modern WordPress theme for local businesses — restaurants, professionals, and tradespeople. 4 layout styles, 30 starter designs. SEO optimized.
Version: 1.8.0
Author: Your Name
Author URI: https://yoursite.com
Text Domain: food-theme
Tags: food, restaurant, cafe, bakery, one-page, responsive, seo
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Colors */
  --color-primary:       #C4622D;   /* Terracotta */
  --color-primary-dark:  #A04E22;
  --color-primary-light: #E87A45;
  --color-secondary:     #2C1A0E;   /* Dark Brown */
  --color-accent:        #8B6914;   /* Warm Gold */
  --color-bg:            #FDF6EC;   /* Cream */
  --color-bg-alt:        #F5EAD4;   /* Darker Cream */
  --color-bg-dark:       #1C1208;   /* Almost Black */
  --color-text:          #2C1A0E;
  --color-text-muted:    #7A5C3F;
  --color-white:         #FFFFFF;
  --color-border:        #E8D5B8;

  /* Typography — overridden dynamically by food_output_dynamic_css() */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Sizing */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(44,26,14,0.08);
  --shadow-md:   0 4px 20px rgba(44,26,14,0.12);
  --shadow-lg:   0 12px 48px rgba(44,26,14,0.18);

  /* Transitions */
  --transition: 0.3s ease;

  /* Container */
  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 5vw, 3rem);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; border: none; outline: none; }
button { cursor: pointer; background: none; }

/* Standard WordPress-core visually-hidden-but-accessible utility — content
   real for screen readers/keyboard users, invisible on screen. Used by the
   trust-bar marquee (a duplicated, aria-hidden visual track needs a real
   single-copy list somewhere for assistive tech). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Skip-link: visually hidden like any .screen-reader-text, but jumps into
   view on keyboard focus so keyboard/screen-reader users can bypass the
   header nav instead of tabbing through it on every page. */
.skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 12px 20px;
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 10000;
  background: var(--color-primary, #1c2340);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   GENERIC SLIDER ENGINE — "slider" design variant
   Preset-independent structural alternative (same idea as hero's split/
   centered/landing swap) for gallery/services/reviews: a horizontally
   scroll-snapping row instead of a static grid. Native CSS scroll-snap
   rather than a transform-based carousel — browser handles "settle to
   nearest item" and touch swiping for free, JS (main.js) only needs to
   wire the prev/next arrows and dots to it. Works on any card markup —
   .food-slider-item is a plain wrapper around whatever card each section
   already renders (.gallery-item, .service-card, .review-card), so this
   doesn't duplicate or replace those.
   ============================================================ */
.food-slider-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.food-slider-viewport::-webkit-scrollbar { display: none; }
.food-slider-track { display: flex; gap: 1.25rem; }
.food-slider-item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
}
@media (min-width: 700px) {
    .food-slider-item { flex-basis: 46%; max-width: 46%; }
}
@media (min-width: 1000px) {
    .food-slider-item { flex-basis: 31.5%; max-width: 31.5%; }
}
.food-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
}
.food-slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border, #e2e8f0);
    background: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-heading);
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}
.food-slider-arrow:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }
.food-slider-dots { display: flex; gap: 0.5rem; }
.food-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-border, #cbd5e1);
    cursor: pointer;
    transition: width .2s, background .2s;
}
.food-slider-dot.is-active { background: var(--color-primary); width: 22px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    .food-slider-viewport { scroll-behavior: auto; }
}

/* "לוגואים / לקוחות" — logo row, riding the same slider engine above but
   with its own compact item sizing (a logo isn't a photo — no crop, no
   fixed aspect ratio) and a grayscale-until-hover treatment common to
   this kind of "as seen in" / client strip. */
.food-logos-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
}
.food-logos-item img {
    max-height: 48px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.6);
    transition: filter .25s ease;
}
.food-logos-item img:hover { filter: grayscale(0) opacity(1); }
.food-logos .food-slider-item { flex-basis: auto; max-width: none; }
.section-header--compact { margin-bottom: 1.75rem; }

/* ============================================================
   GLOBAL MICRO-INTERACTIONS
   Hover-zoom / lift / arrow-nudge, applied via shared naming
   conventions so every one of the 13 presets gets them without a
   per-preset rule (see food-theme's established [class*="..."]
   pattern for cross-preset fixes). Separate from, and does not
   touch, the [data-animate] scroll-reveal system (functions.php's
   food_output_dynamic_css() + assets/js/main.js) — data-animate is
   always on a section's outer wrapper, never on the <img> or
   button itself, so its scroll-triggered transform never collides
   with the hover transforms below.
   Deliberately tag-restricted to a/button for the lift rule: several
   real classes contain "-btn"/"-cta" as a naming fragment on a
   non-clickable container (.about-cta section wrapper, .hero-landing-btns
   group, .nav-phone-btn__label span) — without the tag restriction the
   whole section would "lift" on any hover inside it.
   Excludes image containers that already have their own tuned
   hover-zoom further below in this file (.service-card-image,
   .gallery-item, .gallery-bloom-item, .gallery-lifecoach-item,
   .blog-card__image) so their existing scale/timing isn't overwritten.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Image hover-zoom: every preset's photo frame, scaling the <img>
     itself (never its wrapper — the wrapper carries data-animate). */
  [class*="-media"] img,
  [class*="-frame"] img,
  .about-image-wrap img,
  .hero-split-image img,
  .gallery-gleam-item img,
  .gallery-roast-item img,
  .gallery-beam-card img,
  .services-gleam-mosaic-tile img,
  .service-bloom-banner-media img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  [class*="-media"]:hover img,
  [class*="-frame"]:hover img,
  .about-image-wrap:hover img,
  .hero-split-image:hover img,
  .gallery-gleam-item:hover img,
  .gallery-roast-item:hover img,
  .gallery-beam-card:hover img,
  .services-gleam-mosaic-tile:hover img,
  .service-bloom-banner-media:hover img {
    transform: scale(1.07);
  }

  /* Button / CTA lift-on-hover. Presets with their own tuned hover
     (hero-food-btn, hero-lifecoach-btn, hero-bloom-btn) redeclare the
     same -2px further below and simply win the cascade there. */
  a[class*="-btn"], button[class*="-btn"],
  a[class*="-cta"], button[class*="-cta"] {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  a[class*="-btn"]:hover, button[class*="-btn"]:hover,
  a[class*="-cta"]:hover, button[class*="-cta"]:hover {
    transform: translateY(-2px);
  }

  /* Arrow icons — nudged in their own verified pointing direction
     (not a blind generic rule: an svg chevron can point either way
     depending on the preset, so each is checked individually). */
  .services-orbit-arrow svg,
  .service-lifecoach-link-arrow,
  .blog-card__read-more svg {
    transition: transform .25s ease;
  }
  .services-orbit-arrow:hover svg,
  .service-lifecoach-link:hover .service-lifecoach-link-arrow { transform: translateX(4px); }
  .blog-card__read-more:hover svg { transform: translateX(-4px); }
  .hero-bloom-btn-arrow,
  .about-gleam-link-arrow { display: inline-block; transition: transform .25s ease; }
  .hero-bloom-btn:hover .hero-bloom-btn-arrow,
  .about-gleam-link:hover .about-gleam-link-arrow { transform: translateX(-5px); }

  /* Plain "←"/"→" glyph CTAs: wrap the glyph itself in one of these
     two utility classes (see archive-renderer.php, section-hero--food.php)
     so it nudges independently of the parent link's own hover state. */
  .cta-arrow-left, .cta-arrow-right { display: inline-block; transition: transform .25s ease; }
  a:hover .cta-arrow-left { transform: translateX(-5px); }
  a:hover .cta-arrow-right { transform: translateX(5px); }

  /* Card lift-on-hover — an explicit list (not a [class*="-card"] wildcard):
     several BEM-style sub-elements (.food-archive-card__img, .blog-card__
     image-wrap, .sidebar-card__title, ...) contain "-card" as a naming
     fragment, so a substring selector would wrongly lift inner pieces
     individually instead of the outer card as a whole — the exact same
     landmine class already found and fixed for [class*="-btn"] earlier.
     .service-card/.blog-card/.food-archive-card already have their own
     tuned lift further up this file and are deliberately excluded here.
     .reviews-orbit-card is excluded too — its transform is already owned
     by the auto-rotating stack animation (.is-active fan/rotate effect);
     adding a hover transform here would fight that. .service-lifecoach-
     card--featured keeps its own permanent translateY(-1rem) offset — the
     :not() stops this generic rule from overwriting it on hover. */
  .contact-bloom-card, .contact-gleam-card, .gallery-beam-card,
  .review-bloom-card, .reviews-lifecoach-card, .services-beam-card,
  .service-gleam-card, .sidebar-card,
  .service-lifecoach-card:not(.service-lifecoach-card--featured) {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .contact-bloom-card:hover, .contact-gleam-card:hover, .gallery-beam-card:hover,
  .review-bloom-card:hover, .reviews-lifecoach-card:hover, .services-beam-card:hover,
  .service-gleam-card:hover, .sidebar-card:hover,
  .service-lifecoach-card:not(.service-lifecoach-card--featured):hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-secondary);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-alt { background: var(--color-bg); }
.section-dark { background: var(--color-bg-dark); color: var(--color-white); }
.section-dark h2, .section-dark h3 { color: var(--color-white); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Line-count caps (hero subtitle: 4-5 lines, home-page contact intro: 4
   lines) — word-count trimming (wp_trim_words) can't guarantee a specific
   *rendered* line count since that depends on font-size/column width per
   preset, but line-clamp does, regardless of how long the source text is. */
.text-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.section-header .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.section-header h2 {
  margin-bottom: 1rem;
}

.section-header p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  /* Was hardcoded --color-white — verticals with a light/pastel primary
     colour got unreadable white-on-light buttons everywhere .btn-primary
     is used. --color-text-on-primary is the WCAG-checked pairing every
     other coloured surface on the site already uses (Food_Contrast). */
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: 0 4px 16px rgba(196,98,45,0.35);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-on-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(196,98,45,0.45);
}

.btn-outline {
  /* Transparent + white-on-white text was invisible wherever the hero
     photo (or its overlay gradient, which several presets only darken
     at the top/bottom, not the middle) is light behind it — "swallowed
     into the background". A guaranteed dark backdrop behind the text
     fixes this regardless of the underlying photo, since we can't
     measure a photo's on-page luminance from CSS. */
  border: 2px solid var(--color-white);
  color: var(--color-white);
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-heading);
}

.btn-outline-dark {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-dark:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ============================================================
   BADGE / TAG
   ============================================================ */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge-primary { background: var(--color-primary); color: white; }
.badge-accent  { background: var(--color-accent);  color: white; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  padding: 1.25rem 0;
}

#site-header.transparent { background: transparent; }

#site-header.scrolled {
  background: rgba(253,246,236,0.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 2vw, 2rem);
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white);
  transition: color var(--transition);
  flex-shrink: 0;
}
#site-header.scrolled .site-logo { color: var(--color-secondary); }

.site-logo img { height: 48px; width: auto; }

/* Nav */
.main-nav {
  min-width: 0;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  /* Was nowrap + .main-nav { overflow-x: auto } to keep a long item list
     on one scrollable line. Per the CSS Overflow Module spec, overflow-x:
     auto forces overflow-y's COMPUTED value to auto too whenever it isn't
     already a scrolling value — there's no way to set one axis to a
     scrolling value and the other to visible on the same element. That
     silently clipped every category dropdown (.sub-menu, position:
     absolute) the moment it dropped below .main-nav's own box, so hovering
     a category never visibly opened anything. Wrapping to a second line
     instead of scrolling avoids needing overflow-x at all, so dropdowns
     can actually escape downward into view.
     https://www.w3.org/TR/css-overflow-3/#overflow-properties */
  flex-wrap: wrap;
  gap: 0.25rem;
}

.main-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.5rem clamp(0.6rem, 1vw, 1rem);
  font-size: clamp(0.8rem, 0.6vw + 0.7rem, 0.9rem);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

#site-header.scrolled .main-nav a { color: var(--color-text); }

.main-nav a:hover {
  color: var(--color-primary);
  background: rgba(196,98,45,0.08);
}

.nav-cta {
  background: var(--color-primary) !important;
  color: white !important;
  border-radius: var(--radius-full) !important;
  padding: 0.5rem 1.25rem !important;
}
.nav-cta:hover { background: var(--color-primary-dark) !important; }

.nav-phone-btn {
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#site-header.scrolled .nav-phone-btn {
  opacity: 1;
  pointer-events: auto;
}
/* Always show phone btn on inner pages (no hero) */
body:not(.home) #site-header .nav-phone-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: var(--transition);
}
#site-header.scrolled .menu-toggle span { background: var(--color-secondary); }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-dark);
  z-index: 999;
  padding: 6rem 2rem 2rem;
  flex-direction: column;
  gap: 0.5rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-white);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--color-primary); }
.mobile-nav-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-size: 2rem;
  color: var(--color-white);
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Dropdown submenus — a page assigned a parent page in the onboarding
   wizard (see admin/class-food-setup-wizard.php::nav_menu_finalise())
   shows up as a WordPress-default "menu-item-has-children" nested
   <ul class="sub-menu">. Desktop reveals it on hover/focus via pure CSS;
   mobile gets a tap-to-expand accordion (see assets/js/main.js). ── */
.main-nav li.menu-item-has-children { position: relative; }
.main-nav li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-inline-start: 0.35rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
  opacity: 0.7;
}
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.25);
  padding: 0.5rem;
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--transition);
  z-index: 500;
}
.main-nav .sub-menu a {
  color: var(--color-text) !important;
  background: none !important;
}
.main-nav .sub-menu a:hover { color: var(--color-primary) !important; background: var(--color-bg) !important; }
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile — tap-to-expand accordion (toggle button injected by main.js) */
.mobile-nav li.menu-item-has-children { position: relative; }
.mobile-nav .submenu-toggle {
  position: absolute;
  top: 0.4rem; inset-inline-end: 0;
  width: 40px; height: 40px;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.mobile-nav .submenu-toggle svg { width: 18px; height: 18px; }
.mobile-nav li.menu-item-has-children.submenu-open .submenu-toggle { transform: rotate(180deg); }
.mobile-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-nav li.menu-item-has-children.submenu-open > .sub-menu { max-height: 600px; }
.mobile-nav .sub-menu a {
  font-size: 1.2rem;
  padding-inline-start: 1rem;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Hero Slider */
.hero-slider {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out, transform 0.2s linear;
}
.hero-slide.is-active {
  opacity: 1;
}

/* Slider dots */
.hero-dots {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.hero-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Minimum 0.6 opacity everywhere — the old gradient faded to 0.2 with a
     bright orange tint at the far corner, so any text (title emphasis,
     stat numbers, eyebrow) that wrapped into that area sat almost directly
     on the raw photo and failed contrast. */
  background: linear-gradient(
    135deg,
    rgba(20,12,6,0.82) 0%,
    rgba(30,18,10,0.7) 55%,
    rgba(60,32,16,0.6) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px;
  padding: 7rem 0 5rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary-light);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-primary-light);
}

.hero-content h1 {
  color: var(--color-white);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-content h1 em {
  font-style: normal;
  color: var(--color-primary-light);
}

.hero-content p {
  color: rgba(255,255,255,0.85);
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 520px;
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stat-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
.hero-scroll svg { width: 20px; height: 20px; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
#about { overflow: hidden; }

.about-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about-image-wrap img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.about-image-badge {
  position: absolute;
  bottom: 2rem;
  right: -1rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  min-width: 120px;
}
.about-image-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-primary);
  line-height: 1;
}
.about-image-badge span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.about-text { padding: 1rem 0 1rem 2rem; }
.about-text .eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.about-text h2 { margin-bottom: 1.25rem; }
.about-text p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0;
}
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.about-feature-icon {
  width: 40px;
  height: 40px;
  background: rgba(196,98,45,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 1.2rem;
}
.about-feature-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.1rem;
}
.about-feature-text span { font-size: 0.82rem; color: var(--color-text-muted); }

/* ============================================================
   SERVICES / MENU SECTION
   ============================================================ */
#services { background: var(--color-bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.service-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
/* Category page grid (page-service-category.php): whole-card click
   target — title/image stay plain, this transparent overlay makes the
   entire card a link to the service's own page. */
.service-card-link { position: absolute; inset: 0; z-index: 3; }

.service-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.service-card:hover .service-card-image img { transform: scale(1.08); }

.service-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.service-card-body {
  padding: 1.5rem;
}
.service-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.service-card-body p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.service-price {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary);
  font-weight: 700;
}
.service-price small {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 400;
  margin-right: 0.2rem;
}

/* ============================================================
   SERVICE CARD — Icon variant (no images)
   ============================================================ */
.service-card--icon {
  text-align: center;
  padding: 2.5rem 2rem;
}
.service-card--icon .service-card-body {
  padding: 0;
}
.service-card--icon .service-card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.service-card--icon .service-card-body p {
  font-size: 0.88rem;
}
.services-grid--clean {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ============================================================
   HERO: SPLIT LAYOUT
   ============================================================ */
.hero-split {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  padding: 0;
}
.hero-split .container {
  max-width: 1320px;
}
.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 100vh;
  padding: 7rem 0 4rem;
}
.hero-split-text {
  max-width: 560px;
}
.hero-split-text .hero-eyebrow {
  color: var(--color-primary);
}
.hero-split-text .hero-eyebrow::before,
.hero-split-text .hero-eyebrow::after {
  background: var(--color-primary);
}
.hero-split-text h1 {
  color: var(--color-secondary);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
.hero-split-text h1 em {
  color: var(--color-primary);
  font-style: normal;
}
.hero-split-text > p {
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 480px;
  margin-bottom: 2rem;
}
.hero-split-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.hero-split-stats .hero-stat-number {
  color: var(--color-primary);
}
.hero-split-stats .hero-stat-label {
  color: var(--color-text-muted);
}
.hero-split-image {
  position: relative;
}
.hero-split-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  max-height: 600px;
}
.hero-split-image-accent {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  opacity: 0.12;
  z-index: -1;
}

/* ============================================================
   HERO: CENTERED LAYOUT
   ============================================================ */
.hero-centered {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
}
.hero-centered .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.6) 100%
  );
}
.hero-centered-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 8rem 0 6rem;
}
.hero-centered-content .hero-eyebrow {
  justify-content: center;
}
.hero-centered-content h1 {
  color: var(--color-white);
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-centered-content h1 em {
  font-style: normal;
  color: var(--color-primary-light);
}
.hero-centered-content > p {
  color: rgba(255,255,255,0.88);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.15);
}
.hero-centered-btns {
  justify-content: center;
}
.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}
.hero-centered-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-centered-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: heroScrollPulse 2s ease-in-out infinite;
}
@keyframes heroScrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ============================================================
   HERO: LANDING LAYOUT
   ============================================================ */
.hero-landing {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
}
.hero-overlay--dark {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.75) 100%
  ) !important;
}
.hero-landing-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 0 4rem;
}
.hero-landing-content h1 {
  color: var(--color-white);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
  font-weight: 900;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.hero-landing-content h1 em {
  font-style: normal;
  color: var(--color-accent);
}
.hero-landing-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  max-width: 640px;
  margin: 0 auto 2rem;
}
.hero-landing-phone {
  margin: 2rem auto;
}
.hero-phone-link--xl {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  background: var(--color-accent);
  padding: 0.7rem 2rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}
.hero-phone-link--xl:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 36px rgba(0,0,0,0.4);
}
.hero-landing-btns {
  justify-content: center;
  margin-top: 1.5rem;
}
.hero-landing-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--color-secondary);
  padding: 2.5rem 0;
}
.trust-bar--marquee { overflow: hidden; }
.trust-bar-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trustBarMarquee 22s linear infinite;
}
.trust-bar-item {
  display: inline-block;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  padding: 0 1.75rem;
  position: relative;
}
/* A hairline separator between items, using ::before so the marquee's
   duplicated item list doesn't need an extra separator element per item. */
.trust-bar-item + .trust-bar-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
@keyframes trustBarMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-bar-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } }

/* ============================================================
   GALLERY SECTION
   ============================================================ */
#gallery {
  background: var(--color-secondary);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
#gallery .section-header { color: var(--color-white); }
#gallery .section-header h2 { color: var(--color-white); }
#gallery .section-header .eyebrow { color: var(--color-primary-light); }
#gallery .section-header p { color: rgba(255,255,255,0.65); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 0.75rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gallery-item:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 4; grid-row: span 1; }
.gallery-item:nth-child(3) { grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(4) { grid-column: span 4; grid-row: span 1; }
.gallery-item:nth-child(5) { grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 1; }
.gallery-item:nth-child(7) { grid-column: span 4; grid-row: span 2; }
.gallery-item:nth-child(8) { grid-column: span 4; grid-row: span 1; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44,26,14,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.gallery-overlay svg {
  color: white;
  opacity: 0;
  transform: scale(0.7);
  transition: var(--transition);
  width: 36px;
  height: 36px;
}
.gallery-item:hover .gallery-overlay { background: rgba(44,26,14,0.5); }
.gallery-item:hover .gallery-overlay svg { opacity: 1; transform: scale(1); }

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: white;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.lightbox-close:hover { opacity: 1; }

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
#reviews { background: var(--color-bg); }

.reviews-header-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.google-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: 0.65rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.google-badge img { width: 22px; height: 22px; }
.google-badge-score {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
}
.google-badge-stars { color: #FBBC04; letter-spacing: 0.05em; font-size: 1rem; }
.google-badge-count { font-size: 0.8rem; color: var(--color-text-muted); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform .15s ease-out;
}
.review-card:hover { box-shadow: var(--shadow-md); }

.review-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.reviewer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-alt);
  flex-shrink: 0;
}
.reviewer-avatar-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.reviewer-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-secondary);
  margin-bottom: 0.1rem;
}
.review-date { font-size: 0.78rem; color: var(--color-text-muted); }
.review-stars { color: #FBBC04; font-size: 0.95rem; margin-bottom: 0.75rem; }
.review-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.google-logo-inline {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.google-logo-inline svg { width: 14px; height: 14px; }

/* ============================================================
   CONTACT SECTION
   ============================================================ */
#contact { background: var(--color-white); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
/* The 1fr/1.4fr split (plus a 4rem gap) only has room to breathe on a
   genuinely wide screen — between roughly 768px (where the nav itself
   switches to mobile) and ~960px, both columns were being squeezed into
   a fraction of the available width at once, instead of getting the
   single stacked column .contact-grid already falls back to below 768px.
   Widening that same stacked fallback higher, to under 960px, covers
   that gap without touching the (unrelated) 768px mobile-nav breakpoint. */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
}

.contact-info-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin-bottom: 1.25rem;
}

.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  background: rgba(196,98,45,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.contact-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.contact-info-value {
  font-size: 0.95rem;
  color: var(--color-secondary);
  font-weight: 500;
}
.contact-info-value a:hover { color: var(--color-primary); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.hours-table tr { border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 0.5rem 0; color: var(--color-text-muted); }
.hours-table td:first-child { font-weight: 600; color: var(--color-secondary); width: 40%; }
.hours-table .today td { color: var(--color-primary); font-weight: 600; }

/* Contact Form */
.contact-form {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.contact-form h3,
.contact-form__title {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.95rem;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-submit { width: 100%; justify-content: center; margin-top: 0.5rem; }

.form-success {
  display: none;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin-top: 1rem;
  text-align: center;
}

/* ============================================================
   PAGE HERO BANNER — inner pages (about, services, gallery, contact)
   Real photographic hero so the transparent header has a proper
   surface to sit over, matching the home page.
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 52vh;
  padding: 10rem 0 4rem;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.02);
}
/* Dark gradient overlay so any hero image has AA-safe text on top. */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.75) 100%
    );
}
.page-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  color: #fff;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.page-hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin: 0;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.page-hero .breadcrumbs,
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs span {
  color: rgba(255,255,255,0.85);
}
.page-hero .breadcrumbs a:hover {
  color: #fff;
}

/* ============================================================
   BREADCRUMBS — [8]
   ============================================================ */
.breadcrumbs {
  margin-bottom: 0.75rem;
}
.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.breadcrumbs__item a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs__item a:hover {
  color: var(--color-primary-light);
}
.breadcrumbs__item span[aria-current="page"] {
  color: var(--color-primary-light);
  font-weight: 600;
}
.breadcrumbs__sep {
  color: rgba(255,255,255,0.35);
  font-size: 0.9rem;
  line-height: 1;
  margin-inline-start: 0.15rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--color-bg-dark);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand .site-logo {
  color: var(--color-white);
  margin-bottom: 1rem;
  display: block;
}
.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}
.social-link {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: var(--transition);
}
.social-link:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
  font-size: 0.88rem;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-primary-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom a:hover { color: var(--color-primary-light); }

/* ============================================================
   ANIMATIONS
   — Initial state (opacity/transform) is injected dynamically
     by food_output_dynamic_css() in functions.php so the admin
     can control animation intensity. Only the "arrived" state
     and stagger delays live here.
   ============================================================ */
[data-animate].animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
[data-animate-delay="1"] { transition-delay: 0.08s; }
[data-animate-delay="2"] { transition-delay: 0.16s; }
[data-animate-delay="3"] { transition-delay: 0.24s; }
[data-animate-delay="4"] { transition-delay: 0.32s; }

/* ============================================================
   SCROLL PROGRESS BAR — injected by assets/js/main.js, one shared
   element/rule for every preset rather than per-template markup.
   ============================================================ */
.food-scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0%;
  background: var(--color-primary);
  z-index: 10000;
  pointer-events: none;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 900;
}
#back-to-top.visible { opacity: 1; pointer-events: all; }
#back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-3px); }

/* ============================================================
   EXPANDABLE TEXT — "read more" accordion for long home-page copy
   ============================================================ */
.expandable-text__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}
.expandable-text__more-inner { overflow: hidden; min-height: 0; }
.expandable-text__more.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 0.5rem;
}
.expandable-text__toggle {
  background: none;
  border: none;
  padding: 0.4rem 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.expandable-text__toggle:hover { text-decoration: underline; }
.expandable-text__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   BLOG — Archive & Single Post
   ============================================================ */

/* ── Blog Hero (archive + post) ─────────────────────────── */
.blog-hero {
  position: relative;
  padding: 7rem 0 5rem;
  overflow: hidden;
  text-align: right;
}
.blog-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-primary)   60%,
    var(--color-accent)   100%
  );
}
.blog-hero__inner {
  position: relative;
  z-index: 1;
}
.blog-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.2;
}
.blog-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  max-width: 580px;
  margin: 0;
  line-height: 1.6;
}
.blog-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}
.blog-hero--post .blog-hero__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.post-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.75);
  font-size: 0.88rem;
}
.post-cat-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 2px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.post-cat-badge:hover { background: rgba(255,255,255,0.35); }

/* Wave divider */
.blog-hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
}
.blog-hero__wave svg { display: block; width: 100%; height: 60px; }

/* ── Archive Grid ────────────────────────────────────────── */
.blog-archive-main { padding: 3.5rem 0 4rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* ── Blog Card ───────────────────────────────────────────── */
.blog-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.blog-card__image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__image { transform: scale(1.04); }
.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0.3;
}
.blog-card__cat {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem;
}
.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}
.blog-card__title a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt {
  font-size: 0.88rem;
  color: #6b7280;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-bg-alt);
}
.blog-card__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #9ca3af;
}
.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap 0.2s;
}
.blog-card__read-more:hover { gap: 7px; }

/* Serif/editorial presets read as too "designed" for a generic outline
   icon — drop it for a typographic arrow in the preset's own heading
   font instead. Bold/sans presets keep the solid-triangle svg above. */
body.food-preset-food .blog-card__arrow-icon,
body.food-preset-elegant .blog-card__arrow-icon,
body.food-preset-inboxly .blog-card__arrow-icon,
body.food-preset-bloom .blog-card__arrow-icon,
body.food-preset-gleam .blog-card__arrow-icon { display: none; }
body.food-preset-food .blog-card__read-more::after,
body.food-preset-elegant .blog-card__read-more::after,
body.food-preset-inboxly .blog-card__read-more::after,
body.food-preset-bloom .blog-card__read-more::after,
body.food-preset-gleam .blog-card__read-more::after {
    content: "←";
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1em;
    transition: transform .25s ease;
}
body.food-preset-food .blog-card__read-more:hover::after,
body.food-preset-elegant .blog-card__read-more:hover::after,
body.food-preset-inboxly .blog-card__read-more:hover::after,
body.food-preset-bloom .blog-card__read-more:hover::after,
body.food-preset-gleam .blog-card__read-more:hover::after {
    transform: translateX(-4px);
}

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.blog-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-secondary);
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: all 0.2s;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.blog-empty { text-align: center; padding: 4rem 0; }

/* ── Single Post Layout ──────────────────────────────────── */
.single-post-main { padding: 2.5rem 0 4rem; }

.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

/* ── Main Content Column ─────────────────────────────────── */
.post-content-col { min-width: 0; }

/* Share bar */
.share-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-bg-alt);
}
.share-bar--bottom {
  border-bottom: none;
  border-top: 1px solid var(--color-bg-alt);
  margin-top: 2rem;
  padding-top: 1.25rem;
  margin-bottom: 0;
}
.share-bar__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.share-btn:hover { transform: scale(1.12); opacity: .9; }
.share-btn svg { width: 18px; height: 18px; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--facebook { background: #1877f2; }
.share-btn--twitter  { background: #000; }
.share-btn--linkedin { background: #0077b5; }

/* TOC */
.toc-container {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-secondary);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
}
.toc-toggle {
  background: none;
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
  color: #6b7280;
  transition: transform 0.25s;
}
.toc-toggle.collapsed { transform: rotate(180deg); }
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.5rem 0.75rem;
}
.toc-list:empty { display: none; }
.toc-list li a {
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
  color: var(--color-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  border-right: 2px solid transparent;
}
.toc-list li a:hover,
.toc-list li.toc-active a {
  background: rgba(196,98,45,0.08);
  color: var(--color-primary);
  border-right-color: var(--color-primary);
}
.toc-list li.toc-h3 a { padding-right: 1.5rem; font-size: 0.83rem; }
.toc-desktop { display: block; }
.toc-mobile  { display: none; }

/* Post images & text blocks */
.post-featured-image { margin: 1.5rem 0; }
.post-featured-image__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.post-cta-wrap { margin: 1.5rem 0; }
.post-cta { display: inline-flex; align-items: center; gap: 8px; }

.post-text-block {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.post-text-block--bottom {
  background: var(--color-bg-alt);
  border-right: 3px solid var(--color-primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: #6b7280;
}

/* Entry content (WordPress core content styles) */
.entry-content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
}
.entry-content h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 2rem 0 0.75rem;
  color: var(--color-secondary);
  scroll-margin-top: 90px;
}
.entry-content h3 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
  scroll-margin-top: 90px;
}
.entry-content p { margin-bottom: 1.2rem; }
.entry-content ul,
.entry-content ol {
  padding-right: 1.5rem;
  margin-bottom: 1.2rem;
}
.entry-content li { margin-bottom: 0.4rem; }
.entry-content img { border-radius: var(--radius-sm); max-width: 100%; height: auto; }
.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
}
.entry-content blockquote {
  border-right: 3px solid var(--color-primary);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--color-bg-alt);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content strong { color: var(--color-secondary); }

/* ── Inner-page content (about/services/gallery/contact/faq) ───────────
   These are compiled to plain core Gutenberg blocks (Food_Content_Compiler)
   so they're editable in the block editor, but page-*.php used to render
   them with no wrapper at all — no width constraint, no heading hierarchy,
   default 72px browser H1, columns with no card treatment. This extends
   the same .entry-content typography those page templates now use. */
/* Was hardcoded to 760px (a plain-prose reading measure), but the actual
   content rendered in here — about-page bio/steps/testimonials grids,
   service-detail rows, the contact form section — is structured card/grid
   layout, not a single column of running text, and 760px squeezed all of
   it (that's what made the about page and contact form look far narrower
   than the rest of the site, which uses the same var(--container-max) as
   every home-page section). Match that width everywhere. */
.entry-content--page {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* This block's own <section><div class="container"> already re-applies
   var(--container-max) internally, so the rule below is a no-op width-wise
   now that the parent matches it too — kept so preset contact backgrounds
   (roast/orbit/beam's colored #contact surface) still bleed edge-to-edge
   past var(--container-max) on very wide screens instead of stopping at it. */
.entry-content--page section#contact {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.entry-content--page h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.entry-content--page h1 em { font-style: normal; color: var(--color-primary); }
.entry-content--page h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-secondary);
  margin: 0 0 0.3rem;
}

/* Table of contents — generic, used by page-service-single.php (and any
   future post type) via food_get_post_toc()/food_render_toc_items() in
   functions.php. No prior styling existed anywhere in the theme for this.
   Real <details>/<summary> — a native, accessible dropdown (click to
   collapse/expand) instead of a permanently-open plain list, no JS needed. */
.food-toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin: 0 0 2rem;
}
.food-toc[open] { padding-bottom: 20px; }
.food-toc__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.food-toc__title::-webkit-details-marker { display: none; }
.food-toc__title::after {
  content: '';
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--color-heading);
  border-block-end: 2px solid var(--color-heading);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.food-toc[open] > .food-toc__title::after { transform: rotate(-135deg); }
.food-toc__list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.food-toc__list .toc-item a {
  color: var(--color-link);
  text-decoration: none;
}
.food-toc__list .toc-item a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.food-toc__list .toc-item.toc-h3 {
  padding-inline-start: 1.1rem;
  font-size: 0.92rem;
}
.entry-content--page .is-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
/* Feature columns (about page "18 שנות ניסיון" grid): icon (h3, emoji) +
   title (h4) + description (p), one card per column. */
.entry-content--page .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.entry-content--page .wp-block-column {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.entry-content--page .wp-block-column h3 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}
.entry-content--page .wp-block-column p { margin-bottom: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.entry-content--page .wp-block-buttons { margin-top: 1.5rem; }
.entry-content--page .wp-block-button__link {
  display: inline-block;
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
  border-radius: var(--radius-md);
  padding: 0.85rem 2rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: var(--transition);
}
.entry-content--page .wp-block-button__link:hover { background-color: var(--color-primary-dark) !important; }
/* Gallery page image grid — WordPress's own inline block-support CSS
   (figure.wp-block-image { width: calc(50% - gap/2) }, img { width:auto
   !important }) is more specific than plain class selectors and assumes a
   flex layout, so it fights a simple grid override. Match its specificity
   and beat its !important where needed. */
.entry-content--page .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem !important;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.entry-content--page .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: 100% !important;
  margin: 0;
}
.entry-content--page .wp-block-gallery.has-nested-images figure.wp-block-image img {
  /* Core sets `flex: 1 0 0%` on this img — with flex-basis:0% on the main
     (column) axis, flexbox uses flex-basis instead of `height` to size it,
     so `height` alone (even !important) is ignored no matter how specific
     the selector is. Reset flex-basis to auto so height actually applies. */
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  .entry-content--page .wp-block-columns { grid-template-columns: 1fr 1fr; }
}

/* ── FAQ accordion — generic, preset-agnostic version of the faq-orbit/
   faq-beam accordion (identical rules, just not preset-scoped) so the
   standalone FAQ page always renders Q&A as a collapsible accordion
   regardless of active preset. Shares initFaqAccordion()'s JS. ── */
.faq-section-header { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; }
.faq-accordion-list { max-width: 720px; margin: 0 auto; }
.faq-accordion-item { border-bottom: 1px solid var(--color-border); }
.faq-accordion-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 1.25rem 0;
  text-align: start;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
}
.faq-accordion-toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-accordion-toggle::before,
.faq-accordion-toggle::after {
  content: '';
  position: absolute;
  background: var(--color-heading);
  transition: transform .25s ease;
}
.faq-accordion-toggle::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-accordion-toggle::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.faq-accordion-item.is-open .faq-accordion-toggle::after { transform: rotate(90deg); opacity: 0; }
.faq-accordion-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; }
.faq-accordion-answer > p { overflow: hidden; margin: 0; color: var(--color-text-muted); }
.faq-accordion-item.is-open .faq-accordion-answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }

/* ============================================================
   ABOUT PAGE — richer landing-page-style sections (bio, steps,
   numbered service list, testimonials, closing CTA). Generic,
   preset-agnostic: every color/radius/shadow below is a custom
   property every preset already defines, so this adapts on its
   own regardless of which of the 13 presets is active.
   ============================================================ */

/* Each section gets breathing room and its own max-width so it reads as
   a distinct block within the already-760px-capped .entry-content--page. */
.about-bio, .about-steps, .about-service-list, .about-testimonials, .about-cta {
  margin: 3rem 0;
}

/* ── Bio ─────────────────────────────────────────────────── */
.about-bio {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
.about-bio__media { position: relative; }
.about-bio__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}
.about-bio__badge {
  position: absolute;
  bottom: -14px;
  inset-inline-end: -14px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 72px;
}
.about-bio__badge strong { font-size: 1.3rem; font-family: var(--font-heading); }
.about-bio__badge span { font-size: 0.7rem; opacity: 0.9; }
.about-bio__eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.about-bio__name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-heading);
  margin: 0 0 0.25rem;
}
.about-bio__role { color: var(--color-text-muted); margin-bottom: 1rem; font-weight: 500; }
.about-bio__text p { color: var(--color-text); line-height: 1.8; }
@media (max-width: 640px) {
  .about-bio { grid-template-columns: 1fr; }
  .about-bio__badge { inset-inline-end: 12px; }
}

/* ── Steps ("how it works") ─────────────────────────────── */
.about-steps__head, .about-service-list__head, .about-testimonials__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2rem;
}
.about-steps__eyebrow, .about-service-list__eyebrow, .about-testimonials__eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.about-steps__title, .about-service-list__title, .about-testimonials__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-heading);
  margin: 0 0 0.5rem;
}
.about-steps__intro, .about-service-list__intro, .about-testimonials__intro {
  color: var(--color-text-muted);
}
.about-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}
.about-steps__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}
.about-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.about-steps__card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-heading);
  margin: 0 0 0.4rem;
}
.about-steps__card-desc { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }

/* ── Numbered service list ──────────────────────────────── */
.about-service-list__items { list-style: none; margin: 0; padding: 0; }
.about-service-list__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.about-service-list__index {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 700;
  min-width: 2.5rem;
}
.about-service-list__label { color: var(--color-heading); font-weight: 500; }

/* ── Testimonials ────────────────────────────────────────── */
.about-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.about-testimonials__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.about-testimonials__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.about-testimonials__name { color: var(--color-heading); font-weight: 600; }
.about-testimonials__role { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.about-testimonials__text { color: var(--color-text); margin: 0; line-height: 1.7; }

/* ── Closing CTA ─────────────────────────────────────────── */
.about-cta {
  text-align: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
}
.about-cta__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-heading);
  margin: 0 0 0.5rem;
}
.about-cta__subtitle { color: var(--color-text-muted); margin: 0 0 1.25rem; }
.about-cta__btn { text-decoration: none !important; }

/* ============================================================
   SERVICES PAGE — one detail block per service, alternating sides.
   Same preset-agnostic custom-property pattern as the About page.
   ============================================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: center;
  margin: 3rem 0;
}
.service-detail--reverse { grid-template-columns: 320px 1fr; }
.service-detail--reverse .service-detail__copy { order: 2; }
.service-detail--reverse .service-detail__media { order: 1; }
.service-detail--no-media { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
.service-detail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
}
.service-detail__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-heading);
  margin: 0 0 0.6rem;
}
.service-detail__desc { color: var(--color-text); line-height: 1.75; margin-bottom: 1rem; }
.service-detail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.service-detail__cta { display: inline-block; margin-top: 1.5rem; }
.service-detail__list li { display: flex; align-items: baseline; gap: 0.6rem; color: var(--color-text); }
.service-detail__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.service-detail__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}
@media (max-width: 640px) {
  .service-detail, .service-detail--reverse {
    grid-template-columns: 1fr;
  }
  .service-detail--reverse .service-detail__copy,
  .service-detail--reverse .service-detail__media {
    order: initial;
  }
  .service-detail__media { order: -1; margin-bottom: 1rem; }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 90px;
}

.sidebar-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  border: 1px solid #f0f0f0;
}
.sidebar-card--contact { background: var(--color-primary); }
.sidebar-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  color: var(--color-secondary);
}
.sidebar-card--contact .sidebar-card__title { color: #fff; }

/* Sidebar form */
.sidebar-form { display: flex; flex-direction: column; gap: 0.6rem; }
.sidebar-form__field { }
.sidebar-form__input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: rgba(255,255,255,0.92);
  color: var(--color-secondary);
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}
.sidebar-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}
.sidebar-form__input::placeholder { color: #9ca3af; }
.sidebar-form__submit { width: 100%; margin-top: 0.4rem; justify-content: center; }
.sidebar-form__msg { font-size: 0.82rem; margin-top: 0.4rem; text-align: center; color: rgba(255,255,255,0.9); }
.sidebar-form__msg.error { color: #fca5a5; }

/* TOC in sidebar */
.post-sidebar .toc-container {
  background: var(--color-bg-alt);
  margin-bottom: 0;
  padding: 0;
  border-radius: var(--radius-md);
}
.post-sidebar .toc-container:empty { display: none; }

/* Related posts */
.related-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.related-post__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
.related-post__link:hover { opacity: 0.75; }
.related-post__thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.related-post__thumb--placeholder {
  background: var(--color-bg-alt);
}
.related-post__info { flex: 1; min-width: 0; }
.related-post__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-secondary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-post__date {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 3px;
  display: block;
}

/* ── Blog Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
  .toc-desktop { display: none; }
  .toc-mobile  { display: block; }
  .post-featured-image__img { height: 280px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-hero { padding: 5rem 0 4rem; }
  .blog-hero__wave svg { height: 40px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .about-text { padding: 0; }
  .about-image-badge { right: 1rem; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  /* .nav-phone-btn stays in the flex row even at opacity:0 (it only fades,
     never leaves layout) and its full "icon + phone number" width — plus
     a business name long enough to fill .site-logo's flexible space —
     reliably overflows .header-inner (flex-wrap:nowrap) on narrow
     screens, which in RTL pushes #menu-toggle off-screen to negative-x:
     the hamburger becomes completely unclickable, on every preset, on
     every page. Collapse the phone button to an icon-only tap target
     (still fully functional — tel: link unchanged) and cap the logo so
     a long business name truncates instead of pushing the toggle out. */
  .nav-phone-btn {
    padding: 0.6rem;
    border-radius: 50%;
  }
  .nav-phone-btn__label { display: none; }
  .site-logo {
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
  .gallery-item:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(7) { grid-column: span 2; }
  .hero-stats { gap: 1.5rem; }
  .reviews-header-bar { flex-direction: column; }

  /* Split hero — stack vertically */
  .hero-split-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 6rem 0 3rem;
    gap: 2rem;
  }
  .hero-split-text { max-width: 100%; }
  .hero-split-image-accent { display: none; }
  .hero-split-stats { gap: 1.5rem; }

  /* Landing hero */
  .hero-landing-stats { gap: 1.5rem; flex-wrap: wrap; }

  /* Trust bar */
  .trust-bar-grid { gap: 1rem 2rem; }
}

@media (max-width: 480px) {
  .about-features { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; align-items: flex-start; }
  .hero-stats { flex-direction: column; gap: 1rem; }
  .hero-split-stats { flex-direction: column; gap: 1rem; }
  .hero-landing-stats { flex-direction: column; gap: 1rem; }
  .hero-centered-btns { flex-direction: column; align-items: center; }
  .trust-bar-grid { flex-direction: column; align-items: center; }
}


/* =====================================================================
   FOOD THEME v1.10 — PREMIUM BLOG
   Single layouts (4) + archive layouts (4) + patterns + extras
   ===================================================================== */

/* ── Reading progress bar (sticky top) ─────────────────────── */
.food-reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(0,0,0,.06); z-index: 10000; pointer-events: none;
}
.food-reading-progress__bar {
  height: 100%; width: 0; background: var(--color-primary);
  transition: width .1s linear;
}

/* ── Single hero variants ──────────────────────────────────── */
.single-hero { position: relative; padding: 6rem 0 3rem; }
.single-hero__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-dark));
  z-index: 0;
}
.single-hero__inner { position: relative; z-index: 1; color: #fff; text-align: center; }
.single-hero__title { color: #fff; font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 3rem); margin: .8rem 0; }
.single-hero__wave { position: absolute; bottom: 0; left: 0; right: 0; line-height: 0; }
.single-hero__wave svg { width: 100%; height: 60px; display: block; }

.single-hero--magazine {
  min-height: 480px; padding: 0; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: #fff;
}
.single-hero--magazine .container { position: relative; z-index: 2; padding: 4rem 0; }
.single-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%);
}
.single-hero--magazine .single-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 800px; }
.single-hero__cat {
  display: inline-block; background: var(--color-primary); color: #fff;
  padding: .35rem .9rem; border-radius: var(--radius-sm); font-size: .8rem;
  font-weight: 700; text-decoration: none; letter-spacing: .05em;
}

.single-hero--minimal { background: var(--color-bg); padding: 5rem 0 2rem; }
.single-hero__narrow { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.single-hero__title--minimal { color: var(--color-secondary); font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.single-hero__cat--minimal { background: transparent; color: var(--color-primary); padding: 0; font-weight: 600; }

/* ── Post meta line ────────────────────────────────────────── */
.post-meta-line {
  display: inline-flex; gap: .8rem; align-items: center;
  font-size: .9rem; flex-wrap: wrap; justify-content: center;
}
/* `opacity` on the shared container (removed above) blends EVERY descendant
   with the page background, including .post-meta-cat's AA-checked
   --color-link — a 0.85 blend was enough to drop a borderline vertical's
   link colour under 4.5:1. Dim only the non-link text via a proper
   contrast-safe token instead. */
.post-meta-date, .post-meta-reading, .post-meta-sep { color: var(--color-text-muted); }
.post-meta-cat { color: var(--color-link); text-decoration: none; font-weight: 600; }
.post-meta-cat:hover { text-decoration: underline; }

/* ── Single body widths per layout ─────────────────────────── */
.single-body { padding: 3rem 0; }
.single-body--classic .single-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 3rem;
}
.single-body--wide .single-content { max-width: 900px; margin: 0 auto; }
.single-body--minimal .single-content { max-width: 680px; margin: 0 auto; font-size: 1.05rem; line-height: 1.85; }
.single-body--magazine .single-content { max-width: 900px; margin: 0 auto; }

.single-content { background: #fff; padding: 2rem; border-radius: var(--radius-lg); box-shadow: 0 2px 16px rgba(0,0,0,.04); }
.single-body--minimal .single-content { background: transparent; box-shadow: none; padding: 0; }
.single-featured-image { margin: -2rem -2rem 1.5rem; }
.single-featured-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.single-body--minimal .single-featured-image { margin: 0 0 2rem; }
.single-body--minimal .single-featured-image img { border-radius: var(--radius-md); }

.single-cta { margin: 1.5rem 0 2rem; }

/* ── Share buttons ─────────────────────────────────────────── */
.food-share {
  display: inline-flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; margin: 1rem 0;
}
.food-share__label { font-weight: 600; font-size: .9rem; opacity: .75; margin-inline-end: .25rem; }
.food-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--color-bg-alt); cursor: pointer; color: var(--color-secondary);
  transition: transform .15s, background .15s;
}
.food-share__btn:hover { transform: translateY(-2px); }
.food-share__btn svg { width: 18px; height: 18px; }
.food-share__btn--whatsapp:hover { background: #25D366; color: #fff; }
.food-share__btn--facebook:hover { background: #1877F2; color: #fff; }
.food-share__btn--twitter:hover  { background: #000;    color: #fff; }
.food-share__btn--linkedin:hover { background: #0A66C2; color: #fff; }
.food-share__btn--copy:hover     { background: var(--color-primary); color: #fff; }
.food-share--bottom { justify-content: center; padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,.08); margin-top: 2rem; }
.food-share__copy-toast {
  display: none; background: #111827; color: #fff; padding: .35rem .8rem;
  font-size: .8rem; border-radius: 20px;
}
.food-share__copy-toast.is-visible { display: inline-block; }

/* ── Patterns: pull quote / tips / CTA / recipe / before-after ── */
.food-pullquote {
  border: none !important; border-inline-start: 4px solid var(--color-primary) !important;
  background: var(--color-bg-alt); padding: 1.5rem 1.8rem !important;
  margin: 2rem 0; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}
.food-pullquote p { font-size: 1.3rem; line-height: 1.5; color: var(--color-secondary); margin: 0; }
.food-pullquote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .9rem; opacity: .75; }

.food-tips-box {
  background: linear-gradient(135deg, var(--color-bg-alt), #fff);
  border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem; margin: 2rem 0;
}
.food-tips__heading { margin: 0 0 1rem; color: var(--color-primary); font-size: 1.15rem; }
.food-tips__list { list-style: none; padding: 0; margin: 0; }
.food-tips__item { display: flex; gap: .9rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.food-tips__item:last-child { border-bottom: none; }
.food-tips__num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}

.food-cta-box {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  background: var(--color-secondary); color: #fff;
  padding: 1.8rem 2rem; border-radius: var(--radius-lg);
  margin: 2.5rem 0; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.food-cta-box__body { flex: 1 1 60%; min-width: 220px; }
.food-cta-box__title { color: #fff; margin: 0 0 .35rem; font-size: 1.35rem; }
.food-cta-box__desc  { margin: 0; opacity: .9; }
.food-cta-box__btn { white-space: nowrap; }

.food-recipe-box {
  background: #fff; border: 2px solid var(--color-primary); border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem; margin: 2.5rem 0; box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.food-recipe-box__header { border-bottom: 1px dashed rgba(0,0,0,.1); padding-bottom: 1rem; margin-bottom: 1rem; }
.food-recipe-box__title { color: var(--color-primary); margin: 0 0 .5rem; }
.food-recipe-box__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; opacity: .75; font-size: .9rem; }
.food-recipe-box__steps { padding-inline-start: 0; list-style: none; counter-reset: step; }
.food-recipe-box__steps li {
  padding: .9rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); position: relative; padding-inline-start: 1rem;
}
.food-recipe-box__steps li:last-child { border-bottom: none; }
.food-recipe-box__steps strong { color: var(--color-primary); margin-inline-end: .4rem; }

.food-before-after {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0;
}
.food-before-after__side { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); }
.food-before-after__side img { width: 100%; height: auto; display: block; }
.food-before-after__side figcaption {
  position: absolute; top: .8rem; inset-inline-start: .8rem;
  background: rgba(0,0,0,.7); color: #fff; padding: .3rem .8rem;
  border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600;
}
.food-before-after__side--after figcaption { background: var(--color-primary); }

.food-inline-image { margin: 2rem 0; }
.food-inline-image img { border-radius: var(--radius-md); width: 100%; height: auto; }

.lead-paragraph {
  font-size: 1.2rem !important; line-height: 1.7; opacity: .92;
  border-inline-start: 3px solid var(--color-primary); padding-inline-start: 1rem;
  margin-bottom: 1.5rem;
}

/* ── After-content: author bio + newsletter + related ──────── */
.single-after { background: var(--color-bg-alt); padding: 3rem 0; margin-top: 3rem; }
.food-author-bio {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: #fff; padding: 1.8rem; border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(0,0,0,.04); margin-bottom: 2rem;
}
.food-author-bio__avatar img { border-radius: 50%; display: block; }
.food-author-bio__label { font-size: .8rem; text-transform: uppercase; color: var(--color-primary); font-weight: 700; letter-spacing: .1em; }
.food-author-bio__name { margin: .3rem 0 .6rem; font-size: 1.25rem; }
.food-author-bio__desc { margin: 0 0 .8rem; line-height: 1.6; }
.food-author-bio__link { color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: .9rem; }
.food-author-bio__link:hover { text-decoration: underline; }

.food-newsletter {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff; padding: 2rem; border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.food-newsletter__icon { font-size: 2.5rem; flex-shrink: 0; }
.food-newsletter__body { flex: 1 1 60%; min-width: 240px; }
.food-newsletter__title { margin: 0 0 .3rem; color: #fff; font-size: 1.35rem; }
.food-newsletter__desc  { margin: 0 0 .9rem; opacity: .92; }
.food-newsletter__form  { display: flex; gap: .6rem; max-width: 480px; }
.food-newsletter__form input { flex: 1; padding: .7rem 1rem; border: none; border-radius: var(--radius-sm); font-family: inherit; }
.food-newsletter__form button { white-space: nowrap; }

.food-related { margin-top: 1rem; }
.food-related__title { font-size: 1.5rem; margin-bottom: 1.2rem; }
.food-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.food-related__card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.food-related__card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.food-related__img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.food-related__body { padding: 1rem 1.1rem; }
.food-related__cat { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.food-related__h { font-size: 1.05rem; margin: 0 0 .6rem; line-height: 1.4; }
.food-related__h a { color: var(--color-secondary); text-decoration: none; }
.food-related__h a:hover { color: var(--color-primary); }
.food-related__meta { font-size: .8rem; opacity: .7; display: flex; gap: .5rem; }

/* ── ARCHIVE LAYOUTS ───────────────────────────────────────── */
.food-archive { margin-bottom: 2.5rem; }
.food-archive-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.food-archive-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0,0,0,.1); }
.food-archive-card__img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.food-archive-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.food-archive-card__cat { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; text-decoration: none; }
.food-archive-card__title { font-size: 1.2rem; margin: 0 0 .6rem; line-height: 1.35; }
.food-archive-card__title a { color: var(--color-secondary); text-decoration: none; }
.food-archive-card__title a:hover { color: var(--color-primary); }
.food-archive-card__excerpt { font-size: .95rem; line-height: 1.55; margin: 0 0 .8rem; opacity: .8; }

/* Grid: 3-col responsive */
.food-archive--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

/* List: horizontal cards */
.food-archive--list { display: grid; gap: 1.2rem; }
.food-archive-card--list { display: grid; grid-template-columns: 280px 1fr; gap: 0; }
.food-archive-card--list .food-archive-card__img img { height: 100%; min-height: 180px; }
.food-archive-card--list .food-archive-card__body { padding: 1.4rem 1.8rem; }

/* Magazine: feature + grid */
.food-magazine-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 22px rgba(0,0,0,.08); margin-bottom: 2.5rem; }
.food-magazine-feature__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.food-magazine-feature__body { padding: 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.food-magazine-feature__cat { display: inline-block; background: var(--color-primary); color: #fff; padding: .3rem .9rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; border-radius: var(--radius-sm); text-decoration: none; align-self: flex-start; margin-bottom: 1rem; }
.food-magazine-feature__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .8rem; }
.food-magazine-feature__title a { color: var(--color-secondary); text-decoration: none; }
.food-magazine-feature__title a:hover { color: var(--color-primary); }
.food-magazine-feature__excerpt { font-size: 1rem; line-height: 1.6; opacity: .8; margin: 0 0 1rem; }
.food-magazine-feature__more { color: var(--color-primary); font-weight: 700; text-decoration: none; margin-top: .8rem; }
.food-archive--magazine { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }

/* Masonry */
.food-archive--masonry { columns: 3; column-gap: 1.2rem; }
.food-archive--masonry .food-archive-card { break-inside: avoid; margin-bottom: 1.2rem; display: block; }
.food-archive--masonry .food-archive-card__img img { height: auto; }

@media (max-width: 900px) {
  .single-body--classic .single-grid { grid-template-columns: 1fr; }
  .food-archive-card--list { grid-template-columns: 1fr; }
  .food-archive-card--list .food-archive-card__img img { height: 220px; }
  .food-magazine-feature { grid-template-columns: 1fr; }
  .food-archive--masonry { columns: 2; }
  .food-before-after { grid-template-columns: 1fr; }
  .food-cta-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .food-archive--masonry { columns: 1; }
  .food-author-bio { flex-direction: column; text-align: center; align-items: center; }
  .food-newsletter__form { flex-direction: column; }
}

/* Pagination */
.food-archive-pagination { display: flex; justify-content: center; gap: .5rem; padding: 2rem 0; }
.food-archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .8rem; background: #fff; border-radius: var(--radius-sm); color: var(--color-secondary); text-decoration: none; font-weight: 600; }
.food-archive-pagination .page-numbers.current { background: var(--color-primary); color: #fff; }
.food-archive-pagination .page-numbers:hover:not(.current) { background: var(--color-bg-alt); }


/* =====================================================================
   FOOD THEME v1.16 — DESIGN PRESETS
   Five genuinely distinct visual systems — not just color/radius tweaks.
   Each changes hero composition, section transitions, image treatment,
   card/button geometry and typography rhythm. All colors stay on the
   existing WCAG-safe --color-* tokens computed in food_output_dynamic_css();
   presets only add layout, shape, motion and the --font-preset-accent
   display font (see food_preset_display_font() in functions.php).
   Activated via body.food-preset-{name}. Verticals are auto-mapped
   in functions.php → food_preset_for_vertical(); the wizard can also
   set design_preset explicitly.
   ===================================================================== */

/* ───────────────────────────────────────────────────────────────────
   PRESET: food → "Warm Editorial"
   Restaurant, cafe, bakery, pizza, icecream, bar, asian, catering, market
   Italic serif accents, a soft hill-shaped divider under the hero,
   a gently rotated photo-and-badge collage instead of a flat pair.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-food {
    --radius-card: 20px;
    --radius-btn: 999px;
    --section-py: 5rem;
    --card-shadow: 0 10px 34px rgba(0,0,0,.08);
}
body.food-preset-food .site-logo { font-style: italic; }
body.food-preset-food .section-header .eyebrow {
    font-family: var(--font-preset-accent), serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.3rem 1.1rem;
}
/* ── Hero: real structural variant, not CSS on the shared hero markup —
   see template-parts/section-hero--food.php. Full-bleed photo, copy
   anchored low, italic-serif headline, a scroll cue instead of a stat
   row. Inspired directly by the Wheat&Butter Bakery reference. */
.hero-food {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero-food-media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.hero-food-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(20,12,6,.82) 0%, rgba(20,12,6,.32) 55%, rgba(20,12,6,.15) 100%);
}
.hero-food-container { position: relative; z-index: 2; }
.hero-food-frame { max-width: 640px; }
.hero-food-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-preset-accent), serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-link-on-dark);
    margin-bottom: 1rem;
}
.hero-food-title {
    color: var(--color-white);
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.hero-food-subtitle {
    color: var(--color-text-on-dark-muted);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    max-width: 480px;
    margin-bottom: 2rem;
}
.hero-food-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero-food-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: 999px;
    padding: 0.95rem 2.3rem;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
    transition: transform .25s ease;
}
.hero-food-btn:hover { transform: translateY(-2px); }
.hero-food-link {
    font-family: var(--font-preset-accent), serif;
    font-style: italic;
    color: var(--color-text-on-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.hero-food-scrollcue {
    position: absolute;
    bottom: 1.75rem;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 2;
}
.hero-food-scrollcue span {
    display: block;
    width: 1px; height: 46px;
    background: rgba(255,255,255,.5);
    animation: heroFoodScroll 2s ease-in-out infinite;
}
@keyframes heroFoodScroll {
    0%, 100% { transform: scaleY(1); opacity: .5; }
    50%      { transform: scaleY(.5); opacity: 1; }
}
@media (max-width: 700px) {
    .hero-food { align-items: center; text-align: center; }
    .hero-food-frame { max-width: 100%; }
    .hero-food-actions { justify-content: center; }
}
/* About: gently rotated photo + circular seal badge, stacked and centered
   like a magazine profile — not a flat side-by-side pair. */
body.food-preset-food #about .grid-2 {
    display: block;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
body.food-preset-food #about .about-image-wrap {
    max-width: 440px;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
}
body.food-preset-food #about .about-text { margin-top: 2.5rem; padding: 0; }
body.food-preset-food #about .about-features { max-width: 460px; margin-inline: auto; }
body.food-preset-food #about .btn-group { justify-content: center; }
body.food-preset-food .about-image-wrap {
    border-radius: var(--radius-card);
    /* .about-image-wrap carries data-animate; the scroll-reveal script
       forces transform: translateY(0) !important once revealed, which
       would wipe out a plain `transform: rotate()`. The standalone
       `rotate` property composes independently of `transform`, so it
       survives that reset. */
    rotate: -2deg;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.32);
}
body.food-preset-food .about-image-wrap img { border-radius: var(--radius-card); }
body.food-preset-food .about-image-badge {
    border-radius: 999px;
    transform: rotate(6deg);
    border: 3px solid var(--color-bg);
    width: 108px; height: 108px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.5rem;
}
body.food-preset-food .about-feature { border-top: 1px solid var(--color-border); padding-top: 0.85rem; }
body.food-preset-food .about-feature-icon { display: none; }
/* Services: a horizontal scrollable strip instead of a grid — browses like
   a menu carousel rather than a wall of equal cards. */
body.food-preset-food .services-grid.services-grid--cards,
body.food-preset-food .services-grid.services-grid--clean {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 1.5rem;
    padding-bottom: 0.75rem;
    grid-template-columns: unset;
}
body.food-preset-food .service-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}
body.food-preset-food .service-card,
body.food-preset-food .review-card,
body.food-preset-food .food-archive-card {
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
body.food-preset-food .service-price { font-family: var(--font-preset-accent), serif; font-style: italic; }
body.food-preset-food .btn-primary {
    border-radius: var(--radius-btn);
    padding: 0.9rem 2.2rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
body.food-preset-food .btn-primary:hover { transform: translateY(-2px); }
body.food-preset-food .gallery-item { border-radius: var(--radius-card); }
body.food-preset-food .gallery-item:nth-child(odd)  { transform: rotate(-0.6deg); }
body.food-preset-food .gallery-item:nth-child(even) { transform: rotate(0.6deg); }

/* ───────────────────────────────────────────────────────────────────
   PRESET: elegant → "Atelier Noir"
   Lawyer, accountant, architect, notary, realestate
   Oversized serif display type, alternating full-bleed dark/light
   bands (no organic curves — precision, not playfulness), an offset
   double-frame on photography, borderless numbered service rows.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-elegant {
    --radius-card: 0;
    --radius-btn: 0;
    --section-py: 7rem;
    --card-shadow: none;
}
body.food-preset-elegant h1,
body.food-preset-elegant h2,
body.food-preset-elegant h3 {
    font-family: var(--font-preset-accent), 'Playfair Display', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
body.food-preset-elegant .hero-content h1 { font-size: clamp(3.2rem, 8vw, 6rem); }
body.food-preset-elegant .hero-eyebrow {
    text-transform: uppercase; letter-spacing: 0.3em; font-weight: 500; font-size: 0.72rem;
}
body.food-preset-elegant .hero-eyebrow::before,
body.food-preset-elegant .hero-eyebrow::after { display: none; }
/* ── Hero: a two-part masthead — the title sits alone on a solid dark
   panel in normal flow; the photo is a separate band pinned to the
   bottom of the section, reserved via padding so it never overlaps the
   text. Not a photo with text on top of it; a cover page + a plate. */
body.food-preset-elegant #hero {
    display: block;
    min-height: auto;
    background: var(--color-bg-dark);
    padding: 6rem 0 calc(46vh + 3rem);
}
body.food-preset-elegant .hero-slider,
body.food-preset-elegant .hero-overlay {
    inset: auto 0 0 0;
    height: 46vh;
}
body.food-preset-elegant .hero-overlay { background: linear-gradient(0deg, rgba(4,6,8,.35) 0%, rgba(4,6,8,0) 40%); }
body.food-preset-elegant .container { position: relative; }
body.food-preset-elegant .hero-content { max-width: 900px; padding: 0; }
body.food-preset-elegant .hero-content h1,
body.food-preset-elegant .hero-eyebrow {
    color: var(--color-text-on-dark);
}
body.food-preset-elegant .hero-content p { color: var(--color-text-on-dark-muted); }
body.food-preset-elegant .hero-stats { border-top-color: rgba(255,255,255,.15); }
/* Alternating full-bleed dark band */
body.food-preset-elegant #services,
body.food-preset-elegant #reviews {
    background: var(--color-bg-dark);
}
body.food-preset-elegant #services h2, body.food-preset-elegant #services p, body.food-preset-elegant #services .eyebrow,
body.food-preset-elegant #reviews h2,  body.food-preset-elegant #reviews p,  body.food-preset-elegant #reviews .eyebrow {
    color: var(--color-text-on-dark);
}
body.food-preset-elegant #services .section-header p,
body.food-preset-elegant #reviews .section-header p { color: var(--color-text-on-dark-muted); }
/* About: precise offset double-frame, not a playful tilt */

body.food-preset-elegant .about-image-wrap { border-radius: 0; position: relative; }
body.food-preset-elegant .about-image-wrap::before {
    content: "";
    position: absolute; inset: 18px -18px -18px 18px;
    border: 1px solid var(--color-accent);
    z-index: -1;
}
body.food-preset-elegant .about-image-wrap img { border-radius: 0; }
body.food-preset-elegant .about-image-badge { border-radius: 0; border: 1px solid var(--color-border); box-shadow: none; }
/* Services: borderless, numbered */
body.food-preset-elegant .services-grid { counter-reset: elegant-svc; }
body.food-preset-elegant .service-card,
body.food-preset-elegant .review-card,
body.food-preset-elegant .food-archive-card {
    border: none; border-top: 1px solid var(--color-border);
    border-radius: 0; box-shadow: none; background: transparent;
    counter-increment: elegant-svc;
    padding-top: 1.75rem;
}
body.food-preset-elegant .service-card::before {
    content: counter(elegant-svc, decimal-leading-zero);
    font-family: var(--font-preset-accent), serif;
    font-size: 2.2rem;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.5rem;
}
body.food-preset-elegant .service-card:hover { border-color: var(--color-primary); }
body.food-preset-elegant .btn-primary {
    border-radius: 0; padding: 1rem 2.5rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem;
}
body.food-preset-elegant .btn-outline-dark {
    border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem;
}
body.food-preset-elegant .section-eyebrow,
body.food-preset-elegant .section-header .eyebrow {
    text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500;
}
/* Gallery: uniform grid, inset frame reveal on hover instead of masonry */
body.food-preset-elegant .gallery-grid { grid-auto-rows: 260px; }
body.food-preset-elegant .gallery-item { grid-column: span 3 !important; grid-row: span 1 !important; border-radius: 0; }
body.food-preset-elegant .gallery-item::after {
    content: "";
    position: absolute; inset: 10px;
    border: 1px solid rgba(255,255,255,.7);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
}
body.food-preset-elegant .gallery-item:hover::after { opacity: 1; }

/* ───────────────────────────────────────────────────────────────────
   PRESET: professional → "Trust Clinic"
   Doctor, dentist, psychologist, health, insurance
   Calm and orderly on purpose — no curves, no asymmetry. A calmed
   photo treatment, solid trust badges, bordered stat cards, a uniform
   caption-labelled gallery grid.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-professional {
    --radius-card: 14px;
    --radius-btn: 12px;
    --section-py: 5.5rem;
    --card-shadow: 0 4px 16px rgba(0,0,0,.06);
}
body.food-preset-professional h1,
body.food-preset-professional h2 {
    font-family: var(--font-preset-accent), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}
body.food-preset-professional .hero-slide { filter: saturate(0.85) contrast(1.04); }
body.food-preset-professional .hero-eyebrow {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
}
body.food-preset-professional .hero-eyebrow::before,
body.food-preset-professional .hero-eyebrow::after { display: none; }
/* ── Hero: the stat row becomes a solid card floating over the bottom of
   the photo — a "trust dashboard" widget, not text sitting on an image. */
body.food-preset-professional #hero { padding-bottom: 3rem; }
body.food-preset-professional .hero-stats {
    position: relative;
    z-index: 2;
    border-top: none;
    gap: 1.5rem;
    margin-top: 2.5rem;
    background: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 1.5rem 2rem;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.4);
    max-width: fit-content;
}
body.food-preset-professional .hero-stat-number { color: var(--color-primary); }
body.food-preset-professional .hero-stat-label { color: var(--color-text-muted); }
/* About: ring-framed photo + a horizontal trust bar, not a floating badge */
body.food-preset-professional .about-image-wrap {
    border-radius: var(--radius-card);
    box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 7px var(--color-border);
}
body.food-preset-professional .about-image-wrap img { border-radius: var(--radius-card); }
body.food-preset-professional .about-image-badge {
    position: static;
    width: 100%; margin-top: 1rem;
    border-radius: var(--radius-card);
    display: flex; align-items: baseline; justify-content: center; gap: 0.5rem;
}
/* Services: full-width list rows instead of a card grid — reads like a
   clinic's list of treatments, not a portfolio of products. */
body.food-preset-professional .services-grid.services-grid--clean,
body.food-preset-professional .services-grid.services-grid--cards {
    display: block;
    grid-template-columns: unset;
}
body.food-preset-professional .service-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--radius-card);
    background: var(--color-bg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
}
body.food-preset-professional .service-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 28px rgba(0,0,0,.09);
    transform: none;
}
body.food-preset-professional .btn-primary {
    border-radius: var(--radius-btn);
    padding: 0.85rem 1.8rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* Icon-emphasis: hide service card images, show only typography */
body.food-preset-professional .service-card-image { display: none; }
body.food-preset-professional .service-card-body { padding: 1.5rem 2rem; text-align: start; }
/* Gallery: uniform grid + hover only fades, calm instead of masonry-dramatic */
body.food-preset-professional .gallery-grid { grid-auto-rows: 220px; }
body.food-preset-professional .gallery-item { grid-column: span 3 !important; grid-row: span 1 !important; border-radius: var(--radius-card); }

/* ───────────────────────────────────────────────────────────────────
   PRESET: bold → "Bold Studio"
   Plumber, electrician, AC, pest-control, locksmith, solar
   Oversized display type, a dark full-bleed band joined to the hero by
   an organic curve divider, a dramatically rotated photo collage.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-bold {
    --radius-card: 10px;
    --radius-btn: 8px;
    --section-py: 4rem;
}
body.food-preset-bold h1 {
    font-family: var(--font-preset-accent), 'Heebo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}
body.food-preset-bold h2 { font-weight: 800; }
body.food-preset-bold .hero-overlay {
    background: linear-gradient(180deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.9) 100%);
}
body.food-preset-bold .hero-eyebrow {
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    padding: 0.35rem 1rem;
}
body.food-preset-bold .hero-eyebrow::before,
body.food-preset-bold .hero-eyebrow::after { display: none; }
/* ── Split-panel hero: the photo is a bounded block on one side, not a
   full-bleed background behind everything — a real compositional change,
   not a color/shadow tweak. .hero-content already sits on the physical
   right in RTL (a single flex child with no explicit width, it hugs its
   containing block's start edge) — see the about/services notes below for
   the same "restructure the same elements, don't just restyle them" idea. */
body.food-preset-bold .hero-slider {
    left: 0; right: auto; width: 55%;
}
body.food-preset-bold .hero-overlay {
    left: 0; right: auto; width: 55%;
    background: linear-gradient(to right, rgba(4,6,8,.28) 0%, rgba(4,6,8,.92) 100%);
}
body.food-preset-bold #hero::before {
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0; width: 45%;
    background: var(--color-bg-dark);
    z-index: 0;
}
body.food-preset-bold .hero-content { max-width: 360px; }
body.food-preset-bold .hero-content .btn-group { flex-direction: column; align-items: stretch; gap: 0.75rem; }
body.food-preset-bold .hero-content .btn { justify-content: center; padding-inline: 1.4rem; white-space: normal; }
body.food-preset-bold .hero-content .hero-stats { flex-wrap: wrap; }
/* Organic curve divider — the signature move of this preset */
body.food-preset-bold #hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: var(--color-bg);
    clip-path: ellipse(62% 100% at 50% 100%);
    z-index: 1;
    pointer-events: none;
}
/* Dark full-bleed band, met by its own curve at the top */
body.food-preset-bold #services { background: var(--color-bg-dark); position: relative; }
body.food-preset-bold #services::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 70px;
    background: var(--color-bg-dark);
    clip-path: ellipse(58% 100% at 50% 0%);
    z-index: 1;
    pointer-events: none;
}
body.food-preset-bold #services h2, body.food-preset-bold #services p, body.food-preset-bold #services .eyebrow {
    color: var(--color-text-on-dark);
}
body.food-preset-bold #services .section-header p { color: var(--color-text-on-dark-muted); }
/* ── About: the image and text stop being two side-by-side columns and
   become one full-width photo with the text floating over it as an
   overlapping card — a different composition, not a restyled version of
   the same 2-column layout every other preset uses. */

body.food-preset-bold #about .grid-2 {
    display: block;
    position: relative;
}
body.food-preset-bold #about .about-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
}
/* rotate (not transform) — see the food preset's about-image-wrap comment above */
body.food-preset-bold .about-image-wrap { rotate: -1deg; box-shadow: 0 40px 70px -28px rgba(0,0,0,.4); }
body.food-preset-bold .about-image-badge {
    top: 1.5rem; bottom: auto;
    transform: rotate(6deg);
    background: var(--color-primary);
    border: none;
}
body.food-preset-bold .about-image-badge strong,
body.food-preset-bold .about-image-badge span { color: var(--color-text-on-primary); }
body.food-preset-bold #about .about-text {
    position: relative;
    z-index: 2;
    margin-top: -15%;
    margin-inline-end: 12%;
    padding: 2.5rem;
    background: var(--color-bg);
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.3);
    border-radius: var(--radius-card);
}
@media (max-width: 860px) {
    body.food-preset-bold #about .about-text { margin-top: 1.5rem; margin-inline-end: 0; padding: 1.5rem; }
}
/* ── Services: a featured-plus-list bento instead of a uniform card grid. */
body.food-preset-bold .services-grid {
    counter-reset: bold-svc;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(160px, auto);
}
body.food-preset-bold .service-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
body.food-preset-bold .service-card:nth-child(n+2) {
    grid-column: span 2;
}
@media (max-width: 900px) {
    body.food-preset-bold .services-grid { grid-template-columns: repeat(2, 1fr); }
    body.food-preset-bold .service-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    body.food-preset-bold .service-card:nth-child(n+2) { grid-column: span 2; }
}
body.food-preset-bold .service-card {
    counter-increment: bold-svc;
    border-inline-start: 6px solid var(--color-primary);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--color-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
}
body.food-preset-bold .service-card:nth-child(1) .service-card-body { display: flex; flex-direction: column; justify-content: center; height: 100%; }
body.food-preset-bold .service-card:nth-child(1) .service-card-body h3 { font-size: 1.6rem; }
body.food-preset-bold .service-card-body { position: relative; }
body.food-preset-bold .service-card-body::before {
    content: counter(bold-svc, decimal-leading-zero);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.35rem;
}
body.food-preset-bold .service-card:hover {
    transform: translateX(-4px);
    box-shadow: 6px 0 24px rgba(0,0,0,.12);
}
body.food-preset-bold .btn-primary {
    border-radius: var(--radius-btn);
    padding: 1.1rem 2.4rem;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
}
body.food-preset-bold .hero-phone-link {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-btn);
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
}
body.food-preset-bold .gallery-item { border-radius: var(--radius-card); }
body.food-preset-bold .gallery-item:nth-child(3n+1) { transform: rotate(-1deg); }
body.food-preset-bold .gallery-item:nth-child(3n+2) { transform: rotate(1deg); }

/* ───────────────────────────────────────────────────────────────────
   PRESET: minimal → "Studio Air"
   Consultant, cleaning, handyman, moving, painter
   Maximum whitespace, hairlines only, no shadows and no rotation —
   the visual restraint itself is the differentiator.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-minimal {
    --radius-card: 0;
    --radius-btn: 4px;
    --section-py: 8rem;
}
body.food-preset-minimal h1,
body.food-preset-minimal h2 {
    font-family: var(--font-preset-accent), 'Inter', system-ui, sans-serif;
    font-weight: 300;
    letter-spacing: -0.01em;
}
body.food-preset-minimal h1 strong,
body.food-preset-minimal h1 em { font-weight: 700; font-style: normal; }
body.food-preset-minimal .hero-eyebrow { letter-spacing: 0.35em; font-weight: 400; }
body.food-preset-minimal .hero-eyebrow::before,
body.food-preset-minimal .hero-eyebrow::after { width: 36px; }
/* ── Hero: no photo at all — pure typography on the page background.
   Every other preset is photo-forward; the restraint here of dropping
   the image entirely is itself the structural difference. */
body.food-preset-minimal .hero-slider,
body.food-preset-minimal .hero-overlay,
body.food-preset-minimal .hero-dots { display: none; }
body.food-preset-minimal #hero {
    min-height: auto;
    background: var(--color-bg);
    padding: 9rem 0 5rem;
}
body.food-preset-minimal .hero-eyebrow { color: var(--color-primary); }
body.food-preset-minimal .hero-eyebrow::before,
body.food-preset-minimal .hero-eyebrow::after { background: var(--color-primary); }
body.food-preset-minimal .hero-content h1 { color: var(--color-heading); text-shadow: none; }
body.food-preset-minimal .hero-content h1 em { color: var(--color-primary); }
body.food-preset-minimal .hero-content p { color: var(--color-text-muted); text-shadow: none; }
/* minimal's hero has no photo (plain page background, see #hero above) —
   the dark semi-opaque backdrop the base .btn-outline now adds for photo
   heroes would show as a stray dark smudge here, so reset it. */
body.food-preset-minimal .btn-outline { border-color: var(--color-text); color: var(--color-text); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.food-preset-minimal .btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
body.food-preset-minimal .hero-stats { border-top: 1px solid var(--color-border); gap: 3rem; }
/* About: no floating badge, no rotation — a hairline frame only */
body.food-preset-minimal .about-image-wrap { box-shadow: none; border: 1px solid var(--color-border); border-radius: 0; }
body.food-preset-minimal .about-image-wrap img { border-radius: 0; }
body.food-preset-minimal .about-image-badge {
    position: static; background: transparent; box-shadow: none;
    display: flex; gap: 0.5rem; align-items: baseline; justify-content: flex-start;
    padding: 1rem 0 0; text-align: left; min-width: 0;
}
body.food-preset-minimal .service-card,
body.food-preset-minimal .review-card,
body.food-preset-minimal .food-archive-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--color-border);
    padding: 2rem 0;
}
body.food-preset-minimal .service-card-image { display: none; }
body.food-preset-minimal .btn-primary {
    background: transparent;
    color: var(--color-link);
    border: none;
    padding: 0.4rem 0;
    font-weight: 500;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
}
body.food-preset-minimal .btn-primary::after { content: ' →'; }
body.food-preset-minimal .btn-primary:hover { color: var(--color-link); }
body.food-preset-minimal .section { padding-block: 4rem; }
body.food-preset-minimal .section-eyebrow,
body.food-preset-minimal .section-header .eyebrow {
    font-size: 0.75rem; letter-spacing: 0.2em; opacity: 0.6;
}
/* Gallery: thin uniform grid, no rotation, no overlay drama */
body.food-preset-minimal .gallery-grid { grid-auto-rows: 240px; gap: 2px; }
body.food-preset-minimal .gallery-item { grid-column: span 3 !important; grid-row: span 1 !important; border-radius: 0; }
body.food-preset-minimal .gallery-overlay { background: rgba(255,255,255,.06) !important; }

/* ───────────────────────────────────────────────────────────────────
   PRESET: aurola → "אורורה נמרצת"
   Inspired by the AUROLA ecommerce header shot: a vivid gradient hero,
   an oversized condensed display headline, a blurred accent-color glow
   behind the content. Energetic, not calm — hairdressers, gyms, dance
   studios, anything that wants to feel loud and current.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-aurola {
    --radius-card: 20px;
    --radius-btn: 999px;
    --section-py: 5rem;
    --card-shadow: 0 10px 30px rgba(0,0,0,.1);
}
body.food-preset-aurola .hero-overlay {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 55%, var(--color-accent) 100%);
    opacity: .85;
}
body.food-preset-aurola .hero-slide { filter: saturate(1.15); }
body.food-preset-aurola #hero { overflow: hidden; }
body.food-preset-aurola #hero::before {
    content: "";
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: .35;
    filter: blur(90px);
    top: -120px; inset-inline-end: -120px;
    z-index: 0;
    pointer-events: none;
}
body.food-preset-aurola .hero-content { position: relative; z-index: 2; }
body.food-preset-aurola .hero-content h1 {
    font-family: var(--font-preset-accent), 'Heebo', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
}
body.food-preset-aurola .hero-content h1 em { font-style: normal; color: var(--color-bg); }
body.food-preset-aurola .hero-eyebrow {
    background: var(--color-bg);
    color: var(--color-heading);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    font-weight: 800;
}
body.food-preset-aurola .hero-eyebrow::before,
body.food-preset-aurola .hero-eyebrow::after { display: none; }
body.food-preset-aurola .btn-primary {
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1rem 2.2rem;
}
body.food-preset-aurola .btn-outline { border-width: 3px; }
body.food-preset-aurola .service-card {
    border-radius: var(--radius-card);
    border-top: 6px solid var(--color-accent);
    box-shadow: var(--card-shadow);
}
body.food-preset-aurola .gallery-item { border-radius: var(--radius-card); }

/* ───────────────────────────────────────────────────────────────────
   PRESET: inboxly → "ציורי ורך"
   Inspired by the Inboxly email-marketing shot: a soft, rounded inset
   photo (not full-bleed, not hard-edged like Bold Studio's split), an
   italic serif emphasis word in the headline, and a small floating
   notification-style card overlapping the photo's corner.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-inboxly {
    --radius-card: 24px;
    --radius-btn: 999px;
    --section-py: 5.5rem;
}
body.food-preset-inboxly .hero-content h1 em {
    font-family: var(--font-preset-accent), serif;
    font-style: italic;
    font-weight: 500;
    color: var(--color-primary-light);
}
body.food-preset-inboxly #hero { overflow: hidden; }
body.food-preset-inboxly .hero-slider,
body.food-preset-inboxly .hero-overlay {
    left: 4%; right: auto; width: 46%;
    top: 3rem; bottom: 3rem; height: auto;
    border-radius: 28px;
}
body.food-preset-inboxly .hero-slider { overflow: hidden; }
body.food-preset-inboxly .hero-overlay { background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 55%); }
body.food-preset-inboxly .hero-content { max-width: 460px; }
body.food-preset-inboxly #hero::after {
    content: "עדכון חדש התקבל";
    position: absolute;
    left: calc(4% + 30px);
    bottom: 4.5rem;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 45px -15px rgba(0,0,0,.35);
    padding: 0.8rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 3;
}
@media (max-width: 860px) {
    body.food-preset-inboxly #hero { display: block; min-height: auto; }
    body.food-preset-inboxly .hero-slider {
        /* stays position:relative (not static) — its own .hero-slide children
           are position:absolute;inset:0 and need a positioned ancestor to
           confine them to this 260px box, not the tall #hero behind it */
        position: relative;
        width: 100%; flex: none;
        height: 260px; margin-bottom: 1.5rem; inset: auto;
        border-radius: 20px;
        overflow: hidden;
    }
    /* The overlay exists for text-on-photo contrast; on mobile the photo is
       its own block above the text (not behind it), so it isn't needed —
       and the text now sits on the plain page background, so it needs the
       normal dark-on-light tokens instead of the white-on-photo ones. */
    body.food-preset-inboxly .hero-overlay { display: none; }
    body.food-preset-inboxly #hero::after { display: none; }
    body.food-preset-inboxly .hero-content { max-width: 100%; }
    body.food-preset-inboxly .hero-content h1 { color: var(--color-heading); text-shadow: none; }
    body.food-preset-inboxly .hero-content h1 em { color: var(--color-primary); }
    body.food-preset-inboxly .hero-content p { color: var(--color-text-muted); text-shadow: none; }
    body.food-preset-inboxly .hero-eyebrow { color: var(--color-primary); }
}
body.food-preset-inboxly .about-image-wrap { border-radius: var(--radius-card); }
body.food-preset-inboxly .about-image-wrap img { border-radius: var(--radius-card); }
body.food-preset-inboxly .service-card { border-radius: var(--radius-card); }
body.food-preset-inboxly .gallery-item { border-radius: var(--radius-card); }

/* ───────────────────────────────────────────────────────────────────
   PRESET: lifecoach → "אנרגיה אישית" — real structural variant, not a
   CSS reskin. See template-parts/section-hero--lifecoach.php. A split
   hero where the photo is a bounded portrait panel (not full-bleed),
   two floating achievement badges overlapping the photo, and an
   avatar-stack trust row under the CTAs instead of a stat bar.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-lifecoach {
    --radius-card: 24px;
    --radius-btn: 999px;
}
/* Header contrast for this hero (no dark image behind the transparent
   header on load) is handled in functions.php's WCAG hard-override
   block, alongside the existing food-layout-split/error404 exceptions. */
.hero-lifecoach {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(6rem, 10vw, 8rem) 0 4rem;
    overflow: hidden;
}
.hero-lifecoach-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero-lifecoach-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.hero-lifecoach-title {
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}
.hero-lifecoach-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    max-width: 480px;
    margin-bottom: 2rem;
}
.hero-lifecoach-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.25rem; }
.hero-lifecoach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-btn);
    padding: 0.95rem 1.9rem;
    font-weight: 700;
    transition: transform .2s ease;
}
.hero-lifecoach-btn:hover { transform: translateY(-2px); }
.hero-lifecoach-btn-outline {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    color: var(--color-heading);
    border-radius: var(--radius-btn);
    padding: 0.95rem 1.9rem;
    font-weight: 600;
}
.hero-lifecoach-trust { display: flex; align-items: center; gap: 0.9rem; }
.hero-lifecoach-avatars { display: flex; }
.hero-lifecoach-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--color-bg);
    margin-inline-start: -10px;
}
.hero-lifecoach-avatar:first-child { margin-inline-start: 0; }
.hero-lifecoach-trust-text { color: var(--color-text-muted); font-size: 0.9rem; }
.hero-lifecoach-trust-text strong { color: var(--color-heading); }

.hero-lifecoach-media-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    overflow: visible;
}
.hero-lifecoach-media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
}
.hero-lifecoach-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg);
    border-radius: 16px;
    padding: 0.85rem 1.15rem;
    box-shadow: 0 20px 45px -15px rgba(0,0,0,.3);
    max-width: 220px;
}
.hero-lifecoach-badge-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    background: var(--color-accent);
}
.hero-lifecoach-badge strong { display: block; font-size: 0.85rem; color: var(--color-heading); }
.hero-lifecoach-badge small { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.hero-lifecoach-badge--1 { bottom: 12%; inset-inline-end: -8%; }
.hero-lifecoach-badge--2 { top: 38%; inset-inline-start: -10%; }

@media (max-width: 900px) {
    .hero-lifecoach-container { grid-template-columns: 1fr; }
    /* .hero-lifecoach-media stays position:absolute in the desktop rule,
       which takes it out of flow — without resetting it here, the static
       badges below would render at the top of the (now content-sized) wrap
       and visually overlap the photo instead of stacking after it. */
    .hero-lifecoach-media-wrap { order: -1; aspect-ratio: auto; margin-bottom: 1.5rem; }
    .hero-lifecoach-media { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
    .hero-lifecoach-badge--1, .hero-lifecoach-badge--2 { position: static; margin-top: 0.75rem; max-width: 100%; }
}

/* Shared section header used by services/gallery/reviews/contact below —
   same eyebrow + title language as the hero and about section. */
.services-lifecoach-header { max-width: 640px; margin-bottom: 3rem; }
.services-lifecoach-header .about-lifecoach-title { margin-bottom: 0.75rem; }

/* ── About: bounded portrait + floating badge, checklist not icon-boxes ── */
.about-lifecoach-container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-lifecoach-media-wrap { position: relative; }
.about-lifecoach-media {
    width: 100%; height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
}
.about-lifecoach-badge {
    position: absolute;
    bottom: -1.25rem;
    inset-inline-start: -1.25rem;
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
    border-radius: 18px;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 20px 45px -15px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.about-lifecoach-badge strong { font-size: 1.8rem; font-weight: 800; }
.about-lifecoach-badge span { font-size: 0.8rem; opacity: 0.85; }
.about-lifecoach-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.about-lifecoach-title { font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.about-lifecoach-body { color: var(--color-text-muted); margin-bottom: 1rem; }
.about-lifecoach-checklist { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.about-lifecoach-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; }
.about-lifecoach-checklist svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 20px; height: 20px;
    padding: 3px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
}
.about-lifecoach-checklist span { color: var(--color-text-muted); }
.about-lifecoach-checklist strong { color: var(--color-heading); }
.about-lifecoach-cta { margin-top: 0.5rem; }

@media (max-width: 900px) {
    .about-lifecoach-container { grid-template-columns: 1fr; }
    .about-lifecoach-badge { bottom: -1rem; inset-inline-start: 1rem; }
}

/* ── Services: three raised "track" cards, middle one featured ── */
.services-lifecoach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}
.service-lifecoach-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}
.service-lifecoach-card--featured {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: translateY(-1rem);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.service-lifecoach-card--featured h3 { color: var(--color-text-on-secondary); }
/* Compound class (not just ".service-lifecoach-card--featured p") on
   purpose: ".service-lifecoach-card p" below sets color too, at the exact
   same specificity (one class + one element) — a plain ".service-
   lifecoach-card--featured p" ties with it and loses on source order,
   leaving the featured card's dark-on-dark description text. The
   compound selector outranks it for real instead of depending on which
   rule happens to come last. */
.service-lifecoach-card.service-lifecoach-card--featured p { color: var(--color-text-on-secondary); }
.service-lifecoach-tag {
    position: absolute;
    top: -0.85rem;
    inset-inline-start: 1.75rem;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}
.service-lifecoach-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    border-radius: 16px;
    background: var(--color-accent);
    margin-bottom: 1.25rem;
}
.service-lifecoach-step {
    position: absolute;
    top: 2.25rem;
    inset-inline-end: 1.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    opacity: 0.5;
}
.service-lifecoach-card--featured .service-lifecoach-step { color: var(--color-text-on-secondary); }
.service-lifecoach-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.6rem; }
.service-lifecoach-card p { color: var(--color-text-muted); flex-grow: 1; margin-bottom: 1.25rem; }
.service-lifecoach-price { font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem; }
.service-lifecoach-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.service-lifecoach-card--featured .service-lifecoach-link { color: var(--color-accent); }

@media (max-width: 900px) {
    .services-lifecoach-grid { grid-template-columns: 1fr; }
    .service-lifecoach-card--featured { transform: none; }
}

/* ── Gallery: uniform grid, always-visible frosted caption bar ──
   #gallery (base theme ID) defaults to a DARK background with higher
   specificity than a bare class — #id.class here so this section's
   intended light page background actually wins. */
#gallery.gallery-lifecoach { background: var(--color-bg); }
.gallery-lifecoach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.gallery-lifecoach-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
}
.gallery-lifecoach-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-lifecoach-item:hover img { transform: scale(1.06); }
.gallery-lifecoach-caption {
    position: absolute;
    inset-inline: 0; bottom: 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
@media (max-width: 900px) { .gallery-lifecoach-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Reviews: one large featured quote + smaller supporting cards ── */
.reviews-lifecoach-featured {
    position: relative;
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
    border-radius: var(--radius-card);
    padding: clamp(2.5rem, 5vw, 4rem);
    margin: 0 0 2.5rem;
    max-width: 820px;
}
.reviews-lifecoach-mark {
    display: block;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}
.reviews-lifecoach-featured blockquote {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 1.75rem;
}
.reviews-lifecoach-featured figcaption { display: flex; align-items: center; gap: 0.9rem; }
.reviews-lifecoach-featured figcaption strong { display: block; color: var(--color-text-on-secondary); }
.reviews-lifecoach-avatar { flex-shrink: 0; margin-inline-start: 0 !important; border-color: var(--color-secondary); }
.reviews-lifecoach-score-badge {
    position: absolute;
    top: -1.25rem;
    inset-inline-end: clamp(1.5rem, 4vw, 3rem);
}
.reviews-lifecoach-support {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.reviews-lifecoach-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1.75rem;
}
.reviews-lifecoach-card p { color: var(--color-text-muted); margin: 0.75rem 0 1.25rem; }
.reviews-lifecoach-support-name { display: flex; align-items: center; gap: 0.6rem; }
.reviews-lifecoach-support-name .review-date { color: var(--color-text-muted); font-size: 0.8rem; margin-inline-start: auto; }

@media (max-width: 900px) {
    .reviews-lifecoach-support { grid-template-columns: 1fr; }
    .reviews-lifecoach-score-badge { position: static; margin-top: 1.5rem; display: inline-flex; }
}

/* ── Contact: dark trust panel + light pill-form panel ── */
.contact-lifecoach-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.contact-lifecoach-panel {
    background: var(--color-secondary);
    color: var(--color-text-on-secondary);
    padding: clamp(2rem, 4vw, 3rem);
}
.contact-lifecoach-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-lifecoach-row:first-child { padding-top: 0; }
.contact-lifecoach-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    border-radius: 12px;
    background: var(--color-accent);
}
.contact-lifecoach-label { display: block; font-size: 0.78rem; opacity: 0.7; margin-bottom: 0.2rem; }
.contact-lifecoach-row a, .contact-lifecoach-row div > a { color: var(--color-text-on-secondary); font-weight: 600; }
.contact-lifecoach-hours { margin-top: 1.25rem; }
.contact-lifecoach-hours p { opacity: 0.85; }
.contact-lifecoach-hours-row { display: flex; justify-content: space-between; padding: 0.4rem 0; opacity: 0.85; font-size: 0.9rem; }
.contact-lifecoach-form-wrap { background: var(--color-bg); padding: clamp(2rem, 4vw, 3rem); }
.contact-lifecoach-form .form-group input,
.contact-lifecoach-form .form-group select,
.contact-lifecoach-form .form-group textarea {
    border-radius: 14px;
}
.contact-lifecoach-form .form-row .form-group:first-child input { border-radius: 999px; }

@media (max-width: 960px) {
    .contact-lifecoach-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────
   PRESET: bloom → "פריחה עדינה" — real structural variant, not a CSS
   reskin. See template-parts/section-*--bloom.php. Split hero with a
   rounded solid-color media panel (not a photo background) plus a
   4-icon trust bar, full-width alternating color-block service
   banners, a staggered look-book gallery, pastel-toned review cards,
   and a single unified contact card. All panels are rounded and sit
   below the header's top padding (no full-bleed edge), so — like
   lifecoach — this hero has no dark backdrop behind the transparent
   header; see the functions.php WCAG exception list for that fix.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-bloom {
    --radius-card: 28px;
    --radius-btn: 999px;
}

/* Tone palette shared by service banners + review cards (cycled by index) */
body.food-preset-bloom .service-bloom-banner--tone1,
body.food-preset-bloom .review-bloom-card--tone1 { background: #FBE7EC; }
body.food-preset-bloom .service-bloom-banner--tone2,
body.food-preset-bloom .review-bloom-card--tone2 { background: #ECF3E8; }
body.food-preset-bloom .service-bloom-banner--tone3,
body.food-preset-bloom .review-bloom-card--tone3 { background: #EFEAF7; }

/* ── Hero ── */
/* #hero (shared by ID across every hero variant) defaults to
   display:flex/row/align-center/min-height:100vh — this hero stacks a
   split row on top of a trust bar, so override all of that. */
.hero-bloom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: clamp(6rem, 10vw, 8rem) 0 0;
}
.hero-bloom-split {
    /* #hero (shared by ID across every hero variant) sets display:flex on
       this section — without an explicit width, this div would shrink-to-fit
       as that flex item instead of stretching full width. */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.hero-bloom-copy { flex: 1 1 52%; }
.hero-bloom-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 0.9rem;
}
.hero-bloom-title {
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.hero-bloom-title em { color: var(--color-primary); font-style: italic; }
.hero-bloom-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    max-width: 460px;
    margin-bottom: 2rem;
}
.hero-bloom-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-btn);
    padding: 0.95rem 1.9rem;
    font-weight: 700;
    transition: transform .2s ease;
}
.hero-bloom-btn:hover { transform: translateY(-2px); }
.hero-bloom-btn-arrow {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.15em;
    line-height: 1;
}
.hero-bloom-btn--outline {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
}

.hero-bloom-media {
    position: relative;
    flex: 1 1 48%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-secondary);
}
.hero-bloom-media-img { width: 100%; height: 100%; object-fit: cover; }

.hero-bloom-trustbar { width: 100%; box-sizing: border-box; background: var(--color-bg-alt); padding: 1.75rem 0; }
.hero-bloom-trustbar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}
.hero-bloom-trust-item { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 200px; }
.hero-bloom-trust-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    border-radius: 12px;
    background: #fff;
}
.hero-bloom-trust-item strong { display: block; font-size: 0.9rem; color: var(--color-heading); }
.hero-bloom-trust-item small { display: block; font-size: 0.78rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
    .hero-bloom-split { flex-direction: column; }
    .hero-bloom-media { width: 100%; aspect-ratio: 4 / 3; }
}

/* ── About ── */
.about-bloom-container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-bloom-media-frame {
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-secondary);
    padding: 0.6rem;
}
.about-bloom-media { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius-card) - 0.6rem); }
.about-bloom-eyebrow { display: inline-block; font-weight: 700; font-size: 0.85rem; color: var(--color-primary); margin-bottom: 0.75rem; }
.about-bloom-title { font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.about-bloom-body { color: var(--color-text-muted); margin-bottom: 1rem; }
.about-bloom-tiles { display: flex; gap: 1rem; margin: 1.5rem 0; }
.about-bloom-tile { flex: 1; border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.about-bloom-tile--1 { background: #FBE7EC; }
.about-bloom-tile--2 { background: #ECF3E8; }
.about-bloom-tile strong { color: var(--color-heading); }
.about-bloom-tile span { font-size: 0.85rem; color: var(--color-text-muted); }
.about-bloom-cta { margin-top: 0.5rem; }

@media (max-width: 900px) {
    .about-bloom-container { grid-template-columns: 1fr; }
    .about-bloom-tiles { flex-direction: column; }
}

/* ── Services: full-width alternating color-block banners ── */
.services-bloom-header { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.services-bloom-header .about-bloom-title { margin-bottom: 0.75rem; }
.service-bloom-banner { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.service-bloom-banner-inner {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}
.service-bloom-banner--flip .service-bloom-banner-inner { flex-direction: row-reverse; }
.service-bloom-banner-text { flex: 1 1 50%; }
.service-bloom-banner-text h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; margin-bottom: 0.75rem; }
.service-bloom-banner-text p { color: var(--color-text-muted); margin-bottom: 1rem; max-width: 460px; }
.service-bloom-price { display: block; font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem; }
.service-bloom-banner-media { flex: 1 1 42%; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.service-bloom-banner-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .service-bloom-banner-inner, .service-bloom-banner--flip .service-bloom-banner-inner { flex-direction: column; }
}

/* ── Gallery: staggered look-book grid ──
   #gallery (base theme ID) defaults to a DARK background with higher
   specificity than a bare class — #id.class here so this section's
   intended light page background actually wins. */
#gallery.gallery-bloom { background: var(--color-bg); }
.gallery-bloom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.gallery-bloom-item { border-radius: var(--radius-card); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; }
.gallery-bloom-item--2 { aspect-ratio: 3 / 5; margin-top: 2rem; }
.gallery-bloom-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-bloom-item:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
    .gallery-bloom-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-bloom-item--2 { margin-top: 0; }
}

/* ── Reviews: pastel-toned cards ── */
.reviews-bloom-score { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; color: var(--color-heading); }
.reviews-bloom-score span:first-child { color: var(--color-primary); }
.reviews-bloom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-bloom-card { border-radius: var(--radius-card); padding: 1.75rem; }
.review-bloom-card p { color: var(--color-text); margin: 0.75rem 0 1.25rem; }
.review-bloom-name strong { display: block; color: var(--color-heading); }
.review-bloom-name span { font-size: 0.8rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
    .reviews-bloom-grid { grid-template-columns: 1fr; }
}

/* ── Contact: one unified pastel card ── */
.contact-bloom-card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 0;
    background: #FBE7EC;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.contact-bloom-info { padding: clamp(2rem, 4vw, 3rem); }
.contact-bloom-info h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; }
.contact-bloom-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-bloom-info-list li { display: flex; align-items: flex-start; gap: 0.85rem; }
.contact-bloom-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    border-radius: 12px;
    background: #fff;
}
.contact-bloom-info-list em { display: block; font-style: normal; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.contact-bloom-info-list a { font-weight: 600; color: var(--color-heading); }
.contact-bloom-form-wrap { background: var(--color-bg); padding: clamp(2rem, 4vw, 3rem); }
.contact-bloom-form-wrap .form-group input,
.contact-bloom-form-wrap .form-group select,
.contact-bloom-form-wrap .form-group textarea { border-radius: 14px; }

@media (max-width: 960px) {
    .contact-bloom-card { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────
   PRESET: gleam → "זוהר יוקרתי" — real structural variant, not a CSS
   reskin. See template-parts/section-*--gleam.php. Full-bleed dark
   navy hero with a signature-piece chip row, a text-forward about
   with a 3-card feature row (no image), an asymmetric mosaic +
   smaller-card services layout, a circular-thumbnail gallery, a
   single full-bleed dark quote band for reviews (no card grid), and a
   centered gold-bordered contact card. This hero HAS a genuine dark
   backdrop (a real photo + gradient, full height) so — unlike
   bloom/lifecoach — it does NOT need an entry in the functions.php
   transparent-header exception list; the default white nav text is
   correct here.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-gleam {
    --radius-card: 4px;
    --radius-btn: 4px;
}

/* ── Hero ── */
.hero-gleam {
    background-size: cover;
    background-position: center;
}
.hero-gleam-content {
    /* #hero (shared by ID) is display:flex — without an explicit
       width this would shrink-to-fit instead of centering properly. */
    width: 100%;
    box-sizing: border-box;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    /* position:relative + z-index needed now that .hero-slider/.hero-gleam-scrim
       are real positioned layers (multi-slide support) instead of a single
       background-image painted directly on #hero — without this the
       positioned slider/scrim would stack above this in-flow content and
       cover the text (see .hero-content/.hero-centered-content for the
       same established pattern). */
    position: relative;
    z-index: 2;
}
.hero-gleam-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,18,41,.55), rgba(15,18,41,.92));
    z-index: 1;
}
.hero-gleam-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.hero-gleam-title {
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1.5rem;
}
.hero-gleam-title em { color: var(--color-primary); font-style: italic; }
.hero-gleam-subtitle {
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 2.25rem;
}
.hero-gleam-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-btn);
    padding: 1rem 2.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.hero-gleam-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}
.hero-gleam-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,.85);
}
.hero-gleam-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

/* ── About: text-forward, no image, 3-card feature row ── */
.about-gleam-intro { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
.about-gleam-eyebrow { color: var(--color-primary); }
.about-gleam-title { font-weight: 500; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.25; margin-bottom: 1rem; color: var(--color-heading); }
.about-gleam-body { color: var(--color-text-muted); margin-bottom: 0.5rem; }
.about-gleam-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--color-primary); margin-top: 1rem; }
.about-gleam-link-arrow { font-family: var(--font-heading); font-style: italic; font-size: 1.15em; line-height: 1; }
.about-gleam-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.about-gleam-feature { text-align: center; padding: 2rem 1.5rem; border: 1px solid var(--color-border); border-radius: 2px; }
.about-gleam-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.about-gleam-feature h3 { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.6rem; }
.about-gleam-feature p { color: var(--color-text-muted); font-size: 0.92rem; }

@media (max-width: 900px) {
    .about-gleam-features { grid-template-columns: 1fr; }
}

/* ── Services: asymmetric mosaic + smaller card row ── */
.services-gleam-header { margin-bottom: 3rem; }
.services-gleam-mosaic {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.services-gleam-mosaic-tile { position: relative; border-radius: 2px; overflow: hidden; aspect-ratio: 3 / 4; }
.services-gleam-mosaic-tile--2 { margin-top: 3rem; aspect-ratio: 1 / 1; }
.services-gleam-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; }
.services-gleam-mosaic-caption {
    position: absolute;
    inset-inline: 0; bottom: 0;
    padding: 1.5rem;
    background: linear-gradient(0deg, rgba(15,18,41,.88), rgba(15,18,41,0));
    color: #fff;
}
/* color:#fff must be explicit here, not inherited from the parent's
   dark-gradient caption background — the site-wide `h1,h2,h3,h4,h5,h6
   { color: var(--color-secondary) }` rule directly targets every heading
   tag, and a direct match always wins over an inherited value regardless
   of selector specificity, so without this the title rendered in the
   site's dark heading colour on top of an already-dark photo. */
.services-gleam-mosaic-caption h3 { font-weight: 600; margin-bottom: 0.4rem; color: #fff; }
.services-gleam-mosaic-caption p { font-size: 0.88rem; opacity: 0.85; margin-bottom: 0.4rem; }
.services-gleam-price { display: inline-block; font-weight: 700; color: var(--color-primary); }
.services-gleam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service-gleam-card { padding: 1.75rem; border: 1px solid var(--color-border); border-radius: 2px; text-align: center; }
.service-gleam-card h3 { font-weight: 600; margin-bottom: 0.6rem; }
.service-gleam-card p { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 0.75rem; }

@media (max-width: 900px) {
    .services-gleam-mosaic { grid-template-columns: 1fr; }
    .services-gleam-mosaic-tile--2 { margin-top: 0; }
    .services-gleam-grid { grid-template-columns: 1fr; }
}

/* ── Gallery: circular thumbnail grid ── */
.gallery-gleam-eyebrow, .gallery-gleam-title { color: #fff; }
.gallery-gleam-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
}
.gallery-gleam-item { text-align: center; cursor: pointer; }
.gallery-gleam-circle {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-primary);
    margin-bottom: 0.85rem;
}
.gallery-gleam-circle img { width: 100%; height: 100%; object-fit: cover; }
.gallery-gleam-caption { font-size: 0.85rem; color: rgba(255,255,255,.75); }

@media (max-width: 900px) {
    .gallery-gleam-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reviews: single full-bleed dark quote band ── */
/* #reviews/#contact (base theme IDs) set their own background with
   higher specificity than a bare class — #id.class here to win
   legitimately instead of fighting it with !important. Reused by both
   the reviews section (#reviews) and the contact section, which
   deliberately reuses this class (#contact) — see section-contact--gleam.php. */
/* Background is the guaranteed-dark palette slot (--color-bg-dark), NOT
   --color-secondary: these bands hardcode white text, but --color-secondary
   is not guaranteed dark across palettes — a light/bright secondary (e.g. a
   lime or pastel) put white text on a light band = unreadable. --color-bg-dark
   is the palette's "near-black" slot by contract, so white text always reads.
   Fallback #0f172a covers palettes that omit the var entirely. */
#reviews.reviews-gleam,
#contact.reviews-gleam { background: var(--color-bg-dark, #0f172a); color: #fff; text-align: center; }
#gallery.gallery-gleam { background: var(--color-bg-dark, #0f172a); }
.reviews-gleam-inner { max-width: 760px; margin: 0 auto; }
.reviews-gleam-stars { color: var(--color-primary); font-size: 1.1rem; margin: 1rem 0; }
.reviews-gleam-quote {
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.45;
    margin: 0 0 1.5rem;
}
.reviews-gleam-name { font-style: normal; color: var(--color-primary); font-weight: 700; }
.reviews-gleam-score { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: rgba(255,255,255,.75); }
.reviews-gleam-score strong { color: #fff; }

/* ── Contact: centered gold-bordered card on a dark band ── */
.contact-gleam-header { margin-bottom: 2.5rem; }
/* color:#fff explicit — this class is used on an <h2> (see
   section-contact--gleam.php), and the site-wide h1-h6 rule directly
   targets every heading tag, which always wins over the dark band's
   inherited white text regardless of specificity (same bug as the
   services mosaic caption above). */
.contact-gleam-title { font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; }
.contact-gleam-desc { color: rgba(255,255,255,.7); }
.contact-gleam-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    padding: clamp(2rem, 4vw, 3rem);
}
.contact-gleam-info-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); }
.contact-gleam-info-item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-heading); font-weight: 600; font-size: 0.92rem; }
.contact-gleam-form .form-group input,
.contact-gleam-form .form-group select,
.contact-gleam-form .form-group textarea { border-radius: 2px; }

/* ───────────────────────────────────────────────────────────────────
   PRESET: roast → "אספרסו נועז" — real structural variant, not a CSS
   reskin. See template-parts/section-*--roast.php. Full-bleed dark
   hero with an opening-hours top bar and a huge stacked condensed
   headline, an "organic blob corner" photo shape reused across
   about/gallery/reviews (this preset's signature motif), a dark
   filterable menu-list for services, and a two-column contact split.
   This hero has a genuine dark backdrop (full-bleed photo), so —
   like gleam — it does NOT need an entry in the functions.php
   transparent-header exception list.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-roast {
    --radius-card: 20px;
    --radius-btn: 999px;
    --radius-blob: 20px 20px 20px 140px;
}

/* ── Hero ── */
.hero-roast {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-size: cover;
    background-position: center;
    /* The fixed #site-header (z-index 1000, ~80px tall) floats over this
       hero with no document-flow height of its own — without this, its
       first child (the hours bar, or the content block when there's no
       hours line) renders directly underneath it. */
    padding-top: clamp(5rem, 9vw, 6.5rem);
}
.hero-roast-hoursbar {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.85rem 0;
    text-align: center;
}
.hero-roast-hoursbar strong { color: var(--color-accent); }
.hero-roast-content {
    /* position:relative + z-index needed now that .hero-slider/.hero-roast-scrim
       are real positioned layers (multi-slide support) instead of a single
       background-image painted directly on #hero. */
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0 4rem;
}
.hero-roast-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(58,32,32,.45), rgba(58,32,32,.85));
    z-index: 1;
}
.hero-roast-eyebrow {
    display: inline-block;
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
.hero-roast-title {
    font-family: var(--font-preset-accent, var(--font-heading));
    font-weight: 400;
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero-roast-title--sm { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.hero-roast-title-line { display: block; }
.hero-roast-title-line--1 { color: var(--color-primary); }
.hero-roast-title-line--2 { color: #fff; }
.hero-roast-title-line--3 { color: var(--color-accent); }
.hero-roast-subtitle { color: rgba(255,255,255,.85); max-width: 480px; margin-bottom: 2rem; font-size: 1.05rem; }
.hero-roast-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-roast-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-btn);
    padding: 0.95rem 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* Transparent white-on-photo ghost button — same fix as the base
   .btn-outline: a guaranteed dark backdrop so it's never swallowed by a
   light patch of the hero photo behind it. */
.hero-roast-btn--outline {
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1.5px solid rgba(255,255,255,.5);
    color: #fff;
}
.hero-roast-play { display: inline-flex; align-items: center; gap: 0.75rem; color: #fff; font-size: 0.9rem; }
.hero-roast-play-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.5);
}

/* ── About: organic blob-corner photo + dual CTA ── */
.about-roast-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-roast-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-blob); }
.about-roast-eyebrow { display: inline-block; color: var(--color-primary); font-weight: 700; margin-bottom: 0.75rem; }
.about-roast-title { font-family: var(--font-preset-accent, var(--font-heading)); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.about-roast-body { color: var(--color-text-muted); margin-bottom: 1rem; }
.about-roast-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-roast-header { max-width: 640px; margin: 0 auto 3rem; text-align: center; }

@media (max-width: 900px) {
    .about-roast-container { grid-template-columns: 1fr; }
}

/* ── Services: dark filterable menu list ── */
/* #services/#gallery/#contact (base theme IDs) each set their own
   background with higher specificity than a bare class — #id.class
   below so these sections' intended backgrounds actually win instead
   of fighting the base rules with !important. */
#services.services-roast { background: var(--color-secondary); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.services-roast-header .about-roast-eyebrow,
.services-roast-header .about-roast-title { color: #fff; }
.services-roast-panel { background: rgba(0,0,0,.15); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.5rem); }
.services-roast-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.services-roast-chip { padding: 0.5rem 1.25rem; border-radius: 999px; color: rgba(255,255,255,.65); font-weight: 600; font-size: 0.9rem; }
.services-roast-chip.is-active { background: var(--color-accent); color: var(--color-text-on-accent); }
.services-roast-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; }
.services-roast-item { display: flex; gap: 1rem; align-items: center; }
.services-roast-item-media { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.services-roast-item-media img { width: 100%; height: 100%; object-fit: cover; }
.services-roast-item-text h3 { color: var(--color-accent); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.3rem; }
.services-roast-item-text p { color: rgba(255,255,255,.7); font-size: 0.88rem; margin-bottom: 0.35rem; }
.services-roast-price { color: #fff; font-weight: 700; }

@media (max-width: 900px) {
    .services-roast-list { grid-template-columns: 1fr; }
}

/* ── Gallery: blob-corner product row ── */
#gallery.gallery-roast { background: var(--color-bg); }
.gallery-roast-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.gallery-roast-item { cursor: pointer; text-align: center; }
.gallery-roast-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-blob); margin-bottom: 0.75rem; }
.gallery-roast-caption { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }

@media (max-width: 900px) {
    .gallery-roast-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reviews: blob-corner photo + single quote ── */
.reviews-roast-container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.reviews-roast-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-blob); }
.reviews-roast-quote { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.5; margin: 1rem 0 1.5rem; color: var(--color-heading); }
.reviews-roast-attribution { display: flex; align-items: center; gap: 0.85rem; }
.reviews-roast-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: #fff; font-weight: 700;
}
.reviews-roast-attribution small { display: block; color: var(--color-text-muted); font-size: 0.8rem; }

@media (max-width: 900px) {
    .reviews-roast-container { grid-template-columns: 1fr; }
}

/* ── Contact: dark headline column + light form card ── */
#contact.contact-roast { background: var(--color-secondary); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.contact-roast-container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact-roast-desc { color: rgba(255,255,255,.75); margin: 1rem 0; }
.contact-roast-info-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-roast-info-list em { font-style: normal; color: rgba(255,255,255,.55); margin-inline-end: 0.5rem; }
.contact-roast-info-list a { color: #fff; font-weight: 600; }
.contact-roast-form-wrap { background: var(--color-bg); border-radius: var(--radius-card); padding: clamp(1.75rem, 3vw, 2.5rem); }
.contact-roast-form .form-group input,
.contact-roast-form .form-group select,
.contact-roast-form .form-group textarea { border-radius: 12px; }
.contact-roast-map { grid-column: 1 / -1; border-radius: var(--radius-card); overflow: hidden; height: 350px; margin-top: 1rem; }

@media (max-width: 960px) {
    .contact-roast-container { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────
   PRESET: orbit → "מסלול צמיחה" — real structural variant with real
   motion, not just fade-ins. See template-parts/section-*--orbit.php
   and the "orbit" module in assets/js/main.js. A typewriter-animated
   hero eyebrow, a continuously spinning circular badge (shared by
   hero/about), count-up stat numbers, an auto-rotating testimonial
   card stack, an infinite marquee ticker, and a single-open FAQ
   accordion. This hero has a genuine dark solid backdrop (not a
   photo), so — like gleam/roast — it does NOT need an entry in the
   functions.php transparent-header exception list.
   ─────────────────────────────────────────────────────────────────── */
body.food-preset-orbit {
    --radius-card: 20px;
    --radius-btn: 999px;
}

/* ── Shared: spinning circular badge (hero + about) ── */
.orbit-badge {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}
.orbit-badge-ring {
    position: absolute;
    inset: 0;
    animation: orbitSpin 14s linear infinite;
}
.orbit-badge-char {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-heading);
    transform-origin: 0 55px;
}
.orbit-badge-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--color-primary);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .orbit-badge-ring { animation: none; }
}

/* ── Typewriter cursor ── */
[data-typewriter].is-typing::after,
[data-typewriter].is-done::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-inline-start: 3px;
    background: currentColor;
    vertical-align: middle;
    animation: orbitBlink 1s step-end infinite;
}
@keyframes orbitBlink { 50% { opacity: 0; } }

/* ── Hero ── */
.hero-orbit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-secondary);
}
.hero-orbit-container {
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(6.5rem, 11vw, 8.5rem) 0 3rem;
}
.hero-orbit-eyebrow {
    display: block;
    color: var(--color-text-on-secondary);
    opacity: 0.65;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    min-height: 1.4em;
}
.hero-orbit-title {
    /* Hardcoded #fff assumed --color-secondary is always dark, but that's
       a user-customizable color (design_secondary_color) with no
       guarantee — same WCAG-checked token every other on-secondary
       surface in this theme already uses (service-lifecoach cards,
       reviews, contact panels), just missing here. */
    color: var(--color-text-on-secondary);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.hero-orbit-subtitle { color: rgba(255,255,255,.7); max-width: 460px; margin-bottom: 2rem; }
.hero-orbit-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-orbit-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-btn);
    padding: 0.95rem 1.9rem;
    font-weight: 700;
}
.hero-orbit-btn--ghost {
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
}

.hero-orbit-media-wrap { position: relative; }
.hero-orbit-media { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/5; }
.hero-orbit-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-orbit-rating {
    position: absolute;
    bottom: 1.25rem;
    inset-inline-start: -1.25rem;
    background: #fff;
    border-radius: 16px;
    padding: 0.9rem 1.2rem;
    box-shadow: 0 20px 45px -15px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    color: var(--color-heading);
}
.hero-orbit-rating-stars { color: var(--color-primary); font-size: 0.85rem; }
.hero-orbit-rating span { font-size: 0.75rem; color: var(--color-text-muted); }
.hero-orbit-badge { position: absolute; top: -1.5rem; inset-inline-end: -1.5rem; }
.hero-orbit-badge .orbit-badge-char,
.hero-orbit-badge .orbit-badge-center { color: #fff; }
/* color was var(--color-dark) — a token meant for dark SURFACES (footer
   bg etc.), not guaranteed readable as TEXT on this badge's own
   --color-primary background. On any vertical whose primary color is
   itself on the dark side, the two nearly match and the badge number/
   icon becomes close to invisible. --color-text-on-primary is the
   WCAG-checked pairing every other primary-coloured surface already uses. */
.hero-orbit-badge .orbit-badge-center { background: var(--color-primary); border-radius: 50%; color: var(--color-text-on-primary); }

.hero-orbit-scrollcue {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-orbit-scrollcue-ring {
    position: absolute;
    width: 40px; height: 40px;
    border: 1px dashed rgba(255,255,255,.35);
    border-radius: 50%;
    animation: orbitSpin 8s linear infinite;
}
.hero-orbit-scrollcue svg { color: #fff; }

@media (max-width: 900px) {
    .hero-orbit-container { grid-template-columns: 1fr; }
    .hero-orbit-media-wrap { order: -1; }
    .hero-orbit-rating { inset-inline-start: 0.75rem; }
    .hero-orbit-badge { inset-inline-end: 0.75rem; }
}

/* ── About ── */
.about-orbit-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-orbit-media-wrap { position: relative; }
.about-orbit-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-card); }
.about-orbit-badge { position: absolute; bottom: -1.5rem; inset-inline-start: -1.5rem; background: var(--color-bg); border-radius: 50%; box-shadow: 0 15px 35px -12px rgba(0,0,0,.3); }
.about-orbit-badge .orbit-badge-center { background: var(--color-primary); border-radius: 50%; color: var(--color-text-on-primary); }
.about-orbit-eyebrow { color: var(--color-text-muted); }
.about-orbit-title { font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.about-orbit-body { color: var(--color-text-muted); margin-bottom: 1rem; }
.about-orbit-checklist { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.about-orbit-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; }
.about-orbit-checklist svg { flex-shrink: 0; margin-top: 0.2rem; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); }
.about-orbit-checklist span { color: var(--color-text-muted); }
.about-orbit-checklist strong { color: var(--color-heading); }
.about-orbit-cta { margin-top: 0.5rem; color: var(--color-heading) !important; border-color: var(--color-border) !important; }

@media (max-width: 900px) {
    .about-orbit-container { grid-template-columns: 1fr; }
    .about-orbit-badge { bottom: -1rem; inset-inline-start: 1rem; }
}

/* ── Services: dark numbered list ── */
/* #services/#gallery/#contact (base theme IDs) each set their own
   background with higher specificity than a bare class — #id.class
   below so these sections' intended backgrounds actually win instead
   of fighting the base rules with !important. */
#services.services-orbit { background: var(--color-secondary); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.services-orbit-header { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.services-orbit-header .about-orbit-eyebrow,
.services-orbit-title { color: #fff; }
.services-orbit-subtitle { color: rgba(255,255,255,.65) !important; }
.services-orbit-list { border-top: 1px solid rgba(255,255,255,.12); }
.services-orbit-row {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.services-orbit-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.35);
    color: transparent;
    flex-shrink: 0;
    width: 4rem;
}
.services-orbit-text { flex: 1; }
.services-orbit-text h3 { color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
.services-orbit-text p { color: rgba(255,255,255,.65); }
.services-orbit-price { display: inline-block; margin-top: 0.5rem; color: var(--color-primary); font-weight: 700; }
.services-orbit-arrow {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background .2s ease, color .2s ease;
}
.services-orbit-arrow:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }

@media (max-width: 900px) {
    .services-orbit-row { flex-wrap: wrap; }
    .services-orbit-arrow { order: 1; }
}

/* ── Gallery: stat counters + marquee ── */
#gallery.gallery-orbit { background: var(--color-bg); }
.gallery-orbit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.gallery-orbit-stat {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.gallery-orbit-stat strong { display: block; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--color-heading); margin-bottom: 0.5rem; }
.gallery-orbit-stat span { color: var(--color-text-muted); font-size: 0.9rem; }

.gallery-orbit-marquee { overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.5rem 0; }
.gallery-orbit-marquee-track { display: flex; align-items: center; width: max-content; animation: orbitMarquee 26s linear infinite; }
.gallery-orbit-marquee-item { font-size: 1.3rem; font-weight: 700; color: var(--color-heading); white-space: nowrap; padding: 0 1rem; }
.gallery-orbit-marquee-star { color: var(--color-primary); font-size: 1.1rem; }
@keyframes orbitMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gallery-orbit-marquee-track { animation: none; } }

@media (max-width: 900px) {
    .gallery-orbit-stats { grid-template-columns: 1fr; }
}

/* ── Reviews: auto-rotating card stack ── */
.reviews-orbit-header { text-align: center; max-width: 560px; margin: 0 auto 3rem; }
.reviews-orbit-stack {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    min-height: 320px;
}
.reviews-orbit-card {
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    opacity: 0;
    transform: rotate(4deg) scale(0.96);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    z-index: 1;
}
.reviews-orbit-card.is-active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    pointer-events: auto;
    z-index: 2;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.25);
}
.reviews-orbit-card-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.reviews-orbit-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-secondary);
    color: #fff;
    font-weight: 700;
}
.reviews-orbit-card-head small { display: block; color: var(--color-text-muted); font-size: 0.8rem; }
.reviews-orbit-card p { color: var(--color-text); line-height: 1.6; }
.reviews-orbit-card-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); font-weight: 700; color: var(--color-heading); }
.reviews-orbit-quote { font-size: 1.6rem; color: var(--color-primary); line-height: 1; }

/* ── FAQ accordion ── */
.faq-orbit-list { max-width: 720px; margin: 0 auto; }
.faq-orbit-item { border-bottom: 1px solid var(--color-border); }
.faq-orbit-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: 0;
    padding: 1.25rem 0;
    text-align: start;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}
.faq-orbit-toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-orbit-toggle::before,
.faq-orbit-toggle::after {
    content: '';
    position: absolute;
    background: var(--color-heading);
    transition: transform .25s ease;
}
.faq-orbit-toggle::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-orbit-toggle::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.faq-orbit-item.is-open .faq-orbit-toggle::after { transform: rotate(90deg); opacity: 0; }
.faq-orbit-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-orbit-answer > p { overflow: hidden; margin: 0; color: var(--color-text-muted); }
.faq-orbit-item.is-open .faq-orbit-answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }
.faq-orbit-answer { overflow: hidden; }

/* ── Contact ── */
#contact.contact-orbit { background: var(--color-secondary); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.contact-orbit-container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact-orbit-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.75rem; }
.contact-orbit-info-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-orbit-info-list em { font-style: normal; color: rgba(255,255,255,.5); margin-inline-end: 0.5rem; }
.contact-orbit-info-list a { color: #fff; font-weight: 600; }
.contact-orbit-form-wrap { background: var(--color-bg); border-radius: var(--radius-card); padding: clamp(1.75rem, 3vw, 2.5rem); }
.contact-orbit-form .form-group input,
.contact-orbit-form .form-group select,
.contact-orbit-form .form-group textarea { border-radius: 12px; }
.contact-orbit-map { grid-column: 1 / -1; border-radius: var(--radius-card); overflow: hidden; height: 350px; margin-top: 1rem; }

@media (max-width: 960px) {
    .contact-orbit-container { grid-template-columns: 1fr; }
}

/* ============================================================
   PRESET: BEAM ("מגדל אמון")
   Corporate/engineering supervision genre. Rectangular radius
   tokens (not pill-shaped like orbit/roast) and a full-bleed dark
   navy hero with a stat-strip card that straddles the hero/about
   seam are this preset's signature, un-reused-elsewhere motifs.
   ============================================================ */
body.food-preset-beam {
    --radius-card: 14px;
    --radius-btn: 10px;
}

/* ── Buttons (shared hero + contact) ── */
.hero-beam-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-btn);
    padding: 0.95rem 1.9rem;
    font-weight: 700;
}
.hero-beam-btn--ghost {
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
}
.hero-beam-btn--outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-heading) !important; }

/* ── Hero ── */
.hero-beam {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 88vh;
    padding-top: clamp(6.5rem, 11vw, 8.5rem);
}
.hero-beam-content {
    /* position:relative + z-index needed now that .hero-slider/.hero-beam-scrim
       are real positioned layers (multi-slide support) instead of a single
       background-image painted directly on #hero. */
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    padding-bottom: clamp(4rem, 8vw, 6rem);
}
.hero-beam-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,23,45,.35), rgba(11,23,45,.88));
    z-index: 1;
}
.hero-beam-eyebrow {
    display: inline-block;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-btn);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.hero-beam-title { color: #fff; font-weight: 800; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.18; margin-bottom: 1rem; }
.hero-beam-subtitle { color: rgba(255,255,255,.75); max-width: 520px; margin-bottom: 2rem; font-size: 1.05rem; }
.hero-beam-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-beam-statbar { position: relative; z-index: 3; }
.hero-beam-statbar-inner {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 25px 55px -20px rgba(11,23,45,.4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    transform: translateY(50%);
    overflow: hidden;
}
.hero-beam-stat {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-inline-start: 1px solid var(--color-border);
}
.hero-beam-stat:first-child { border-inline-start: 0; }
.hero-beam-stat strong { display: block; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; color: var(--color-heading); margin-bottom: 0.25rem; }
.hero-beam-stat span { color: var(--color-text-muted); font-size: 0.85rem; }

@media (max-width: 700px) {
    /* On mobile the hero must stack as a column so the content block and the
       stat bar each take the full width. Without this, .hero-beam stays a
       flex row and .hero-beam-statbar shrinks to its content width (~160px),
       pinning the stats into a narrow strip in one corner with dead space
       beside it. Confirmed live on a 430px viewport. */
    .hero-beam { flex-direction: column; align-items: stretch; }
    .hero-beam-content { max-width: 100%; }
    .hero-beam-statbar { width: 100%; }
    /* Keep the 3 stats across (they read as a compact strip) rather than the
       previous single-column stack, which — combined with the width bug above
       — collapsed into three tall skinny boxes. Trim padding so the short
       Hebrew labels sit comfortably at ~1/3 width on a phone. */
    .hero-beam-statbar-inner { grid-template-columns: repeat(3, 1fr); }
    .hero-beam-stat { padding: 1.25rem 0.6rem; }
}

/* ── About: the section below the hero needs headroom so the
   straddling stat-strip card (translateY 50%, ~1 stat-row tall)
   doesn't overlap its own copy. ── */
.about-beam { padding-top: clamp(6rem, 11vw, 9rem); }
.about-beam-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.about-beam-media-wrap { position: relative; }
.about-beam-media { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.about-beam-media img { width: 100%; height: auto; aspect-ratio: 6/5; object-fit: cover; }
.about-beam-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.about-beam-tag {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-heading);
}
.about-beam-eyebrow { display: inline-block; background: var(--color-bg); color: var(--color-primary); border: none; padding: 0.35rem 0.85rem; font-weight: 700; font-size: 0.82rem; }
.about-beam-title { font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.2; margin: 0.75rem 0 1.25rem; }
.about-beam-quote {
    border-inline-start: 3px solid var(--color-primary);
    margin: 0 0 1.5rem;
    padding: 0.25rem 0 0.25rem 0;
    padding-inline-start: 1.25rem;
}
.about-beam-quote-mark { font-size: 2rem; color: var(--color-primary); line-height: 1; font-family: Georgia, serif; }
.about-beam-quote p { font-size: 1.1rem; font-weight: 600; color: var(--color-heading); line-height: 1.5; margin: 0.25rem 0 0.5rem; }
.about-beam-quote cite { font-style: normal; color: var(--color-text-muted); font-size: 0.88rem; }
.about-beam-body { color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.7; }
.about-beam-cta { margin-top: 0.75rem; }

@media (max-width: 900px) {
    .about-beam-container { grid-template-columns: 1fr; }
}

/* ── Services: sticky-pinned photo beside a scrolling card stack ── */
#services.services-beam { background: var(--color-bg); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.services-beam-header { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.services-beam-subtitle { color: var(--color-text-muted); }
.services-beam-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.services-beam-media-wrap { position: sticky; top: 100px; }
.services-beam-media { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-border); }
.services-beam-media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.services-beam-list { display: flex; flex-direction: column; gap: 1.25rem; }
.services-beam-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: clamp(1.5rem, 3vw, 2rem);
    position: relative;
}
.services-beam-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-btn);
    background: var(--color-bg);
    color: var(--color-primary);
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
.services-beam-card h3 { font-weight: 700; font-size: 1.15rem; color: var(--color-heading); margin-bottom: 0.5rem; }
.services-beam-card p { color: var(--color-text-muted); line-height: 1.6; }

@media (max-width: 900px) {
    .services-beam-layout { grid-template-columns: 1fr; }
    .services-beam-media-wrap { position: static; }
}

/* ── Gallery: interactive "specialties" tabs ──
   One content panel (image + copy + CTA) for whichever project is active,
   a vertical stack of buttons beside it to switch. Click handler in
   assets/js/main.js (initGalleryBeamTabs()) just toggles is-active. */
#gallery.gallery-beam { background: var(--color-bg); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.gallery-beam-tabs {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.75rem;
    align-items: stretch;
}
.gallery-beam-tabs-panels {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    /* flex (not plain block) so the one visible panel stretches to fill
       this container's FULL height — which itself comes from the outer
       .gallery-beam-tabs grid's align-items:stretch matching the nav
       column. Without this, the panel only grew to its own min-height,
       leaving empty space below the image whenever the button list
       (arbitrary N items) was taller than that fixed min-height. */
    display: flex;
}
.gallery-beam-tabs-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 340px;
    width: 100%;
}
.gallery-beam-tabs-panel.is-active { display: grid; }
.gallery-beam-tabs-media { height: 100%; overflow: hidden; }
.gallery-beam-tabs-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-beam-tabs-copy {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.gallery-beam-tabs-copy h3 { font-size: 1.2rem; font-weight: 700; color: var(--color-heading); margin: 0; }
.gallery-beam-tabs-copy .gallery-beam-location { color: var(--color-primary); font-size: 0.85rem; font-weight: 600; margin: 0; }
.gallery-beam-tabs-copy .gallery-beam-desc { color: var(--color-text-muted); font-size: 0.94rem; line-height: 1.65; margin: 0 0 0.4rem; }
.gallery-beam-tabs-cta { align-self: flex-start; }

.gallery-beam-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.gallery-beam-tabs-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: start;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    padding: 0.9rem 1.1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gallery-beam-tabs-icon {
    flex-shrink: 0;
    display: flex;
    color: inherit;
}
.gallery-beam-tabs-btn:hover { border-color: var(--color-primary); }
.gallery-beam-tabs-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

@media (max-width: 900px) {
    .gallery-beam-tabs { grid-template-columns: 1fr; }
    .gallery-beam-tabs-nav { flex-direction: row; flex-wrap: wrap; }
    .gallery-beam-tabs-btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
    .gallery-beam-tabs-panel { grid-template-columns: 1fr; min-height: 0; }
    .gallery-beam-tabs-media { height: 200px; }
}

/* ── Reviews reinterpreted: "why choose us" vertical timeline ── */
.reviews-beam-timeline { max-width: 780px; margin: 0 auto; position: relative; }
.reviews-beam-timeline::before {
    content: '';
    position: absolute;
    top: 0.4rem; bottom: 0.4rem;
    inset-inline-start: 1.3rem;
    width: 2px;
    background: var(--color-border);
}
.reviews-beam-item { display: flex; gap: 1.5rem; padding-bottom: 2.5rem; position: relative; }
.reviews-beam-item:last-child { padding-bottom: 0; }
.reviews-beam-num {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}
.reviews-beam-text h3 { font-weight: 700; font-size: 1.15rem; color: var(--color-heading); margin-bottom: 0.5rem; }
.reviews-beam-text p { color: var(--color-text-muted); line-height: 1.7; }

/* ── FAQ accordion (identical behavior to faq-orbit, own classes) ── */
.faq-beam-list { max-width: 720px; margin: 0 auto; }
.faq-beam-item { border-bottom: 1px solid var(--color-border); }
.faq-beam-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: 0;
    padding: 1.25rem 0;
    text-align: start;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}
.faq-beam-toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-beam-toggle::before,
.faq-beam-toggle::after {
    content: '';
    position: absolute;
    background: var(--color-heading);
    transition: transform .25s ease;
}
.faq-beam-toggle::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-beam-toggle::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.faq-beam-item.is-open .faq-beam-toggle::after { transform: rotate(90deg); opacity: 0; }
.faq-beam-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; }
.faq-beam-answer > p { overflow: hidden; margin: 0; color: var(--color-text-muted); }
.faq-beam-item.is-open .faq-beam-answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }

/* ── Contact ── */
#contact.contact-beam { background: var(--color-secondary); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.contact-beam-container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact-beam-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.75rem; }
.contact-beam-info-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.contact-beam-info-list em { font-style: normal; color: rgba(255,255,255,.5); margin-inline-end: 0.5rem; }
.contact-beam-info-list a { color: #fff; font-weight: 600; }
.contact-beam-form-wrap { background: #fff; border-radius: var(--radius-card); padding: clamp(1.75rem, 3vw, 2.5rem); }
.contact-beam-form .form-group input,
.contact-beam-form .form-group select,
.contact-beam-form .form-group textarea { border-radius: 8px; }
.contact-beam-map { grid-column: 1 / -1; border-radius: var(--radius-card); overflow: hidden; height: 350px; margin-top: 1rem; }

@media (max-width: 960px) {
    .contact-beam-container { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION UTILITY CLASSES (food-u-*)
   A small, deliberately bounded vocabulary for after-the-fact per-section
   nudges, applied by adding the class to a section block's native
   "Additional CSS classes" field (Advanced panel in the block editor).
   food_render_section_block() injects that class onto the section's own
   outer element. Built for the agency-delivery model: a designer/developer
   makes the common "move it up a bit / reduce the gap / hide on mobile"
   tweaks without dropping to raw CSS, while everything else stays governed
   by the preset for consistency.

   Scope is honest on purpose: the reliable levers are the section's OUTER
   margin (position + the gap between sections — works regardless of how a
   given preset distributes its internal padding) plus visibility and text
   alignment. The padding overrides below only affect sections that own their
   own vertical padding; where a preset puts padding on an inner container
   they will do nothing, and that's expected. !important is intentional —
   these are opt-in, single-section overrides meant to win over preset CSS.
   ============================================================ */

/* Position & gap between sections (outer margin — structure-agnostic) */
.food-u-nudge-up      { margin-top: -2rem !important; }
.food-u-nudge-up-lg   { margin-top: -4rem !important; }
.food-u-nudge-down    { margin-top: 2rem !important; }
.food-u-gap-less      { margin-bottom: -2rem !important; }
.food-u-gap-less-lg   { margin-bottom: -4rem !important; }
.food-u-gap-more      { margin-bottom: 2rem !important; }
.food-u-flush         { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Inner vertical padding (only where the section owns its padding) */
.food-u-pad-less      { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.food-u-pad-more      { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.food-u-flush-top     { padding-top: 0 !important; }
.food-u-flush-bottom  { padding-bottom: 0 !important; }

/* Alignment (affects text-level content) */
.food-u-center        { text-align: center !important; }
.food-u-start         { text-align: start !important; }

/* Visibility */
.food-u-hide          { display: none !important; }
@media (max-width: 640px)  { .food-u-hide-mobile  { display: none !important; } }
@media (min-width: 641px)  { .food-u-hide-desktop { display: none !important; } }