/*
Theme Name: Zap Group theme
Theme URI: https://zapgroup.co.il
Description: A modern WordPress theme for local businesses — professionals, tradespeople and services. Multiple layout styles and starter designs, SEO optimized.
Version: 1.9.0
Author: Zap Group
Author URI: https://zapgroup.co.il
Text Domain: zapgroup
Tags: business, restaurant, cafe, services, 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 zapgroup_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 —
   .zg-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.
   ============================================================ */
.zg-slider-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.zg-slider-viewport::-webkit-scrollbar { display: none; }
.zg-slider-track { display: flex; gap: 1.25rem; }
.zg-slider-item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
}
@media (min-width: 700px) {
    .zg-slider-item { flex-basis: 46%; max-width: 46%; }
}
@media (min-width: 1000px) {
    .zg-slider-item { flex-basis: 31.5%; max-width: 31.5%; }
}
.zg-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
}
.zg-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;
}
.zg-slider-arrow:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }
.zg-slider-dots { display: flex; gap: 0.5rem; }
.zg-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;
}
.zg-slider-dot.is-active { background: var(--color-primary); width: 22px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    .zg-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. */
.zg-logos-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
}
.zg-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;
}
.zg-logos-item img:hover { filter: grayscale(0) opacity(1); }
.zg-logos .zg-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 zapgroup's established [class*="..."]
   pattern for cross-preset fixes). Separate from, and does not
   touch, the [data-animate] scroll-reveal system (functions.php's
   zapgroup_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-zg-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 (.zg-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/.zg-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; }
/* Contact page: the styled contact section (contact-beam / ranch / mirage / … —
   each carries its OWN background + padding) should touch the hero above and the
   footer below. The page wrapper's .section padding added a white gap band around
   the differently-coloured section, so drop it here. */
.page-template-page-contact main.zg-page-main.section { padding-top: 0; padding-bottom: 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 (Zapgroup_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); }

/* #3 — the logo image is capped to a fixed height that fits the header strip,
   with width auto so its aspect ratio is kept. WordPress prints width/height
   attributes on .custom-logo (e.g. 278×91) that otherwise size the box past the
   header — so target .custom-logo explicitly and force height (never let the
   intrinsic 91px through). object-fit:contain guards against any stray height. */
.site-logo img,
.site-logo .custom-logo,
.site-logo-img-white { height: 48px; width: auto; max-width: 220px; object-fit: contain; }
/* PART 2 — fallback logo (favicon / generic industry mark + name) when no logo. */
.site-logo-favicon { height: 42px; width: auto; border-radius: 8px; }

/* ── Optional TALL-LOGO header (body.zg-logo-lg, toggled in Settings) — for a
   square / near-square logo that reads too small in the default 48px strip. The
   logo grows to 100px, the header strip grows to fit it, and the page content
   below is shifted down so nothing hides behind the fixed header. Desktop rules
   here; the mobile @media block re-applies the same 100px (it overrides the
   44px mobile cap). ── */
body.zg-logo-lg .site-logo img,
body.zg-logo-lg .site-logo .custom-logo,
body.zg-logo-lg .site-logo-img-white { height: 100px; max-width: 320px; }
body.zg-logo-lg .site-logo-favicon { height: 92px; }
body.zg-logo-lg #site-header { padding: 1rem 0; }
body.zg-logo-lg #site-header.scrolled { padding: 0.6rem 0; }
/* Internal pages: push the hero (breadcrumbs + H1) clear of the taller header. */
body.zg-logo-lg .page-hero { padding-top: 168px; }
.site-logo .site-logo-mark { display: inline-flex; vertical-align: middle; margin-inline-end: 8px; }
.site-logo .site-logo-mark svg { width: 30px; height: 30px; }
.site-logo .site-logo-name { vertical-align: middle; }
/* PART 3 — white logo on the transparent (pre-scroll) header; original colours
   return once the header gets a background on scroll. brightness(0) invert(1)
   turns ANY transparent PNG/WebP/SVG (or a custom-logo/favicon <img>, or an
   inline SVG mark) into a solid-white silhouette; the fallback text mark/name
   is coloured white directly. !important so a preset can't leave it dark. */
#site-header.zg-white-logo.transparent:not(.scrolled) .site-logo img,
#site-header.zg-white-logo.transparent:not(.scrolled) .site-logo-favicon,
#site-header.zg-white-logo.transparent:not(.scrolled) .site-logo svg { filter: brightness(0) invert(1) !important; }
#site-header.zg-white-logo.transparent:not(.scrolled) .site-logo-name,
#site-header.zg-white-logo.transparent:not(.scrolled) .site-logo-mark { color: #fff !important; }
#site-header.zg-white-logo.scrolled .site-logo img,
#site-header.zg-white-logo.scrolled .site-logo-favicon,
#site-header.zg-white-logo.scrolled .site-logo svg { filter: none !important; }

/* PART 3 (v64) — a SEPARATE uploaded white logo image. While transparent show
   the white version and hide the normal logo; on scroll swap back. */
.site-logo-img-white { display: none; height: 48px; width: auto; vertical-align: middle; }
#site-header.zg-white-logo-img.transparent:not(.scrolled) .site-logo-img-white { display: inline-block; }
#site-header.zg-white-logo-img.transparent:not(.scrolled) .site-logo-default { display: none; }
#site-header.zg-white-logo-img.scrolled .site-logo-img-white { display: none; }
#site-header.zg-white-logo-img.scrolled .site-logo-default { display: inline; }

/* 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;
}
/* "מספר מקשר" link stacked under the desktop call button. Follows the same
   fade-in visibility as the button, and is hidden on mobile (the מקשר popup
   is reachable from the contact section / footer there). */
.nav-phone-wrap { display: flex; flex-direction: column; align-items: stretch; }
.nav-phone-wrap .zg-msakiv-note,
.nav-phone-wrap .nav-phone-note {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-align: center;
  font-size: 12.5px;
  margin-top: 3px;
  /* #8 — before scroll the header is TRANSPARENT over a (usually dark) hero, so
     the "מספר מקשר" note must read light. Uses the same light-primary tint as the
     current breadcrumb item (var(--color-primary-light)) for a soft, on-brand look.
     Once scrolled the header gets a solid (light) background, so it flips to the
     dark text colour below. */
  color: var(--color-primary-light, #fff);
}
#site-header.scrolled .nav-phone-wrap .zg-msakiv-note,
#site-header.scrolled .nav-phone-wrap .nav-phone-note,
body:not(.home) #site-header.scrolled .nav-phone-wrap .zg-msakiv-note,
body:not(.home) #site-header.scrolled .nav-phone-wrap .nav-phone-note {
  color: var(--color-text);
}
#site-header.scrolled .nav-phone-wrap .zg-msakiv-note,
#site-header.scrolled .nav-phone-wrap .nav-phone-note,
body:not(.home) #site-header .nav-phone-wrap .zg-msakiv-note,
body:not(.home) #site-header .nav-phone-wrap .nav-phone-note {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .nav-phone-wrap .zg-msakiv-note,
  .nav-phone-wrap .nav-phone-note { display: none !important; }
  /* Hide the sticky-header dialer on mobile when auto/off decided there's no
     room (long name / wide logo). Desktop is unaffected — this is mobile-only. */
  .nav-phone-wrap.zg-mobcall-off { display: none !important; }
}
/* Desktop call button was displaying garbled: a phone number is LTR content
   sitting in an RTL header, so its digits/±/dashes got reordered by the bidi
   algorithm and the icon+number alignment broke. Render the number as an
   isolated LTR run so it always reads left-to-right correctly, and keep the
   icon+number on one line, vertically centred. */
.nav-phone-btn { align-items: center; }
.nav-phone-btn__icon { display: inline-flex; align-items: center; }
.nav-phone-btn__icon svg { display: block; }
.nav-phone-btn__label {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  line-height: 1;
}

/* 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);
  /* Open mobile menu floats above the entire site (fixed header z:1000,
     float dock z:1000, cookie/plugin layers). The accessibility widget is
     lifted back above THIS in float-dock.php, per the required layering:
     menu over everything, accessibility over the menu. */
  z-index: 99990;
  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-zg-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;
  /* dvh (dynamic viewport height) tracks the mobile address-bar collapse, so
     the hero never leaves a black gap at the top when it shrinks/grows on
     scroll. vh stays as the fallback for older browsers. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Dark base behind the slider + overlay, so the white hero text NEVER sits
     on the light page background when a slide image is missing/slow (the
     "hero text swallowed" bug). Presets that want a light hero (e.g. minimal)
     override this. */
  background-color: var(--color-bg-dark, #14100a);
}

/* Hero Slider — overscan by 2px on every edge so a scroll/rounding sub-pixel
   gap never reveals the dark base behind the image. */
.hero-slider {
  position: absolute;
  inset: -2px;
}
.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: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  /* The eyebrow sits on the hero image (over the scrim). A brand-tinted colour
     alone can be swallowed by a busy/light photo, so guarantee legibility with
     a soft dark halo + a translucent dark chip — readable over ANY hero image
     regardless of the generated palette. */
  padding: 0.32em 0.8em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5);
}
/* The decorative side-lines are dropped now that the eyebrow is a readable
   chip — lines poking out of the pill would look broken. */
.hero-eyebrow::before,
.hero-eyebrow::after { display: none; }

.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; }

/* Home-page service cards: the short description is wrapped in a link to the
   service's own page (so clicking the title OR the short text both navigate,
   per the client's requirement). Keep it looking like plain body text. */
.svc-card-textlink { color: inherit; text-decoration: none; }
.svc-card-textlink:hover { text-decoration: underline; }
/* "קראו עוד ›" read affordance on service cards across presets. */
.svc-card-readcta { display: inline-block; margin-top: 0.7rem; color: var(--color-primary); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.svc-card-readcta:hover { text-decoration: underline; }

.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;
}
/* "לפרטים" CTA under each service card (the whole card is the real link). */
.service-card-cta {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  pointer-events: none; /* the card-wide link handles the click */
}
.service-card:hover .service-card-cta { filter: brightness(1.06); }
.service-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  /* Explicit readable heading colour on the card surface (was inheriting an
     ambiguous colour that could go light-on-light). */
  color: var(--color-heading);
}
.service-card-body h3 a { color: inherit; text-decoration: none; }
.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 STYLE variants (one setting drives home + gallery page) ──
   grid = the default mosaic above. The others below opt out of the mosaic. */
.gallery-grid--two_col,
.gallery-grid--one_col {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}
.gallery-grid--one_col { grid-template-columns: 1fr; }
.gallery-grid--two_col > .gallery-item,
.gallery-grid--one_col > .gallery-item {
  grid-column: auto !important;
  grid-row: auto !important;
  height: auto;
}
.gallery-grid--two_col > .gallery-item img,
.gallery-grid--one_col > .gallery-item img { height: auto; display: block; }

/* Pinterest-style masonry. CSS `column-count` was UNRELIABLE with few / tall
   portrait images — the browser crammed everything into the first column and
   left the rest empty (confirmed live). Instead this is a CSS GRID whose rows
   are a small unit; JS (zapgroup masonry in main.js) sets each tile's
   `grid-row-end: span N` from its real height, so tiles distribute across ALL
   columns and stack into a true waterfall — while staying direct grid children
   (DOM order preserved, so the lightbox order is untouched). `dense` fills gaps.
   No-JS fallback: tiles just sit in the grid at their default span. */
.gallery-grid--masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  gap: 0.85rem;
  align-items: start;
  column-count: initial;
}
.gallery-grid--masonry > .gallery-item {
  grid-row: auto / span 34; /* JS overrides per real height */
  grid-column: auto;
  width: 100%;
  height: auto;
  margin: 0;
  break-inside: avoid;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.gallery-grid--masonry > .gallery-item img,
.gallery-grid--masonry > .gallery-item video { height: auto; display: block; width: 100%; }
@media (max-width: 900px) { .gallery-grid--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid--two_col { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .gallery-grid--masonry { grid-template-columns: 1fr; } }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
/* Video tile in a gallery (a gallery section can now hold videos as well as
   images). It fills the tile like a photo, plays inline with its own controls,
   and shows neither the zoom cursor nor the search-magnifier overlay (there is
   no image lightbox for a video). */
.gallery-item video,
.zg-gallery-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.gallery-grid--masonry > .gallery-item video { height: auto; object-fit: contain; }
.gallery-item:has(video) { cursor: default; }
.gallery-item:has(video) .gallery-overlay { display: none; }
/* External video-link tile (YouTube/Vimeo facade): poster fills the tile with a
   centered play button; clicking swaps in the real <iframe>. */
.zg-gallery-embed { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; background: #000; overflow: hidden; }
.zg-gallery-embed img,
.zg-gallery-embed .zg-embed-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
.zg-gallery-embed .zg-embed-fallback { background: linear-gradient(135deg, var(--color-primary, #1d4ed8), #000); }
.zg-gallery-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.zg-gallery-embed .zg-embed-play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 50%;
  transition: background .2s ease, transform .2s ease; pointer-events: none;
}
.zg-gallery-embed:hover .zg-embed-play { background: #e01e1e; transform: scale(1.08); }
.gallery-item:has(.zg-gallery-embed) .gallery-overlay { display: none; }
.gallery-item:has(.zg-gallery-embed) { cursor: pointer; }
.gallery-grid--masonry > .gallery-item:has(.zg-gallery-embed) { aspect-ratio: 16/9; }

.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); }

/* Item 20 — the hover tint must sit ONLY on the photo, never on a strip of the
   tile's own background. inline-block gallery items carry a baseline line-box
   under the image; zeroing it makes the figure height equal the image height,
   so .gallery-overlay (inset:0) covers exactly the picture and no grey band
   appears above/below it. */
.gallery-item { font-size: 0; line-height: 0; }
.gallery-item img,
.gallery-item video { display: block; }
/* A direct-mp4 gallery poster (<video> first frame) covers its tile like an img. */
.gallery-item--video video { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid--masonry > .gallery-item--video video { height: auto; }

/* 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); }
/* ── Readability safety net for long-form content (legal pages, articles,
   inner-page content) — the "light text on light bg / dark on dark" fix.
   Force the AA-safe tokens on body text, headings, list items and links so
   nothing inherits a low-contrast colour on the light --color-bg surface.
   Icons inside content follow currentColor, which is now the readable text. */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content span:not([class*="badge"]):not([style*="background"]),
.zg-legal,
.zg-legal p,
.zg-legal li {
  color: var(--color-text);
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.zg-legal h1,
.zg-legal h2,
.zg-legal h3 {
  color: var(--color-heading);
}
.entry-content a:not(.btn),
.zg-legal a:not(.btn) {
  color: var(--color-link);
  text-decoration: underline;
}
.entry-content svg:not([fill="none"]) { fill: currentColor; }

/* Article/service enrichment: timeline + content tables. */
.zg-timeline { list-style: none; margin: 1.6rem 0; padding: 0; position: relative; }
.zg-timeline::before { content: ""; position: absolute; inset-inline-start: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.zg-timeline__item { position: relative; padding-inline-start: 34px; margin-bottom: 1.1rem; }
.zg-timeline__dot { position: absolute; inset-inline-start: 2px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-bg); }
.zg-timeline__title { display: block; color: var(--color-heading); font-size: 1.05rem; margin-bottom: 2px; }
.zg-timeline__text { display: block; color: var(--color-text); line-height: 1.7; }
.entry-content .wp-block-table table,
.entry-content table {
  /* Item 8 — tables render at their NATURAL width and scroll horizontally
     (RTL) inside their own box instead of being crammed to the column with
     word-break (which split Hebrew words mid-letter). Making the <table> a
     display:block scroll container caps it at the column width (max-width:100%)
     while the inner rows lay out at content width and overflow → a horizontal
     scrollbar appears ON THE TABLE only. Because an overflow:auto block does
     not propagate its content's min-width, the surrounding article column
     (.single-content { min-width:0 }) is never stretched and the page layout
     stays intact. Verified pattern for wide comparison tables on mobile. */
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}
.entry-content th, .entry-content td { border: 1px solid var(--color-border); padding: 0.6rem 0.8rem; text-align: start; white-space: nowrap; }
.entry-content thead th { background: var(--color-bg-alt, #f3f4f6); color: var(--color-heading); font-weight: 700; }

/* #6 — AI content TABLES must stay inside their OWN box on a small mobile and
   never widen the page. The real break was the content column growing to a wide
   comparison table's intrinsic width: .single-content stretched to 430px inside
   a 327px grid cell, so the whole page overflowed (clipped by body{overflow-x:
   hidden}, i.e. content cut off). Fix, verified on a live 375px viewport → the
   article stays 327px, body scrollWidth == viewport, nothing overflows:
   (1) the content article never exceeds its grid cell (min-width:0) and EVERY
       direct child is capped to the column width — nothing can blow it out;
   (2) the table sits in a horizontal-scroll container (the wp-block-table
       figure), so an unusually wide table scrolls INSIDE its box; the table
       itself keeps width:100% (rule above) so ordinary tables just wrap to fit;
   (3) long unbroken strings (URLs, slugs) break instead of pushing width. */
/* min-width:0 ALONE does NOT make .single-content (a grid ITEM of .single-grid)
   shrink below a nested comparison table's min-content in Chrome — the column
   stretched to the table's width and the page overflowed on BOTH mobile and
   desktop (re-confirmed live on themev100: the article grew to 1200px inside a
   487px cell). Making the content itself a single minmax(0,1fr) grid forces its
   children (the table figure) to respect a 0 minimum, so a wide table scrolls
   inside its own overflow-x:auto figure and the column stays in its cell.
   Verified live: article 1200px→487px, body scrollWidth == viewport. */
.single-content { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
/* The featured image keeps its full-bleed (negative margins, not clipped by the
   grid) and spans the single column. */
.single-featured-image { grid-column: 1 / -1; }
/* Cap every direct child to the column width EXCEPT the featured image, which
   intentionally bleeds to the card edges with negative margins. */
.single-content > *:not(.single-featured-image) { max-width: 100%; }
.entry-content { overflow-wrap: break-word; }
.entry-content .wp-block-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* When a table sits inside the Gutenberg figure, the FIGURE is the scroll
   container — reset the inner <table> back to a normal natural-width table so
   we don't nest two scrollers (item 8). */
.entry-content .wp-block-table > table {
  display: table;
  /* #7 — force the table to its NATURAL width (min 100% so small tables still
     fill the column) so a wide table SCROLLS inside the figure instead of
     wrapping its cells into a squished, broken block. width:auto let cells wrap
     and looked broken on articles. */
  width: max-content;
  min-width: 100%;
  max-width: none;
  overflow-x: visible;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { white-space: normal; }

/* Illustrative bar chart (articles + service pages). Values are relative/
   general — the note makes clear it is not measured business data. */
.zg-chart { margin: 1.8rem 0; padding: 1.2rem 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt, #f7f7f8); }
.zg-chart__title { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); font-size: 1.1rem; margin-bottom: 1rem; }
.zg-chart__bars { display: flex; flex-direction: column; gap: 0.7rem; }
.zg-chart__row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 0.6rem; }
.zg-chart__label { color: var(--color-text); font-size: 0.9rem; }
.zg-chart__track { position: relative; height: 14px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.zg-chart__fill { position: absolute; inset-inline-start: 0; top: 0; height: 100%; background: var(--color-primary); border-radius: 999px; min-width: 4px; }
.zg-chart__val { color: var(--color-heading); font-weight: 700; font-size: 0.85rem; min-width: 36px; text-align: end; }
.zg-chart__note { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 0.9rem; font-style: italic; }
@media (max-width: 560px) { .zg-chart__row { grid-template-columns: 1fr auto; } .zg-chart__label { grid-column: 1 / -1; } }
/* #6 — FIVE different chart STRUCTURES (not just styles) rotated per article:
   bars (above) · columns · pie · donut · line. Rendered as static HTML/SVG. */
/* ── Vertical columns (גרף עמודות) ── */
.zg-chart--cols .zg-cols { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 190px; padding-top: 14px; }
.zg-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; min-width: 0; }
.zg-col__bar { width: 100%; max-width: 54px; background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000)); border-radius: 8px 8px 0 0; min-height: 4px; transition: height .3s; }
.zg-col__val { font-size: 0.82rem; font-weight: 700; color: var(--color-heading); margin-bottom: 5px; }
.zg-col__lbl { font-size: 0.78rem; color: var(--color-text); margin-top: 7px; text-align: center; line-height: 1.2; word-break: break-word; }
/* ── Pie / Donut (עוגה) — SVG + legend ── */
.zg-pie-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.zg-pie-svg, .zg-donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
.zg-pie-svg { transform: rotate(0deg); }
.zg-donut-svg circle { transform-origin: center; }
.zg-pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 140px; }
.zg-pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--color-text); }
.zg-pie-legend b { color: var(--color-heading); margin-inline-start: auto; }
.zg-lg__dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
/* ── Line (גרף רציף) ── */
/* Full-width on desktop, but the wide+short 220×58 viewBox keeps it LOW
   (~200px, capped 300px) and the numbers/labels small relative to the width —
   a refined proportion to the text (not the old clumsy full-height chart). */
.zg-chart:has(.zg-line-svg) { padding: 0.9rem 1.1rem; }
.zg-line-svg { width: 100%; height: auto; max-height: 300px; display: block; margin-inline: auto; }
.zg-line__axis { stroke: var(--color-border); stroke-width: 0.5; }
.zg-line__val { font-size: 3.8px; font-weight: 700; fill: var(--color-heading); }
.zg-line__lbl { font-size: 3.4px; fill: var(--color-text); }
@media (max-width: 560px) { .zg-chart--cols .zg-cols { height: 150px; } .zg-pie-svg, .zg-donut-svg { width: 130px; height: 130px; } }

/* ── Content-injector: redistributed visuals stay overflow- and CLS-stable ──
   When Zapgroup_Content_Injector moves the table / timeline / chart out of the
   bottom "data dump" and INTO the body, they render mid-stream between
   paragraphs. The three widgets are synchronous, image-free, static text/CSS
   (the chart fill is a static inline width, no transition), so they never shift
   after paint — they only need min-width:0 so a flex/grid child can't push past
   the 375px column. (The writers never emit an image into the bottom dump, so
   image relocation is not a path today; existing .entry-content img caps cover
   any future case.) */
.entry-content .zg-timeline,
.entry-content .zg-chart { min-width: 0; max-width: 100%; }
.entry-content .wp-block-table { min-width: 0; }

.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 stacking moved to after its base rule (~line 1675) — an
     override here loses to the later base rule on source order. */
}

.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; }
/* Phone field: align to the right like every other RTL field (browsers often
   default a tel input to LTR/left, which looked inconsistent — placeholder on
   the wrong side). Digits still read left-to-right within the field. */
.form-group input[type="tel"],
input[type="tel"].sidebar-form__input {
  direction: rtl;
  text-align: right;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Single column on mobile — one field per row (full name, then phone, …).
   This override MUST live AFTER the two-column base rule above: an earlier
   @media(max-width:960px){.form-row{...1fr}} block (~line 1570) has equal
   specificity but loses on source order to this base rule, so on a phone the
   fields were still rendering side-by-side. Placing the stack here wins.
   ≤960px matches the original .contact-grid stacking intent (line ~1568). */
@media (max-width: 960px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Mobile: form fields should be WIDE with little wasted padding around them.
   Trim the card/section padding that squeezed the fields, and let the fields
   fill the available width (a hair of breathing room from the screen edge). */
@media (max-width: 768px) {
  .form-group input,
  .form-group textarea,
  .form-group select,
  .sidebar-form__input {
    width: 100%;
    margin-inline: auto;
    padding: 0.75rem 0.85rem; /* was ~0.85rem 1.1rem — less internal padding */
  }
  .form-row { justify-items: stretch; }
  /* Slim the containers that hold the forms so the fields get more width. */
  .contact-form { padding: 1.5rem 1.1rem; }
  .service-lead__form { padding: 0; }
  .sidebar-card--contact { padding: 1.1rem 1rem; }
  .contact-beam-form-wrap,
  .contact-orbit-form-wrap,
  .contact-roast-form-wrap,
  .contact-bloom-form-wrap,
  .contact-gleam-card { padding: 1.3rem 1rem; }
}

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

/* Privacy-policy consent checkbox — injected into every lead form
   (assets/js/main.js → initPrivacyConsent). color:inherit so it reads
   correctly on both the light contact form and the dark sidebar card. */
.zg-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.25rem 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  cursor: pointer;
  /* Must be readable: forms sit on the light --color-bg surface, so use the
     AA-safe dark body text token — NOT `inherit`, which let a light muted
     colour leak in and rendered the consent text light-on-light. */
  color: var(--color-text);
}
.zg-consent__text { color: var(--color-text); }
.zg-consent__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.zg-consent__text a { color: inherit; text-decoration: underline; font-weight: 600; }
/* On the brand-coloured sidebar contact card the consent text + its privacy
   link were dark-on-dark and unreadable — force white there (#8). */
.sidebar-card--contact .zg-consent,
.sidebar-card--contact .zg-consent__text,
.sidebar-card--contact .zg-consent__text a { color: #ffffff; }
.zg-consent--error { color: #dc2626; }
.zg-consent--error .zg-consent__box { outline: 2px solid #dc2626; outline-offset: 2px; }

/* ============================================================
   PER-SECTION VISUAL OVERRIDES
   Applied per section from the "מבנה עמודים" tab (sec_bg / sec_width /
   sec_space / sec_accent). Injected as classes on the section's first
   element by zapgroup_render_section_block(). Let a single section break away
   from the global preset's background, width and spacing.
   ============================================================ */
/* Background tone. !important to beat the per-preset section backgrounds. */
.zg-sec--bg-white   { background: #ffffff !important; }
.zg-sec--bg-light   { background: var(--color-bg, #f6f6f6) !important; }
.zg-sec--bg-dark    { background: var(--color-secondary, #1a1a1a) !important; }
.zg-sec--bg-primary { background: var(--color-primary, #f5b301) !important; }
.zg-sec--bg-accent  { background: var(--color-accent, #8b6914) !important; }
/* CONTRAST HARD-BLOCK: every coloured section ground pairs its text with the
   AA-safe token computed for THAT ground in zapgroup_output_dynamic_css()
   (--color-text-on-dark / -on-secondary / -on-primary / -on-accent). This is
   what prevents dark-text-on-dark and light-text-on-light: the text colour is
   never left to the preset default (which could match the ground). Previously
   bg-primary forced no text colour at all (dark text could land on a dark
   primary), and bg-dark/accent hardcoded #fff (which could be light-on-light
   on a pale accent). */
.zg-sec--bg-dark  :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,label) { color: var(--color-text-on-dark, #fff) !important; }
.zg-sec--bg-accent :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,label) { color: var(--color-text-on-accent, #fff) !important; }
.zg-sec--bg-primary :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,span,label) { color: var(--color-text-on-primary, #fff) !important; }
.zg-sec--bg-dark    a:not(.btn) { color: var(--color-text-on-dark, #fff) !important; }
.zg-sec--bg-accent  a:not(.btn) { color: var(--color-text-on-accent, #fff) !important; }
.zg-sec--bg-primary a:not(.btn) { color: var(--color-text-on-primary, #fff) !important; }

/* Content width — scoped to the section's inner .container. */
.zg-sec--w-narrow .container { max-width: 760px; }
.zg-sec--w-wide   .container { max-width: 1400px; }
.zg-sec--w-full   .container { max-width: 100%; }

/* Vertical spacing. */
.zg-sec--space-none     { padding-top: 0 !important;    padding-bottom: 0 !important; }
.zg-sec--space-compact  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.zg-sec--space-spacious { padding-top: 8rem !important; padding-bottom: 8rem !important; }
@media (max-width: 768px) {
  .zg-sec--space-spacious { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}

.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;
  /* Compact inner-page hero: a short band driven by padding, not a tall vh
     block. (Studio-tunable padding-top via the dynamic CSS inner_hero_height
     setting.) */
  min-height: 100px;
  /* #hero-pad — more breathing room above the breadcrumbs (via .breadcrumbs
     margin-top below), and a tighter ~20px gap below the title. */
  padding: 120px 0 22px;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.page-hero--noimage { min-height: 100px; }
.page-hero__bg {
  position: absolute;
  /* Overscan 2px on every edge so no scroll/rounding gap ever shows the dark
     base behind the image (#2). */
  inset: -2px;
  /* Cover the whole band and stay centered at any height. */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  z-index: 0;
  /* Keep the scale centered so the parallax drift never bares an edge, and
     hint the compositor since main.js re-writes transform on scroll (#2). */
  transform: scale(1.02);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
@media (max-width: 768px) {
  /* #hero-pad (mobile): keep the top clearance for the fixed header (the ~20px
     above the breadcrumbs comes from .breadcrumbs margin-top, applied globally
     below), and a TIGHTER ~20px gap below the title (was 40px). */
  .page-hero { padding-top: 90px; padding-bottom: 20px; }
}
/* 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);
  /* !important: the page hero always sits on a dark image + dark gradient
     overlay, so the title MUST stay light. Some presets set a blanket dark
     `body.zg-preset-X h1` colour (higher specificity than this class) which
     would otherwise make the title dark-on-dark and unreadable (an a11y/SEO
     failure). Enforcing white here keeps AA contrast on every preset. */
  color: #fff !important;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.page-hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.95) !important;
  max-width: 640px;
  margin: 0;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.page-hero .breadcrumbs,
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs span {
  color: rgba(255,255,255,0.85);
}
/* #hero-pad — ~20px space above the breadcrumbs, tighter below (before title). */
.page-hero .breadcrumbs { margin-top: 20px; margin-bottom: 6px; }
.page-hero .page-hero__title { margin: 0.3rem 0 0; }
.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
   ============================================================ */
/* Gallery PAGE: a plain, backgroundless image grid that blends into the page
   (no separate colour band, normal dark text) — see section-gallery.php. */
.section.section--plain {
  background: transparent !important;
  padding-top: 1.5rem;
}
.section.section--plain,
.section.section--plain h1,
.section.section--plain h2,
.section.section--plain p {
  color: var(--color-text);
}

#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;
  /* White icon on the platform's own brand colour by default (per-platform
     backgrounds below). A studio-chosen tint (--social-icon-tint, emitted from
     settings) overrides every platform background with one colour. */
  background: var(--social-icon-tint, rgba(255,255,255,0.12));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: var(--transition);
}
.social-link svg { fill: currentColor; }
.social-link:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Per-platform brand backgrounds (white icon on top). Overridden as one solid
   colour when --social-icon-tint is set (the var fallback does the switch). */
.social-link--facebook  { background: var(--social-icon-tint, #1877F2); }
.social-link--instagram { background: var(--social-icon-tint, radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%)); }
.social-link--tiktok    { background: var(--social-icon-tint, #010101); }
.social-link--youtube   { background: var(--social-icon-tint, #FF0000); }
.social-link--twitter   { background: var(--social-icon-tint, #000000); }
.social-link--linkedin  { background: var(--social-icon-tint, #0A66C2); }
.social-link--whatsapp  { background: var(--social-icon-tint, #25D366); }
.social-link--gmb       { background: var(--social-icon-tint, #4285F4); }
.social-link--custom    { background: var(--social-icon-tint, #555); }
/* GMB shows its REAL full-colour logo, which needs a white chip to read.
   Override the blue background + the currentColor fill so the logo's own
   per-path colours show. */
.social-link--gmb { background: #ffffff; border: 1px solid rgba(0,0,0,.12); }
.social-link--gmb svg { fill: none; }

.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;
  /* baseline (not center) so the copyright + "Powered by" credits sit on the
     SAME text line as the policy links (מדיניות פרטיות / הצהרת נגישות / נגישות
     בעסק) — center let the taller links row drift a few px lower. */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.footer-bottom > p { margin: 0; }
.footer-bottom-links {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.footer-bottom a:hover { color: var(--color-primary-light); }
/* AI-content disclaimer — small print at the very bottom of the footer. */
.footer-ai-disclaimer {
  margin: 1.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.footer-ai-disclaimer a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.footer-ai-disclaimer a:hover { color: var(--color-primary-light); }

/* ============================================================
   ANIMATIONS
   — Initial state (opacity/transform) is injected dynamically
     by zapgroup_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.
   ============================================================ */
.zg-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;
  /* Match the inner-page hero surface so the articles/blog listing reads as
     the same site (was a bright secondary→primary→accent gradient). */
  background: var(--color-bg-dark);
}
.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.zg-preset-food .blog-card__arrow-icon,
body.zg-preset-elegant .blog-card__arrow-icon,
body.zg-preset-inboxly .blog-card__arrow-icon,
body.zg-preset-bloom .blog-card__arrow-icon,
body.zg-preset-gleam .blog-card__arrow-icon { display: none; }
body.zg-preset-food .blog-card__read-more::after,
body.zg-preset-elegant .blog-card__read-more::after,
body.zg-preset-inboxly .blog-card__read-more::after,
body.zg-preset-bloom .blog-card__read-more::after,
body.zg-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.zg-preset-food .blog-card__read-more:hover::after,
body.zg-preset-elegant .blog-card__read-more:hover::after,
body.zg-preset-inboxly .blog-card__read-more:hover::after,
body.zg-preset-bloom .blog-card__read-more:hover::after,
body.zg-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 (Zapgroup_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 zapgroup_get_post_toc()/zapgroup_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. */
.zg-toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin: 0 0 2rem;
}
.zg-toc[open] { padding-bottom: 20px; }
.zg-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;
}
.zg-toc__title::-webkit-details-marker { display: none; }
.zg-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;
}
.zg-toc[open] > .zg-toc__title::after { transform: rotate(-135deg); }
/* In the classic layout the desktop sidebar already carries the TOC, so the
   inline above-content TOC is shown ONLY on mobile there (the classic grid
   collapses to one column at ≤900px). */
@media (min-width: 901px) { .zg-toc--inline-classic { display: none; } }
.zg-toc__list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.zg-toc__list .toc-item a {
  color: var(--color-link);
  text-decoration: none;
}
.zg-toc__list .toc-item a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.zg-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;
  /* Solid white field on the brand-coloured card, with dark text — a
     translucent field let the magenta bleed through and swallow the text. */
  background: #ffffff;
  color: #1a1a1a;
  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: #6b7280; }
.sidebar-form__submit { width: 100%; margin-top: 0.4rem; justify-content: center; }
/* The submit button sits ON the brand-coloured card, so a .btn-primary
   (brand-on-brand) disappears. Flip it to a solid white button with the
   brand colour as its text, so it stands out instead of being swallowed. */
.sidebar-card--contact .sidebar-form__submit,
.sidebar-card--contact .sidebar-form__submit:hover {
  /* !important is required: the dynamic-CSS rule `.btn-primary{background:
     var(--color-primary)!important}` would otherwise force brand-on-brand and
     the send button would vanish into the coloured card. */
  background: #ffffff !important;
  background-image: none !important;
  color: var(--color-primary) !important;
  border-color: #ffffff !important;
}
.sidebar-card--contact .sidebar-form__submit svg { stroke: var(--color-primary); }
.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) {
  /* Safety net: never let text touch the screen edges on mobile. Any common
     text wrapper that ends up full-bleed gets a minimum 10px inline padding
     (well above the required 7px). Elements already inside a padded .container
     keep their larger padding — max() picks whichever is bigger. */
  .entry-content,
  .zg-legal,
  [class$="__inner"],
  [class*="__inner "],
  .section-header,
  .zg-reviews__inner {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  /* Prevent any stray full-width child from causing horizontal scroll. */
  html, body { overflow-x: hidden; }

  .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. */
  /* Mobile header row (RTL): hamburger on the RIGHT, logo on the LEFT, call
     button between them — all always visible on the fixed (sticky) header.
     Flex `order` re-sequences the DOM into the requested right→left layout;
     in RTL order:1 is the rightmost item, so a higher order sits further left. */
  /* !important so NO preset/cached rule can flip it back (re-reported). */
  .header-inner { gap: 0.5rem; flex-direction: row !important; }
  .menu-toggle { order: 1 !important; flex: 0 0 auto; }
  /* Scoped to .header-inner: the global .site-logo also matches the FOOTER
     brand name (.footer-brand .site-logo), so an unscoped text-align:left +
     nowrap/ellipsis here pushed the footer business name to the LEFT (and could
     truncate it) while the tagline under it stayed right — the reported footer
     misalignment. The footer brand must follow its own column alignment. */
  .header-inner .site-logo {
    order: 2 !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    /* Logo centred on mobile (sits between the hamburger on the right and the
       dialer on the left). */
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Item 1 — mobile logo capped at 50px so it never overflows the header row
     or overlaps the breadcrumbs / page H1 below it. margin:0 keeps it flush
     to the left edge (item 2) instead of centred. Caps the fallback mark/name
     and favicon too, not just an <img> logo. */
  .site-logo img,
  .site-logo .custom-logo,
  .site-logo .site-logo-img-white,
  .site-logo-favicon,
  .site-logo .site-logo-mark svg { margin: 0 auto !important; height: 44px !important; max-height: 44px !important; width: auto !important; max-width: 150px; object-fit: contain; }
  .site-logo .site-logo-name { font-size: 1.15rem !important; }
  #site-header { max-height: 84px; }
  /* Tall-logo option on mobile: same 100px logo as desktop (overrides the 44px
     cap above) and a taller header cap so it isn't clipped; internal hero shifts
     down to match. */
  body.zg-logo-lg .site-logo img,
  body.zg-logo-lg .site-logo .custom-logo,
  body.zg-logo-lg .site-logo .site-logo-img-white,
  body.zg-logo-lg .site-logo-favicon { height: 100px !important; max-height: 100px !important; max-width: 200px; }
  body.zg-logo-lg #site-header { max-height: 132px; }
  body.zg-logo-lg .page-hero { padding-top: 150px; }
  /* The call button is wrapped in .nav-phone-wrap; order 3 = leftmost item in
     RTL (hamburger order 1 on the right, logo order 2 in the middle). */
  .nav-phone-wrap { order: 3; flex: 0 0 auto; }
  .nav-phone-btn {
    padding: 0.6rem;
    border-radius: 50%;
    /* Always show the dialer on mobile — no longer gated on .scrolled /
       home-page, so it never disappears or waits for a scroll. */
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .nav-phone-btn__label { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; align-items: center; }
  /* Center the credit + legal links row on mobile (copyright, Powered by,
     privacy, accessibility statement, business-accessibility) instead of the
     flex default that pushed the whole line to the right (RTL start). */
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
  /* Extra bottom room on mobile so the sticky quick-actions dock bar doesn't
     cover the footer's accessibility / privacy / terms links. */
  #site-footer { padding-bottom: 90px; }
  .gallery-grid--grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
  .gallery-grid--grid .gallery-item:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery-grid--grid .gallery-item:nth-child(1),
  .gallery-grid--grid .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) ─────────────────────── */
.zg-reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(0,0,0,.06); z-index: 10000; pointer-events: none;
}
.zg-reading-progress__bar {
  height: 100%; width: 0; background: var(--color-primary);
  transition: width .1s linear;
}

/* ── Single hero variants ──────────────────────────────────── */
/* Article hero uniform with the inner-page hero (.page-hero): a compact band
   driven by padding (min-height 100px, padding 120/60, mobile 60 top), flat
   bottom, image covering the whole band. Not a tall/different hero. */
.single-hero { position: relative; min-height: 100px; padding: 120px 0 60px; }
.single-hero--has-image { min-height: 100px; display: flex; align-items: flex-end; }
.single-hero--has-image .single-hero__inner { position: relative; z-index: 2; }
@media (max-width: 768px) { .single-hero { padding-top: 60px; } }
.single-hero__bg {
  position: absolute; inset: 0;
  /* Match the inner-page hero surface (--color-bg-dark) instead of a colourful
     secondary→primary gradient, so an article header looks like the same site
     as every other inner page rather than a differently-branded band. */
  background: var(--color-bg-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 ─────────────────────────────────────────── */
.zg-share {
  display: inline-flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; margin: 1rem 0;
}
.zg-share__label { font-weight: 600; font-size: .9rem; opacity: .75; margin-inline-end: .25rem; }
.zg-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;
}
.zg-share__btn:hover { transform: translateY(-2px); }
.zg-share__btn svg { width: 18px; height: 18px; }
.zg-share__btn--whatsapp:hover { background: #25D366; color: #fff; }
.zg-share__btn--facebook:hover { background: #1877F2; color: #fff; }
.zg-share__btn--twitter:hover  { background: #000;    color: #fff; }
.zg-share__btn--linkedin:hover { background: #0A66C2; color: #fff; }
.zg-share__btn--copy:hover     { background: var(--color-primary); color: #fff; }
.zg-share--bottom { justify-content: center; padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,.08); margin-top: 2rem; }
.zg-share__copy-toast {
  display: none; background: #111827; color: #fff; padding: .35rem .8rem;
  font-size: .8rem; border-radius: 20px;
}
.zg-share__copy-toast.is-visible { display: inline-block; }

/* ── Patterns: pull quote / tips / CTA / recipe / before-after ── */
.zg-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;
}
.zg-pullquote p { font-size: 1.3rem; line-height: 1.5; color: var(--color-secondary); margin: 0; }
.zg-pullquote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .9rem; opacity: .75; }

.zg-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;
}
.zg-tips__heading { margin: 0 0 1rem; color: var(--color-primary); font-size: 1.15rem; }
.zg-tips__list { list-style: none; padding: 0; margin: 0; }
.zg-tips__item { display: flex; gap: .9rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.zg-tips__item:last-child { border-bottom: none; }
.zg-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;
}

.zg-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);
}
.zg-cta-box__body { flex: 1 1 60%; min-width: 220px; }
.zg-cta-box__title { color: #fff; margin: 0 0 .35rem; font-size: 1.35rem; }
.zg-cta-box__desc  { margin: 0; opacity: .9; }
.zg-cta-box__btn { white-space: nowrap; }

.zg-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);
}
.zg-recipe-box__header { border-bottom: 1px dashed rgba(0,0,0,.1); padding-bottom: 1rem; margin-bottom: 1rem; }
.zg-recipe-box__title { color: var(--color-primary); margin: 0 0 .5rem; }
.zg-recipe-box__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; opacity: .75; font-size: .9rem; }
.zg-recipe-box__steps { padding-inline-start: 0; list-style: none; counter-reset: step; }
.zg-recipe-box__steps li {
  padding: .9rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); position: relative; padding-inline-start: 1rem;
}
.zg-recipe-box__steps li:last-child { border-bottom: none; }
.zg-recipe-box__steps strong { color: var(--color-primary); margin-inline-end: .4rem; }

.zg-before-after {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0;
}
.zg-before-after__side { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); }
.zg-before-after__side img { width: 100%; height: auto; display: block; }
.zg-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;
}
.zg-before-after__side--after figcaption { background: var(--color-primary); }

.zg-inline-image { margin: 2rem 0; }
.zg-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; }
.zg-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;
}
.zg-author-bio__avatar img { border-radius: 50%; display: block; }
.zg-author-bio__label { font-size: .8rem; text-transform: uppercase; color: var(--color-primary); font-weight: 700; letter-spacing: .1em; }
.zg-author-bio__name { margin: .3rem 0 .6rem; font-size: 1.25rem; }
.zg-author-bio__desc { margin: 0 0 .8rem; line-height: 1.6; }
.zg-author-bio__link { color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: .9rem; }
.zg-author-bio__link:hover { text-decoration: underline; }

.zg-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;
}
.zg-newsletter__icon { font-size: 2.5rem; flex-shrink: 0; }
.zg-newsletter__body { flex: 1 1 60%; min-width: 240px; }
.zg-newsletter__title { margin: 0 0 .3rem; color: #fff; font-size: 1.35rem; }
.zg-newsletter__desc  { margin: 0 0 .9rem; opacity: .92; }
.zg-newsletter__form  { display: flex; gap: .6rem; max-width: 480px; }
.zg-newsletter__form input { flex: 1; padding: .7rem 1rem; border: none; border-radius: var(--radius-sm); font-family: inherit; }
.zg-newsletter__form button { white-space: nowrap; }

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

/* ── ARCHIVE LAYOUTS ───────────────────────────────────────── */
.zg-archive { margin-bottom: 2.5rem; }
.zg-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; }
.zg-archive-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0,0,0,.1); }
.zg-archive-card__img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.zg-archive-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.zg-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; }
.zg-archive-card__title { font-size: 1.2rem; margin: 0 0 .6rem; line-height: 1.35; }
.zg-archive-card__title a { color: var(--color-secondary); text-decoration: none; }
.zg-archive-card__title a:hover { color: var(--color-primary); }
.zg-archive-card__excerpt { font-size: .95rem; line-height: 1.55; margin: 0 0 .8rem; opacity: .8; }

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

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

/* Magazine: feature + grid */
.zg-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; }
.zg-magazine-feature__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.zg-magazine-feature__body { padding: 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.zg-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; }
.zg-magazine-feature__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .8rem; }
.zg-magazine-feature__title a { color: var(--color-secondary); text-decoration: none; }
.zg-magazine-feature__title a:hover { color: var(--color-primary); }
.zg-magazine-feature__excerpt { font-size: 1rem; line-height: 1.6; opacity: .8; margin: 0 0 1rem; }
.zg-magazine-feature__more { color: var(--color-primary); font-weight: 700; text-decoration: none; margin-top: .8rem; }
.zg-archive--magazine { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }

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

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

/* Pagination */
.zg-archive-pagination { display: flex; justify-content: center; gap: .5rem; padding: 2rem 0; }
.zg-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; }
.zg-archive-pagination .page-numbers.current { background: var(--color-primary); color: #fff; }
.zg-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 zapgroup_output_dynamic_css();
   presets only add layout, shape, motion and the --font-preset-accent
   display font (see zapgroup_preset_display_font() in functions.php).
   Activated via body.zg-preset-{name}. Verticals are auto-mapped
   in functions.php → zapgroup_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.zg-preset-food {
    --radius-card: 20px;
    --radius-btn: 999px;
    --section-py: 5rem;
    --card-shadow: 0 10px 34px rgba(0,0,0,.08);
}
body.zg-preset-food .site-logo { font-style: italic; }
body.zg-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-zg-media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.hero-zg-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-zg-container { position: relative; z-index: 2; }
.hero-zg-frame { max-width: 640px; }
.hero-zg-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-zg-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-zg-subtitle {
    color: var(--color-text-on-dark-muted);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    max-width: 480px;
    margin-bottom: 2rem;
}
.hero-zg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero-zg-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-zg-btn:hover { transform: translateY(-2px); }
.hero-zg-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-zg-scrollcue {
    position: absolute;
    bottom: 1.75rem;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 2;
}
.hero-zg-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-zg-frame { max-width: 100%; }
    .hero-zg-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.zg-preset-food #about .grid-2 {
    display: block;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
body.zg-preset-food #about .about-image-wrap {
    max-width: 440px;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
}
body.zg-preset-food #about .about-text { margin-top: 2.5rem; padding: 0; }
body.zg-preset-food #about .about-features { max-width: 460px; margin-inline: auto; }
body.zg-preset-food #about .btn-group { justify-content: center; }
body.zg-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.zg-preset-food .about-image-wrap img { border-radius: var(--radius-card); }
body.zg-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.zg-preset-food .about-feature { border-top: 1px solid var(--color-border); padding-top: 0.85rem; }
body.zg-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.zg-preset-food .services-grid.services-grid--cards,
body.zg-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.zg-preset-food .service-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}
body.zg-preset-food .service-card,
body.zg-preset-food .review-card,
body.zg-preset-food .zg-archive-card {
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
body.zg-preset-food .service-price { font-family: var(--font-preset-accent), serif; font-style: italic; }
body.zg-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.zg-preset-food .btn-primary:hover { transform: translateY(-2px); }
body.zg-preset-food .gallery-item { border-radius: var(--radius-card); }
body.zg-preset-food .gallery-item:nth-child(odd)  { transform: rotate(-0.6deg); }
body.zg-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.zg-preset-elegant {
    --radius-card: 0;
    --radius-btn: 0;
    --section-py: 7rem;
    --card-shadow: none;
}
body.zg-preset-elegant h1,
body.zg-preset-elegant h2,
body.zg-preset-elegant h3 {
    font-family: var(--font-preset-accent), 'Playfair Display', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
body.zg-preset-elegant .hero-content h1 { font-size: clamp(3.2rem, 8vw, 6rem); }
body.zg-preset-elegant .hero-eyebrow {
    text-transform: uppercase; letter-spacing: 0.3em; font-weight: 500; font-size: 0.72rem;
}
body.zg-preset-elegant .hero-eyebrow::before,
body.zg-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.zg-preset-elegant #hero {
    display: block;
    min-height: auto;
    background: var(--color-bg-dark);
    padding: 6rem 0 calc(46vh + 3rem);
}
body.zg-preset-elegant .hero-slider,
body.zg-preset-elegant .hero-overlay {
    inset: auto 0 0 0;
    height: 46vh;
}
body.zg-preset-elegant .hero-overlay { background: linear-gradient(0deg, rgba(4,6,8,.35) 0%, rgba(4,6,8,0) 40%); }
body.zg-preset-elegant .container { position: relative; }
body.zg-preset-elegant .hero-content { max-width: 900px; padding: 0; }
body.zg-preset-elegant .hero-content h1,
body.zg-preset-elegant .hero-eyebrow {
    color: var(--color-text-on-dark);
}
body.zg-preset-elegant .hero-content p { color: var(--color-text-on-dark-muted); }
body.zg-preset-elegant .hero-stats { border-top-color: rgba(255,255,255,.15); }
/* Alternating full-bleed dark band */
body.zg-preset-elegant #services,
body.zg-preset-elegant #reviews {
    background: var(--color-bg-dark);
}
body.zg-preset-elegant #services h2, body.zg-preset-elegant #services p, body.zg-preset-elegant #services .eyebrow,
body.zg-preset-elegant #reviews h2,  body.zg-preset-elegant #reviews p,  body.zg-preset-elegant #reviews .eyebrow {
    color: var(--color-text-on-dark);
}
body.zg-preset-elegant #services .section-header p,
body.zg-preset-elegant #reviews .section-header p { color: var(--color-text-on-dark-muted); }
/* About: precise offset double-frame, not a playful tilt */

body.zg-preset-elegant .about-image-wrap { border-radius: 0; position: relative; }
body.zg-preset-elegant .about-image-wrap::before {
    content: "";
    position: absolute; inset: 18px -18px -18px 18px;
    border: 1px solid var(--color-accent);
    z-index: -1;
}
body.zg-preset-elegant .about-image-wrap img { border-radius: 0; }
body.zg-preset-elegant .about-image-badge { border-radius: 0; border: 1px solid var(--color-border); box-shadow: none; }
/* Services: borderless, numbered */
body.zg-preset-elegant .services-grid { counter-reset: elegant-svc; }
body.zg-preset-elegant .service-card,
body.zg-preset-elegant .review-card,
body.zg-preset-elegant .zg-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.zg-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.zg-preset-elegant .service-card:hover { border-color: var(--color-primary); }
body.zg-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.zg-preset-elegant .btn-outline-dark {
    border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem;
}
body.zg-preset-elegant .section-eyebrow,
body.zg-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.zg-preset-elegant .gallery-grid { grid-auto-rows: 260px; }
body.zg-preset-elegant .gallery-item { grid-column: span 3 !important; grid-row: span 1 !important; border-radius: 0; }
body.zg-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.zg-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.zg-preset-professional {
    --radius-card: 14px;
    --radius-btn: 12px;
    --section-py: 5.5rem;
    --card-shadow: 0 4px 16px rgba(0,0,0,.06);
}
body.zg-preset-professional h1,
body.zg-preset-professional h2 {
    font-family: var(--font-preset-accent), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}
body.zg-preset-professional .hero-slide { filter: saturate(0.85) contrast(1.04); }
body.zg-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.zg-preset-professional .hero-eyebrow::before,
body.zg-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.zg-preset-professional #hero { padding-bottom: 3rem; }
body.zg-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.zg-preset-professional .hero-stat-number { color: var(--color-primary); }
body.zg-preset-professional .hero-stat-label { color: var(--color-text-muted); }
/* About: ring-framed photo + a horizontal trust bar, not a floating badge */
body.zg-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.zg-preset-professional .about-image-wrap img { border-radius: var(--radius-card); }
body.zg-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.zg-preset-professional .services-grid.services-grid--clean,
body.zg-preset-professional .services-grid.services-grid--cards {
    display: block;
    grid-template-columns: unset;
}
body.zg-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.zg-preset-professional .service-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 28px rgba(0,0,0,.09);
    transform: none;
}
body.zg-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.zg-preset-professional .service-card-image { display: none; }
body.zg-preset-professional .service-card-body { padding: 1.5rem 2rem; text-align: start; }
/* Gallery: uniform grid + hover only fades, calm instead of masonry-dramatic */
body.zg-preset-professional .gallery-grid { grid-auto-rows: 220px; }
body.zg-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.zg-preset-bold {
    --radius-card: 10px;
    --radius-btn: 8px;
    --section-py: 4rem;
}
body.zg-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.zg-preset-bold h2 { font-weight: 800; }
body.zg-preset-bold .hero-overlay {
    background: linear-gradient(180deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.9) 100%);
}
body.zg-preset-bold .hero-eyebrow {
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    padding: 0.35rem 1rem;
}
body.zg-preset-bold .hero-eyebrow::before,
body.zg-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.zg-preset-bold .hero-slider {
    left: 0; right: auto; width: 55%;
}
body.zg-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.zg-preset-bold #hero::before {
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0; width: 45%;
    background: var(--color-bg-dark);
    z-index: 0;
}
body.zg-preset-bold .hero-content { max-width: 360px; }
body.zg-preset-bold .hero-content .btn-group { flex-direction: column; align-items: stretch; gap: 0.75rem; }
body.zg-preset-bold .hero-content .btn { justify-content: center; padding-inline: 1.4rem; white-space: normal; }
body.zg-preset-bold .hero-content .hero-stats { flex-wrap: wrap; }
/* Organic curve divider — the signature move of this preset */
body.zg-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.zg-preset-bold #services { background: var(--color-bg-dark); position: relative; }
body.zg-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.zg-preset-bold #services h2, body.zg-preset-bold #services p, body.zg-preset-bold #services .eyebrow {
    color: var(--color-text-on-dark);
}
body.zg-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.zg-preset-bold #about .grid-2 {
    display: block;
    position: relative;
}
body.zg-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.zg-preset-bold .about-image-wrap { rotate: -1deg; box-shadow: 0 40px 70px -28px rgba(0,0,0,.4); }
body.zg-preset-bold .about-image-badge {
    top: 1.5rem; bottom: auto;
    transform: rotate(6deg);
    background: var(--color-primary);
    border: none;
}
body.zg-preset-bold .about-image-badge strong,
body.zg-preset-bold .about-image-badge span { color: var(--color-text-on-primary); }
body.zg-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.zg-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.zg-preset-bold .services-grid {
    counter-reset: bold-svc;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(160px, auto);
}
body.zg-preset-bold .service-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
body.zg-preset-bold .service-card:nth-child(n+2) {
    grid-column: span 2;
}
@media (max-width: 900px) {
    body.zg-preset-bold .services-grid { grid-template-columns: repeat(2, 1fr); }
    body.zg-preset-bold .service-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    body.zg-preset-bold .service-card:nth-child(n+2) { grid-column: span 2; }
}
body.zg-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.zg-preset-bold .service-card:nth-child(1) .service-card-body { display: flex; flex-direction: column; justify-content: center; height: 100%; }
body.zg-preset-bold .service-card:nth-child(1) .service-card-body h3 { font-size: 1.6rem; }
body.zg-preset-bold .service-card-body { position: relative; }
body.zg-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.zg-preset-bold .service-card:hover {
    transform: translateX(-4px);
    box-shadow: 6px 0 24px rgba(0,0,0,.12);
}
body.zg-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.zg-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.zg-preset-bold .gallery-item { border-radius: var(--radius-card); }
body.zg-preset-bold .gallery-item:nth-child(3n+1) { transform: rotate(-1deg); }
body.zg-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.zg-preset-minimal {
    --radius-card: 0;
    --radius-btn: 4px;
    --section-py: 8rem;
}
body.zg-preset-minimal h1,
body.zg-preset-minimal h2 {
    font-family: var(--font-preset-accent), 'Inter', system-ui, sans-serif;
    font-weight: 300;
    letter-spacing: -0.01em;
}
body.zg-preset-minimal h1 strong,
body.zg-preset-minimal h1 em { font-weight: 700; font-style: normal; }
body.zg-preset-minimal .hero-eyebrow { letter-spacing: 0.35em; font-weight: 400; }
body.zg-preset-minimal .hero-eyebrow::before,
body.zg-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.zg-preset-minimal .hero-slider,
body.zg-preset-minimal .hero-overlay,
body.zg-preset-minimal .hero-dots { display: none; }
body.zg-preset-minimal #hero {
    min-height: auto;
    background: var(--color-bg);
    padding: 9rem 0 5rem;
}
body.zg-preset-minimal .hero-eyebrow { color: var(--color-primary); }
body.zg-preset-minimal .hero-eyebrow::before,
body.zg-preset-minimal .hero-eyebrow::after { background: var(--color-primary); }
body.zg-preset-minimal .hero-content h1 { color: var(--color-heading); text-shadow: none; }
body.zg-preset-minimal .hero-content h1 em { color: var(--color-primary); }
body.zg-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.zg-preset-minimal .btn-outline { border-color: var(--color-text); color: var(--color-text); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.zg-preset-minimal .btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
body.zg-preset-minimal .hero-stats { border-top: 1px solid var(--color-border); gap: 3rem; }
/* About: no floating badge, no rotation — a hairline frame only */
body.zg-preset-minimal .about-image-wrap { box-shadow: none; border: 1px solid var(--color-border); border-radius: 0; }
body.zg-preset-minimal .about-image-wrap img { border-radius: 0; }
body.zg-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.zg-preset-minimal .service-card,
body.zg-preset-minimal .review-card,
body.zg-preset-minimal .zg-archive-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--color-border);
    padding: 2rem 0;
}
body.zg-preset-minimal .service-card-image { display: none; }
body.zg-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.zg-preset-minimal .btn-primary::after { content: ' →'; }
body.zg-preset-minimal .btn-primary:hover { color: var(--color-link); }
body.zg-preset-minimal .section { padding-block: 4rem; }
body.zg-preset-minimal .section-eyebrow,
body.zg-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.zg-preset-minimal .gallery-grid { grid-auto-rows: 240px; gap: 2px; }
body.zg-preset-minimal .gallery-item { grid-column: span 3 !important; grid-row: span 1 !important; border-radius: 0; }
body.zg-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.zg-preset-aurola {
    --radius-card: 20px;
    --radius-btn: 999px;
    --section-py: 5rem;
    --card-shadow: 0 10px 30px rgba(0,0,0,.1);
}
body.zg-preset-aurola .hero-overlay {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 55%, var(--color-accent) 100%);
    opacity: .85;
}
body.zg-preset-aurola .hero-slide { filter: saturate(1.15); }
body.zg-preset-aurola #hero { overflow: hidden; }
body.zg-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.zg-preset-aurola .hero-content { position: relative; z-index: 2; }
body.zg-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.zg-preset-aurola .hero-content h1 em { font-style: normal; color: var(--color-bg); }
body.zg-preset-aurola .hero-eyebrow {
    background: var(--color-bg);
    color: var(--color-heading);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    font-weight: 800;
}
body.zg-preset-aurola .hero-eyebrow::before,
body.zg-preset-aurola .hero-eyebrow::after { display: none; }
body.zg-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.zg-preset-aurola .btn-outline { border-width: 3px; }
body.zg-preset-aurola .service-card {
    border-radius: var(--radius-card);
    border-top: 6px solid var(--color-accent);
    box-shadow: var(--card-shadow);
}
body.zg-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.zg-preset-inboxly {
    --radius-card: 24px;
    --radius-btn: 999px;
    --section-py: 5.5rem;
}
body.zg-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.zg-preset-inboxly #hero { overflow: hidden; }
body.zg-preset-inboxly .hero-slider,
body.zg-preset-inboxly .hero-overlay {
    left: 4%; right: auto; width: 46%;
    top: 3rem; bottom: 3rem; height: auto;
    border-radius: 28px;
}
body.zg-preset-inboxly .hero-slider { overflow: hidden; }
body.zg-preset-inboxly .hero-overlay { background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 55%); }
body.zg-preset-inboxly .hero-content { max-width: 460px; }
body.zg-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.zg-preset-inboxly #hero { display: block; min-height: auto; }
    body.zg-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.zg-preset-inboxly .hero-overlay { display: none; }
    body.zg-preset-inboxly #hero::after { display: none; }
    body.zg-preset-inboxly .hero-content { max-width: 100%; }
    body.zg-preset-inboxly .hero-content h1 { color: var(--color-heading); text-shadow: none; }
    body.zg-preset-inboxly .hero-content h1 em { color: var(--color-primary); }
    body.zg-preset-inboxly .hero-content p { color: var(--color-text-muted); text-shadow: none; }
    body.zg-preset-inboxly .hero-eyebrow { color: var(--color-primary); }
}
body.zg-preset-inboxly .about-image-wrap { border-radius: var(--radius-card); }
body.zg-preset-inboxly .about-image-wrap img { border-radius: var(--radius-card); }
body.zg-preset-inboxly .service-card { border-radius: var(--radius-card); }
body.zg-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.zg-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 zg-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;
}
/* #7 — every field the same radius (the first field no longer becomes a pill). */

@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.zg-preset-bloom {
    --radius-card: 28px;
    --radius-btn: 999px;
}

/* Tone palette shared by service banners + review cards (cycled by index) */
body.zg-preset-bloom .service-bloom-banner--tone1,
body.zg-preset-bloom .review-bloom-card--tone1 { background: #FBE7EC; }
body.zg-preset-bloom .service-bloom-banner--tone2,
body.zg-preset-bloom .review-bloom-card--tone2 { background: #ECF3E8; }
body.zg-preset-bloom .service-bloom-banner--tone3,
body.zg-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.zg-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.zg-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;
    /* Keep horizontal padding — this element is also .container, and the old
       `padding:2rem 0 4rem` zeroed the side padding so the hero text hugged the
       screen edges on mobile (#12). */
    padding: 2rem 1.5rem 4rem;
}
@media (max-width: 768px) {
    .hero-roast-content { padding: 1.5rem 1.25rem 2.5rem; }
}
.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.zg-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.zg-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;
}
/* Item 7 — the column count follows the number of stats actually filled in, so
   a single stat is one full-width (centred) cell instead of one value pinned to
   the side with two empty columns beside it. */
.hero-beam-statbar-inner--1 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
.hero-beam-statbar-inner--2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; }
.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-statbar-inner--1 { grid-template-columns: 1fr; }
    .hero-beam-statbar-inner--2 { grid-template-columns: repeat(2, 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); }

/* Item 5 — home About summary: a few paragraphs then a link to the About page. */
.about-summary .about-summary__p { margin: 0 0 0.9rem; }
.about-summary__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.4rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.about-summary__more:hover { text-decoration: underline; }
.about-summary__more span { transition: transform .2s ease; }
.about-summary__more:hover span { transform: translateX(-4px); }
.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 (zg-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).
   zapgroup_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) */
.zg-u-nudge-up      { margin-top: -2rem !important; }
.zg-u-nudge-up-lg   { margin-top: -4rem !important; }
.zg-u-nudge-down    { margin-top: 2rem !important; }
.zg-u-gap-less      { margin-bottom: -2rem !important; }
.zg-u-gap-less-lg   { margin-bottom: -4rem !important; }
.zg-u-gap-more      { margin-bottom: 2rem !important; }
.zg-u-flush         { margin-top: 0 !important; margin-bottom: 0 !important; }

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

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

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

/* ── About: optional extra-images strip (about_image_ids, set in the
   page builder). Additive — only appears when the user adds photos
   beyond the primary about image; preset-agnostic. ── */
.about-extra-images { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.about-extra-images img {
    width: calc(33.333% - 0.4rem);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-btn, 10px);
    border: 1px solid var(--color-border, #e5e5e5);
}
@media (max-width: 600px) { .about-extra-images img { width: calc(50% - 0.3rem); } }

/* Business name as a smaller second line inside the hero H1 (SEO/identity). */
.hero-beam-title-biz { display: block; font-size: 0.5em; font-weight: 600; opacity: 0.9; margin-top: 0.4rem; }

/* Trust bar — the under-hero trust-signal strip (garage: authorised/warranty/
   diagnosis/fair-price). Dark band with brand-colour checkmarks so it reads on
   any preset while staying on-brand. */
.zg-trust-bar { background: var(--color-secondary, #1e1e1e); color: #fff; }
.zg-trust-bar__list { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; align-items: center; color: #fff; }
/* color set directly on the item — a global `li{color}` rule colours the list
   item and would otherwise beat the inherited #fff, leaving dark-on-dark. */
.zg-trust-bar__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: clamp(13px, 1.35vw, 16px); white-space: nowrap; color: #fff; }
.zg-trust-bar__check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary, #f5b301); color: var(--color-secondary, #1e1e1e); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
@media (max-width: 600px) { .zg-trust-bar__list { gap: 8px 18px; padding: 12px 0; } .zg-trust-bar__item { font-size: 13px; } }

/* Short lead form at the bottom of each service page. */
.service-lead { padding: 3.5rem 0; background: var(--color-surface-muted, #f5f5f4); }
.service-lead__form { max-width: 640px; margin: 0 auto; }
.service-lead__intro { margin: 0.4rem 0 1.4rem; opacity: 0.85; }

/* Content + left sidebar (service pages reuse the blog single-grid). The
   sidebar sticks beside the content on desktop and drops below on mobile. */
.single-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 90px; align-self: start; }
.sidebar-card--contact textarea.sidebar-form__input { min-height: 76px; resize: vertical; font-family: inherit; }
.sidebar-card__phone { display: block; text-align: center; margin-top: 0.7rem; font-weight: 700; color: #fff; text-decoration: none; font-size: 1.05rem; }
.sidebar-card__phone:hover { text-decoration: underline; }
.zg-service-single .single-content .entry-content, .zg-service-single .single-content { }
@media (max-width: 900px) { .single-sidebar { position: static; } .single-body--classic .single-grid { grid-template-columns: 1fr; } }

/* TOC moved into the sidebar card — strip its own box so it blends into the
   card, and cap the height so a long TOC doesn't push the sticky column down. */
.sidebar-card--toc { padding-block: 1.2rem; }
/* #6 — on mobile the single-post/service sidebar stacks BELOW the article (and
   its FAQ), so the sidebar TOC card ended up as a duplicate table-of-contents
   at the very bottom, after the Q&A. The inline collapsible TOC at the top of
   the article already covers mobile, so hide the sidebar TOC below 901px. */
@media (max-width: 900px) { .sidebar-card--toc { display: none; } }
.zg-toc--sidebar { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
.zg-toc--sidebar[open] { padding-bottom: 0; }
.zg-toc--sidebar .zg-toc__list { margin-top: 0.7rem; max-height: 320px; overflow-y: auto; }

/* ============================================================
   SECTION 3 (#4) — Mobile text fit / no overflow
   Long Hebrew titles (e.g. the services "תוכן עניינים" TOC links) and any
   long unbroken token used to overflow their container on narrow screens and
   break the page layout. Two root causes are fixed here:
   1. Text that can't wrap → force wrapping everywhere.
   2. Flex/grid children default to min-width:auto, so their content can push
      the track wider than the viewport → pin them to min-width:0 / max-width.
   Kept surgical (no blunt overflow-x:hidden, which would break sticky/fixed
   positioning). ============================================================ */
h1, h2, h3, h4, h5, h6, p, li, a, span, blockquote, dd, dt, figcaption, label {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* The services / blog TOC specifically: each entry wraps to the next line
   instead of overflowing the sidebar. */
.zg-toc__list .toc-item a {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.single-sidebar, .sidebar-card, .zg-toc, .zg-toc__list,
.single-grid, .single-grid > * {
  min-width: 0;
}
/* Media and wide blocks never exceed their column. */
.entry-content img, .entry-content table, .entry-content pre,
img, video, iframe { max-width: 100%; }
.entry-content table, .entry-content pre { overflow-x: auto; display: block; }

@media (max-width: 768px) {
  /* Any grid/flex row that could carry long content: let children shrink so
     text wraps instead of forcing horizontal overflow of the page. */
  .services-grid, .services-grid > *,
  .container, .container > * { min-width: 0; }
  .container { max-width: 100%; overflow-wrap: break-word; }

  /* Preset hero content wrappers: several are a .container (or a max-width
     block) whose `padding: X 0` zeroed the side padding, so the hero text hugged
     the screen edge on mobile. Force horizontal breathing room on ALL of them
     so no preset shows text flush to the edge. (Absolute bg/slider layers are
     unaffected — they sit at inset:0 behind this content.) */
  #hero .hero-beam-content,
  #hero .hero-bloom-copy,
  #hero .hero-gleam-content,
  #hero .hero-lifecoach-container,
  #hero .hero-orbit-container,
  #hero .hero-roast-content,
  #hero .hero-ranch-content,
  #hero .hero-mirage-content,
  #hero .hero-levant-content,
  #hero .hero-content,
  #hero > .container {
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
    box-sizing: border-box;
  }
}


/* ============================================================
   RESTAURANT PRESETS (dark) — rebuilt to match ranchhouse.co.il /
   dubairestaurant.co.il: a black / near-black canvas throughout, the
   brand accent (from the palette) for highlights, image-based "menu"
   sections (restaurants photograph the menu, never type it). Structure
   + colour only; each preset's signature colour comes from its swatch.
   ============================================================ */

/* ====================== RANCH — "אש וגחלים" (black + ember red) ====================== */
body.zg-preset-ranch{
  --rh-bg:#0b0a09; --rh-panel:#141110; --rh-ink:#f4efe9; --rh-muted:rgba(244,239,233,.66);
  --rh-line:rgba(244,239,233,.12); --rh-accent:#a32b2d;
  --radius-card:6px; --radius-btn:2px;
  background:#0b0a09;
}
body.zg-preset-ranch .section,body.zg-preset-ranch .section-alt{ background:var(--rh-bg); color:var(--rh-ink); }
.ranch-eyebrow{ display:inline-flex;align-items:center;gap:.7rem;color:var(--rh-accent);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin-bottom:.9rem; }
.ranch-eyebrow--light{ color:#fff; }
.ranch-rule{ display:inline-block;width:32px;height:2px;background:var(--rh-accent); }
.ranch-title{ font-family:var(--font-heading);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--rh-ink);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.06;margin-bottom:1rem; }
.ranch-lead{ color:var(--rh-muted);font-size:1.03rem;margin-bottom:1rem; }
.ranch-btn{ display:inline-flex;align-items:center;justify-content:center;background:var(--rh-accent);color:#fff;border:2px solid var(--rh-accent);border-radius:var(--radius-btn);padding:.9rem 2rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.88rem;text-decoration:none; }
.ranch-btn--ghost{ background:transparent;color:#fff;border-color:rgba(255,255,255,.5); }
.ranch-head{ max-width:640px;margin:0 auto 2.6rem;text-align:center; }
.ranch-head .ranch-eyebrow{ justify-content:center; }
#hero.hero-ranch{ display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;background:#000;background-size:cover;background-position:center; }
.hero-ranch__scrim{ position:absolute;inset:-2px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.92) 100%); }
.hero-ranch__content{ position:relative;z-index:2;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:2.5rem 1.5rem clamp(3rem,7vw,6rem); }
.hero-ranch__title{ font-family:var(--font-heading);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,10vw,7rem);line-height:.9;margin-bottom:1.2rem;display:flex;flex-direction:column;align-items:flex-start; }
.hero-ranch__line--1{ color:#fff; } .hero-ranch__line--2{ color:var(--rh-accent); }
.hero-ranch__lead{ color:rgba(255,255,255,.85);max-width:520px;font-size:1.08rem;margin-bottom:1.8rem; }
.hero-ranch__actions{ display:flex;gap:1rem;flex-wrap:wrap; }
#about.about-ranch{ background:var(--rh-bg); }
.about-ranch__grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.about-ranch__media img{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--rh-line); }
.about-ranch__actions{ display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem; }
#services.services-ranch{ background:#000;padding:clamp(2.5rem,5vw,4rem) 0; }
.services-ranch-head{ text-align:center;max-width:640px;margin:0 auto 2.2rem; }
.services-ranch-head .ranch-eyebrow{ justify-content:center; }
.services-ranch-shots{ display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:1rem; }
.services-ranch-shot{ margin:0;overflow:hidden;border-radius:var(--radius-card);cursor:pointer; }
.services-ranch-shot--1{ grid-column:span 2;grid-row:span 2; }
.services-ranch-shot img{ width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.services-ranch-shot:hover img{ transform:scale(1.05); }
.services-ranch-cta{ text-align:center;margin-top:2rem; }
#gallery.gallery-ranch{ background:var(--rh-bg); }
.gallery-ranch__grid{ display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:1rem; }
.gallery-ranch__item{ position:relative;overflow:hidden;cursor:pointer;grid-row:span 2;border-radius:var(--radius-card); }
.gallery-ranch__item--2,.gallery-ranch__item--4{ grid-row:span 3; }
.gallery-ranch__item img{ width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.gallery-ranch__item:hover img{ transform:scale(1.06); }
.gallery-ranch__caption{ position:absolute;inset-inline:0;bottom:0;padding:.7rem .9rem;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);color:#fff;font-weight:700;font-size:.85rem;transform:translateY(100%);transition:transform .3s ease; }
.gallery-ranch__item:hover .gallery-ranch__caption{ transform:translateY(0); }
#reviews.reviews-ranch{ background:#000; }
.reviews-ranch__panel{ position:relative;background:var(--rh-panel);border:1px solid var(--rh-line);border-radius:var(--radius-card);padding:clamp(2.2rem,5vw,4rem);max-width:820px;margin:0 auto;text-align:center; }
.reviews-ranch__mark{ position:absolute;top:.2rem;inset-inline-start:1.6rem;font-family:Georgia,serif;font-size:7rem;line-height:1;color:var(--rh-accent);opacity:.4; }
.reviews-ranch__quote{ font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.5;margin:.6rem 0 1.6rem;color:#fff; }
.reviews-ranch__by{ display:inline-flex;align-items:center;gap:.85rem; }
.reviews-ranch__avatar{ width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--rh-accent);color:#fff;font-weight:800;border-radius:50%; }
.reviews-ranch__by strong{ color:#fff; } .reviews-ranch__by small{ display:block;color:var(--rh-muted);font-size:.8rem; }
#contact.contact-ranch{ background:var(--rh-bg);padding:clamp(2.5rem,5vw,4rem) 0; }
.contact-ranch__grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.contact-ranch__title{ display:flex;flex-direction:column;font-size:clamp(2.2rem,5vw,3.4rem);line-height:.98; }
.contact-ranch__list{ list-style:none;padding:0;margin:1.5rem 0 0; }
.contact-ranch__list li{ display:flex;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--rh-line); }
.contact-ranch__list em{ color:var(--rh-accent);font-style:normal;font-weight:700;min-width:64px; }
.contact-ranch__list a{ color:var(--rh-ink);text-decoration:none; }
.contact-ranch__form{ background:var(--rh-panel);border:1px solid var(--rh-line);border-radius:var(--radius-card); }
.contact-ranch__form .contact-form__title{ color:#fff; }
.contact-ranch__form label{ color:var(--rh-muted); }
.contact-ranch__form input,.contact-ranch__form textarea{ background:#0b0a09;border:1px solid var(--rh-line);color:#fff; }
.contact-ranch__map{ grid-column:1/-1;margin-top:1.5rem;border-radius:var(--radius-card);overflow:hidden; }
@media (max-width:900px){ .about-ranch__grid,.contact-ranch__grid{grid-template-columns:1fr;} .services-ranch-shots{grid-template-columns:1fr 1fr;grid-auto-rows:160px;} .services-ranch-shot--1{grid-column:span 2;} .gallery-ranch__grid{grid-template-columns:repeat(2,1fr);} }

/* ====================== MIRAGE — "זוהר מדברי" (black + gold) ====================== */
body.zg-preset-mirage{
  --mg-bg:#0a0908; --mg-panel:#141010; --mg-ink:#f6f1e7; --mg-muted:rgba(246,241,231,.64);
  --mg-line:rgba(200,169,106,.28); --mg-gold:#c8a96a;
  --radius-card:0; --radius-btn:0;
  background:#0a0908;
}
body.zg-preset-mirage .section,body.zg-preset-mirage .section-alt{ background:var(--mg-bg); color:var(--mg-ink); }
.mirage-eyebrow{ display:inline-flex;align-items:center;gap:1rem;color:var(--mg-gold);font-weight:600;letter-spacing:.26em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem; }
.mirage-rule{ display:inline-block;width:40px;height:1px;background:var(--mg-gold);opacity:.8; }
.mirage-title{ font-family:var(--font-heading);font-weight:500;color:var(--mg-ink);font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.12;margin-bottom:.4rem; }
.mirage-ornament{ display:block;color:var(--mg-gold);font-size:1.3rem;margin:.3rem 0 1rem; }
.mirage-ornament--light{ }
.mirage-lead{ color:var(--mg-muted);font-size:1.03rem;margin:.6rem 0 1rem; }
.mirage-btn{ display:inline-flex;align-items:center;justify-content:center;background:var(--mg-gold);color:#14110e;border:1px solid var(--mg-gold);border-radius:var(--radius-btn);padding:.9rem 2.3rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;text-decoration:none; }
.mirage-btn--ghost{ background:transparent;color:#fff;border-color:rgba(255,255,255,.5); }
.mirage-head{ max-width:640px;margin:0 auto 2.6rem;text-align:center; }
.mirage-head .mirage-eyebrow{ justify-content:center; }
#hero.hero-mirage{ display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;background:#000;background-size:cover;background-position:center;text-align:center; }
.hero-mirage__scrim{ position:absolute;inset:-2px;z-index:1;background:linear-gradient(180deg,rgba(8,7,6,.5),rgba(8,7,6,.8)); }
.hero-mirage__content{ position:relative;z-index:2;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:3rem 1.5rem;max-width:820px;margin:0 auto; }
.hero-mirage__title{ font-family:var(--font-heading);font-weight:500;color:#fff;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.05;margin-bottom:.4rem; }
.hero-mirage__lead{ color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 2rem;font-size:1.06rem; }
.hero-mirage__actions{ display:flex;gap:1rem;flex-wrap:wrap;justify-content:center; }
#about.about-mirage{ background:var(--mg-bg); }
.about-mirage__grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center; }
.about-mirage__frame{ padding:10px;border:1px solid var(--mg-gold); }
.about-mirage__frame img{ display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; }
.about-mirage__actions{ display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem; }
#services.services-mirage{ background:#000;padding:clamp(2.5rem,5vw,4rem) 0; }
.services-mirage-head{ text-align:center;max-width:640px;margin:0 auto 2.2rem; }
.services-mirage-head .mirage-eyebrow{ justify-content:center; }
.services-mirage-shots{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.services-mirage-shot{ margin:0;padding:8px;border:1px solid var(--mg-gold);overflow:hidden;cursor:pointer; }
.services-mirage-shot img{ display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease; }
.services-mirage-shot:hover img{ transform:scale(1.05); }
.services-mirage-cta{ text-align:center;margin-top:2rem; }
#gallery.gallery-mirage{ background:var(--mg-bg); }
.gallery-mirage__grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem; }
.gallery-mirage__item{ position:relative;overflow:hidden;cursor:pointer;padding:8px;border:1px solid var(--mg-gold); }
.gallery-mirage__item img{ display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease; }
.gallery-mirage__item:hover img{ transform:scale(1.05); }
.gallery-mirage__caption{ position:absolute;inset-inline:8px;bottom:8px;padding:.55rem .8rem;background:rgba(8,7,6,.8);color:var(--mg-gold);font-weight:600;font-size:.8rem;letter-spacing:.05em;opacity:0;transition:opacity .3s ease; }
.gallery-mirage__item:hover .gallery-mirage__caption{ opacity:1; }
#reviews.reviews-mirage{ background:#000; }
.reviews-mirage__panel{ max-width:760px;margin:0 auto;text-align:center;color:#fff; }
.reviews-mirage__ornament{ display:block;color:var(--mg-gold);font-size:2rem;margin-bottom:1rem; }
.reviews-mirage__quote{ font-family:var(--font-heading);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;margin:0 0 1.6rem;color:#fff; }
.reviews-mirage__by{ display:inline-flex;flex-direction:column;align-items:center;gap:.3rem; }
.reviews-mirage__rule{ width:40px;height:1px;background:var(--mg-gold);margin-bottom:.5rem; }
.reviews-mirage__by strong{ color:var(--mg-gold);letter-spacing:.06em; } .reviews-mirage__by small{ color:rgba(255,255,255,.6);font-size:.82rem; }
#contact.contact-mirage{ background:var(--mg-bg);padding:clamp(2.5rem,5vw,4rem) 0; }
.contact-mirage__grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.contact-mirage__title{ font-size:clamp(2rem,4.5vw,3rem); }
.contact-mirage__list{ list-style:none;padding:0;margin:1.2rem 0 0; }
.contact-mirage__list li{ display:flex;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--mg-line); }
.contact-mirage__list em{ color:var(--mg-gold);font-style:normal;font-weight:600;min-width:64px;letter-spacing:.05em; }
.contact-mirage__list a{ color:rgba(255,255,255,.85);text-decoration:none; }
.contact-mirage__form{ background:var(--mg-panel);border:1px solid var(--mg-gold);border-radius:0; }
.contact-mirage__form .contact-form__title{ color:var(--mg-gold); }
.contact-mirage__form label{ color:var(--mg-muted); }
.contact-mirage__form input,.contact-mirage__form textarea{ background:#0a0908;border:1px solid var(--mg-line);color:#fff; }
.contact-mirage__map{ grid-column:1/-1;margin-top:1.5rem; }
@media (max-width:900px){ .about-mirage__grid,.contact-mirage__grid{grid-template-columns:1fr;} .services-mirage-shots,.gallery-mirage__grid{grid-template-columns:repeat(2,1fr);} }

/* ====================== LEVANT — "טעמי הלבנט" (dark warm + terracotta, arch motif) ====================== */
body.zg-preset-levant{
  --lv-bg:#14100c; --lv-panel:#1e1712; --lv-ink:#f3e9db; --lv-muted:rgba(243,233,219,.66);
  --lv-line:rgba(243,233,219,.12); --lv-terra:#c0562e;
  --radius-card:16px; --radius-btn:999px;
  background:#14100c;
}
body.zg-preset-levant .section,body.zg-preset-levant .section-alt{ background:var(--lv-bg); color:var(--lv-ink); }
.levant-arch{ border-radius:180px 180px 14px 14px;overflow:hidden; }
.levant-arch img{ display:block;width:100%;height:100%;object-fit:cover; }
.levant-eyebrow{ display:inline-block;color:var(--lv-terra);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin-bottom:.7rem; }
.levant-title{ font-family:var(--font-heading);font-weight:700;color:var(--lv-ink);font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.12;margin-bottom:.8rem; }
.levant-mosaic{ display:block;width:66px;height:8px;margin:.3rem 0 1rem;background:repeating-linear-gradient(45deg,var(--lv-terra) 0 6px,transparent 6px 12px);border-radius:4px; }
.levant-lead{ color:var(--lv-muted);font-size:1.03rem;margin-bottom:1rem; }
.levant-btn{ display:inline-flex;align-items:center;justify-content:center;background:var(--lv-terra);color:#fff;border:2px solid var(--lv-terra);border-radius:var(--radius-btn);padding:.85rem 2rem;font-weight:700;text-decoration:none; }
.levant-btn--ghost{ background:transparent;color:#fff;border-color:rgba(255,255,255,.5); }
.levant-head{ max-width:640px;margin:0 auto 2.6rem;text-align:center; }
.levant-head .levant-mosaic{ margin-inline:auto; }
#hero.hero-levant{ display:flex;align-items:center;min-height:100vh;min-height:100dvh;background:#000;background-size:cover;background-position:center; }
.hero-levant__scrim{ position:absolute;inset:-2px;z-index:1;background:linear-gradient(180deg,rgba(20,12,8,.35),rgba(20,12,8,.75)); }
.hero-levant__wrap{ position:relative;z-index:2;width:100%;box-sizing:border-box;display:flex;justify-content:flex-start;padding:2rem 1.5rem 4rem; }
.hero-levant__card{ position:relative;background:color-mix(in srgb,var(--lv-panel) 90%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--lv-line);border-radius:200px 200px var(--radius-card) var(--radius-card);padding:clamp(2.2rem,4vw,3.4rem) clamp(1.6rem,3vw,2.6rem);max-width:540px;text-align:center; }
.hero-levant__card .levant-mosaic{ margin-inline:auto; }
.hero-levant__title{ font-family:var(--font-heading);font-weight:700;color:#fff;font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.08;margin-bottom:.8rem; }
.hero-levant__lead{ color:rgba(255,255,255,.82);margin:0 auto 1.8rem;font-size:1.04rem; }
.hero-levant__actions{ display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center; }
#about.about-levant{ background:var(--lv-bg); }
.about-levant__grid{ display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.about-levant__media .levant-arch{ max-width:460px;margin-inline:auto;aspect-ratio:4/5; }
.about-levant__actions{ display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem; }
#services.services-levant{ background:#000;padding:clamp(2.5rem,5vw,4rem) 0; }
.services-levant-head{ text-align:center;max-width:640px;margin:0 auto 2.2rem; }
.services-levant-head .levant-mosaic{ margin-inline:auto; }
.services-levant-shots{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem; }
.services-levant-shot{ margin:0;cursor:pointer; }
.services-levant-shot .levant-arch{ aspect-ratio:3/4;box-shadow:0 10px 26px rgba(0,0,0,.4); }
.services-levant-shot:hover .levant-arch img{ transform:scale(1.05); }
.services-levant-shot .levant-arch img{ transition:transform .5s ease; }
.services-levant-cta{ text-align:center;margin-top:2rem; }
#gallery.gallery-levant{ background:var(--lv-bg); }
.gallery-levant__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem; }
.gallery-levant__item{ cursor:pointer;text-align:center; }
.gallery-levant__item .levant-arch{ aspect-ratio:3/4;margin-bottom:.6rem;box-shadow:0 10px 24px rgba(0,0,0,.4); }
.gallery-levant__item .levant-arch img{ transition:transform .5s ease; }
.gallery-levant__item:hover .levant-arch img{ transform:scale(1.05); }
.gallery-levant__caption{ font-size:.85rem;color:var(--lv-muted);font-weight:600; }
#reviews.reviews-levant{ background:#000; }
.reviews-levant__grid{ display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.reviews-levant__media .levant-arch{ max-width:360px;aspect-ratio:4/5; }
.reviews-levant__copy{ position:relative; }
.reviews-levant__mark{ position:absolute;top:-1.6rem;inset-inline-start:-.4rem;font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--lv-terra);opacity:.45; }
.reviews-levant__quote{ font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.55;margin:.8rem 0 1.4rem;color:#fff; }
.reviews-levant__by{ display:flex;align-items:center;gap:.85rem; }
.reviews-levant__avatar{ width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lv-terra);color:#fff;font-weight:700; }
.reviews-levant__by strong{ color:#fff; } .reviews-levant__by small{ display:block;color:var(--lv-muted);font-size:.8rem; }
#contact.contact-levant{ background:var(--lv-panel);padding:clamp(2.5rem,5vw,4rem) 0; }
.contact-levant__grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center; }
.contact-levant__list{ list-style:none;padding:0;margin:1.5rem 0 0; }
.contact-levant__list li{ display:flex;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--lv-line); }
.contact-levant__list em{ color:var(--lv-terra);font-style:normal;font-weight:700;min-width:64px; }
.contact-levant__list a{ color:var(--lv-ink);text-decoration:none; }
.contact-levant__form{ background:var(--lv-bg);border:1px solid var(--lv-line);border-radius:60px 60px var(--radius-card) var(--radius-card); }
.contact-levant__form .contact-form__title{ color:#fff; }
.contact-levant__form label{ color:var(--lv-muted); }
.contact-levant__form input,.contact-levant__form textarea{ background:var(--lv-panel);border:1px solid var(--lv-line);color:#fff; }
.contact-levant__map{ grid-column:1/-1;margin-top:1.5rem;border-radius:var(--radius-card);overflow:hidden; }
@media (max-width:900px){ .about-levant__grid,.contact-levant__grid,.reviews-levant__grid{grid-template-columns:1fr;} .services-levant-shots{grid-template-columns:repeat(2,1fr);} .gallery-levant__grid{grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   PRESET — "asham" (סגול וזהב): royal-purple structure + gold accents,
   modeled 1:1 on the a-sham.co.il reference. Reuses the base section
   templates; this block supplies the identity (gold pill buttons, gold
   rounded-square contact icons, a purple sticky contact-form card, a purple
   CTA band, purple headings). --asham-gold / --asham-purple keep it tunable.
   ============================================================ */
body.zg-preset-asham {
  --asham-gold: #f5b400;
  --asham-gold-dark: #d99a00;
  --asham-gold-light: #ffce55;
  --asham-purple: #5b1a8f;
  --asham-purple-dark: #46146e;
  --asham-ink: #2a1440;
  /* #8 — the hero eyebrow / <em> / stat-numbers use --color-link-on-dark
     (a contrast-computed link colour) which in asham resolved to a hue
     unrelated to the palette. Redefine it to a LIGHT GOLD from the template's
     own three colours so those accents stay on-brand (still high-contrast on
     the dark hero photo). */
  --color-link-on-dark: #ffce55;
}
/* Headings + eyebrows read purple/gold like the reference. */
body.zg-preset-asham h1,
body.zg-preset-asham h2,
body.zg-preset-asham h3,
body.zg-preset-asham .section-header h2,
body.zg-preset-asham .page-hero__title { color: var(--asham-ink); }
body.zg-preset-asham .eyebrow,
body.zg-preset-asham .hero-eyebrow,
body.zg-preset-asham .page-hero__title { color: var(--asham-gold); }
/* Page-hero band title centered gold over the photo (inner pages). */
body.zg-preset-asham .page-hero__title { font-weight: 800; }

/* Gold pill buttons (nav CTA + primary buttons + form submit). */
body.zg-preset-asham .btn-primary,
body.zg-preset-asham .nav-phone-btn,
body.zg-preset-asham .form-submit,
body.zg-preset-asham .hero-cta,
body.zg-preset-asham .btn.btn-primary {
  background: var(--asham-gold);
  color: #241633;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(245,180,0,.28);
}
body.zg-preset-asham .btn-primary:hover,
body.zg-preset-asham .nav-phone-btn:hover,
body.zg-preset-asham .btn.btn-primary:hover {
  background: var(--asham-gold-dark);
  color: #241633;
}
/* #6 — INVERT the submit button colours (swap background/text): a dark ink
   panel with GOLD text, so the "שליחה" button stands apart from the gold
   primary buttons and reads clearly on the purple contact-form card. */
body.zg-preset-asham .form-submit,
body.zg-preset-asham .contact-form .form-submit {
  background: var(--asham-ink);
  color: var(--asham-gold);
  box-shadow: 0 6px 18px rgba(42,20,64,.35);
}
body.zg-preset-asham .form-submit:hover,
body.zg-preset-asham .contact-form .form-submit:hover {
  background: #14091f;
  color: var(--asham-gold-light, #ffce55);
}
body.zg-preset-asham .form-submit svg { color: var(--asham-gold); }
/* Secondary / ghost buttons: purple outline. */
body.zg-preset-asham .btn-secondary,
body.zg-preset-asham .btn.btn-outline {
  background: transparent;
  color: var(--asham-purple);
  border: 2px solid var(--asham-purple);
  border-radius: 8px;
}
body.zg-preset-asham .btn-secondary:hover { background: var(--asham-purple); color: #fff; }

/* Contact section: gold rounded-SQUARE icon tiles + purple form card. */
body.zg-preset-asham .contact-info-icon {
  background: var(--asham-gold);
  color: #241633;
  border-radius: 12px;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(245,180,0,.25);
}
body.zg-preset-asham .contact-info-title { color: var(--asham-ink); }
body.zg-preset-asham .contact-info-item { border-bottom: 1px solid #ece6f3; }
body.zg-preset-asham .contact-form {
  background: var(--asham-purple);
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 20px 50px -20px rgba(91,26,143,.55);
}
body.zg-preset-asham .contact-form__title { color: #fff; }
body.zg-preset-asham .contact-form label { color: #e9d9f5; }
body.zg-preset-asham .contact-form input,
body.zg-preset-asham .contact-form textarea,
body.zg-preset-asham .contact-form select {
  background: #fff;
  border: none;
  border-radius: 8px;
  color: #241633;
}
body.zg-preset-asham .contact-form input::placeholder,
body.zg-preset-asham .contact-form textarea::placeholder { color: #8a7a98; }

/* CTA band / reviews band above the footer → royal purple. */
body.zg-preset-asham .cta-band,
body.zg-preset-asham .zg-cta-box,
body.zg-preset-asham #reviews.section--band {
  background: var(--asham-purple);
  color: #fff;
}
body.zg-preset-asham .cta-band h2,
body.zg-preset-asham .zg-cta-box__title { color: #fff; }

/* Header CTA pill on the transparent header reads gold. */
body.zg-preset-asham #site-header .btn-primary { color: #241633; }

/* Footer: keep the dark photo footer but let section headings glow gold. */
body.zg-preset-asham .footer-col h4 { color: var(--asham-gold); }
body.zg-preset-asham .site-footer a:hover { color: var(--asham-gold); }
/* #7 — an on-brand textured footer "photo" band: deep purple→ink with a soft
   gold glow top-right and a faint diagonal sheen, so the footer reads as a
   designed background even without a client-supplied footer image. */
body.zg-preset-asham .site-footer {
  background:
    radial-gradient(130% 150% at 88% -25%, rgba(245,180,0,.18), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 40%),
    linear-gradient(160deg, #2a1440 0%, #1c0e2e 55%, #140a22 100%);
  background-color: #140a22;
}

/* Links / interactive accents echo the purple identity. */
body.zg-preset-asham a { color: var(--asham-purple); }
body.zg-preset-asham a:hover { color: var(--asham-purple-dark); }

/* ============================================================
   SPEC v2.0 — Service page + Blog post infrastructure standard
   (Zap Group "מפרט מבנה", modeled on doitchltd anti-patterns).
   Scoped to .zg-spec-v2 (single.php + page-service-single.php) so it
   only governs those two template types. Constants are per the spec;
   brand colours stay dynamic via the theme's existing --color-* vars.
   ============================================================ */
.zg-spec-v2 {
  /* Constant tokens (§2.4). Brand colours map onto the theme's palette. */
  --c-text: #1B1B32;
  --c-text-muted: #55555F;
  --c-surface: #F7F7F9;
  --c-border: #ECECF1;
  --c-cta: var(--color-primary);
  --c-link: var(--color-primary);
}
/* §2.2 — one container width for both templates. */
.zg-spec-v2 .container { max-width: 1200px; margin-inline: auto; padding-inline: 0; }
/* §3.1 — article 70% + 340px sticky sidebar, gap 32px, align start. */
.zg-spec-v2 .single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.zg-spec-v2 .single-content { min-width: 0; }
.zg-spec-v2 .single-sidebar { position: sticky; top: 92px; align-self: start; min-width: 0; }

/* §2.3 — typography scale (desktop). text-align:right, no justify, line-height 1.75 body. */
.zg-spec-v2 .entry-content { color: var(--c-text); font-size: 18px; line-height: 1.75; text-align: right; }
.zg-spec-v2 .entry-content p { line-height: 1.75; text-align: right; }
.zg-spec-v2 .entry-content p, .zg-spec-v2 .entry-content li { text-align: right; }
.zg-spec-v2 .entry-content > * { max-width: 75ch; }   /* max line length (§2.3) */
.zg-spec-v2 .entry-content h1 { font-size: 33px; line-height: 1.25; font-weight: 700; }
.zg-spec-v2 .entry-content h2 { font-size: 27px; line-height: 1.30; font-weight: 700; }
.zg-spec-v2 .entry-content h3 { font-size: 18px; line-height: 1.40; font-weight: 700; }
.zg-spec-v2 .entry-content h4 { font-size: 17px; line-height: 1.40; font-weight: 600; }
.zg-spec-v2 .entry-content li { font-size: 18px; line-height: 1.75; }

/* §2.4 — sidebar cards on the surface/border tokens; card title 18/1.30/700 (div, not heading). */
.zg-spec-v2 .sidebar-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.zg-spec-v2 .sidebar-card__title,
.zg-spec-v2 .zg-toc__title { font-size: 18px; line-height: 1.30; font-weight: 700; color: var(--c-text); }
.zg-spec-v2 .zg-toc--sidebar { position: static; }

/* §2.5 — buttons: 48px min (52 mobile), padding 16/28, radius 10, 17px/600. */
.zg-spec-v2 .btn,
.zg-spec-v2 .btn-primary,
.zg-spec-v2 .btn-secondary,
.zg-spec-v2 .form-submit {
  min-height: 48px;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.zg-spec-v2 .btn + .btn { margin-inline-start: 12px; }   /* 12px min between buttons */

/* §2.6 — forms: field ≥48px, text ≥16px (no iOS zoom), visible labels above field. */
.zg-spec-v2 .contact-form input,
.zg-spec-v2 .contact-form textarea,
.zg-spec-v2 .contact-form select,
.zg-spec-v2 .sidebar-form input,
.zg-spec-v2 .sidebar-form textarea {
  min-height: 48px;
  font-size: 16px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.zg-spec-v2 .contact-form label,
.zg-spec-v2 .sidebar-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--c-text); }
/* The privacy-consent CHECKBOX label is a flex ROW (checkbox + text side by
   side). On service/article pages the spec-v2 rules above (label{display:block}
   + input{min-height:48px}) blew it up — the box became a tall empty box and the
   text stacked below. Re-assert the row layout with higher specificity so it
   renders correctly everywhere. */
.zg-consent,
.zg-spec-v2 .sidebar-form label.zg-consent,
.zg-spec-v2 .contact-form label.zg-consent {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: .55rem; font-size: .85rem; font-weight: 400; margin: .25rem 0 1rem;
}
.zg-consent__box,
.zg-spec-v2 .sidebar-form input.zg-consent__box,
.zg-spec-v2 .contact-form input.zg-consent__box {
  flex: 0 0 auto; width: 18px; height: 18px; min-height: 0;
  margin: 2px 0 0; border: 0; border-radius: 3px;
}
.zg-consent__text { flex: 1 1 auto; margin: 0; font-weight: 400; }

/* §2.3 mobile heading sizes + §2.2 mobile paddings/gap (≤767px). */
@media (max-width: 767px) {
  .zg-spec-v2 .container { padding-inline: 16px; }
  .zg-spec-v2 .single-grid { grid-template-columns: 1fr; gap: 24px; }
  .zg-spec-v2 .single-sidebar { position: static; }
  .zg-spec-v2 .entry-content { font-size: 17px; }
  .zg-spec-v2 .entry-content h1 { font-size: 26px; }
  .zg-spec-v2 .entry-content h2 { font-size: 22px; }
  .zg-spec-v2 .entry-content h3 { font-size: 17px; }
  .zg-spec-v2 .entry-content h4 { font-size: 16px; }
  .zg-spec-v2 .entry-content li { font-size: 17px; }
  .zg-spec-v2 .btn, .zg-spec-v2 .btn-primary, .zg-spec-v2 .form-submit { min-height: 52px; }
  .zg-spec-v2 .form-submit, .zg-spec-v2 .btn--cta-full { width: 100%; }
}
/* §2.1/§2.2 tablet (768–1024): single column, 24px inline padding. */
@media (min-width: 768px) and (max-width: 1024px) {
  .zg-spec-v2 .container { padding-inline: 24px; }
  .zg-spec-v2 .single-grid { grid-template-columns: 1fr; }
  .zg-spec-v2 .single-sidebar { position: static; }
}
/* §5.8 / #7 — a WIDE table (e.g. 4 columns of long text) must never break the
   page. The AI renders every table as <figure class="wp-block-table"><table>…,
   so the FIGURE is the horizontal-scroll container and the table stays a REAL
   table (width:max-content = its natural width, min-width:100% so a small table
   still fills the column). Do NOT set the <table> itself to display:block — that
   collapses the table layout and makes the cells wrap into a broken tall block. */
.zg-spec-v2 .entry-content .wp-block-table {
  display: block; max-width: 100%; min-width: 0; margin-inline: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.zg-spec-v2 .entry-content .wp-block-table > table {
  display: table; width: max-content; min-width: 100%; max-width: none; margin: 0;
}
.zg-spec-v2 .entry-content .wp-block-table th,
.zg-spec-v2 .entry-content .wp-block-table td { white-space: normal; }
/* Any BARE table (not in a figure) still scrolls as a block, capped to 100%. */
.zg-spec-v2 .entry-content > table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* #9 — page-overflow guard: the grid + article column + every direct child must
   be allowed to shrink below their content width, so the scrolling table can
   NEVER stretch the grid track past the viewport and break the whole page. */
.zg-spec-v2 .single-grid, .zg-spec-v2 .single-content, .zg-spec-v2 .entry-content { min-width: 0; }
.zg-spec-v2 .entry-content > * { max-width: 100%; }

/* ── SPEC v2.0 — Phase 2/3 structural blocks (scoped to .zg-spec-v2) ── */
/* §4 post-meta row */
.zg-spec-v2 .post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--c-text-muted); font-size: 14px; margin: 0 0 18px; }
.zg-spec-v2 .post-meta__item { position: relative; }
.zg-spec-v2 .post-meta__item + .post-meta__item::before { content: "·"; position: absolute; inset-inline-start: -11px; }
.zg-spec-v2 .post-meta__item--updated { color: var(--color-primary); font-weight: 600; }

/* §3#8 / §4#7 mid-content CTA banner */
.zg-spec-v2 .inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 20px 24px; margin: 32px 0;
}
.zg-spec-v2 .inline-cta__head { font-size: 19px; font-weight: 700; color: var(--c-text); }
.zg-spec-v2 .inline-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zg-spec-v2 .inline-cta__btn svg { flex: 0 0 auto; }

/* §4#9 service bridge */
.zg-spec-v2 .service-bridge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-primary); color: #fff; border-radius: 16px; padding: 24px 26px; margin: 32px 0;
}
.zg-spec-v2 .service-bridge__title { font-size: 20px; font-weight: 700; }
.zg-spec-v2 .service-bridge__sub { margin: 4px 0 0; opacity: .9; font-size: 15px; }
.zg-spec-v2 .service-bridge__btn { background: #fff; color: var(--color-primary); flex: 0 0 auto; }
.zg-spec-v2 .service-bridge__btn:hover { background: #f2f2f2; color: var(--color-primary); }

/* §4#10 author E-E-A-T card */
.zg-spec-v2 .author-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 20px 22px; margin: 32px 0;
}
.zg-spec-v2 .author-card__avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.zg-spec-v2 .author-card__eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.zg-spec-v2 .author-card__name { font-size: 18px; font-weight: 700; color: var(--c-text); margin-top: 2px; }
.zg-spec-v2 .author-card__bio { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-text-muted); }

/* §3 sidebar trust card */
.zg-spec-v2 .trust-card__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zg-spec-v2 .trust-card__item { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; color: var(--c-text); }
.zg-spec-v2 .trust-card__check { color: var(--color-primary); flex: 0 0 auto; margin-top: 2px; }
.zg-spec-v2 .trust-card__hours { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 3px; }
.zg-spec-v2 .trust-card__hours-label { font-size: 13px; color: var(--c-text-muted); }
.zg-spec-v2 .trust-card__hours-val { font-size: 15px; color: var(--c-text); font-weight: 600; }

/* §2.6 lead-form labels */
.zg-spec-v2 .sidebar-form__field { margin-bottom: 12px; }
.zg-spec-v2 .sidebar-form__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--c-text); }
.zg-spec-v2 .sidebar-form__opt { font-weight: 400; color: var(--c-text-muted); font-size: 13px; }

@media (max-width: 767px) {
  .zg-spec-v2 .inline-cta, .zg-spec-v2 .service-bridge { flex-direction: column; align-items: stretch; text-align: center; }
  .zg-spec-v2 .inline-cta__actions { justify-content: center; }
  .zg-spec-v2 .service-bridge__btn { width: 100%; }
}

/* ============================================================
   PRESET — "ranchhouse" (גחלים ואש): dark steakhouse, crimson accent,
   cream copy, script-style section eyebrows, red pill + outline buttons.
   Modeled on the ranchhouse.co.il reference. CSS-forward: reuses the base
   (photo-hero) sections + this identity layer. Tunable via --rh-*.
   ============================================================ */
body.zg-preset-ranchhouse {
  --rh-red: #b0242a;
  --rh-red-dark: #8e1b20;
  --rh-dark: #17110f;
  --rh-panel: #211a17;
  --rh-cream: #f3ece3;
  --rh-muted: #c9bfb4;
}
/* Cream body copy over the dark ground. */
body.zg-preset-ranchhouse,
body.zg-preset-ranchhouse .section,
body.zg-preset-ranchhouse p,
body.zg-preset-ranchhouse li { color: var(--rh-cream); }
body.zg-preset-ranchhouse .text-muted,
body.zg-preset-ranchhouse .section-header p { color: var(--rh-muted); }

/* Section headings cream; eyebrows read as a red hand-script accent. */
body.zg-preset-ranchhouse h1,
body.zg-preset-ranchhouse h2,
body.zg-preset-ranchhouse h3,
body.zg-preset-ranchhouse .section-header h2 { color: var(--rh-cream); }
body.zg-preset-ranchhouse .eyebrow,
body.zg-preset-ranchhouse .hero-eyebrow,
body.zg-preset-ranchhouse .section-header .eyebrow {
  color: var(--rh-red);
  font-family: "Brush Script MT", "Segoe Script", cursive, var(--font-heading);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-transform: none;
}

/* Red pill primary buttons + red-outline secondary (matches the reference). */
body.zg-preset-ranchhouse .btn-primary,
body.zg-preset-ranchhouse .hero-cta,
body.zg-preset-ranchhouse .form-submit,
body.zg-preset-ranchhouse .btn.btn-primary {
  background: var(--rh-red);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
}
body.zg-preset-ranchhouse .btn-primary:hover,
body.zg-preset-ranchhouse .form-submit:hover,
body.zg-preset-ranchhouse .btn.btn-primary:hover { background: var(--rh-red-dark); color: #fff; }
body.zg-preset-ranchhouse .btn-secondary,
body.zg-preset-ranchhouse .btn.btn-outline {
  background: transparent;
  color: var(--rh-cream);
  border: 1.5px solid var(--rh-red);
  border-radius: 6px;
}
body.zg-preset-ranchhouse .btn-secondary:hover,
body.zg-preset-ranchhouse .btn.btn-outline:hover { background: var(--rh-red); color: #fff; }

/* Dark cards (branch/service/gallery cards) with a red accent edge. */
body.zg-preset-ranchhouse .service-card,
body.zg-preset-ranchhouse .card,
body.zg-preset-ranchhouse .sidebar-card {
  background: var(--rh-panel);
  border: 1px solid rgba(176,36,42,.35);
  color: var(--rh-cream);
}
body.zg-preset-ranchhouse .service-card h3 { color: var(--rh-cream); }

/* Contact form on the dark photo band → white fields + red submit. */
body.zg-preset-ranchhouse .contact-form input,
body.zg-preset-ranchhouse .contact-form textarea,
body.zg-preset-ranchhouse .contact-form select {
  background: #fff;
  color: #17110f;
  border: none;
  border-radius: 4px;
}

/* Inner-page hero band: centered white title over the dark food photo. */
body.zg-preset-ranchhouse .page-hero__title,
body.zg-preset-ranchhouse .page-hero__subtitle { color: #fff; }

/* In-content links / accents echo the crimson identity. */
body.zg-preset-ranchhouse a { color: var(--rh-red); }
body.zg-preset-ranchhouse a:hover { color: var(--rh-red-dark); }
/* Footer branch headings glow red-cream. */
body.zg-preset-ranchhouse .footer-col h4 { color: var(--rh-red); }

/* ============================================================
   PRESET — "dubai" (שחור וזהב): black + gold luxury dining. Full photo hero,
   a black band with a centered logo + large white title + gold rectangular
   buttons, gold nav accent, marble-light content sections, elegant serif.
   Modeled on the dubairestaurant.co.il reference. Tunable via --db-*.
   ============================================================ */
body.zg-preset-dubai {
  --db-gold: #b8975a;
  --db-gold-dark: #9c7d43;
  --db-black: #141414;
  --db-marble: #f7f4ef;
  --db-ink: #1a1a1a;
}
/* Elegant headings; gold eyebrows. */
body.zg-preset-dubai h1,
body.zg-preset-dubai h2,
body.zg-preset-dubai h3,
body.zg-preset-dubai .section-header h2 { color: var(--db-ink); letter-spacing: .01em; }
body.zg-preset-dubai .eyebrow,
body.zg-preset-dubai .hero-eyebrow { color: var(--db-gold); letter-spacing: .18em; text-transform: uppercase; }

/* Gold RECTANGULAR buttons (primary + submit) — the reference's signature. */
body.zg-preset-dubai .btn-primary,
body.zg-preset-dubai .hero-cta,
body.zg-preset-dubai .form-submit,
body.zg-preset-dubai .btn.btn-primary {
  background: var(--db-gold);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.zg-preset-dubai .btn-primary:hover,
body.zg-preset-dubai .form-submit:hover,
body.zg-preset-dubai .btn.btn-primary:hover { background: var(--db-gold-dark); color: #fff; }
/* Secondary: gold outline. */
body.zg-preset-dubai .btn-secondary,
body.zg-preset-dubai .btn.btn-outline {
  background: transparent; color: var(--db-gold);
  border: 1.5px solid var(--db-gold); border-radius: 2px;
}
body.zg-preset-dubai .btn-secondary:hover { background: var(--db-gold); color: #fff; }

/* Hero: dark overlay + centered white title + gold sub-accent. */
body.zg-preset-dubai #hero .hero-beam-scrim,
body.zg-preset-dubai #hero .hero-zg-scrim { background: rgba(10,10,10,.55); }
body.zg-preset-dubai #hero h1,
body.zg-preset-dubai .page-hero__title { color: #fff; }

/* Nav: gold active/hover accent on the dark header. */
body.zg-preset-dubai .main-nav a:hover,
body.zg-preset-dubai .main-nav .current-menu-item > a { color: var(--db-gold); }

/* Light marble content sections + gold section-title underline accent. */
body.zg-preset-dubai .section--plain,
body.zg-preset-dubai .about-text,
body.zg-preset-dubai .zg-page-main { background: var(--db-marble); }
body.zg-preset-dubai .section-header h2::after {
  content: ""; display: block; width: 54px; height: 3px; background: var(--db-gold);
  margin: 12px auto 0; border-radius: 2px;
}

/* Cards + contact form: refined light surfaces with gold accents. */
body.zg-preset-dubai .service-card,
body.zg-preset-dubai .sidebar-card { background: #fff; border: 1px solid #eae4d8; }
body.zg-preset-dubai .contact-form input,
body.zg-preset-dubai .contact-form textarea,
body.zg-preset-dubai .contact-form select { border: 1px solid #ddd3c1; border-radius: 2px; }

/* Links + footer headings in gold. */
body.zg-preset-dubai a { color: var(--db-gold-dark); }
body.zg-preset-dubai a:hover { color: var(--db-gold); }
body.zg-preset-dubai .footer-col h4 { color: var(--db-gold); }

/* #4 — the gold "dubai" preset: the form SUBMIT must not blend into the form
   surface. Invert it (dark ground + gold text) so it always pops, and keep the
   general submit button with a visible edge as a safety net across presets. */
body.zg-preset-dubai .contact-form .form-submit,
body.zg-preset-dubai .sidebar-form__submit,
body.zg-preset-dubai .contact-form .btn-primary {
  background: #141414 !important;
  color: #e7c583 !important;
  border: 1.5px solid var(--db-gold) !important;
}
body.zg-preset-dubai .contact-form .form-submit:hover,
body.zg-preset-dubai .sidebar-form__submit:hover,
body.zg-preset-dubai .contact-form .btn-primary:hover {
  background: #000 !important;
  color: #fff !important;
}
/* General safety: a form submit that happens to match its container still reads
   as a button (subtle contrast ring). */
.contact-form .form-submit,
.sidebar-form__submit { box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* #5 — desktop safety: the article column + its wrappers must never be widened
   by a wide table's intrinsic size (belt-and-suspenders for the scroll rule
   above), on every screen size. */
.zg-spec-v2 .single-grid, .zg-spec-v2 .single-content, .zg-spec-v2 .entry-content,
.single-grid, .single-content, .entry-content { min-width: 0; }
.entry-content table, .zg-spec-v2 .entry-content table { max-inline-size: 100%; }

/* #3 — contact-page opening hours as a clean row list (replaced the <table>). */
.hours-list { list-style: none; margin: 0.6rem 0 0; padding: 0; max-width: 380px; }
.hours-list__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--color-border, #ececf1); font-size: 0.95rem; }
.hours-list__row:last-child { border-bottom: 0; }
.hours-list__day { font-weight: 600; color: var(--color-heading, #1b1b32); }
.hours-list__val { color: var(--color-text-muted, #55555f); }
.hours-list__row.is-closed .hours-list__val { opacity: .7; }

/* Footer atmosphere image — used as the FOOTER BACKGROUND (behind the content,
   like the hero at the top of the page), with a strong dark overlay so the
   light footer text keeps AA contrast. */
#site-footer.has-atmosphere { position: relative; }
#site-footer.has-atmosphere > .container { position: relative; z-index: 1; }
.footer-atmosphere {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.footer-atmosphere__overlay {
    position: absolute; inset: 0; z-index: 0;
    /* Dark enough for AA-legible light footer text, but light enough that the
       atmosphere photo still reads as a background (like the hero). */
    background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.82) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   #4 — GLOBAL SHAPE CONSISTENCY
   One "פינות" choice (design_radius: sharp / medium / rounded) sets the
   --radius-* tokens (see functions.php). Many components historically
   hardcoded their own border-radius, so the choice didn't reach them —
   buttons stayed pill, cards stayed rounded even on "sharp", etc. This block
   forces every component FAMILY onto the shared tokens, so ONE shape choice
   drives the whole site (buttons, team, cards, inputs, images, tables…).
   Functional circles (icon/dock/social buttons, spinners, metro station dots,
   toggles) are deliberately NOT listed here, so they stay round.
   ═══════════════════════════════════════════════════════════════════════ */
.btn, a.button, button.button, .wp-block-button__link, .nav-cta, .nav-phone-btn,
.service-card, .svc-card, .service-detail, .about-card, .about-bio,
.team-member, .team-card, .person-card, .team__card,
.card, .sidebar-card, .review-card, .testimonial-card, .faq-item,
.post-card, .article-card, .blog-card, .zg-toc, .inline-cta, .zg-chart,
.feature-card, .benefit-card, .price-card, .pricing-card, .contact-form,
.sidebar-form, .wp-block-table, .wp-block-table table,
.gallery-item, .gallery-grid--masonry > .gallery-item,
.entry-content img, .wp-block-image img, .service-detail img, .post-thumb img,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], textarea, select,
.form-control, .sidebar-form__submit {
    border-radius: var(--radius-md) !important;
}
/* Small controls / labels take the smaller step of the same scale. */
.btn--sm, .btn-small, .badge, .tag, .chip, .eyebrow, .zg-done-tag, .service-card-cta,
.svc-card-readcta, .trust-card__item {
    border-radius: var(--radius-sm) !important;
}