/* SBR base — design tokens (mirror theme.json) + shared components + utilities.
   Loaded site-wide. Keep small. */
:root{
  --ink:#1d1a16; --brand-deep:#100e0b; --paper:#f4f1ea; --surface:#fff;
  /* --accent stays vivid for buttons/decoration. --accent-strong is the
     text-on-light variant — darkened from #c8852a to #8e5a14 to pass
     WCAG AA (≥4.5:1) on --paper for kicker/em/link text. Lighthouse
     measured 3.76:1 at #a86d17 (still failing), now ~5.0:1 at #8e5a14. */
  --accent:#e0a23c; --accent-strong:#8e5a14; --accent-ink:#1a1206;
  /* --fg-mute slightly darkened (was #857d70) to pass AA for small text
     like author roles and review meta on light backgrounds. */
  --line:#e0d9cc; --fg-soft:#4a443c; --fg-mute:#6e6557;
  --on-dark:#f4efe6; --on-dark-soft:#cdc3b4; --on-dark-mute:#9a9080;
  --ff:'Rubik',system-ui,sans-serif;
  --shadow-card:0 2px 6px rgba(29,26,22,.08),0 26px 50px -22px rgba(29,26,22,.4);
  --shadow-btn:0 14px 28px -12px rgba(224,162,60,.6);
  /* ── Design scales (Refactoring UI). Pre-decided value sets so sizes/space
     come from a system, never an arbitrary px. Adopt site-wide gradually;
     front-page.css is the first template snapped onto these. ── */
  /* type scale */
  --t-12:12px;--t-14:14px;--t-16:16px;--t-18:18px;--t-20:20px;--t-24:24px;
  --t-30:30px;--t-36:36px;--t-48:48px;--t-60:60px;--t-72:72px;
  /* spacing/sizing scale (16px base, no two steps closer than ~25%) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;
  --s-12:48px;--s-16:64px;--s-24:96px;--s-32:128px;
}
html,body{overflow-x:clip}
/* Full-bleed page background — paper extends edge-to-edge so the inner content
   container (max-width:1240px) doesn't leave white margins on either side of the
   viewport on archive / single / static pages. */
html{background:var(--paper)}
body{font-family:var(--ff);background:var(--paper);color:var(--ink)}

/* CTA buttons — primary (filled, sliding arrow) + link (animated underline).
   Global icon sizing inside any sbr-btn: prevents stretched SVGs in flex rows
   (e.g., 100%-wide form submit buttons where the arrow would otherwise fill). */
.sbr-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff);font-weight:700;font-size:16.5px;border:0;border-radius:8px;padding:16px 28px;cursor:pointer;text-decoration:none;transition:background .2s,box-shadow .25s,transform .2s,filter .2s}
.sbr-btn--sm{padding:11px 20px;font-size:15px}
.sbr-btn--primary{background:var(--accent);color:var(--accent-ink)}
/* Hover = glow + lift, NOT dim. Keep the lively amber, add a warm halo and a
   subtle rise so the button feels more prominent on hover, not muted. */
.sbr-btn--primary:hover{background:var(--accent);filter:brightness(1.05);box-shadow:0 10px 26px -8px rgba(224,162,60,.65),0 2px 10px rgba(224,162,60,.4);transform:translateY(-2px)}
.sbr-btn--primary:active{transform:translateY(0);filter:brightness(1)}
.sbr-btn>svg{width:18px;height:18px;flex:0 0 auto}
.sbr-btn--primary>svg:not(.sbr-lf__spin){transition:transform .25s}
.sbr-btn--primary:hover>svg:not(.sbr-lf__spin){transform:translateX(-6px)}
/* Ghost = outline button on light bg (navy). Light = on dark bands (navy CTA). */
.sbr-btn--ghost{background:transparent;color:var(--brand-deep);box-shadow:inset 0 0 0 1.5px var(--line)}
.sbr-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-deep);transform:translateY(-2px)}
.sbr-btn--light{background:#fff;color:var(--brand-deep)}
.sbr-btn--light:hover{filter:brightness(.97);box-shadow:0 12px 28px -10px rgba(0,0,0,.45);transform:translateY(-2px)}
.sbr-btn--ghost>svg,.sbr-btn--light>svg{transition:transform .25s}
.sbr-btn--ghost:hover>svg,.sbr-btn--light:hover>svg{transform:translateX(-6px)}
.sbr-btn--primary .sbr-arw{width:18px;height:18px;transition:transform .25s}
.sbr-btn--primary:hover .sbr-arw{transform:translateX(-6px)}
.sbr-link{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;padding:6px 2px}
.sbr-link .sbr-ico{width:18px;height:18px}
.sbr-link::after{content:"";position:absolute;inset-inline:2px;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s}
.sbr-link:hover::after{transform:scaleX(1)}

/* eyebrow / kicker */
.sbr-kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff);font-weight:600;font-size:13px;letter-spacing:.14em}
.sbr-kicker__bar{width:24px;height:2px;background:var(--accent);display:inline-block}
.sbr-kicker__ln{width:30px;height:1.5px;background:var(--accent);opacity:.55;display:inline-block}

/* Hebrew headings: relieve the cramped default tracking — small positive value,
   just enough to breathe without disconnecting letters. */
h1,h2,h3{letter-spacing:.01em}
.sbr-hero__title{letter-spacing:.015em}

.sbr-stars{color:var(--accent);letter-spacing:1px}

/* atmosphere: subtle film grain (data-URI, no request) */
.sbr-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* motion: LCP-safe staggered reveal (H1 paints immediately) */
@media (prefers-reduced-motion: no-preference){
  @keyframes sbr-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes sbr-settle{from{transform:translateY(10px)}to{transform:none}}
  .sbr-reveal{opacity:0;animation:sbr-rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  .sbr-reveal-h1{animation:sbr-settle .55s ease both}
}

/* Non-hero pages: the sticky header sits in normal flow, so no content offset is needed.
   Hero pages: header is a fixed transparent overlay; the hero paints under it by design. */

/* Pages built from full-bleed SBR section blocks (hero / process) own their own
   vertical rhythm — drop the .site-main padding and inter-block margins so the
   dark bands sit flush. */
.sbr-fullbleed #primary{padding-block:0}
.sbr-fullbleed .entry-content>*{margin-block:0}

/* Archive + team + project + archive-project: each section inside these
   templates manages its own gutter and explicitly opts into full-bleed dark
   CTAs / heros without using the `100vw + margin:calc(50% - 50vw)` escape
   trick — so the parent `.site-main` MUST be edge-to-edge (no padding, no
   max-width) for those CTAs to reach the viewport edges.

   NOTE: `.site-main--service` is INTENTIONALLY OMITTED here. The 3 service
   layouts (sbr-sd--a/b/c) put their gutter ON the main element via
   `.sbr-sd--a{max-width:1160px;padding:30px 24px 70px}` etc., and the dark
   sections that NEED to be full-bleed (layout B hero, layout C band) already
   use the `width:100vw; margin-inline:calc(50% - 50vw)` escape. Resetting
   main here would re-introduce the edge-hugging bug Shai flagged 2026-06-03.

   The `html` prefix bumps specificity from (0,1,0) → (0,1,1) so we win against
   the legacy `.site-main` rule in style.css (which loads AFTER base.css). */
html .site-main--archive,
html .site-main--team,
html .site-main--project,
html .site-main--home,
html .site-main--archive-project,
html .site-main--listing,
html .site-main--blog,
html .site-main--post,
html .site-main--404,
html .site-main--ty,
html .site-main--cp,
html .site-main--bleed,
html .site-main--service-area{padding-block:0;padding-inline:0;max-width:none;margin:0}
/* `--bleed` = reusable full-bleed flag: any new full-width template can add it
   to <main> (alongside its page class) and get edge-to-edge bands with no
   base.css edit. Prevents the recurring "navy band too narrow" bug. */

/* ===== LIGHTBOX (shared component; used wherever assets/js/lightbox.js loads) ===== */
.sbr-lb{position:fixed;inset:0;z-index:9999;background:rgba(8,12,20,.93);display:none;align-items:center;justify-content:center;padding:24px}
.sbr-lb.is-open{display:flex}
.sbr-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:94vw}
.sbr-lb__img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.sbr-lb__cap{color:rgba(255,255,255,.82);font-size:14px;text-align:center;margin:0}
.sbr-lb__x{position:absolute;top:16px;inset-inline-end:20px;width:44px;height:44px;background:rgba(255,255,255,.1);border:0;border-radius:50%;color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2}
.sbr-lb__x:hover{background:rgba(255,255,255,.2)}
.sbr-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.sbr-lb__nav:hover{background:rgba(255,255,255,.2)}
.sbr-lb__prev{inset-inline-end:16px}
.sbr-lb__next{inset-inline-start:16px}
@media(max-width:560px){.sbr-lb__nav{width:42px;height:42px;font-size:26px}.sbr-lb__x{width:38px;height:38px;font-size:24px}}

/* ===== Property tags (real-estate badges) =====
   One pill system, legible on ANY photo background: solid fill + white ring
   (separates from dark photos) + drop shadow (separates from light photos).
   Multiple tags can stack (e.g. rent + commercial + renewal). */
.sbr-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;line-height:1;letter-spacing:.1px;padding:6px 11px;border-radius:99px;white-space:nowrap;
  box-shadow:0 0 0 1.6px rgba(255,255,255,.95),0 4px 14px -4px rgba(0,0,0,.55)}
.sbr-tag svg{width:13px;height:13px;flex:0 0 auto;stroke-width:2.2}
.sbr-tag__dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(39,165,103,.28)}
.sbr-tag--sale{background:#fff;color:var(--brand-deep)}
.sbr-tag--rent{background:#1f7a52;color:#fff}
.sbr-tag--comm{background:var(--brand-deep);color:#fff}
.sbr-tag--renew{background:#6a4fb3;color:#fff}
.sbr-tag--excl{background:var(--accent);color:var(--accent-ink)}
.sbr-tag--avail{background:#fff;color:#1f7a52}
.sbr-tag--sold{background:#13202e;color:#fff}
/* corner stacks on media — start = "what it is", end = state */
.sbr-tags{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;z-index:2}
.sbr-tags--end{inset-inline-start:auto;inset-inline-end:12px;align-items:flex-end}

/* WhatsApp — small recognizable green CTA. Utility-bar link (desktop) +
   floating mobile button. Skipped on contact / thanks pages via PHP. */
.sbr-util__wa{display:inline-flex;align-items:center;align-self:center;line-height:0;color:#25D366;font-weight:600}
.sbr-util__wa:hover{color:#1ea554}
.sbr-util__wa svg{width:16px;height:16px;flex:0 0 auto;display:block}
.sbr-wa-float{position:fixed;bottom:24px;inset-inline-end:24px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(37,211,102,.55),0 0 0 1px rgba(0,0,0,.04);
  transition:transform .2s ease,box-shadow .2s ease}
.sbr-wa-float:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(37,211,102,.65),0 0 0 1px rgba(0,0,0,.04)}
.sbr-wa-float svg{width:32px;height:32px;display:block}
@media(max-width:780px){
	.sbr-wa-float{display:inline-flex;bottom:max(20px,env(safe-area-inset-bottom));inset-inline-end:max(18px,env(safe-area-inset-right))}
}
@media(prefers-reduced-motion:reduce){.sbr-wa-float{transition:none}}

/* Sticky mobile CTA bar (kit standard) — leave-details + call + WhatsApp.
   Mobile only; the B2B default, replaces the lone WhatsApp bubble on small screens. */
.sbr-mcta{display:none}
@media(max-width:780px){
	.sbr-mcta{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;
		position:fixed;inset-inline:0;bottom:0;z-index:70;
		background:#fff;border-top:1px solid var(--line);
		box-shadow:0 -8px 24px -12px rgba(14,37,64,.28);
		padding:8px 8px max(8px,env(safe-area-inset-bottom))}
	.sbr-mcta__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
		padding:9px 4px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13px;line-height:1.1;text-align:center}
	.sbr-mcta__btn svg{width:22px;height:22px;flex:0 0 auto}
	.sbr-mcta__btn--lead{background:var(--accent);color:var(--accent-ink)}
	.sbr-mcta__btn--wa{color:#0a7d38}
	.sbr-mcta__btn--wa svg{color:#25D366}
	body{padding-bottom:70px}
}

/* Native fullscreen reset — our modal/inline <video> forces aspect-ratio +
   object-fit:cover + max-height, which break the element in browser fullscreen
   (distorted / blank). In fullscreen the video must just fill the screen, fit. */
video:fullscreen{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;background:#000}
video:-webkit-full-screen{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;background:#000}
video:-moz-full-screen{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;border-radius:0!important;background:#000}

/* Archive layout switcher (admin-only) — small pill bar above the services
   archive list that lets the admin flip between editorial and photo layouts
   via ?layout=photo. Styles live here so both archive CSS bundles can render
   it consistently. Hidden from regular visitors by the PHP helper. */
.sbr-arch__switcher{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	font-size:12.5px;color:var(--fg-mute);line-height:1.2}
.sbr-arch__switcher b{color:var(--ink);font-weight:600;margin-inline-end:4px}
.sbr-arch__switcher a{color:var(--fg-mute);text-decoration:none;padding:5px 11px;border-radius:99px;
	border:1px solid var(--line);background:var(--surface);transition:background .2s,color .2s,border-color .2s}
.sbr-arch__switcher a:hover{background:var(--paper);color:var(--ink);border-color:var(--accent)}
.sbr-arch__switcher a.is-active{background:var(--ink);color:var(--accent);border-color:var(--ink);font-weight:600}
.sbr-arch__switcher-hint{font-size:11px;color:var(--fg-mute);opacity:.7;margin-inline-start:auto}
@media(max-width:560px){.sbr-arch__switcher-hint{margin-inline-start:0;width:100%}}

/* Breadcrumbs — RankMath-rendered, kit-styled. Auto on every non-front page.
   On full-bleed hero pages, sits as a hairline band right above the hero. */
.sbr-crumbs{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:2}
.sbr-crumbs__in{max-width:1240px;margin:0 auto;padding:10px 48px;font-size:13.5px;color:var(--fg-mute);line-height:1.4}
.sbr-crumbs__in p,.sbr-crumbs__in nav{margin:0}
.sbr-crumbs a{color:var(--fg-mute);text-decoration:none;transition:color .2s}
.sbr-crumbs a:hover{color:var(--accent-strong)}
.sbr-crumbs .separator{color:var(--accent);margin:0 6px;opacity:.7}
.sbr-crumbs .last,.sbr-crumbs [aria-current]{color:var(--ink);font-weight:600}
@media(max-width:680px){.sbr-crumbs__in{padding:9px 22px;font-size:12.5px}}

/* =====================================================================
   PROSE · shared rich-text styling — `.sbr-prose` only.
   ---------------------------------------------------------------------
   Originally I tried targeting both `.entry-content` AND `.sbr-prose` for
   typography (h2/p/ul/blockquote/etc.) since "typography is safe on block
   pages". WRONG: dark-background blocks (CTA banner, process-steps,
   stats counter) rely on their own light text color, but
   `.entry-content p {color: var(--fg-soft)}` (medium gray) wins specificity
   over the block's inheritance and turns text invisible on dark surfaces.

   Now: ALL prose styling — both layout AND typography — is scoped to
   `.sbr-prose` only. Long-form templates opt in by adding the class.
   Block-based pages (home/about/contact) keep their own block typography.
   ===================================================================== */

/* Default leading & color for the prose container. Per-layout rules can
   override specific elements but should not redefine the whole system. */
.sbr-prose{color:var(--ink);font-size:17px;line-height:1.85}

/* --- Headings (H1 belongs to the page chrome, not prose) --- */
.sbr-prose h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin-block:40px 14px}
.sbr-prose h3{font-size:clamp(19px,2vw,22px);font-weight:700;line-height:1.3;color:var(--ink);margin-block:28px 10px}
.sbr-prose h4{font-size:17.5px;font-weight:700;color:var(--ink);margin-block:22px 8px}
.sbr-prose h2:first-child,
.sbr-prose h3:first-child{margin-top:0}

/* --- Paragraph + emphasis ---
   IMPORTANT: use margin-block-end / margin-bottom only — never the `margin`
   shorthand here. The shorthand would expand to `margin-left:0` etc., which
   beats the `margin-inline:auto` centering the prose column system applies
   to direct children. Same rule for all the per-element typography below. */
.sbr-prose p{margin-bottom:18px;color:var(--fg-soft)}
.sbr-prose p:last-child{margin-bottom:0}
.sbr-prose strong{color:var(--ink);font-weight:700}
.sbr-prose em{font-style:italic}
.sbr-prose small{font-size:.85em;color:var(--fg-mute)}

/* --- Lists. RTL: bullets/numbers sit on the visual RIGHT. Custom amber
   marker via ::marker for both ul + ol — recognizable kit accent. --- */
.sbr-prose ul,.sbr-prose ol{margin-bottom:20px;padding-inline-start:26px;color:var(--fg-soft)}
.sbr-prose li{margin-bottom:8px;line-height:1.7}
.sbr-prose li::marker{color:var(--accent-strong);font-weight:700}
.sbr-prose ol{padding-inline-start:30px}
.sbr-prose ol li{padding-inline-start:4px}
/* Nested lists tighter and dimmed one notch */
.sbr-prose ul ul,.sbr-prose ul ol,.sbr-prose ol ul,.sbr-prose ol ol{margin-block:8px}

/* --- Inline links inside body copy (NOT buttons / nav). Amber kit accent.
   Scoped to text-bearing containers so CTAs in the same prose tree keep
   their own styling. Editors writing in Gutenberg produce link tags with
   no class — the :where() keeps specificity at (0,1,0) so any explicit
   class on a link still wins. --- */
:where(.sbr-prose) :is(p,li,td,th,blockquote,figcaption) a{
	color:var(--accent-strong);
	text-decoration:underline;
	text-decoration-color:rgba(224,162,60,.40);
	text-decoration-thickness:1.5px;
	text-underline-offset:3px;
	transition:color .15s,text-decoration-color .15s}
:where(.sbr-prose) :is(p,li,td,th,blockquote,figcaption) a:hover{
	color:var(--ink);text-decoration-color:var(--accent)}

/* --- Blockquote — amber border-inline-start (visual right in RTL) + italic --- */
.sbr-prose blockquote{
	margin-block:24px;padding:14px 22px;
	border-inline-start:4px solid var(--accent);
	background:rgba(224,162,60,.06);
	border-radius:0 10px 10px 0;
	color:var(--ink);font-size:18px;line-height:1.7;font-style:italic}
.sbr-prose blockquote p:last-child{margin-bottom:0}
.sbr-prose blockquote cite{
	display:block;margin-top:8px;font-size:14px;font-style:normal;color:var(--fg-mute)}

/* --- HR — subtle hairline, breathing room --- */
.sbr-prose hr{
	border:0;height:1px;background:var(--line);margin-block:36px}

/* --- Inline code & pre — minimal, readable. Kit isn't dev-doc-heavy but
   when editors paste code (or RankMath emits a snippet) it shouldn't break. --- */
.sbr-prose code{
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
	background:rgba(29,26,22,.06);padding:.15em .4em;border-radius:5px;color:var(--ink)}
.sbr-prose pre{
	background:#1d1a16;color:#f4f1ea;padding:18px 22px;border-radius:12px;
	overflow-x:auto;font-size:14px;line-height:1.6;margin-bottom:24px}
.sbr-prose pre code{background:0;padding:0;color:inherit}

/* --- Figures & images. Default: rounded + soft shadow.
   Width is governed by the prose-column system below — figure/img inherit
   max-width from their grid placement. --- */
.sbr-prose figure{margin-block:24px}
.sbr-prose img{
	max-width:100%;height:auto;border-radius:12px;display:block;
	box-shadow:0 12px 28px -16px rgba(29,26,22,.25)}
.sbr-prose figcaption{
	margin-top:8px;font-size:14px;color:var(--fg-mute);text-align:center;line-height:1.5}

/* =====================================================================
   PROSE COLUMN SYSTEM — three width tiers via WP alignment classes
   ---------------------------------------------------------------------
   The pattern Medium / Substack / NYT / WP Twenty-Twenty-Four use:
   text holds a narrow readable column (~720px = ~65 Hebrew chars per line),
   while media/tables/cover-images opt INTO wider tiers via the alignment
   buttons in the Gutenberg editor (אזורי יישור).

   Editor experience:
     - Plain block (no alignment)              → 720px (default reading)
     - "Wide width" button (alignwide)         → 1080px (bold figure)
     - "Full width" button (alignfull)         → fills the parent container
     - "Align left/right" (alignleft/right)    → float inline-start/end
                                                  with text wrapping

   Customizable via CSS variables on any container:
     --prose-w        narrow text column max (default 720px)
     --prose-wide-w   alignwide max          (default 1080px)
   ===================================================================== */

/* IMPORTANT scoping decision: the layout / alignment rules below target
   `.sbr-prose` ONLY (not `.entry-content`). The `.entry-content` class is
   added by WordPress on every page/post wrapper — including block-based
   pages like Home/About/Contact that use full-bleed sbr/* blocks. Clamping
   their direct children to 720px would shrink every hero/section to a
   narrow column. So we use an OPT-IN class — long-form templates (service
   singles, blog single, project body, team bio, service-area pages) add
   `sbr-prose` to their content wrapper; block-based templates don't.

   Per-element typography (h2/p/ul/table/blockquote/etc., further up) still
   targets both `.entry-content` and `.sbr-prose` — it's safe on block pages
   because block elements have their own class selectors that win specificity. */
.sbr-prose{
	--prose-w:720px;
	--prose-wide-w:1080px}

/* Default placement: every direct child of prose caps at --prose-w and
   centers inside the available container. */
.sbr-prose > *{max-width:var(--prose-w);margin-inline:auto}

/* WIDE — figure/table/etc. breaks out of the reading column. */
.sbr-prose > .alignwide{max-width:var(--prose-wide-w)}

/* FULL — fills the prose container (not the viewport — for true 100vw bands
   use a <section> outside the prose container with the
   `width:100vw; margin-inline:calc(50% - 50vw)` escape). */
.sbr-prose > .alignfull{max-width:none}
.sbr-prose > .alignfull img{width:100%;border-radius:0;box-shadow:none}

/* CENTER — explicit centering (effectively the default). */
.sbr-prose > .aligncenter{margin-inline:auto}

/* LEFT / RIGHT — logical floats. RTL: alignleft hugs visual RIGHT (start);
   alignright hugs visual LEFT (end). Matches WP core RTL convention. */
.sbr-prose > .alignleft{
	float:inline-start;
	margin-block:6px 14px;margin-inline-end:24px;margin-inline-start:0;
	max-width:min(45%,420px)}
.sbr-prose > .alignright{
	float:inline-end;
	margin-block:6px 14px;margin-inline-start:24px;margin-inline-end:0;
	max-width:min(45%,420px)}

/* Mobile: floats stack full-width. */
@media(max-width:680px){
	.sbr-prose > .alignleft,
	.sbr-prose > .alignright{
		float:none;margin:18px auto;max-width:100%}
}

/* === Gutenberg Media+Text — image+text side-by-side, RTL-safe === */
.sbr-prose > .wp-block-media-text{
	display:grid;
	grid-template-columns:50% 50%;
	gap:32px;align-items:center;
	max-width:var(--prose-wide-w);
	margin:36px auto}
.sbr-prose > .wp-block-media-text .wp-block-media-text__media{margin:0}
.sbr-prose > .wp-block-media-text .wp-block-media-text__media img{
	width:100%;height:auto;border-radius:12px;
	box-shadow:0 12px 28px -16px rgba(29,26,22,.25)}
.sbr-prose > .wp-block-media-text .wp-block-media-text__content > *{margin-inline:0;max-width:none}
@media(max-width:680px){
	.sbr-prose > .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:1fr;gap:20px}
}

/* =====================================================================
   ADDITIONAL GUTENBERG BLOCKS — kit-styled defaults so editors who drop
   in any common block get a result that looks on-brand without thinking.
   ===================================================================== */

/* Gallery: responsive grid, default 3-up, kit border-radius + shadow */
.sbr-prose > .wp-block-gallery{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:14px;max-width:var(--prose-wide-w);margin-block:30px}
.sbr-prose > .wp-block-gallery figure{margin:0}
.sbr-prose > .wp-block-gallery img{
	width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
	border-radius:10px}
/* Gallery `columns-N` modifier — Gutenberg adds this class for explicit column counts */
.sbr-prose > .wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}
.sbr-prose > .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}
.sbr-prose > .wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:680px){
	.sbr-prose > .wp-block-gallery,
	.sbr-prose > .wp-block-gallery.columns-3,
	.sbr-prose > .wp-block-gallery.columns-4{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* Columns block: editor can split content into N equal columns */
.sbr-prose > .wp-block-columns{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:32px;max-width:var(--prose-wide-w);margin-block:30px;align-items:start}
.sbr-prose > .wp-block-columns .wp-block-column{min-width:0}
.sbr-prose > .wp-block-columns .wp-block-column > *{max-width:none}
@media(max-width:680px){
	.sbr-prose > .wp-block-columns{grid-template-columns:1fr;gap:24px}
}

/* Cover block: a full-bleed band with overlay text. Behaves like alignwide by
   default (kit prefers wide cover bands over forced 100vw). Editor can opt
   into alignfull for true edge-to-edge. */
.sbr-prose > .wp-block-cover{
	max-width:var(--prose-wide-w);
	min-height:340px;border-radius:14px;overflow:hidden;
	margin-block:30px;
	display:grid;place-items:center}
.sbr-prose > .wp-block-cover.alignfull{border-radius:0}
.sbr-prose > .wp-block-cover .wp-block-cover__inner-container{
	max-width:680px;text-align:center;color:#fff;padding:36px 24px}
.sbr-prose > .wp-block-cover h1,
.sbr-prose > .wp-block-cover h2,
.sbr-prose > .wp-block-cover h3,
.sbr-prose > .wp-block-cover p{color:inherit}

/* Pullquote — big bold quote that stands out from blockquote. Wider tier. */
.sbr-prose > .wp-block-pullquote{
	max-width:var(--prose-wide-w);
	margin-block:32px;padding:28px 24px;
	border-block:2px solid var(--accent);
	background:transparent;text-align:center}
.sbr-prose > .wp-block-pullquote p{
	font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.4;
	color:var(--ink);margin-bottom:10px;max-width:none}
.sbr-prose > .wp-block-pullquote cite{
	display:block;font-size:14px;color:var(--fg-mute);font-style:normal}

/* Buttons block: center the row, allow editor to use Gutenberg buttons +
   keep kit's CTA style untouched (.sbr-btn rules win because higher specificity). */
.sbr-prose > .wp-block-buttons{
	display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
	margin-block:24px}
.sbr-prose > .wp-block-buttons .wp-block-button__link{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--accent);color:var(--ink);
	padding:13px 24px;border-radius:10px;
	font-weight:700;font-size:15.5px;text-decoration:none;
	transition:background .2s,transform .2s}
.sbr-prose > .wp-block-buttons .wp-block-button__link:hover{
	background:var(--accent-strong);transform:translateY(-1px);color:#fff}

/* Embed block (YouTube / Vimeo / Twitter / etc.): responsive iframe.
   Default narrow; alignwide makes it bigger; alignfull edge-to-edge. */
.sbr-prose > .wp-block-embed{margin-block:30px}
.sbr-prose > .wp-block-embed .wp-block-embed__wrapper{
	position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
	border-radius:12px;background:rgba(0,0,0,.05)}
.sbr-prose > .wp-block-embed iframe{
	position:absolute;inset:0;width:100%;height:100%;border:0}

/* Audio/Video blocks: just align with the kit aesthetic */
.sbr-prose > .wp-block-audio audio,
.sbr-prose > .wp-block-video video{width:100%;display:block;border-radius:10px}

/* --- Tables. Common for kit pages: pricing comparison, feature matrix,
   service tiers. Mobile gets horizontal scroll inside a wrapper. The kit
   already ships a `.sbr-tw` wrapper helper in PHP — but raw <table> from
   the editor also renders well via these rules. --- */
.sbr-prose table{
	width:100%;border-collapse:collapse;margin-block:24px;
	font-size:15.5px;background:#fff;
	border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sbr-prose thead{background:var(--ink);color:#fff}
.sbr-prose th{
	padding:13px 16px;text-align:start;font-weight:700;font-size:14px;
	letter-spacing:-.005em;color:#fff;border-bottom:0}
.sbr-prose td{
	padding:13px 16px;border-top:1px solid var(--line);color:var(--ink);vertical-align:top}
/* Zebra rows for scannability */
.sbr-prose tbody tr:nth-child(even){background:rgba(29,26,22,.025)}
.sbr-prose tbody tr:hover{background:rgba(224,162,60,.05)}
/* =====================================================================
   MOBILE TABLES — card-stack by default (premium UX), horizontal-scroll
   as opt-out for data-heavy / no-thead tables.
   ---------------------------------------------------------------------
   Default behavior (tables WITH a thead):
     - thead is hidden
     - each tbody row becomes a card (bordered, padded, rounded)
     - each <td> renders as a "label  value" row inside the card, where
       the label comes from `data-label` (auto-injected by prose-tables.js
       from the matching <th>)
     - reads naturally on phone screens; no horizontal scroll needed

   Editor opt-out:
     - add CSS class `is-scroll` to the table (Block Editor → Advanced →
       Additional CSS Class)
     - falls back to horizontal scroll mode (kit's old behavior)

   Tables WITHOUT a thead automatically fall to horizontal scroll too —
   we have no label source for cards.

   The old `table{min-width:540px}` rule was REMOVED — it caused intrinsic
   min-content sizing to propagate up through figure → prose → article on
   mobile, inflating the whole layout to 540px wide on 390px viewports
   (Shai's overflow bug 2026-06-03). The card-stack uses display:block, no
   min-width, so the table no longer constrains its ancestors. */
@media(max-width:680px){

	/* === CARD STACK (default for tables with thead) === */
	
	.sbr-prose table:has(thead):not(.is-scroll){
		display:block;min-width:0;border:0;background:transparent;
		border-radius:0;box-shadow:none;overflow:visible}
	
	.sbr-prose table:has(thead):not(.is-scroll) thead{display:none}
	
	.sbr-prose table:has(thead):not(.is-scroll) tbody{display:block}
	
	.sbr-prose table:has(thead):not(.is-scroll) tr{
		display:block;background:#fff;border:1px solid var(--line);
		border-radius:12px;padding:14px 16px;margin-bottom:12px}
	/* keep zebra band — slightly more subtle to suit the card paper */
	
	.sbr-prose table:has(thead):not(.is-scroll) tbody tr:nth-child(even){background:rgba(29,26,22,.03)}
	
	.sbr-prose table:has(thead):not(.is-scroll) td{
		display:flex;justify-content:space-between;align-items:baseline;gap:14px;
		padding:9px 0;border-top:1px solid var(--line);border-bottom:0;
		font-size:15px;color:var(--ink)}
	
	.sbr-prose table:has(thead):not(.is-scroll) td:first-child{border-top:0;padding-top:2px}
	
	.sbr-prose table:has(thead):not(.is-scroll) td:last-child{padding-bottom:2px}
	/* Label (column header) — bold + dim. Comes from data-label, injected by JS. */
	
	.sbr-prose table:has(thead):not(.is-scroll) td::before{
		content:attr(data-label);
		font-weight:700;color:var(--fg-mute);font-size:13px;
		flex:0 0 auto;text-align:start}

	/* === HORIZONTAL SCROLL (opt-out + tables without thead) === */
	.sbr-prose > figure.wp-block-table,
	.sbr-prose > figure:has(table:not([class*="is-scroll"]):not(:has(thead))){
		overflow-x:auto;-webkit-overflow-scrolling:touch;
		max-width:100%;min-width:0}
	/* `min-width` on the table is what triggers the horizontal scroll — only
	   apply it to tables we WANT to scroll (no-thead OR opted-in). Without
	   `min-width`, the inner table just shrinks to fit and becomes
	   illegible — defeating the purpose. */
	
	.sbr-prose table.is-scroll,
	
	.sbr-prose table:not(:has(thead)){min-width:540px}
}

/* --- Highlighted callout — `.sbr-callout` wrapper for editors who want a
   visible "note" box inside body copy. Wrap any block content in a div
   with this class. Not required — but kit-supported. --- */
.sbr-prose .sbr-callout{
	background:rgba(224,162,60,.08);
	border:1px solid rgba(224,162,60,.30);
	border-inline-start:4px solid var(--accent);
	border-radius:12px;padding:18px 22px;margin-block:24px;color:var(--ink)}
.sbr-prose .sbr-callout p:last-child{margin-bottom:0}

/* Branded placeholder for property cards/heroes with no image (fills the media box). */
.sbr-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px;text-align:center;background:linear-gradient(155deg,#f7f3ec,#ece3d4)}
.sbr-ph__logo{line-height:0}
.sbr-ph__mark{width:clamp(38px,15%,58px);height:auto;display:block;opacity:.95}
.sbr-ph__name{font-weight:700;color:var(--ink);font-size:clamp(14px,2.2vw,19px);letter-spacing:.01em}
.sbr-ph__msg{color:var(--accent-strong);font-weight:600;font-size:clamp(11.5px,1.7vw,14px)}
.sbr-ph__sub{display:none;color:var(--fg-mute);font-size:12.5px;max-width:32ch;line-height:1.55}
.sbr-ph--lg{gap:12px;padding:30px}
.sbr-ph--lg .sbr-ph__mark{width:84px}
.sbr-ph--lg .sbr-ph__sub{display:block}

/* Buttons must inherit the site font (browsers default <button> to a system font). */
button{font-family:inherit}

/* Property placeholder: branded navy skyline backdrop (overrides the flat fill above). */
.sbr-ph{background:#16202e url(../brand/property-placeholder.webp) center/cover no-repeat;gap:9px}
.sbr-ph__name{color:#fff}
.sbr-ph__msg{color:var(--accent,#E8B45C)}
.sbr-ph__sub{color:rgba(255,255,255,.72)}

/* Sold/rented listing cards — kept for social proof, visually de-emphasized */
.sbr-pa__card.is-sold-card .sbr-pa__img{filter:grayscale(.55);opacity:.92}
.sbr-pa__card.is-sold-card .sbr-pa__price{color:var(--fg-mute)}

/* --- Desktop sticky "free valuation" side tab (C) — opens the wizard.
   Anchored to the LEFT edge, horizontal (wide) so the CTA reads at a glance. --- */
.sbr-sidetab{position:fixed;left:0;right:auto;top:calc(50% + 100px);transform:translateY(-50%);z-index:65;
	display:inline-flex;flex-direction:row;align-items:center;gap:9px;white-space:nowrap;
	background:var(--accent);color:var(--accent-ink,#1d1a16);
	padding:13px 20px;border-radius:0 14px 14px 0;
	text-decoration:none;font-weight:800;font-size:15px;
	box-shadow:0 16px 36px -14px rgba(14,37,64,.6);transition:background .2s,color .2s,padding-inline-end .2s}
.sbr-sidetab svg{width:20px;height:20px;flex:0 0 auto}
.sbr-sidetab span{letter-spacing:.01em}
.sbr-sidetab:hover,.sbr-sidetab:focus-visible{background:var(--accent-strong,#8a5824);color:#fff;padding-inline-end:26px}
@media(max-width:900px){.sbr-sidetab{display:none}}

/* --- Floating "quick contact" button + modal (kit feature) --- */
.sbr-cfab{position:fixed;left:24px;right:auto;bottom:24px;z-index:66;display:inline-flex;align-items:center;gap:9px;
	background:var(--brand-deep);color:#fff;border:0;border-radius:999px;padding:14px 22px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;
	box-shadow:0 16px 36px -12px rgba(14,37,64,.55);transition:transform .2s,box-shadow .2s,background .2s}
.sbr-cfab:hover,.sbr-cfab:focus-visible{transform:translateY(-3px);box-shadow:0 22px 48px -12px rgba(14,37,64,.65);background:var(--ink)}
.sbr-cfab svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.sbr-cfab-modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px}
.sbr-cfab-modal.is-open{display:flex}
.sbr-cfab-modal__backdrop{position:absolute;inset:0;background:rgba(8,15,26,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sbr-cfab-modal__card{position:relative;z-index:1;width:min(440px,100%);max-height:92vh;overflow:auto;background:var(--surface);border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:0 44px 100px -30px rgba(0,0,0,.6);animation:sbr-cfab-in .32s cubic-bezier(.2,.7,.2,1)}
@keyframes sbr-cfab-in{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.sbr-cfab-modal__x{position:absolute;inset-inline-end:16px;top:16px;width:38px;height:38px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .15s}
.sbr-cfab-modal__x:hover{background:var(--line)}
.sbr-cfab-modal__x svg{width:18px;height:18px}
.sbr-cfab-modal__head{text-align:center;margin:4px 0 20px}
.sbr-cfab-modal__title{font-size:clamp(19px,2.4vw,23px);font-weight:800;color:var(--ink);margin:0 0 12px;line-height:1.32}
.sbr-cfab-modal__phone{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:19px;color:var(--accent-strong,#8a5824);text-decoration:none}
.sbr-cfab-modal__phone svg{width:18px;height:18px}
/* the embedded lead form drops its own card chrome — the modal IS the card */
.sbr-cfab-modal__card .sbr-lf{max-width:none;margin:0}
.sbr-cfab-modal__card .sbr-lf__form{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.sbr-cfab-modal__card .sbr-lf__head{display:none}
@media(max-width:780px){.sbr-cfab{display:none}} /* phones use the .sbr-mcta bar */

/* "Wall of success" band (About + Testimonials) — office wall of SOLD photos +
   thank-you letters. Kit feature; renders via sbr_render_success_wall(). */
.sbr-swall{background:var(--paper);padding:clamp(46px,7vw,88px) clamp(18px,4vw,40px)}
.sbr-swall-in{max-width:1180px;margin:0 auto}
.sbr-swall__head{text-align:center}
.sbr-swall__head .sbr-kicker{justify-content:center}
.sbr-swall__h2{font-size:clamp(24px,3.4vw,38px);color:var(--ink);margin:10px 0 0;font-weight:800}
.sbr-swall__sub{max-width:60ch;margin:14px auto 0;color:var(--fg-soft);font-size:clamp(15px,1.8vw,17px);line-height:1.75}
.sbr-swall__fig{margin:clamp(24px,3.5vw,40px) 0 0;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(16,32,46,.5)}
.sbr-swall__img{display:block;width:100%;height:auto}