/* ===========================================================================
   benorlaw.co.il — the design system. Single source of truth, loaded site-wide
   by the benor-canvas mu-plugin and scoped under #lp-benor (WP-safe).

   Reorganised 2026-09-20 (client-delivery polish). Until then the file had
   grown by appending a dated block per session, so a component's final look
   was spread over five places and several rules were overriding rules that
   were overriding the base. Every component is now declared ONCE, in its own
   section, with its responsive behaviour beside it. Nothing below restates
   anything above; if a value needs to change there is exactly one place to
   change it.

   Reading order
     1  tokens            8  practice cards      15  map / directions
     2  base + reset      9  practice index      16  faq
     3  type roles       10  stats               17  articles
     4  layout           11  testimonials        18  prose (long form)
     5  buttons          12  about + principles  19  footer
     6  header / nav     13  attorney + process  20  motion
     7  heroes + ticker  14  contact + form      21  overlay layer
                                                 22  accessibility modes
                                                 23  WP / theme neutralisation

   Breakpoints (the only four in the file)
     600px   phone
     760px   the cookie card stops fitting beside its buttons
     980px   tablet — the nav collapses, two-column layouts fold
     1000px  the cookie notice reaches the floating launchers
   RTL: the site is dir=rtl only. Logical properties everywhere except the
   three places marked RTL, where a physical direction is the point.
   =========================================================================== */

/* ============================================================================
   1 — TOKENS
   ============================================================================ */
#lp-benor{
  /* ---- primary — slate navy ---- */
  --color-primary-bg:      #313D52;
  --color-primary-bg-soft: #3B4860;
  --color-primary-deep:    #272F3F;
  --color-primary-raise:   #46536E;

  /* ---- surface — warm greige ground, one white zone, one quiet band ---- */
  --color-surface:     #F6F4EF;
  --color-surface-alt: #FFFFFF;
  --color-surface-dim: #E6E2DB;
  --color-surface-warm:#FBFAF7; /* table stripe, quiet rows */

  /* ---- accent — mustard gold. Gate 2: the raw gold never carries text on
         light; -deep is the text tier on light, -lift the tier on navy ---- */
  --color-accent-gold:       #D2A348;
  --color-accent-gold-hover: #B98D33;
  --color-accent-gold-press: #9E7627;
  --color-accent-gold-soft:  rgba(210,163,72,.16);
  --color-accent-gold-deep:  #7A5A15;
  --color-accent-gold-lift:  #DDB56A;

  /* ---- text ---- */
  --color-text-main:      #1E242E;
  --color-text-muted:     #55534E;
  --color-text-on-primary:#FFFFFF;
  --color-text-on-primary-muted: #AEB9CB;
  --color-text-on-accent: #272F3F;

  /* ---- borders ---- */
  --color-border-subtle: #D3CEC5;
  --color-border-strong: #313D52;
  --color-border-on-dark: rgba(255,255,255,.14);
  --color-border-field:  #948F86;   /* 3.2:1 on white — WCAG 1.4.11 */
  --color-gold-rule: rgba(210,163,72,.55);

  /* ---- system states ---- */
  --color-success: #2E7D5B;
  --color-error:   #B3261E;
  --color-warning: #C77E2D;

  /* ---- type ---- */
  --font-family-base:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Heebo',var(--font-family-base);
  --text-h1:      clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem);
  --text-h2:      clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  --text-h3:      clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem);
  --text-body-lg: clamp(1.1rem, 1rem + 0.4vw, 1.28rem);
  --text-body:    1rem;
  --text-body-small: 0.9rem;
  --text-button:  0.95rem;
  --site-lh-display:1.02; --lh-heading:1.1; --lh-body:1.7;
  --track-heading:-0.015em;
  --track-button:0.02em;
  --track-eyebrow:0.06em;      /* the one tracking for every Hebrew label */
  /* ---- type precision, 2026-09-21: the small tier and the leading system ----
     Assistant's Hebrew letters stand .555em tall, so 13.9px reads like ~11px Latin. Secondary text moves to 15px,
     tracked labels to 14px, and every role takes its leading from one of these values, by size and line count. */
  --fs-label:.875rem;          /* 14 - tracked bold labels: eyebrows, tags, section marks */
  --fs-meta:.9375rem;          /* 15 - secondary text: meta, subs, notes, footer, nav, form labels */
  --lh-label:1.3;              /* one-line labels and UI text */
  --lh-small:1.5;              /* small text that wraps */
  --lh-snug:1.5;               /* short descriptors under a title, 1-3 lines */
  --lh-text:1.65;              /* running paragraphs at body size */
  --lh-lead:1.6;               /* leads at step 1 */
  --lh-sub:1.2;                /* mid headings (20-34px) that wrap */
  --lh-quote:1.4;              /* display-face quotes and questions */

  /* ---- spacing / layout ---- */
  --space-xxs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  --layout-max-width:1240px; --maxw-narrow:760px;
  --layout-section-padding: clamp(64px, 2.5rem + 3.9vw, 96px); /* one rhythm: 96 desktop / 64 phone */
  --head-gap: 48px;             /* section head -> its content, everywhere */
  --gap-eyebrow: .8rem;         /* eyebrow -> heading */
  --gap-lead: 1rem;             /* heading -> lead */
  --gap-tile: 16px; --gap-card: 24px; /* the only two grid gaps */
  --card-pad: clamp(1.5rem, .5rem + 2.6vw, 2.75rem);
  --site-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --tap: 24px;                  /* WCAG 2.5.8 minimum target */

  /* ---- radii / depth ---- */
  --r-sm:3px; --r:4px; --r-card:4px;
  --shadow-2:0 2px 4px rgba(39,47,63,.06), 0 10px 26px -8px rgba(39,47,63,.16);
  --shadow-3:0 4px 10px rgba(39,47,63,.07), 0 24px 56px -14px rgba(39,47,63,.24);

  /* ---- motion ---- */
  --ease-reveal:cubic-bezier(0.22,1,0.36,1);
  --ease-hover:cubic-bezier(0.65,0,0.35,1);
  --dist-reveal:16px;

  font-family:var(--font-family-base); color:var(--color-text-main);
  background:var(--color-surface); line-height:var(--x-root-line-height);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* RHYTHM TEST — off-scale values, given named project tokens (value unchanged) */
#lp-benor{
  --x-root-line-height:1.6;
  --x-nav-grid-gap:1.25rem;
  --x-brand-name-line-height:1.15;
  --x-brand-sub-font-size:.6875rem;
  --x-page-hero-portrait-padding-block-2:clamp(3.2rem,2rem + 3vw,4.5rem);
  --x-crumbs-margin-bottom:1.4rem;
  --x-crumbs-font-size:.82rem;
  --x-crumbs-gap:.55rem;
  --x-page-hero-h1-font-size:clamp(2.6rem,1.6rem + 3.6vw,4.8rem);
  --x-page-hero-h1-margin-bottom:1.4rem;
  --x-principles-row-gap:clamp(1.5rem,3vw,3rem);
  --x-principle-padding-top:1.5rem;
  --x-h3-line-height:1.25;
  --x-att-gap:clamp(2.5rem,6vw,5rem);
  --x-att-quote-font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem);
  --x-att-quote-line-height:1.3;
  --x-att-quote-margin-1:1.6rem;
  --x-att-quote-margin-3:1.5rem;
  --x-att-cred-margin-1:1.5rem;
  --x-att-cred-margin-3:1.9rem;
  --x-btn-padding-2:1.9rem;
  --x-team-list-gap-2:clamp(2rem,5vw,5rem);
  --x-team-row-padding-1:1.35rem;
  --x-team-name-font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);
  --x-team-name-line-height:1.2;
  --x-step-n-font-size:clamp(2rem,1.6rem + 1.2vw,2.8rem);
  --x-step-n-line-height:1;
  --x-step-h3-font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);
  --x-midcta-panel-padding-block:clamp(6rem,9vw + 2rem,10rem);
  --x-midcta-h2-font-size:clamp(2.1rem,1.5rem + 2.8vw,4rem);
  --x-midcta-h2-margin-3:1.2rem;
  --x-midcta-lead-margin-3:2.6rem;
  --x-footer-padding-block-1:clamp(3.5rem,5vw,5rem);
  --x-footer-padding-block-2:2rem;
  --x-footer-bottom-margin-top:2.6rem;
  --x-footer-bottom-padding-top:1.5rem;
  --x-w-title-line-height:1.3;
  --x-w-sub-line-height:1.4;
  --x-w-row-t-b-line-height:1.35;
  --x-w-row-t-span-line-height:1.4;
  --x-dock-fab-padding-inline-1:18px;
  --x-dock-fab-padding-inline-2:20px;
  --x-a11y-step-line-height:1;
  --x-a11y-opt-line-height:1.35;
  --x-w-live-margin:-1px;
  --x-page-hero-padding-block-1:clamp(7.5rem,64px + 9vh,11rem);
  --x-page-hero-padding-block-2:clamp(3.2rem,2rem + 3vw,5rem);
  --x-prose-line-height:1.75;
  --x-prose-intro-line-height:1.7;
  --x-prose-h2-margin-top:2.2em;
  --x-prose-h2-padding-top:1.1em;
  --x-prose-margin-top:1.3em;
  --x-prose-ul-li-padding-inline-start:1.6rem;
  --x-prose-callout-margin-block:1.9em;
  --x-prose-callout-padding-1:1.4rem;
  --x-prose-callout-padding-2:1.6rem;
  --x-prose-callout-p-line-height:1.65;
  --x-prose-note-margin-top:2.5em;
  --x-prose-note-padding-top:1.2rem;
  --x-area-t-line-height:1.25;
  --x-area-t-font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);
  --x-area-panel-area-body-padding-block-2:2.6rem;
  --x-checks-li-padding-inline-start:1.5rem;
  --x-area-panel-area-body-related-margin-top:1.6rem;
  --x-related-gap-2:1.6rem;
  --x-featured-lead-margin-bottom:1.7rem;
  --x-feat-meta-margin-bottom:1.7rem;
  --x-feat-panel-padding-inline-1:1.8rem;
  --x-feat-panel-q-font-size:clamp(1.15rem,1rem + 0.8vw,1.5rem);
  --x-feat-panel-who-margin-top:1.4rem;
  --x-chips-margin-bottom:clamp(2rem,3.5vw,3rem);
  --x-post-grid-gap-1:clamp(2.4rem,3.5vw,3.2rem);
  --x-post-grid-gap-2:clamp(1.5rem,3vw,3rem);
  --x-post-card-padding-1:1.5rem;
  --x-post-t-line-height:1.3;
  --x-post-foot-margin-top:1.2rem;
  --x-faq-q-padding-1:1.25rem;
  --x-faq-a-p-padding-bottom:1.3rem;
  --x-hero-quick-margin-top:1.8rem;
  --x-contact-links-margin-top:1.8rem;
  --x-hours-margin-top:2rem;
  --x-contact-card-padding:clamp(1.4rem,2.6vw,2.2rem);
  --x-contact-status-margin-3:1.4rem;
  --x-fluentform-ff-el-input-label-label-line-height:1.3;
  --x-fluentform-ff-el-form-control-padding-2:1rem;
  --x-fluentform-select-ff-el-form-control-padding-inline-end:2.75rem;
  --x-fluentform-benor-f-consent-margin-1:.1rem;
  --x-fluentform-ff-tc-checkbox-input-margin-1:.1rem;
  --x-fluentform-ff-btn-submit-line-height:1;
  --x-fluentform-ff-btn-submit-padding-2:1.9rem;
  --x-dir-lines-margin-top:1.6rem;
  --x-dir-cta-margin-top:2rem;
  --x-hero-text-padding-block-1:clamp(6.5rem,12vh,8.5rem);
  --x-hero-text-padding-block-2:clamp(3.2rem,6vh,4.5rem);
  --x-hero-eyebrow-margin-bottom:1.4rem;
  --x-hero-title-font-size:clamp(2.9rem,1.5rem + 4.4vw,5.2rem);
  --x-hero-title-margin-bottom:1.4rem;
  --x-hero-sub-line-height:1.6;
  --x-hero-cta-margin-1:2rem;
  --x-hero-cta-margin-3:1.9rem;
  --x-hero-btn-padding-2:2.1rem;
  --x-ticker-padding-block:1.35rem;
  --x-ticker-item-font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  --x-ticker-item-line-height:1;
  --x-ticker-item-padding-inline-end:2.2rem;
  --x-ticker-item-gap:2.2rem;
  --x-areas-grid-gap-2:clamp(2rem,5vw,5rem);
  --x-area-link-line-height:1.2;
  --x-area-link-font-size:clamp(1.2rem,1rem + .9vw,1.65rem);
  --x-stat-n-font-size:clamp(2.8rem,2rem + 3.2vw,4.6rem);
  --x-stat-n-line-height:1;
  --x-rev-top-gap:clamp(2rem,5vw,4rem);
  --x-rev-rating-margin-top:1.2rem;
  --x-rev-rating-score-font-size:2.1rem;
  --x-ti-shell-padding-1:1.6rem;
  --x-rev-quote-font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  --x-rev-quote-line-height:1.4;
  --x-rev-quote-margin-bottom:1.6rem;
  --x-rev-nav-margin-top:1.5rem;
  --x-rev-nav-margin-inline-start:-7px;
  --x-rev-nav-gap:.1rem;
  --x-grid-about-gap:clamp(2rem,5vw,4.5rem);
  --x-about-img-margin-top:2.2rem;
  --x-about-item-padding-block:1.75rem;
  --x-about-item-padding-inline-start:1.6rem;
  --x-lead-btn-margin-top:1.3rem;
  --x-prose-ol-li-padding-inline-start:2.2rem;
  --x-prose-inline-cta-margin-block:2.2em;
  --x-prose-inline-cta-padding-2:1.8rem;
  --x-prose-inline-cta-gap:1.2rem;
  --x-prose-blockquote-font-size:clamp(1.2rem,1.1rem + 0.5vw,1.45rem);
  --x-prose-blockquote-line-height:1.45;
  --x-prose-blockquote-margin-block:1.9em;
  --x-prose-blockquote-padding-inline-start:1.4rem;
  --x-section-tight-padding-block:clamp(3rem,4vw,4.5rem);
  --x-author-box-padding-1:2rem;
  --x-author-box-gap:1.6rem;
  --x-author-box-h2-font-size:1.35rem;
  --x-prose-table-wrap-margin-block:1.9em;
  --x-rel-head-margin-bottom:clamp(1.8rem,3vw,2.6rem);
  --x-rel-grid-gap:clamp(2rem,3vw,3rem);
  --x-rel-grid-post-t-font-size:1.15rem;
  --x-rel-grid-post-more-margin-top:1.3rem;
  --x-prose-h3-margin-top:1.8em;
  --x-page-hero-padding-block-1-2:6.5rem;
  --x-page-hero-padding-block-2-2:2.6rem;
  --x-page-hero-portrait-ph-text-padding-top:min(46svh,400px);
  --x-page-hero-room-padding-top:64px;
  --x-hero-text-padding-block-1-2:min(50svh,440px);
  --x-hero-text-padding-block-2-2:2.4rem;
  --x-hero-cta-margin-3-2:1.4rem;
}

/* ============================================================================
   2 — BASE + RESET
   ============================================================================ */
body.benor-canvas{margin:0;padding:0;background:var(--color-surface)}
#lp-benor *,#lp-benor *::before,#lp-benor *::after{box-sizing:border-box}
#lp-benor h1,#lp-benor h2,#lp-benor h3,#lp-benor h4,#lp-benor p,#lp-benor ul,#lp-benor ol,
#lp-benor figure,#lp-benor blockquote,#lp-benor table{margin:0}
#lp-benor ul,#lp-benor ol{list-style:none;padding:0}
#lp-benor a{color:inherit;text-decoration:none}
#lp-benor img,#lp-benor iframe{max-width:100%;display:block}
#lp-benor img{height:auto}
#lp-benor button{font-family:inherit;cursor:pointer}
#lp-benor :focus-visible{outline:2px solid var(--color-accent-gold);outline-offset:3px;border-radius:var(--r-sm)}
#lp-benor ::selection{background:var(--color-primary-bg);color:#fff}
#lp-benor [id]{scroll-margin-top:84px}
@media (max-width:600px){#lp-benor [id]{scroll-margin-top:72px}}

/* the skip link is outside #lp-benor's stacking context on purpose */
.benor-skip{position:fixed;top:.6rem;inset-inline-start:.6rem;z-index:10000;padding:var(--s-3) var(--s-4);
  background:#313D52;color:#fff;font:700 .95rem/1 Heebo,sans-serif;border-radius:4px;
  transform:translateY(-200%);transition:transform .15s}
.benor-skip:focus{transform:none;outline:2px solid #C9A45C;outline-offset:2px}
/* header.php renders the link inside #lp-benor, where `#lp-benor a{color:inherit}` outranks .benor-skip and turned
   the focused link's text navy on navy (1.43:1); the white it was written with, restated at the right weight */
#lp-benor a.benor-skip{color:#fff}

/* ============================================================================
   3 — TYPE ROLES
   No serif anywhere (owner, 2026-09-15): Heebo carries display, Assistant body.
   ============================================================================ */
#lp-benor h1,#lp-benor h2{font-family:var(--font-display);font-weight:800;line-height:var(--lh-heading);
  letter-spacing:var(--track-heading);color:var(--color-primary-bg);text-wrap:balance}
#lp-benor h3,#lp-benor h4{font-family:var(--font-display);font-weight:700;line-height:var(--x-h3-line-height);
  letter-spacing:-.005em;color:var(--color-primary-bg);text-wrap:balance}
#lp-benor p{text-wrap:pretty}
#lp-benor .h2{font-size:var(--step-5);font-weight:800}
#lp-benor .lead{font-size:var(--step-1);color:var(--color-text-muted);line-height:var(--lh-lead)}
#lp-benor .small{font-size:var(--fs-meta);color:var(--color-text-muted);line-height:var(--lh-small)}
#lp-benor .eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
/* the eyebrow is a quiet label; four home sections carry their own headline instead */
#lp-benor .section:has(.svc-grid) .eyebrow,#lp-benor .stats .eyebrow,#lp-benor #reviews .eyebrow,
#lp-benor .section:has(.steps) .eyebrow,#lp-benor .about-right>.eyebrow{display:none}
#lp-benor .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
#lp-benor .tel-strong{font-weight:700;color:var(--color-primary-bg)}

/* ---- the one vertical rhythm for a heading group, everywhere ----
   eyebrow -> heading -> lead. It used to be an inline style repeated 28 times
   across the page files, with .8rem and 1rem used interchangeably. */
#lp-benor .eyebrow + h2,#lp-benor .eyebrow + .h2{margin-top:var(--s-3)}
#lp-benor h2 + .lead,#lp-benor .h2 + .lead{margin-top:var(--s-4)}
#lp-benor .lead + .btn{margin-top:var(--x-lead-btn-margin-top)}
/* the page-hero h1 carries its own bottom margin; it is not part of this rhythm */

/* ============================================================================
   4 — LAYOUT
   ============================================================================ */
#lp-benor .wrap{max-width:var(--layout-max-width);margin-inline:auto;padding-inline:var(--site-gutter)}
#lp-benor .wrap--narrow{max-width:calc(var(--maxw-narrow) + 2*var(--site-gutter))}
#lp-benor .section{padding-block:var(--layout-section-padding);position:relative}
#lp-benor .section--dim{background:var(--color-surface-dim);border-block:1px solid rgba(49,61,82,.08)}
#lp-benor .section--white{background:var(--color-surface-alt)}
#lp-benor .section--flush-top{padding-top:0}
#lp-benor .section--tight{padding-block:var(--x-section-tight-padding-block)}
#lp-benor .section-head{max-width:var(--maxw-narrow);margin-bottom:var(--head-gap)}

/* ============================================================================
   5 — BUTTONS AND LINKS
   ============================================================================ */
#lp-benor .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);white-space:nowrap;
  font-size:var(--step-0);font-weight:700;letter-spacing:var(--track-button);
  padding:var(--s-4) var(--x-btn-padding-2);border-radius:var(--r);border:1px solid transparent;
  transition:background .3s var(--ease-hover),color .3s,border-color .3s}
#lp-benor .btn--primary{background:var(--color-accent-gold);color:var(--color-text-on-accent)}
#lp-benor .btn--primary:hover{background:var(--color-accent-gold-hover)}
#lp-benor .btn--primary:active{background:var(--color-accent-gold-press)}
#lp-benor .btn--primary[disabled]{background:#E3D6B4;color:#8B8B8B;box-shadow:none;cursor:not-allowed}
#lp-benor .btn--secondary{background:transparent;color:var(--color-primary-bg);border-color:var(--color-accent-gold)}
#lp-benor .btn--secondary:hover{border-color:var(--color-border-strong);background:rgba(10,28,51,.04)}
#lp-benor .arw{width:1em;height:1em;flex:0 0 auto}
#lp-benor .btn--arrow .arw{transition:transform .2s var(--ease-hover)}
#lp-benor .btn--arrow:hover .arw{transform:translateX(-3px)} /* RTL: forward is -X */
#lp-benor .link{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--color-primary-bg);font-weight:600;
  border-bottom:1px solid transparent;transition:border-color .2s}
#lp-benor .link:hover{border-bottom-color:currentColor}
#lp-benor .link .arw{color:var(--color-accent-gold-deep)}

/* ============================================================================
   6 — HEADER / NAV
   The bar floats transparent over the hero and turns to glass on scroll. On the
   practice-areas hub the hero is light, so the bar starts solid (.nav--light).
   ============================================================================ */
#lp-benor .nav{position:fixed;inset-inline:0;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;color:#fff;backdrop-filter:blur(10px);
  transition:background .35s var(--ease-hover),border-color .35s,box-shadow .35s}
#lp-benor .nav.is-scrolled{box-shadow:0 4px 18px -6px rgba(39,47,63,.14)}
#lp-benor .nav.is-scrolled,#lp-benor .nav.menu-open{background:rgba(246,244,239,.94);
  border-bottom-color:var(--color-border-subtle);color:var(--color-text-main)}
/* header order (owner fix 2026-07-05): logo = RTL start · menu centre · CTA end */
#lp-benor .nav-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--x-nav-grid-gap);min-height:64px}
#lp-benor .brand{display:flex;align-items:center;gap:var(--s-3);justify-self:start}
#lp-benor .brand-logo{height:44px;width:auto;display:block}
#lp-benor .brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);line-height:var(--x-brand-name-line-height);
  color:var(--color-primary-bg);letter-spacing:.01em}
#lp-benor .brand-sub{font-size:var(--x-brand-sub-font-size);font-weight:600;letter-spacing:.12em;line-height:var(--lh-label);color:var(--color-text-muted)}
#lp-benor .nav-menu{display:flex;align-items:center;gap:var(--s-6);justify-self:center}
#lp-benor .nav-link,#lp-benor .dropdown-toggle{position:relative;display:inline-flex;align-items:center;
  font-weight:600;font-size:var(--fs-meta);letter-spacing:0;color:var(--color-text-main);
  padding:var(--s-1) 0;background:none;border:0;line-height:var(--lh-label)}
#lp-benor .nav-link::after,#lp-benor a.dropdown-toggle::after{content:"";position:absolute;bottom:0;
  inset-inline-start:0;width:0;height:2px;background:var(--color-accent-gold);
  transition:width .25s var(--ease-hover)}
#lp-benor .nav-link:hover,#lp-benor .dropdown-toggle:hover,
#lp-benor .nav-link[aria-current="page"]{color:var(--color-primary-bg)}
#lp-benor .nav-link:hover::after,#lp-benor .nav-link[aria-current="page"]::after{width:100%}
#lp-benor .nav-right{display:flex;align-items:center;gap:var(--s-4);justify-self:end}
#lp-benor .nav .btn{padding:var(--s-2) var(--s-5);font-size:var(--fs-meta)}
/* the top-bar CTA in WhatsApp green with the WhatsApp glyph (firm, 2026-10-13); navy text, 7.86:1 */
#lp-benor .nav .nav-right .btn--primary{background:var(--w-wa);color:var(--color-text-main);border-color:var(--w-wa)}
#lp-benor .nav .nav-right .btn--primary:hover{background:var(--w-wa-h);border-color:var(--w-wa-h)}
#lp-benor .nav .nav-right .nav-wa-ic{flex:0 0 auto;width:18px;height:18px;fill:currentColor}

/* over a dark hero, before the bar turns to glass */
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .nav-link,
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .dropdown-toggle{color:rgba(255,255,255,.88)}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .nav-link:hover,
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .nav-link[aria-current="page"],
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .dropdown-toggle:hover{color:#fff}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .brand-name{color:#fff}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .brand-sub{color:rgba(255,255,255,.7)}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .brand-logo{display:none}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .brand-logo--light{display:block}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .menu-btn{border-color:rgba(255,255,255,.35)}
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .menu-btn span,
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .menu-btn span::before,
#lp-benor .nav--over:not(.is-scrolled):not(.menu-open) .menu-btn span::after{background:#fff}
/* over a light hero: the resting state IS the scrolled state. These must restate
   the :not() selectors — the .nav--over rules above are on the same element and
   would otherwise win on specificity and paint white type on a light bar. */
#lp-benor .nav--light,
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open){background:rgba(246,244,239,.94);
  border-bottom-color:var(--color-border-subtle);color:var(--color-text-main)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .nav-link,
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .dropdown-toggle{color:var(--color-text-main)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .nav-link[aria-current="page"]{color:var(--color-primary-bg)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .brand-name{color:var(--color-text-main)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .brand-sub{color:var(--color-text-muted)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .brand-logo{display:block}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .brand-logo--light{display:none}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .menu-btn{border-color:var(--color-border-subtle)}
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .menu-btn span,
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .menu-btn span::before,
#lp-benor .nav--light:not(.is-scrolled):not(.menu-open) .menu-btn span::after{background:var(--color-text-main)}
#lp-benor .brand-logo--light{display:none}

/* ---- dropdown ---- */
#lp-benor .dropdown{position:relative}
#lp-benor .dropdown-toggle{gap:var(--s-2)}
#lp-benor .dropdown-toggle .caret{width:.7em;height:.7em;transition:transform .3s var(--ease-reveal)}
#lp-benor .dropdown.open .dropdown-toggle .caret{transform:rotate(180deg)}
#lp-benor .dropdown-panel{position:absolute;top:100%;inset-inline-start:0;margin-top:.7rem;min-width:250px;
  background:var(--color-surface-alt);border:1px solid var(--color-border-subtle);
  border-top:2px solid var(--color-accent-gold);border-radius:var(--r);box-shadow:var(--shadow-2);
  padding:.5rem;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
/* an invisible bridge over the .7rem gap, so the pointer never leaves the menu on its way down */
#lp-benor .dropdown-panel::before{content:"";position:absolute;inset-inline:0;top:calc(-.7rem - 3px);height:calc(.7rem + 3px)}
#lp-benor .dropdown-panel a{display:block;padding:.65rem .85rem;font-size:.93rem;font-weight:500;
  border-radius:var(--r-sm);color:var(--color-text-main)}
#lp-benor .dropdown-panel a:hover{background:var(--color-surface);color:var(--color-primary-bg)}
/* before (or without) benor.js the panel still opens on hover and on keyboard focus; once .is-ready the script
   drives it, with its grace delay (CE-10e) */
@media (min-width:981px){
  #lp-benor:not(.is-ready) .dropdown:hover .dropdown-panel,
  #lp-benor:not(.is-ready) .dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none}
}

/* ---- mobile menu ---- */
#lp-benor .menu-btn{display:none;background:none;border:1px solid var(--color-border-subtle);
  border-radius:var(--r-sm);width:38px;height:38px;align-items:center;justify-content:center}
#lp-benor .menu-btn span{display:block;width:18px;height:2px;background:var(--color-primary-bg);position:relative}
#lp-benor .menu-btn span::before,#lp-benor .menu-btn span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:var(--color-primary-bg)}
#lp-benor .menu-btn span::before{top:-6px}
#lp-benor .menu-btn span::after{top:6px}
/* justify-self:center on the bar's grid item still applies once the panel is
   absolutely positioned: with both insets at 0 and an auto width the box is
   sized shrink-to-fit and centred, so the sheet floated in the middle of the
   screen instead of spanning it. */
#lp-benor .nav.menu-open .nav-menu{display:flex;position:absolute;top:100%;inset-inline:0;justify-self:stretch;
  flex-direction:column;align-items:stretch;background:var(--color-surface);
  border-bottom:1px solid var(--color-border-subtle);
  padding:.6rem var(--site-gutter) 1rem;gap:0;box-shadow:var(--shadow-3);
  max-height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain}
#lp-benor .nav.menu-open .nav-link,#lp-benor .nav.menu-open .dropdown-toggle{
  padding-block:.85rem;border-bottom:1px solid var(--color-border-subtle)}
#lp-benor .nav.menu-open .dropdown-toggle{justify-content:space-between;width:100%}
#lp-benor .nav.menu-open .nav-link::after,#lp-benor .nav.menu-open .dropdown-toggle::after{display:none}
#lp-benor .nav.menu-open .nav-link[aria-current="page"]{color:var(--color-accent-gold-deep)}
#lp-benor .nav.menu-open .nav-link,#lp-benor .nav.menu-open .dropdown-toggle{min-height:var(--tap)}
#lp-benor .nav.menu-open .dropdown-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;
  transform:none;box-shadow:none;border:0;padding:.2rem 0 .5rem;background:transparent;min-width:0}
#lp-benor .nav.menu-open .dropdown-panel a{color:var(--color-text-muted);font-size:.9rem;
  padding:.6rem .9rem;min-height:var(--tap);display:flex;align-items:center}
#lp-benor .nav.menu-open .dropdown-panel a::before{content:"";width:12px;height:1px;flex:0 0 auto;
  margin-inline-end:.7rem;background:var(--color-gold-rule)}
#lp-benor .nav.menu-open .dropdown-panel a:hover{background:rgba(49,61,82,.06);color:var(--color-primary-bg)}

@media (max-width:980px){
  #lp-benor .nav-menu{display:none}
  #lp-benor .menu-btn{display:flex}
}
@media (max-width:600px){
  #lp-benor .nav-right .btn{display:none} /* the hamburger carries the phone header */
}

/* ============================================================================
   7 — HEROES AND TICKER
   Home (.hero) and the two inner variants share one portrait mechanism: a photo
   column bleeding to the viewport edge, dissolving into the navy; on a phone it
   becomes a cover — the photo fills the top, the type sits on the lower half.
   ============================================================================ */
#lp-benor .hero{position:relative;isolation:isolate;min-height:clamp(620px,84vh,860px);display:grid;
  align-items:center;background:var(--color-primary-deep);color:var(--color-text-on-primary);
  overflow:hidden;padding-block:0}
#lp-benor .hero .wrap{position:relative;z-index:2;width:100%}
#lp-benor .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);column-gap:var(--site-gutter)}
#lp-benor .hero-text{grid-column:1;max-width:660px;
  padding-block:var(--x-hero-text-padding-block-1) var(--x-hero-text-padding-block-2)}

/* the portrait column. clip-path: the composited (parallax) image layer and the
   overlay have to clip identically at a fractional edge, or a 1px seam shows. */
#lp-benor .hero-portrait{position:absolute;inset:0 auto 0 0;z-index:0;overflow:hidden;clip-path:inset(0);
  width:min(46%,760px);width:round(down,min(46%,760px),1px)}
#lp-benor .hero-portrait img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:52% 14%;
  display:block;filter:contrast(1.04) saturate(.9);transform:scale(1.05);transform-origin:50% 20%;will-change:transform}
#lp-benor.is-ready .hero-portrait img{transform:scale(1);transition:transform 2.2s var(--ease-reveal)}
/* the dissolve into the navy, a lift at the top for the bar, a soft foot. The
   overlay overshoots by 2px: a subpixel sliver of the photo edge read as a light line. */
#lp-benor .hero-portrait::after{content:"";position:absolute;inset:0 -2px 0 0;
  background:linear-gradient(to right,rgba(39,47,63,0) 58%,rgba(39,47,63,.72) 86%,var(--color-primary-deep) 99%),
             linear-gradient(to bottom,rgba(39,47,63,.5) 0%,rgba(39,47,63,0) 26%),
             linear-gradient(to top,rgba(39,47,63,.55) 0%,rgba(39,47,63,0) 30%)}

#lp-benor .hero-eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--track-eyebrow);color:rgba(255,255,255,.78);margin-bottom:var(--x-hero-eyebrow-margin-bottom);line-height:var(--lh-label)}
#lp-benor .hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent-gold)}
#lp-benor .hero-title{font-size:var(--x-hero-title-font-size);font-weight:800;line-height:var(--site-lh-display);
  letter-spacing:var(--track-heading);color:#fff;margin-bottom:var(--x-hero-title-margin-bottom);max-width:12ch}
#lp-benor .hero-sub{font-size:var(--step-1);color:rgba(255,255,255,.86);
  max-width:40ch;line-height:var(--x-hero-sub-line-height)}
#lp-benor .hero-sub--quiet{font-size:var(--step-0);color:rgba(255,255,255,.62);margin-top:var(--s-3)}
#lp-benor .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);margin:var(--x-hero-cta-margin-1) 0 var(--x-hero-cta-margin-3)}
#lp-benor .hero .btn{padding:var(--s-4) var(--x-hero-btn-padding-2);font-size:var(--step-0)}
/* the quiet second action: white text on a gold hairline, same arrow */
#lp-benor .hero-link{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--step-0);color:#fff;
  padding-bottom:var(--s-1);border-bottom:1px solid var(--color-gold-rule);transition:border-color .25s var(--ease-hover)}
#lp-benor .hero-link:hover{border-bottom-color:#fff}
#lp-benor .hero-link .arw{transition:transform .2s var(--ease-hover)}
#lp-benor .hero-link:hover .arw{transform:translateX(-3px)}
#lp-benor .hero-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);font-size:var(--fs-meta);
  font-weight:500;color:rgba(255,255,255,.66);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.18);line-height:var(--lh-small)}
#lp-benor .hero-badge .sep{color:var(--color-accent-gold)}

@media (max-width:1000px) and (min-width:601px){
  #lp-benor .hero-portrait{width:44%}
  #lp-benor .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  #lp-benor .hero-title{font-size:clamp(2.6rem,1.2rem + 3.8vw,3.6rem)}
}
@media (max-width:600px){
  /* cover layout: the portrait fills the upper screen, the navy rises from mid-height */
  #lp-benor .hero{min-height:min(92svh,820px);align-items:end}
  #lp-benor .hero-portrait{inset:0 0 auto 0;width:100%;height:min(64svh,560px)}
  #lp-benor .hero-portrait img{object-position:50% 12%}
  #lp-benor .hero-portrait::after{
    background:linear-gradient(to top,var(--color-primary-deep) 0%,rgba(39,47,63,.85) 22%,rgba(39,47,63,.3) 50%,rgba(39,47,63,0) 72%),
               linear-gradient(to bottom,rgba(39,47,63,.5) 0%,rgba(39,47,63,0) 20%)}
  #lp-benor .hero-grid{display:block}
  #lp-benor .hero-text{max-width:none;padding-block:var(--x-hero-text-padding-block-1-2) var(--x-hero-text-padding-block-2-2)}
  #lp-benor .hero-eyebrow{margin-bottom:var(--s-4);font-size:var(--fs-label);letter-spacing:var(--track-eyebrow);line-height:var(--lh-label)}
  #lp-benor .hero-title{max-width:none;margin-bottom:var(--s-4)}
  #lp-benor .hero-sub{font-size:var(--step-0)}
  #lp-benor .hero-sub--quiet{display:none}
  #lp-benor .hero-cta{flex-direction:column;align-items:stretch;gap:var(--s-4);margin:var(--s-7) 0 var(--x-hero-cta-margin-3-2)}
  #lp-benor .hero-cta .btn{justify-content:center}
  #lp-benor .hero-link{align-self:center}
  #lp-benor .hero-badge{font-size:var(--fs-meta);padding-top:var(--s-4);line-height:var(--lh-small)}
}

/* ---- ticker: the practice areas as one running line of big sans type ---- */
#lp-benor .ticker{overflow:hidden;background:var(--color-surface-alt);
  border-bottom:1px solid var(--color-border-subtle);padding-block:var(--x-ticker-padding-block);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
#lp-benor .ticker-track{display:flex;width:max-content;gap:0;animation:benor-tick 46s linear infinite}
#lp-benor .ticker-track:hover{animation-play-state:paused}
#lp-benor .ticker-item{display:inline-flex;align-items:center;gap:var(--x-ticker-item-gap);padding-inline-end:var(--x-ticker-item-padding-inline-end);
  white-space:nowrap;font-family:var(--font-display);font-weight:700;
  font-size:var(--x-ticker-item-font-size);letter-spacing:-.01em;color:var(--color-primary-bg);line-height:var(--x-ticker-item-line-height)}
#lp-benor .ticker-item::after{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--color-accent-gold);flex:0 0 auto}
@keyframes benor-tick{to{transform:translateX(50%)}}
@media (max-width:600px){#lp-benor .ticker{padding-block:var(--s-4)}}

/* ---- inner page hero: a compact navy panel; two variants carry a photograph ---- */
#lp-benor .page-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--color-primary-deep);color:var(--color-text-on-primary);
  padding-block:var(--x-page-hero-padding-block-1) var(--x-page-hero-padding-block-2)}
#lp-benor .page-hero .wrap{position:relative;z-index:2;width:100%}
#lp-benor .page-hero h1{font-size:var(--x-page-hero-h1-font-size);line-height:var(--site-lh-display);
  color:#fff;max-width:19ch;margin-bottom:var(--x-page-hero-h1-margin-bottom)}
#lp-benor .page-hero .lead{color:rgba(255,255,255,.84);font-size:var(--step-1);max-width:44ch}
#lp-benor .page-hero .crumbs{color:rgba(255,255,255,.66)}
#lp-benor .page-hero .hero-quick a,#lp-benor .page-hero .byline .who{color:#fff}

/* the split variant (about, the hub): the portrait mechanics, shared */
#lp-benor .page-hero--portrait{display:grid;align-items:center;min-height:clamp(560px,76vh,780px);
  padding-block:var(--s-10) var(--x-page-hero-portrait-padding-block-2)}
#lp-benor .page-hero--portrait .hero-portrait{width:min(42%,680px);width:round(down,min(42%,680px),1px)}
#lp-benor .page-hero--portrait .hero-portrait img{object-position:46% 30%}
#lp-benor .page-hero--portrait .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  column-gap:var(--site-gutter)}
#lp-benor .page-hero--portrait .ph-text{grid-column:1;max-width:640px}

/* the light variant (practice-areas hub v4): warm ground, navy type, a clean
   photo edge with no dissolve; the bar is solid from the start (.nav--light) */
#lp-benor .page-hero--room{background:var(--color-surface);color:var(--color-text-main);
  border-bottom:1px solid var(--color-border-subtle);min-height:clamp(540px,70vh,740px)}
#lp-benor .page-hero--room .hero-portrait{width:min(50%,820px);width:round(down,min(50%,820px),1px)}
#lp-benor .page-hero--room .hero-portrait::after{content:none}
#lp-benor .page-hero--room .hero-portrait img{object-position:50% 58%;filter:none}
#lp-benor .page-hero--room .wrap{grid-template-columns:minmax(0,1fr) minmax(0,48%)}
#lp-benor .page-hero--room .crumbs,#lp-benor .page-hero--room .crumbs a{color:var(--color-text-muted)}
#lp-benor .page-hero--room .crumbs [aria-current]{color:var(--color-text-main)}
#lp-benor .page-hero--room h1{color:var(--color-primary-deep)}
#lp-benor .page-hero--room .lead{color:var(--color-text-muted)}

@media (max-width:600px){
  #lp-benor .page-hero{padding-block:var(--x-page-hero-padding-block-1-2) var(--x-page-hero-padding-block-2-2)}
  #lp-benor .page-hero h1{max-width:none}
  #lp-benor .page-hero--portrait{min-height:min(92svh,820px);align-items:end;padding-top:0}
  #lp-benor .page-hero--portrait .hero-portrait{width:100%;height:min(58svh,520px)}
  #lp-benor .page-hero--portrait .hero-portrait img{object-position:50% 18%}
  #lp-benor .page-hero--portrait .wrap{display:block}
  #lp-benor .page-hero--portrait .ph-text{max-width:none;padding-top:var(--x-page-hero-portrait-ph-text-padding-top)}
  /* the bar's brand line sits on the portrait's top edge here: a deeper local gradient behind it (was .5 -> 0 at 20%,
     2.64:1); same bottom dissolve as the shared phone rule */
  #lp-benor .page-hero--portrait .hero-portrait::after{
    background:linear-gradient(to top,var(--color-primary-deep) 0%,rgba(39,47,63,.85) 22%,rgba(39,47,63,.3) 50%,rgba(39,47,63,0) 72%),
               linear-gradient(to bottom,rgba(39,47,63,.8) 0,rgba(39,47,63,.72) 64px,rgba(39,47,63,0) 150px)}
  /* the light hero stacks instead of covering: dark type needs its own ground */
  #lp-benor .page-hero--room{min-height:0;padding-top:var(--x-page-hero-room-padding-top)}
  #lp-benor .page-hero--room .hero-portrait{position:relative;inset:auto;width:100%;height:min(42svh,360px)}
  #lp-benor .page-hero--room .hero-portrait img{object-position:50% 60%}
  #lp-benor .page-hero--room .ph-text{padding-top:var(--s-8)}
}

/* ---- breadcrumbs, byline, quick-dial: the page-hero furniture ---- */
#lp-benor .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--x-crumbs-gap);font-size:var(--x-crumbs-font-size);font-weight:600;
  letter-spacing:.02em;color:var(--color-text-on-primary-muted);margin-bottom:var(--x-crumbs-margin-bottom);line-height:var(--lh-label)}
#lp-benor .crumbs a,#lp-benor .crumbs [aria-current]{display:inline-flex;align-items:center;min-height:var(--tap)}
#lp-benor .crumbs a:hover{color:#fff}
#lp-benor .crumbs .sep{color:var(--color-accent-gold);font-weight:400}
#lp-benor .crumbs [aria-current]{color:#fff}
#lp-benor .post-cat{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-lift);margin-bottom:var(--s-4);line-height:var(--lh-label)}
#lp-benor .post-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-accent-gold)}
#lp-benor .byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);font-size:var(--fs-meta);font-weight:600;
  color:var(--color-text-on-primary-muted);line-height:var(--lh-small)}
#lp-benor .byline .sep{color:var(--color-accent-gold)}
#lp-benor .byline .who{display:inline-flex;align-items:center;gap:var(--s-2);color:#fff}
#lp-benor .byline .av{width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:1px solid var(--color-gold-rule);flex:0 0 auto}
#lp-benor .byline .av img{width:100%;height:100%;object-fit:cover;object-position:center 10%}
@media (max-width:600px){ /* the author takes the first row, so no separator is left hanging at a line end */
  #lp-benor .byline .who{flex-basis:100%}
  #lp-benor .byline .who+.sep{display:none}
}
#lp-benor .hero-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);margin-top:var(--x-hero-quick-margin-top)}
#lp-benor .hero-quick a{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--step-0);
  color:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
#lp-benor .hero-quick a:hover{border-bottom-color:var(--color-accent-gold)}
#lp-benor .hero-quick .ic{width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--color-primary-raise);color:var(--color-accent-gold);display:grid;place-items:center}
@media (max-width:600px){#lp-benor .hero-quick{gap:var(--s-4)}}

/* ============================================================================
   8 — PRACTICE AREAS: the home list, and the three featured cards
   ============================================================================ */
#lp-benor .areas-center{text-align:start;max-width:var(--maxw-narrow);margin-inline:0;margin-bottom:var(--head-gap)}
#lp-benor .areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--x-areas-grid-gap-2)}
#lp-benor .area-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  border-bottom:1px solid var(--color-border-subtle);padding:var(--s-5) 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:var(--x-area-link-font-size);
  letter-spacing:-.01em;line-height:var(--x-area-link-line-height);color:var(--color-primary-bg);
  transition:padding .3s var(--ease-hover),color .3s}
#lp-benor .areas-grid .area-link:nth-child(-n+2){border-top:1px solid var(--color-border-subtle)}
#lp-benor .area-link::before{content:"";position:absolute;bottom:-1px;inset-inline-start:0;height:1px;width:0;
  background:var(--color-accent-gold);transition:width .4s var(--ease-hover)}
#lp-benor .area-link .arw{width:1.1em;height:1.1em;flex:0 0 auto;color:var(--color-accent-gold-deep);
  opacity:.75;transition:opacity .2s,transform .3s var(--ease-hover)}
#lp-benor .area-link:hover{padding-inline-start:.6rem}
#lp-benor .area-link:hover::before{width:100%}
#lp-benor .area-link:hover .arw{opacity:1;transform:translateX(-4px)}
#lp-benor .area-link--cta{color:var(--color-accent-gold-deep);font-weight:700}
#lp-benor .area-link--cta .ph{white-space:nowrap}
#lp-benor .area-link--cta .arw{opacity:1}
@media (max-width:600px){
  #lp-benor .areas-grid{grid-template-columns:1fr}
  #lp-benor .areas-grid .area-link:nth-child(2){border-top:0}
  #lp-benor .area-link{padding:var(--s-4) 0}
}

/* ---- the three featured cards: a calm editorial still life, an icon, a title ---- */
#lp-benor .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
#lp-benor .svc-card{position:relative;display:flex;flex-direction:column}
#lp-benor .svc-img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-card);
  background:var(--color-surface-dim);isolation:isolate}
#lp-benor .svc-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);
  transition:transform .9s var(--ease-reveal)}
#lp-benor .svc-card:hover .svc-img img{transform:scale(1.03)}
#lp-benor .svc-ic{display:block;width:36px;height:36px;margin-top:var(--s-5);color:var(--color-accent-gold-deep)}
#lp-benor .svc-ic .ic,#lp-benor .step__ic .ic{display:block;width:100%;height:100%}
#lp-benor .svc-t{font-size:var(--step-2);font-weight:700;margin:var(--s-2) 0 var(--s-2);
  color:var(--color-primary-bg)}
#lp-benor .svc-d{font-size:var(--step-0);color:var(--color-text-muted);line-height:var(--lh-snug);flex:1}
#lp-benor .svc-more{display:inline-flex;align-self:flex-start;align-items:center;gap:var(--s-2);margin-top:var(--s-4);
  font-size:var(--fs-meta);font-weight:700;letter-spacing:0;color:var(--color-primary-bg);
  border-bottom:1px solid transparent;transition:border-color .25s;line-height:var(--lh-label)}
#lp-benor .svc-card:hover .svc-more{border-bottom-color:var(--color-accent-gold)}
#lp-benor .svc-more .arw{color:var(--color-accent-gold-deep);stroke-width:1.75;stroke-linecap:butt;
  stroke-linejoin:miter;shape-rendering:geometricPrecision}
#lp-benor .area-link .arw path,#lp-benor .svc-more .arw path{stroke-linecap:inherit;stroke-linejoin:inherit;
  stroke-width:inherit}
/* tablet: three cards in two columns left an orphan on its own row. One column
   of horizontal cards instead — same vocabulary, no ragged last row. */
@media (max-width:980px) and (min-width:601px){
  #lp-benor .svc-grid{grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.2rem)}
  #lp-benor .svc-card{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;column-gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start}
  #lp-benor .svc-card .svc-img{grid-column:1;grid-row:1/-1;align-self:start}
  #lp-benor .svc-card .svc-ic{grid-column:2;grid-row:1;margin-top:.1rem}
  #lp-benor .svc-card .svc-t{grid-column:2;grid-row:2}
  #lp-benor .svc-card .svc-d{grid-column:2;grid-row:3;flex:none}
  #lp-benor .svc-card .svc-more{grid-column:2;grid-row:4;justify-self:start}
}
@media (max-width:600px){
  #lp-benor .svc-grid{grid-template-columns:1fr}
  #lp-benor .svc-ic{width:30px;height:30px;margin-top:var(--s-4)}
}

/* ============================================================================
   9 — THE PRACTICE INDEX (hub)
   Seven rows: icon | title | lead | a plus mark. A row opens in place. The old
   TOC + seven stacked full-width blocks were 80% of the page (owner, 2026-09-17).
   ============================================================================ */
#lp-benor .area-index{border-top:1px solid var(--color-border-subtle);max-width:980px}
#lp-benor .area-row{position:relative;border-bottom:1px solid var(--color-border-subtle);scroll-margin-top:96px}
#lp-benor .area-row::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;height:1px;width:0;
  background:var(--color-accent-gold);transition:width .45s var(--ease-hover)}
#lp-benor .area-row:hover::after,#lp-benor .area-row.open::after{width:100%}
#lp-benor .area-h{margin:0;font-size:inherit;max-width:none;letter-spacing:0}
#lp-benor .area-btn{display:grid;grid-template-columns:2.6rem 19rem minmax(0,1fr) 2.6rem;align-items:start;
  column-gap:var(--s-6);width:100%;padding:var(--s-6) 0;background:none;border:0;text-align:start;
  color:inherit;cursor:pointer;font:inherit}
#lp-benor .area-btn:focus-visible{outline:2px solid var(--color-accent-gold);outline-offset:6px;border-radius:2px}
#lp-benor .area-ic{display:block;grid-column:1;grid-row:1;width:40px;height:40px;
  color:var(--color-accent-gold-deep);justify-self:start}
#lp-benor .area-ic *{vector-effect:non-scaling-stroke}
/* display:contents lifts the title and the lead into the button's own grid, so
   every row aligns on the same four columns. Each one needs its cell named:
   left to auto-placement the toggle fell into a second row at tablet width. */
#lp-benor .area-tt{display:contents}
#lp-benor .area-t{grid-column:2;grid-row:1;display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--x-area-t-font-size);line-height:var(--x-area-t-line-height);letter-spacing:-.012em;padding-top:var(--s-1);
  color:var(--color-primary-bg);transition:color .25s}
#lp-benor .area-btn:hover .area-t{color:var(--color-accent-gold-deep)}
#lp-benor .area-l{grid-column:3;grid-row:1;display:block;font-family:var(--font-family-base);font-weight:400;
  font-size:var(--step-0);line-height:var(--lh-snug);letter-spacing:0;padding-top:var(--s-1);color:var(--color-text-muted)}
/* the plus mark: two hairlines; the vertical one turns away when the row opens */
#lp-benor .area-x{position:relative;display:block;grid-column:4;grid-row:1;width:1.1rem;height:1.1rem;
  justify-self:end;align-self:start;margin-top:var(--s-2);color:var(--color-accent-gold-deep)}
#lp-benor .area-x::before,#lp-benor .area-x::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;
  background:currentColor;transform:translateY(-50%);
  transition:transform .35s var(--ease-hover),opacity .3s}
#lp-benor .area-x::after{transform:translateY(-50%) rotate(90deg)}
#lp-benor .area-row.open .area-x::after{transform:translateY(-50%) rotate(0);opacity:0}
/* the rows are open by default and collapse only when JS runs: html.js is set by an inline script in <head>
   (benor-canvas.php) before the first paint, so there is no flash; without JS every row stays readable (2026-10-15) */
#lp-benor .area-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease-reveal)}
html.js #lp-benor .area-row:not(.open) .area-panel{grid-template-rows:0fr}
html:not(.js) #lp-benor .area-x::after{transform:translateY(-50%) rotate(0);opacity:0}
#lp-benor .area-panel-in{overflow:hidden;min-height:0}
#lp-benor .area-panel .area-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:var(--s-8);padding-block:var(--s-1) var(--x-area-panel-area-body-padding-block-2);padding-inline:var(--gutter);
  transition:opacity .4s .1s,transform .5s var(--ease-reveal)}
html.js #lp-benor .area-row:not(.open) .area-panel .area-body{opacity:0;transform:translateY(-6px)}
#lp-benor .area-panel .area-body>p{grid-column:1;grid-row:1/span 3;max-width:none;font-size:var(--step-0);line-height:var(--lh-text)}
#lp-benor .area-panel .area-body .h-includes{grid-column:2;margin:var(--s-1) 0 var(--s-4)}
#lp-benor .area-panel .area-body .checks{grid-column:2;grid-template-columns:1fr;gap:var(--s-2)}
#lp-benor .area-panel .area-body .related{grid-column:2;margin-top:var(--x-area-panel-area-body-related-margin-top);padding-top:var(--s-4)}
@media (max-width:980px){
  #lp-benor .area-index{max-width:none}
  /* the lead drops under the title, so the icon spans both rows and the toggle
     stays on the title's line */
  #lp-benor .area-btn{grid-template-columns:2.6rem minmax(0,1fr) 2.6rem}
  #lp-benor .area-ic{grid-row:1/span 2}
  #lp-benor .area-l{grid-column:2;grid-row:2;padding-top:var(--s-1);line-height:var(--lh-snug)}
  #lp-benor .area-x{grid-column:3;grid-row:1}
  #lp-benor .area-panel .area-body{grid-template-columns:1fr;padding-inline-end:0}
  #lp-benor .area-panel .area-body>p{grid-row:auto;margin-bottom:var(--s-2);line-height:var(--lh-text)}
  #lp-benor .area-panel .area-body .h-includes,
  #lp-benor .area-panel .area-body .checks,
  #lp-benor .area-panel .area-body .related{grid-column:1}
}
@media (max-width:600px){
  #lp-benor .area-row{scroll-margin-top:72px}
  #lp-benor .area-btn{grid-template-columns:1.9rem minmax(0,1fr) 1.6rem;column-gap:var(--s-3);padding:var(--gutter) 0}
  #lp-benor .area-ic{width:30px;height:30px}
  #lp-benor .area-l{font-size:var(--step-0);line-height:var(--lh-snug)}
  #lp-benor .area-panel .area-body{padding-inline:0;padding-bottom:var(--s-8)}
}

/* ---- the shared parts of an area body: the includes list and the article links ---- */
#lp-benor .h-includes{font-family:var(--font-family-base);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);
  color:var(--color-accent-gold-deep);margin:1.9rem 0 1rem;line-height:var(--lh-label)}
#lp-benor .checks{display:grid;grid-template-columns:1fr 1fr;gap:.65rem 2rem}
#lp-benor .checks li{position:relative;padding-inline-start:var(--x-checks-li-padding-inline-start);font-size:var(--step-0);font-weight:500;
  color:var(--color-text-main)}
#lp-benor .checks li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;width:.8em;height:2px;
  background:var(--color-accent-gold);border-radius:1px}
#lp-benor .related{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--x-related-gap-2);margin-top:2.1rem;
  padding-top:1.3rem;border-top:1px solid var(--color-border-subtle)}
#lp-benor .related .rel-label{flex:0 0 100%;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);
  color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .related a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);
  font-size:var(--step-0);font-weight:600;color:var(--color-primary-bg);
  border-bottom:1px solid var(--color-gold-rule);transition:border-color .2s,color .2s}
#lp-benor .related a:hover{border-bottom-color:var(--color-accent-gold);color:var(--color-accent-gold-deep)}
#lp-benor .related .arw{width:.8em;height:.8em;opacity:.8;color:var(--color-accent-gold-deep)}
@media (max-width:600px){#lp-benor .checks{grid-template-columns:1fr}}

/* ============================================================================
   10 — STATS: the one greige band on home
   ============================================================================ */
#lp-benor .stats{text-align:start}
#lp-benor .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
/* the same vocabulary as the process steps: a hairline with a short gold tick */
#lp-benor .stat{position:relative;padding:var(--s-6) 0 0;border-top:1px solid var(--color-border-subtle);text-align:start}
#lp-benor .stat::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:44px;height:2px;
  background:var(--color-accent-gold)}
#lp-benor .stat__n{font-family:var(--font-display);font-weight:800;font-size:var(--x-stat-n-font-size);
  color:var(--color-primary-bg);line-height:var(--x-stat-n-line-height);letter-spacing:-.02em}
#lp-benor .stat__n.num{text-align:right} /* the LTR-isolated figure stays on the RTL start edge */
#lp-benor .stat__l{font-size:var(--step-0);color:var(--color-text-muted);margin-top:var(--s-2);line-height:var(--lh-snug)}
@media (max-width:980px){#lp-benor .stats-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  #lp-benor .stats-grid{gap:var(--s-7) var(--s-4)} /* four short stats stay 2x2 */
  #lp-benor .stat{padding-top:var(--s-4)}
}

/* ============================================================================
   11 — TESTIMONIALS (real Google reviews; the Trustindex widget drops into .ti-shell)
   ============================================================================ */
#lp-benor .rev-rating{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--x-rev-rating-margin-top)}
#lp-benor .rev-rating .score{font-weight:800;font-size:var(--x-rev-rating-score-font-size);color:var(--color-text-main);font-family:var(--font-display);line-height:1;letter-spacing:-.02em}
#lp-benor .rev-rating .of{color:var(--color-text-muted);font-size:var(--step-0)}
#lp-benor .rev-rating .of a{color:var(--color-primary-bg);text-decoration:underline;text-underline-offset:3px}
#lp-benor .ti-shell{padding:var(--x-ti-shell-padding-1) 0 0;border-top:2px solid var(--color-accent-gold)}
#lp-benor .rev-stars{color:var(--color-accent-gold);font-size:var(--step-0);letter-spacing:.2em;margin-bottom:var(--s-4)}
#lp-benor .rev-quote{font-family:var(--font-display);font-size:var(--x-rev-quote-font-size);font-weight:500;
  letter-spacing:-.01em;line-height:var(--x-rev-quote-line-height);color:var(--color-primary-bg);margin-bottom:var(--x-rev-quote-margin-bottom)}
#lp-benor .rev-who{display:flex;align-items:center;gap:var(--s-3)}
#lp-benor .rev-av{width:44px;height:44px;border-radius:50%;background:var(--color-primary-bg);
  color:var(--color-accent-gold);display:grid;place-items:center;font-weight:700}
#lp-benor .rev-name{font-weight:700;font-size:var(--step-0)}
#lp-benor .rev-role{font-size:var(--fs-meta);color:var(--color-text-muted);line-height:var(--lh-label)}

/* ============================================================================
   12 — ABOUT: the principles rail (home) and the three columns (about page)
   ============================================================================ */
#lp-benor .grid-about{display:grid;grid-template-columns:1fr 1fr;gap:var(--x-grid-about-gap);align-items:start}
#lp-benor .about-left{position:sticky;top:96px}
#lp-benor .about-img{margin-top:var(--x-about-img-margin-top);aspect-ratio:4/3;border-radius:var(--r-card);
  background:var(--color-surface-dim);border:1px solid var(--color-border-subtle);position:relative;overflow:hidden}
#lp-benor .about-img::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;
  background:var(--color-accent-gold)}
#lp-benor .about-img img{width:100%;height:100%;object-fit:cover;object-position:center 100%;display:block}
#lp-benor .about-right{position:relative}
#lp-benor .principles{margin-top:var(--s-6);border-inline-start:2px solid var(--color-border-subtle)}
#lp-benor .about-item{position:relative;padding-inline-start:var(--x-about-item-padding-inline-start);padding-block:var(--x-about-item-padding-block)}
#lp-benor .about-item::before{content:"";position:absolute;inset-inline-start:-2px;top:2.15rem;height:2rem;width:2px;
  background:var(--color-accent-gold);border-radius:1px}
#lp-benor .about-item+.about-item{border-top:1px solid var(--color-border-subtle)}
/* the rail starts where the heading starts — the first label on the h2 cap line */
#lp-benor .about-item:first-child{padding-top:var(--s-2)}
#lp-benor .about-item:first-child::before{top:.85rem}
#lp-benor .about-item .s{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .about-item h3{font-size:var(--step-1);font-weight:700;color:var(--color-primary-bg);margin:var(--s-2) 0 var(--s-2)}
#lp-benor .about-item p{color:var(--color-text-muted);line-height:var(--lh-text);max-width:42ch}
/* the about page states the same principles as three hairline columns */
#lp-benor .principles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x-principles-row-gap);
  margin-top:var(--space-2xl)}
#lp-benor .principle{position:relative;border-top:1px solid var(--color-border-subtle);padding-top:var(--x-principle-padding-top)}
#lp-benor .principle::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:44px;height:2px;
  background:var(--color-accent-gold)}
#lp-benor .principle .s{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .principle h3{font-size:var(--step-1);font-weight:700;color:var(--color-primary-bg);margin:var(--s-2) 0 var(--s-2)}
#lp-benor .principle p{color:var(--color-text-muted);line-height:var(--lh-text);font-size:var(--step-0)}
/* the firm story: headline and lead on the reading side, the body in the second column */
#lp-benor .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
#lp-benor .story-grid p+p{margin-top:var(--s-4)}
#lp-benor .story-grid .story-body{padding-top:var(--s-2);line-height:var(--lh-text)}
@media (max-width:980px){
  #lp-benor .grid-about,#lp-benor .story-grid{grid-template-columns:1fr}
  #lp-benor .about-left{position:static}
  #lp-benor .principles{margin-top:0} /* photo -> first principle = the grid gap */
  #lp-benor .principles-row{grid-template-columns:1fr}
}

/* ---- the team, as an editorial list on the greige band ---- */
#lp-benor .team-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--x-team-list-gap-2);
  margin-top:var(--head-gap);padding:0;list-style:none}
#lp-benor .team-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-6);padding:var(--x-team-row-padding-1) 0;
  border-bottom:1px solid rgba(49,61,82,.18)}
#lp-benor .team-list .team-row:nth-child(-n+2){border-top:1px solid rgba(49,61,82,.18)}
#lp-benor .team-name{font-family:var(--font-display);font-weight:700;
  font-size:var(--x-team-name-font-size);letter-spacing:-.01em;line-height:var(--x-team-name-line-height);color:var(--color-primary-bg)}
#lp-benor .team-role{font-size:var(--step-0);font-weight:600;color:var(--color-text-muted);margin:0;text-align:end;flex:0 0 auto}
@media (max-width:980px){
  #lp-benor .team-list{grid-template-columns:1fr}
  #lp-benor .team-list .team-row:nth-child(2){border-top:0}
}
@media (max-width:600px){
  #lp-benor .team-row{flex-direction:column;align-items:flex-start;gap:var(--s-1);padding:var(--s-4) 0}
  #lp-benor .team-role{text-align:start}
}

/* ============================================================================
   13 — ATTORNEY, PROCESS, AND THE CTA BAND
   ============================================================================ */
#lp-benor .att{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--x-att-gap);align-items:center}
#lp-benor .att-photo{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;
  background:var(--color-surface-dim)}
#lp-benor .att-photo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;
  background:var(--color-accent-gold)}
#lp-benor .att-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
#lp-benor .att .role{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .att h2{font-size:var(--step-5);font-weight:800;margin:var(--s-2) 0 0}
#lp-benor .att-quote{margin:var(--x-att-quote-margin-1) 0 var(--x-att-quote-margin-3);padding:0;border:0;font-family:var(--font-display);
  font-size:var(--x-att-quote-font-size);font-weight:500;letter-spacing:-.01em;line-height:var(--x-att-quote-line-height);
  color:var(--color-primary-bg);max-width:22ch}
#lp-benor .att-quote::before{content:"";display:block;width:56px;height:2px;background:var(--color-accent-gold);
  margin-bottom:1.1rem}
#lp-benor .att .lead{max-width:52ch}
#lp-benor .att-cred{display:flex;flex-wrap:wrap;gap:var(--s-2) 0;margin:var(--x-att-cred-margin-1) 0 var(--x-att-cred-margin-3);padding:0;list-style:none}
#lp-benor .att-cred li{font-size:var(--fs-meta);font-weight:600;color:var(--color-text-main);display:inline-flex;
  align-items:center;white-space:nowrap}
#lp-benor .att-cred li:not(:first-child)::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--color-accent-gold);margin-inline:.8rem;flex:0 0 auto}
@media (max-width:980px){
  #lp-benor .att{grid-template-columns:1fr}
  #lp-benor .att-quote{max-width:none}
  #lp-benor .att-cred{flex-direction:column;gap:var(--s-2)}
  #lp-benor .att-cred li{white-space:normal;font-size:var(--fs-meta)}
  #lp-benor .att-cred li:not(:first-child)::before{margin-inline:0 .7rem}
  #lp-benor .att-cred li::before{content:"";width:5px;height:5px;border-radius:50%;
    background:var(--color-accent-gold);margin-inline:0 .7rem;flex:0 0 auto}
}

#lp-benor .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)}
#lp-benor .steps--3{grid-template-columns:repeat(3,1fr)}
#lp-benor .step{position:relative;border-top:1px solid var(--color-border-subtle);padding-top:var(--s-6)}
#lp-benor .step::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:44px;height:2px;
  background:var(--color-accent-gold)}
#lp-benor .step__ic{width:34px;height:34px;color:var(--color-accent-gold-deep)}
#lp-benor .step__n{font-family:var(--font-display);font-weight:300;font-size:var(--x-step-n-font-size);
  line-height:var(--x-step-n-line-height);color:var(--color-accent-gold-deep);font-variant-numeric:tabular-nums lining-nums}
#lp-benor .step h3{font-size:var(--x-step-h3-font-size);font-weight:700;margin:var(--s-4) 0 var(--s-2)}
#lp-benor .step p{font-size:var(--step-0);color:var(--color-text-muted);line-height:var(--lh-text)}
@media (max-width:980px) and (min-width:601px){
  #lp-benor .steps{grid-template-columns:1fr 1fr}
  /* an odd number of steps in two columns left the last one alone beside an
     empty half. It spans instead, so its hairline runs the full width and the
     row reads as deliberate; the text keeps a reading measure. */
  #lp-benor .steps>.step:last-child:nth-child(odd){grid-column:1/-1}
  #lp-benor .steps>.step:last-child:nth-child(odd) p{max-width:68ch}
}
@media (max-width:600px){
  #lp-benor .steps{grid-template-columns:1fr}
  #lp-benor .step{padding-top:var(--s-4)}
  #lp-benor .step__ic{width:30px;height:30px}
}

/* ---- the CTA band: one quiet consultation room under a neutral scrim ---- */
#lp-benor .midcta{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:0;
  background:var(--color-primary-deep);color:#fff}
#lp-benor .midcta-bg{position:absolute;inset:-12% 0;z-index:0}
#lp-benor .midcta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block;
  filter:saturate(.85) contrast(1.02);will-change:transform}
/* the neutral dark scrim: .64 measured the inner pages' lead at 3.93:1 over band-room.webp; raised for 4.5:1 (2026-10-15) */
#lp-benor .midcta-bg::after{content:"";position:absolute;inset:0;background:rgba(28,32,40,.72)}
#lp-benor .midcta-panel{position:relative;z-index:1;padding-block:var(--x-midcta-panel-padding-block)}
#lp-benor .midcta .h2{color:#fff;font-size:var(--x-midcta-h2-font-size);max-width:18ch;margin:0 auto var(--x-midcta-h2-margin-3)}
#lp-benor .midcta .lead{color:rgba(255,255,255,.8);max-width:44ch;margin:0 auto var(--x-midcta-lead-margin-3);
  font-size:var(--step-1)}
#lp-benor .midcta .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4)}
#lp-benor .midcta .btn--secondary{color:#fff}
#lp-benor .midcta .btn--secondary:hover{border-color:#fff;background:rgba(255,255,255,.06)}
@media (max-width:600px){#lp-benor .midcta .cta-row{flex-direction:column;align-items:stretch}}

/* ============================================================================
   14 — CONTACT: the details column, the card, and Fluent Forms id 3
   ============================================================================ */
#lp-benor .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-8);align-items:start}
/* plain hairline rows, a thin gold line icon, no discs */
#lp-benor .contact-links{display:flex;flex-direction:column;gap:0;margin-top:var(--x-contact-links-margin-top);
  border-top:1px solid var(--color-border-subtle)}
#lp-benor .contact-link{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-4) 0;font-size:var(--step-0);
  border-bottom:1px solid var(--color-border-subtle)}
#lp-benor .contact-link .ic{display:block;width:20px;height:20px;flex:0 0 auto;margin-top:var(--s-1);
  color:var(--color-accent-gold-deep)}
#lp-benor .contact-link .ic svg{width:20px;height:20px;display:block}
#lp-benor .contact-link b{font-weight:700}
#lp-benor .contact-link .sub{font-size:var(--fs-meta);color:var(--color-text-muted);line-height:var(--lh-label)}
#lp-benor a.contact-link:hover b{color:var(--color-primary-bg);text-decoration:underline;text-underline-offset:3px}
#lp-benor .hours{margin-top:var(--x-hours-margin-top)}
#lp-benor .hours-title{display:flex;align-items:center;gap:var(--s-2);padding:0 0 var(--s-3);font-size:var(--fs-label);
  font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .hours-title svg{width:16px;height:16px;color:var(--color-accent-gold-deep)}
#lp-benor .hours-row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;font-size:var(--step-0);
  border-top:1px solid var(--color-border-subtle)}
#lp-benor .hours-row:last-child{border-bottom:1px solid var(--color-border-subtle)}
#lp-benor .hours-row b{font-weight:700;color:var(--color-primary-bg)}
#lp-benor .hours-row .num{font-weight:600}
/* the card: one white surface, a gold rule on top, nothing animated */
#lp-benor .contact-card{background:var(--color-surface-alt);border:1px solid var(--color-border-subtle);
  border-top:2px solid var(--color-accent-gold);border-radius:var(--r);padding:var(--x-contact-card-padding)}
#lp-benor .contact-status{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--x-contact-status-margin-3);font-size:var(--fs-meta);
  font-weight:600;color:var(--color-text-muted);line-height:var(--lh-small)}
#lp-benor .contact-status::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--color-accent-gold);flex:0 0 auto}
#lp-benor .form-note{margin-top:var(--s-4);font-size:var(--fs-meta);line-height:var(--lh-small);color:var(--color-text-muted);text-align:center;text-wrap:balance}
@media (max-width:980px){#lp-benor .contact-grid{grid-template-columns:1fr}}

/* ---- the form. Grid: name | phone, email | subject, message and submit full width ---- */
#lp-benor .fluentform{--f-h:52px;margin:0}
/* the fieldset reset is ours, not Fluent Forms': without it the browser default
   (a 2px groove frame with its own padding) draws a second box inside the card
   whenever the plugin's stylesheet is absent or changes. min-inline-size:0 also
   frees the fieldset from its intrinsic minimum width, which a grid needs. */
#lp-benor .fluentform .frm-fluent-form fieldset{display:grid !important;grid-template-columns:1fr 1fr;
  column-gap:var(--s-4);margin:0;padding:0;border:0;min-inline-size:0}
#lp-benor .fluentform .ff-el-group{margin:0 0 var(--s-4);min-width:0}
#lp-benor .fluentform .benor-f--message,
#lp-benor .fluentform .ff_submit_btn_wrapper,
#lp-benor .fluentform .ff-custom_html{grid-column:1/-1}
#lp-benor .fluentform .ff-el-input--label{margin:0 0 var(--s-2);padding:0;display:block}
#lp-benor .fluentform .ff-el-input--label label{display:block;margin:0;font-family:var(--font-family-base);
  font-size:var(--fs-meta);font-weight:600;line-height:var(--x-fluentform-ff-el-input-label-label-line-height);color:var(--color-text-main)}
#lp-benor .fluentform .ff-el-input--label.ff-el-is-required label::after{content:none}
#lp-benor .fluentform .ff-el-form-control{display:block;width:100%;height:var(--f-h);margin:0;padding:0 var(--x-fluentform-ff-el-form-control-padding-2);
  font-family:var(--font-family-base);font-size:var(--step-0);font-weight:500;line-height:var(--lh-display);color:var(--color-text-main);
  background-color:#fff;border:1px solid var(--color-border-field);border-radius:var(--r);box-shadow:none;
  outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
#lp-benor .fluentform input.ff-el-form-control[dir="ltr"]{text-align:right}
#lp-benor .fluentform .ff-el-form-control::placeholder{color:#77736B;opacity:1}
#lp-benor .fluentform .ff-el-form-control:hover{border-color:var(--color-primary-bg)}
#lp-benor .fluentform .ff-el-form-control:focus{border-color:var(--color-primary-bg);
  box-shadow:0 0 0 3px rgba(49,61,82,.16)}
#lp-benor .fluentform textarea.ff-el-form-control{height:auto;min-height:120px;max-height:260px;
  padding:var(--s-3) var(--s-4);line-height:var(--lh-display);resize:vertical}
#lp-benor .fluentform select.ff-el-form-control{padding-inline-end:var(--x-fluentform-select-ff-el-form-control-padding-inline-end);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23313D52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 1rem center;background-size:16px}
/* error: a red line and the message under the field; nothing moves */
#lp-benor .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--color-error)}
#lp-benor .fluentform .ff-el-is-error .ff-el-form-control:focus{box-shadow:0 0 0 3px rgba(179,38,30,.14)}
#lp-benor .fluentform .ff-el-group .error,
#lp-benor .fluentform .text-danger{display:block;margin:.4rem 0 0;padding:0;font-size:.85rem;font-weight:600;
  line-height:1.4;color:var(--color-error);background:none;border:0}
#lp-benor .fluentform .ff-errors-in-stack{margin:0;padding:0;border:0;background:none}
#lp-benor .fluentform .ff-errors-in-stack .error{margin:.6rem 0 0;font-size:.9rem;font-weight:600;color:var(--color-error)}
/* the consent row (client review 2026-09-17) */
#lp-benor .fluentform .benor-f--consent,
#lp-benor .fluentform .ff-el-tc{grid-column:1/-1;margin:var(--x-fluentform-benor-f-consent-margin-1) 0 var(--s-4)}
#lp-benor .fluentform .ff_tc_label{display:flex;align-items:flex-start;gap:var(--s-3);margin:0;cursor:pointer;font-weight:500}
#lp-benor .fluentform .ff_tc_checkbox{flex:0 0 auto;padding:0;margin:0}
#lp-benor .fluentform .ff_tc_checkbox input{width:20px;height:20px;margin:var(--x-fluentform-ff-tc-checkbox-input-margin-1) 0 0;
  accent-color:var(--color-primary-bg);cursor:pointer}
#lp-benor .fluentform .ff_t_c{font-size:var(--fs-meta);line-height:var(--lh-small);color:var(--color-text-main);padding:0}
#lp-benor .fluentform .ff_t_c a{color:var(--color-primary-bg);text-decoration:underline;text-underline-offset:3px}
/* submit: the site's primary button, full width */
#lp-benor .fluentform .ff_submit_btn_wrapper{margin:var(--s-1) 0 0;text-align:initial}
#lp-benor .fluentform .ff-btn-submit{display:flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;
  height:56px;margin:0;padding:0 var(--x-fluentform-ff-btn-submit-padding-2);font-family:var(--font-family-base);font-size:var(--step-0);font-weight:700;
  letter-spacing:var(--track-button);line-height:var(--x-fluentform-ff-btn-submit-line-height);color:var(--color-text-on-accent);
  background:var(--color-accent-gold);border:0;border-radius:var(--r);box-shadow:none;cursor:pointer;
  transition:background-color .15s ease}
#lp-benor .fluentform .ff-btn-submit:hover{background:var(--color-accent-gold-hover);
  color:var(--color-text-on-accent);opacity:1}
#lp-benor .fluentform .ff-btn-submit:active{background:var(--color-accent-gold-press)}
#lp-benor .fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--color-primary-bg);outline-offset:3px}
#lp-benor .fluentform .ff-btn-submit[disabled],
#lp-benor .fluentform .ff-working .ff-btn-submit{cursor:progress;opacity:.72}
/* success: the form is replaced by one plain confirmation line with a gold rule */
#lp-benor .ff-message-success{margin:0;padding:1.4rem 0 .4rem;border:0;border-top:2px solid var(--color-accent-gold);
  border-radius:0;background:none;box-shadow:none;font-family:var(--font-display);
  font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);font-weight:700;line-height:1.45;color:var(--color-primary-bg)}
#lp-benor .ff-message-success p{margin:0}
@media (max-width:600px){
  #lp-benor .fluentform .frm-fluent-form fieldset{grid-template-columns:1fr}
  #lp-benor .fluentform .ff-el-group{margin-bottom:var(--s-4)}
}

/* ============================================================================
   15 — MAP / DIRECTIONS
   ============================================================================ */
#lp-benor .map-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:stretch}
#lp-benor .map-frame{border:1px solid var(--color-border-subtle);border-radius:var(--r-card);overflow:hidden;
  min-height:340px;background:var(--color-surface-dim)}
#lp-benor .map-frame iframe{width:100%;height:100%;min-height:340px;border:0}
#lp-benor .dir-card{display:flex;flex-direction:column;justify-content:center}
#lp-benor .dir-lines{margin-top:var(--x-dir-lines-margin-top);display:flex;flex-direction:column;gap:var(--s-4)}
#lp-benor .dir-line{display:flex;gap:var(--s-4);align-items:flex-start;font-size:var(--step-0)}
#lp-benor .dir-line .tick{flex:0 0 auto;width:.8em;height:2px;background:var(--color-accent-gold);
  border-radius:1px;margin-top:var(--s-3)}
#lp-benor .dir-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--x-dir-cta-margin-top)}
@media (max-width:980px){#lp-benor .map-grid{grid-template-columns:1fr}}
@media (max-width:600px){#lp-benor .dir-cta{flex-direction:column;align-items:stretch}}

/* ============================================================================
   16 — FAQ
   ============================================================================ */
#lp-benor .grid-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-8);align-items:start}
#lp-benor .faq-item{border-bottom:1px solid var(--color-border-subtle)}
#lp-benor .faq-item:first-child{border-top:1px solid var(--color-border-subtle)}
#lp-benor .faq-q{width:100%;text-align:start;background:none;border:0;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-4);padding:var(--x-faq-q-padding-1) 0;font-weight:700;font-size:var(--step-0);letter-spacing:0;
  color:var(--color-text-main);line-height:var(--lh-quote)}
#lp-benor .faq-q:hover{color:var(--color-primary-bg)}
#lp-benor .faq-q .ic{flex:0 0 auto;width:1.2em;height:1.2em;color:var(--color-accent-gold);
  transition:transform .3s var(--ease-hover)}
#lp-benor .faq-a{overflow:hidden}
/* answers collapse only once benor.js runs the accordion; without it every answer stays readable (CE-10c) */
#lp-benor.is-ready .faq-a{height:0}
#lp-benor .faq-a p{padding-bottom:var(--x-faq-a-p-padding-bottom);font-size:var(--step-0);color:var(--color-text-muted);line-height:var(--lh-text);max-width:60ch}
@media (max-width:980px){#lp-benor .grid-faq{grid-template-columns:1fr}}

/* ============================================================================
   17 — ARTICLES: the featured block, the filter chips, the card grid
   ============================================================================ */
#lp-benor .featured{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:center}
#lp-benor .feat-tag{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);margin-bottom:var(--s-4);line-height:var(--lh-label)}
#lp-benor .feat-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-accent-gold)}
#lp-benor .featured h2{font-size:var(--step-4);max-width:20ch;margin-bottom:var(--s-4)}
#lp-benor .featured .lead{max-width:56ch;margin-bottom:var(--x-featured-lead-margin-bottom)}
#lp-benor .feat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);font-size:var(--fs-meta);font-weight:600;
  color:var(--color-text-muted);margin-bottom:var(--x-feat-meta-margin-bottom);line-height:var(--lh-small)}
#lp-benor .feat-meta .sep{color:var(--color-accent-gold)}
#lp-benor .feat-panel{position:relative;border-inline-start:2px solid var(--color-accent-gold);
  padding-block:var(--s-2);padding-inline:var(--x-feat-panel-padding-inline-1) 0;color:var(--color-text-main)}
#lp-benor .feat-panel .q{font-family:var(--font-display);font-size:var(--x-feat-panel-q-font-size);
  font-weight:500;line-height:var(--lh-quote);color:var(--color-primary-bg)}
#lp-benor .feat-panel .who{margin-top:var(--x-feat-panel-who-margin-top);font-size:var(--fs-meta);font-weight:600;color:var(--color-text-muted);line-height:var(--lh-small)}
#lp-benor .feat-panel .who b{color:var(--color-accent-gold-deep);font-weight:700}
#lp-benor .chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--x-chips-margin-bottom)}
#lp-benor .chip{font-size:var(--fs-meta);font-weight:600;color:var(--color-text-main);background:none;
  border:1px solid var(--color-border-subtle);border-radius:999px;padding:var(--s-2) var(--s-4);min-height:var(--tap);
  transition:border-color .2s,color .2s,background .2s;line-height:var(--lh-label)}
#lp-benor .chip:hover{border-color:var(--color-accent-gold);color:var(--color-accent-gold-deep)}
#lp-benor .chip[aria-pressed="true"]{background:var(--color-primary-bg);border-color:var(--color-primary-bg);color:#fff}
#lp-benor .post-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--x-post-grid-gap-1) var(--x-post-grid-gap-2)}
#lp-benor .post-card{position:relative;display:flex;flex-direction:column;
  border-top:1px solid var(--color-border-subtle);padding:var(--x-post-card-padding-1) 0 0}
#lp-benor .post-card::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:44px;height:2px;
  background:var(--color-accent-gold);transition:width .3s var(--ease-hover)}
#lp-benor .post-card:hover::before{width:88px}
#lp-benor .post-card.is-hidden{display:none}
#lp-benor .post-tag{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);
  margin-bottom:var(--s-4);line-height:var(--lh-label)}
#lp-benor .post-t{font-size:var(--step-1);font-weight:700;color:var(--color-primary-bg);margin-bottom:var(--s-3);
  line-height:var(--x-post-t-line-height);transition:color .2s}
#lp-benor .post-card:hover .post-t{color:var(--color-accent-gold-deep)}
#lp-benor .post-d{font-size:var(--step-0);color:var(--color-text-muted);line-height:var(--lh-snug);flex:1}
#lp-benor .post-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--x-post-foot-margin-top)}
#lp-benor .post-meta{font-size:var(--fs-meta);font-weight:600;color:var(--color-text-muted);line-height:var(--lh-label)}
#lp-benor .post-more{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-meta);font-weight:700;
  letter-spacing:0;color:var(--color-primary-bg);line-height:var(--lh-label)}
@media (max-width:980px){
  #lp-benor .featured{grid-template-columns:1fr}
  #lp-benor .post-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  #lp-benor .post-grid{grid-template-columns:1fr}
  #lp-benor .feat-panel{padding-inline-end:var(--s-6)}
}

/* ---- the author block and the related pair (single post) ---- */
#lp-benor .author-box{display:grid;grid-template-columns:auto 1fr;gap:var(--x-author-box-gap);align-items:center;
  border-top:1px solid var(--color-border-subtle);padding:var(--x-author-box-padding-1) 0 0;
  max-width:var(--maxw-narrow);margin-inline:auto}
#lp-benor .author-box .pic{width:92px;height:92px;border-radius:50%;overflow:hidden}
#lp-benor .author-box .pic img{width:100%;height:100%;object-fit:cover;object-position:center 10%}
#lp-benor .author-box .role{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .author-box h2{font-size:var(--x-author-box-h2-font-size);margin:var(--s-1) 0 var(--s-2);line-height:var(--lh-sub)}
#lp-benor .author-box p{font-size:var(--step-0);color:var(--color-text-muted);line-height:var(--lh-text);max-width:52ch}
#lp-benor .author-box .link{margin-top:var(--s-3);font-size:var(--fs-meta);font-weight:700;min-height:var(--tap)}
#lp-benor .author-box .link:hover{text-decoration:underline;text-underline-offset:3px}
#lp-benor .rel-head{max-width:var(--maxw-narrow);margin-inline:auto;margin-bottom:var(--x-rel-head-margin-bottom)}
#lp-benor .rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--x-rel-grid-gap);
  max-width:var(--maxw-narrow);margin-inline:auto}
#lp-benor .rel-grid .post-t{font-size:var(--x-rel-grid-post-t-font-size)}
#lp-benor .rel-grid .post-more{margin-top:var(--x-rel-grid-post-more-margin-top)}
@media (max-width:980px){#lp-benor .rel-grid{grid-template-columns:1fr}}
@media (max-width:600px){#lp-benor .author-box{grid-template-columns:1fr}}

/* ============================================================================
   18 — PROSE: the long-form RTL system (articles, privacy, accessibility)
   ============================================================================ */
#lp-benor .prose{max-width:var(--maxw-narrow);margin-inline:auto;font-size:var(--step-1);line-height:var(--x-prose-line-height);
  color:var(--color-text-main)}
#lp-benor .prose>*+*{margin-top:var(--x-prose-margin-top)}
#lp-benor .prose .intro{font-size:var(--step-1);color:var(--color-text-muted);line-height:var(--x-prose-intro-line-height)}
#lp-benor .prose h2{font-size:var(--step-3);margin-top:var(--x-prose-h2-margin-top);padding-top:var(--x-prose-h2-padding-top);position:relative;line-height:var(--lh-sub)}
#lp-benor .prose h2::before{content:"";position:absolute;top:0;inset-inline-start:0;width:56px;height:2px;
  background:var(--color-accent-gold);border-radius:1px}
#lp-benor .prose h3{font-size:var(--step-1);margin-top:var(--x-prose-h3-margin-top)}
#lp-benor .prose ul,#lp-benor .prose ol{display:flex;flex-direction:column;gap:var(--s-3);padding-inline-start:var(--s-1)}
#lp-benor .prose ul li{position:relative;padding-inline-start:var(--x-prose-ul-li-padding-inline-start)}
#lp-benor .prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:.8em;height:2px;
  background:var(--color-accent-gold);border-radius:1px}
#lp-benor .prose ol{counter-reset:po}
#lp-benor .prose ol li{position:relative;padding-inline-start:var(--x-prose-ol-li-padding-inline-start);counter-increment:po}
#lp-benor .prose ol li::before{content:counter(po,decimal);position:absolute;inset-inline-start:0;top:.18em;
  width:1.55em;height:1.55em;display:grid;place-items:center;font-size:.8em;font-weight:700;
  color:var(--color-accent-gold-deep);border:1px solid var(--color-gold-rule);border-radius:50%}
#lp-benor .prose b,#lp-benor .prose strong{font-weight:700;color:var(--color-primary-bg)}
#lp-benor .prose a:not(.btn){color:var(--color-accent-gold-deep);font-weight:600;
  border-bottom:1px solid var(--color-gold-rule);transition:color .2s,border-color .2s}
#lp-benor .prose a:not(.btn):hover{color:var(--color-primary-bg);border-bottom-color:var(--color-primary-bg)}
#lp-benor .prose blockquote{border-inline-start:3px solid var(--color-accent-gold);padding-inline-start:var(--x-prose-blockquote-padding-inline-start);
  margin-block:var(--x-prose-blockquote-margin-block);font-family:var(--font-display);font-size:var(--x-prose-blockquote-font-size);
  font-weight:500;line-height:var(--x-prose-blockquote-line-height);color:var(--color-primary-bg)}
#lp-benor .prose blockquote footer{margin-top:var(--s-3);font-family:var(--font-family-base);font-size:var(--fs-meta);
  font-weight:600;color:var(--color-text-muted);line-height:var(--lh-small)}
#lp-benor .prose .callout{background:#F9F6EF;border:1px solid var(--color-gold-rule);
  border-inline-start:3px solid var(--color-accent-gold);border-radius:var(--r);padding:var(--x-prose-callout-padding-1) var(--x-prose-callout-padding-2);margin-block:var(--x-prose-callout-margin-block)}
#lp-benor .prose .callout .callout-t{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);margin-bottom:var(--s-2);line-height:var(--lh-label)}
#lp-benor .prose .callout .callout-t svg{width:16px;height:16px;flex:0 0 auto}
#lp-benor .prose .callout p{font-size:var(--step-0);line-height:var(--x-prose-callout-p-line-height)}
/* overflow-x on the wrap is the no-JS fallback; with JS the inner .table-scroll
   scrolls and the wrap clips so the fade cue can sit on its edge */
#lp-benor .prose .table-wrap{overflow-x:auto;margin-block:var(--x-prose-table-wrap-margin-block);
  border:1px solid var(--color-border-subtle);border-radius:var(--r)}
#lp-benor .prose .table-wrap--cue{overflow:hidden;position:relative}
#lp-benor .prose .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#lp-benor .prose .table-wrap--cue::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:56px;
  pointer-events:none;background:linear-gradient(to right,rgba(28,36,54,.22),rgba(28,36,54,0));
  opacity:0;transition:opacity .25s}
#lp-benor .prose .table-wrap--cue.has-more::after{opacity:1}
#lp-benor .prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--step-0);line-height:var(--lh-display);
  background:var(--color-surface-alt)}
#lp-benor .prose th{background:var(--color-primary-bg);color:#fff;font-weight:700;text-align:start;
  padding:var(--s-4) var(--s-4);font-size:var(--step-0);letter-spacing:0}
#lp-benor .prose td{padding:var(--s-4) var(--s-4);border-top:1px solid var(--color-border-subtle);vertical-align:top}
#lp-benor .prose tbody tr:nth-child(even) td{background:var(--color-surface-warm)}
#lp-benor .prose td:first-child{font-weight:700;color:var(--color-primary-bg);white-space:nowrap}
#lp-benor .prose .inline-cta{background:var(--color-surface);border:1px solid var(--color-border-subtle);
  border-radius:var(--r-card);border-inline-start:3px solid var(--color-accent-gold);
  padding:var(--s-6) var(--x-prose-inline-cta-padding-2);margin-block:var(--x-prose-inline-cta-margin-block);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--x-prose-inline-cta-gap)}
#lp-benor .prose .inline-cta p{color:var(--color-primary-bg);font-weight:600;font-size:var(--step-0);max-width:32ch;margin:0;line-height:var(--lh-snug)}
#lp-benor .prose .inline-cta .small{display:block;margin-top:var(--s-1);color:var(--color-text-muted);font-weight:500}
#lp-benor .prose .inline-cta .btn{flex:0 0 auto}
#lp-benor .prose .note{font-size:var(--fs-meta);color:var(--color-text-muted);border-top:1px solid var(--color-border-subtle);
  padding-top:var(--x-prose-note-padding-top);margin-top:var(--x-prose-note-margin-top);line-height:var(--lh-small)}
@media (max-width:600px){
  #lp-benor .prose .inline-cta{flex-direction:column;align-items:flex-start;padding:1.4rem 1.3rem}
  /* a long word in a narrow column must wrap rather than push the page sideways */
  #lp-benor .prose .inline-cta .btn{white-space:normal;text-align:center;max-width:100%}
}
@media (max-width:400px){
  #lp-benor .prose .inline-cta{padding:var(--s-6) var(--s-4)}
  #lp-benor .prose .inline-cta .btn{padding-inline:var(--s-4)}
}

/* ============================================================================
   19 — FOOTER
   ============================================================================ */
#lp-benor .footer{background:var(--color-primary-deep);color:var(--color-text-on-primary-muted);
  padding-block:var(--x-footer-padding-block-1) var(--x-footer-padding-block-2);border-top:1px solid var(--color-gold-rule)}
#lp-benor .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-2xl)}
#lp-benor .footer h4{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold);
  margin-bottom:var(--s-4);line-height:var(--lh-label)}
#lp-benor .footer a{color:var(--color-text-on-primary-muted);font-size:var(--fs-meta);display:inline-flex;
  align-items:center;min-height:var(--tap);padding:var(--s-1) 0;transition:color .2s}
#lp-benor .footer a:hover{color:#fff}
#lp-benor .footer li{margin-bottom:var(--s-1);font-size:var(--fs-meta);line-height:var(--lh-small)}
#lp-benor .footer .brand-name{color:#fff;font-size:var(--step-1);font-weight:800}
#lp-benor .footer-intro{margin-top:var(--s-3);max-width:34ch;line-height:var(--lh-text)}
#lp-benor .footer-logo{height:52px;width:auto;margin-bottom:var(--s-4);opacity:.92}
#lp-benor .footer-bottom{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  margin-top:var(--x-footer-bottom-margin-top);padding-top:var(--x-footer-bottom-padding-top);border-top:1px solid var(--color-border-on-dark);font-size:var(--fs-label);line-height:var(--lh-small)}
#lp-benor .footer-bottom .links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
#lp-benor .cookie-link{border:0;background:none;padding:var(--s-1) 0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;min-height:var(--tap);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease-hover)}
#lp-benor .cookie-link:hover{border-bottom-color:currentColor}
@media (max-width:980px){#lp-benor .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){#lp-benor .footer-grid{grid-template-columns:1fr;gap:var(--s-8)}}

/* ============================================================================
   20 — MOTION
   ============================================================================ */
/* Content never depends on JavaScript to be seen. Hidden reveals come back on their own after 2.5s (the fail-safe
   animation); benor.js adds .is-motion when the scroll reveals really run, and only then does it hold them back. A
   visitor whose scripts fail, are blocked or arrive late sees the whole page, only without the motion. */
#lp-benor [data-reveal]{opacity:0;transform:translateY(var(--dist-reveal,50px));
  animation:benor-reveal-failsafe .6s var(--ease-reveal) 2.5s forwards}
#lp-benor.is-motion [data-reveal]{animation:none}
@keyframes benor-reveal-failsafe{to{opacity:1;transform:none}}
#lp-benor.is-ready [data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s var(--ease-reveal),transform .6s var(--ease-reveal)}
@media (prefers-reduced-motion:reduce){
  #lp-benor *{animation:none !important}
  #lp-benor [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ============================================================================
   21 — THE OVERLAY LAYER (rebuilt 2026-09-18)
   The contact dock (start side), the accessibility tools (end side) and the
   cookie notice (bottom centre). One vocabulary for all three: a white card
   with a 2px gold top edge, a navy head, full-bleed hairline rows, 4px radii,
   the system's easings, one switch component. Every value is a system token or
   a widget token declared here — no loose hex, no loose duration.
   ============================================================================ */
#lp-benor{
  --w-inset: clamp(16px, 1.5vw, 24px); /* one distance from the viewport edge */
  --w-fab: 56px;
  --w-panel: 360px;
  --w-gap: 12px;                       /* launcher -> panel */
  --w-pad: 18px;                       /* panel inline padding, one number */
  --w-lift: 0px;                       /* raised by the cookie card where they would collide */
  --w-dur: .2s;
  --w-sw-w: 40px; --w-sw-h: 22px; --w-sw-knob: 16px; --w-sw-gap: 3px;
  --w-sw-travel: calc(var(--w-sw-w) - var(--w-sw-knob) - 2*var(--w-sw-gap));
  --w-sw-off: #8A857C;                 /* 3.4:1 on white — WCAG 1.4.11 */
  /* elevation in the system's two-layer grammar: a tight contact shadow plus a
     controlled ambient with negative spread, not one soft blur */
  --w-shadow-fab:   0 2px 5px rgba(39,47,63,.16), 0 10px 22px -8px rgba(39,47,63,.32);
  --w-shadow-fab-h: 0 3px 7px rgba(39,47,63,.18), 0 15px 30px -10px rgba(39,47,63,.38);
  --w-shadow-panel: 0 1px 2px rgba(39,47,63,.06), 0 18px 44px -14px rgba(39,47,63,.28);
  /* WhatsApp's own green (firm, 2026-10-13), for the floating launcher and the top-bar CTA; navy text on it is
     7.86:1 (hover 6.30:1); the white glyph is WhatsApp's logotype */
  --w-wa: #25D366;
  --w-wa-h: #20BD5A;
  --w-wa-edge: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ---- the two launcher columns ---- */
#lp-benor .benor-dock,
#lp-benor .benor-a11y{position:fixed;z-index:9000;bottom:calc(var(--w-inset) + var(--w-lift));
  display:flex;flex-direction:column;gap:var(--s-3)}
#lp-benor .benor-dock{inset-inline-start:var(--w-inset);align-items:flex-start}
#lp-benor .benor-a11y{inset-inline-end:var(--w-inset);align-items:flex-end}
/* a closed column keeps its panel's box (360 wide, up to ~575 tall at desktop) above the launcher; only the
   launcher and an open panel take clicks, so the page under a closed column stays clickable (2026-10-15) */
#lp-benor .benor-dock,#lp-benor .benor-a11y{pointer-events:none}
#lp-benor .dock-fab,#lp-benor .a11y-fab,
#lp-benor .benor-dock.is-open .dock-panel,#lp-benor .benor-a11y.is-open .a11y-panel{pointer-events:auto}

/* the two launchers do nothing without benor.js, so they appear once it runs (CE-10e); the WhatsApp launcher is a
   plain link and stays */
#lp-benor:not(.is-ready) .benor-dock,#lp-benor:not(.is-ready) .benor-a11y{visibility:hidden}

/* ---- launchers ---- */
#lp-benor .dock-fab,
#lp-benor .a11y-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:var(--w-fab);min-width:var(--w-fab);padding:0;border:0;border-radius:999px;
  background:var(--color-primary-bg);color:var(--color-text-on-primary);cursor:pointer;
  box-shadow:var(--w-shadow-fab),inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background-color var(--w-dur) var(--ease-hover),
             box-shadow var(--w-dur) var(--ease-hover),
             transform var(--w-dur) var(--ease-hover)}
#lp-benor .dock-fab{padding-inline:var(--x-dock-fab-padding-inline-1) var(--x-dock-fab-padding-inline-2)}
#lp-benor .a11y-fab{width:var(--w-fab)}
#lp-benor .dock-fab:hover,#lp-benor .a11y-fab:hover{background:var(--color-primary-raise);
  box-shadow:var(--w-shadow-fab-h),inset 0 0 0 1px rgba(255,255,255,.14);transform:translateY(-1px)}
#lp-benor .dock-fab:active,#lp-benor .a11y-fab:active{transform:translateY(0);
  box-shadow:var(--w-shadow-fab),inset 0 0 0 1px rgba(255,255,255,.10)}
/* open = pressed in: the deepest navy and the resting shadow. The launcher never
   changes size, so nothing jumps and the label stays readable. */
#lp-benor .benor-dock.is-open .dock-fab,
#lp-benor .benor-a11y.is-open .a11y-fab{background:var(--color-primary-deep);
  box-shadow:var(--w-shadow-fab),inset 0 0 0 1px rgba(255,255,255,.16);transform:none}
#lp-benor .dock-fab-label{font-family:var(--font-display);font-size:var(--step-0);font-weight:700;
  letter-spacing:-.005em;white-space:nowrap}
/* the chat glyph turns into the close glyph by crossfade, not by display swap */
#lp-benor .dock-fab-ic{position:relative;flex:0 0 auto;width:24px;height:24px}
#lp-benor .dock-fab-ic svg{position:absolute;inset:0;
  transition:opacity .18s var(--ease-hover),transform .22s var(--ease-hover)}
#lp-benor .dock-fab-ic .ic-x{opacity:0;transform:rotate(-90deg) scale(.7)}
#lp-benor .benor-dock.is-open .dock-fab-ic .ic-chat{opacity:0;transform:rotate(90deg) scale(.7)}
#lp-benor .benor-dock.is-open .dock-fab-ic .ic-x{opacity:1;transform:none}

/* ---- the WhatsApp launcher: a green circle one step above the dock launcher, on every page (footer.php).
   It steps aside while the dock is open; a page that carries its own launcher (the landing pages) keeps its own. ---- */
#lp-benor .wa-fab{position:fixed;z-index:9001;inset-inline-start:var(--w-inset);
  bottom:calc(var(--w-inset) + var(--w-lift) + var(--w-fab) + var(--s-3));
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--w-fab);height:var(--w-fab);padding:0;border:0;border-radius:999px;
  background:var(--w-wa);color:#fff;text-decoration:none;cursor:pointer;
  box-shadow:var(--w-shadow-fab),var(--w-wa-edge);
  transition:background-color var(--w-dur) var(--ease-hover),box-shadow var(--w-dur) var(--ease-hover),
             transform var(--w-dur) var(--ease-hover),opacity var(--w-dur) var(--ease-hover)}
#lp-benor .wa-fab:hover{background:var(--w-wa-h);box-shadow:var(--w-shadow-fab-h),var(--w-wa-edge);transform:translateY(-1px)}
#lp-benor .wa-fab:active{transform:translateY(0);box-shadow:var(--w-shadow-fab),var(--w-wa-edge)}
#lp-benor .wa-fab-ic{flex:0 0 auto;width:30px;height:30px;fill:#fff}
#lp-benor .benor-dock.is-open ~ .wa-fab{opacity:0;pointer-events:none}
#lp-benor:has(main .v-wa) .wa-fab{display:none}
@media (max-width:600px){
  #lp-benor .wa-fab-ic{width:28px;height:28px}
}

/* ---- the shared panel card ----
   No overflow:hidden: a focus ring on the first or last control used to be
   clipped by it. The head and the foot round their own corners instead. */
#lp-benor .dock-panel,
#lp-benor .a11y-panel{position:relative;width:min(var(--w-panel),calc(100vw - 2*var(--w-inset)));
  background:var(--color-surface-alt);border:1px solid var(--color-border-subtle);
  border-top:2px solid var(--color-accent-gold);border-radius:var(--r);
  box-shadow:var(--w-shadow-panel);
  max-height:max(200px,calc(100svh - var(--w-inset)*2 - var(--w-fab) - var(--w-gap) - var(--w-lift) - 12px));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .15s var(--ease-hover),transform .15s var(--ease-hover)}
#lp-benor .benor-dock .dock-panel{transform-origin:bottom right} /* RTL: the dock sits on the right */
#lp-benor .benor-a11y .a11y-panel{transform-origin:bottom left}  /* RTL: the tools sit on the left */
#lp-benor .benor-dock.is-open .dock-panel,
#lp-benor .benor-a11y.is-open .a11y-panel{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .2s var(--ease-reveal),transform .24s var(--ease-reveal)}
#lp-benor .dock-panel:focus,#lp-benor .a11y-panel:focus{outline:0}

/* ---- panel head ---- */
#lp-benor .w-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);background:var(--color-primary-bg);color:var(--color-text-on-primary);
  border-start-start-radius:3px;border-start-end-radius:3px}
#lp-benor .w-head-t{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
#lp-benor .w-title{font-family:var(--font-display);font-size:var(--step-0);font-weight:700;line-height:var(--x-w-title-line-height)}
#lp-benor .w-sub{font-size:var(--fs-meta);line-height:var(--lh-small);color:var(--color-text-on-primary-muted)}
#lp-benor .w-close{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--r);
  background:transparent;color:inherit;cursor:pointer;transition:background-color var(--w-dur) var(--ease-hover)}
#lp-benor .w-close:hover{background:rgba(255,255,255,.12)}
#lp-benor .w-close .w-ic{width:18px;height:18px;color:inherit}
#lp-benor .w-close:focus-visible{outline-color:var(--color-accent-gold-lift)}

/* ---- panel rows: full-bleed hairlines, a grid so icon/text/chevron align exactly ---- */
#lp-benor .w-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:var(--s-3);
  width:100%;padding:var(--s-3) var(--s-5);border:0;border-top:1px solid var(--color-border-subtle);
  background:transparent;color:var(--color-text-main);text-align:start;cursor:pointer;
  transition:background-color var(--w-dur) var(--ease-hover)}
#lp-benor .w-row:hover{background:var(--color-surface)}
#lp-benor .w-row:focus-visible{outline-offset:-2px}
#lp-benor .w-ic{width:22px;height:22px;flex:0 0 auto;color:var(--color-accent-gold-deep);
  transition:color var(--w-dur) var(--ease-hover)}
#lp-benor .w-row-t{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);min-width:0;max-width:100%}
#lp-benor .w-row-t b{font-size:var(--step-0);font-weight:600;line-height:var(--x-w-row-t-b-line-height)}
#lp-benor .w-row-t span{font-size:var(--fs-meta);line-height:var(--x-w-row-t-span-line-height);color:var(--color-text-muted)}
#lp-benor .w-chev{width:16px;height:16px;flex:0 0 auto;color:var(--color-text-muted);
  transition:transform var(--w-dur) var(--ease-hover),color var(--w-dur) var(--ease-hover)}
#lp-benor .w-row:hover .w-chev{transform:translateX(-3px);color:var(--color-primary-bg)} /* RTL: forward is -X */

/* ---- the dock ---- */
#lp-benor .dock-msg{width:fit-content;max-width:88%;margin-block:var(--s-5) var(--s-4);margin-inline:var(--s-5) 0;
  padding:var(--s-2) var(--s-3);background:var(--color-surface);border:1px solid var(--color-border-subtle);
  border-radius:var(--r);border-start-end-radius:0; /* RTL: the square corner points back at the head */
  font-size:var(--step--1);line-height:var(--lh-display);color:var(--color-text-main);text-wrap:balance}
#lp-benor .dock-note{margin:0;padding:var(--s-3) var(--s-5) var(--s-3);background:var(--color-surface);
  border-top:1px solid var(--color-border-subtle);font-size:var(--fs-meta);line-height:var(--lh-small);
  color:var(--color-text-muted);border-end-start-radius:3px;border-end-end-radius:3px}

/* ---- accessibility: the text-size control, four real steps ---- */
#lp-benor .a11y-size{padding:var(--s-5) var(--s-5) var(--s-4)}
#lp-benor .a11y-size-l{display:block;margin-bottom:var(--s-2);font-size:var(--fs-meta);font-weight:600;color:var(--color-text-main);line-height:var(--lh-label)}
#lp-benor .a11y-steps{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--color-border-subtle);border-radius:var(--r);overflow:hidden}
#lp-benor .a11y-step{height:40px;padding:0;border:0;border-inline-start:1px solid var(--color-border-subtle);
  background:var(--color-surface-alt);color:var(--color-text-muted);
  font-family:var(--font-family-base);font-size:var(--step--1);font-weight:600;line-height:var(--x-a11y-step-line-height);
  font-variant-numeric:tabular-nums;direction:ltr;cursor:pointer;
  transition:background-color var(--w-dur) var(--ease-hover),color var(--w-dur) var(--ease-hover)}
#lp-benor .a11y-step:first-child{border-inline-start:0}
#lp-benor .a11y-step:hover{background:var(--color-surface);color:var(--color-text-main)}
#lp-benor .a11y-step[aria-checked="true"]{background:var(--color-primary-bg);color:var(--color-text-on-primary)}
#lp-benor .a11y-step:focus-visible{outline-offset:-3px} /* the group clips, so the ring goes inside */

/* ---- accessibility: the switch rows ---- */
#lp-benor .a11y-opt{font-weight:500;font-size:var(--fs-meta);line-height:var(--x-a11y-opt-line-height)}
#lp-benor .a11y-opt .w-ic{color:var(--color-text-muted)}
#lp-benor .a11y-opt[aria-pressed="true"] .w-ic{color:var(--color-accent-gold-deep)}

/* ---- the one switch, shared by the tools and the cookie card ---- */
#lp-benor .w-switch{position:relative;flex:0 0 auto;display:block;
  width:var(--w-sw-w);height:var(--w-sw-h);border-radius:999px;background:var(--w-sw-off);
  transition:background-color var(--w-dur) var(--ease-hover)}
#lp-benor .w-switch::after{content:"";position:absolute;top:var(--w-sw-gap);inset-inline-start:var(--w-sw-gap);
  width:var(--w-sw-knob);height:var(--w-sw-knob);border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(39,47,63,.28);transition:transform var(--w-dur) var(--ease-hover)}
#lp-benor [aria-pressed="true"]>.w-switch,
#lp-benor [aria-pressed="true"] .w-switch{background:var(--color-primary-bg)}
#lp-benor [aria-pressed="true"]>.w-switch::after,
#lp-benor [aria-pressed="true"] .w-switch::after{transform:translateX(calc(-1 * var(--w-sw-travel)))} /* RTL */

/* ---- accessibility: the foot ---- */
#lp-benor .a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);background:var(--color-surface);border-top:1px solid var(--color-border-subtle);
  border-end-start-radius:3px;border-end-end-radius:3px}
#lp-benor .a11y-reset{padding:var(--s-2) var(--s-3);border:1px solid var(--color-border-subtle);border-radius:var(--r);
  background:var(--color-surface-alt);font-family:var(--font-family-base);font-size:var(--fs-meta);font-weight:600;
  color:var(--color-primary-bg);cursor:pointer;
  transition:border-color var(--w-dur) var(--ease-hover),background-color var(--w-dur) var(--ease-hover);line-height:var(--lh-label)}
#lp-benor .a11y-reset:hover{border-color:var(--color-border-strong);background:rgba(49,61,82,.04)}
#lp-benor .a11y-link{display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-meta);font-weight:600;color:var(--color-primary-bg);
  border-bottom:1px solid var(--color-gold-rule);transition:border-color .2s var(--ease-hover);line-height:var(--lh-label)}
#lp-benor .a11y-link:hover{border-bottom-color:var(--color-primary-bg)}
#lp-benor .w-live{position:absolute;width:1px;height:1px;margin:var(--x-w-live-margin);padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* a scrolling overlay gets a hairline scrollbar in the system's own colours, not
   the platform's grey slab across the card edge (in high contrast it turns black) */
#lp-benor .dock-panel,#lp-benor .a11y-panel,#lp-benor .cookie-card{
  scrollbar-width:thin;scrollbar-color:var(--color-border-subtle) transparent}
#lp-benor .dock-panel::-webkit-scrollbar,#lp-benor .a11y-panel::-webkit-scrollbar,
#lp-benor .cookie-card::-webkit-scrollbar{width:8px}
#lp-benor .dock-panel::-webkit-scrollbar-track,#lp-benor .a11y-panel::-webkit-scrollbar-track,
#lp-benor .cookie-card::-webkit-scrollbar-track{background:transparent}
#lp-benor .dock-panel::-webkit-scrollbar-thumb,#lp-benor .a11y-panel::-webkit-scrollbar-thumb,
#lp-benor .cookie-card::-webkit-scrollbar-thumb{background:var(--color-border-subtle);
  border-radius:999px;border:2px solid transparent;background-clip:content-box}

/* ---- phone: the panels become sheets above their launcher ---- */
@media (max-width:600px){
  #lp-benor{--w-fab:52px}
  #lp-benor .dock-fab{width:var(--w-fab);padding:0}
  #lp-benor .dock-fab-label{display:none}
  #lp-benor .dock-panel,#lp-benor .a11y-panel{position:fixed;inset-inline:var(--w-inset);width:auto;
    bottom:calc(var(--w-inset) + var(--w-fab) + var(--w-gap) + var(--w-lift))}
}

/* ---- cookie notice ---- */
#lp-benor .benor-cookie{position:fixed;z-index:9100;inset-inline:0;bottom:var(--w-inset);
  display:flex;justify-content:center;padding-inline:var(--w-inset);pointer-events:none}
#lp-benor .benor-cookie[hidden]{display:none}
#lp-benor .cookie-card{pointer-events:auto;width:min(640px,100%);background:var(--color-surface-alt);
  border:1px solid var(--color-border-subtle);border-top:2px solid var(--color-accent-gold);
  border-radius:var(--r);box-shadow:var(--w-shadow-panel);
  max-height:calc(100svh - var(--w-inset)*2);overflow-y:auto;overscroll-behavior:contain;
  animation:benor-cookie-in .3s var(--ease-reveal) both}
@keyframes benor-cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#lp-benor .cookie-top{display:flex;align-items:flex-start;gap:clamp(16px,2.2vw,28px);
  padding:clamp(16px,1.5vw,19px) clamp(17px,1.6vw,21px)}
#lp-benor .cookie-main{flex:1 1 auto;min-width:0}
#lp-benor .cookie-t{margin:0 0 .3rem;font-family:var(--font-display);font-size:1rem;font-weight:700;
  line-height:1.35;color:var(--color-primary-bg)}
#lp-benor .cookie-d{margin:0;font-size:var(--fs-meta);line-height:var(--lh-small);color:var(--color-text-muted)}
#lp-benor .cookie-d a{color:var(--color-primary-bg);font-weight:600;
  border-bottom:1px solid var(--color-gold-rule);transition:border-color .2s var(--ease-hover)}
#lp-benor .cookie-d a:hover{border-bottom-color:var(--color-primary-bg)}
/* padded to a 24px target; the optical gap is kept by the negative margin */
#lp-benor .cookie-more{display:inline-flex;align-items:center;gap:6px;
  margin-block:calc(.6rem - 4px) -4px;margin-inline:0;padding:4px 0;border:0;
  background:none;font-family:var(--font-family-base);font-size:.84rem;font-weight:600;
  color:var(--color-primary-bg);cursor:pointer}
#lp-benor .cookie-more span{border-bottom:1px solid var(--color-gold-rule);
  transition:border-color .2s var(--ease-hover)}
#lp-benor .cookie-more:hover span{border-bottom-color:var(--color-primary-bg)}
#lp-benor .cookie-more svg{width:12px;height:12px;transition:transform .26s var(--ease-reveal)}
#lp-benor .cookie-more[aria-expanded="true"] svg{transform:rotate(180deg)}
#lp-benor .cookie-acts{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}
#lp-benor .cookie-acts .btn{min-height:44px;padding-block:0;padding-inline:1.15rem;font-size:.9rem;
  white-space:nowrap;justify-content:center}
/* the details drawer opens by height, so the card never snaps taller under the
   reader. Measured in JS, the same mechanism the FAQ accordion uses — the
   0fr->1fr grid technique latches at zero inside a [hidden] wrapper. */
#lp-benor .cookie-cats{height:0;overflow:hidden;visibility:hidden;
  transition:height .28s var(--ease-reveal),visibility 0s linear .28s}
#lp-benor .cookie-cats.is-open{visibility:visible;transition:height .28s var(--ease-reveal),visibility 0s}
#lp-benor .cookie-cat{display:flex;align-items:center;gap:16px;padding:12px clamp(17px,1.6vw,21px);
  border-top:1px solid var(--color-border-subtle)}
#lp-benor .cookie-cat-t{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:var(--fs-meta);font-weight:600;line-height:1.35;color:var(--color-text-main)}
#lp-benor .cookie-cat-t span{font-size:var(--fs-label);font-weight:400;line-height:1.45;color:var(--color-text-muted)}
#lp-benor .cookie-always{margin-inline-start:auto;flex:0 0 auto;font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);white-space:nowrap;line-height:var(--lh-label)}
/* the switch reads 40x22, but the control it belongs to has to be at least 24px
   tall for WCAG 2.5.8 — the padding grows the target without touching the drawing */
#lp-benor .cookie-sw{margin-inline-start:auto;padding:6px 0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
#lp-benor .cookie-sw:focus-visible{outline-offset:0}
#lp-benor .cookie-save-row{display:flex;justify-content:flex-end;
  padding:12px clamp(17px,1.6vw,21px);border-top:1px solid var(--color-border-subtle);
  background:var(--color-surface);border-end-start-radius:3px;border-end-end-radius:3px}
#lp-benor .cookie-save{min-height:40px;padding-inline:1.1rem;font-size:.87rem}
@media (max-width:760px){
  #lp-benor .cookie-top{flex-direction:column;gap:14px}
  #lp-benor .cookie-acts{flex-direction:row;width:100%}
  #lp-benor .cookie-acts .btn{flex:1 1 0;padding-inline:.7rem}
}
/* the notice is 640px centred; below ~2*(320 + launcher + inset) it reaches the
   launchers, so they step above it for as long as it is showing */
@media (max-width:1000px){
  #lp-benor{--w-lift:min(var(--benor-cookie-h,0px),40svh)}
}

/* ---- print: the overlay layer is screen furniture ---- */
@media print{
  #lp-benor .benor-dock,#lp-benor .benor-a11y,#lp-benor .benor-cookie,#lp-benor .wa-fab{display:none}
}
/* ---- reduced motion: the overlays appear, they do not perform ---- */
@media (prefers-reduced-motion:reduce){
  #lp-benor .dock-panel,#lp-benor .a11y-panel,#lp-benor .cookie-card,
  #lp-benor .dock-fab,#lp-benor .a11y-fab,#lp-benor .w-row,#lp-benor .w-chev,
  #lp-benor .w-switch,#lp-benor .w-switch::after,#lp-benor .cookie-cats,
  #lp-benor .dock-fab-ic svg,#lp-benor .cookie-more svg,#lp-benor .wa-fab{
    transition-duration:.01ms;animation-duration:.01ms}
  #lp-benor .dock-fab:hover,#lp-benor .a11y-fab:hover,#lp-benor .wa-fab:hover{transform:none}
}

/* ============================================================================
   22 — WHAT THE ACCESSIBILITY SWITCHES DO
   ============================================================================ */
/* text size: the wrapper's own font-size has to scale too, or every plain <p>
   inside it stays at 17px and the control does almost nothing */
html[data-a11y-scale]{font-size:calc(16px * var(--a11y-scale,1))}
#lp-benor{font-size:var(--step-0)}

html[data-a11y-font="1"] #lp-benor{--font-family-base:Arial,"Segoe UI",system-ui,sans-serif;
  --font-display:Arial,"Segoe UI",system-ui,sans-serif}
html[data-a11y-font="1"] #lp-benor .ticker{display:none}

html[data-a11y-spacing="1"] #lp-benor p,
html[data-a11y-spacing="1"] #lp-benor li,
html[data-a11y-spacing="1"] #lp-benor .lead{line-height:2;letter-spacing:.012em;word-spacing:.12em}

html[data-a11y-links="1"] #lp-benor main a:not(.btn):not(.w-row):not(.a11y-link),
html[data-a11y-links="1"] #lp-benor .footer a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;background:var(--color-accent-gold-soft);
  box-shadow:0 0 0 2px var(--color-accent-gold-soft)}

html[data-a11y-motion="1"] #lp-benor *,
html[data-a11y-motion="1"] #lp-benor *::before,
html[data-a11y-motion="1"] #lp-benor *::after{animation:none !important;transition:none !important;
  scroll-behavior:auto !important}
/* the blanket above also stops the reveal fail-safe (section 20), so the switch shows the reveals itself, as the
   reduced-motion query does; otherwise they stay at opacity 0 until benor.js runs (audit CE-10a, 2026-10-15) */
html[data-a11y-motion="1"] #lp-benor [data-reveal]{opacity:1 !important;transform:none !important}

html[data-a11y-cursor="1"],html[data-a11y-cursor="1"] #lp-benor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M8 4l26 15-11 3-4.6 12z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,auto}
html[data-a11y-cursor="1"] #lp-benor a,html[data-a11y-cursor="1"] #lp-benor button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M16 6a3 3 0 016 0v12l3-2a3 3 0 014 3l-1 10a6 6 0 01-6 5h-6a6 6 0 01-5-3l-5-9a3 3 0 015-3l2 3z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 4,pointer}

/* ---- high contrast: a real repaint, black on white, no colour left to carry meaning ---- */
html[data-a11y-contrast="1"] #lp-benor{--color-surface:#fff;--color-surface-alt:#fff;--color-surface-dim:#fff;
  --color-surface-warm:#fff;--color-text-main:#000;--color-text-muted:#1B1B1B;--color-primary-bg:#000;
  --color-primary-bg-soft:#000;--color-primary-deep:#000;--color-primary-raise:#1B1B1B;
  --color-accent-gold:#000;--color-accent-gold-deep:#000;--color-accent-gold-lift:#fff;
  --color-border-subtle:#000;--color-border-field:#000;--color-gold-rule:#000;--color-text-on-accent:#000;
  --color-text-on-primary-muted:#fff;--w-sw-off:#fff;
  --w-shadow-fab:0 0 0 1px #000;--w-shadow-fab-h:0 0 0 2px #000;--w-shadow-panel:0 0 0 1px #000}
html[data-a11y-contrast="1"] #lp-benor,
html[data-a11y-contrast="1"] #lp-benor .section,
html[data-a11y-contrast="1"] #lp-benor .section--white,
html[data-a11y-contrast="1"] #lp-benor .section--dim{background:#fff;color:#000}
html[data-a11y-contrast="1"] #lp-benor .hero-portrait,
html[data-a11y-contrast="1"] #lp-benor .midcta-bg,
html[data-a11y-contrast="1"] #lp-benor .svc-img,
html[data-a11y-contrast="1"] #lp-benor .about-img,
html[data-a11y-contrast="1"] #lp-benor .att-photo{display:none}
html[data-a11y-contrast="1"] #lp-benor .hero,
html[data-a11y-contrast="1"] #lp-benor .page-hero,
html[data-a11y-contrast="1"] #lp-benor .midcta,
html[data-a11y-contrast="1"] #lp-benor .footer,
html[data-a11y-contrast="1"] #lp-benor .nav{background:#000;color:#fff}
/* .nav has to be in this list: the brand sub-line is --color-text-muted, which
   the repaint turns near-black, and the bar itself turns black */
html[data-a11y-contrast="1"] #lp-benor .hero *,
html[data-a11y-contrast="1"] #lp-benor .page-hero *,
html[data-a11y-contrast="1"] #lp-benor .midcta *,
html[data-a11y-contrast="1"] #lp-benor .nav *,
html[data-a11y-contrast="1"] #lp-benor .footer *{color:#fff}
html[data-a11y-contrast="1"] #lp-benor .btn,
html[data-a11y-contrast="1"] #lp-benor .ff-btn-submit{background:#fff;color:#000;border:2px solid #000}
html[data-a11y-contrast="1"] #lp-benor .btn:hover,
html[data-a11y-contrast="1"] #lp-benor .ff-btn-submit:hover{background:#000;color:#fff}
/* the overlay layer */
html[data-a11y-contrast="1"] #lp-benor .w-head,
html[data-a11y-contrast="1"] #lp-benor .dock-fab,
html[data-a11y-contrast="1"] #lp-benor .a11y-fab{background:#000;color:#fff;
  box-shadow:0 0 0 1px #fff,0 0 0 3px #000}
/* the WhatsApp launcher turns black like the other two; the glyph stays white */
html[data-a11y-contrast="1"] #lp-benor .wa-fab{background:#000;color:#fff;box-shadow:0 0 0 1px #fff,0 0 0 3px #000}
html[data-a11y-contrast="1"] #lp-benor .wa-fab:hover{background:var(--color-primary-raise)}
/* the green top-bar CTA returns to the high-contrast button (it outranks the .btn rule above) */
html[data-a11y-contrast="1"] #lp-benor .nav .nav-right .btn--primary{background:#fff;color:#000;border-color:#000}
html[data-a11y-contrast="1"] #lp-benor .nav .nav-right .btn--primary:hover{background:#000;color:#fff;border-color:#000}
/* the glyph follows the button (the .nav * rule above would paint it white on white) */
html[data-a11y-contrast="1"] #lp-benor .nav .nav-right .nav-wa-ic,
html[data-a11y-contrast="1"] #lp-benor .nav .nav-right .nav-wa-ic path{color:inherit}
html[data-a11y-contrast="1"] #lp-benor .dock-panel,
html[data-a11y-contrast="1"] #lp-benor .a11y-panel,
html[data-a11y-contrast="1"] #lp-benor .cookie-card{border:1px solid #000;border-top:2px solid #000}
html[data-a11y-contrast="1"] #lp-benor .w-row:hover,
html[data-a11y-contrast="1"] #lp-benor .a11y-step:hover{background:#000;color:#fff}
html[data-a11y-contrast="1"] #lp-benor .w-row:hover .w-ic,
html[data-a11y-contrast="1"] #lp-benor .w-row:hover .w-chev,
html[data-a11y-contrast="1"] #lp-benor .w-row:hover .w-row-t span{color:#fff}
/* the switch keeps its meaning without colour: hollow track when off, solid when on */
html[data-a11y-contrast="1"] #lp-benor .w-switch{background:#fff;box-shadow:inset 0 0 0 2px #000}
html[data-a11y-contrast="1"] #lp-benor .w-switch::after{background:#000;box-shadow:none}
html[data-a11y-contrast="1"] #lp-benor [aria-pressed="true"] .w-switch{background:#000;box-shadow:none}
html[data-a11y-contrast="1"] #lp-benor [aria-pressed="true"] .w-switch::after{background:#fff}
html[data-a11y-contrast="1"] #lp-benor .a11y-opt[aria-pressed="true"] .w-ic{color:#000}

/* ============================================================================
   23 — WP / THEME NEUTRALISATION
   The canvas bypasses the theme's chrome, but two pieces of it survive in the
   markup; and the admin bar shifts a fixed header for logged-in editors.
   ============================================================================ */
#ast-scroll-top{display:none !important}
body.admin-bar #lp-benor .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar #lp-benor .nav{top:46px}}

/* ============================================================================
   24 — HOME: the video-first page (staging draft 115, the home page from 2026-10-15)
   Moved here from the page's two inline <style> blocks, unchanged in value and order;
   last in the file, so the cascade is the one the page had.
   ============================================================================ */
/* the video hero, the headline block and the three text cards */
#lp-benor .vhero{position:relative;isolation:isolate;overflow:hidden;height:clamp(440px, 64vh, 760px);background:var(--color-primary-deep)}
#lp-benor .vhero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#lp-benor .vhero::before,#lp-benor .vhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* the top scrim carries the transparent bar over the film (the .hero-bg::after lesson): measured over 11 frames across
   the 45 s film, the brightest (the logo end card) included, every header text role is >= 4.5:1 at 390 and 1440
   (was .45 -> transparent 32%: brand line 1.94:1 at worst) */
#lp-benor .vhero::before{background:linear-gradient(to bottom, rgba(28,32,40,.8) 0, rgba(28,32,40,.74) 72px, rgba(28,32,40,0) 45%)}
#lp-benor .vhero::after{background:linear-gradient(to top, rgba(28,32,40,.55), transparent 40%)}
#lp-benor .vhero-toggle{position:absolute;z-index:2;bottom:var(--s-4);inset-inline-start:var(--site-gutter);display:inline-flex;align-items:center;
  min-height:var(--tap);padding:var(--s-2) var(--s-4);border:0;border-radius:999px;background:var(--color-primary-deep);font:inherit;font-size:var(--step-0);
  color:var(--color-text-on-primary);cursor:pointer;text-decoration:none}
/* white text on the moving footage measured 3.59:1 (390) and 3.89:1 (1440) at p10 on its worst frames; a solid navy pill holds it on every frame */
#lp-benor .vhero-toggle:hover{background:var(--color-primary-raise)}
#lp-benor .vhero-toggle[hidden]{display:none}
#lp-benor .vhead{--v-h1:clamp(2.1rem, 1.4rem + 3vw, 4.6rem);background:var(--color-primary-deep);color:var(--color-text-on-primary);padding-block:var(--layout-section-padding)}
#lp-benor .vhead-col{max-width:880px;margin-inline:auto;text-align:start}
#lp-benor .vhead .hero-title{font-size:var(--v-h1);max-width:none}
#lp-benor .vhead-courts{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);margin-top:var(--s-5);padding-top:var(--s-5);
  border-top:1px solid var(--color-border-on-dark);font-size:var(--fs-meta);color:var(--color-text-on-primary-muted);line-height:var(--lh-small)}
#lp-benor .vhead-courts ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin:0;padding:0;list-style:none}
#lp-benor .vhead-courts li+li::before{content:"·";color:var(--color-accent-gold);margin-inline-end:var(--s-3)}
@media (max-width:600px){
  #lp-benor .vhero{height:clamp(300px, 52svh, 480px)}
}
/* the three areas: text cards in the .svc-card idiom, no image; each carries its practice-area icon */
#lp-benor .svc-card.svc-card--text{display:flex;flex-direction:column;position:relative;padding:var(--card-pad);
  background:var(--color-surface);border:1px solid var(--color-border-subtle)}
#lp-benor .svc-card--text::before{content:"";position:absolute;top:-1px;inset-inline-start:-1px;width:44px;height:2px;background:var(--color-accent-gold)}
#lp-benor .svc-card--text .svc-ic{margin-top:0;margin-bottom:var(--s-4)}
#lp-benor .svc-card--text .s{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-eyebrow);color:var(--color-accent-gold-deep);line-height:var(--lh-label)}
#lp-benor .svc-card--text .svc-t a{color:inherit}
#lp-benor .svc-card--text .svc-t a:hover{text-decoration:underline;text-decoration-color:var(--color-accent-gold);text-underline-offset:4px}
#lp-benor .svc-card--text ul{margin:var(--s-5) 0 0;padding:0;list-style:none}
#lp-benor .svc-card--text li{border-top:1px solid var(--color-border-subtle);padding-block:var(--s-3);line-height:var(--lh-snug);color:var(--color-text-main)}
#lp-benor .svc-card--text .svc-close{align-self:flex-start;margin-top:var(--s-4);color:var(--color-primary-bg);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--color-accent-gold);text-decoration-thickness:1px;text-underline-offset:3px}
#lp-benor .areas-more{margin-top:var(--s-7);font-size:var(--fs-meta);color:var(--color-text-muted);line-height:var(--lh-small)}
#lp-benor .areas-more a{color:var(--color-primary-bg);text-decoration:underline;text-decoration-color:var(--color-gold-rule);text-underline-offset:3px}
#lp-benor .midcta-bg picture{display:block;width:100%;height:100%}
#lp-benor .areas-more .sep{margin-inline:var(--s-2);color:var(--color-accent-gold-deep)}
/* the CTA band's trust line (firm's wording, 2026-10-13) */
/* colour: the muted token measured 3.57:1 (1440) and 4.41:1 (390) on the scrim, under 4.5, so the full on-primary white */
#lp-benor .midcta-trust{margin:var(--s-4) 0 0;font-size:var(--fs-meta);line-height:var(--lh-small);color:var(--color-text-on-primary)}
/* ---- the reviews marquee (real Google reviews) ---- */
#lp-benor #reviews{--v-rev-quote-size:clamp(1.05rem, .95rem + .45vw, 1.25rem)}
#lp-benor #reviews .rev-marquee{overflow:hidden;border-top:2px solid var(--color-accent-gold);padding-top:var(--x-ti-shell-padding-1);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
#lp-benor #reviews .rev-marquee:focus-visible{outline-offset:-2px}
#lp-benor #reviews .rev-track{display:flex;width:max-content;will-change:transform;animation:benor-rev-marquee 110s linear infinite}
#lp-benor #reviews .rev-track:hover,
#lp-benor #reviews .rev-marquee:focus-within .rev-track,
#lp-benor #reviews .rev-track.is-paused{animation-play-state:paused}
#lp-benor #reviews .rev-set{display:flex;align-items:flex-start;gap:var(--gap-card);padding-inline-end:var(--gap-card)}
#lp-benor #reviews .rev-card{display:flex;flex-direction:column;flex:0 0 auto;width:clamp(300px, 28vw, 400px);min-height:300px;
  background:var(--color-surface-alt);border:1px solid var(--color-border-subtle);border-radius:var(--r-card);padding:var(--card-pad)}
#lp-benor #reviews .rev-quote{font-family:var(--font-display);font-weight:500;font-size:var(--v-rev-quote-size);
  line-height:var(--lh-quote);color:var(--color-primary-bg)}
#lp-benor #reviews .rev-who{margin-top:auto}
#lp-benor #reviews .rev-toggle{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--x-rev-rating-margin-top);
  padding:0;border:0;background:transparent;font:inherit;font-size:var(--step-0);color:var(--color-primary-bg);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--color-accent-gold);text-decoration-thickness:1px;text-underline-offset:3px}
@keyframes benor-rev-marquee{to{transform:translateX(50%)}}
/* phone: no marquee, a native swipe row */
@media (max-width:600px){
  #lp-benor #reviews .rev-marquee{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--site-gutter);
    scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  #lp-benor #reviews .rev-marquee::-webkit-scrollbar{display:none}
  #lp-benor #reviews .rev-track{animation:none;will-change:auto}
  #lp-benor #reviews .rev-set{padding-inline:var(--site-gutter)}
  #lp-benor #reviews .rev-set[aria-hidden="true"]{display:none}
  #lp-benor #reviews .rev-card{width:min(84vw, 340px);scroll-snap-align:start}
  #lp-benor #reviews .rev-toggle{display:none}
}
/* reduced motion, the site's stop-motion switch and the large-font mode: the twelve cards as a grid inside the wrap */
@media (prefers-reduced-motion:reduce){
  #lp-benor #reviews .rev-marquee{overflow:visible;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none;margin-inline:auto;
    width:min(calc(100% - 2 * var(--site-gutter)), calc(var(--layout-max-width) - 2 * var(--site-gutter)))}
  #lp-benor #reviews .rev-track{display:block;width:auto;animation:none !important;transform:none;will-change:auto}
  #lp-benor #reviews .rev-set{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));align-items:start;padding:0}
  #lp-benor #reviews .rev-set[aria-hidden="true"]{display:none}
  #lp-benor #reviews .rev-card{width:auto}
  #lp-benor #reviews .rev-toggle{display:none}
}
html[data-a11y-motion="1"] #lp-benor #reviews .rev-marquee,
html[data-a11y-font="1"] #lp-benor #reviews .rev-marquee{overflow:visible;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none;margin-inline:auto;
  width:min(calc(100% - 2 * var(--site-gutter)), calc(var(--layout-max-width) - 2 * var(--site-gutter)))}
html[data-a11y-motion="1"] #lp-benor #reviews .rev-track,
html[data-a11y-font="1"] #lp-benor #reviews .rev-track{display:block;width:auto;animation:none;transform:none;will-change:auto}
html[data-a11y-motion="1"] #lp-benor #reviews .rev-set,
html[data-a11y-font="1"] #lp-benor #reviews .rev-set{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));align-items:start;padding:0}
html[data-a11y-motion="1"] #lp-benor #reviews .rev-set[aria-hidden="true"],
html[data-a11y-font="1"] #lp-benor #reviews .rev-set[aria-hidden="true"],
html[data-a11y-motion="1"] #lp-benor #reviews .rev-toggle,
html[data-a11y-font="1"] #lp-benor #reviews .rev-toggle{display:none}
html[data-a11y-motion="1"] #lp-benor #reviews .rev-card,
html[data-a11y-font="1"] #lp-benor #reviews .rev-card{width:auto}
/* the official Google logo in the rating row and the G mark on each card (firm, 2026-10-13); brand artwork unaltered */
#lp-benor #reviews{--v-g-row:22px;--v-g-card:16px;--v-g-word-cap:20px;--v-g-word-h:calc(var(--v-g-word-cap) * 92 / 68.88)}
/* scoped to the Google row (.rev-rating--g) so draft 112, whose rating row has no logo, keeps its own layout */
#lp-benor #reviews .rev-rating--g{flex-wrap:wrap;align-items:center;column-gap:var(--s-2);row-gap:var(--s-3)}
#lp-benor #reviews .rev-rating--g .rev-stars{margin:0}
#lp-benor #reviews .rev-score{display:inline-flex;align-items:baseline;gap:var(--s-2)}
#lp-benor #reviews .rev-g-row{flex:none;width:var(--v-g-row);height:var(--v-g-row);margin-inline-end:var(--space-lg)}
#lp-benor #reviews .rev-wordmark{flex:none;height:var(--v-g-word-h);width:calc(var(--v-g-word-h) * 272 / 92);margin-inline-start:var(--space-lg)}
#lp-benor #reviews .rev-g{flex:none;width:var(--v-g-card);height:var(--v-g-card);margin-inline-start:auto}
/* phone: the logo line first (G, stars, wordmark), then "5.0 מתוך 5 · link" whole on its own line; the row gap keeps the logo clear space (at least the G height) */
@media (max-width:600px){#lp-benor #reviews .rev-rating--g{row-gap:var(--space-lg)}#lp-benor #reviews .rev-score{order:1;flex-basis:100%}}