/* HIB — supplemental styles for components not in the original design system. */

.hib-stars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.hib-stars .hib-star { color: #d8d8d8; }
.hib-stars .hib-star.is-on { color: var(--hib-signature); }

.hib-reviews .hib-card p { margin: .4rem 0 0; }

/* Harmonious review form (matches review-card aesthetic) */
.hib-review-form {
	margin-top: 2rem;
	padding: var(--hib-space-6);
	background: #fff;
	border: 1px solid var(--hib-border-accent);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(29, 84, 196, .06);
	max-width: 680px;
}
.hib-review-form__title { margin: 0 0 .25rem; font-size: 1.25rem; color: var(--hib-primary); }
.hib-review-form__sub { margin: 0 0 1.25rem; color: #5b6b78; font-size: var(--hib-body-s-size); }
.hib-review-form .hib-field { margin-bottom: 1rem; }
.hib-review-form .hib-field__label { display: block; margin-bottom: .4rem; font-weight: 500; color: #2a3b47; }
.hib-review-form .hib-field__input {
	width: 100%; padding: .7rem .9rem; border: 1px solid rgba(29, 84, 196,.2);
	/* `font: inherit` reset this control to the surrounding 17px prose and took
	   it out of the input role along the way; the shorthand also silently wiped
	   line-height and weight. The family is what it actually wanted. */
	border-radius: 10px; font-family: var(--hib-font-ui); background: #fbfcfd;
}
.hib-review-form .hib-field__input:focus { outline: none; border-color: var(--hib-primary); box-shadow: 0 0 0 3px rgba(29, 84, 196,.12); }

/* Interactive star rating input — native radios painted as stars, so the
   control works (and is keyboard-operable) with no JavaScript at all. */
.hib-rating-input { display: inline-flex; gap: 4px; }
.hib-rating-input__star {
	/* 44px of tappable area around a 30px glyph — the row is now the first thing
	   a reader has to hit deliberately, and a 30px target is a poor thumb target. */
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; cursor: pointer; line-height: 0;
	/* An unchosen star is an empty OUTLINE, and dark enough to carry 3:1 against
	   the form surface (WCAG 1.4.11): now that the row starts empty it is the
	   control's resting state, not a decorative backdrop behind gold. */
	color: var(--hib-text-muted);
	border-radius: 6px;
	transition: color .12s ease, transform .12s ease;
}
.hib-rating-input__star svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hib-rating-input__star.is-on { color: var(--hib-rating-star); }
.hib-rating-input__star.is-on svg { fill: currentColor; stroke: none; }
.hib-rating-input__star:hover { transform: scale(1.1); }
/* The radio itself is the accessible control: kept in the layer, sized to the
   star, and invisible — never `display:none`, which would take it out of the
   tab order and out of the accessibility tree. */
.hib-rating-input__radio { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
/* No-JS: the chosen star still shows as chosen. With JS the cumulative
   `is-on` fill takes over and this rule simply agrees with it. */
.hib-rating-input__radio:checked ~ svg { color: var(--hib-rating-star); fill: currentColor; stroke: none; }
.hib-rating-input__radio:focus-visible ~ svg { outline: 2px solid var(--hib-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.hib-rating-input__star { transition: none; }
	.hib-rating-input__star:hover { transform: none; }
}

/* Generic page prose (non-legal WP Pages fallback) */
.hib-prose{max-width:46rem;margin-inline:auto;color:var(--hib-ink,#243b53);line-height:1.85;font-size:var(--hib-body-lede-size)}
.hib-prose h2{margin:2rem 0 .75rem;font-size:1.4rem}
/* Editor-owned prose: a sub-heading between paragraphs stays in the READING
   voice. It states family, weight and leading rather than inheriting them,
   because the base `h3` now carries the Danidin block-title role — right for a
   component heading, wrong for a clause a reader is mid-sentence with. This
   context ships no h3 today; the pin is what keeps that true when an editor
   types one. */
.hib-prose h3{margin:1.5rem 0 .5rem;font-size:1.15rem;font-family:var(--hib-font-ui);font-weight:600;line-height:1.3}
.hib-prose p{margin:0 0 1rem}
.hib-prose ul,.hib-prose ol{margin:0 0 1rem;padding-inline-start:1.5rem}
.hib-prose li{margin:.35rem 0}
.hib-prose a{color:var(--hib-navy,var(--hib-primary));text-decoration:underline}
/* Embedded media inside editor prose. WordPress writes an oEmbed iframe with the
   PROVIDER's pixel width on it (a classic auto-embed arrives as width="500", an
   embed block as width="1200"), and nothing in this theme was telling it
   otherwise — so the iframe kept its own width inside a 335px column. In RTL that
   overflow runs off the inline-start edge, where there is no scrollbar to reveal
   it: at 375px the layout viewport stretched to 1220px and the page simply lost
   its left side. The measure belongs to prose, so the constraint does too.

   The ratio is preserved rather than imposed — see the wrapper rules below. */
.hib-prose :is(iframe,video,embed,object){max-width:100%}
.hib-prose video{height:auto}
.hib-prose .wp-block-embed__wrapper{max-width:100%}
/* `wp-has-aspect-ratio` means WordPress recorded what the provider actually
   returned, so the wrapper — not the iframe — carries the shape and the iframe
   fills it. Nothing here invents a ratio for an embed that arrived without one:
   such an embed is only capped, and its provider letterboxes inside as it would
   anywhere. (`attr()` is deliberately not used for this: outside `content` it is
   still Chromium-only, and the fallback would collapse the iframe to 150px.) */
.hib-prose .wp-has-aspect-ratio .wp-block-embed__wrapper > iframe{width:100%;height:100%}
.hib-prose .wp-embed-aspect-16-9 .wp-block-embed__wrapper{aspect-ratio:16 / 9}
.hib-prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper{aspect-ratio:4 / 3}
.hib-prose .wp-embed-aspect-1-1 .wp-block-embed__wrapper{aspect-ratio:1 / 1}
.hib-prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper{aspect-ratio:9 / 16}
/* A classic auto-embed carries its shape on the wrapper `hib_embed_wrap_ratio()`
   adds from the provider's own oEmbed dimensions — so this box is the embed's real
   ratio, never a house default. */
.hib-embed{position:relative;inline-size:100%;aspect-ratio:var(--hib-embed-ar,16 / 9)}
.hib-embed > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Honeypot — visually hidden anti-spam field. Clip-based hiding keeps it in the
   DOM (so bots fill it) without expanding the page (no off-screen left offset). */
.hib-hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   AMIRSABAN BRAND ALIGNMENT — refinement layer (loads last)
   Danidin display · IBM Plex Mono numerals · azure/navy precision.
   HIB identity preserved; only the surface language is unified.
   ============================================================ */

/* — Signature display face on hero / display headlines only — */
.hib-domain-hero-v2__title,
.hib-hero__title,
.hib-display-xl,
.hib-display-l,
.hib-amir-section__title,
.hib-video-hero__title,
.hib-featured-video__title,
.hib-cta-section__title,
.hib-domain-cta__title{
  font-family:var(--hib-font-hero);
  font-weight:900;
  letter-spacing:normal;
}

/* — Editorial mono numerals (Latin/digits only — never Hebrew) — */
.hib-domain-hero-v2__stat-value,
.hib-domain-hero__stat-value,
.hib-amir-section__followers strong{
  font-family:var(--hib-font-mono);
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:normal;
  font-weight:500;
}

/* — Hebrew eyebrows: drop Latin-only uppercase/tracking (RTL-correct) — */
.hib-domain-hero-v2__eyebrow,
.hib-amir-section__kicker,
.hib-section-header__eyebrow,
.hib-domain-cta__eyebrow{ letter-spacing:normal; text-transform:none; }

/* ── Home listing — taller, face-focused profile tiles ───────── */
.hib-pro-card-v2__media{
  height:clamp(224px,30vw,288px);                 /* portrait tile — face reads clearly */
  background:linear-gradient(180deg,#E8EEF8 0%,var(--hib-domain-soft) 100%);
}
.hib-pro-card-v2__media img{ object-fit:cover;object-position:center 22%; } /* crop to faces, not letterbox */
.hib-pro-card-v2__media::after{ content:none; }   /* removed unclear band */
/* Empty tile = deliberate avatar, not a void.
   Brand gradient + soft dot texture + solid initials disc + trust badge. */
.hib-pro-card-v2__media--empty{
  height:clamp(224px,30vw,288px);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0) 0 0/16px 16px,
    linear-gradient(155deg, var(--hib-primary) 0%, #0B3A78 55%, #082c5c 100%);
}
@media (max-width:560px){
  .hib-pro-card-v2__media,
  .hib-pro-card-v2__media--empty{ height:clamp(200px,52vw,240px); } /* taller on 2-col mobile */
}
.hib-pro-card-v2__media--empty::after{ display:none; }
.hib-pro-card-v2__avatar{
  display:flex;align-items:center;justify-content:center;
  width:clamp(76px,18vw,92px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(155deg,#fff 0%,var(--hib-domain-soft) 100%);
  box-shadow:0 8px 22px rgba(11,37,70,.3), inset 0 0 0 1px rgba(255,255,255,.6);
}
.hib-pro-card-v2__avatar-initials{
  font-family:var(--hib-font-hero);
  font-weight:900;
  font-size:clamp(2.1rem,5vw,2.7rem);
  line-height:1;
  color:var(--hib-primary);
}
.hib-pro-card-v2__avatar-badge{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:normal;
  color:#fff;background:rgba(8,28,58,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.hib-pro-card-v2__avatar-badge svg{ color:#7FE3B0; }
/* Featured tier — azure ring (was gold) */
.hib-pro-card-v2--featured{
  border-color:rgba(29,84,196,.45)!important;
  box-shadow:0 0 0 1px rgba(29,84,196,.30),var(--hib-shadow-card)!important;
}
.hib-pro-card-v2--featured:hover{
  box-shadow:0 0 0 1px rgba(29,84,196,.42),var(--hib-shadow-card-hover)!important;
}

/* Founder section: photo border/shadow + kicker handled at source (azure). */

/* ── Videos — portrait-first player (Amir's reels are 9:16) ───── */
.hib-video-player{
  width:min(440px, calc(86vh * 0.5625), 92vw); /* portrait column, capped to screen height */
  margin-inline:auto;
}
.hib-video-player__frame{
  aspect-ratio:9 / 16;                          /* portrait — no crop on vertical reels */
  border-radius:var(--hib-radius-xl);
  background:var(--hib-domain-hero);
  border:1px solid rgba(11,37,70,.10);
  box-shadow:var(--hib-shadow-band);
}
.hib-video-player__frame iframe,
.hib-video-player__frame video,
.hib-video-player__frame img{ width:100%;height:100%;border:0;display:block; }
/* A still stands in for the player (media state b). The player box is portrait
   9:16 while a topic frame is landscape, so cropping to fill would cut the
   frame's own subject and lettering, and fitting it alone would leave the empty
   navy margin this state exists to prevent. The frame is therefore shown whole
   over a blurred, darkened enlargement of itself: nothing is cut, nothing is
   empty, and the box keeps its size so there is no layout shift. */
.hib-video-player__backdrop{
  position:absolute;inset:0;
  background:center/cover no-repeat;
  filter:blur(22px) saturate(.75) brightness(.5);
  transform:scale(1.15);                 /* pushes the blur's soft edge out of view */
}
.hib-video-player__still{ position:relative;z-index:1;object-fit:contain; }
/* thin azure accent line crowning the player */
.hib-video-player__frame::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary),transparent);
}
.hib-featured-video__play,
.hib-video-card__play{ color:#fff; background:var(--hib-primary); }

/* ── CTA — bright azure button on navy (legacy "gold" slot) ───── */
.hib-btn--gold{
  background:#FFFFFF;color:var(--hib-primary);font-weight:700;
  box-shadow:var(--hib-shadow-btn-invert);
}
.hib-btn--gold:hover{
  background:var(--hib-domain-soft);color:var(--hib-primary-hover);
  box-shadow:var(--hib-shadow-btn-invert-hover);
}
/* Shimmer sweep on hover — azure sheen across the white CTA. Sits behind the
   label (z-index:-1 inside the button's own stacking context). */
.hib-btn--gold{ position:relative;overflow:hidden;isolation:isolate; }
.hib-btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(29,84,196,.16) 50%,transparent 65%);
  transform:translateX(-120%);
}
.hib-btn--gold:hover::after{ animation:hib-btn-shimmer 1.1s var(--hib-ease); }
@keyframes hib-btn-shimmer{ to{ transform:translateX(120%); } }
@media (prefers-reduced-motion:reduce){ .hib-btn--gold::after{ display:none; } }

/* ============================================================
   FOUNDER HERO — Amir-forward, premium navy, trust-led
   ============================================================ */
.hib-hero-founder{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,84px);
  background:var(--hib-dark-shell);
  color:#EEF4FF;
}
/* azure authority hairline along the very top of the first screen */
.hib-hero-founder::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}
/* prepared brand photo, deep-navy gradient on top for depth + legibility */
.hib-hero-founder__bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url('../images/hero-home-v2.jpg') center/cover no-repeat;
  opacity:.55;
}
.hib-hero-founder__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg, var(--hib-dark-shell) 0%, rgba(8, 30, 58, .92) 38%, rgba(8, 30, 58, .62) 72%, rgba(8, 30, 58, .40) 100%),
    linear-gradient(0deg, rgba(8, 30, 58, .55), rgba(8, 30, 58, .1));
}
.hib-hero-founder__glow{
  position:absolute;inset-block-start:-12%;inset-inline-end:-8%;
  width:46vw;max-width:560px;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle, rgba(27,74,179,.22) 0%, transparent 64%);
  filter:blur(10px);pointer-events:none;
  animation:hib-hero-aurora 14s var(--hib-ease) infinite alternate;
}
/* Slow aurora drift — adds depth behind the founder hero. Transform/opacity
   only (compositor-friendly); fully disabled for reduced-motion. */
@keyframes hib-hero-aurora{
  0%{ transform:translate(0,0) scale(1);opacity:.82; }
  100%{ transform:translate(-7%,6%) scale(1.18);opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .hib-hero-founder__glow{ animation:none; } }
.hib-hero-founder__grain{ display:none; }
.hib-hero-founder__inner{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr);
  gap:clamp(36px,5vw,88px);align-items:center;
}
.hib-hero-founder__content{max-width:880px;}

/* Search form: full content width + lifted above the stats row so the open
   combo panel never collides with the stat numbers behind it. Generous fields
   so the invitation labels ("כל ההתמחויות"/"כל האזורים") never truncate. */
.hib-hero-founder__content .hib-search-v2{
  position:relative;z-index:30;width:100%;max-width:none;margin-block-start:6px;
}
.hib-hero-founder__content .hib-search-v2__field{ padding:11px 18px; }
.hib-hero-founder__content .hib-search-v2__field:first-of-type{ flex:0.8; } /* address — free input, needs less */
.hib-hero-founder__content .hib-search-v2__label{ font-size:var(--hib-label-min);margin-block-end:3px; } /* was 11px — label floor */
.hib-hero-founder__content .hib-search-v2__btn{ padding:var(--hib-space-3) var(--hib-space-5);font-size:var(--hib-body-s-size); }
.hib-hero-founder__stats{ position:relative;z-index:1; }

.hib-hero-founder__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--hib-font-body);font-size:var(--hib-body-s-size);font-weight:600;
  color:var(--hib-primary-on-dark);margin-block-end:18px;letter-spacing:normal;
}
.hib-hero-founder__eyebrow-dot{
  width:26px;height:1px;background:linear-gradient(90deg,var(--hib-primary-on-dark),transparent);flex-shrink:0;
}
.hib-hero-founder__title{
  font-family:var(--hib-font-hero);font-weight:900;
  font-size:clamp(3rem,7vw,5.4rem);line-height:0.95;letter-spacing:normal;
  color:var(--hib-on-dark);margin:0 0 18px;text-wrap:balance;
}
.hib-hero-founder__sub{
  font-family:var(--hib-font-body);font-size:var(--hib-body-l-size);
  line-height:1.62;color:var(--hib-on-dark-soft);max-width:540px;margin:0 0 22px;
}
/* mono trust/proof row — Amir-brand editorial voice, above the search */
.hib-hero-founder__trust{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-block-end:26px;font-family:var(--hib-font-mono);
  font-size:.78rem;letter-spacing:normal;color:var(--hib-on-dark-muted);
}
.hib-hero-founder__trust .t{display:inline-flex;align-items:center;gap:7px;}
.hib-hero-founder__trust .t svg{width:15px;height:15px;color:var(--hib-primary-on-dark);flex-shrink:0;}
.hib-hero-founder__trust .sep{width:1px;height:13px;background:rgba(169,198,255,.28);}
.hib-hero-founder__stats{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;
  margin-block-start:30px;padding-block-start:26px;
  border-block-start:1px solid rgba(169,198,255,.16);
}
.hib-hero-founder__stat{display:flex;flex-direction:column;gap:3px;}
.hib-hero-founder__stat-value{
  font-family:var(--hib-font-mono);font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;color:#FFFFFF;line-height:1;
}
.hib-hero-founder__stat-label{font-size:var(--hib-label-s-size);color:var(--hib-on-dark-muted);}
.hib-hero-founder__stat-sep{width:1px;align-self:stretch;background:rgba(169,198,255,.18);}

/* — Portrait + floating trust — */
.hib-hero-founder__aside{position:relative;justify-self:center;width:min(100%,400px);}
.hib-hero-founder__portrait{
  position:relative;margin:0;border-radius:var(--hib-radius-xl);overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 0 0 1px rgba(169,198,255,.18),var(--hib-shadow-band);
}
.hib-hero-founder__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;}
.hib-hero-founder__sig{
  position:absolute;inset-inline:0;inset-block-end:0;
  padding:46px 22px 18px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(to top, rgba(6,16,36,.92) 0%, rgba(6,16,36,.55) 55%, transparent 100%);
}
.hib-hero-founder__sig-name{font-family:var(--hib-font-hero);font-weight:900;font-size:1.4rem;color:#fff;line-height:1.1;}
.hib-hero-founder__sig-role{font-size:var(--hib-label-s-size);color:var(--hib-on-dark-soft);}

.hib-hero-founder__badge{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--hib-radius-pill);
  background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
  font-size:var(--hib-label-s-size);font-weight:600;color:var(--hib-text);
  box-shadow:0 14px 30px -12px rgba(11,37,70,.6);white-space:nowrap;
}
.hib-hero-founder__badge svg{width:16px;height:16px;flex-shrink:0;}
.hib-hero-founder__badge--verify{
  inset-block-start:-16px;inset-inline-start:14px;color:var(--hib-primary);
}
.hib-hero-founder__badge--verify svg{color:#fff;background:var(--hib-primary);border-radius:50%;padding:3px;width:20px;height:20px;}
.hib-hero-founder__badge--social{ inset-block-end:-16px;inset-inline-end:14px; }
.hib-hero-founder__badge--social strong{font-family:var(--hib-font-mono);font-weight:500;color:var(--hib-primary);}

@media (max-width:980px){
  .hib-hero-founder__inner{grid-template-columns:1fr;gap:28px;}
  .hib-hero-founder__aside{order:-1;width:min(74%,300px);}
  .hib-hero-founder__content{max-width:none;text-align:start;}
  .hib-hero-founder__stats{justify-content:flex-start;}
}
@media (max-width:560px){
  .hib-hero-founder{padding-block:clamp(32px,7vw,52px) clamp(36px,6vw,64px);}
  .hib-hero-founder__aside{width:min(62%,236px);}
  .hib-hero-founder__title{font-size:clamp(2.3rem,9vw,3rem);margin-block-end:14px;}
  .hib-hero-founder__sub{font-size:var(--hib-body-lede-size);margin-block-end:22px;}
  .hib-hero-founder__badge{font-size:.75rem;padding:8px 11px;}
  .hib-hero-founder__badge--verify{inset-inline-start:8px;inset-block-start:-12px;}
  .hib-hero-founder__badge--social{inset-inline-end:8px;inset-block-end:-12px;}
}

/* ── Profile page — premium conversion polish ─────────────────── */
.hib-profile-hero__name{ font-family:var(--hib-font-hero); font-weight:900; letter-spacing:normal; }
.hib-profile-hero__media{
  border:3px solid #FFFFFF;
  box-shadow:0 0 0 1px rgba(29,84,196,.18), var(--hib-shadow-band);
}
.hib-profile-hero__media img{ object-position:center 22%; }

/* ── Global premium micro-polish ──────────────────────────────── */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
::selection{ background:rgba(29,84,196,.20); color:var(--hib-text-strong); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  /* No border-radius here: this rule has zero class specificity, so it used to
     win the tie against every component's own radius and re-shaped the element
     on focus (a focused invalid field rendered at a different radius than the
     invalid field beside it). The outline follows the element's own radius. */
  outline:2px solid var(--hib-primary); outline-offset:2px;
}
img{ -webkit-user-drag:none; }
.hib-footer__link{ display:inline-block; padding-block:8px; } /* tap target >=24px (WCAG 2.5.8) */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ============================================================
   APPLE-FEEL MOTION — scroll-linked hero depth (JS-driven for
   cross-browser support incl. Safari): bg photo sinks, portrait
   floats, planes separate. Reveal motion left as the DS default.
   ============================================================ */
.hib-hero-founder__bg{ will-change:transform; }
.hib-hero-founder__portrait{ will-change:transform; }

/* ============================================================
   TESTIMONIALS — real-review marquee (trust, 2026 social-proof)
   ============================================================ */
.hib-testimonials__header{ text-align:center; }
.hib-testimonials__header .hib-section-header__eyebrow{ margin-inline:auto; }
/* Static responsive grid — robust, no animation glitches */
.hib-testimonials__grid{
  display:grid;gap:var(--hib-space-5);margin-block-start:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.hib-testimonial-card{
  margin:0;position:relative;
  display:flex;flex-direction:column;gap:var(--hib-space-3);
  background:var(--hib-surface);border:1px solid var(--hib-border);
  border-radius:var(--hib-radius-l);padding:var(--hib-space-7) var(--hib-space-6) var(--hib-space-6);
  box-shadow:var(--hib-shadow-card);
  transition:transform .18s var(--hib-ease),box-shadow .18s var(--hib-ease);
}
.hib-testimonial-card:hover{ transform:translateY(-3px);box-shadow:var(--hib-shadow-card-hover); }
/* decorative opening quote — editorial premium */
.hib-testimonial-card::before{
  content:"\201D";position:absolute;inset-block-start:6px;inset-inline-start:18px;
  font-family:var(--hib-font-hero);font-size:3.4rem;line-height:1;
  color:var(--hib-primary);opacity:.14;pointer-events:none;
}
.hib-testimonial-card__stars{ color:var(--hib-rating-star);display:inline-flex;gap:1px;position:relative; }
.hib-testimonial-card__quote{
  margin:0;font-size:1.0625rem;line-height:1.62;color:var(--hib-text);position:relative;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.hib-testimonial-card__by{
  display:flex;align-items:center;gap:var(--hib-space-3);margin-block-start:auto;
  padding-block-start:var(--hib-space-3);border-block-start:1px solid var(--hib-rule-soft);
}
.hib-testimonial-card__avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-family:var(--hib-font-hero);
  font-weight:900;font-size:var(--hib-body-lede-size);
  background:linear-gradient(135deg,var(--hib-primary),var(--hib-accent));
}
.hib-testimonial-card__meta{ display:flex;flex-direction:column;min-width:0; }
.hib-testimonial-card__name{ font-weight:700;color:var(--hib-text); }
.hib-testimonial-card__pro{ font-size:var(--hib-label-s-size);color:var(--hib-text-muted);text-decoration:none; }
.hib-testimonial-card__pro:hover{ color:var(--hib-primary); }
@media (prefers-reduced-motion:reduce){
  .hib-testimonials__track{ animation:none;overflow-x:auto;padding-block-end:8px; }
  .hib-testimonials__marquee{ -webkit-mask-image:none;mask-image:none; }
  .hib-testimonial-card[aria-hidden="true"]{ display:none; } /* no animation → drop the loop duplicates */
}

/* ============================================================
   SOCIAL PROOF — Amir's real channels (founder section + footer)
   ============================================================ */
.hib-social-proof{ display:flex;gap:var(--hib-space-3);flex-wrap:wrap;margin-block-start:var(--hib-space-2); }
.hib-social-proof__item{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--hib-radius-xs);
  background:var(--hib-domain-soft);border:1px solid var(--hib-domain-line);
  color:var(--hib-primary);text-decoration:none;font-weight:700;font-size:var(--hib-label-m-size);
  transition:transform .16s var(--hib-ease),box-shadow .16s var(--hib-ease),background .16s,color .16s;
}
.hib-social-proof__item:hover{ transform:translateY(-2px);background:#fff;box-shadow:var(--hib-shadow-s); }
.hib-social-proof__icon{ display:inline-flex; }
.hib-social-proof__icon svg{ width:18px;height:18px; }
.hib-social-proof__label{ font-weight:600;letter-spacing:normal; }
.hib-social-proof__item--facebook:hover{ color:#1877F2;border-color:#1877F2; }
.hib-social-proof__item--instagram:hover{ color:#C13584;border-color:#C13584; }
.hib-social-proof__item--tiktok:hover{ color:#0B0B0B;border-color:#0B0B0B; }

.hib-footer__social{
  display:flex;align-items:center;gap:var(--hib-space-3);flex-wrap:wrap;
  padding-block:var(--hib-space-5);margin-block-start:var(--hib-space-4);
  border-block-start:1px solid var(--hib-border-on-dark);
}
.hib-footer__social-label{ font-size:var(--hib-label-m-size);opacity:.7; }
.hib-footer__social-link{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);color:currentColor;
  transition:transform .16s var(--hib-ease),background .16s,color .16s;
}
.hib-footer__social-link svg{ width:18px;height:18px; }
.hib-footer__social-link:hover{ transform:translateY(-2px);background:var(--hib-primary);color:#fff; }

/* Review form — retire hardcoded petrol for brand tokens */
.hib-review-form{ border-color:var(--hib-border-accent); box-shadow:var(--hib-shadow-card); }
.hib-review-form__title{ color:var(--hib-primary); }
.hib-review-form .hib-field__input:focus{ border-color:var(--hib-primary); box-shadow:var(--hib-shadow-focus); }

/* ============================================================
   LISTING — filter bar wrap (no left clip) + honest trust badge
   ============================================================ */
.hib-filter-bar__inner{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; padding-inline-end:0; }
.hib-results-summary__trust{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--hib-radius-pill);
  background:var(--hib-success-soft);color:var(--hib-success);
  font-weight:600;font-size:var(--hib-label-m-size);white-space:nowrap;
}
.hib-results-summary__trust svg{ width:16px;height:16px;flex-shrink:0; }

/* ============================================================
   404 — branded not-found (navy, founder voice)
   ============================================================ */
.hib-404{ position:relative;overflow:hidden;background:var(--hib-dark-shell);color:#EEF4FF;
  padding-block:clamp(64px,11vw,128px);text-align:center;min-height:68vh;display:grid;place-items:center; }
.hib-404__glow{ position:absolute;inset-block-start:-22%;inset-inline-start:50%;transform:translateX(50%);
  width:70vw;max-width:760px;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(27,74,179,.24) 0%, transparent 62%);filter:blur(12px); }
.hib-404__inner{ position:relative;z-index:1;max-width:640px;margin-inline:auto; }
.hib-404__code{ font-family:var(--hib-font-hero);font-weight:900;font-size:clamp(5.5rem,18vw,11rem);
  line-height:.9;letter-spacing:normal;color:#4E86E8; }
.hib-404__eyebrow{ margin-block:8px 14px; }
.hib-404__title{ font-family:var(--hib-font-hero);font-weight:900;font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.1;letter-spacing:normal;color:var(--hib-on-dark);margin:0 0 16px;text-wrap:balance; }
.hib-404__sub{ font-size:var(--hib-body-l-size);line-height:1.6;color:var(--hib-on-dark-soft);margin:0 auto 28px;max-width:520px; }
.hib-404__sub strong{ color:#fff; }
.hib-404__search{ display:flex;gap:10px;max-width:480px;margin:0 auto 22px; }
.hib-404__search-input{ flex:1;padding:0 18px;height:52px;border-radius:var(--hib-radius-s);
  border:1px solid rgba(169,198,255,.28);background:rgba(255,255,255,.06);color:#fff;font:inherit; }
.hib-404__search-input::placeholder{ color:var(--hib-on-dark-faint); }
.hib-404__search-input:focus{ outline:none;border-color:var(--hib-primary-on-dark);box-shadow:0 0 0 3px rgba(27,74,179,.3); }
.hib-404__links{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center;color:var(--hib-on-dark-faint);font-size:var(--hib-label-m-size); }
.hib-404__links a{ color:var(--hib-primary-on-dark);text-decoration:none; }
.hib-404__links a:hover{ color:#fff;text-decoration:underline; }
@media (max-width:560px){ .hib-404__search{ flex-direction:column; } .hib-404__search .hib-btn{ width:100%;justify-content:center; } }

/* ============================================================
   VISION PAGE (החזון שלנו) — branded shell
   ============================================================ */
/* Sized to its content: the eyebrow, the title and the lead need presence, not
   a tall navy field — the trimmed padding keeps the hero authoritative while
   handing the page to the letter sooner. */
.hib-vision-hero{ position:relative;overflow:hidden;background:var(--hib-dark-shell);color:#EEF4FF;
  padding-block:clamp(52px,7.5vw,88px);text-align:center; }
.hib-vision-hero__glow{ position:absolute;inset-block-start:-26%;inset-inline-start:50%;transform:translateX(50%);
  width:64vw;max-width:680px;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(27,74,179,.22) 0%, transparent 62%);filter:blur(12px); }
.hib-vision-hero__inner{ position:relative;z-index:1; }
.hib-vision-hero__eyebrow{ margin-block-end:14px; }
.hib-vision-hero__title{ font-family:var(--hib-font-hero);font-weight:900;font-size:clamp(2.2rem,5.5vw,3.6rem);
  line-height:1.08;letter-spacing:normal;color:var(--hib-on-dark);margin:0 0 16px;text-wrap:balance; }
/* Floor at 17px — the hero lead must never read below the letter's own body. */
.hib-vision-hero__lead{ font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;color:var(--hib-on-dark-soft);
  max-width:600px;margin:0 auto; }

.hib-vision-prose{ margin-block-end:clamp(40px,6vw,64px); }

/* The values/credo strip is retired from the rendered page (its repeater data
   stays in the CMS): the letter's own principles run says the credo in Amir's
   words, and the methodology panel is the proof — a third restatement between
   them bought vertical cost without new information. */

/* ============================================================
   VIDEO WATCH — theater: portrait player + description beside it
   ============================================================ */
.hib-video-watch{ padding-block:clamp(28px,5vw,60px); }
.hib-video-watch__crumb{ margin-block-end:clamp(18px,3vw,30px); }
.hib-video-watch__grid{
  display:grid;grid-template-columns:1fr minmax(300px,360px);
  gap:clamp(28px,4vw,56px);
  /* The identity column is short by design — a chip and a title, with the lead
     and duration omitted whenever they are not authoritative. Pinned to the top
     it left a void beside the tall 9:16 player; centred, the title reads against
     the middle of the video and the two columns settle as one composition. */
  align-items:center;
}
@media (max-width:880px){ .hib-video-watch__grid{ align-items:start; } }
.hib-video-watch__info{ min-width:0; }
.hib-video-watch__title{
  font-family:var(--hib-font-hero);font-weight:900;font-size:clamp(1.8rem,3.2vw,2.6rem);
  line-height:1.12;letter-spacing:normal;color:var(--hib-text);margin:14px 0 14px;text-wrap:balance;
}
.hib-video-watch__lead{ font-size:var(--hib-body-l-size);line-height:1.6;color:var(--hib-text-secondary);margin:0 0 18px; }
.hib-video-watch__source{ display:flex;align-items:center;gap:10px;color:var(--hib-text-muted);font-size:var(--hib-label-m-size);margin-block-end:24px;flex-wrap:wrap; }
.hib-video-watch__source svg{ width:18px;height:18px;flex-shrink:0; }
.hib-video-watch__about{ margin-block:28px 0;padding-block-start:24px;border-block-start:1px solid var(--hib-rule-soft); }
.hib-video-watch__about-title{ font-family:var(--hib-font-display);font-size:1.3rem;color:var(--hib-text);margin:0 0 12px; }
.hib-video-watch__prose{ max-width:none;margin-inline:0;font-size:1rem; }

.hib-video-watch__player{ position:sticky;top:calc(var(--hib-header-h) + 16px); }
.hib-video-player--theater{
  width:min(360px, calc(min(62vh,560px) * 0.5625)); /* portrait, height-capped for harmony */
  max-width:100%;margin-inline:auto;
}
.hib-video-player--theater .hib-video-player__frame{ aspect-ratio:9 / 16; }
@media (max-width:880px){
  /* Stacked composition keeps the DOM's editorial order: the compact context
     block (topic chip, title, lead, duration) FIRST, the player immediately
     after it — a reader always learns what the guide is before meeting a large
     player. The tighter gap keeps "immediately" true. */
  .hib-video-watch__grid{ grid-template-columns:1fr;gap:clamp(18px,3.4vw,28px); }
  .hib-video-watch__player{ position:static; }
  .hib-video-player--theater{ width:min(330px,80vw);margin-inline:0; } /* opens at the reading edge (right in RTL), aligned with the context above it */
}

/* ============================================================
   FOOTER watermark — raised into the upper footer zone (desktop),
   clear of the bottom rule; enlarged on mobile.
   ============================================================ */
.hib-footer__watermark{ inset-block-start:-0.04em; inset-block-end:auto;
  /* keep the outlined "HIB" treatment; brighten a notch + bring on-brand
     (the base stroke is a faint legacy-orange — the footer marks are azure). */
  -webkit-text-stroke:1.2px rgba(169,198,255,.30); }
@media (max-width:767px){
  .hib-footer__watermark{ font-size:clamp(200px,66vw,300px);inset-block-start:-0.16em; }
}

/* On a phone the mark — still 66vw tall — met the brand line and the first list
   heading at the top of the stacked column. Dropping the block start to 2em
   parks it under the reading matter instead of behind it; it stays decoration,
   and nothing else in the footer moves to make room.

   The ceiling is 430px, not 600. `2em` is an offset in the mark's OWN type, so
   the taller the type the further it travels: its painted foot lands at about
   1.89 × the viewport width, while the bottom bar's copyright line sits at a
   fixed ~830px down the footer. The two meet at ~440px, so above that this
   would only trade the collision at the top of the footer for one at the
   bottom. 430px keeps ~19px of clearance and still covers every phone width
   (430, 428, 414, 393, 390, 375, 360, 320), widening as the screen narrows. */
@media (max-width:430px){
  .hib-footer__watermark{ inset-block-start:2em; }
}

/* Build credit — only the studio name is the link, so it takes the on-dark
   link treatment used elsewhere on navy (underline, not colour alone) while
   inheriting the bottom bar's own size and weight. It stays an inline word in
   the sentence: no tap-target box, which would inflate the bar's single line. */
.hib-footer__credit-link{
  color:var(--hib-primary-on-dark);text-decoration:underline;text-underline-offset:3px;
}
.hib-footer__credit-link:hover{ color:#fff; }
.hib-footer__credit-link:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:2px; }

/* ============================================================
   INTERNAL PAGE HEROES — unified navy family (match home hero)
   ============================================================ */
.hib-contact-hero,
.hib-addpro-hero,
.hib-hero--guides{
  position:relative;overflow:hidden;isolation:isolate;color:#EEF4FF;
  background:var(--hib-dark-shell);
  padding-block:clamp(56px,8vw,100px) clamp(40px,5vw,64px);
}
.hib-contact-hero::before,
.hib-addpro-hero::before,
.hib-hero--guides::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.hib-contact-hero::before{ background-image:url('../images/contact-hero.jpg'); }
.hib-addpro-hero::before{ background-image:url('../images/add-new-hero.jpg'); }
.hib-hero--guides::before{ background-image:url('../images/categories-hero.jpg'); }
.hib-contact-hero::after,
.hib-addpro-hero::after,
.hib-hero--guides::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,var(--hib-dark-shell) 0%,rgba(8, 30, 58, .9) 46%,rgba(8, 30, 58, .6) 100%);
}
.hib-hero--guides .hib-hero__pattern{ opacity:.05; }
/* titles -> Danidin light */
.hib-contact-hero__title,
.hib-addpro-hero__title,
.hib-hero--guides .hib-hero__title{ font-family:var(--hib-font-hero);color:var(--hib-on-dark); }
/* descriptions / subtitles -> light */
.hib-contact-hero__desc,
.hib-addpro-hero__desc,
.hib-hero--guides .hib-hero__subtitle{ color:var(--hib-on-dark-soft); }
/* badges -> light glass */
.hib-contact-hero__badge,
.hib-addpro-hero__badge{
  background:rgba(255,255,255,.1);border-color:rgba(169,198,255,.28);color:#CFE0FF;box-shadow:none;
}
.hib-contact-hero__badge svg,
.hib-addpro-hero__badge svg{ color:var(--hib-primary-on-dark); }
.hib-addpro-hero__trust-item,
.hib-contact-hero__meta,
.hib-contact-hero__meta *{ color:var(--hib-on-dark-soft); }
/* guides breadcrumb + stats -> light */
.hib-hero--guides .hib-domain-hero__stat-value{ color:#fff; }
.hib-hero--guides .hib-domain-hero__stat-label{ color:var(--hib-on-dark-muted); }
.hib-hero--guides .hib-domain-hero__stats{ border-block-start-color:rgba(169,198,255,.16); }

/* ============================================================
   GUIDES INDEX — premium gateway (HIB-MOCK-03)
   Scoped guide-gateway primitives; mockup amir-saban-brand/guides.html
   (navy .ghead hero + .gcats topic chips + .gfeat textured media).
   All here = always-loaded hib-extra.css → no purged mirror needed.
   ============================================================ */
/* editorial mono eyebrow above the navy hero title (mockup .eyebrow.on-dark) */
.hib-guides-hero__eyebrow{
  display:block;
  font-family:var(--hib-font-mono);
  font-size:var(--hib-label-s-size);font-weight:500;letter-spacing:normal;text-transform:uppercase;
  color:var(--hib-primary-on-dark);
  margin-block-end:var(--hib-space-3);
}
.hib-guides-hero__eyebrow::before{
  content:"";display:inline-block;width:26px;height:1px;vertical-align:middle;
  background:rgba(169,198,255,.55);margin-inline-end:10px;
}

/* topic chip jump-row on the navy hero (mockup .gcats) — real categories,
   anchor links (no JS, no hover-only state) */
.hib-guides-topics{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-block-start:var(--hib-space-6);
}
.hib-topic-chip{
  display:inline-flex;align-items:center;
  min-height:38px;padding:8px 16px;
  border-radius:var(--hib-radius-pill);
  border:1px solid rgba(169,198,255,.26);
  background:rgba(255,255,255,.04);
  color:rgba(235,242,255,.86);
  font-size:var(--hib-label-m-size);font-weight:600;line-height:1;
  text-decoration:none;
  transition:background .18s var(--hib-ease),border-color .18s var(--hib-ease),
    color .18s var(--hib-ease),transform .18s var(--hib-ease);
}
.hib-topic-chip:hover,
.hib-topic-chip:focus-visible{
  background:#fff;border-color:#fff;color:var(--hib-text);transform:translateY(-1px);
}
.hib-topic-chip--all{
  background:rgba(169,198,255,.16);border-color:rgba(169,198,255,.42);color:#fff;
}
.hib-topic-chip--all:hover,
.hib-topic-chip--all:focus-visible{
  background:#fff;color:var(--hib-text);border-color:#fff;
}

/* category section anchor offset for the chip jump (clears the sticky header) */
#hib-guides-categories{ scroll-margin-top:90px; }

/* featured/latest — textured navy fallback when a guide has no poster
   (mockup .gfeat .ph .dotgrid-dark) so the media reads intentional, not empty */
.hib-featured-video__thumb--texture{
  background-color:var(--hib-dark-raised);
  background-image:radial-gradient(rgba(169,198,255,.20) 1px, transparent 1.5px);
  background-size:18px 18px;
}
.hib-featured-video__thumb--texture::before{
  background:
    radial-gradient(120% 90% at 28% 0%, rgba(29,84,196,.36) 0%, transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%);
}

@media (max-width:600px){
  .hib-guides-topics{ gap:8px;margin-block-start:var(--hib-space-5); }
  /* 44px min tap target on touch viewports */
  .hib-topic-chip{ min-height:44px;padding:10px 15px;font-size:var(--hib-label-s-size); }
}

/* ── Vision story — one letter, one axis ─────────────────────────
   The heading introduces the section, then the letter runs as ONE unbroken
   prose column holding the container's reading edge for its whole length.
   Portrait + quote form a single media unit in the end-side margin column,
   anchoring the letter's opening; the text never changes measure, alignment
   or axis anywhere — there is no split, so there is no seam. */
.hib-vision-story__heading .hib-vision-prose h2,
.hib-vision-story__heading h2{ margin:0; }
/* The heading opens the section from the container's reading edge — the base
   prose measure would centre it as a floating line. (Its breathing room is set
   below, after the story-wide prose margin reset it must outrank.) */
.hib-vision-story__heading{ max-inline-size:none;margin-inline:0; }
/* The story hands off to the methodology at the compact step — one narrative,
   not two islands (the full step is kept above, against the hero). */
.hib-vision-story{ padding-block-end:var(--hib-section-compact-py); }
/* Reading column first (the RTL start track = the container's right edge),
   media margin column second. The aside is DOM-first for the phone's
   narrative order, so desktop placement is explicit. */
.hib-vision-story__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:clamp(28px,4vw,56px);align-items:start;
}
.hib-vision-story__aside{ grid-column:2;grid-row:1;min-inline-size:0;display:grid;gap:var(--hib-space-5);align-content:start; }
.hib-vision-story__text{ grid-column:1;grid-row:1; }
.hib-vision-story__media{
  margin:0;position:relative;border-radius:var(--hib-radius-xl);overflow:hidden;aspect-ratio:4 / 5;
  box-shadow:0 0 0 1px rgba(29,84,196,.16),var(--hib-shadow-band);
}
.hib-vision-story__media img{ width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block; }
.hib-vision-story__cap{
  position:absolute;inset-inline:0;inset-block-end:0;padding:44px 20px 16px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(to top,rgba(6,16,36,.92),transparent);
}
.hib-vision-story__cap-name{ font-family:var(--hib-font-hero);font-weight:900;font-size:1.3rem;color:#fff;line-height:1.1; }
.hib-vision-story__cap-role{ font-size:var(--hib-label-s-size);color:var(--hib-on-dark-soft); }
.hib-vision-story__text{ min-width:0; }
/* The letter is the page's longest read — cap it at the system's editorial
   measure instead of letting the grid track stretch it to ~86 Hebrew glyphs at
   1280+ (62ch of Ploni ≈ 70 rendered Hebrew characters per line), and pin it
   to the container's reading edge — the base prose auto-margins would float
   it toward the centre and break the axis. */
.hib-vision-story__text .hib-vision-prose{ max-inline-size:62ch;margin-inline-start:0;margin-inline-end:auto; }
.hib-vision-story .hib-vision-prose{ margin-block-end:0; }
/* Breathing room under the section heading — the system's own step, stated
   after (and at the specificity of) the story-wide prose margin reset above,
   which would otherwise zero it: the heading must clearly introduce the whole
   composition, not touch the portrait's first row. */
.hib-vision-story .hib-vision-story__heading{ margin-block-end:var(--hib-space-9); }
/* Pull-quote echo (paper = human testimony, §D): the compliment the letter
   itself quotes, directly under the portrait it belongs to, closed by the
   amber signature rule — the same glyph grammar as the profile's paper
   reviews. */
.hib-vision-story__quote{ position:relative;padding:var(--hib-space-6) var(--hib-space-5) var(--hib-space-5); }
.hib-vision-story__quote::before{
  content:"\201D";position:absolute;inset-block-start:8px;inset-inline-start:14px;
  font-family:var(--hib-font-hero);font-size:3.4rem;line-height:1;
  color:var(--hib-signature);opacity:.22;pointer-events:none;
}
.hib-vision-story__quote-text{
  margin:0 0 12px;font-family:var(--hib-font-display);font-weight:600;
  font-size:var(--hib-block-title-size);line-height:1.3;color:var(--hib-paper-ink);
  text-wrap:balance;
}
/* The letter's principles run ("חכמה. להבין את…"): the bold term takes its own
   line so the nine-entry credo scans as a list, while emphasis inside running
   prose stays inline. Presentation only — the words are the body's. */
.hib-vision-principle > strong:first-child{ display:block;margin-block-end:2px;color:var(--hib-text-strong); }
.hib-vision-principle + .hib-vision-principle{ margin-block-start:12px; }
/* Collapse while the letter still holds a readable measure: below ~900px the
   fixed 360px portrait would crush the prose toward ~40ch, so the column folds
   long before that (the old 760px breakpoint shipped exactly that crush at 768).
   Stacked, the DOM order is already the right narrative order: heading, then
   the author (portrait + quote), then the read. */
@media (max-width:900px){
  .hib-vision-story__grid{ grid-template-columns:1fr; }
  .hib-vision-story__aside{ grid-column:1;grid-row:1;justify-items:center; }
  .hib-vision-story__text{ grid-column:1;grid-row:2; }
  .hib-vision-story__media{ max-width:320px;inline-size:100%; }
  .hib-vision-story__quote{ max-width:320px;inline-size:100%; }
}

/* ── Profile media — bulletproof fallback (never an empty hero) ─── */
.hib-profile-hero__media--empty{
  display:grid;place-items:center;
  background:radial-gradient(120% 130% at 50% 0%,var(--hib-domain-soft) 0%,#FFFFFF 80%);
}
.hib-profile-hero__initials{
  font-family:var(--hib-font-hero);font-weight:900;font-size:clamp(3rem,8vw,5rem);line-height:1;
  color:var(--hib-primary);
}

/* Inline notice — success/info banner (full border + tint, no side-stripe). */
.hib-notice{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;margin-block-end:16px;
  border:1px solid var(--hib-border);border-radius:var(--hib-radius-m);
  background:var(--hib-surface,#fff);
  font-size:var(--hib-body-s-size);font-weight:600;line-height:1.35;color:var(--hib-text);
}
.hib-notice svg{ width:18px;height:18px;flex-shrink:0; }
.hib-notice--success{
  border-color:rgba(22,106,69,.32);
  background:rgba(22,106,69,.07);
  color:#15623F;
}
.hib-notice--success svg{ color:#1B7A4E; }

/* ── Profile work gallery (pro-uploaded images from registration) ─ */
.hib-profile-gallery__title{ font-family:var(--hib-font-display);font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--hib-text);margin:0 0 var(--hib-space-5); }
/* Work wall — uniform cover-cropped square tiles, centered last row.
   A flex row of equal tiles (not a fixed-row bento): the previous bento used
   feature row/col spans over a fixed 4-col track, which left ragged empty grid
   cells (a gray void) for any image count that didn't tile cleanly — e.g. 8
   images left 3 empty bottom-row cells. justify-content:center lets a short last
   row sit centered with symmetric margins instead of trailing gaps, so the wall
   reads clean at ANY count. Non-clickable (figures, not links). */
/* Starts at the reading edge. With `center` a wrapping row that did not fill
   — 7 tiles in a 3-up grid, which is the common case — floated its last tile
   into the middle of the column, reading as a mistake rather than a choice.
   Every other chip/tile run on this page starts; so does this one. */
.hib-profile-gallery{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--hib-space-3);
}
.hib-profile-gallery__item{
  flex:0 1 calc((100% - 2 * var(--hib-space-3)) / 3); /* R5 §E3 · 3 uniform 4:3 tiles per row */
  aspect-ratio:4 / 3;min-width:0;
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--hib-radius-m);border:1px solid var(--hib-border);
  box-shadow:var(--hib-shadow-card);
  transition:transform .28s var(--hib-ease),box-shadow .28s var(--hib-ease);
}
/* Enhanced into a zoom trigger by hib-main.js (role=button + tabindex + the
   native <dialog> lightbox). With no JS the tile is a plain figure and the
   image itself is the content, so nothing here is a dead control. */
.hib-profile-gallery__item[data-hib-zoom]{ cursor:zoom-in; }
.hib-profile-gallery__item[data-hib-zoom]:focus-visible{
  outline:2px solid var(--hib-primary);outline-offset:3px;
}
.hib-profile-gallery__item:hover{ transform:translateY(-3px);box-shadow:var(--hib-shadow-card-hover);z-index:2; }
.hib-profile-gallery__img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--hib-ease); }
.hib-profile-gallery__item:hover .hib-profile-gallery__img{ transform:scale(1.06); }
/* hover sheen (skipped on a branded-fallback tile, which owns its own ::after) */
.hib-profile-gallery__item:not(.hib-media-failed)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,30,58,.40));
  opacity:0;transition:opacity .25s var(--hib-ease);
}
.hib-profile-gallery__item:not(.hib-media-failed):hover::after{ opacity:1; }
@media (max-width:900px){
  .hib-profile-gallery__item{ flex-basis:calc((100% - 1 * var(--hib-space-3)) / 2); } /* 2 per row */
}
@media (max-width:560px){
  .hib-profile-gallery__item{ flex-basis:calc((100% - 1 * var(--hib-space-3)) / 2); } /* 2 per row */
}
/* A single photo is a modest inline figure, not one tile stranded in a wall
   built for many (§C.3). It keeps its own natural proportions and sits at the
   start of the column rather than centred in a row of empty space. */
/* Overflow tiles are real markup hidden by CSS only, so the no-JS path keeps
   the entire gallery and the toggle (which ships `hidden`) is never a dead
   control. Mirrors the service-region disclosure exactly. */
.hib-profile-gallery.is-clamped .hib-profile-gallery__item--over{ display:none; }
.hib-profile-gallery.is-open .hib-profile-gallery__item--over{ display:block; }
.hib-profile-gallery__more{
  display:inline-flex; align-items:center; gap:6px;
  min-block-size:var(--hib-tap-min,44px); margin-block-start:var(--hib-space-4);
  padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--hib-font-ui); font-size:var(--hib-label-m-size); font-weight:600;
  color:var(--hib-primary); text-decoration:underline; text-underline-offset:3px;
  letter-spacing:normal;
}
.hib-profile-gallery__more:hover{ color:var(--hib-primary-hover); }
.hib-profile-gallery__more:focus-visible{ outline:2px solid var(--hib-accent);outline-offset:2px; }

.hib-profile-gallery--single{ justify-content:flex-start; }
.hib-profile-gallery--single .hib-profile-gallery__item{
  flex:0 1 auto;width:min(340px,100%);aspect-ratio:4 / 3;
}

/* ── Shared graceful media fallback ──────────────────────────────────────────
   When a content image's file is genuinely missing (the attachment record
   exists, so the template's no-thumbnail branch never fires, but the file is
   gone) the browser paints a harsh broken-image box. hib-main.js flags the
   media container with .hib-media-failed on the <img> error event (and for
   already-broken cached imgs on init); CSS then degrades it to a calm, branded
   navy tile with a faint hexagon mark — matching the navy authority surfaces.
   Pure progressive enhancement: production images load normally and this never
   fires; if the JS never runs, behaviour is unchanged. No layout shift (the
   container keeps its box; the broken <img> is just hidden). */
.hib-media-failed{
  position:relative;
  background:radial-gradient(120% 120% at 50% 0%, #0d2748 0%, var(--hib-dark-bg,var(--hib-dark-bg)) 72%);
}
.hib-media-failed img{ opacity:0 !important; }
.hib-media-failed::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:34%; max-width:64px; aspect-ratio:1;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFD3F2' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20.4 7v10L12 21.5 3.6 17V7z'/%3E%3C/svg%3E");
  opacity:.28;
  pointer-events:none;
}

/* ── Guides index hero meta ────────────────────────────────────────────────────
   A calm meta line in place of oversized stat columns. The category-card rules
   that used to sit here were emitted only by archive-video.php, whose twelve
   equal tiles the prioritised topic structure replaced in P3c; with no template
   left to emit them they were dead weight in an always-loaded sheet. The
   .hib-category-card primitive itself stays in the design system. */

/* hero: compact, de-emphasised meta line (replaces 3 oversized stat columns) */
.hib-guides-hero__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-block-start:var(--hib-space-6);
  font-family:var(--hib-font-mono);font-size:var(--hib-label-s-size);letter-spacing:normal;
  color:rgba(234,241,251,.72);
}
.hib-guides-hero__meta-item{ display:inline-flex;align-items:baseline;gap:5px; }
.hib-guides-hero__meta-item b{ color:#fff;font-weight:600;font-size:1rem; }
.hib-guides-hero__meta-sep{ color:rgba(234,241,251,.34); }

/* ── Field video (סרטון מהשטח) — portrait 9:16 reel ─ */
.hib-profile-reel__title{ font-family:var(--hib-font-display);font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--hib-text);margin:0 0 var(--hib-space-5); }
/* The facade is a 9:16 portrait card, so its width sets the whole row's height:
   at the old 320px cap it stood 569px tall beside an aside holding two short
   lines, and the section spent ~686px delivering a sentence and a button. The
   cap comes down to 240px (427px tall) — still unmistakably a reel, ~140px less
   band — and the row keeps centring the aside against it so the remaining
   difference reads as breathing at both edges rather than a hole under the text. */
/* The row HUGS its content instead of stretching to the container.
   `1fr` gave the caption an ~830px column for a ~46ch sentence, so two lines of
   text floated in the middle of a 427px-tall row with roughly a third of the
   page width empty beside them — the layout was reserving space, not using it.
   The caption column is now sized to its own measure and the pair sits as one
   compact unit at the reading edge, so the space that remains is margin around
   a composed object rather than a hole inside one.

   This is also the hierarchy the sequence needs: the gallery is the stronger
   medium and takes the full container; the video is the weaker one — a card
   that deliberately shows no frame — and reads as its coda, not its peer. */
.hib-profile-reel{
  display:grid;grid-template-columns:minmax(0,var(--hib-video-cap,190px)) minmax(0,44ch);
  justify-content:start;
  gap:clamp(20px,2.4vw,32px);align-items:center;
}
/* The aside is a caption for the card beside it, so it starts where the card
   starts. Centred against a 425px portrait it floated in the middle of the row
   with ~150px of slack above and below two lines of text — the shape of a
   layout that has more space than content rather than a considered pairing. */
.hib-profile-reel__aside{ max-width:44ch; }
/* R5 (§E3 "facade וידאו"; §I·שלב 5) — a 9:16 branded poster that OPENS the real
   clip, never an auto-loading embed. A Facebook reel opens on Facebook (its
   plugin player returns a blank fbcdn-403 frame in the page); a YouTube clip is
   upgraded to an inline player on click by hib-main.js. No scraped thumbnail, no
   empty box. */
.hib-profile-reel__facade{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--hib-space-3);
  aspect-ratio:var(--hib-video-ar,9/16);width:100%;max-width:var(--hib-video-cap,190px);
  appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;
  padding:var(--hib-space-6);text-align:center;text-decoration:none;
  border-radius:var(--hib-radius-l);overflow:hidden;color:var(--hib-dark-text);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(43,99,214,.34), transparent 62%),
    linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
  border:1px solid rgba(169,198,255,.28);box-shadow:var(--hib-shadow-l);
  transition:transform .3s var(--hib-ease),box-shadow .3s var(--hib-ease),border-color .3s var(--hib-ease);
}
.hib-profile-reel__facade::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}
.hib-profile-reel__facade:hover,
.hib-profile-reel__facade:focus-visible{ transform:translateY(-3px);border-color:rgba(169,198,255,.5);box-shadow:var(--hib-shadow-band); }
.hib-profile-reel__facade:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:3px; }
.hib-video-facade__glyph{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(169,198,255,.4);color:#fff;
  transition:transform .3s var(--hib-ease),background .3s var(--hib-ease);
}
.hib-profile-reel__facade:hover .hib-video-facade__glyph{ transform:scale(1.06);background:rgba(255,255,255,.18); }
.hib-video-facade__glyph svg{ width:26px;height:26px;margin-inline-start:3px; } /* optical centring of the play triangle */
.hib-video-facade__label{ font-family:var(--hib-font-ui);font-weight:600;font-size:var(--hib-body-lede-size);color:#fff; }
/* Official provider player, injected on click by hib-main.js (§20.15.1 — the
   reel plays the Facebook plugin player / YouTube INSIDE the page). */
/* Matches the facade cap exactly, so upgrading to the real player on click
   swaps one box for another of the same size instead of jumping the layout. */
.hib-profile-reel__player{
  position:relative;aspect-ratio:var(--hib-video-ar,9/16);width:100%;max-width:var(--hib-video-cap,190px);
  border-radius:var(--hib-radius-l);overflow:hidden;
  background:#000;border:1px solid var(--hib-border);box-shadow:var(--hib-shadow-l);
}
.hib-profile-reel__player iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; }
.hib-profile-reel__player:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:2px; }
/* Short loading state until the provider frame paints — a calm centred spinner. */
.hib-profile-reel__player.is-loading{ background:var(--hib-dark-raised); }
.hib-profile-reel__player.is-loading::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:1;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(169,198,255,.28);border-block-start-color:var(--hib-primary-on-dark);
  animation:hib-geo-spin .8s linear infinite;
}
/* Outbound facade — the provider-share case whose real video id is only knowable
   behind a redirect (Facebook /share/v/, vm.tiktok.com …). It is an <a>, so it
   inherits the same card and states as the play button and only adds the line
   that says where activating it goes. A control that leaves the site says so on
   its face; it never mimics an in-page player it cannot become. */
.hib-video-facade__external{
  font-family:var(--hib-font-ui);font-size:var(--hib-label-s-size,.78rem);font-weight:600;
  color:var(--hib-dark-text-soft,rgba(255,255,255,.72));
  display:inline-flex;align-items:center;gap:6px;
}
.hib-video-facade__external::before{
  content:"";width:13px;height:13px;flex:none;background-color:currentColor;
  /* arrow-out-of-box, drawn as a mask so it inherits the label colour exactly. */
  -webkit-mask:var(--hib-ic-external) center/contain no-repeat;
          mask:var(--hib-ic-external) center/contain no-repeat;
}
:root{
  --hib-ic-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1.8 1.8 0 0 1-1.8 1.8H5A1.8 1.8 0 0 1 3.2 19V7.8A1.8 1.8 0 0 1 5 6h5'/%3E%3C/svg%3E");
}
/* No-JS reel fallback — an inline, explicitly-labelled last resort (not the
   absolute-over-frame guide variant). */
.hib-video-facade__fallback--inline{
  position:static;display:inline-flex;margin-block-start:var(--hib-space-3);
  padding:0;background:none;color:var(--hib-primary);font-weight:600;font-size:var(--hib-label-m-size);
  text-decoration:underline;
}
@media (prefers-reduced-motion:reduce){
  .hib-profile-reel__facade,
  .hib-profile-reel__facade:hover,
  .hib-profile-reel__facade:focus-visible,
  .hib-video-facade__glyph{ transform:none;transition:none; }
  .hib-profile-reel__player.is-loading::after{ animation:none; }
}
.hib-profile-reel__aside{ max-width:44ch; }
.hib-profile-reel__lead{ font-size:var(--hib-body-profile-size,1.05rem);line-height:1.6;color:var(--hib-text-strong);margin:0 0 var(--hib-space-4); }
.hib-profile-reel__note{ display:inline-flex;align-items:center;gap:var(--hib-space-2);font-size:var(--hib-label-m-size,.875rem);font-weight:600;color:var(--hib-primary); }
.hib-profile-reel__note svg{ width:18px;height:18px;flex:none; }
@media (max-width:760px){
  .hib-profile-reel{ grid-template-columns:1fr;justify-items:center;text-align:center; }
  /* 300px at 390 stood 533px tall — over half a mobile viewport for a card
     that deliberately shows no frame of the clip. 260px keeps the reel shape
     and returns ~70px of scroll. */
  .hib-profile-reel__facade,
  .hib-profile-reel__player{ max-width:var(--hib-video-cap-s,260px); }
  .hib-profile-reel__aside{ text-align:center; }
}

/* — The reel row when the clip is NOT a reel —
   The 190px cap is the portrait card's cap: it is what makes a 9:16 clip read as
   a held phone beside its caption. A landscape clip at that width is 190x107 — a
   stamp, technically the right ratio and visually nothing — so the cap belongs to
   the ORIENTATION rather than to the component. Only `--hib-video-cap` changes;
   the surface, radius, shadow, hover and the caption beside it are untouched, so
   a landscape clip is the same object at a width that suits it.
   Portrait emits no class at all and never reaches these rules. */
.hib-profile-reel.hib-video--landscape{ --hib-video-cap:420px;--hib-video-cap-s:100%; }
.hib-profile-reel.hib-video--square{ --hib-video-cap:300px;--hib-video-cap-s:320px; }

/* ============================================================
   Searchable combobox — styles the markup hib-main.js injects
   when enhancing long native <select>s (.hib-search-v2__select +
   .hib-field__input--select). Without this the panel renders
   inline and the native <select> stays visible (broken hero search).
   ============================================================ */
.hib-combo{ position:relative; width:100%; }

/* native <select> kept ONLY for GET submission — visually removed */
.hib-combo__native{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* trigger button — inherits the glass-field look of hib-search-v2 */
.hib-combo__btn{
  display:flex;align-items:center;gap:var(--hib-space-2);width:100%;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--hib-font-body);font-size:var(--hib-body-m-size);
  color:var(--hib-dark-text);text-align:start;line-height:1.3;direction:rtl;
}
.hib-combo__value{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hib-combo__value.is-placeholder{ color:rgba(240,237,229,.55); }
.hib-combo__caret{ width:16px;height:16px;flex:none;opacity:.7;transition:transform .22s var(--hib-ease); }
.hib-combo.is-open .hib-combo__caret{ transform:rotate(180deg); }
.hib-combo__btn:focus-visible{ outline:2px solid rgba(240,237,229,.5);outline-offset:3px; }

/* popover panel — solid light card floating below the field */
.hib-combo__panel{
  position:absolute;z-index:60;inset-inline-start:0;top:calc(100% + 10px);
  min-width:max(100%,260px);max-width:min(360px,92vw);
  background:#fff;border:1px solid var(--hib-border);border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-l);padding:var(--hib-space-2);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.96);transform-origin:top center;
  /* `visibility` is stepped, not eased: it must flip to `visible` in the SAME
     frame the panel opens, or the focus the script hands to the filter box on
     that frame lands on a still-hidden element and is silently dropped — which
     is what stranded focus on the trigger on the first open. Closing keeps the
     old behaviour: the flip back is delayed until the fade has finished. */
  transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear .28s;
}
.hib-combo.is-open .hib-combo__panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .hib-combo__panel{ transition:opacity .12s linear,visibility 0s linear .12s;transform:none; }
  .hib-combo.is-open .hib-combo__panel{ transition:opacity .12s linear,visibility 0s linear 0s;transform:none; }
}

.hib-combo__search{
  width:100%;box-sizing:border-box;margin-block-end:var(--hib-space-2);
  padding:var(--hib-space-3) var(--hib-space-4);direction:rtl;
  font-family:var(--hib-font-body);font-size:var(--hib-input-size);color:var(--hib-text);
  background:var(--hib-domain-soft,#f3f6fb);border:1px solid var(--hib-border);
  border-radius:var(--hib-radius-s);outline:none;
}
.hib-combo__search:focus{ border-color:var(--hib-primary);box-shadow:0 0 0 3px rgba(29,84,196,.14); }
.hib-combo__search::placeholder{ color:var(--hib-text-muted); }

.hib-combo__list{ list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch; }
/* Short lists have no filter box, so the LIST itself holds DOM focus. A UA
   outline around it would draw a second ring inside the panel's own focus
   surface; the active option's ring below is the one focus indicator, and it is
   always present while the list has focus. */
.hib-combo__list:focus,
.hib-combo__list:focus-visible{ outline:none; }
.hib-combo__option{
  padding:var(--hib-space-3) var(--hib-space-4);border-radius:var(--hib-radius-s);direction:rtl;
  font-family:var(--hib-font-body);font-size:var(--hib-body-s-size);color:var(--hib-text);line-height:1.3;cursor:pointer;
  transition:background .12s var(--hib-ease),color .12s var(--hib-ease);
}
.hib-combo__option:hover{ background:var(--hib-domain-soft,#eef3fb); }
/* Keyboard-active option. Focus never leaves the search input, so this is the
   only thing that tells a keyboard user where they are — it needs its own mark,
   distinct from "selected", and it must survive on top of the selected row. */
.hib-combo__option.is-active{ background:var(--hib-domain-soft,#eef3fb);box-shadow:inset 0 0 0 2px var(--hib-primary); }
.hib-combo__option.is-selected{ background:var(--hib-primary);color:#fff;font-weight:600; }
.hib-combo__option.is-selected.is-active{ box-shadow:inset 0 0 0 2px var(--hib-primary),inset 0 0 0 4px #fff; }
.hib-combo__empty{ padding:var(--hib-space-3) var(--hib-space-4);font-size:var(--hib-label-m-size);color:var(--hib-text-muted);text-align:center; }

/* field variant — light bordered context (add-professional form) */
.hib-combo--field .hib-combo__btn{
  height:50px;padding:0 var(--hib-space-4);
  font-family:var(--hib-font-ui);font-size:var(--hib-body-s-size);color:var(--hib-text);
  border:1px solid var(--hib-border);border-radius:var(--hib-radius-s);background:var(--hib-surface,#fff);
  transition:border-color var(--hib-duration-base) var(--hib-ease),box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-combo--field .hib-combo__btn:hover{ border-color:var(--hib-border-strong); }
.hib-combo--field.is-open .hib-combo__btn{ border-color:var(--hib-primary);box-shadow:var(--hib-shadow-focus); }
/* ── Cursor spotlight on contact choice cards (pointer-follow glow) ──
   JS (hib-main.js) feeds --hib-mx/--hib-my; gracefully static without it. */
.hib-contact-card{ position:relative;overflow:hidden;--hib-mx:50%;--hib-my:0%; }
.hib-contact-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--hib-mx) var(--hib-my),rgba(29,84,196,.10),transparent 70%);
  opacity:0;transition:opacity .3s var(--hib-ease);
}
.hib-contact-card:hover::before{ opacity:1; }
.hib-contact-card>*{ position:relative;z-index:1; }
@media (prefers-reduced-motion:reduce){ .hib-contact-card::before{ display:none; } }

/* Cursor spotlight on pro cards — same pointer-follow pattern as contact cards.
   Clipped by .hib-card's overflow:hidden. JS feeds --hib-mx/--hib-my (px). */
.hib-pro-card-v2{ position:relative;--hib-mx:50%;--hib-my:0%; }
.hib-pro-card-v2::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--hib-mx) var(--hib-my),rgba(29,84,196,.10),transparent 70%);
  opacity:0;transition:opacity .3s var(--hib-ease);
}
.hib-pro-card-v2:hover::before{ opacity:1; }
.hib-pro-card-v2>*{ position:relative;z-index:1; }
@media (prefers-reduced-motion:reduce){ .hib-pro-card-v2::before{ display:none; } }

/* ============================================================
   PRO CARD — photo-forward redesign (cleaner, more professional).
   Drops the heavy colored distance strip; location + featured ride
   as overlay chips on a taller photo. Stronger media presence.
   ============================================================ */
/* Portrait media — fits vertical selfies (4:5) instead of cropping to a strip. */
.hib-pro-card-v2__media{
  height:auto;aspect-ratio:8 / 9;
  border-start-start-radius:inherit;border-start-end-radius:inherit;
}
.hib-pro-card-v2__media img{ object-position:center 20%; }
/* Bottom scrim — keeps the location chip legible over any photo. */
.hib-pro-card-v2__media::before{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:38%;z-index:2;
  background:linear-gradient(to top,rgba(7,22,46,.55),transparent);pointer-events:none;
}
.hib-pro-card-v2__media--empty::before{ display:none; }

/* Location chip — frosted dark pill, bottom-start over the photo. */
.hib-pro-card-v2__loc{
  position:absolute;z-index:3;inset-block-end:10px;inset-inline-start:10px;
  display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 20px);
  padding:5px 11px;border-radius:var(--hib-radius-pill);
  background:rgba(7,22,46,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:.75rem;font-weight:600;line-height:1.15;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 14px -6px rgba(11,37,70,.7);
}
.hib-pro-card-v2__loc svg{ width:13px;height:13px;flex-shrink:0;opacity:.9; }

/* Featured ribbon → top-end corner, clean white pill with gold star. */
.hib-pro-card-v2__featured-tag{
  inset-block-start:10px;inset-inline-end:10px;inset-inline-start:auto;
  background:#fff;color:var(--hib-primary);
  box-shadow:0 6px 16px -6px rgba(11,37,70,.5);
}
.hib-pro-card-v2__featured-tag svg{ color:var(--hib-gold,#E8A23D); }

/* Identity — a touch more presence below the photo. */
.hib-pro-card-v2__header{ padding-block-start:var(--hib-space-4); }
.hib-pro-card-v2__name{ font-size:var(--hib-body-lede-size); }

@media (max-width:767px){
  :root{ --hib-pro-card-media-h:184px; }
}

.hib-combo--field .hib-combo__panel{ inset-inline-end:0;min-width:100%;max-width:none; }
.hib-combo--field .hib-combo__value.is-placeholder{ color:var(--hib-text-muted); }
.hib-combo--field .hib-combo__btn:focus-visible{ outline:none;border-color:var(--hib-primary);box-shadow:0 0 0 3px rgba(29,84,196,.14); }

/* ============================================================
   POLICY hero (תקנון בעלי מקצוע) — join the unified navy family
   so it matches contact / add-pro / guides internal heroes.
   ============================================================ */
.hib-policy-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#EEF4FF;
  background:var(--hib-dark-shell);
  background-image:
    radial-gradient(ellipse 90% 90% at 50% -10%, rgba(29,84,196,.30) 0%, transparent 60%),
    linear-gradient(160deg,var(--hib-dark-shell) 0%,#04101F 100%);
  padding-block:clamp(56px,8vw,100px) clamp(40px,5vw,64px);
}
.hib-policy-hero__title{ font-family:var(--hib-font-hero);color:var(--hib-on-dark); }
.hib-policy-hero__desc{ color:var(--hib-on-dark-soft); }
.hib-policy-hero__stat{ color:var(--hib-on-dark-muted); }
.hib-policy-hero__stat svg{ opacity:.8; }
.hib-policy-hero .hib-badge--domain{ background:rgba(255,255,255,.12);color:#CFE0FF; }
.hib-policy-hero .hib-badge--doc{ background:rgba(169,198,255,.16);color:#CFE0FF; }

/* ============================================================
   AMIR-BRAND REFINEMENT LAYER
   Sharpens the committed system toward the amirsaban brand power:
   gradient CTAs, editorial card accents, premium hexagon mark.
   Additive — loads after the design system, overrides on equal
   specificity. Safe to remove this block to revert.
   ============================================================ */

/* — Primary button: azure gradient + inner highlight, bolder — */
.hib-btn--primary{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));
  box-shadow:var(--hib-shadow-btn);
  font-weight:700;
}
.hib-btn--primary:hover{
  background:linear-gradient(180deg,var(--hib-primary),var(--hib-primary-hover));
  box-shadow:var(--hib-shadow-btn-hover);
}

/* — Cards: thinner editorial border + azure top-edge accent on hover —
   The ::after bar is the ONE standardized card accent (2px): pro cards
   (homepage previews + directory) and the guide page's related cards all
   ride these same declarations, so the hover cannot drift per surface. */
.hib-card{ border-color:var(--hib-rule-soft); }
.hib-card::after,
.hib-guide-card::after{
  content:"";position:absolute;inset-inline:0;inset-block-start:0;height:2px;z-index:4;
  background:var(--hib-primary);transform:scaleX(0);transform-origin:50%;
  transition:transform .26s var(--hib-ease);opacity:.92;pointer-events:none;
}
.hib-card:hover::after,
.hib-guide-card:hover::after,
.hib-guide-card:focus-visible::after{ transform:scaleX(.4); }
.hib-pro-card-v2.hib-card:hover{ border-color:var(--hib-text); }
@media (prefers-reduced-motion:reduce){
  .hib-card::after,
  .hib-guide-card::after{ transition:none; }
}

/* (The CTA band's radial-azure surface moved to the shared .hib-cta-surface
   class — see the SHARED CTA SURFACE block.) */

/* — Premium connection mark: hexagon shell + two linked nodes —
   Header is solid white → dark mark (default). Footer is navy → white mark. */
.hib-mark{ display:inline-block;vertical-align:middle;color:var(--hib-text);flex:0 0 auto; }
.hib-mark .hx{ stroke:currentColor; }
.hib-mark .n1{ fill:currentColor; }
.hib-mark .n2{ fill:var(--hib-primary); }
.hib-mark .lk{ stroke:var(--hib-primary); }
.hib-footer .hib-mark{ color:#fff; }
.hib-footer .hib-mark .n2{ fill:var(--hib-primary-on-dark); }
.hib-footer .hib-mark .lk{ stroke:var(--hib-primary-on-dark); }
.hib-header__logo,
.hib-footer__brand{ display:inline-flex;align-items:center;gap:9px; }

/* ============================================================
   PHASE 3 — FRONT PAGE COMPOSITION (home only)
   Founder section → dark navy authority band, founder reach
   stats, hexagon trust marks, premium empty-media cards.
   All selectors here are front-page-exclusive (hib-amir-section /
   hib-hero-founder / hib-pros-grid render only on front-page.php),
   so nothing leaks to domain / profile / guide / form pages.
   ============================================================ */

/* — Founder band: pale → dark navy authority anchor — */
.hib-amir-section{
  background:
    radial-gradient(1100px 540px at 86% -12%, rgba(43,99,214,.30), transparent 60%),
    linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
  border-block:1px solid rgba(169,198,255,.12);
  color:var(--hib-dark-text);
}
.hib-amir-section::before{
  background:linear-gradient(to right,transparent,rgba(169,198,255,.55) 40%,rgba(169,198,255,.55) 60%,transparent);
  opacity:.6;
}
.hib-amir-section::after{ color:rgba(169,198,255,.05); }      /* ghost watermark */
.hib-amir-section__content{ color:var(--hib-dark-text); }
.hib-amir-section__kicker{
  color:var(--hib-primary-on-dark);display:inline-flex;align-items:center;gap:9px;
}
.hib-amir-section__kicker::before{ background:var(--hib-primary-on-dark);opacity:.8; }
.hib-amir-section__hex{ color:var(--hib-primary-on-dark);flex:0 0 auto; }
.hib-amir-section__title{ color:#fff; }
.hib-amir-section__quote{ color:var(--hib-dark-text); }
.hib-amir-section__point{ color:rgba(234,241,251,.86); }
.hib-amir-section__point svg{ color:var(--hib-primary-on-dark); }
.hib-amir-section__sig-name{ color:#fff; }
.hib-amir-section__sig-role{ color:var(--hib-primary-on-dark);opacity:1; }
.hib-amir-section__photo{ border-color:rgba(169,198,255,.28); }
/* verified pill on the portrait → azure-soft glass + hexagon check */
.hib-amir-section__verified{
  background:rgba(8,20,40,.74);backdrop-filter:blur(8px);
  border:1px solid rgba(169,198,255,.30);color:var(--hib-dark-text);
}
.hib-amir-section__verified-hex{ color:var(--hib-primary-on-dark);flex:0 0 auto; }

/* — Founder reach / proof stats (mono, editorial) — */
.hib-founder-reach{
  display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,46px);
  margin-block:26px 4px;padding-block-start:24px;
  border-block-start:1px solid rgba(169,198,255,.16);
}
.hib-founder-reach__item{ display:flex;flex-direction:column;gap:3px; }
.hib-founder-reach__k{
  font-family:var(--hib-font-mono);font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:clamp(1.6rem,2.7vw,2.35rem);font-weight:500;letter-spacing:normal;
  color:#fff;line-height:1;
}
.hib-founder-reach__u{ color:var(--hib-primary-on-dark); }
.hib-founder-reach__l{ font-size:var(--hib-label-s-size);font-weight:600;color:var(--hib-on-dark-muted); }

/* — Listing cards: make empty-media tiles premium, not soft-gray —
   scoped to the front-page grid so the shared profile card is untouched */
.hib-pros-grid .hib-pro-card-v2__media--empty{
  background:
    radial-gradient(rgba(169,198,255,.12) 1px, transparent 1px) 0 0/18px 18px,
    linear-gradient(160deg,#0E2C54 0%,var(--hib-dark-raised) 100%);
}
.hib-pros-grid .hib-pro-card-v2__media--empty svg.hib-media-placeholder{
  color:var(--hib-primary-on-dark);opacity:.5;
}

/* ============================================================
   SEARCH / RESULTS PHASE — live plumbing domain (front-page)
   Premium search surface, sharper chips + results summary, and
   denser editorial listing cards. Card rules are scoped to
   .hib-pros-grid, so the shared profile card (single-plumbers,
   no .hib-pros-grid ancestor) is untouched. Additive + reversible;
   hib-design-system.css unchanged, so no PurgeCSS rebuild needed.
   ============================================================ */

/* — Search module: frosted glass → solid white product surface —
   A deliberate pale surface against the dark hero = brand tension. */
.hib-hero-founder__content .hib-search-v2{
  background:#fff;border:1px solid rgba(14,44,84,.08);
  box-shadow:var(--hib-shadow-band);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hib-hero-founder__content .hib-search-v2__label{ color:var(--hib-text-muted);font-weight:500; }
.hib-hero-founder__content .hib-search-v2__input,
.hib-hero-founder__content .hib-search-v2__select{ color:var(--hib-text);font-weight:600; }
.hib-hero-founder__content .hib-search-v2__input::placeholder{ color:var(--hib-text-muted);font-weight:400; }
.hib-hero-founder__content .hib-search-v2__select option{ background:#fff;color:var(--hib-text); }
.hib-hero-founder__content .hib-search-v2__divider{ background:var(--hib-rule-soft); }
.hib-hero-founder__content .hib-search-v2__input:focus-visible,
.hib-hero-founder__content .hib-search-v2__select:focus-visible{ outline-color:var(--hib-primary); }
.hib-hero-founder__content .hib-search-v2__btn{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));
  box-shadow:var(--hib-shadow-btn);
  font-weight:700;border-radius:var(--hib-radius-m);
}
.hib-hero-founder__content .hib-search-v2__btn:hover{
  opacity:1;background:linear-gradient(180deg,var(--hib-primary),var(--hib-primary-hover));
}

/* — Filter chips: sharper active state (azure gradient) — */
.hib-filter-bar .hib-filter-chip.is-active{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));
  border-color:var(--hib-primary);
}

/* — Results summary: mono count + sharper editorial proof line — */
.hib-results-summary__text strong{
  font-family:var(--hib-font-mono);font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:1.12rem;letter-spacing:normal;
}

/* — Listing cards (front-page grid only): denser, editorial, trust-led — */
.hib-pros-grid .hib-pro-card-v2__name{
  font-family:var(--hib-font-display);font-weight:900;
  font-size:var(--hib-card-title-size);letter-spacing:normal;line-height:var(--hib-card-title-lh);
}
.hib-pros-grid .hib-pro-card-v2__rating{
  font-family:var(--hib-font-mono);font-feature-settings:"tnum" 1,"lnum" 1;font-size:var(--hib-label-m-size);
}
/* verified: generic green → azure brand trust chip (denser proof) */
.hib-pros-grid .hib-pro-card-v2__verified{
  color:var(--hib-primary);background:rgba(27,74,179,.09);
  padding:3px 9px;border-radius:var(--hib-radius-pill);font-weight:700;
}
/* specialty tags: softer azure fill, less directory-card outline */
.hib-pros-grid .hib-pro-card-v2__tag{
  background:var(--hib-domain-soft);border-color:transparent;color:var(--hib-text-secondary);
}

/* ============================================================
   PROFILE PHASE — single-plumbers.php (profile-exclusive)
   Pale/soft hero → dark navy authority block to connect with the
   refined homepage; hexagon trust treatment; premium proof + CTA.
   All selectors are profile-only (.hib-profile-*, .hib-review-*),
   so nothing leaks to home / search / forms / guides. Additive;
   hib-design-system.css untouched → no PurgeCSS rebuild.
   ============================================================ */

/* — Hero: pale → dark navy authority block — */
.hib-profile-hero{
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(43,99,214,.30), transparent 60%),
    linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
  color:var(--hib-dark-text);
}
.hib-profile-hero::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}
.hib-profile-hero__name{ color:#fff; }
.hib-profile-hero__media{
  border-color:rgba(169,198,255,.28);
  box-shadow:0 0 0 1px rgba(169,198,255,.18), var(--hib-shadow-band);
}
/* category chip — azure-soft glass on dark */
.hib-profile-hero .hib-badge--domain{ background:rgba(169,198,255,.14); color:#CFE0FF; }

/* ── Profile hero v3 — one compact editorial identity composition ────────────
   The band is the introduction to a person, so it is composed as an
   introduction: portrait beside identity, then what they do, then what can be
   checked about them, then who vouches for them, then how to reach them. One
   reading column, one alignment axis, in that order at every width.

   What v2 got wrong, and why each rule below exists:
   · the band was sized by padding (100px + 86px at 1440) rather than by its
     content, so most of it was empty navy — padding is now content-scaled;
   · the composition stretched the full 1200px container while the text stayed
     start-aligned, leaving a dead third — the grid now has a deliberate
     maximum width and is centred in the container;
   · the portrait was an avatar-sized square detached from the name — it is now
     a 4:5 portrait of real presence, and on mobile it sits IN the identity row
     instead of floating centred above a start-aligned stack;
   · the category chip shared a row with the verification seal, so a
     classification and a recommendation read as one kind of thing — they are
     now separate components with different weights.

   The mobile row change is layout only: `display:contents` hands the summary's
   children to the grid so the portrait and identity can share a row, with no
   second DOM and no duplicated content. */
.hib-profile-hero--v3{
  /* Both ends from the spacing scale, so the band keeps the site's vertical
     rhythm instead of inventing one: 48px at the small end, 80px at the large. */
  padding-block:clamp(var(--hib-space-9),5vw,var(--hib-space-12));
}
.hib-profile-hero__crumbs{ margin-block-end:var(--hib-space-6); }
.hib-profile-hero__crumbs ol{ margin-block-end:0; } /* the nav margin owns the profile gap */

/* `display:grid` is restated at every breakpoint below because the design
   system collapses this grid to a single flex column at ≤1023px and ≤767px —
   rules written for the old stacked hero. v3 keeps the portrait beside the
   identity all the way down, so those collapses are overridden rather than
   inherited, and the summary's `order:-1` (which used to lift the text above
   the portrait) is neutralised with it.

   Proportions come from the real container, not from a reference: the page
   container is 1200px with 24px gutters, so 1152px is usable. R5 (§E3 "תמונה
   →440px") keeps the portrait at its 440px cap — at this width 41% would be
   472px, so the cap binds and the portrait is 38.2% of the container BY
   DECISION (State §20.18, plan decision D4: the cap wins over the ratio).
   single-plumbers.php:238's sizes="… 440px" hint depends on that cap staying.
   --hib-space-11 is the gap (64px), and the content keeps the remaining ~648px
   — still a comfortable measure for a 17px body at this line height. The
   composition spans the whole container; it never gets a private wrapper of
   its own. */
.hib-profile-hero--v3 .hib-profile-hero__grid{
  display:grid;
  /* Identity first on the reading edge, portrait after it. 41% holds the ratio
     as the container narrows (it governs below a ~1073px content box); at the
     full 1152px the 440px cap binds — the widest case is the capped 440px,
     38.2%, kept deliberately (§E3; D4/State §20.18). */
  grid-template-columns:minmax(0,1fr) minmax(0,min(440px,41%));
  gap:clamp(var(--hib-space-8),4.5vw,var(--hib-space-11));
  /* Centred, not top-aligned. The identity column's height is data-dependent —
     a professional with a rating, coverage AND a search relation runs ~380px,
     one with none of them ~250px — while the portrait is a fixed box. Top
     alignment turned that difference into a void hanging under the text on
     every sparse profile; centring turns it into symmetric breathing at the
     band's own edges, which reads as composed at either completeness level.
     Mobile restates `start` below, where the portrait sits in a two-column
     identity row and centring would misalign it against the name. */
  align-items:center;
}
.hib-profile-hero--v3 .hib-profile-hero__summary{ order:0; }

/* ── Portrait ────────────────────────────────────────────────────────────────
   Square, from the same real inventory that chose 4:5 before it: of the 80
   published portraits 64 are square-ish (median aspect 1.00), 12 taller, 4
   wider. 4:5 took 20% off that median source and, at the 440px cap, stood
   550px tall against an identity column measuring 321px on the richest
   profile and ~250px on a sparse one — so the frame the reader met first was
   also the emptiest part of the band.

   1:1 is the honest frame for this inventory: no crop at all on the 64
   square sources, and the top-biased object-position still holds the head for
   the 12 taller ones. It is the same reasoning the mobile composition already
   applies one breakpoint down ("a taller frame buys nothing but pushes the
   call button down"), which was true of the desktop band too.

   The WIDTH is untouched at the 440px cap — 38.2% of the container — because
   the portrait's share of the two-column relationship is a settled decision
   (§E3, D4/State §20.18) and single-plumbers.php's sizes="… 440px" hint
   depends on it. Only the height changes. */
.hib-profile-hero--v3 .hib-profile-hero__media{
  position:relative;
  width:100%; max-width:440px; aspect-ratio:1 / 1; max-height:none;
  border-radius:var(--hib-radius-l);
  /* The design system clips this box so the photograph takes the radius. The
     offset layer has to live outside it, so the clipping moves to the image
     itself and the wrapper is free to paint behind it. */
  overflow:visible;
}
/* The photograph sits above the offset layer. Stacking is done with positive
   levels rather than `z-index:-1`, which would paint the layer underneath the
   band's own background and disappear. */
.hib-profile-hero--v3 .hib-profile-hero__media img{
  position:relative; z-index:1;
  object-fit:cover; object-position:center 18%;
  border-radius:inherit;
}
/* The one offset layer: a single boundary in the hero's own azure, set back
   along both axes by one step of the spacing scale and sharing the portrait's
   radius. It sits behind the photograph and is revealed only on two sides, so
   it reads as depth rather than as a frame, a certificate or a second card. */
.hib-profile-hero--v3 .hib-profile-hero__media::before{
  content:"";
  position:absolute; z-index:0;
  /* Asymmetric on purpose: a deeper drop than sideways shift, so the layer
     reads as depth under the photograph. The inline step stays smaller than
     the page gutter (24px), so at the widths where the container touches the
     screen edge the layer still ends inside it rather than being cut off. */
  inset-block:var(--hib-space-7) calc(var(--hib-space-7) * -1);
  inset-inline:var(--hib-space-4) calc(var(--hib-space-4) * -1);
  border:1px solid rgba(169,198,255,.34);
  border-radius:var(--hib-radius-l);
  pointer-events:none;
}
/* No portrait: the established fallback, at a size that lets the text lead
   instead of holding open a full portrait footprint — and with no offset layer
   behind it, since there is no photograph for it to support. */
.hib-profile-hero--v3 .hib-profile-hero__media--empty{
  aspect-ratio:1; max-width:200px; align-self:start;
  background:rgba(169,198,255,.10);
  border:1px solid rgba(169,198,255,.24);
  box-shadow:none;
}
.hib-profile-hero--v3 .hib-profile-hero__media--empty::before{ content:none; }
.hib-profile-hero--v3 .hib-profile-hero__initials{ color:var(--hib-primary-on-dark); font-weight:800; }
.hib-profile-hero--v3 .hib-profile-hero__summary{
  display:flex; flex-direction:column; gap:clamp(12px,1.3vw,18px); min-width:0;
}

/* Identity — category above the name, one unit: the classification sets the
   context and the name answers it, rather than the two competing on one line. */
.hib-profile-hero__identity{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* The name is the subject of the page, so it is sized as one. The previous cap
   (2.5rem = 40px at 1440) landed BELOW the standard H2 role its own section
   headings use (2.6rem = 41.6px) — so "קצת עליי" measurably outranked the
   professional on every profile, and the page read as an enlarged card.

   The standard role is not the thing to move: `.hib-profile-about__title` is a
   pinned calibration sample for it across four routes, and that spec already
   describes it as "subordinate to the profile H1". The H1 simply has to be an
   H1. It now clears the standard role by ~1.29× at desktop — the same step the
   system already accepts between its feature and standard title roles — and
   keeps `overflow-wrap:anywhere` so the longest real business name still wraps
   inside its box rather than escaping it. */
/* The professional's name opens an interior page, so it takes the interior
   PAGE-TITLE role — the same `--hib-page-title-size` already carried by the
   directory hero (`.hib-dhero__title`), the guides hero, the category hero, the
   contact panel and the add-professional gate. The typography suite asserts
   that family opens "at one title scale"; the profile was the one interior
   route that did not join it.

   Phase 1 corrected the original defect — a 2.5rem cap that landed BELOW the
   standard H2 beneath it — but did so with a bespoke `clamp(2.15rem, 3.9vw,
   3.35rem)`, which overshot the page-title role and landed above the feature
   title. That traded a too-small private value for a too-large private value;
   the role itself was the answer all along.

   Authority here is not carried by size alone — it is the page-title scale on a
   navy band, beside a 440px portrait, above everything else on the page — which
   is exactly how the directory and guides heroes establish theirs. Leading
   comes from the role's own `--hib-page-title-lh` rather than a local value,
   and `overflow-wrap` stays so the longest real business name still wraps
   inside its box at 390px. */
.hib-profile-hero--v3 .hib-profile-hero__name{
  margin:0; font-size:var(--hib-page-title-size); line-height:var(--hib-page-title-lh); overflow-wrap:anywhere;
}
.hib-profile-hero--v3 .hib-badge--domain{ flex:0 0 auto; }

/* Business name — the optional trading name of the person named above. It sits
   inside the identity unit because it belongs to that identity, and it is
   separated from the H1 by weight and ink rather than by a component: a chip or
   a card here would read as a second subject, which is precisely the confusion
   this line exists to end. One step above the description in weight, a step
   below the name in ink, and no letter-spacing (Hebrew never carries any).
   Absent on most profiles, where the element is not printed at all. */
.hib-profile-hero__biz{
  margin:0; max-width:52ch;
  font-family:var(--hib-font-body); font-weight:600;
  font-size:var(--hib-body-lede-size); line-height:1.45;
  color:var(--hib-on-dark-soft); letter-spacing:normal;
  overflow-wrap:anywhere;
}

/* Description — supporting copy, not a second headline: medium weight, a
   comfortable measure and real line height instead of one dense bold line. */
.hib-profile-hero--v3 .hib-profile-hero__role{
  margin:0; max-width:52ch;
  font-family:var(--hib-font-body); font-weight:500; font-size:1rem; line-height:1.55;
  color:var(--hib-on-dark-soft); letter-spacing:normal;
}

/* Facts — review evidence, service coverage and the searched-address
   relationship in ONE row with one icon treatment. No container: they are
   facts about the professional, not another badge collection. */
.hib-profile-hero__facts{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  margin:0; padding:0; list-style:none;
}
.hib-profile-hero__fact{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--hib-body-s-size); font-weight:500; line-height:1.4;
  color:var(--hib-on-dark-soft);
}
.hib-profile-hero__fact svg{ width:16px; height:16px; flex:0 0 auto; color:var(--hib-primary-on-dark); }
.hib-profile-hero__fact b{ color:#fff; font-weight:700; }
.hib-profile-hero__fact--rating svg{ color:var(--hib-rating-star); }

/* Searched-address relationship — the one personal fact in the band.
   One tier above the supporting facts: full on-dark ink instead of the 82%
   soft, a step up in size, and its own line. It stays plain text on the band
   — no chip, no border, no tint — because a bordered rounded rectangle above
   the phone button is the shape of a second CTA, which is exactly what the
   endorse strip below it was rewritten to stop being. */
.hib-profile-hero__relation{
  display:flex; align-items:center; gap:8px;
  margin:0; align-self:start; max-width:100%;
  font-size:var(--hib-body-lede-size,1.0625rem); font-weight:600; line-height:1.4;
  color:var(--hib-dark-text); letter-spacing:normal;
}
.hib-profile-hero__relation svg{
  width:19px; height:19px; flex:0 0 auto; color:var(--hib-primary-on-dark);
}

/* Amir's recommendation — the reason the directory exists, so it is stated in
   words and given its own quiet strip: an opening rule on the reading edge,
   noticed before the call, never dressed as a second button. */
.hib-profile-hero__endorse{
  display:flex; align-items:center; gap:10px;
  /* Hugs its sentence: stretched across the column it reads as an empty slab
     with a line of text pushed to one end, which is the opposite of restrained. */
  align-self:start; max-width:100%;
  margin:2px 0 0; padding:9px 14px;
  /* P3d3 · the enclosing 1px border is gone. The rule on the reading edge was
     always the device this component described; the box drawn around it made
     the sentence read as a control — a bordered, rounded, tinted rectangle
     sitting directly above the real button, which is exactly the shape of a
     secondary CTA. Amir's approval is a stated fact, so it is now marked like
     a quoted line rather than dressed as something to press, and the only
     pressable thing in the hero is the phone button. Words unchanged. */
  border-inline-start:3px solid var(--hib-primary-on-dark);
  border-radius:0 var(--hib-radius-s) var(--hib-radius-s) 0;
  background:rgba(169,198,255,.07);
  color:var(--hib-dark-text); font-size:var(--hib-body-s-size); font-weight:500; line-height:1.4;
}
/* RTL: the reading edge is the right, so the softened corners are on the left.
   Stated logically so the rule survives a future LTR surface. */
.hib-profile-hero__endorse{ border-start-start-radius:0; border-end-start-radius:0; }
.hib-profile-hero__endorse b{ color:#fff; font-weight:700; }
/* The established verification glyph supports the sentence — it is the same
   icon the evidence system uses everywhere else, not a brand mark: the hero
   states the recommendation in words and leaves the logo to the site header. */
.hib-profile-hero__endorse-ic{ display:inline-flex; flex:0 0 auto; color:var(--hib-primary-on-dark); }
.hib-profile-hero__endorse-ic svg{ width:20px; height:20px; }

.hib-profile-hero__actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-block-start:6px;
}
.hib-profile-hero__actions .hib-btn{ flex:0 1 auto; }
.hib-profile-hero__actions .hib-btn--secondary{
  background:transparent; border:1px solid rgba(169,198,255,.42); color:#fff;
}
.hib-profile-hero__actions .hib-btn--secondary:hover{ border-color:#fff; background:rgba(255,255,255,.07); }

/* Tablet: the same 34% relationship, restated only because the design system
   collapses this grid to one flex column at ≤1023px for the old hero. */
@media (max-width:1023px){
  .hib-profile-hero--v3 .hib-profile-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,41%);
  }
}

@media (max-width:767px){
  /* Identity row: portrait on the reading edge with the name beside it. The
     summary dissolves into the grid so this is one row and not two blocks. */
  .hib-profile-hero--v3 .hib-profile-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--hib-space-4) var(--hib-space-4);
    align-items:start;
  }
  .hib-profile-hero--v3 .hib-profile-hero__summary{ display:contents; }
  .hib-profile-hero--v3 .hib-profile-hero__media{
    grid-column:2; grid-row:1; align-self:start;
    /* Meaningfully bigger than a directory avatar, and square rather than 4:5:
       beside a two-line identity block a taller frame buys nothing but pushes
       the call button down, and the band's job here is to reach that button
       quickly. At 360px this leaves the name a 164px column — verified against
       the longest real business name in the dataset. */
    width:clamp(120px,34vw,148px); max-width:none; aspect-ratio:1;
  }
  /* The offset layer is dropped here: at this size it reads as noise beside the
     photograph and costs height the mobile band cannot spare. */
  .hib-profile-hero--v3 .hib-profile-hero__media::before{ content:none; }
  .hib-profile-hero--v3 .hib-profile-hero__media--empty{ max-width:none; width:clamp(112px,30vw,132px); }
  .hib-profile-hero__identity{
    grid-column:1; grid-row:1; align-self:start;
    flex-direction:column; align-items:flex-start; gap:var(--hib-space-2);
  }
  .hib-profile-hero--v3 .hib-profile-hero__role,
  .hib-profile-hero--v3 .hib-profile-hero__facts,
  .hib-profile-hero--v3 .hib-profile-hero__relation,
  .hib-profile-hero--v3 .hib-profile-hero__endorse,
  .hib-profile-hero--v3 .hib-profile-hero__actions{ grid-column:1 / -1; }
  /* One step down from the desktop promotion — still above the supporting
     facts, but the mobile band has to reach the call button quickly. */
  .hib-profile-hero--v3 .hib-profile-hero__relation{ font-size:1rem; }
  .hib-profile-hero--v3 .hib-profile-hero__role{ max-width:none; font-size:1rem; }
  .hib-profile-hero__facts{ gap:var(--hib-space-2) var(--hib-space-5); }
  .hib-profile-hero--v3{ padding-block:var(--hib-space-6) var(--hib-space-7); }
  .hib-profile-hero--v3 .hib-profile-hero__endorse{
    margin-block-start:0; align-self:stretch; padding:var(--hib-space-3) var(--hib-space-4);
  }
  /* Full width is the design system's own mobile behaviour for this hero's
     actions; the buttons stay canonical `--l` controls at their real height. */
  .hib-profile-hero--v3 .hib-profile-hero__actions{ margin-block-start:var(--hib-space-1); gap:var(--hib-space-2); }
  .hib-profile-hero--v3 .hib-profile-hero__actions .hib-btn{ flex:1 1 100%; }
  /* Three crumbs at 360px otherwise wrap into a stack that owns the top of the
     band; the trail stays one line and the current page truncates. */
  .hib-profile-hero__crumbs{ margin-block-end:12px; }
  .hib-profile-hero__crumbs ol{ flex-wrap:nowrap; gap:6px; }
  .hib-profile-hero__crumbs li{ flex:0 0 auto; }
  .hib-profile-hero__crumbs li:last-child{ flex:0 1 auto; min-width:0; }
  .hib-profile-hero__crumbs [aria-current="page"]{
    display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* — Reviews aggregate: mono score (editorial proof) — */
.hib-profile-reviews__score{ font-family:var(--hib-font-mono); letter-spacing:normal; }

/* (The bottom CTA's radial-azure surface moved to the shared .hib-cta-surface
   class — see the SHARED CTA SURFACE block.) */

/* ============================================================
   GUIDES / CONTENT PHASE — archive-video, taxonomy-video_cat,
   single-video. Bring the knowledge hub onto the brand system:
   dark navy authority heroes, premium video treatment, editorial
   cards. All selectors are guide/content-specific (or scoped to
   guide containers), so home / profile / forms are untouched.
   hib-design-system.css unchanged → no PurgeCSS rebuild.
   NB: .hib-hero--guides is intentionally NOT touched here — it
   shares a rule with the contact/add-pro form heroes (out of scope)
   and is already dark.
   ============================================================ */

/* The category-page hero is now `.hib-cat-hero` (see the guide-category
   archive block at the end of this file); its predecessor's rules were
   emitted by taxonomy-video_cat.php alone and went with it. */

/* — Single guide: theater watch area → dark, premium player — */
.hib-video-watch{
  position:relative;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(43,99,214,.24), transparent 60%),
    linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
  color:var(--hib-dark-text);
}
.hib-video-watch::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}
.hib-video-watch .hib-domain-hero__breadcrumb,
.hib-video-watch .hib-domain-hero__breadcrumb a{ color:var(--hib-on-dark-muted); }
.hib-video-watch .hib-domain-hero__breadcrumb a:hover{ color:#fff; }
.hib-video-watch__title{ color:#fff; }
.hib-video-watch__lead{ color:var(--hib-on-dark-soft); }
.hib-video-watch__source{ color:var(--hib-on-dark-muted); }
.hib-video-watch__source svg{ color:var(--hib-primary-on-dark); }
.hib-video-watch__about{ border-block-start-color:rgba(169,198,255,.16); }
.hib-video-watch__about-title{ color:#fff; }
.hib-video-watch__prose,
.hib-video-watch__prose p,
.hib-video-watch__prose li{ color:var(--hib-on-dark-soft); }
.hib-video-watch__prose a{ color:var(--hib-primary-on-dark); }
.hib-video-watch .hib-video-hero__meta-item{ color:var(--hib-on-dark-muted); }
.hib-video-watch .hib-badge--domain{ background:rgba(169,198,255,.14); color:#CFE0FF; }
.hib-video-watch .hib-badge--distance{ background:rgba(255,255,255,.08); color:var(--hib-on-dark-soft); }
.hib-video-watch .hib-badge--doc{ background:rgba(169,198,255,.16); color:#E7F0FE; }
/* premium player frame */
.hib-video-watch .hib-video-player__frame{
  border:1px solid rgba(169,198,255,.22);
  box-shadow:var(--hib-shadow-band);
  border-radius:var(--hib-radius-l);overflow:hidden;
}
/* honest no-video fallback — dot-grid + category glyph (never a fake player) */
.hib-video-player__fallback{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;
  background-color:var(--hib-dark-raised);
  background-image:radial-gradient(rgba(169,198,255,.20) 1px, transparent 1.5px);
  background-size:16px 16px;color:var(--hib-on-dark-soft);
}
.hib-video-player__fallback-icon{ width:52px;height:52px;color:var(--hib-primary-on-dark); }
.hib-video-player__fallback-icon svg{ width:100%;height:100%; }
.hib-video-player__fallback-text{ font-size:var(--hib-body-s-size);font-weight:600;letter-spacing:normal; }

/* — External-view affordance (media state b): the still is a real frame, and
     this is the honest way to say the film itself plays somewhere else. Sits
     over the frame as a legible scrim so it reads at any still. — */
.hib-video-player__external{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:44px 16px 16px;
  color:#fff;font-weight:700;font-size:var(--hib-body-s-size);text-decoration:none;
  background:linear-gradient(to top,rgba(4,14,32,.88) 0%,rgba(4,14,32,.62) 52%,transparent 100%);
}
.hib-video-player__external-play{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hib-primary);color:#fff;
  box-shadow:0 6px 16px -6px rgba(11,37,70,.7);
  transition:transform .2s var(--hib-ease);
}
.hib-video-player__external-play svg{ width:14px;height:14px;margin-inline-start:2px; }
.hib-video-player__external:hover .hib-video-player__external-play,
.hib-video-player__external:focus-visible .hib-video-player__external-play{ transform:scale(1.08); }
.hib-video-player__external:focus-visible{ outline:3px solid var(--hib-primary-on-dark);outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){
  .hib-video-player__external-play{ transition:none; }
  .hib-video-player__external:hover .hib-video-player__external-play,
  .hib-video-player__external:focus-visible .hib-video-player__external-play{ transform:none; }
}

/* — Single guide: light editorial article body + sticky support panel (HIB-MOCK-05).
     Selectors here are page-specific element classes only single-video.php emits; the
     written content reuses the shared .hib-prose primitive (refined, not restyled). — */
.hib-guide-article{ padding-block:clamp(36px,5vw,64px); }
.hib-guide-article__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:clamp(28px,4vw,56px);
  align-items:start;margin-inline:auto;
}
.hib-guide-article__body{ min-width:0; }
.hib-guide-article__heading{
  font-family:var(--hib-font-hero);font-weight:900;letter-spacing:normal;
  color:var(--hib-text);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;margin:0;
}
/* readable RTL prose rhythm (mockup guide.html .prose: lead + h2 + lists + callout) */
.hib-guide-article__prose{ max-width:680px;margin-inline:0;color:var(--hib-text-secondary);font-size:1.0625rem;line-height:1.8; }
.hib-guide-article__prose > p:first-child{ font-size:1.22rem;line-height:1.6;font-weight:500;color:var(--hib-text);margin-block-end:1.4rem; }
.hib-guide-article__prose h2{ font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;color:var(--hib-text);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;margin:2.2rem 0 .75rem; }
.hib-guide-article__prose h3{ font-family:var(--hib-font-display);font-weight:800;color:var(--hib-text);font-size:1.2rem;margin:1.7rem 0 .5rem; }
.hib-guide-article__prose p{ margin:0 0 1.1rem; }
.hib-guide-article__prose ul,
.hib-guide-article__prose ol{ margin:0 0 1.2rem;padding-inline-start:1.4rem; }
.hib-guide-article__prose li{ margin:.45rem 0;line-height:1.7; }
.hib-guide-article__prose li::marker{ color:var(--hib-primary); }
.hib-guide-article__prose a{ color:var(--hib-primary);font-weight:600;text-decoration:underline;text-underline-offset:2px; }
.hib-guide-article__prose img{ max-width:100%;height:auto;border-radius:var(--hib-radius-l);margin:1.2rem 0; }
/* blockquote → navy dot-grid callout (mockup .callout) */
.hib-guide-article__prose blockquote{
  position:relative;background:var(--hib-dark-shell);color:var(--hib-on-dark-soft);border:0;
  border-radius:var(--hib-radius-l);padding:24px 26px;margin:1.8rem 0;overflow:hidden;font-style:normal;
}
.hib-guide-article__prose blockquote::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(169,198,255,.18) 1px, transparent 1.5px);background-size:16px 16px;opacity:.5;
}
.hib-guide-article__prose blockquote > *{ position:relative;margin:0; }
.hib-guide-article__prose blockquote p{ margin:0 0 .5rem; }
.hib-guide-article__prose blockquote p:last-child{ margin:0; }
.hib-guide-article__prose blockquote a{ color:var(--hib-primary-on-dark); }
/* support / navigation panel (mockup .toc treatment, real links only)

   THE SHARED ASIDE-PANEL PRIMITIVE. `.hib-panel` is the neutral surface — border,
   radius, padding, background, shadow, sticky offset — and `.hib-panel__label` /
   `.hib-panel__link` are its label and its link rhythm. The guide aside and the
   legal-document index BOTH compose it by selector grouping rather than by copying
   it, so the two panels cannot drift: change a token here and both move. Each page
   keeps its own semantic class names (`hib-guide-aside__*`, `hib-legal-toc__*`) for
   everything that is genuinely page-specific. */
.hib-guide-aside{ min-width:0; }
.hib-panel,
.hib-guide-aside__panel,
.hib-legal-toc{
  position:sticky;top:calc(var(--hib-header-h) + 20px);
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  padding:var(--hib-space-5);background:#fff;box-shadow:var(--hib-shadow-card);
}
/* The rail LABEL — a caption above a list of links, on all three panels. It keeps
   its own compact rung (12px, regular, muted); only the family was ever wrong.
   It was declared in mono, which has no Hebrew, so Ploni was already painting
   every glyph through the fallback chain — this states what was really
   rendering. `uppercase` goes with it: inert on Hebrew, and a trap for the first
   Latin word to land in a panel label. */
.hib-panel__label,
.hib-guide-aside__label,
.hib-legal-toc__title{
  display:block;font-family:var(--hib-font-ui);
  font-size:var(--hib-label-min);letter-spacing:normal;
  color:var(--hib-text-muted);margin-block-end:8px;
}
/* …except the legal index's, which is an <h2>. A heading may be compact, but it
   may not sit on the micro floor: it was the smallest text in the document it
   indexes, so heading navigation announced a heading the eye could not find. It
   alone steps up to the label rung — the two panel labels beside it are captions,
   not headings, and stay where they were.

   It keeps the MUTED ink deliberately. Its own links sit one rung above it at
   15px/600 secondary, so lifting this to secondary as well made the heading read
   as a slightly smaller peer of the list it heads — worse hierarchy than the
   caption it replaced. Muted ink plus the size step is what says "this names the
   list"; the extra space below it does the rest. */
.hib-legal-toc__title{
  font-size:var(--hib-label-m-size);line-height:var(--hib-label-lh);
  font-weight:600;color:var(--hib-text-muted);
  margin-block-end:var(--hib-space-3);
}
.hib-panel__link,
.hib-guide-aside__link,
.hib-legal-toc__link{
  display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 0;
  font-size:var(--hib-body-s-size);font-weight:600;color:var(--hib-text-secondary);
  border-block-end:1px solid var(--hib-rule-soft);transition:color .15s var(--hib-ease);
}
.hib-panel__link:last-of-type,
.hib-guide-aside__link:last-of-type{ border-block-end:0; }
.hib-panel__link:hover,
.hib-guide-aside__link:hover,
.hib-legal-toc__link:hover{ color:var(--hib-primary); }
.hib-guide-aside__link svg{ width:16px;height:16px;flex:0 0 auto;color:var(--hib-primary); }
.hib-guide-aside__meta{
  display:flex;align-items:center;gap:8px;margin-block-start:10px;padding-block-start:12px;
  border-block-start:1px solid var(--hib-rule-soft);color:var(--hib-text-muted);font-size:var(--hib-label-m-size);
}
.hib-guide-aside__meta svg{ width:16px;height:16px; }
/* in-page section TOC (mockup guide.html .toc) — accent rail + active state */
.hib-guide-toc{ display:flex;flex-direction:column; }
.hib-guide-toc__link{
  display:block;padding-block:7px;padding-inline-start:14px;
  border-inline-start:2px solid var(--hib-rule-soft);
  font-size:var(--hib-body-s-size);font-weight:600;color:var(--hib-text-secondary);
  transition:color .15s var(--hib-ease),border-color .15s var(--hib-ease);
}
.hib-guide-toc__link:hover,
.hib-guide-toc__link.is-on{ color:var(--hib-text);border-inline-start-color:var(--hib-primary); }
.hib-guide-aside__nav{ margin-block-start:14px;padding-block-start:14px;border-block-start:1px solid var(--hib-rule-soft); }
/* sticky-header-aware anchor offset so a jumped-to section clears the fixed header */
#guide-video,#guide-about,#guide-related,#guide-cta{ scroll-margin-top:calc(var(--hib-header-h) + 18px); }
@media (max-width:880px){
  .hib-guide-article__grid{ grid-template-columns:1fr;gap:28px; }
  .hib-guide-aside__panel{ position:static; }
  .hib-guide-article__prose,
  .hib-guide-article__note{ max-width:none; }
}

/* — Single guide editorial polish (POST-HIB-POLISH-01) ──────────────────────────
   1) thin-article handling: a one-sentence body renders as a calm framed context
      note (not a ballooned lead floating in a white void) and the section trims its
      padding so the founder bridge sits close beneath it.
   2) premium numbered steps: styles ONLY real <ol> content — no fabricated steps.
   3) founder author-CTA bridge near the page end (mockup guide-article .author-cta). */
.hib-guide-article--lean{ padding-block:clamp(30px,4vw,48px) clamp(24px,3vw,36px); }
.hib-guide-article__note{
  background:#F4F7FC;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  padding:20px clamp(20px,3vw,26px);max-width:680px;
  color:var(--hib-text-secondary);font-size:1.0625rem;line-height:1.75;
}
.hib-guide-article__note > p:first-child{
  font-size:1.0625rem;font-weight:400;color:var(--hib-text-secondary);margin-block-start:0;
}
.hib-guide-article__note > p:last-child{ margin-block-end:0; }

/* premium numbered steps — applies only when the real article contains an <ol> */
.hib-guide-article__prose ol{
  list-style:none;counter-reset:hib-step;padding-inline-start:0;margin:1.6rem 0;
}
.hib-guide-article__prose ol > li{
  counter-increment:hib-step;position:relative;margin:0;line-height:1.7;
  padding-block:16px;padding-inline-start:56px;padding-inline-end:0;
  border-block-end:1px solid var(--hib-rule-soft);
}
.hib-guide-article__prose ol > li:last-child{ border-block-end:0; }
.hib-guide-article__prose ol > li::marker{ content:none; }
.hib-guide-article__prose ol > li::before{
  content:counter(hib-step,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:15px;
  font-family:var(--hib-font-mono);font-size:1.3rem;font-weight:500;line-height:1;
  color:var(--hib-primary);
}

/* founder author-CTA bridge */
.hib-guide-author{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 22px;
  margin:clamp(28px,4vw,44px) auto 0;
  padding:22px clamp(20px,3vw,28px);
  background:#fff;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-card);
}
.hib-guide-author__img{ width:64px;height:64px;border-radius:14px;object-fit:cover;flex:0 0 auto; }
.hib-guide-author__text{ display:flex;flex-direction:column;gap:4px;min-width:0; }
.hib-guide-author__name{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:var(--hib-card-title-size);line-height:var(--hib-card-title-lh);color:var(--hib-text);
}
.hib-guide-author__role{ font-size:var(--hib-body-s-size);line-height:1.55;color:var(--hib-text-secondary); }
.hib-guide-author__cta{ flex:0 0 auto;white-space:nowrap; }
.hib-guide-author__cta svg{ width:15px;height:15px; }
@media (max-width:600px){
  .hib-guide-author{ grid-template-columns:auto 1fr;gap:14px 16px; }
  .hib-guide-author__cta{ grid-column:1 / -1;justify-content:center; }
}

/* — Featured video: stronger, brand-led play button — */
.hib-featured-video__play{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));color:#fff;
  box-shadow:0 0 0 8px rgba(43,99,214,.14),0 14px 28px -8px rgba(11,37,70,.45);
}

/* — Guide list → 3-col editorial cards (supplied mockup guides grid) — */
.hib-guide-list{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);background:transparent;border:none;overflow:visible; }
.hib-guide-entry{ display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-m);overflow:hidden;background:#fff;
  box-shadow:var(--hib-shadow-card);transition:border-color .22s var(--hib-ease),box-shadow .22s var(--hib-ease),transform .22s var(--hib-ease); }
.hib-guide-entry:hover{ border-color:var(--hib-primary);box-shadow:var(--hib-shadow-card-hover);transform:translateY(-3px);padding-inline:0; }
/* Branded ground under the frame: a list thumb paints its frame as a CSS
   background, which no <img> error event can flag, so a missing file would
   otherwise leave a blank white tile. The featured thumb already grounds itself
   this way (`--hib-neutral-900`); this brings the list rows into line. */
.hib-guide-entry__thumb{ aspect-ratio:16/10;width:100%;height:auto;border-radius:0;box-shadow:none;background-color:var(--hib-domain-hero); }
.hib-guide-entry__content{ padding:18px 18px 0;gap:8px;flex:1; }
.hib-guide-entry__title{ font-family:var(--hib-font-display);font-weight:900;font-size:var(--hib-card-title-size);letter-spacing:normal;line-height:var(--hib-card-title-lh); }
.hib-guide-entry__subtopic{ color:var(--hib-primary);font-weight:700; }
.hib-guide-entry__cta{ margin:14px 18px 18px;align-self:flex-start; }
@media (max-width:900px){ .hib-guide-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .hib-guide-list{ grid-template-columns:1fr; } }

/* — Related video cards: Danidin titles — */
.hib-video-card__title{ font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal; }

/* ============================================================
   GUIDE CATEGORY PAGE — premium topic landing (HIB-MOCK-04)
   Continues the /guides/ gateway one level deeper. All selectors are
   additive modifiers / new elements that ONLY taxonomy-video_cat.php emits
   (no shared primitive restyled globally). Always-loaded → no purged mirror.
   Mockup: amir-saban-brand/guides.html (.gcats current chip, .guide .ph .gi
   dot-grid+icon fallback).
   ============================================================ */
/* posterless guide-entry thumb → navy dot-grid + centred category glyph
   (mockup .guide .ph .dotgrid-dark + .gi), so the card media never reads empty */
.hib-guide-entry__thumb--texture{
  background-color:var(--hib-dark-raised);
  background-image:radial-gradient(rgba(169,198,255,.20) 1px, transparent 1.5px);
  background-size:16px 16px;
  display:flex;align-items:center;justify-content:center;
}
.hib-guide-entry__thumb--texture::before{
  background:radial-gradient(120% 90% at 28% 0%, rgba(29,84,196,.34) 0%, transparent 60%);
}
.hib-guide-entry__thumb-icon{
  position:relative;z-index:1;display:flex;color:rgba(169,198,255,.5);
}
.hib-guide-entry__thumb-icon svg{ width:46px;height:46px;stroke-width:1.4; }

/* designed empty state (no guides yet in this topic) */
.hib-guides-empty{
  max-width:560px;margin-inline:auto;text-align:center;
  padding:clamp(var(--hib-space-7),5vw,var(--hib-space-9)) clamp(var(--hib-space-5),4vw,var(--hib-space-8));
  background:#fff;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-card);
}
.hib-guides-empty__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;margin-block-end:var(--hib-space-4);
  border-radius:var(--hib-radius-m);
  background:var(--hib-domain-soft);color:var(--hib-primary);
}
.hib-guides-empty__icon svg{ width:30px;height:30px; }
.hib-guides-empty__title{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.15;
  color:var(--hib-text-strong);margin-block-end:var(--hib-space-3);
}
.hib-guides-empty__desc{
  font-size:1rem;line-height:1.65;color:var(--hib-text-secondary);
  max-width:42ch;margin-inline:auto;margin-block-end:var(--hib-space-5);
}

/* low-emphasis secondary link on the royal-blue CTA band (back to the gateway) */
.hib-cta-section__secondary{
  color:#fff;font-weight:600;font-size:var(--hib-label-m-size);
  letter-spacing:normal;text-decoration:none;
  border-block-end:1px solid rgba(255,255,255,.45);padding-block-end:2px;
  transition:border-color .18s var(--hib-ease),opacity .18s var(--hib-ease);
}
.hib-cta-section__secondary:hover,
.hib-cta-section__secondary:focus-visible{ border-block-end-color:#fff;opacity:.92; }

/* The redesigned guide-entry is a vertical card whose thumb is the card media;
   restore it on the smallest screens (design-system's legacy row-list rule hides
   .hib-guide-entry__thumb < 480px). .hib-guide-entry is category-page-only. */
@media (max-width:479px){
  .hib-guide-entry__thumb{ display:block; }
  .hib-guide-entry__thumb--texture{ display:flex; }
}

/* ============================================================
   FORMS PHASE — page-add-professional + page-contact
   The form heroes are already dark (shared navy family); this layer
   adds the azure brand hairline and lifts the form components
   (stepper, specialty chips, contact cards) to the premium system.
   CSS-only — no markup, field, action or JS-hook changes. Scoped to
   addpro/contact + their form components (specialty-select, stepper
   and contact-card are form-only). hib-design-system.css unchanged
   → no PurgeCSS rebuild.
   ============================================================ */

/* — Form heroes: azure authority hairline (brand signature) — */
.hib-addpro-hero,
.hib-contact-hero{ box-shadow:inset 0 3px 0 var(--hib-primary); }

/* — Stepper: brand-led step badge + Danidin step titles + active glow — */
.hib-stepper__step-badge{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));
  box-shadow:var(--hib-shadow-btn);
}
.hib-stepper__step-title{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:clamp(1.32rem,2vw,1.6rem);line-height:1.12;
}
.hib-stepper__progress-step--active{ box-shadow:0 0 0 3px rgba(27,74,179,.16); }

/* — Specialty select: confident azure-gradient selected state — */
.hib-specialties-select__option.is-selected{
  background:linear-gradient(180deg,#2C63D6,var(--hib-primary));
  border-color:var(--hib-primary);color:#fff;
  box-shadow:var(--hib-shadow-btn-hover);
}

/* — Contact subject cards: thinner border, Danidin title, azure hover edge — */
.hib-contact-card{ border-color:var(--hib-rule-soft); }
.hib-contact-card:hover{
  box-shadow:inset 0 3px 0 var(--hib-primary),
             0 2px 4px rgba(16,24,40,.04),
             0 16px 34px -14px rgba(27,74,179,.30);
}
.hib-contact-card__title{ font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal; }

/* — Profile contact card is a trust/info panel, NOT a clickable card.
   Only its CTA links (.hib-contact-card__cta) are interactive. Neutralize the
   generic choice-card affordances (cursor, hover lift, pointer-follow glare,
   icon flip) within the profile aside; keep a static premium resting depth. */
.hib-profile-aside .hib-contact-card{ cursor:default; }
.hib-profile-aside .hib-contact-card:hover{
  transform:none;
  box-shadow:var(--hib-shadow-m);
}
.hib-profile-aside .hib-contact-card::before{ display:none; }
.hib-profile-aside .hib-contact-card:hover .hib-contact-card__icon{
  transform:none;
  background:radial-gradient(ellipse at 50% 10%, rgba(29,84,196,0.16) 0%, rgba(29,84,196,0.07) 100%);
  color:var(--hib-primary);
}

/* ============================================================
   QA POLISH PASS — pixel/brand consistency (additive)
   ============================================================ */

/* Contact form: anchor it as a premium white product surface
   (was floating directly on the pale section). Danidin title. */
.hib-contact-form-section{
  max-width:720px;background:#fff;
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-m);
  padding:clamp(26px,3.4vw,46px);
}
.hib-contact-form-section__title{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:clamp(1.5rem,2.4vw,2rem);
}

/* Contact subject cards: more substance — bigger brand icon tile */
.hib-contact-card__icon{ width:54px;height:54px; }
.hib-contact-card__icon svg{ width:24px;height:24px; }

/* Home hero trust row: lift presence (was a touch faint) */
.hib-hero-founder__trust{ color:var(--hib-on-dark-muted); }

/* Guides archive hero: match the azure brand hairline every other dark
   hero carries (its shared ::before/::after pseudos are taken by the bg
   photo, so use an inset accent — scoped to the archive hero only). */
.hib-hero--guides{ box-shadow:inset 0 3px 0 var(--hib-primary); }

/* ============================================================
   GENERIC PAGE FALLBACK — freeform pages (pricing, thankyou, any
   plain WP Page). Confident Danidin title + azure brand rule so
   freeform content reads intentional, not bare prose.
   ============================================================ */
.hib-page-generic__head{ margin-block-end:clamp(24px,3vw,38px); }
.hib-page-generic__title{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;line-height:1.04;
  font-size:clamp(2rem,4vw,3rem);color:var(--hib-text-strong);
  position:relative;padding-block-end:18px;
}
.hib-page-generic__title::after{
  content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
  width:54px;height:3px;background:var(--hib-primary);border-radius:3px;
}
.hib-page-generic .hib-prose a{ color:var(--hib-primary);font-weight:600; }

/* ============================================================
   HOME HERO — ported to the supplied Amir-Saban mockup composition:
   cinematic portrait (right in RTL) + content (left) + full-bleed
   mono stats strip. Replaces the .hib-hero-founder layout. Keeps the
   live WP search form (.hib-search-v2) and dynamic counts.
   ============================================================ */
.hib-mhero{
  /* overflow-x:clip contains the full-bleed decorative layers (no h-scroll)
     while overflow-y:visible lets the search combobox panel drop below the
     hero edge instead of being clipped. (was overflow:hidden) */
  position:relative;overflow-x:clip;overflow-y:visible;color:#fff;
  background:radial-gradient(rgba(169,198,255,.07) 1px,transparent 1px) 0 0/24px 24px, var(--hib-dark-raised);
}
.hib-mhero::before{ /* azure authority hairline */
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 30%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 70%,transparent);
}
.hib-mhero__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  min-height:min(760px,84vh);align-items:stretch;
}

/* portrait side (first column → right in RTL) */
.hib-mhero__portrait{ position:relative;overflow:hidden; }
.hib-mhero__portrait>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 20%;
  filter:grayscale(.18) contrast(1.1) brightness(.86) saturate(.95);
  /* One continuous composition, not a portrait pasted on a panel. The image is
     masked so it dissolves toward the physical CENTRE, revealing the SAME hero
     background — navy #0B2546 + the dot texture — that fills the text side. There
     is no navy overlay on top of the photo: the base field simply shows through
     where the image fades, so the left/lower-left rectangle boundary cannot exist
     and no vertical seam is possible. Physical direction: opaque at the physical
     right (Amir), transparent toward the physical centre (`to left`). */
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 42%,transparent 88%);
          mask-image:linear-gradient(to left,#000 0%,#000 42%,transparent 88%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* A quiet navy seat at the very bottom so the founder chip's text stays legible
   over Amir. Same hue as the base (#0B2546), never a darker corner. Non-
   interactive so it can never cover a focus ring or the search controls. */
.hib-mhero__portrait::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,37,70,.82),rgba(11,37,70,.12) 34%,transparent 56%); }
.hib-mhero__pcontent{ position:absolute;z-index:2;inset:auto 0 0 0;padding:0 clamp(22px,2.4vw,40px) clamp(26px,4vh,44px); }
/* Weight 400 is the hero's own: this byline and the trust row sit UNDER a 95px
   display statement and must stay quiet. They were mono with no weight declared
   (so 400); the family correction to Ploni states 400 explicitly rather than
   letting it be inherited, because Ploni — unlike the mono file — has a real
   400 and a real 600, and the difference would show. */
.hib-mhero__vline{ font-family:var(--hib-font-ui);font-weight:400;font-size:var(--hib-label-min);letter-spacing:normal;color:var(--hib-primary-on-dark);margin-block-end:13px; } /* was 11.5px — label floor */
.hib-mhero__pstmt{ font-family:var(--hib-font-hero);font-weight:900;letter-spacing:normal;line-height:.94;font-size:clamp(28px,2.9vw,42px);color:#fff;margin-block-end:15px; }
.hib-mhero__pby{ display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--hib-on-dark-soft);border-block-start:1px solid var(--hib-border-on-dark);padding-block-start:15px; }
.hib-mhero__pby b{ color:#fff;font-weight:900; }
.hib-mhero__pby-role{ color:var(--hib-on-dark-muted); }
/* .hib-mhero__foll retired with the duplicate hero follower chip (F10 stat dedupe). */

/* content side (second column → left in RTL) */
.hib-mhero__content{ display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,9vh,108px) clamp(26px,4vw,64px) clamp(40px,6vh,64px); }
.hib-mhero__inner{ max-width:620px; }
/* Type: HERO KICKER role (one owner, stated once — see the kicker block). */
.hib-mhero__eyebrow::before{ content:"";width:26px;height:2px;background:var(--hib-primary-on-dark);border-radius:2px; }
.hib-mhero__title{ font-family:var(--hib-font-hero);font-weight:900;color:#fff;margin:20px 0 20px;font-size:clamp(48px,6.6vw,104px);line-height:.88;letter-spacing:normal; }
.hib-mhero__title .accent{ color:var(--hib-primary-on-dark); }
.hib-mhero__lede{ color:var(--hib-on-dark-soft);font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:46ch;margin:0; }
.hib-mhero__trust{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-start:18px;font-family:var(--hib-font-ui);font-weight:400;font-size:var(--hib-micro-label-size);letter-spacing:normal;color:var(--hib-on-dark-muted); }
.hib-mhero__trust .t{ display:inline-flex;align-items:center;gap:6px; }
.hib-mhero__trust .t svg{ width:15px;height:15px;color:var(--hib-primary-on-dark);flex:0 0 auto; }
.hib-mhero__trust .sep{ width:1px;height:13px;background:rgba(169,198,255,.28); }

/* search — keep the live form; render it as the mockup white card */
.hib-mhero .hib-search-v2{ margin-block-start:28px;max-width:none;width:100%;background:#fff;border:1px solid rgba(14,44,84,.08);box-shadow:var(--hib-shadow-band);backdrop-filter:none;-webkit-backdrop-filter:none; }
.hib-mhero .hib-search-v2__label{ color:var(--hib-text-muted);font-weight:500; }
.hib-mhero .hib-search-v2__input,.hib-mhero .hib-search-v2__select{ color:var(--hib-text);font-weight:600; }
.hib-mhero .hib-search-v2__input::placeholder{ color:var(--hib-text-muted);font-weight:400; }
.hib-mhero .hib-search-v2__select option{ background:#fff;color:var(--hib-text); }
.hib-mhero .hib-search-v2__divider{ background:var(--hib-rule-soft); }
.hib-mhero .hib-search-v2__btn{ background:linear-gradient(180deg,#2C63D6,var(--hib-primary));color:#fff;font-weight:700;border-radius:var(--hib-radius-xs);box-shadow:var(--hib-shadow-btn); }

/* ── Hero search: primary address field + "use my location" action ── */
.hib-mhero .hib-search-v2{ position:relative; }
/* Address-first hierarchy (§C.1 VIS-HOME). The module's OUTER geometry is
   deliberately untouched — the desktop balance between Amir, the search
   interface and the negative space around them is a preserved composition
   (VIS-HERO-DESK), so dominance is redistributed INSIDE the existing box:
   the address field takes the larger share of the free space, its input
   carries the heavier type, and the optional specialty field reads quieter. */
.hib-search-v2__field--addr{ flex:2.4 1 0; }      /* address is the primary field */
.hib-search-v2__field--spec{ flex:1 1 0; }        /* refinement, not the entry point */
.hib-search-v2__addr-row{ display:flex;align-items:center;gap:6px; }
.hib-search-v2__addr-row .hib-search-v2__input{ flex:1;min-width:0; }
.hib-mhero .hib-search-v2__field--addr .hib-search-v2__input{
  font-size:clamp(16px,1.15vw,17.5px);font-weight:700;letter-spacing:normal; }
.hib-mhero .hib-search-v2__field--addr .hib-search-v2__label{ color:var(--hib-primary); }
.hib-mhero .hib-search-v2__field--spec .hib-search-v2__label,
.hib-mhero .hib-search-v2__field--spec .hib-combo__btn{ color:var(--hib-text-muted); }
.hib-search-v2__opt{ font-weight:400;text-transform:none;letter-spacing:normal;opacity:.7; }

/* compact location button — desktop, inside the address field */
.hib-search-v2__geo{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:rgba(29,84,196,.08);color:var(--hib-primary);cursor:pointer;
  transition:background .18s var(--hib-ease);
}
.hib-search-v2__geo:hover{ background:rgba(29,84,196,.16); }
.hib-search-v2__geo:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-search-v2__geo.is-busy{ opacity:.55;pointer-events:none; }
.hib-search-v2__geo.is-busy svg{ animation:hib-geo-spin .8s linear infinite; }

/* full-width location button — mobile, under the address field */
.hib-search-v2__geo-m{ display:none; }

/* status / error line (geolocation feedback) */
.hib-search-v2__status{ margin:0; }
.hib-search-v2__status:empty{ display:none; }
.hib-mhero .hib-search-v2__status{
  position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:4px;
  font-size:var(--hib-label-s-size);color:var(--hib-primary-on-dark);
}
.hib-mhero .hib-search-v2__status.is-error{ color:#FFB4B4; }

@keyframes hib-geo-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .hib-search-v2__geo.is-busy svg,.hib-search-v2__geo-m.is-busy svg{ animation:none; } }

@media (max-width:560px){
  .hib-search-v2__geo{ display:none; }
  .hib-search-v2__geo-m{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:12px 16px;border:1px solid rgba(14,44,84,.14);border-radius:var(--hib-radius-xs);
    background:rgba(29,84,196,.06);color:var(--hib-primary);font-weight:700;font-size:var(--hib-body-s-size);cursor:pointer;
  }
  .hib-search-v2__geo-m:hover{ background:rgba(29,84,196,.12); }
  .hib-search-v2__geo-m.is-busy{ opacity:.55;pointer-events:none; }
  .hib-search-v2__geo-m.is-busy svg{ animation:hib-geo-spin .8s linear infinite; }
  .hib-search-v2__geo-m svg{ flex:0 0 auto; }
  .hib-mhero .hib-search-v2__status{ position:static;margin-block-start:6px; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO SEARCH ROW — three EXPLICIT layout states, keyed to the
   component's own inline size (not the viewport).

   Why grid and not flex-wrap: a wrapped flex item keeps the flex
   basis and the min-inline-size floor it was given for the wide row,
   so a field alone on its line stops at that floor instead of filling
   it — measured at 390px, card inner 309px: address 237px, specialty
   144px, 72px and 165px of dead white beside them. The stacked layout
   has to BE a state, not the residue of wrapping, so each state names
   its own tracks and the floors live on the TRACK, never on the item.

   Track floors are content-derived, at the shipped copy:
     address   144 (placeholder) + 44 (geo) + 8 + 16 (pad) + 3 (border) = 215 → 13.5rem
     specialty 101 ("כל סוגי העבודות") + 16 (caret) + 8 + 24 + 3        = 152 → 9.75rem
   The specialty floor is re-derived, not guessed: it was 9rem for the
   91px "כל ההתמחויות", and the stored value is now the 101px
   "כל סוגי העבודות". A floor sized for retired copy is what put the
   DEFAULT value under an ellipsis at every inline width — the one thing
   this component's own contract says must never happen. 9.75rem leaves
   the value 105px against the 101 it needs.
   Two columns therefore need 216+156+12 = 384 of card CONTENT width.
   Three need 216+156+174 (CTA) + 24 = 570. The query container has to
   be an ANCESTOR (an element cannot match its own container query), so
   it is `.hib-mhero__inner` and the thresholds are stated against ITS
   content box — the card's OUTER width, i.e. +26 for the card's own
   padding and border: 410 → 25.75rem, 596 → 37.25rem. The hero column is
   605 wide at 1440 and 620 where the hero stacks, so both clear the wide
   threshold. Containment on the shell is also what stops a long
   specialty from feeding its width back into the hero grid track.
   The queries are in `rem`, so 200% text zoom drops the component to
   the stacked state on its own — no zoom-specific breakpoint.
   ══════════════════════════════════════════════════════════════════ */

.hib-mhero .hib-mhero__inner{ container-type:inline-size;container-name:hib-search; }

/* — state 1 · stacked (default, and what 200% text zoom resolves to) — */
.hib-mhero .hib-search-v2{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:end;gap:var(--hib-space-3);padding:var(--hib-space-3);
}
.hib-mhero .hib-search-v2 > *{ min-inline-size:0; }
/* Anything that scrolls the card into view (focus, an anchor) must land it
   BELOW the sticky bar, not under it — the same offset the rest of the theme
   uses for scroll targets. */
.hib-mhero .hib-search-v2{ scroll-margin-block-start:calc(var(--hib-header-h) + var(--hib-space-4)); }
.hib-mhero .hib-search-v2__divider{ display:none; }        /* field borders replace it */
.hib-mhero .hib-search-v2__field{ padding:0;min-inline-size:0;border-block-end:0; }
.hib-mhero .hib-search-v2__label{ margin-block-end:6px; }

/* The visible control box — the treatment the directory address panel
   already ships (`.hib-dfield__box`), so the two surfaces read as one
   system. A resting border is what makes an entered value read as a
   value and not as display text. */
.hib-mhero .hib-search-v2__addr-row,
.hib-mhero .hib-combo,
.hib-mhero .hib-search-v2__select:not(.hib-combo__native){
  /* Concentric with the shell: the shell is --hib-radius-l with --hib-space-2
     padding, so the wells sit on the control radius, matching the submit. */
  min-inline-size:0;background:var(--hib-surface);
  border:1.5px solid var(--hib-border);border-radius:var(--hib-radius-xs);
  transition:border-color var(--hib-duration-base) var(--hib-ease),
             box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-mhero .hib-search-v2__addr-row{
  display:flex;align-items:center;gap:var(--hib-space-2);
  padding-inline:var(--hib-space-3) var(--hib-space-1); /* start: text · end: geo circle */
}
/* The search is the page's one conversion action; its controls sit a step
   above the 44px floor (48 = --hib-space-9) so the bar carries more weight
   than a utility form. Floors only — content can still grow them. */
.hib-mhero .hib-search-v2__addr-row,
.hib-mhero .hib-combo,
.hib-mhero .hib-search-v2__select:not(.hib-combo__native),
.hib-mhero .hib-search-v2__btn{ min-block-size:var(--hib-space-9); }
.hib-mhero .hib-combo{ display:flex;align-items:stretch; }
/* No-JS fallback: the native select is the control, so it gets the box too. */
.hib-mhero .hib-search-v2__select:not(.hib-combo__native){
  min-block-size:var(--hib-tap-min);padding-inline:var(--hib-space-3);
}
.hib-mhero .hib-search-v2__input{ min-inline-size:0; }
/* The trigger fills its box (whole control is the target, not just the
   caret) and is free to grow when the value wraps. */
.hib-mhero .hib-combo__btn{
  min-inline-size:0;width:100%;gap:var(--hib-space-2);
  padding-block:var(--hib-space-2);padding-inline:var(--hib-space-3);
}
.hib-mhero .hib-combo__caret{ flex:0 0 16px; }             /* reserved inline space, RTL end */
/* The panel is `min-inline-size:max(100%,260px)`, so on a narrow specialty
   column it is wider than its trigger. Hung from the trigger's inline START
   (the RTL right edge) it grew LEFT, past the card and into the navy — 100px
   of scrollable overflow on the card at 1024. Hanging it from the trigger's
   inline END grows it toward the card interior instead, so it stays inside
   the card at every state while keeping the same RTL reading edge. */
.hib-mhero .hib-combo__panel{ inset-inline-start:auto;inset-inline-end:0; }
/* Stacked: a long specialty wraps onto a second line rather than being
   cut to a fragment. The nowrap/ellipsis form belongs to the states
   that actually have a column to ellipsise into (24rem and up). */
.hib-mhero .hib-combo__value{
  white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:break-word;                                /* word boundaries first… */
  word-break:normal;                                       /* …mid-word only if a word cannot fit */
}
.hib-mhero .hib-combo__value.is-placeholder{ color:var(--hib-text-muted); }

/* States — one ring, stated once, on the BOX. Dimensions never change
   between them (the border exists at rest; the ring is a shadow), so
   nothing reflows on hover or focus. */
.hib-mhero .hib-search-v2__addr-row:hover,
.hib-mhero .hib-combo:hover,
.hib-mhero .hib-search-v2__select:not(.hib-combo__native):hover{ border-color:var(--hib-border-strong); }
.hib-mhero .hib-search-v2__addr-row:focus-within,
.hib-mhero .hib-combo:focus-within,
.hib-mhero .hib-combo.is-open,
.hib-mhero .hib-search-v2__select:not(.hib-combo__native):focus{
  border-color:var(--hib-primary);box-shadow:0 0 0 3px rgba(29,84,196,.16);
}
/* the dark-hero outline (rgba(240,237,229,.5)) is invisible on this white
   card — the box above carries the indicator instead */
.hib-mhero .hib-search-v2__input:focus-visible,
.hib-mhero .hib-combo__btn:focus-visible{ outline:none; }
.hib-mhero .hib-search-v2__field--addr .hib-search-v2__input{ font-size:clamp(1rem,1.15vw,1.09375rem); }

/* CTA — same box height as the fields (44 floor + the 1.5px border the
   fields carry), bottom-aligned with the control boxes, never with the
   top of their labels. Height stays a FLOOR so a Hebrew label at 200%
   grows the button instead of being clipped. */
.hib-mhero .hib-search-v2__btn{
  grid-column:1 / -1;align-self:end;justify-content:center;
  width:auto;margin:0;height:auto;min-block-size:var(--hib-tap-min);
  border:1.5px solid transparent;padding:0 var(--hib-space-5);white-space:normal;
  transition:background var(--hib-duration-base) var(--hib-ease),transform .15s var(--hib-ease);
}
.hib-mhero .hib-search-v2__btn:hover{
  opacity:1;background:linear-gradient(180deg,var(--hib-primary),var(--hib-primary-hover));
}

/* "use my location", stacked: the quiet, LABELLED action the directory
   uses (`.hib-dsearch__geo`) — discoverable, keyboard-reachable, 44px
   tall, and visibly subordinate to both the field and the CTA. An
   icon-only control here would trade the label away; a bordered button
   made the secondary action the only boxed thing on the card. */
.hib-mhero .hib-search-v2__geo{ display:none; }
.hib-mhero .hib-search-v2__geo-m{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--hib-space-2);
  justify-self:start;width:auto;min-block-size:var(--hib-tap-min);
  padding:0;border:0;border-radius:0;background:none;cursor:pointer;
  color:var(--hib-text-secondary);font-family:var(--hib-font-body);
  font-weight:500;font-size:var(--hib-label-m-size);   /* utility weight — subordinate to the field's 700 label */
  text-decoration:underline;text-underline-offset:3px;
}
.hib-mhero .hib-search-v2__geo-m svg{ width:16px;height:16px;opacity:.8; }
.hib-mhero .hib-search-v2__geo-m:hover{ color:var(--hib-primary);background:none; }
.hib-mhero .hib-search-v2__geo-m:focus-visible{
  outline:2px solid var(--hib-primary);outline-offset:2px;
}
.hib-mhero .hib-search-v2__geo-m.is-busy{ opacity:.55;pointer-events:none; }
.hib-mhero .hib-search-v2__geo-m svg{ flex:0 0 auto; }

/* Status line, stacked: it sits INSIDE the white card, so it takes card
   ink — `--hib-error-ink` for the sentence, per the error-ink split. */
.hib-mhero .hib-search-v2__status{
  grid-column:1 / -1;position:static;margin-block-start:0;
  font-size:var(--hib-label-s-size);color:var(--hib-text-secondary);
}
.hib-mhero .hib-search-v2__status.is-error{ color:var(--hib-error-ink); }

/* — state 2 · address + specialty share a row, CTA takes the next one — */
@container hib-search (min-width: 25.75rem){
  .hib-mhero .hib-search-v2{ grid-template-columns:minmax(13.5rem,2.4fr) minmax(9.75rem,1fr); }
  .hib-mhero .hib-search-v2__geo{ display:inline-flex; }
  .hib-mhero .hib-search-v2__geo-m{ display:none; }
  .hib-mhero .hib-combo__value{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  /* back over the navy, below the card, where it started */
  .hib-mhero .hib-search-v2__status{
    position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:4px;
    color:var(--hib-primary-on-dark);
  }
  .hib-mhero .hib-search-v2__status.is-error{ color:#FFB4B4; }
}

/* — state 3 · one row: address · specialty · CTA — */
@container hib-search (min-width: 37.25rem){
  .hib-mhero .hib-search-v2{ grid-template-columns:minmax(13.5rem,2.4fr) minmax(9.75rem,1fr) auto; }
  .hib-mhero .hib-search-v2__btn{ grid-column:auto;white-space:nowrap; }
}

/* full-bleed mono stats strip.
   z-index:1 (below .hib-mhero__grid's z-index:2) so the search combobox panel,
   which lives inside the grid's stacking context, paints ABOVE this strip when
   it opens. Both are siblings of .hib-mhero (not a stacking context); equal
   z-index would let this later-in-DOM strip cover the panel. */
.hib-mhero__stats{ position:relative;z-index:1;border-block-start:1px solid var(--hib-border-on-dark);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8, 30, 58, .4); }
.hib-mhero__cell{ padding:24px clamp(20px,2.6vw,38px);border-inline-start:1px solid var(--hib-border-on-dark); }
.hib-mhero__cell:first-child{ border-inline-start:none; }
.hib-mhero__k{ font-family:var(--hib-font-mono);font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:normal;color:#fff;line-height:1; }
.hib-mhero__k .u{ color:var(--hib-primary-on-dark); }
.hib-mhero__l{ font-size:var(--hib-label-s-size);color:var(--hib-primary-on-dark);font-weight:700;margin-block-start:4px; }

/* ── Mobile hero recomposition (§C.1 Mobile · `[Plan-Visual]` F1) ──
   The portrait used to be ordered ABOVE the content (`order:-1`, ~48vh), which
   pushed the value proposition and the address field out of the first viewport
   on the site's highest-traffic surface. Content now comes first — H1, the
   one-line proximity promise and the address search are in the first viewport —
   and Amir follows immediately below it at ~32vh, still a full-bleed trust
   presence with his caption chip, never an avatar and never decoration.
   This is a CSS `order` recomposition inside the existing 980px block: no
   template markup moves, so reading and tab order are unchanged. */
@media (max-width:980px){
  .hib-mhero__grid{ grid-template-columns:1fr;min-height:0; }
  .hib-mhero__content{
    order:-1;
    padding:calc(var(--hib-header-h,72px) + clamp(20px,5vw,34px)) var(--hib-container-pad,20px) clamp(28px,5vw,40px);
  }
  .hib-mhero__portrait{ min-height:32vh;order:0;border-inline-start:none;border-block-start:1px solid var(--hib-border-on-dark); }
  /* scrim flips: the dense end now sits at the TOP, blending the portrait into
     the content above it, while ::after keeps the caption chip legible below. */
  .hib-mhero__portrait::before{ background:linear-gradient(to bottom,var(--hib-dark-raised) 2%,transparent 56%); }
  .hib-mhero__portrait>img{ object-position:54% 26%; }
  .hib-mhero__pcontent{ padding:0 var(--hib-container-pad,20px) clamp(18px,4vw,26px); }
  .hib-mhero__pstmt{ font-size:clamp(22px,5.4vw,28px);margin-block-end:12px; }
  .hib-mhero__stats{ grid-template-columns:repeat(2,1fr); }
  .hib-mhero__cell{ padding-block:18px; }
  .hib-mhero__cell:nth-child(3){ border-inline-start:none; }
  .hib-mhero__cell:nth-child(n+3){ border-block-start:1px solid var(--hib-border-on-dark); }
}
@media (max-width:560px){
  .hib-mhero .hib-search-v2{ flex-direction:column; }
}

/* Scoped header navy (amir-saban mockup index.html .nav uses rgb(8,24,46);
   no exact site-palette token exists — a header-only token keeps it precise
   without touching the global palette). */
:root{ --hib-header-navy-rgb:8,30,58;  /* 1B: header glass follows --hib-dark-bg (#081E3A) */
  --hib-lockup-pale:#EBF2FF;   /* wordmark on dark/navy contexts — bright pale blue-white */
  --hib-lockup-muted:#51617A;  /* wordmark on light surfaces — soft muted blue-grey (= --hib-text-muted) */
}

/* Home: navy nav over the hero, denser navy once scrolled — matches the mockup
   (index.html .nav rgba(8,24,46,.55) → .nav.scrolled rgba(8,24,46,.94)). The bar
   stays dark in BOTH states, so brand/nav text stays light throughout.
   Hero is pulled under the sticky header; JS toggles .is-pinned (front-page). */
body.home .hib-mhero{ margin-block-start:calc(-1 * var(--hib-header-h)); }
body.home .hib-header{ background:rgba(var(--hib-header-navy-rgb),.55);
  border-block-end:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  transition:background .25s var(--hib-ease),border-color .25s,backdrop-filter .25s; }
body.home .hib-header__logo{ color:var(--hib-lockup-pale); }
/* navy: "HIB." pale blue-white; "חיבורים" + hexagon shell light azure #A9C6FF */
body.home .hib-header .hib-header__lockup{ color:var(--hib-lockup-pale); }
body.home .hib-header .hib-header__word{ color:var(--hib-primary-on-dark); }
body.home .hib-header__link{ color:var(--hib-on-dark-muted); }
body.home .hib-header__link:hover,
body.home .hib-header__link--active{ color:#fff;background:rgba(255,255,255,.09); }
body.home .hib-header__mobile-toggle{ color:#fff; }
body.home .hib-header .hib-mark{ color:#fff; }
body.home .hib-header .hib-mark .hx{ stroke:var(--hib-primary-on-dark); }
body.home .hib-header .hib-mark .n2{ fill:var(--hib-primary-on-dark); }
body.home .hib-header .hib-mark .lk{ stroke:var(--hib-primary-on-dark); }
/* scrolled → denser navy (stays dark; text remains light — no flip) */
body.home .hib-header.is-pinned{ background:rgba(var(--hib-header-navy-rgb),.94);
  border-block-end-color:var(--hib-border-on-dark); }
/* mobile home: denser navy at the top fold for legibility over the hero
   (mockup @media(max-width:760px) .nav{background:rgba(8,24,46,.94)}) */
@media (max-width:1023px){
  body.home .hib-header{ background:rgba(var(--hib-header-navy-rgb),.92); }
}

/* ============================================================
   RESULTS / SEARCH — supplied mockup layout: left filters sidebar
   + horizontal result rows. Scoped to the front-page listing; the
   shared pro-card (profile) never sits in .hib-pros-grid--rows.
   ============================================================ */
.hib-results__layout{ display:grid;grid-template-columns:248px 1fr;gap:clamp(24px,3vw,44px);align-items:start; }

/* filters sidebar */
.hib-results__filters{ position:sticky;top:calc(var(--hib-header-h) + 16px);display:flex;flex-direction:column;gap:22px; }
.hib-fbox{ border-block-end:1px solid var(--hib-rule-soft);padding-block-end:20px; }
.hib-fbox:last-child{ border-block-end:none;padding-block-end:0; }
.hib-fbox__title{ font-family:var(--hib-font-hero);font-weight:900;font-size:var(--hib-body-lede-size);letter-spacing:normal;margin-block-end:12px;color:var(--hib-text-strong); }
.hib-fopt{ display:flex;align-items:center;gap:10px;padding:7px 0;font-size:var(--hib-body-s-size);color:var(--hib-text-secondary);text-decoration:none;transition:color .15s var(--hib-ease); }
.hib-fopt:hover{ color:var(--hib-text); }
.hib-fopt__box{ width:18px;height:18px;flex:0 0 auto;border:1.5px solid var(--hib-border);border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s var(--hib-ease); }
.hib-fopt__box svg{ width:11px;height:11px;opacity:0; }
.hib-fopt.is-on{ color:var(--hib-primary);font-weight:700; }
.hib-fopt.is-on .hib-fopt__box{ background:var(--hib-primary);border-color:var(--hib-primary); }
.hib-fopt.is-on .hib-fopt__box svg{ opacity:1; }
.hib-fopt__label{ flex:1;min-width:0; }
.hib-fopt__ct{ font-family:var(--hib-font-mono);font-size:.78rem;color:var(--hib-text-muted); }
.hib-fopt.is-static{ cursor:default; }

/* Facet density (HIB-MOCK-09): long term lists (specialties ~25, cities 12) are
   contained in a quiet scroll area — no truncation, all options reachable; the
   "הכל"/"כל האזורים" reset stays pinned above the list. */
.hib-fbox__list{ max-height:clamp(232px,38vh,312px);overflow-y:auto;margin-block-start:2px;padding-inline-end:4px;scrollbar-width:thin;scrollbar-color:var(--hib-border) transparent; }
.hib-fbox__list::-webkit-scrollbar{ width:6px; }
.hib-fbox__list::-webkit-scrollbar-thumb{ background:var(--hib-border);border-radius:999px; }
.hib-fbox__list::-webkit-scrollbar-track{ background:transparent; }

/* horizontal result rows */
/* The result set is ONE editorial comparison surface: eight floating cards
   read as eight competing objects, so the surface moves to the list — one
   border, one radius, hairline separators — and each row keeps only its
   reading zones. Comparison is the point: the shared column grid IS the
   comparison anchor (portrait / identity / proof / actions align down the
   page), and the eye travels row to row without re-entering a card. */
.hib-pros-grid--rows{
  display:flex;flex-direction:column;gap:0;
  background:var(--hib-surface);
  border:1px solid var(--hib-border);
  border-radius:var(--hib-radius-m); /* the ONE card radius — the list is the family's surface here */
  box-shadow:var(--hib-shadow-card);
  /* No `overflow:clip`: the hovered row's lift shadow must paint past the list
     edge, or the emphasis state is amputated at the container. The container's
     own corners stay drawn by its border; rows are transparent at rest. */
}
.hib-pros-grid--rows .hib-pro-card-v2{
  display:grid;grid-template-columns:104px 1fr auto;grid-template-rows:auto auto;
  column-gap:20px;row-gap:6px;align-items:center;
  padding:var(--hib-space-6) var(--hib-space-5); /* editorial rows breathe on the block axis */
  border-width:0;border-radius:0;box-shadow:none;
  transition:box-shadow .18s var(--hib-ease),background-color .18s var(--hib-ease);
}
.hib-pros-grid--rows .hib-pro-card-v2 + .hib-pro-card-v2{ border-block-start:1px solid var(--hib-rule-soft); }
/* Row emphasis LIFTS the professional off the comparison surface: the row
   becomes its own card — white ground, the family card radius, the raised-panel
   elevation — floating above both the list and the page. The tinted-surface
   treatment this replaces painted the row in the page background's own tone,
   which made the hovered professional LESS distinct than the resting ones.
   Focus-within draws the same state, so keyboard travel reads like hover. */
.hib-pros-grid--rows .hib-pro-card-v2:hover,
.hib-pros-grid--rows .hib-pro-card-v2:focus-within{
  position:relative;z-index:1;
  background:var(--hib-surface);
  border-radius:var(--hib-radius-m);
  border-block-start-color:transparent; /* its own top hairline would cross the lifted edge */
  box-shadow:var(--hib-shadow-m);
}
/* The lifted row hides the hairline between it and the row beneath it — its own
   edge is now the shadow, and a hairline crossing a floating card reads as a
   crack. */
.hib-pros-grid--rows .hib-pro-card-v2:hover + .hib-pro-card-v2,
.hib-pros-grid--rows .hib-pro-card-v2:focus-within + .hib-pro-card-v2{ border-block-start-color:transparent; }
@media (prefers-reduced-motion:reduce){
  .hib-pros-grid--rows .hib-pro-card-v2{ transition:none; }
}
.hib-pros-grid--rows .hib-pro-card-v2::after{ display:none; }
.hib-pros-grid--rows .hib-pro-card-v2__media{ grid-column:1;grid-row:1 / span 2;width:104px;height:104px;aspect-ratio:auto;border-radius:var(--hib-radius-icon);align-self:center; }
.hib-pros-grid--rows .hib-pro-card-v2__loc{ display:none; }
.hib-pros-grid--rows .hib-pro-card-v2__header{ grid-column:2;grid-row:1;padding:0;align-self:end; }
/* The identity block stacks in one order at every width: the name and its mark
   share the first line, then the rating, then the geographic answer. Each of the
   two takes a full flex line of its own — stated once here rather than repeated
   in each breakpoint, so a new breakpoint cannot forget one of them. */
.hib-pros-grid--rows .hib-pro-card-v2__header > .hib-pro-card__rating,
.hib-pros-grid--rows .hib-pro-card-v2__header > .hib-pro-card__geo{ flex:0 0 100%;margin:0; }
.hib-pros-grid--rows .hib-pro-card-v2__name{ font-size:var(--hib-card-title-size);letter-spacing:normal; } /* stronger primary element */
.hib-pros-grid--rows .hib-pro-card-v2__proof{ flex-wrap:wrap;row-gap:4px; } /* rating + distance + verified never clip */
.hib-pros-grid--rows .hib-pro-card-v2__body{ grid-column:2;grid-row:2;padding:0;align-self:start; }
.hib-pros-grid--rows .hib-pro-card-v2__footer{ grid-column:3;grid-row:1 / span 2;border:none;padding:0;margin:0;flex-direction:column;align-items:stretch;gap:8px;min-width:148px; }
.hib-pros-grid--rows .hib-pro-card-v2__footer .hib-btn{ width:100%; }
/* Actions come AFTER evaluation: eight filled azure blocks were the strongest
   thing on the page. Inside result rows the primary action holds its azure in
   outline form — same target, same contrast (azure on white passes AA as
   text), full fill returns on hover/focus. Elsewhere the primary button is
   untouched. */
.hib-pros-grid--rows .hib-pro-card-v2__footer .hib-btn--primary{
  background:none;color:var(--hib-primary);
  border:1.5px solid var(--hib-primary);
}
.hib-pros-grid--rows .hib-pro-card-v2__footer .hib-btn--primary:hover,
.hib-pros-grid--rows .hib-pro-card-v2__footer .hib-btn--primary:focus-visible{
  background:var(--hib-primary);color:#fff;
}

/* The four-zone row needs real width. At 1024 the rail takes 252 of it and the
   proof zone broke a specialty name across three lines, so the composition
   starts at 1280. Between the rail breakpoint and there the card keeps the
   two-row reading — identity, then proof beneath it — which that width has
   always carried well. */
@media (min-width:1280px){
  /* V3 — four zones, right to left: image · identity · proof · actions.
     Identity and evidence used to share one 530px column, so both hugged the
     right edge and left roughly 300px of dead card between the text and the
     actions. The row is now a single line of four zones, which is the approved
     reading order and also the reason the card no longer has a hole in it.
     The proof zone is separated by a hairline rather than a box — the rail and
     the summary already carry enough enclosure. */
  .hib-pros-grid--rows .hib-pro-card-v2{
    grid-template-columns:120px minmax(0,1.15fr) minmax(0,1fr) auto;
    grid-template-rows:auto;
  }
  /* The person before the button: at the width that carries four zones the
     portrait steps up from the 104 icon-tile to 120 — face-first scanning. */
  .hib-pros-grid--rows .hib-pro-card-v2__media{ grid-column:1;grid-row:1;width:120px;height:120px; }
  /* Identity: the name and its approval mark are one line — the mark belongs
     beside the name it approves, not stacked under it — and the geographic answer
     takes the line beneath. */
  .hib-pros-grid--rows .hib-pro-card-v2__header{
    grid-column:2;grid-row:1;align-self:center;
    /* `flex-direction` is stated because the preview card's header is a CENTRED
       COLUMN. Inheriting that turned `align-items:center` into horizontal
       centring and put every child on its own line — the name, its mark and the
       geographic answer each stranded mid-column. A row is what this composition
       needs, starting at the RTL start edge. */
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:start;
    column-gap:var(--hib-space-2);row-gap:var(--hib-space-1);
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central{
    grid-column:3;grid-row:1;align-self:center;min-width:0;
    display:flex;flex-direction:column;gap:var(--hib-space-2);
    padding-inline:var(--hib-space-5);
    border-inline-start:1px solid var(--hib-rule-soft);
  }
  /* Nothing true to say — no rule, no reserved slot. */
  .hib-pros-grid--rows .hib-pro-card-v2__central:empty{ border-inline-start:0;padding-inline:0; }
  /* One fact per line in the proof zone. The evidence row is content-sized on
     desktop, which suits a full-width card; inside a zone this narrow the two
     slots sat side by side and each value broke mid-phrase — «תיעוד» on one line
     and «מהשטח» on the next. Stacking keeps every phrase whole. */
  .hib-pros-grid--rows .hib-pro-card-v2__central .hib-pro-card-v2__evidence{
    margin:0;padding:0;flex-direction:column;gap:var(--hib-space-2);
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central .hib-evidence__slot{ flex:0 0 auto; }
  .hib-pros-grid--rows .hib-pro-card-v2__footer{ grid-column:4;grid-row:1; }
}

/* 1024–1279: three columns, proof under the identity. */
@media (min-width:1024px) and (max-width:1279px){
  .hib-pros-grid--rows .hib-pro-card-v2{
    grid-template-columns:104px minmax(0,1fr) auto;grid-template-rows:auto auto;
  }
  .hib-pros-grid--rows .hib-pro-card-v2__media{ grid-column:1;grid-row:1 / span 2; }
  .hib-pros-grid--rows .hib-pro-card-v2__header{
    grid-column:2;grid-row:1;align-self:end;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:start;
    column-gap:var(--hib-space-2);row-gap:var(--hib-space-1);
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central{
    grid-column:2;grid-row:2;align-self:start;min-width:0;
    display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--hib-space-2) var(--hib-space-5);
    padding:var(--hib-space-2) 0 0;border:0;
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central:empty{ display:none; }
  .hib-pros-grid--rows .hib-pro-card-v2__central .hib-pro-card-v2__evidence{ margin:0;padding:0; }
  .hib-pros-grid--rows .hib-pro-card-v2__footer{ grid-column:3;grid-row:1 / span 2; }
}

/* Proximity meta in the proof row — only emitted when a real $dist exists (address search). */
.hib-pro-card-v2__where{ display:inline-flex;align-items:center;gap:4px;color:var(--hib-text-muted);font-weight:600; }
.hib-pro-card-v2__where svg{ width:13px;height:13px;flex-shrink:0;opacity:.85; }

@media (max-width:900px){
  .hib-results__layout{ grid-template-columns:1fr; }
  /* filters → horizontal scrolling chips */
  .hib-results__filters{ position:static;flex-direction:row;gap:8px;overflow-x:auto;padding-block-end:6px;scrollbar-width:none; }
  .hib-results__filters::-webkit-scrollbar{ display:none; }
  .hib-fbox{ border:none;padding:0;display:flex;gap:8px;align-items:center;flex:0 0 auto; }
  .hib-fbox__title{ display:none; }
  .hib-fopt{ flex:0 0 auto;border:1px solid var(--hib-border);border-radius:999px;padding:8px 14px;background:#fff; }
  .hib-fopt__box,.hib-fopt__ct{ display:none; }
  .hib-fopt.is-on{ background:var(--hib-primary);color:#fff;border-color:var(--hib-primary); }
  /* unwrap the scroll container so options rejoin the horizontal pill row */
  .hib-fbox__list{ display:contents;max-height:none;overflow:visible; }
}
/* V4 — the stacked card, for every width below the four-zone row.
   Image at the RTL start, the identity beside it, the proof on its own row
   beneath the identity block, and the actions as a full-width row at the foot.
   Two columns and three rows, placed explicitly: the desktop composition sets
   four column positions, and without stating these the browser invents extra
   tracks and the identity collapses to a 56px stripe. */
@media (max-width:1023px){
  .hib-pros-grid--rows .hib-pro-card-v2{
    grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto;
    align-items:start;
  }
  .hib-pros-grid--rows .hib-pro-card-v2__media{ grid-column:1;grid-row:1; }
  .hib-pros-grid--rows .hib-pro-card-v2__header{
    grid-column:2;grid-row:1;align-self:center;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:start;
    column-gap:var(--hib-space-2);row-gap:var(--hib-space-1);
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central{
    grid-column:1 / -1;grid-row:2;min-width:0;
    display:flex;flex-direction:column;gap:var(--hib-space-2);
    padding:var(--hib-space-3) 0 0;border:0;
  }
  .hib-pros-grid--rows .hib-pro-card-v2__central:empty{ display:none; }
  .hib-pros-grid--rows .hib-pro-card-v2__footer{
    grid-column:1 / -1;grid-row:3;flex-direction:row;margin-block-start:var(--hib-space-3);
  }
  /* Both actions share the row; the primary keeps the RTL start. */
  .hib-pros-grid--rows .hib-pro-card-v2__footer .hib-btn{ flex:1 1 0;width:auto; }
}
@media (max-width:560px){
  /* The person is the mobile row's priority #1: the portrait holds the 88
     square (the preview card's own former scale) rather than dropping to an
     icon-sized 72 — face-first survives the phone. */
  .hib-pros-grid--rows .hib-pro-card-v2{ grid-template-columns:88px minmax(0,1fr); }
  .hib-pros-grid--rows .hib-pro-card-v2__media{ width:88px;height:88px; }
}
/* Only where the row genuinely cannot hold two: stack, primary first. */
@media (max-width:360px){
  .hib-pros-grid--rows .hib-pro-card-v2__footer{ flex-direction:column; }
}

/* ============================================================
   PROFILE — supplied mockup 2-col body: content + sticky contact
   card. Content sections are re-parented into the main column
   (their nested section/container chrome is neutralised).
   ============================================================ */
/* The two-column zone now holds ONE movement — the personal introduction beside
   the means of contact — instead of the whole page body. See the template note
   at `</main>`: it used to wrap every main-column section, so a 290px card
   reserved a 322px column for ~1,840px of page and narrowed the evidence
   sections to ~774px for the entire scroll. Below this zone the page returns to
   the site's ordinary container, which is what every other HIB route uses. */
.hib-profile-layout{ display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:clamp(28px,4vw,56px);align-items:start;padding-block:clamp(32px,4vw,52px) 0; }
.hib-profile-main{ min-width:0; }
.hib-profile-main > .hib-section{ padding-block:0; }
.hib-profile-main > .hib-section:last-child{ padding-block-end:0; }
.hib-profile-main .hib-container{ max-width:none;padding-inline:0;margin-inline:0;width:100%; }
.hib-profile-main .hib-bg-soft{ background:transparent; }
.hib-profile-main .hib-section--edge{ margin-inline:0; }

.hib-profile-aside{ position:sticky;top:calc(var(--hib-header-h) + 16px); }
.hib-contact-card{ background:#fff;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-m);box-shadow:var(--hib-shadow-m);padding:24px; }
.hib-contact-card__price{ font-family:var(--hib-font-mono);font-size:var(--hib-label-m-size);color:var(--hib-text-muted); }
.hib-contact-card__price b{ font-family:var(--hib-font-hero);font-weight:900;font-size:1.32rem;color:var(--hib-text-strong);letter-spacing:normal; }
.hib-contact-card__rows{ margin-block-start:16px; }
.hib-crow{ display:flex;align-items:center;gap:10px;padding:12px 0;border-block-end:1px solid var(--hib-rule-soft);font-size:var(--hib-label-m-size);color:var(--hib-text-secondary);line-height:1.35; }
.hib-crow:last-child{ border-block-end:none; }
.hib-crow__ic{ width:18px;height:18px;flex:0 0 auto;color:var(--hib-primary); }
.hib-crow b{ color:var(--hib-text-strong); }
.hib-contact-card__cta{ width:100%;margin-block-start:12px; }
/* The reviews anchor is navigation, not a second commitment — it moves the
   reader down the page they are already on. As a full-width `--l` button beside
   the call it read as an equal choice, which is the one thing a conversion
   surface must not do. It keeps a real 44px target. */
/* ── Introduction + contact: one section, not two widgets ────────────────────
   The pair read as two independent components parked beside each other: two
   raised cards, two surfaces, two internal paddings, and the SECONDARY one
   (contact, 306px) standing taller than the primary (the professional's own
   words, 250px). Whichever card the eye met first, the composition said the two
   were peers.

   They are not. The paper is testimony — the site's human-evidence material —
   and the contact panel is the means of acting on it. So the paper keeps its
   surface and leads, and the contact demotes from a raised card (e2) to a
   bounded panel (e0, the elevation role for a surface whose job is to be
   legible rather than raised). Same information, same order, same components;
   one of them stops competing. */
/* NOT restyled. I tried demoting this card — shadow removed, padding tightened —
   to stop the secondary panel out-measuring the testimony beside it. Both moves
   contradict committed system roles: `elevation-system.spec.js` pins the sidebar
   card at e2 ("sidebar cards, feature panels" — PRODUCT.md's own assignment for
   that level) and `spacing-rhythm.spec.js` pins `.hib-contact-card` padding to
   the 24 step of the roomy-card pair.

   The premise was also weaker than it looked: the card only out-measures the
   paper on SHORT-bio profiles. On a full bio the paper runs 679px and the card
   282px, so "the secondary element is taller" is a property of the data, not of
   the composition. The unification this pair needed was the interior tightening
   below, which touches neither pinned role. */
.hib-profile-aside .hib-contact-card__rows{ margin-block-start:0; }
.hib-profile-aside .hib-contact-card__cta{ margin-block-start:var(--hib-space-3); }
.hib-profile-aside .hib-contact-card__jump{
  display:flex; align-items:center; justify-content:center;
  min-block-size:var(--hib-tap-min,44px); margin-block-start:6px;
  font-family:var(--hib-font-ui); font-size:var(--hib-label-m-size); font-weight:600;
  color:var(--hib-primary); text-decoration:underline; text-underline-offset:3px;
  letter-spacing:normal;
}
.hib-profile-aside .hib-contact-card__jump:hover{ color:var(--hib-primary-hover); }
.hib-profile-aside .hib-contact-card__jump:focus-visible{ outline:2px solid var(--hib-accent);outline-offset:2px; }
.hib-contact-card__note{ display:flex;gap:10px;align-items:flex-start;background:var(--hib-domain-soft);border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-m);padding:13px;margin-block-start:16px;font-size:var(--hib-micro-label-size);line-height:1.45;color:var(--hib-text-secondary); }
.hib-contact-card__note svg{ width:18px;height:18px;flex:0 0 auto;color:var(--hib-primary); }
@media (max-width:900px){
  .hib-profile-layout{ grid-template-columns:1fr;padding-block:clamp(24px,5vw,36px); }
  .hib-profile-aside{ position:static;margin-block-start:8px; }
}

/* Guide topics on the profile — the assistance layer at the end of the
   profile. The cards themselves are THE shared category card + the homepage
   grid (.hib-home-guides__grid — columns, gap, phone snap rail all inherited);
   this block owns only the section head and the grid's offset below it. */
/* The guides now follow the closing CTA rather than interrupting before it, so
   they need their own separation from the band above: outside the main column
   they no longer inherit its section step. Quiet by design — this is the
   after-the-decision layer, not a third pitch. */
/* ── Rhythm: movements, not beats ────────────────────────────────────────────
   Every body section was `--compact` with the same bottom step and the same
   hairline, so the page read as an undifferentiated stack: the work gallery,
   the field video and the "what and where" block each announced themselves as
   loudly as the next, and nothing told the reader where one idea ended.

   They are grouped instead. Gallery + video are ONE movement — both are field
   documentation, both answer "what has this person actually done" — so they sit
   tight against each other and take a single separating rule at the top of the
   pair. "What and where" is the next movement and opens with a full section
   step. All values come off the existing ladder (48 dense / 64 standard); no
   new spacing is invented. */
.hib-profile-evidence{ padding-block:clamp(40px,4.5vw,64px) 0; }
.hib-profile-evidence + .hib-profile-evidence{ padding-block-start:clamp(24px,2.6vw,32px); }
/* Only the FIRST section of the movement carries the rule; the second is the
   same idea continuing, and a second hairline would split it in two. */
.hib-profile-evidence + .hib-profile-evidence.hib-section--edge::before{ display:none; }
/* Symmetric now that it paints: a band that ends flush against its last chip
   row reads as a background that ran out, not a surface. Both ends on the
   standard section step. */
.hib-profile-scope{ display:block; padding-block:clamp(40px,4.5vw,64px); }
.hib-profile-guides-section{ padding-block:clamp(40px,4.5vw,64px) clamp(8px,1.6vw,20px); }
.hib-profile-guides__head{ display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.hib-profile-guides__title{ font-family:var(--hib-font-display);font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--hib-text);margin:0; }
.hib-profile-guides__all{ font-size:var(--hib-label-m-size);font-weight:600;color:var(--hib-primary); }
.hib-profile-guides__lead{ margin:6px 0 0;color:var(--hib-text-secondary);font-size:var(--hib-body-s-size);line-height:1.6; }
.hib-profile-guides__grid{ margin-block-start:var(--hib-space-5); }

/* review rating-distribution bars (mockup rate-summary) */
/* ── "What he does and where" — one movement, two runs ───────────────────────
   Two sections became one because they answer one question. Side by side on
   desktop so the pair reads as a single decision-support block; stacked on
   mobile, where two columns of chips would halve an already narrow measure.
   The runs keep their own headings and their own lists: a capability and a
   coverage area are different kinds of claim and must stay legible as such. */
/* The block sits on the grouping wash — the surface role PRODUCT.md assigns to
   exactly this job ("surface-soft = grouping"). Without it the two runs were
   white chips on the page's own near-white ground: two floating clusters of UI
   metadata with nothing binding them, and no figure/ground separation for the
   chips themselves. On the wash the pair reads as ONE statement of what he does
   and where, and the white chips finally have something to sit on.

   The template asked for this originally — the specialties section carried
   `hib-bg-soft` — but `.hib-profile-main .hib-bg-soft{background:transparent}`
   cancelled it while the section lived inside the two-column column. Out of that
   column the intent can finally paint. */
.hib-profile-scope{
  background:var(--hib-surface-soft);
  border-block:1px solid var(--hib-rule-soft);
}
/* The wash IS the separation; a hairline on top of a surface change is the
   boundary stated twice. */
.hib-profile-scope.hib-section--edge::before{ display:none; }
/* The two runs are not equal, so they no longer occupy equal columns.
   "What does he do" is the question a visitor arrives with; "where does he
   work" qualifies the answer. `auto-fit … 1fr` gave them identical halves, which
   is why the block read as a filter panel — two symmetrical facet lists — rather
   than as part of a profile. The asymmetry states the hierarchy without a single
   new element, label or line of copy, and the specialty run gets the wider
   measure it actually needs (its chips carry whole phrases, the region chips
   carry short names).

   Collapses to one column below the breakpoint, where two columns of chips would
   halve an already narrow measure. */
.hib-profile-scope__inner{
  display:grid; gap:clamp(28px,3.4vw,44px) clamp(32px,4vw,64px);
  grid-template-columns:1.45fr 1fr;
  align-items:start;
}
/* One run, one column. Five of the 73 published professionals have no stored
   service regions at all, and a couple have no specialties; with a fixed two-
   track grid the missing run still reserved its share, so the band painted a
   wash across a half-empty row — the exact "layout reserving space" tell this
   pass exists to remove. `:has()` is already the codebase's idiom for this kind
   of structural response. */
.hib-profile-scope__inner:has(.hib-profile-scope__run:only-child){
  grid-template-columns:minmax(0,1fr);
}
@media (max-width:860px){
  .hib-profile-scope__inner{ grid-template-columns:1fr; }
}
.hib-profile-scope__run{ min-width:0; }
/* The count states the size of the coverage before anything is opened, so the
   number is honest whether or not the reader expands the list. */
.hib-profile-areas__count{
  margin:0 0 var(--hib-space-4); font-family:var(--hib-font-ui);font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--hib-label-s-size); color:var(--hib-text-muted); letter-spacing:normal;
}
/* Overflow chips are real markup inside the same list, hidden by CSS only —
   so with no JavaScript the whole coverage is present and readable, and the
   toggle (which ships `hidden`) never becomes a dead control. */
.hib-profile-areas__grid.is-clamped .hib-profile-areas__chip--over{ display:none; }
.hib-profile-areas__grid.is-open .hib-profile-areas__chip--over{ display:inline-flex; }
.hib-profile-areas__more{
  display:inline-flex; align-items:center; gap:6px;
  min-block-size:var(--hib-tap-min,44px); margin-block-start:var(--hib-space-3);
  padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--hib-font-ui); font-size:var(--hib-label-m-size); font-weight:600;
  color:var(--hib-primary); text-decoration:underline; text-underline-offset:3px;
  letter-spacing:normal;
}
.hib-profile-areas__more:hover{ color:var(--hib-primary-hover); }
.hib-profile-areas__more:focus-visible{ outline:2px solid var(--hib-accent);outline-offset:2px; }

.hib-rating-bars{ display:flex;flex-direction:column;gap:8px;max-width:440px;margin-block:6px 26px; }
.hib-rating-bar{ display:flex;align-items:center;gap:12px;font-size:var(--hib-label-s-size);color:var(--hib-text-muted); }
.hib-rating-bar__star{ display:inline-flex;align-items:center;gap:3px;width:32px;color:var(--hib-text-secondary);font-weight:700;flex:0 0 auto; }
.hib-rating-bar__star svg{ width:13px;height:13px;color:var(--hib-rating-star); }
.hib-rating-bar__track{ flex:1;height:7px;background:var(--hib-domain-soft);border-radius:4px;overflow:hidden; }
.hib-rating-bar__fill{ display:block;height:100%;background:var(--hib-primary);border-radius:4px; }
.hib-rating-bar__ct{ font-family:var(--hib-font-mono);width:24px;text-align:start;flex:0 0 auto; }

/* ============================================================
   ADD-PROFESSIONAL — supplied mockup apply layout: full-bleed
   dark founder rail (steps roadmap + Amir) + form column. The
   live stepper form is unchanged; the rail mirrors its active step.
   ============================================================ */
.hib-apply-wrap{ max-width:none;padding-inline:0;margin-inline:0; }
.hib-apply{ display:grid;grid-template-columns:minmax(0,380px) 1fr;min-height:calc(100vh - var(--hib-header-h));align-items:stretch; }
.hib-apply__rail{ position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  padding:clamp(36px,4vw,56px) clamp(28px,3vw,48px);
  background:radial-gradient(900px 620px at 92% -10%,rgba(43,99,214,.28),transparent 60%),linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%); }
.hib-apply__rail::before{ content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 30%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 70%,transparent); }
.hib-apply__rail-in{ position:relative;z-index:1;display:flex;flex-direction:column;height:100%; }
/* .hib-apply__eyebrow — type owned by the HERO KICKER role. */
.hib-apply__title{ font-family:var(--hib-font-hero);font-weight:900;color:#fff;font-size:var(--hib-page-title-size);line-height:var(--hib-page-title-lh);letter-spacing:normal;margin:16px 0 14px; }
.hib-apply__lede{ color:var(--hib-on-dark-muted);font-size:var(--hib-body-lede-size);line-height:1.62;margin:0; }
.hib-apply__steps{ list-style:none;margin:auto 0 0;padding:28px 0 0;display:flex;flex-direction:column;gap:2px; }
.hib-apply__step{ display:flex;align-items:center;gap:14px;padding:13px 0;color:var(--hib-on-dark-muted);font-weight:700;font-size:var(--hib-body-s-size);transition:color .2s var(--hib-ease); }
.hib-apply__step-dot{ width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--hib-font-mono);font-weight:500;font-size:var(--hib-label-s-size);border:1px solid rgba(169,198,255,.3);color:var(--hib-on-dark-muted);transition:.2s var(--hib-ease); }
.hib-apply__step.is-done .hib-apply__step-dot{ background:var(--hib-primary-on-dark);border-color:var(--hib-primary-on-dark);color:var(--hib-text-strong); }
.hib-apply__step.is-active .hib-apply__step-dot{ background:var(--hib-primary);border-color:var(--hib-primary);color:#fff; }
.hib-apply__step.is-active,.hib-apply__step.is-done{ color:#fff; }
.hib-apply__founder{ margin-block-start:28px;border-block-start:1px solid rgba(169,198,255,.18);padding-block-start:24px;display:flex;gap:13px;align-items:center; }
.hib-apply__founder img{ width:48px;height:48px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(169,198,255,.25); }
.hib-apply__founder-q{ font-size:var(--hib-label-s-size);color:var(--hib-on-dark-soft);line-height:1.45; }
.hib-apply__founder-q b{ color:#fff; }
.hib-apply__form{ padding:clamp(34px,4vw,64px);max-width:840px;width:100%; }

@media (max-width:880px){
  .hib-apply{ grid-template-columns:1fr; }
  .hib-apply__rail{ padding:32px; }
  .hib-apply__steps{ flex-direction:row;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding-block-start:22px;border-block-start:1px solid rgba(169,198,255,.18); }
  .hib-apply__step{ padding:0; }
  .hib-apply__step>span:last-child{ display:none; }
  .hib-apply__founder{ display:none; }
  .hib-apply__form{ padding:30px var(--hib-container-pad,20px); }
}

/* HIB-MOCK-14: the form column reads as a flat full-bleed form-area (apply.html
   .form-area) rather than a floating card. Scoped to the live form stepper only
   (#stepper) — the success-state .hib-stepper (no id) keeps its confirmation card. */
.hib-apply #stepper{ max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none; }

/* ============================================================
   CONTACT — split screen: a message form (the primary action) beside a
   supporting panel that speaks in Amir's first person. R7 removed the
   "סוג הפנייה" selector (§E4) AND the phone/WhatsApp channels; the panel
   now carries a hero, a "what to write about" list, Amir's word and an
   optional contact-methods block. The split is weighted 5/7 so the form
   is the wider, dominant column; every panel string is an ACF field.
   ============================================================ */
.hib-contact-split-wrap{ max-width:none;padding-inline:0;margin-inline:0; }
.hib-contact-split{ display:grid;grid-template-columns:5fr 7fr;min-height:calc(100vh - var(--hib-header-h));align-items:stretch; }
.hib-contact-panel{ position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;
  padding:clamp(40px,5vw,72px) clamp(30px,3.5vw,60px);
  background:radial-gradient(900px 640px at 90% 0%,rgba(43,99,214,.3),transparent 56%),linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%); }
.hib-contact-panel::before{ content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 30%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 70%,transparent); }
.hib-contact-panel__in{ position:relative;z-index:1;display:flex;flex-direction:column;height:100%; }
/* .hib-contact-panel__eyebrow — type owned by the HERO KICKER role. */
.hib-contact-panel__title{ font-family:var(--hib-font-hero);font-weight:900;color:#fff;font-size:var(--hib-page-title-size);line-height:var(--hib-page-title-lh);letter-spacing:normal;margin:14px 0 14px; }
.hib-contact-panel__lede{ color:var(--hib-on-dark-soft);font-size:var(--hib-body-lede-size);line-height:1.62;max-width:44ch;margin:0; }

/* "על מה אפשר לכתוב לי?" — the block that replaces the removed channels. */
.hib-contact-panel__support{ margin-block-start:30px; }
.hib-contact-panel__subhead{ font-family:var(--hib-font-display);font-weight:700;font-size:var(--hib-card-title-size);line-height:1.25;letter-spacing:normal;color:#fff;margin:0 0 8px; }
.hib-contact-panel__subintro{ color:var(--hib-on-dark-soft);font-size:var(--hib-body-s-size);line-height:1.55;margin:0 0 16px;max-width:44ch; }
.hib-contact-topics{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px; }
.hib-contact-topics__item{ display:flex;align-items:flex-start;gap:11px;color:rgba(233,240,253,.95);font-size:1rem;line-height:1.4; }
.hib-contact-topics__ic{ width:20px;height:20px;flex:0 0 auto;color:var(--hib-primary-on-dark);margin-block-start:1px; }
.hib-contact-panel__note{ color:var(--hib-on-dark-muted);font-size:var(--hib-label-s-size);line-height:1.45;margin:16px 0 0; }

/* Optional contact methods (empty by default — nothing renders until enabled). */
.hib-contact-panel__methods{ list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px; }
.hib-contact-panel__method{ display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:11px 0;border-block-end:1px solid rgba(169,198,255,.16);text-decoration:none;color:#fff;transition:color .15s var(--hib-ease); }
.hib-contact-panel__methods li:last-child .hib-contact-panel__method{ border-block-end:none; }
.hib-contact-panel__method-k{ font-family:var(--hib-font-mono);font-size:.75rem;text-transform:uppercase;color:rgba(180,205,255,.9); }
.hib-contact-panel__method-v{ font-weight:600; }
.hib-contact-panel__method:hover .hib-contact-panel__method-v{ color:var(--hib-primary-on-dark); }

/* Amir's word — pinned to the panel's foot on desktop. */
.hib-contact-panel__founder{ margin-block-start:auto;border-block-start:1px solid rgba(169,198,255,.18);padding-block-start:26px;margin-block-end:0;display:flex;gap:16px;align-items:flex-start; }
.hib-contact-panel__founder img{ width:64px;height:64px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(169,198,255,.25); }
.hib-contact-panel__founder-q{ font-size:var(--hib-body-s-size);color:var(--hib-on-dark-soft);line-height:1.55;margin:0; }
.hib-contact-panel__quote{ display:block; }
.hib-contact-panel__signature{ display:block;margin-block-start:8px;color:#fff;font-weight:700; }

.hib-contact-formcol{ display:flex;flex-direction:column;justify-content:center;justify-self:center;padding:clamp(40px,5vw,72px) clamp(30px,3.5vw,60px);max-width:660px;width:100%; }
/* .hib-contact-formcol__eyebrow — type owned by the HERO KICKER role; it is the
   light-ground member, and only its ink is restated there. */
.hib-contact-formcol__title{ font-family:var(--hib-font-hero);font-weight:900;font-size:var(--hib-band-title-size);letter-spacing:normal;color:var(--hib-text-strong);margin:10px 0 6px; }
.hib-contact-formcol__sub{ color:var(--hib-text-secondary);font-size:var(--hib-body-s-size);margin:0 0 22px;line-height:1.55; }

/* Full-width submit + truthful privacy note */
.hib-contact-formcol .hib-contact-form__submit{ width:100%;align-self:stretch;justify-content:center; }
/* The terms line now sits WITH the collection notice above the button, so it takes
   the same supporting-text role: same size, same colour, same start alignment. It was
   13px and centred while the notice beside it was 15px and start-aligned — two voices
   for the same job, one on each side of the primary action. */
.hib-contact-formcol__note{
  margin:0;
  font-size:var(--hib-body-s-size);line-height:1.6;
  color:var(--hib-text-secondary);max-width:62ch;text-wrap:pretty;
}
.hib-contact-formcol__note a{ color:var(--hib-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px; }
.hib-contact-formcol__note a:hover{ color:var(--hib-primary-hover); }
.hib-contact-formcol__note a:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* ONE supporting block per form.
   The host form is a flex column with its own gap, so this wrapper — not its children
   — is what that gap spaces. Children keep no outer margin of their own; the seam
   between them is this grid's gap, deliberately tighter than the form's, so the two
   paragraphs read as one thing to finish before pressing the button. */
.hib-form-note{ display:grid;gap:var(--hib-space-3); }
/* `> p` and not `> *`: the notice carries its own block margins for the block-layout
   hosts (the review form, the intake step), and a bare class selector would not
   outrank them here. This is the one place those margins must yield to the grid. */
.hib-form-note > p{ margin:0; }
.hib-field__opt{ font-weight:400;color:var(--hib-text-muted); }

@media (max-width:880px){
  /* Single column, form FIRST (the primary action), the supporting panel after.
     No forced min-height so neither block grows an empty tail; the panel stays as
     short as its content. */
  .hib-contact-split{ grid-template-columns:1fr;min-height:0; }
  .hib-contact-panel,
  .hib-contact-formcol{ min-width:0; } /* let the 1fr track shrink to the viewport, incl. at 200% zoom */
  .hib-contact-formcol{ order:-1;padding:32px var(--hib-container-pad,20px);max-width:none; }
  .hib-contact-panel__in{ height:auto; }
  .hib-contact-panel__founder{ margin-block-start:26px; }
}

/* Brand consistency: azure authority hairline on the remaining dark heroes
   (404, vision, legal/policy) — matches every other dark hero on the site. */
.hib-404,
.hib-vision-hero,
.hib-policy-hero{ box-shadow:inset 0 3px 0 var(--hib-primary); }

/* Shared dot-grid texture on the dark authority heroes (vision + policy) — the
   same azure dot motif used by the home closing CTA (.hib-home-cta__dg), top-masked
   so it reads as a premium accent. Pure decoration: no markup or content change,
   so legal templates stay untouched. */
.hib-vision-hero,
.hib-policy-hero{ isolation:isolate; }
.hib-vision-hero::before,
.hib-policy-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(169,198,255,.12) 1px,transparent 1.6px);
  background-size:22px 22px;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 78% 64% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 78% 64% at 50% 0%,#000 0%,transparent 72%);
}

/* ============================================================
   BRAND LOCKUP — refined two-font textual wordmark "חיבורים HIB.".
   Hebrew (חיבורים) in Ploni Light (300); Latin (HIB.) in IBM Plex Mono
   (400) — intentionally paired, thin and airy. No divider, no separator;
   the Hebrew↔Latin distinction comes from the type pairing, not colour or
   a rule. Single tone, adaptive per background (pale blue-white on navy,
   soft muted blue-grey on light). Dot after HIB preserved. Hexagon path
   unchanged. home/dark-state colour handled in the home nav block above.
   ============================================================ */
.hib-header__logo{ font-size:1.4375rem;line-height:1;gap:11px;letter-spacing:normal;font-weight:400; }
.hib-header__logo .hib-mark{ width:30px;height:30px; }
/* ── Bar geometry under text zoom ──
   The lockup is brand artwork, not body copy, so it does not double when the
   root font size does: at 200% its 1.4375rem became 46px, the logo grew to
   300px inside a 265px bar, ran off the viewport (left:-59.4px at 320) and
   pushed 44px of horizontal scroll onto the document while the bar itself
   stayed a fixed 72px and could not make room. The cap keeps the mark, the
   Latin lockup and the Hebrew word in proportion to each other and to the
   30px hexagon beside them, which never scaled either. The bar now carries a
   FLOOR rather than a fixed height, so it grows with its content instead of
   letting content escape it — and `--hib-header-h` stays true, which is what
   every `calc(var(--hib-header-h) + …)` offset in the theme, including the
   home hero's, is positioned against. */
.hib-header__logo{ font-size:min(1.4375rem,26px);min-inline-size:0; }
.hib-header__inner{ height:auto;min-block-size:var(--hib-header-h);gap:var(--hib-space-3); }
.hib-header__logo .hib-header__lockup{ min-inline-size:0;overflow:hidden; }
/* Below ~305px of viewport the full lockup (mark + ".HIB" + "חיבורים" = 209px)
   can no longer sit beside the 44px menu button. Dropping the Hebrew word is a
   deliberate lockup fallback; letting `overflow` cut it mid-glyph is not. The
   bar keeps its height either way, which is what the hero is positioned on. */
@media (max-width:304px){
  .hib-header__logo{ font-size:min(1.25rem,20px);gap:var(--hib-space-1); }
  .hib-header__logo .hib-mark{ width:24px;height:24px; }
  .hib-header__logo .hib-header__word{ display:none; }
}
.hib-header__lockup,
.hib-footer__lockup{ display:inline-flex;align-items:baseline;white-space:nowrap; }
/* Latin "HIB." — thin mono, airy tracking; light surfaces → muted blue-grey */
.hib-header__logo .hib-header__lockup{
  font-family:var(--hib-font-mono);font-weight:400;
  color:var(--hib-lockup-muted); } /* Latin tracking via .hib-latin (R1) */
.hib-header__dot{ color:inherit; }
/* Hebrew "חיבורים" — Ploni Light; light azure (visible on white → --hib-primary;
   the pale #A9C6FF azure is applied in the dark/home block). */
.hib-header__logo .hib-header__word{
  font-family:var(--hib-font-body);font-weight:300;font-size:1em;letter-spacing:normal;
  color:var(--hib-primary);margin-inline-start:.42em; }
/* hexagon shell (outline) → azure, paired with the wordmark (light surfaces) */
.hib-header__logo .hib-mark .hx{ stroke:var(--hib-primary); }
/* footer — the SAME lockup as the header, in the footer's own colours.

   It was a different wordmark: Danidin 700 for both the Latin and the Hebrew,
   against the header's mono Latin + Ploni Light Hebrew. The two words a visitor
   sees most often on the site were set in two type systems, one at the top of
   every page and one at the bottom. Only the colour and the ground differ now:
   mono 400 for the Latin, Ploni Light at 1em for the Hebrew — the header's
   proportions exactly, so the mark reads as one wordmark in two colourways. */
.hib-footer__dot{ color:var(--hib-primary-on-dark); }
.hib-footer__brand .hib-footer__lockup{
  font-family:var(--hib-font-mono);font-weight:400;
  color:var(--hib-on-dark); }   /* Latin tracking via .hib-latin (R1) */
.hib-footer__brand .hib-footer__word{
  font-family:var(--hib-font-body);font-weight:300;font-size:1em;
  color:var(--hib-primary-on-dark);letter-spacing:normal;margin-inline-start:.42em; }

/* mobile menu panel: brand lockup at the top of the drawer — same refined
   two-font treatment as the topbar, light-panel tone (soft muted blue-grey). */
.hib-mobile-menu__top{ display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-block-end:var(--hib-space-4); }
.hib-mobile-menu__brand{ display:inline-flex;align-items:center;gap:11px;
  font-size:1.4375rem;line-height:1;white-space:nowrap; }
.hib-mobile-menu__brand .hib-mark{ width:30px;height:30px;flex:0 0 auto; }
.hib-mobile-menu__brand .hib-mark .hx{ stroke:var(--hib-primary); } /* azure hexagon shell */
.hib-mobile-menu__brand .hib-header__lockup{ display:inline-flex;align-items:baseline;
  font-family:var(--hib-font-mono);font-weight:400;
  color:var(--hib-lockup-muted); } /* Latin tracking via .hib-latin (R1) */
.hib-mobile-menu__brand .hib-header__dot{ color:inherit; }
.hib-mobile-menu__brand .hib-header__word{
  font-family:var(--hib-font-body);font-weight:300;font-size:1em;letter-spacing:normal;
  color:var(--hib-primary);margin-inline-start:.42em; } /* חיבורים azure */
.hib-mobile-menu__top .hib-mobile-menu__close{ margin-block-end:0;align-self:center; }
/* ============================================================
   SEARCH/RESULTS gap-close — compact header when filtering,
   work-area filter, applied chips, sort, work-area in rows.
   ============================================================ */
/* Compact contextual header (replaces the full home hero on a filtered view) */
.hib-mhero--compact .hib-mhero__grid{ grid-template-columns:1fr;min-height:0; }
.hib-mhero--compact .hib-mhero__portrait{ display:none; }
.hib-mhero--compact .hib-mhero__content{ padding-block:clamp(32px,4.5vw,52px);justify-content:flex-start; }
.hib-mhero--compact .hib-mhero__eyebrow,
.hib-mhero--compact .hib-mhero__title,
.hib-mhero--compact .hib-mhero__lede,
.hib-mhero--compact .hib-mhero__trust,
.hib-mhero--compact .hib-mhero__tags{ display:none; }
.hib-mhero__crumb{ font-family:var(--hib-font-mono);font-size:.78rem;color:var(--hib-on-dark-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block-end:14px; }
.hib-mhero__crumb a{ color:var(--hib-on-dark-muted);text-decoration:none;transition:color .15s; }
.hib-mhero__crumb a:hover{ color:#fff; }
.hib-mhero__crumb-cur{ color:var(--hib-primary-on-dark); }
.hib-mhero__rtitle{ font-family:var(--hib-font-hero);font-weight:900;color:#fff;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:normal;margin:0 0 8px; }
.hib-mhero__rsub{ color:var(--hib-on-dark-muted);font-size:1rem;margin:0; }
.hib-mhero--compact .hib-search-v2{ margin-block-start:24px; }
.hib-mhero--compact .hib-mhero__stats{ display:none; }

/* results-summary: count · context | trust | sort  +  applied chips below */
.hib-results-summary{ flex-wrap:wrap;gap:14px 20px; }
.hib-results-summary__sort{ display:flex;align-items:center;gap:8px;font-size:var(--hib-label-s-size);color:var(--hib-text-muted);margin-inline-start:auto; }
.hib-results-summary__sort select{ font-family:var(--hib-font-body);font-weight:700;font-size:var(--hib-label-s-size);color:var(--hib-text);border:1px solid var(--hib-border);border-radius:8px;padding:7px 11px;background:#fff;cursor:pointer; }
.hib-results-summary__sort select:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-applied{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:14px; }
.hib-applied__chip{ display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:#fff;
  background:var(--hib-primary);border-radius:999px;padding:6px 13px;text-decoration:none;transition:background .15s var(--hib-ease); }
.hib-applied__chip:hover{ background:var(--hib-primary-hover); }
.hib-applied__chip span{ font-size:var(--hib-label-min);opacity:.85; } /* was .72rem — label floor */
.hib-applied__clear{ font-size:.82rem;font-weight:700;color:var(--hib-text-muted);text-decoration:none;
  border:1px dashed var(--hib-border);border-radius:999px;padding:6px 13px;transition:.15s var(--hib-ease); }
.hib-applied__clear:hover{ color:var(--hib-text);border-color:var(--hib-text-secondary); }

/* ============================================================
   HOME — sub-domains (specialties) index + how-it-works band.
   ============================================================ */
/* Service categories — six horizontal action cards. The CARD ITSELF is styled once,
   in the guides-index category-card block below (.hib-lib-card): the `.hib-subdomain`
   selectors ride the same declarations, so the service chooser, the homepage guides
   teaser and /guides/ are one card system by construction. Only this SECTION's frame
   lives here: the header row and the six-card grid (3 → 2 → 1 columns; the guides
   surfaces run their own 3-up / snap-rail grids over the identical card). */
/* Tighten the gap to this grid: the global section-header margin is generous for
   full-width sections; the service chooser sits closer to the heading it answers. */
.hib-section:has(.hib-subdomains) .hib-section-header{ margin-block-end:clamp(18px,2vw,30px); }
/* Read the heading and its CTA as ONE row: centre the outlined "כל התחומים" pill against
   the title+lead block (the shared --row default bottom-aligns it, which floats it away). */
.hib-section:has(.hib-subdomains) .hib-section-header--row{ align-items:center; }
/* "כל התחומים" — anchor the section's secondary CTA as a restrained outlined pill so it
   reads as a deliberate action opposite the heading, not floating azure text. Scoped to
   this section; the shared ghost-button pattern elsewhere is untouched. */
.hib-section:has(.hib-subdomains) .hib-section-header__action{ margin-block-end:0;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-xs);background:var(--hib-surface); }
.hib-section:has(.hib-subdomains) .hib-section-header__action:hover{ border-color:var(--hib-primary);background:var(--hib-domain-soft); }
.hib-subdomains{ display:grid;grid-template-columns:repeat(3,1fr);
	gap:clamp(var(--hib-space-3),1.8vw,var(--hib-space-5)); /* the category-card grid gap — one rhythm on every card surface */
	margin-block-start:0; }
/* Tablet: two columns. */
@media (max-width:1199px){
	.hib-subdomains{ grid-template-columns:repeat(2,1fr); }
}
/* Mobile: one column — the full six-option list stays visible (this is the primary
   service-selection flow, never a peeking teaser rail). */
@media (max-width:767px){
	.hib-subdomains{ grid-template-columns:1fr; }
}

.hib-howto{ position:relative;overflow:hidden;color:#fff;
  /* The band holds two dense blocks (steps + founder letter); at the 96 step
     it read as navy padding. One step down the section scale. */
  padding-block:var(--hib-space-11);
  background:radial-gradient(1100px 540px at 86% -12%,rgba(43,99,214,.28),transparent 60%),linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%); }
.hib-howto::before{ content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 30%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 70%,transparent); }
.hib-howto .dg{ position:absolute;inset:0;z-index:1;opacity:.4;
  background-image:radial-gradient(rgba(169,198,255,.10) 1px,transparent 1px);background-size:24px 24px; }
.hib-howto>.hib-container{ position:relative;z-index:2; }
.hib-howto .hib-section-header__eyebrow{ color:var(--hib-primary-on-dark); }
.hib-howto .hib-section-header__title{ color:#fff; }
/* The header's own margin IS the gap; the steps add nothing on top of it. The
   band's header takes the same 40 step as the professionals' header below —
   scoped here rather than by editing the site-wide section-header clamp, which
   has consumers on every template. */
.hib-howto__steps{ display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-block-start:0; }
.hib-howto > .hib-container > .hib-section-header{ margin-bottom:var(--hib-space-8); }
.hib-howto__step{ padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,36px);border-inline-start:1px solid rgba(169,198,255,.16); }
.hib-howto__step:first-child{ border-inline-start:none;padding-inline-start:0; }
.hib-howto__n{ font-family:var(--hib-font-mono);font-size:clamp(38px,4vw,58px);font-weight:500;letter-spacing:normal;color:var(--hib-primary-on-dark);line-height:1;display:block; }
.hib-howto__t{ color:#fff;margin:16px 0 10px; }   /* type: block-title role */
.hib-howto__p{ color:var(--hib-on-dark-soft);font-size:1rem;line-height:1.6;margin:0;max-width:34ch;text-wrap:pretty;}
@media (max-width:760px){
  .hib-howto__steps{ grid-template-columns:1fr; }
  .hib-howto__step{ border-inline-start:none;border-block-start:1px solid rgba(169,198,255,.16);padding-inline:0; }
  .hib-howto__step:first-child{ border-block-start:none; }
}

/* ============================================================
   MERGED TRUST BAND (§C.1 section 4 · `[Plan-Visual]` F10)
   How-it-works + founder were two consecutive dark bands with the
   SAME navy gradient. They are now one band: the section keeps the
   .hib-howto background and the founder block renders inside it
   with its own background/borders neutralised, so every founder
   style below still applies unchanged.
   ============================================================ */
.hib-trustband__founder{
  background:none;border-block:0;position:relative;
  margin-block-start:clamp(28px,3.5vw,48px);
  border-block-start:1px solid rgba(169,198,255,.16);
}
/* Standalone band (relocated after the professionals): the steps->founder seam
   — the top margin, hairline and the seam's own padding — was the boundary
   between two blocks sharing one band. Alone in its own band, the block starts
   where every band's content starts; everything inside is untouched. */
.hib-trustband--solo .hib-trustband__founder{
  margin-block-start:0;border-block-start:0;
}

/* The design system's home-scope amir padding (112, the editorial exception)
   is for the section standing ALONE. Inside the trust band the band already
   provides the section padding, so the same 112 became dead navy above and
   below the letter. The seam keeps its own breathing room; the band's own
   padding closes the bottom. Specificity (0,3,0) outranks the home scope. */
.hib-trustband .hib-amir-section.hib-trustband__founder{
  /* 48 — the small section step, the only on-scale value under the band's 64. */
  padding-block:var(--hib-space-9) 0;
}
.hib-trustband--solo .hib-amir-section.hib-trustband__founder{ padding-block-start:0; }
.hib-trustband__founder::before,
.hib-trustband__founder::after{ content:none; }   /* band hairline + watermark belong to the parent band */
/* The design system clips `.hib-amir-section` on both axes to hold the giant
   letterform watermark inside the band. Here that watermark is switched off in
   the rule directly above — the parent band owns it — so the vertical half of
   that clip guards nothing and only stands ready to cut the letter, the proof
   rail or the channel row short as text grows. The horizontal clip stays, since
   nothing may ever widen the page. `clip` (not `hidden`) is deliberate: it does
   not force the other axis to a scroll container, so the block axis stays
   genuinely visible. */
.hib-trustband .hib-amir-section.hib-trustband__founder{
  overflow-x:clip;
  overflow-y:visible;
}
.hib-trustband > .hib-container{ position:relative;z-index:2; }
/* — Grid correction: the founder composition derives from the SAME 3-column
   grid as the methodology row above it. The rail (seal / figures / channels)
   IS the 03 column — one third, the step's own inline inset, its divider on
   the exact axis of the border beside 03 — and the statement spans the other
   two. Specificity (0,4,0) outranks the design system's home-scope grid
   (body:not([data-domain]) …, (0,3,1)); desktop-only, the stacked layout
   keeps no divider assumptions. — */
@media (min-width:960px){
  .hib-trustband .hib-amir-section--v2.hib-trustband__founder .hib-amir-section__inner{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    column-gap:0;
  }
  .hib-trustband .hib-amir-section--v2.hib-trustband__founder .hib-amir-section__statement,
  .hib-trustband .hib-amir-section--v2.hib-trustband__founder .hib-amir-section__cta-row{
    padding-inline-end:clamp(20px,2.4vw,36px);
  }
  .hib-trustband .hib-amir-section--v2.hib-trustband__founder .hib-amir-section__proof{
    border-inline-start:1px solid rgba(169,198,255,.16);
    padding-inline-start:clamp(20px,2.4vw,36px);
  }
}

/* AA fix found by measuring the band's real pixels: the design system's
   `body:not([data-domain]) .hib-amir-section__kicker` (0,2,0) outranks the dark-band
   override (0,1,0), so the kicker rendered in the light-surface azure on navy at
   2.08:1. Restoring the band's pale azure here brings it back over AA. Pre-existing
   — the founder band was already navy — but it lives on the surface this package
   rebuilt and presents for approval, so it is corrected rather than inherited. */
.hib-trustband .hib-amir-section__content .hib-amir-section__kicker{ color:var(--hib-primary-on-dark); }
.hib-trustband .hib-amir-section__content .hib-amir-section__kicker::before{ background:var(--hib-primary-on-dark);opacity:.8; }

/* Connection line across the three steps — the first genuine sequence to consume
   the P3b2 primitive. Offset lands on the mono step numerals. Motion, reduced
   motion and the no-JS static fallback are all governed by .hib-connect itself. */
.hib-trustband .hib-howto__steps.hib-connect{
  --hib-connect-offset:clamp(46px,4.6vw,62px);
  --hib-connect-color:rgba(169,198,255,.34);
}
@media (max-width:760px){
  /* Stacked steps already read as a sequence through their own block rules;
     a horizontal line across a vertical stack would be decoration, not meaning. */
  .hib-trustband .hib-howto__steps.hib-connect::before{ display:none; }
}

/* ============================================================
   HOME — curated-preview CTA + guides teaser (HIB-MOCK-06).
   Scoped + additive. Reuses .hib-guide-list/.hib-guide-entry (no
   restyle), .hib-section-header, .hib-cta-section, .hib-btn.
   Always-loaded (hib-extra.css) — no PurgeCSS regeneration.
   ============================================================ */
/* Guides teaser — latest real guides in the category-page card language. */

/* ============================================================
   HOME — visual rhythm + section-header row (HIB-MOCK-07).
   Mockup family (amir-saban-brand/index.html) gives its browse
   sections a surface "chapter" band with hairline block borders,
   and a header row carrying an inline ghost "view all" action.
   Reusable, purge-safe (always-loaded), NOT JS-toggled.
   ============================================================ */
/* Surface chapter band — mirrors mockup `background:surface;border-block:1px solid hair`. */
.hib-section--band{
  background:var(--hib-surface);
  border-block-start:1px solid var(--hib-rule-soft);
  border-block-end:1px solid var(--hib-rule-soft);
}

/* Header as a baseline row: lead block (eyebrow+title+desc) start, ghost action end. */
.hib-section-header--row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(20px,3vw,40px);flex-wrap:wrap;
}
.hib-section-header--row .hib-section-header__lead{ min-width:0; }
.hib-section-header--row .hib-section-header__desc{ margin-block-start:var(--hib-space-3);text-wrap:pretty;}
.hib-section-header__action{ flex:0 0 auto;margin-block-end:4px;white-space:nowrap; }
.hib-section-header__action svg{ margin-inline-start:-2px;flex:0 0 auto; }
@media (max-width:600px){
  .hib-section-header--row{ align-items:flex-start;gap:14px; }
  .hib-section-header__action{ margin-block-end:0;width:100%; }
}

/* Profile — role line */
.hib-profile-hero__role{ font-family:var(--hib-font-body);font-weight:700;font-size:var(--hib-body-lede-size);color:var(--hib-primary-on-dark);margin-block-start:6px; }

/* ============================================================
   HIB-MOCK-11 — Profile reviews proof + specialty tiles.
   All selectors profile-scoped (reviews/specialty classes only);
   added to always-loaded hib-extra.css → no PurgeCSS regen.
   ============================================================ */

/* Specialty chips (P3b5) — a compact list of what this professional does.
   Previously a two-column grid of ticked tiles, which borrowed the site's
   verification grammar: a check mark next to every capability reads as "each of
   these was verified", and nothing verifies them. Chips state the same facts
   without the claim, and a long list stops occupying half the page. The pill is
   deliberately the neutral surface, not the azure location pill used for work
   areas, so capability and coverage stay visually distinct. */
.hib-profile-specialties__grid{
  display:flex;flex-wrap:wrap;grid-template-columns:none;
  gap:10px;
}
.hib-profile-specialties__chip{
  display:inline-flex;align-items:center;
  font-family:var(--hib-font-ui);
  padding:9px 15px;
  background:var(--hib-surface);
  border:1px solid var(--hib-border);
  border-radius:var(--hib-radius-s);
  font-size:var(--hib-body-s-size);font-weight:600;line-height:1.3;color:var(--hib-text);
}

/* (R5 pass-C: the old review-count chip — shown when approved reviews existed
   but no rating meta — is replaced by the count-led variant of the composed
   trust unit, `.hib-profile-reviews__score-block--count`, below. Its rules were
   removed with the markup they styled.) */

/* Zero-review empty state — calm, intentional, honest (no "0" proof claim). */
.hib-profile-reviews__empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:clamp(28px,5vw,44px) 24px;
  background:var(--hib-surface);
  border:1px solid var(--hib-rule-soft);
  border-radius:var(--hib-radius-m);
  margin-block-end:var(--hib-space-6);
}
.hib-profile-reviews__empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--hib-domain-soft);color:var(--hib-primary);
}
.hib-profile-reviews__empty-icon svg{ width:24px;height:24px; }
/* An empty state should reassure, not announce — same softer 600 voice as the
   vision value card, stated explicitly for the same reason. */
.hib-profile-reviews__empty-title{
  font-family:var(--hib-font-display);font-size:1.3rem;font-weight:600;line-height:1.2;
  color:var(--hib-text-strong);margin:0;
}
.hib-profile-reviews__empty-text{
  max-width:44ch;margin:0;color:var(--hib-text-secondary);
  font-size:var(--hib-body-s-size);line-height:1.6;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME refine pass — match index.html mockup. All selectors below render ONLY on
   the home landing (front-page.php + pro-card-home.php). Search/profile/guides
   templates are untouched.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Home pro card (mockup .pro): small square avatar + name/verify + role,
   truthful proof, specialty tags, foot (work area + go) ── */
.hib-pro-home{
  display:flex;flex-direction:column;gap:13px;padding:22px;text-align:start;
  background:#fff;border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-card);
  transition:border-color .2s var(--hib-ease),box-shadow .2s var(--hib-ease),transform .2s var(--hib-ease);
}
.hib-pro-home:hover{ border-color:rgba(29,84,196,.22);box-shadow:var(--hib-shadow-card);transform:translateY(-2px); }
.hib-pro-home__top{ display:flex;gap:13px;align-items:center; }
.hib-pro-home__av{ width:62px;height:62px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid var(--hib-rule-soft); }
.hib-pro-home__av--empty{ display:flex;align-items:center;justify-content:center;background:var(--hib-domain-soft);color:var(--hib-primary);font-family:var(--hib-font-display);font-weight:900;font-size:1.5rem; }
.hib-pro-home__name{ font-family:var(--hib-font-display);font-weight:900;font-size:1.3rem;letter-spacing:normal;color:var(--hib-text);display:flex;align-items:center;gap:7px;line-height:1.1; }
.hib-pro-home__verify{ display:inline-flex;color:var(--hib-primary);flex:0 0 auto; }
.hib-pro-home__verify svg{ width:18px;height:18px; }
.hib-pro-home__role{ font-size:var(--hib-label-m-size);color:var(--hib-text-secondary);font-weight:600;margin-block-start:3px; }
.hib-pro-home__rate{ display:flex;align-items:center;gap:6px;font-size:var(--hib-label-m-size);color:var(--hib-text-secondary); }
.hib-pro-home__sc{ font-family:var(--hib-font-mono);font-weight:500;color:var(--hib-text);font-size:var(--hib-body-s-size); }
.hib-pro-home__stars{ color:var(--hib-rating-star);display:inline-flex; }
.hib-pro-home__stars svg{ width:14px;height:14px; }
.hib-pro-home__tags{ display:flex;flex-wrap:wrap;gap:7px;margin-block-start:auto; }
.hib-pro-home__tag{ font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:var(--hib-radius-pill);background:var(--hib-domain-soft);color:var(--hib-primary); }
.hib-pro-home__foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;border-block-start:1px solid var(--hib-rule-soft);padding-block-start:14px;margin-block-start:3px; }
.hib-pro-home__loc{ display:inline-flex;align-items:center;gap:6px;font-size:var(--hib-label-s-size);color:var(--hib-text-muted);font-weight:600;min-width:0; }
.hib-pro-home__loc svg{ width:15px;height:15px;flex:0 0 auto;color:var(--hib-text-muted); }
.hib-pro-home__go{ display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-family:var(--hib-font-mono);font-size:.82rem;font-weight:500;color:var(--hib-primary);transition:gap .2s var(--hib-ease); }
.hib-pro-home__go svg{ width:14px;height:14px; }
.hib-pro-home:hover .hib-pro-home__go{ gap:8px; }

/* ── Home guides teaser — THE category card (template-parts/category-card.php),
   the same .hib-lib-card the guides index renders, so the homepage teaser and
   /guides/ share one composition, artwork treatment, typography and interaction
   states by construction. Only the SECTION differs: a 3-up grid (the editor
   picks exactly three topics) that becomes the approved §C.1 snap rail on
   phones. The card itself is styled once, in the guides-index block above. ── */
.hib-home-guides__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--hib-space-3),1.8vw,var(--hib-space-5)); /* the guides-index grid gap — one rhythm on both surfaces */
}
@media (max-width:860px){ .hib-home-guides__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Mobile guides teaser — horizontal snap rail with the next card deliberately
   peeking, so the row reads as "more of these" instead of a truncated stack
   (§C.1 Mobile). The scroll lives inside this element's own overflow container,
   so it never becomes page-level horizontal overflow. */
@media (max-width:767px){
  .hib-home-guides__grid{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline-start:2px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
    padding-block-end:6px;scrollbar-width:thin;
  }
  .hib-home-guides__grid > *{ flex:0 0 78%;scroll-snap-align:start; }
}

/* The §C.1 mobile cap of three preview cards is retired. It hid half the section
   from every phone visitor while still loading all six, and with the preview now
   able to be a random selection, "the network" reading as three arbitrary cards
   on mobile and six on desktop was two different claims. Any future rule here
   states the positive — `.hib-pros-grid--preview > *` — rather than carving an
   exception out of every grid that is not the directory's. */

/* Social channel links reach the 44px floor deferred to this package in P3b1. */
.hib-social-proof__item{ min-block-size:var(--hib-tap-min);align-items:center; }

/* ── Founder band v2 — an editorial founder LETTER, no portrait (Amir's face is
   the hero's single trust moment). Two semantic groups, one per column: the
   CONTENT group (statement + its two CTAs) and the PROOF group (seal + reach +
   the channel links those follower figures describe). The action row used to
   span both columns with the social row beside it, which made three peer
   buttons; the channels now belong to the proof they came from. Scoped via
   --v2 so the shared .hib-amir-section base (vision) is untouched. ── */
/* `body:not([data-domain])` prefix so this outranks the pre-v2 design-system
   grid (`…__inner`, specificity 0,2,1) that otherwise pins the tracks. Statement
   is the wide letter (right in RTL); the proof rail is a narrow column (left).
   DOM order is statement → CTAs → proof, which is both the mobile reading order
   and the tab order; the rail is placed into column 2 spanning both content
   rows, so no positioning hack reorders anything.
   The rail's floor is 348px, not 240px: the three labelled channel buttons below the
   figures need 310px of content width (measured at their final type), and 348px −
   the rail's own padding-inline-start clears it with 10–16px to spare at every
   two-column width. The cost is measured too — the letter column goes 657px → 577px
   at 1024 and 516px at 960, still above its own text measure — and below 960px it
   would drop under ~500px, which is where the section switches to its stacked
   composition instead (see the ≤959 block).
   The row gap is 10px tighter than it was (52px → 42px at the top of its range): the
   CTA row belongs to the statement above it, and the previous gap read as a divide.
   The blockquote's own trailing margin still separates them optically. */
body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__inner{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(348px,26vw,356px);
  align-items:center;gap:clamp(22px,2.6vw,42px) clamp(34px,5vw,76px);
}
body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__statement,
body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__cta-row{ grid-column:1; }
body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__proof{ grid-column:2;grid-row:1; }
/* The rail spans the letter AND the action row, so the column divider runs the
   full height of the composition. Guarded by :has() because the CTA row is
   conditional (both destinations can be unresolved) — without a second row to
   span, the rail must stay in row 1 or the grid grows an empty row + row-gap. */
body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__inner:has(> .hib-amir-section__cta-row) .hib-amir-section__proof{
  grid-row:1 / span 2;
}
/* Optical alignment of the two button groups, two columns only. Measured, the offset
   between the CTA row's centre and the channel row's centre was +17.5px at 1440,
   +13.9 at 1280, +14.5 at 960 and +0.4 at 1024 — it is (contentHeight − railHeight)/2,
   so it tracks how the letter happens to wrap and no constant nudge can serve every
   width (8px+8px would have fixed 1440 and broken 1024 by the same amount the other
   way). Removing the cause instead: the rail's own end edge follows the content
   column's, which puts the channel row on the CTA row's baseline at every width while
   the rail's internal rhythm (seal → figures → channels) is untouched. `1fr auto`
   keeps that true if an editor's letter is ever SHORTER than the rail: the slack
   lands in the letter's row, not between the letter and its buttons.
   The row gap comes down ~7px on top of it, so the CTA group rises toward the
   statement it belongs to and the two groups meet from both sides. */
@media (min-width:960px){
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__inner{
    grid-template-rows:1fr auto;row-gap:clamp(18px,2.1vw,30px);
  }
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__proof{ align-self:end; }
}
.hib-amir-section__statement{ align-self:start;min-inline-size:0; }
.hib-amir-section__statement>p{ font-size:1.04rem;line-height:1.68;color:rgba(234,241,251,.82);margin:0 0 var(--hib-space-4);max-width:60ch;text-wrap:pretty; }
.hib-amir-section__statement>p:last-of-type{ margin-block-end:0; }
.hib-amir-section__statement strong{ color:#fff;font-weight:800; }
/* Two Formats-menu block styles the client applies to a paragraph to build the
   letter's hierarchy — a calm intro and a prominent lead. Both stay paragraphs (never
   headings) and both sit below the central statement (.hib-amir-section__bq): the lead
   is larger, whiter and slightly heavier than the intro, yet well under the quote's
   scale. Qualified with the element so they outrank the base `>p` rule above. */
.hib-amir-section__statement>p.hib-amir-section__intro{ font-size:var(--hib-body-lede-size);line-height:1.7;font-weight:400;color:rgba(234,241,251,.72); }
.hib-amir-section__statement>p.hib-amir-section__lead{ font-size:1.3rem;line-height:1.5;font-weight:500;color:#fff; }
/* The closing quote. `.hib-amir-section__bq` is the committed type; the bare
   `blockquote` selector applies the SAME type to the emphasised quote the founder
   WYSIWYG produces (TinyMCE's quote button + the editor seed both emit a plain
   <blockquote>), so the editor's output renders as the designed statement without a
   parallel class. The small top margin restores the gap after the last paragraph,
   whose own trailing margin `:last-of-type` clears. */
.hib-amir-section__bq,
.hib-amir-section__statement blockquote{ font-family:var(--hib-font-hero);font-weight:900;letter-spacing:normal;font-size:clamp(1.75rem,3.4vw,2.85rem);line-height:1.1;color:#fff;margin:var(--hib-space-4) 0 var(--hib-space-5);padding:0;border:0;max-width:27ch;text-wrap:balance; }
/* The editor wraps the quote's text in a <p>; it inherits the quote type above and
   only needs its default block margins cleared so the quote sits flush. */
.hib-amir-section__statement blockquote p{ margin:0; }
.hib-amir-section__accent{ color:var(--hib-primary-on-dark); }
/* Rich founder letter — the WYSIWYG now offers headings, lists and links, so the
   band styles each on its dark canvas with the design-system tokens. Internal
   headings are deliberately smaller than the band's own section title (--hib-h2-size,
   ≥1.9rem) and the closing quote, so they organise the letter without competing with
   the template-owned heading. The letter's paragraph size (1.04rem, above) is the
   committed editorial body scale and is intentionally kept. */
.hib-amir-section__statement > :is(h2,h3,h4,h5,h6){
  font-family:var(--hib-font-hero);font-weight:900;letter-spacing:normal;
  color:#fff;line-height:1.18;text-wrap:balance;
  margin:var(--hib-space-5) 0 var(--hib-space-3);
}
.hib-amir-section__statement > :is(h2,h3,h4,h5,h6):first-child{ margin-block-start:0; }
.hib-amir-section__statement > h2{ font-size:1.5rem; }
.hib-amir-section__statement > h3{ font-size:1.3rem; }
.hib-amir-section__statement > h4{ font-size:1.15rem; }
.hib-amir-section__statement > h5{ font-size:var(--hib-body-lede-size); }
.hib-amir-section__statement > h6{ font-size:var(--hib-body-s-size);color:var(--hib-primary-on-dark); }
.hib-amir-section__statement > :is(ul,ol){
  margin:0 0 var(--hib-space-4);padding-inline-start:1.4em;
  font-size:1.04rem;line-height:1.68;color:rgba(234,241,251,.82);max-width:60ch;
}
.hib-amir-section__statement li{ margin:0 0 .4em; }
.hib-amir-section__statement li::marker{ color:var(--hib-primary-on-dark); }
.hib-amir-section__statement a{ color:var(--hib-primary-on-dark);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:from-font; }
.hib-amir-section__statement a:hover{ color:#fff; }

/* Proof aside — the verification seal, the reach figures and the channels those
   figures describe, seated in the column the portrait once held. With the view
   count disabled the reach is two figures, so the group is centred vertically
   beside the statement (no empty slot where the third figure was) and the column
   divider is preserved. Spacing is per-child (not one flex `gap`) so the channels
   can sit tighter to the numbers than the seal sits to the divider — the tighter
   distance is what makes them read as part of the proof. */
.hib-amir-section__proof{
  align-self:center;display:flex;flex-direction:column;justify-content:center;gap:0;
  padding-inline-start:clamp(20px,2.2vw,30px);
  border-inline-start:1px solid rgba(169,198,255,.16);
}
/* The reach's own top rule (base .hib-founder-reach border-block-start) is the divider
   above the figures; margin-block-start is the seal↔divider distance (the value the
   proof's flex `gap` used to supply) and padding-block-start the clear space between
   the rule and the first number. On ≤768 the divider is removed (below), so this
   padding is 2-col only. */
.hib-amir-section__proof .hib-founder-reach{ margin:clamp(20px,2.6vw,28px) 0 0;padding-block-start:clamp(20px,2.6vw,28px);flex-direction:column;flex-wrap:nowrap;gap:clamp(18px,2.2vw,24px); }

/* Content actions — the letter's own row, under the statement, in column 1. It is
   the only place the section makes a primary claim on the reader. */
.hib-amir-section__cta-row{ display:flex;align-items:center;gap:var(--hib-space-3);flex-wrap:wrap;align-self:start; }
.hib-amir-section--v2 .hib-amir-section__cta-row .hib-btn svg{ width:18px;height:18px; }

/* Channels in the rail — the shared .hib-social-proof component (icon + network name,
   pill, 1px outline, the same lift, shadow and transition the footer and the paper
   surfaces use). One equal-width row of three, always, so the group reads as the
   continuation of "179K+ עוקבים ברשתות" directly above it and never as a side menu.
   The row is a grid rather than a flex line: equal columns are structural, so 2+1
   wrapping cannot occur at any width. The track floor is 6.15rem — the widest
   button's own content (98px at a 16px root) — so the track count follows the text,
   not the viewport: three tracks while the names fit, one full-width track when they
   do not (200% text zoom, where a fixed 3-track grid clipped them). `min(100%,…)`
   keeps the floor from ever exceeding the block itself. */
.hib-amir-section__proof .hib-social-proof{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.15rem),1fr));
  margin-block-start:var(--hib-space-3);gap:var(--hib-space-2);
}
/* Secondary actions, not metadata tags: the label steps up to 13px/600 (the site's
   .8125rem control size), the capsule becomes the 12px `--hib-radius-s` used by the
   site's rounded controls, and the surface is a translucent cool-white — the band's
   own light-overlay material — instead of the blue-grey that sank into the navy.
   Measured at these values the widest button (Instagram) is 98px, so three equal
   columns + 2×8px gaps need 310px, which the 348px rail floor clears everywhere.
   No shadow at rest: the band carries no resting shadows, and the base component's
   `--hib-shadow-s` still arrives on hover. */
.hib-amir-section__proof .hib-social-proof__item{
  min-block-size:var(--hib-tap-min);padding:0 10px;gap:5px;justify-content:center;
  border-radius:var(--hib-radius-xs);
  font-size:var(--hib-label-s-size);font-weight:600;
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.38);color:#F2F6FD;
  transition:transform .16s var(--hib-ease),box-shadow .16s var(--hib-ease),background .16s,color .16s,border-color .16s;
}
.hib-amir-section__proof .hib-social-proof__icon svg{ width:16px;height:16px; }
/* The captions under the figures sit third in the proof hierarchy (values, then the
   signed verification, then these). At .62 alpha they were the weakest text in the
   band; .74 keeps them third but legible. Scoped to this band so the same primitive
   on the vision page is untouched. */
.hib-amir-section__proof .hib-founder-reach__l{ color:var(--hib-on-dark-muted); }
/* Network colour on hover AND focus-visible. The component's own brand definitions
   are the source — `--facebook #1877F2` and `--instagram #C13584` (the base rules at
   the top of this file) are used directly as the surface wash, so the hue is the
   repo's, not an invention. Only the ink and the border are lightened along the same
   hue, because the raw hex measures 1.2–2.4:1 as text on this navy. TikTok is the one
   exception: its definition is #0B0B0B, which cannot separate from a dark band at any
   alpha, so the state takes TikTok's own dark-surface secondary (#25F4EE) instead.
   Surfaces stay in the default's lightness family, so the change reads as a lift
   rather than a jump. The lift and `--hib-shadow-s` come from the base component;
   only its `background:#fff` is displaced. The focus ring switches to white (the
   `body.home .hib-header__cta` precedent) because the global #1B4AB3 ring is
   invisible on navy; pressed drops the lift and the shadow but keeps the state's
   colours, so a pressed button stays readable. */
.hib-amir-section__proof .hib-social-proof__item:focus-visible{ outline-color:#fff; }
.hib-amir-section__proof .hib-social-proof__item:active{ transform:none;box-shadow:none; }
.hib-amir-section__proof .hib-social-proof__item--facebook:is(:hover,:focus-visible){ background:rgba(24,119,242,.34);border-color:#7FB6FF;color:#fff; }
.hib-amir-section__proof .hib-social-proof__item--facebook:is(:hover,:focus-visible) .hib-social-proof__icon{ color:#A8CDFF; }
.hib-amir-section__proof .hib-social-proof__item--tiktok:is(:hover,:focus-visible){ background:rgba(37,244,238,.22);border-color:#25F4EE;color:#fff; }
.hib-amir-section__proof .hib-social-proof__item--tiktok:is(:hover,:focus-visible) .hib-social-proof__icon{ color:#6DF7F3; }
.hib-amir-section__proof .hib-social-proof__item--instagram:is(:hover,:focus-visible){ background:rgba(193,53,132,.36);border-color:#FF9AC5;color:#fff; }
.hib-amir-section__proof .hib-social-proof__item--instagram:is(:hover,:focus-visible) .hib-social-proof__icon{ color:#FFB6D6; }
/* Stacked below 960px. The two-column composition ends where the letter column would
   fall under ~500px against the 348px rail (measured: 516px at 960, 459px at 900) —
   the section moves to its stacked composition there rather than keeping a cramped
   letter or a narrow tower of channel buttons. Single column, DOM order = reading
   order: the letter, its CTAs, then the proof block (seal → figures → channels). The
   single-column track also cancels the two-column placement above, so nothing needs
   re-ordering. */
@media (max-width:959px){
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__inner{ grid-template-columns:1fr; }
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__statement,
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__cta-row,
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__proof,
  body:not([data-domain]) .hib-amir-section--v2 .hib-amir-section__inner:has(> .hib-amir-section__cta-row) .hib-amir-section__proof{ grid-column:1;grid-row:auto; }
  /* The proof rail becomes a top-ruled block, not a side rail, once stacked. */
  .hib-amir-section__proof{ padding-inline-start:0;border-inline-start:0;padding-block-start:24px;border-block-start:1px solid rgba(169,198,255,.16); }
  .hib-amir-section__proof .hib-founder-reach{ margin-block-start:0;padding-block-start:0;border-block-start:0; }
  /* Same three equal columns, now on a full-width block. Capped so the buttons keep
     their compact scale instead of stretching to a third of an 850px block — the cap
     is inert on phones (350px at 390, 279px at 320) and only bites on tablets. */
  .hib-amir-section__proof .hib-social-proof{ margin-block-start:var(--hib-space-4);max-inline-size:min(100%,28rem); }
}
/* The letter's measure caps are dropped only where the column is genuinely narrow. */
@media (max-width:768px){
  .hib-amir-section__statement>p,.hib-amir-section__bq,.hib-amir-section__statement blockquote,.hib-amir-section__statement>:is(ul,ol){ max-width:none; }
}
/* Narrow screens: the two CTAs stack full-width (primary first, dominant). */
@media (max-width:520px){
  .hib-amir-section__cta-row{ flex-direction:column;align-items:stretch;gap:var(--hib-space-3); }
  .hib-amir-section__cta-row .hib-btn{ inline-size:100%;justify-content:center; }
}
/* The compact row survives down to a 360px viewport (320px of container against the
   310px the three tracks need). At 320px the container holds 279px, under that, so
   the three become one equal-width column instead of clipping a name or dropping to
   2+1. */
@media (max-width:349px){
  .hib-amir-section__proof .hib-social-proof{ grid-template-columns:1fr; }
}

/* ══ SHARED CTA SURFACE ═════════════════════════════════════════════════════
   The navy conversion card's MATERIAL, stated once. Every section-level
   closing CTA carries this class IN ADDITION to its own block, which keeps
   owning composition (spread vs stack, title role, texture pattern, secondary
   action). Consumers: .hib-home-cta (home + vision), .hib-cta-section
   (guides index / category / single guide), .hib-profile-bottom-cta.
   The duplicated per-block copies of this material — two in the design
   system, three in this file — are deleted; this is the only statement. */
.hib-cta-surface{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,48px); /* rhythm STEP 48 at desktop; blocks with an approved tighter recipe (--tight, --brand) restate their own */
  border:1px solid var(--hib-border-on-dark);
  border-radius:var(--hib-radius-xl); /* section-shell radius, every viewport — the 12/10px mobile steps were drift */
  /* The lighting model is the ORIGINAL home closer's, verbatim: one bright
     azure source at the top-right corner falling through primary to a DEEP
     end stop. The end colour is #0C2F72 — deliberately darker than
     --hib-accent (#16357F), which is what the guide bands used to fade to
     and what briefly lightened the whole family when the surface was first
     extracted. The deep stop is most of the card's area; it is what makes
     the material read dark-premium rather than bright SaaS blue, with the
     highlight behaving as illumination, not as the surface colour. A literal
     because it exists only inside this gradient — it is a lighting value,
     not a palette role. */
  background:radial-gradient(120% 140% at 88% -20%,#3D74E6 0%,var(--hib-primary) 45%,#0C2F72 100%);
  box-shadow:var(--hib-shadow-band);
}
/* Vignette — shadow pooled in the corner OPPOSITE the light source, deepening
   the end of the gradient's own fall-off. The previous centre-out ellipse
   dimmed every corner equally, including the lit one — which dulled the
   highlight and flattened the very contrast the card is built on. */
.hib-cta-surface::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 12% 120%,rgb(0 0 0 / .16) 0%,transparent 58%);
}
/* Content above, texture behind — structurally this time. The texture is
   excluded from the content lift, so no later block rule can pull it back
   into flow (the bug that blanked the vision page's dot field). */
.hib-cta-surface>:not(.hib-cta-surface__texture){ position:relative;z-index:1; }
/* The default texture is the reference's dot field. A block that draws its
   own (the home closer's ruled sheet) overrides the image, never the slot. */
.hib-cta-surface__texture{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);
  background-size:18px 18px;opacity:.5;
}
/* The action: one white button on every conversion card. Weight 600 (the D2
   button cap — the 700 copies were drift). `background-color`, never the
   shorthand, so the valve gradient below survives every state without being
   restated — this is what let the closer's doubled-class selector go. The
   valve sweep is the reference's defining interaction, promoted to the
   family: a wash to Domain Wash across the face from the RTL start edge,
   interpolable because the custom property is registered. Azure label holds
   6.8:1 against the wash's darkest point. */
@property --hib-valve{ syntax:"<percentage>"; inherits:false; initial-value:0%; }
.hib-cta-surface .hib-btn{
  --hib-valve:0%;
  background-color:#fff;
  background-image:linear-gradient(to left,var(--hib-domain-soft) 0 var(--hib-valve),#fff var(--hib-valve));
  border-color:#fff;
  color:var(--hib-primary);
  font-weight:600;
  letter-spacing:normal;
  box-shadow:var(--hib-shadow-btn-invert);
  transition:--hib-valve var(--hib-duration-slow) var(--hib-ease-out-soft),
             box-shadow var(--hib-duration-slow) var(--hib-ease-out-soft),
             color var(--hib-duration-base) var(--hib-ease);
}
.hib-cta-surface .hib-btn:hover,
.hib-cta-surface .hib-btn:focus-visible{
  --hib-valve:100%;
  color:var(--hib-primary);
  box-shadow:var(--hib-shadow-btn-invert-hover);
}
.hib-cta-surface .hib-btn:active{ --hib-valve:100%; }
@media (prefers-reduced-motion: reduce){
  .hib-cta-surface .hib-btn{ transition:none; }
}

/* ── Home closing CTA (mockup .cta-join): composition on the shared surface.
   Material (gradient, border, radius, shadow, vignette, texture slot, button)
   comes from .hib-cta-surface above; these rules are the roles and the stack
   the home + vision closers lay on top of it. ── */
.hib-home-cta{ text-align:start; }
/* The decorative hex left this component's last call site (the vision closer
   joined `--brand`); no template emits it. Removed rather than kept as a rule
   that would silently restyle a mark nothing renders. */
/* No call site emits this today (the closing CTA's kicker was removed), so it is
   held at its baseline 400 rather than promoted to the kicker weight — a dead
   rule should not quietly change what it would paint if it ever came back. */
.hib-home-cta__eyebrow{ display:block;font-family:var(--hib-font-ui);font-weight:400;font-size:var(--hib-micro-label-size);letter-spacing:normal;color:var(--hib-on-dark-soft);margin-block-end:14px; }
.hib-home-cta__title{ font-family:var(--hib-font-hero);font-weight:900;letter-spacing:normal;font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;color:#fff;margin:0 0 14px;max-width:20ch; }
.hib-home-cta__lede{ font-size:var(--hib-body-lede-size);line-height:1.62;color:var(--hib-on-dark-soft);max-width:54ch;margin:0; }
.hib-home-cta__acts{ display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;margin-block-start:28px; }
.hib-home-cta__btn svg{ width:18px;height:18px; }
/* One trust-line role for the family. It stays one role — that consolidation was
   right — but at the LABEL rung, not the caption rung. This line carries the
   founder's personal accountability directly under the site's primary
   conversion button; at 13px it read as fine print about the button rather than
   as the reason to press it, and it was the smallest text in the band. */
.hib-home-cta__trust{ font-size:var(--hib-label-m-size);line-height:var(--hib-label-lh);color:var(--hib-on-dark-soft);font-weight:500; }

/* ============================================================
   POST-HIB-WOW-02 — header search CTA, mobile-menu CTA, sort toggle
   ============================================================ */

/* Desktop header CTA — restrained azure outline pill that adapts to the light
   (interior pages) and dark (home hero) header. Hidden on mobile; the action
   lives inside the mobile menu instead. Targets the home search anchor. */
.hib-header__cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--hib-radius-xs);
  font-family:var(--hib-font-ui);font-size:var(--hib-label-m-size);font-weight:700;line-height:1;
  color:var(--hib-primary);
  border:1.5px solid rgba(27,74,179,.32); /* fallback for no color-mix */
  border-color:color-mix(in srgb, var(--hib-primary) 38%, transparent);
  background:transparent;white-space:nowrap;
  transition:background var(--hib-duration-base) var(--hib-ease),
    color var(--hib-duration-base) var(--hib-ease),
    border-color var(--hib-duration-base) var(--hib-ease),
    transform var(--hib-duration-base) var(--hib-ease);
}
.hib-header__cta svg{ width:16px;height:16px;flex:none; }
.hib-header__cta:hover{
  background:var(--hib-primary);color:#fff;border-color:var(--hib-primary);
}
.hib-header__cta:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* Home: header sits on a dark navy bar in both states — switch the CTA to a
   pale outline that hover-fills to solid white-on-navy. */
body.home .hib-header__cta{
  color:#EBF2FF;border-color:rgba(255,255,255,.42);
}
body.home .hib-header__cta:hover{
  background:#fff;color:var(--hib-primary);border-color:#fff;
}
body.home .hib-header__cta:focus-visible{ outline-color:#fff; }

/* CTA is desktop-only; the mobile menu carries it on small viewports. */
@media (max-width:1023px){
  .hib-header__cta{ display:none; }
}

/* Mobile-menu CTA — primary pill pinned to the bottom of the panel, after the
   nav links (flex column → margin-top:auto pushes it down). */
.hib-mobile-menu__cta{
  margin-block-start:auto;display:flex;align-items:center;justify-content:center;gap:var(--hib-space-2);
  padding:12px 18px;min-block-size:var(--hib-tap-min);border-radius:var(--hib-radius-xs);
  font-family:var(--hib-font-ui);font-size:1rem;font-weight:700;line-height:1;
  color:#fff;background:var(--hib-primary);
  transition:background var(--hib-duration-base) var(--hib-ease);
}
.hib-mobile-menu__cta svg{ width:18px;height:18px;flex:none; }
.hib-mobile-menu__cta:hover{ background:var(--hib-primary-hover); }

/* Search sort — segmented toggle (replaces the native <select>). Anchor links
   that preserve every other query param; the active option is filled. Works
   without JS. */
.hib-sort-toggle{
  display:inline-flex;align-items:stretch;
  padding:3px;border-radius:var(--hib-radius-pill);
  background:var(--hib-surface-soft);
  border:1px solid var(--hib-border, rgba(14,44,84,.10));
}
.hib-sort-toggle__label{ font-size:var(--hib-label-s-size);font-weight:600;color:var(--hib-text-muted,var(--hib-text-secondary)); }
.hib-sort-toggle__opt{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 15px;border-radius:var(--hib-radius-pill);
  font-family:var(--hib-font-ui);font-size:var(--hib-label-s-size);font-weight:700;line-height:1;
  color:var(--hib-text-secondary);white-space:nowrap;
  transition:background var(--hib-duration-base) var(--hib-ease),
    color var(--hib-duration-base) var(--hib-ease),
    box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-sort-toggle__opt:hover{ color:var(--hib-text); }
.hib-sort-toggle__opt.is-on{
  background:var(--hib-surface);color:var(--hib-primary);
  box-shadow:0 1px 3px rgba(14,44,84,.12);
}
.hib-sort-toggle__opt:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
@media (max-width:480px){
  .hib-sort-toggle{ width:100%; }
  .hib-sort-toggle__opt{ flex:1; }
}

/* ============================================================
   P3b1 — INTERACTION FOUNDATION (touch-target floor)
   Every standalone control on a SHARED surface (chrome, the global
   search module, the button system, WordPress pagination) gets at
   least --hib-tap-min of hit area. Selectors are enumerated rather
   than generic: bare `a`/`button` rules would silently restyle
   WordPress-authored body content and the page components owned by
   the later design packages. Inline links inside running prose are
   deliberately excluded (WCAG 2.5.5 inline exception).
   Sizing uses min-block-size so the visual weight of each control is
   unchanged wherever it already fits inside its row.
   ============================================================ */

/* — Header / drawer / footer / skip link — */
.hib-skip-link,
.hib-header__logo,
.hib-header__link,
.hib-header__cta,
.hib-header__mobile-toggle,
.hib-mobile-menu__brand,
.hib-mobile-menu__close,
.hib-mobile-menu__link,
.hib-mobile-menu__cta,
.hib-footer__link,
.hib-footer__social-link{ min-block-size:var(--hib-tap-min); }

/* controls that are not already flex/grid need centring so the taller
   hit area does not move the label off its optical baseline */
.hib-skip-link,
.hib-header__logo,
.hib-mobile-menu__brand{ display:flex;align-items:center; }
.hib-header__link,
.hib-footer__link{ display:inline-flex;align-items:center; }

/* square controls need the inline axis too */
.hib-mobile-menu__close,
.hib-footer__social-link{ min-inline-size:var(--hib-tap-min); }

/* — Global search surface (hero module + 404 recovery search) — */
.hib-search-v2__input,
.hib-search-v2__select,
.hib-combo__btn,
.hib-404__search-input{ min-block-size:var(--hib-tap-min); }
/* "use my location" — a 32px icon button; min-* wins over its fixed w/h */
.hib-search-v2__geo{ min-block-size:var(--hib-tap-min);min-inline-size:var(--hib-tap-min); }

/* — Button system —
     The 44px touch floor, and — added by P3d3 — the rule that a button's box
     grows with its label instead of cutting it off.

     Why both live here rather than with `.hib-btn--s/m/l` in the design
     system: `min-block-size` and `min-height` are the same property, this
     stylesheet loads second, and the two rules tie on specificity, so a floor
     stated there is silently replaced by the 44px one stated here. Stating the
     per-size floors alongside the base floor is what makes the larger of the
     two win, deterministically, instead of the later one.

     `block-size:auto` releases the fixed 44/56px height that the size
     modifiers set. Nothing moves at normal text size — the floors reproduce
     exactly those numbers — but at 200% text zoom, where a Hebrew label needs
     two lines, the button becomes two lines tall rather than clipping its own
     text (measured: 21 buttons were cutting their label off). The companion
     half of that fix is `white-space: normal` on `.hib-btn` in the design
     system, which stopped the label forcing the page sideways instead.

     The controls package later folded the 46px `--m` tier into the 44px
     standard: two control heights below `--l` was one too many, and 44 is
     both the touch floor and the canonical control height. */
.hib-btn{ min-block-size:var(--hib-tap-min);block-size:auto; }
.hib-btn--s{ min-block-size:var(--hib-tap-min); }
.hib-btn--m{ min-block-size:var(--hib-tap-min); } /* controls package: 46 tier folded into the 44 standard */
.hib-btn--l{ min-block-size:max(56px,var(--hib-tap-min)); }

/* — WordPress pagination (paginate_links output; safelisted for PurgeCSS) — */
.hib-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-block-size:var(--hib-tap-min);min-inline-size:var(--hib-tap-min);
  padding-inline:var(--hib-space-2);border-radius:var(--hib-radius-xs);
}

/* ============================================================
   P3b2 — TRUST & EVIDENCE COMPONENT SYSTEM
   One seal (three sizes), one evidence row, one connection line.
   Every rule is scoped to a hib- component class: no bare element
   selectors, no !important, no page-specific composition here —
   page assembly stays with the packages that own those pages.
   ============================================================ */

/* — Shared glyph sizing. Callers set --hib-trust-ic-size; the seal and the
     evidence row set their own so the mark never falls below the 24px the
     signature table requires for the seal on mobile. — */
.hib-trust-ic{
  inline-size:var(--hib-trust-ic-size,24px);
  block-size:var(--hib-trust-ic-size,24px);
  display:block;flex:0 0 auto;
}

/* — THE SEAL —
     Personal-vetting mark. Glyph + text ALWAYS render together, so the claim is
     never carried by icon or colour alone. Colours come from three custom
     properties, letting a dark surface retint the seal without redefining it. — */
.hib-seal{
  --hib-seal-glyph-color:var(--hib-primary);
  --hib-seal-label-color:var(--hib-text);
  --hib-seal-meta-color:var(--hib-text-secondary);
  display:inline-flex;align-items:center;gap:var(--hib-space-2);
  max-inline-size:100%;min-inline-size:0;
}
.hib-seal__glyph{ display:inline-flex;color:var(--hib-seal-glyph-color);flex:0 0 auto; }
.hib-seal__text{ display:flex;flex-wrap:wrap;align-items:baseline;min-inline-size:0; }
.hib-seal__label{
  font-family:var(--hib-font-ui);font-weight:700;letter-spacing:normal;
  font-size:var(--hib-seal-label-size,var(--hib-label-min));
  line-height:1.25;color:var(--hib-seal-label-color);
}
.hib-seal__meta{
  font-weight:600;font-size:var(--hib-seal-meta-size,var(--hib-label-min));
  line-height:1.25;color:var(--hib-seal-meta-color);
}
.hib-seal__sep{ color:var(--hib-seal-meta-color);white-space:pre; }
.hib-seal__more{
  display:inline-flex;align-items:center;
  margin-inline-start:var(--hib-space-2);
  font-size:var(--hib-label-min);font-weight:600;
  color:var(--hib-seal-glyph-color);text-decoration:underline;text-underline-offset:3px;
}

/* full — one per page (hero / decision moment): person on its own meta line. */
.hib-seal--full{
  --hib-trust-ic-size:30px;
  --hib-seal-label-size:1rem;
  --hib-seal-meta-size:.8125rem;
  gap:var(--hib-space-3);
  padding:var(--hib-space-2) var(--hib-space-4);
  border-radius:var(--hib-radius-s);
  background:var(--hib-seal-surface,var(--hib-domain-soft));
}
.hib-seal--full .hib-seal__text{ flex-direction:column;align-items:flex-start;gap:2px; }

/* compact — one per card, sitting under the identity it belongs to. */
.hib-seal--compact{ --hib-trust-ic-size:24px;gap:var(--hib-space-2); }

/* inline — inside a trust row or a line of running content. */
.hib-seal--inline{ --hib-trust-ic-size:24px;--hib-seal-label-size:.875rem;--hib-seal-meta-size:.875rem; }

/* — THE EVIDENCE ROW —
     At most four slots, real distance first. Two per line on small screens and
     one line on desktop, so the row never exceeds the two-line budget. Each slot
     carries a visible key AND value, so nothing is hover-only. — */
.hib-evidence{
  display:flex;flex-wrap:wrap;gap:var(--hib-space-3) var(--hib-space-4);
  margin:0;padding:0;list-style:none;
}
.hib-evidence__slot{
  display:flex;align-items:flex-start;gap:var(--hib-space-2);
  flex:1 1 calc(50% - var(--hib-space-4));min-inline-size:0;
}
@media (min-width:768px){
  /* Content-sized on desktop: a short distance must not claim a quarter of the
     row while a real specialty name is squeezed into an ellipsis. */
  .hib-evidence__slot{ flex:0 1 auto; }
}
.hib-evidence__ic{
  --hib-trust-ic-size:18px;
  display:inline-flex;flex:0 0 auto;margin-block-start:2px;
  color:var(--hib-evidence-icon-color,var(--hib-primary));
}
.hib-evidence__body{ display:flex;flex-direction:column;min-inline-size:0; }
/* ONE evidence signature, everywhere. The key used to render 12px in the
   directory and on the profile and 13px on the homepage, and the value's lines
   sat 1.35 apart in one place and 1.45 in another — the same professional's
   evidence read at two weights of importance depending on where you met them.
   The homepage had the better values, so they become the signature rather than
   the exception; density, where a grid needs it, is the container's job. */
.hib-evidence__k{
  font-size:var(--hib-label-s-size);line-height:1.45;font-weight:600;
  color:var(--hib-evidence-key-color,var(--hib-text-muted));
}
.hib-evidence__v{
  font-size:var(--hib-label-m-size);line-height:1.45;font-weight:700;
  color:var(--hib-evidence-value-color,var(--hib-text));
  overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Editorial numerals — distance and rating read as measurements, not prose. */
.hib-evidence__num{ font-family:var(--hib-font-mono);font-weight:500;letter-spacing:normal; }
/* «+N» — the truthful remainder of a specialty list. A quiet textual marker,
   subordinate to the named specialties; not a control, so no chip and no
   border. Isolated so the plus sign holds its place in RTL. */
.hib-evidence__more{
  font-family:var(--hib-font-mono);font-weight:500;font-size:var(--hib-label-s-size);
  color:var(--hib-text-muted);unicode-bidi:isolate;direction:ltr;
}
/* Short atomic values read as one unit — never split, and never clipped: their
   slots are sized by content so "2.3 ק״מ ממך" always shows in full. */
.hib-evidence__slot--distance,
.hib-evidence__slot--footage,
.hib-evidence__slot--reviews{ flex:0 1 auto; }
.hib-evidence__slot--distance .hib-evidence__v,
.hib-evidence__slot--footage .hib-evidence__v,
.hib-evidence__slot--reviews .hib-evidence__v{ white-space:nowrap;overflow:visible; }
/* Real specialty names run long; give them the depth to read in full rather
   than clipping evidence away on a narrow card. */
.hib-evidence__slot--specialty .hib-evidence__v{ -webkit-line-clamp:3; }

/* — THE CONNECTION LINE —
     CSS-only sequence connector. Consumed by the packages that own the genuine
     sequences (how-it-works band, guide→professional row, add-professional step
     progress); it is deliberately not applied to any page here.
     Draw-in rides the existing reveal system (.is-visible); with JavaScript off
     or reduced motion requested the line is simply drawn in full. — */
.hib-connect{ position:relative; }
.hib-connect::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-block-start:var(--hib-connect-offset,50%);
  inset-inline:0;block-size:2px;
  background:linear-gradient(to left,transparent,var(--hib-connect-color,var(--hib-domain-line)) 8%,var(--hib-connect-color,var(--hib-domain-line)) 92%,transparent);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .7s var(--hib-ease-out-soft);
}
.hib-connect.is-visible::before{ transform:scaleX(1); }
.hib-connect--v::before{
  inset-block:0;inset-inline:auto;
  inset-inline-start:var(--hib-connect-offset,50%);
  inline-size:2px;block-size:auto;
  background:linear-gradient(to bottom,transparent,var(--hib-connect-color,var(--hib-domain-line)) 8%,var(--hib-connect-color,var(--hib-domain-line)) 92%,transparent);
  transform:scaleY(0);transform-origin:50% 0;
}
.hib-connect--v.is-visible::before{ transform:scaleY(1); }
/* No JavaScript → no .is-visible will ever arrive, so show the full line. */
html:not(.hib-js) .hib-connect::before,
html:not(.hib-js) .hib-connect--v::before{ transform:none;transition:none; }
@media (prefers-reduced-motion:reduce){
  .hib-connect::before,
  .hib-connect--v::before{ transform:none;transition:none; }
}

/* — CARD CONSUMERS —
     The evidence card grammar: media → identity + seal → evidence row → actions. */
.hib-pro-card-v2__header{ gap:var(--hib-space-2); }
.hib-pro-card-v2__evidence{ padding:var(--hib-space-3) var(--hib-space-5) 0; }
.hib-pros-grid--rows .hib-pro-card-v2__evidence{
  grid-column:2;grid-row:2;padding:0;align-self:start;
}
.hib-pro-home__evidence{ margin-block-start:var(--hib-space-1); }
/* Feet stay aligned across cards whose slot counts differ. */
.hib-pro-home__foot{ margin-block-start:auto; }
.hib-pro-home__id{ min-inline-size:0; }
.hib-pro-home__id .hib-seal{ margin-block-start:var(--hib-space-2); }

/* On a narrow result row the evidence row takes the full card width instead of
   sharing the identity column with the portrait — four slots then read in two
   lines without breaking real specialty names mid-word. */
@media (max-width:560px){
  .hib-pros-grid--rows .hib-pro-card-v2{ grid-template-rows:auto auto auto auto; }
  .hib-pros-grid--rows .hib-pro-card-v2__evidence{ grid-column:1 / -1;grid-row:3; }
  .hib-pros-grid--rows .hib-pro-card-v2__footer{ grid-row:4; }
}

/* — Seal on its call sites —
   Each surface retints the same component through its three colour custom
   properties. No call site redefines the seal's structure, so the grammar stays
   identical everywhere it appears. */

/* Profile hero — navy. The one FULL seal on the page. */
.hib-profile-hero .hib-seal--full{
  --hib-seal-glyph-color:var(--hib-primary-on-dark);
  --hib-seal-label-color:#E7F0FE;
  --hib-seal-meta-color:rgba(207,224,255,.82);
  --hib-seal-surface:rgba(169,198,255,.14);
}

/* Professional contact card — the trust row keeps its rule, the seal replaces
   the ad-hoc mark that used to sit in it. */
.hib-crow--seal{ padding-block:var(--hib-space-3); }

/* Bottom call-to-action — saturated blue. */
.hib-profile-bottom-cta__trust{ display:inline-flex;align-items:center;gap:var(--hib-space-3);flex-wrap:wrap; }
.hib-profile-bottom-cta .hib-seal{
  --hib-seal-glyph-color:#fff;
  --hib-seal-label-color:#fff;
  --hib-seal-meta-color:rgba(255,255,255,.78);
}

/* Results summary — the chip stays, its colour joins the seal grammar so the
   mark does not read as a different, greener kind of proof. */
.hib-results-summary__trust{
  background:var(--hib-domain-soft);
  color:var(--hib-primary);
  padding-block:var(--hib-space-2);
  white-space:normal;
}

/* — Document badge — deliberately NOT the seal: shield glyph, azure chip, and no
     claim about a person or a check. Used by legal documents, the professional
     terms and the guide byline. — */
.hib-badge--doc .hib-trust-ic{ --hib-trust-ic-size:13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   P3b4 — PROFESSIONAL DIRECTORY (canonical destination)
   The directory is its own page, so it gets its own compact hero rather than a
   second copy of the homepage one: two balanced columns that sit in one short
   band, so the result summary is already on screen at 1440×900.
   ═════════════════════════════════════════════════════════════════════════ */

.hib-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* — HERO — */
.hib-dhero{
  position:relative;
  overflow:clip; /* the photographic layer never spills past the band */
  padding-block:clamp(var(--hib-space-6),3.4vw,var(--hib-space-8)); /* H-1: one archive-hero rhythm with .hib-lib-hero */
  /* The band's own navy still paints first: if the photograph ever fails to
     load, the hero is the brand surface it always was, never a white hole. */
  background:linear-gradient(160deg,var(--hib-dark-shell) 0%,#0A2244 55%,#0E2C54 100%);
  color:#fff;
}
/* — PHOTOGRAPHIC LAYER —
   The image is atmosphere, not ground: its focal object (the wrench) lives in
   the physical bottom-left, so the scrim holds near-opaque brand navy over the
   RTL reading side — measured ≥7:1 for white text over the brightest pixel it
   admits — and relaxes leftward to let the material show where no text sits.
   One hue (the shell navy) at falling alpha over a grayscale photograph: the
   progression cannot produce an off-hue band. */
.hib-dhero__media{ position:absolute;inset:0;z-index:0; }
.hib-dhero__media img{
  width:100%;height:100%;object-fit:cover;object-position:28% 62%;
  display:block;
}
.hib-dhero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,
      rgba(8,30,58,.97) 0%,
      rgba(8,30,58,.95) 34%,
      rgba(8,30,58,.86) 52%,
      rgba(8,30,58,.66) 72%,
      rgba(8,30,58,.44) 100%),
    linear-gradient(to top, rgba(8,30,58,.5) 0%, rgba(8,30,58,0) 38%);
}
.hib-dhero .hib-container{ position:relative;z-index:1; }
.hib-dhero__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,26px);
  align-items:center;
}
@media (min-width:1024px){
  /* One continuous RTL task flow anchored to the reading edge — headline,
     explanation, search — with the photograph's material carrying the LEFT.
     The 50/50 split read as a template; a right-anchored column over a
     protected scrim reads as a decision. */
  .hib-dhero__grid{ grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,28px);justify-items:start; }
  .hib-dhero__lead{ max-inline-size:56ch; }
  .hib-dhero .hib-dsearch{ inline-size:min(100%,38rem); }
}
.hib-dhero__title{
  margin:0;font-family:var(--hib-font-hero);font-weight:900;
  font-size:var(--hib-page-title-size);line-height:var(--hib-page-title-lh);letter-spacing:normal;color:#fff;
  text-wrap:balance;
}
.hib-dhero__sub{ margin:12px 0 0;color:var(--hib-on-dark-soft);font-size:var(--hib-body-lede-size);line-height:1.62;max-width:54ch; }

/* — ADDRESS PANEL —
   A real form on a light card. The input keeps a visible border, its own ground
   and a persistent label at every width, so the entered value never reads as
   static display text. — */
.hib-dsearch{
  display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:end;
  /* The white shell is gone: message and search are one task flow on the navy,
     the same integrated grammar the home hero search ships. The wells below
     keep their own white ground, border and persistent label, so the control
     still reads as a control. */
  padding:0;background:none;border-radius:0;box-shadow:none;
}
.hib-dhero .hib-dfield__label{ color:var(--hib-primary-on-dark); }
.hib-dhero .hib-dsearch__geo{ color:var(--hib-on-dark-soft); }
.hib-dhero .hib-dsearch__geo:hover{ color:#fff; }
/* Field error/status now sit on the navy: the sentence takes the soft on-dark
   ink; the icon keeps the error signal color. */
.hib-dhero .hib-dfield__err{ color:var(--hib-on-dark-soft); }
.hib-dhero .hib-dfield__status{ color:var(--hib-on-dark-soft); }
.hib-dfield{ grid-column:1 / -1;min-width:0; }

.hib-dfield__label{   /* form label role — azure is this surface's colour, the rung is the system's */
  display:block;margin-block-end:6px;
  font-size:var(--hib-label-m-size);line-height:var(--hib-label-lh);
  font-weight:500;color:var(--hib-primary);
}
/* The search is the hero's strongest functional object: the field takes the
   56px large-control height (the .hib-btn--l floor) and the floating-layer
   elevation the design system names for the directory search shell. */
.hib-dfield__box{
  display:flex;align-items:center;gap:10px;
  min-height:56px;padding:0 16px;
  background:#fff;border:1.5px solid var(--hib-border);border-radius:var(--hib-radius-s);
  box-shadow:var(--hib-shadow-l);
  transition:border-color .15s var(--hib-ease),box-shadow .15s var(--hib-ease);
}
.hib-dfield__box:focus-within{ border-color:var(--hib-primary);box-shadow:var(--hib-shadow-l),0 0 0 3px rgba(29,84,196,.24); }
.hib-dfield__icon{ display:flex;color:var(--hib-text-muted);flex:0 0 auto; }
.hib-dfield__icon svg{ width:18px;height:18px; }
.hib-dfield__input{
  flex:1;min-width:0;align-self:stretch;min-height:56px;
  border:0;background:none;outline:none;padding:0;
  font-family:var(--hib-font-body);font-size:var(--hib-body-m-size);font-weight:600;color:var(--hib-text);
}
.hib-dfield__input::placeholder{ color:var(--hib-text-muted);font-weight:500; }
.hib-dfield__clear{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--hib-tap-min);height:var(--hib-tap-min);
  border:0;border-radius:999px;background:none;
  color:var(--hib-text-secondary);cursor:pointer;
}
.hib-dfield__clear:hover{ color:var(--hib-text);background:var(--hib-domain-soft); }
.hib-dfield__clear.is-hidden{ display:none; }

/* Field-level error. It lives INSIDE the field's own box, directly under the
   input and before the search action — the control that has to be corrected
   never moves and nothing is laid on top of it. */
.hib-dfield.is-invalid .hib-dfield__box{ border-color:var(--hib-error); }
.hib-dfield.is-invalid .hib-dfield__box:focus-within{ box-shadow:0 0 0 3px rgba(185,75,72,.18); }
/* Error TEXT takes `--hib-error-ink`; the icon beside it keeps `--hib-error`,
   the signal colour, so the error still LOOKS the same while the sentence
   about it stays legible at 13.5px. Same split P3d2 made on `.hib-field__error`
   — rolled out here by P3d3 so one rule governs error ink site-wide (F17). */
.hib-dfield__err{
  display:flex;align-items:flex-start;gap:7px;
  margin:8px 0 0;font-size:var(--hib-label-s-size);line-height:1.45;color:var(--hib-error-ink);
}
.hib-dfield__err svg{ flex:0 0 auto;margin-block-start:2px;color:var(--hib-error); }
.hib-dfield__err strong{ font-weight:800; }
.hib-dfield__status{ margin:6px 0 0;font-size:var(--hib-label-s-size);color:var(--hib-text-secondary); }
.hib-dfield__status:empty{ display:none; }
.hib-dfield__status.is-error{ color:var(--hib-error-ink); }

.hib-dsearch__submit{
  grid-column:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 var(--hib-space-7);
  border:0;border-radius:var(--hib-radius-s);cursor:pointer;
  background:var(--hib-primary);color:#fff;
  font-family:var(--hib-font-body);font-weight:700;font-size:var(--hib-body-m-size);
  box-shadow:var(--hib-shadow-btn);
  transition:background .15s var(--hib-ease),box-shadow .15s var(--hib-ease);
}
.hib-dsearch__submit:hover{ background:var(--hib-primary-hover);box-shadow:var(--hib-shadow-btn-hover); }
.hib-dsearch__submit:focus-visible{ outline:2px solid #fff;outline-offset:2px; }
/* Secondary and visually separate — it must not compete with search. */
.hib-dsearch__geo{
  grid-column:2;justify-self:start;
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--hib-tap-min);padding:0 10px;
  border:0;background:none;cursor:pointer;
  color:var(--hib-text-secondary);font-family:var(--hib-font-body);font-weight:600;font-size:var(--hib-label-s-size);
  text-decoration:underline;text-underline-offset:3px;
}

/* V1 — one wide horizontal search unit.
   The field and its action stacked, so the primary interaction on the page read
   as a small two-row form. From the directory layout breakpoint up the input and
   the search action sit on ONE line: location icon at the right of the field
   (the RTL start), the Hebrew value beside it, the action at the left end.
   «השתמשו במיקום שלי» stays a quieter line beneath so it never competes.

   `display: contents` promotes the field's own parts — label, box, error,
   status — to grid items of the panel. That is what lets the action align with
   the INPUT rather than with the bottom of the field: an error appears on its
   own row underneath and pushes nothing sideways, so the control that has to be
   corrected still never moves. Aligning by a hand-measured label offset would
   have been the alternative, and it would break the moment the label wraps. */
@media (min-width:1024px){
  .hib-dsearch{ grid-template-columns:minmax(0,1fr) auto;align-items:center; }
  .hib-dfield{ display:contents; }
  .hib-dfield__label{ grid-column:1;grid-row:1;margin-block-end:0; }
  .hib-dfield__box{ grid-column:1;grid-row:2; }
  .hib-dsearch__submit{ grid-column:2;grid-row:2; }
  .hib-dfield__err{ grid-column:1 / -1;grid-row:3;margin-block-start:0; }
  .hib-dfield__status{ grid-column:1 / -1;grid-row:4;margin-block-start:0; }
  .hib-dsearch__geo{ grid-column:1 / -1;grid-row:5;justify-self:start; }
}
.hib-dsearch__geo:hover{ color:var(--hib-primary); }
.hib-dsearch__geo.is-busy{ opacity:.55;pointer-events:none; }

/* — LAYOUT — */
.hib-directory{ padding-block:clamp(28px,3.4vw,48px); } /* dense section step (48) */
.hib-directory__layout{
  display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:clamp(22px,2.8vw,40px);align-items:start; /* tight gutter (40) */
}
.hib-directory__main{ min-width:0; }

/* — FILTER RAIL SHELL —
   The rail participates in the page's own scroll — it has NO height bound and
   NO scroll of its own. The bounded sticky shell this replaces put a live
   scrollbar between the filters and the results at every common laptop height
   (rail 793px vs a ~700px slot at 1280×800), which read as an embedded admin
   panel and split the page into two competing scrollers. Long lists stay
   practical the way they always did: the specialty overflow is a real
   disclosure and the region groups collapse, so the rail's resting height is
   one screen of options, reached and left by the one page scroll. */
.hib-dfilters{
  display:flex;flex-direction:column;gap:var(--hib-space-4);
  padding-block-end:var(--hib-space-2);
}
.hib-dbox{ border-block-end:1px solid var(--hib-border);padding-block-end:18px; }
.hib-dbox:last-child{ border-block-end:none;padding-block-end:0; }
/* The two geographic boxes are both in the DOM and exactly one shows; the
   author `display` values below (flex on the no-JS pill row, block in the
   sheet) would beat the UA's `[hidden]` rule, so the guard is stated at each
   of those weights too. */
.hib-dbox[hidden]{ display:none; }

/* — LOCATION CONTEXT — the compact box that replaces the region tree once a
   resolved address owns the geography. One line: glyph, the place, and the one
   action that changes it. Quiet by design — it states context, it is not a
   fourth filter. */
.hib-dloc{
  display:flex;align-items:center;gap:8px;margin:0;min-height:var(--hib-tap-min);
  font-size:var(--hib-label-m-size);color:var(--hib-text);
}
.hib-dloc svg{ flex:0 0 auto;color:var(--hib-primary); }
.hib-dloc__val{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;
}
.hib-dloc__change{
  flex:0 0 auto;margin-inline-start:auto;
  display:inline-flex;align-items:center;min-height:var(--hib-tap-min);
  color:var(--hib-primary);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
.hib-dloc__change:hover{ color:var(--hib-primary-hover); }
.hib-dloc__change:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-dbox__title{
  margin:0 0 12px;font-family:var(--hib-font-hero);font-weight:900;
  font-size:var(--hib-title-compact-size);letter-spacing:normal;color:var(--hib-text-strong);
}
/* No inner scrollbar. The full specialty list would be clipped behind a fixed
   height; instead the leading few stay visible and the rest live in the
   disclosure below (`.hib-dbox__more`), so nothing is cut off and the rail keeps
   its natural height. */
.hib-dbox__list{ padding-inline-end:2px; }
/* The disclosure group flows into the list layout when shown, so wrapping the
   overflow options changes nothing visually; JavaScript hides it by adding
   `--collapsed` to the box, which beats `display:contents`. */
.hib-dbox__more{ display:contents; }
.hib-dbox--collapsed .hib-dbox__more{ display:none; }

/* The "show all specialties" disclosure. A real button, revealed only once JS is
   running (it ships `hidden`), 44px tall, carried by text + a chevron. */
.hib-dbox__toggle{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--hib-tap-min);
  margin-block-start:2px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--hib-primary);font-family:var(--hib-font-ui);
  font-size:var(--hib-label-m-size);font-weight:700;text-align:start;
}
/* An author `display` beats the UA `[hidden]{display:none}`, so the no-JS
   fallback needs this explicit guard or the control would render dead. */
.hib-dbox__toggle[hidden]{ display:none; }
.hib-dbox__toggle:hover{ color:var(--hib-primary-hover); }
.hib-dbox__toggle-chev{ flex:0 0 auto;transition:transform .18s var(--hib-ease); }
.hib-dbox__toggle[aria-expanded="true"] .hib-dbox__toggle-chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .hib-dbox__toggle-chev{ transition:none; }
}

/* Clear filters — the rail's last box (UX plan §9). Quiet by design: it must
   not read as a fourth filter, and it is absent entirely when there is nothing
   to clear. Same author-`display` guard the toggle above needs, so `hidden` wins. */
.hib-dbox--clear{ border-block-end:none;padding-block-end:0; }
.hib-dbox--clear[hidden]{ display:none; }
.hib-dclear{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--hib-tap-min);
  color:var(--hib-text-secondary);font-family:var(--hib-font-ui);
  font-size:var(--hib-label-m-size);font-weight:700;text-decoration:none;
}
.hib-dclear:hover{ color:var(--hib-primary); }
.hib-dclear svg{ flex:0 0 auto; }

/* — ONE ROW GRAMMAR FOR THE RAIL —
   A three-track grid, identical on every row at every level:

     [tick 18px] [label · flexible] [count auto]      and the group's arrow
                                                       occupies the 44px lane
                                                       reserved after them.

   A grid, not padding: hierarchy is expressed by indenting the LABEL track's
   content, so the tick column stays one straight vertical line down parents,
   children, specialties, selected and unselected rows alike. The arrow's
   presence cannot move it either, because the arrow is outside the option
   entirely (`.hib-dgroup`) and the row reserves its lane unconditionally. */
.hib-dopt{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;column-gap:10px;min-height:var(--hib-tap-min);
  padding-block:2px;padding-inline:8px 0;margin-inline-start:-8px;
  border-radius:var(--hib-radius-xs);
  font-size:var(--hib-label-m-size);color:var(--hib-text-secondary);text-decoration:none;
  transition:color .15s var(--hib-ease),background-color .15s var(--hib-ease);
}
.hib-dopt:hover{ color:var(--hib-text-strong);background:var(--hib-domain-soft); }
.hib-dopt:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:-2px; }
/* The tick is a real, visible control: a white well with a border that clears
   3:1 against the soft page surface (--hib-text-muted measures 5.6:1 there).
   The rule-soft hairline it replaces measured 1.1:1 — an invisible checkbox. */
.hib-dopt__box{
  width:18px;height:18px;flex:0 0 auto;
  background:#fff;border:1.5px solid var(--hib-text-muted);border-radius:var(--hib-radius-xs);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s var(--hib-ease);
}
.hib-dopt:hover .hib-dopt__box{ border-color:var(--hib-primary); }
.hib-dopt__box svg{ width:12px;height:12px;opacity:0; }
.hib-dopt.is-on{ color:var(--hib-primary);font-weight:700; }
.hib-dopt.is-on .hib-dopt__box{ background:var(--hib-primary);border-color:var(--hib-primary); }
.hib-dopt.is-on .hib-dopt__box svg{ opacity:1; }
.hib-dopt__box{ grid-column:1; }
.hib-dopt__label{ grid-column:2;min-width:0; }
.hib-dopt__ct{ grid-column:3;font-family:var(--hib-font-mono);font-size:var(--hib-label-min);color:var(--hib-text-muted); }
/* The disclosure lane. EVERY option reserves it — the arrow's 44px tap target
   plus the group row's 4px gap — whether or not this particular row carries an
   arrow, so gaining or losing one never shifts the tick or the count. */
.hib-dopt{ padding-inline-end:calc(var(--hib-tap-min) + 4px); }
/* Hierarchy indents the LABEL, never the row: a child region reads as
   subordinate while its tick stays on the rail's one tick column. */
.hib-dbox__sub .hib-dopt__label{ padding-inline-start:var(--hib-space-4); }

/* — RESULT REGION — the only part an enhanced update replaces. */
.hib-dresults{ transition:opacity .18s var(--hib-ease); }
.hib-dresults.is-loading{ opacity:.55; }
/* The results summary is a COLUMN, one statement per line, reading down in the
   order a person asks the questions: how many · where · how ordered. The former
   single wrapping flex row put the trust mark, the count and the context on one
   line, so a long specialty name re-wrapped the whole header and moved the
   trust mark — geometry decided by content length. */
.hib-dresults__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--hib-space-2);
}
/* One sentence, so it wraps like one: `balance` keeps the two lines it takes on
   a phone from breaking as a long line plus an orphan word. */
.hib-dresults__count{ margin:0;font-size:var(--hib-body-lede-size);color:var(--hib-text-secondary);text-wrap:balance; }
.hib-dresults__count strong{ font-family:var(--hib-font-mono);color:var(--hib-text-strong);font-size:1.15em; }
/* The coverage clause is part of the count SENTENCE, one step quieter than the
   number it qualifies: the count keeps its emphasis, the clause reads as the
   rest of the thought and wraps with it — no forced break, no second block. */
.hib-dresults__cover{ color:var(--hib-text-secondary);font-size:var(--hib-label-m-size); }
/* Trust is stable page metadata, so it owns a row of its own ABOVE the summary
   and keeps its place whatever the filters say. */
.hib-dresults__trust{ margin-block-end:var(--hib-space-3); }
.hib-dresults__trust .hib-seal{ background:var(--hib-domain-soft);color:var(--hib-primary); }

.hib-dresults__order{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:0;font-size:var(--hib-label-min);font-weight:600;color:var(--hib-text-muted);
}
.hib-dresults__order svg{ width:14px;height:14px;flex:0 0 auto; }
.hib-dresults__order.is-proximity{ color:var(--hib-primary); }
.hib-dresults__addrcta{
  display:inline-flex;align-items:center;min-height:var(--hib-tap-min);
  color:var(--hib-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}

/* Active filters. Each chip names exactly what it removes. */
.hib-dchips{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.hib-dchips li{ margin:0; }
.hib-dchip{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--hib-tap-min);
  padding:0 12px;border-radius:999px;background:var(--hib-primary);color:#fff;
  font-size:var(--hib-label-s-size);font-weight:700;text-decoration:none;
}
.hib-dchip:hover{ background:var(--hib-primary-hover); }
.hib-dchip__k{ font-size:var(--hib-label-min);opacity:.75;font-weight:600; }
.hib-dchips__clear{
  display:inline-flex;align-items:center;min-height:var(--hib-tap-min);
  padding:0 12px;border:1px solid var(--hib-border);border-radius:var(--hib-radius-xs);
  color:var(--hib-text-secondary);font-size:var(--hib-label-s-size);font-weight:700;text-decoration:none;
}
.hib-dchips__clear:hover{ color:var(--hib-text);border-color:var(--hib-text-secondary); }

.hib-dresults__grid{ margin-block-start:var(--hib-space-5); }
/* Eight results per page means eight pages of sixty, not four, so the number
   row carries more items than it used to: first, last, a window around the
   current page, and prev/next. At 320 that was 18px wider than the viewport.
   The row wraps instead — the design system centres it, so a wrapped second line
   stays centred and every target keeps its 44px box. */
.hib-dresults__pagination{
  margin-block-start:var(--hib-space-6);flex-wrap:wrap;row-gap:var(--hib-space-2);
  display:flex;align-items:center;justify-content:center;gap:var(--hib-space-1);
  font-family:var(--hib-font-body);font-weight:600;font-size:var(--hib-body-s-size);
}
.hib-dresults__pagination .page-numbers{ color:var(--hib-text-secondary);text-decoration:none; }
.hib-dresults__pagination a.page-numbers:hover{ background:var(--hib-surface-soft);color:var(--hib-text-strong); }
.hib-dresults__pagination a.page-numbers:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-dresults__pagination .page-numbers.current{
  background:var(--hib-primary);color:#fff;font-weight:700;
}
.hib-dresults__pagination .page-numbers.prev,
.hib-dresults__pagination .page-numbers.next{ color:var(--hib-primary);font-weight:700; }
.hib-dresults__pagination .page-numbers.dots{ color:var(--hib-text-muted); }
/* 14px on the error tint — the exact geometry that measured 4.38:1 at
   `P6-G01`. The border keeps the signal colour; only the sentence moves to
   the ink. */
.hib-dresults__error{
  margin:14px 0 0;padding:10px 12px;
  border:1px solid var(--hib-error);border-radius:var(--hib-radius-s);
  background:var(--hib-error-soft);color:var(--hib-error-ink);font-size:var(--hib-label-m-size);
}

/* Honest empty state. */
.hib-dempty{
  margin-block-start:var(--hib-space-5);padding:clamp(24px,3vw,36px);
  border:1px solid var(--hib-border);border-radius:var(--hib-radius-l);background:#fff;
}
.hib-dempty__title{
  margin:0;font-family:var(--hib-font-display,var(--hib-font-hero));
  font-size:clamp(20px,2.1vw,26px);line-height:1.25;color:var(--hib-text);
}
.hib-dempty__lead{ margin:10px 0 0;color:var(--hib-text-secondary); }
.hib-dempty__widen{
  list-style:none;margin:var(--hib-space-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--hib-space-3);
}
.hib-dempty__widen li{ margin:0; }
.hib-dempty__guides{
  margin:var(--hib-space-4) 0 0;padding-block-start:var(--hib-space-4);
  border-block-start:1px solid var(--hib-border);color:var(--hib-text-secondary);
}
.hib-dempty__guides a{ color:var(--hib-primary);font-weight:700; }

/* The sticky bar, its scrim and the sheet header belong to the mobile sheet
   layout only — hidden at every width by default so they can never fall into
   the desktop document flow. */
.hib-dbar,
.hib-dbar__scrim,
/* The sheet's chrome belongs to the sheet. On desktop the head and the action
   footer do not exist, and the body dissolves so the filter boxes stay direct
   children of the rail's flex column — the shell in §9 is untouched by §10. */
.hib-dsheet__head,
.hib-dsheet__foot{ display:none; }
.hib-dsheet__body{ display:contents; }

@media (max-width:1023px){
  .hib-directory__layout{ grid-template-columns:1fr; }
  .hib-dhero__grid{ gap:18px; }
  /* Mobile hero stacks naturally: title, then the address panel, then results.
     No fixed height anywhere. */
  .hib-dsearch{ grid-template-columns:1fr; }
  .hib-dsearch__submit,
  .hib-dsearch__geo{ grid-column:1; }
  .hib-dsearch__geo{ justify-self:center; }

  /* Without JS the rail stays a plain visible list of real links. The desktop
     shell's height bound is released explicitly: an inherited `max-height` plus
     the horizontal scroller below would clip the chips. */
  .hib-dfilters{ position:static;max-height:none;flex-direction:row;gap:8px;overflow-y:visible;overflow-x:auto;padding-block-end:6px;scrollbar-width:none;scrollbar-gutter:auto; }
  .hib-dfilters::-webkit-scrollbar{ display:none; }
  .hib-dbox{ border:none;padding:0;display:flex;gap:8px;align-items:center;flex:0 0 auto; }
  .hib-dbox[hidden]{ display:none; }
  .hib-dbox__title{ display:none; }
  .hib-dbox__list{ display:contents;max-height:none;overflow:visible; }
  /* The no-JS pill row is a label and nothing else, so it drops the rail's
     three-track grid rather than leaving two empty tracks in every pill. */
  .hib-dopt{
    display:flex;flex:0 0 auto;border:1px solid var(--hib-border);border-radius:999px;
    padding-inline:14px;margin-inline-start:0;background:#fff;
  }
  .hib-dopt__box,.hib-dopt__ct{ display:none; }
  .hib-dbox__sub .hib-dopt__label{ padding-inline-start:0; }
  .hib-dopt.is-on{ background:var(--hib-primary);color:#fff;border-color:var(--hib-primary); }

  /* With JS the rail becomes a bottom sheet behind a sticky bar. */
  html.hib-js .hib-dbar{
    position:fixed;inset-inline:0;inset-block-end:0;z-index:90;
    display:flex;align-items:center;gap:var(--hib-space-3);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#fff;border-block-start:1px solid var(--hib-border);
    box-shadow:0 -6px 20px rgba(16,24,40,.08);
  }
  html.hib-js .hib-dbar[hidden]{ display:none; }
  .hib-dbar__btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:var(--hib-tap-min);padding:10px 18px;flex:0 0 auto;
    border:0;border-radius:var(--hib-radius-xs);cursor:pointer;background:var(--hib-primary);color:#fff;
    font-family:var(--hib-font-body);font-weight:700;font-size:var(--hib-body-s-size);
  }
  .hib-dbar__meta{ display:flex;flex-direction:column;min-width:0;line-height:1.3; }
  .hib-dbar__count{ font-weight:700;font-size:var(--hib-label-m-size);color:var(--hib-text); }
  .hib-dbar__ctx{
    font-size:var(--hib-label-min);color:var(--hib-text-muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  html.hib-js .hib-dbar__scrim{ display:block;position:fixed;inset:0;z-index:110;background:rgba(8, 30, 58, .46); }
  html.hib-js .hib-dbar__scrim[hidden]{ display:none; }

  /* Head / body / footer (UX plan §10). The sheet itself no longer scrolls —
     it is a column whose middle row does, so the action footer stays put while
     the filters move under it. */
  html.hib-js .hib-dfilters{
    position:fixed;inset-inline:0;inset-block-end:0;z-index:111;
    display:flex;flex-direction:column;max-height:82vh;overflow:hidden;
    padding:0;
    background:#fff;border-start-start-radius:20px;border-start-end-radius:20px;
    box-shadow:0 -16px 40px rgba(16,24,40,.14);
    transform:translateY(100%);visibility:hidden;
    /* `visibility` flips immediately on open (a hidden element cannot take
       focus) and only after the slide on close. */
    transition:transform .28s var(--hib-ease),visibility 0s linear .28s;
  }
  html.hib-js .hib-dfilters.is-sheet-open{
    transform:translateY(0);visibility:visible;
    transition:transform .28s var(--hib-ease),visibility 0s;
  }
  /* A flex row that never scrolls, so the `position: sticky` it used to need
     while the whole sheet was one scroller is gone. */
  html.hib-js .hib-dsheet__head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:var(--hib-space-3);
    flex:0 0 auto;
    padding:16px 16px 12px;
    background:#fff;border-block-end:1px solid var(--hib-rule-soft);
  }
  /* The ONE scroller in the sheet. `overscroll-behavior: contain` is correct
     HERE and wrong on the desktop rail: this is a modal panel over a locked
     page, so the chain must stop rather than move the page underneath — the
     double-scrolling the rail must instead allow. */
  html.hib-js .hib-dsheet__body{
    display:block;flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    padding:16px 16px 4px;
  }
  /* Fixed action area: outside the scroller, so it is reachable at any scroll
     position, and it clears the home indicator. */
  html.hib-js .hib-dsheet__foot{
    display:block;flex:0 0 auto;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:#fff;border-block-start:1px solid var(--hib-rule-soft);
  }
  html.hib-js .hib-dsheet__foot[hidden]{ display:none; }
  .hib-dsheet__apply{ width:100%;justify-content:center; }
  .hib-dsheet__title{ font-weight:800;font-size:1rem;color:var(--hib-text-strong); }
  .hib-dsheet__ctx{ font-size:var(--hib-label-min);color:var(--hib-text-muted);margin-block-start:2px; }
  .hib-dsheet__close{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:var(--hib-tap-min);height:var(--hib-tap-min);
    border:1px solid var(--hib-border);border-radius:999px;background:#fff;
    color:var(--hib-text-secondary);cursor:pointer;
  }
  html.hib-js .hib-dfilters .hib-dbox{
    display:block;border-block-end:1px solid var(--hib-rule-soft);
    padding-block-end:16px;margin-block-end:16px;
  }
  html.hib-js .hib-dfilters .hib-dbox[hidden]{ display:none; }
  html.hib-js .hib-dfilters .hib-dbox:last-child{ border-block-end:none; }
  /* `display:block` above outspecifies the base `[hidden]` guard, so the
     clear-filters box needs the guard restated at this weight or it would
     render inside the sheet with nothing to clear. */
  html.hib-js .hib-dfilters .hib-dbox--clear[hidden]{ display:none; }
  html.hib-js .hib-dfilters .hib-dbox__title{ display:block; }
  html.hib-js .hib-dfilters .hib-dbox__list{ display:block;max-height:none;overflow:visible; }
  /* The sheet keeps the rail's own grammar — same three tracks, same tick
     column, same child indent: the grammar the visitor learns once. */
  html.hib-js .hib-dfilters .hib-dopt{
    display:grid;width:100%;border:0;border-radius:var(--hib-radius-xs);
    padding-inline:8px calc(var(--hib-tap-min) + 4px);margin-inline-start:-8px;background:none;
  }
  html.hib-js .hib-dfilters .hib-dbox__sub .hib-dopt__label{ padding-inline-start:var(--hib-space-4); }
  html.hib-js .hib-dfilters .hib-dopt__box{ display:flex; }
  html.hib-js .hib-dfilters .hib-dopt__ct{ display:inline; }
  html.hib-js .hib-dfilters .hib-dopt.is-on{ background:none;color:var(--hib-primary);border-color:transparent; }
  html.hib-js .hib-directory .hib-dresults__pagination{ margin-block-end:76px; }
}

@media (prefers-reduced-motion:reduce){
  .hib-dresults{ transition:none; }
  html.hib-js .hib-dfilters,
  html.hib-js .hib-dfilters.is-sheet-open{ transition:none; }
}

/* ============================================================
   GUIDE LIBRARY (/guides/) — category discovery
   Scoped to archive-video.php (`.hib-lib-*`). The page's job is
   choosing a subject, so the grid is the composition: twelve equal
   categories, one icon each, one real count each.
   ============================================================ */
.hib-lib-hero{
  position:relative;
  padding-block:clamp(var(--hib-space-6),3.4vw,var(--hib-space-8));
  background:
    radial-gradient(760px 380px at 88% -30%, rgba(43,99,214,.22), transparent 62%),
    var(--hib-domain-hero);
  color:var(--hib-dark-text);
}
.hib-lib-hero::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}
.hib-lib-hero__inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(var(--hib-space-5),4vw,var(--hib-space-9));
}
.hib-lib-hero__lead{ min-width:0; }
.hib-lib-hero__title{
  font-family:var(--hib-font-display);font-weight:900;
  font-size:var(--hib-page-title-size);line-height:var(--hib-page-title-lh);letter-spacing:normal;
  color:#fff;margin:0;text-wrap:balance;
}
.hib-lib-hero__desc{
  margin:var(--hib-space-3) 0 0;
  font-size:var(--hib-body-lede-size);line-height:1.62;
  color:var(--hib-on-dark-soft);max-width:54ch;text-wrap:pretty;
}
.hib-lib-hero__figures{
  flex:0 0 auto;margin:0;display:flex;gap:clamp(var(--hib-space-5),3vw,var(--hib-space-7));
  padding-inline-start:clamp(var(--hib-space-5),3vw,var(--hib-space-7));
  border-inline-start:1px solid rgba(169,198,255,.18);
}
.hib-lib-hero__figures > div{ display:flex;flex-direction:column-reverse;align-items:center;gap:2px; }
.hib-lib-hero__figures dd{
  margin:0;font-family:var(--hib-font-display);font-weight:900;
  font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;letter-spacing:normal;color:var(--hib-primary-on-dark);
}
.hib-lib-hero__figures dt{
  font-size:var(--hib-label-min);font-weight:700;letter-spacing:normal;
  color:var(--hib-on-dark-muted);white-space:nowrap;
}

.hib-lib-body{ padding-block:clamp(var(--hib-space-7),4.5vw,var(--hib-space-10));background:var(--hib-bg); }
.hib-lib-body__heading{   /* type: block-title role */
  color:var(--hib-text-strong);
  margin:0 0 clamp(var(--hib-space-4),2.2vw,var(--hib-space-6));
}
.hib-lib-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--hib-space-3),1.8vw,var(--hib-space-5));
}
@media (max-width:1099px){ .hib-lib-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .hib-lib-grid{ grid-template-columns:1fr; } }

/* Illustration-led category card — THE card, one visual system for every grid
   surface: the guides index, the homepage guides teaser AND the homepage service
   chooser (.hib-subdomain, front-page.php) all ride these declarations, so the
   three cannot drift apart in dimensions, artwork treatment, typography, borders
   or interaction states. A leading artwork stage + a content column, so a
   category reads by its illustration, not a small utility icon. One semantic
   link; the count + arrow are the footer row, not a nested control. The service
   card's own conversion details live in the variant block after this one. */
.hib-lib-card,
.hib-subdomain{
  display:flex;align-items:stretch;height:100%;
  min-block-size:clamp(172px,13.5vw,200px); /* §E6 "hub min-height אחיד" — a uniform floor so desc-less topics don't read as stubs */
  background:#fff;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-m);
  box-shadow:var(--hib-shadow-card);
  /* lift via `translate` (not `transform`) so it composes with the stagger reveal's forwards-filled transform */
  transition:translate .22s var(--hib-ease),border-color .22s var(--hib-ease),box-shadow .22s var(--hib-ease);
}
.hib-lib-card:hover,
.hib-subdomain:hover{
  translate:0 -4px;
  border-color:color-mix(in srgb,var(--hib-primary) 50%,var(--hib-rule-soft));
  box-shadow:var(--hib-shadow-card-hover);
}
.hib-lib-card:focus-visible,
.hib-subdomain:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:3px; }

/* Illustration stage — the leading panel (right in RTL): an ambient pale-blue wash
   with a hairline on the content-facing edge. A fixed-basis, square-ish well that
   reserves its box before the artwork loads, so nothing shifts on load. */
.hib-lib-card__icon,
.hib-subdomain__tile{
  flex:0 0 clamp(126px,37%,180px);position:relative;
  display:grid;place-items:center;padding:clamp(10px,1.1vw,16px);overflow:hidden;
  border-inline-end:1px solid var(--hib-rule-soft); /* content-facing edge (the stage is the FIRST flex child — right in RTL) */
  background:radial-gradient(122% 100% at 50% 32%,#F3F8FE 0%,#E8F0FB 56%,#DCE8F7 100%);
}
/* Custom artwork (WebP/SVG): contained within the well — never cropped or stretched;
   a soft drop-shadow gives the flat illustration presence. No resting transform:
   a fractional post-raster scale resamples the source and softens the line art. */
.hib-lib-card__im,
.hib-subdomain__im{
  inline-size:100%;block-size:100%;object-fit:contain;
  filter:drop-shadow(0 5px 11px rgba(11,37,70,.12));
  transition:scale .3s var(--hib-ease);
}
/* hover feedback only where hover exists; never at rest, so sharpness holds. */
@media (hover:hover){
  .hib-lib-card:hover .hib-lib-card__im,
  .hib-subdomain:hover .hib-subdomain__im{ scale:1.04; }
}
/* Legacy fallback: the navy line-glyph, centred at a card-appropriate size. */
.hib-lib-card__icon svg,
.hib-subdomain__tile svg{ inline-size:52%;block-size:52%;color:var(--hib-text-strong);stroke-width:1.6; }

/* Content column — to the right of the stage in RTL. The title leads; the count +
   arrow form a bottom row set off by a hairline, pinned so every card aligns. */
.hib-lib-card__body,
.hib-subdomain__body{
  flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;
  padding:clamp(18px,1.9vw,24px); /* roomy card pad, one axis pair */
}
.hib-lib-card__title,
.hib-subdomain__name{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:var(--hib-card-title-size);line-height:var(--hib-card-title-lh);
  color:var(--hib-text-strong);margin:0;text-wrap:balance;
}
.hib-lib-card__desc{
  margin:7px 0 0;font-size:var(--hib-body-s-size);line-height:1.6;
  color:var(--hib-text-secondary);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; /* keep the body compact so the footer baseline stays uniform */
}
.hib-lib-card__foot,
.hib-subdomain__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--hib-space-3);
  margin-block-start:auto;padding-block-start:var(--hib-space-4); /* pinned to the card foot so the count row aligns across the whole grid */
  border-block-start:1px solid var(--hib-rule-soft);
}
.hib-lib-card__count{
  font-family:var(--hib-font-ui);font-variant-numeric:tabular-nums lining-nums;font-size:var(--hib-label-min);color:var(--hib-text-muted);
}
.hib-lib-card__cue{
  width:17px;height:17px;flex:0 0 auto;color:var(--hib-primary);
  transition:transform .22s var(--hib-ease);
}
.hib-lib-card:hover .hib-lib-card__cue,
.hib-lib-card:focus-visible .hib-lib-card__cue{ transform:translateX(-3px); }

/* ── Service-card variant (.hib-subdomain) — the same category-card composition;
   only the conversion-facing details differ, by design:
   · the title optically centres in the space above the footer (service cards carry
     no description, so a top-hung title would leave a void on every card);
   · the professional count keeps its emphasised numeral — network size is trust
     data on the selection path, not a muted meta label like a video count;
   · the forward cue matches the category card's quiet chevron (same size, same
     nudge), wrapped in the decorative __go span the markup already carries. ── */
.hib-subdomain__name{ flex:1 1 auto;display:flex;align-items:center; }
.hib-subdomain__ct{ font-family:var(--hib-font-body);font-size:var(--hib-label-m-size);color:var(--hib-text-muted);
  display:inline-flex;align-items:baseline;gap:.35em;white-space:nowrap;min-inline-size:0; }
.hib-subdomain__num{ font-family:var(--hib-font-mono);font-weight:500;font-size:var(--hib-body-lede-size);color:var(--hib-text-strong); }
.hib-subdomain__go{ display:inline-flex;flex:0 0 auto;color:var(--hib-primary);
  transition:transform .22s var(--hib-ease); }
.hib-subdomain__go svg{ width:17px;height:17px;display:block; }
.hib-subdomain:hover .hib-subdomain__go,
.hib-subdomain:focus-visible .hib-subdomain__go{ transform:translateX(-3px); }
.hib-lib-body__empty{ color:var(--hib-text-secondary); }
/* (.hib-lib-cta retired — the guides-index closer sits in a standard
   .hib-section and takes the shared interior-closer epilogue frame.) */

@media (max-width:860px){
  .hib-lib-hero__inner{ flex-direction:column;align-items:stretch;gap:var(--hib-space-5); }
  .hib-lib-hero__figures{
    padding-inline-start:0;border-inline-start:0;
    padding-block-start:var(--hib-space-4);border-block-start:1px solid rgba(169,198,255,.18);
    justify-content:flex-start;gap:var(--hib-space-7);
  }
  .hib-lib-hero__figures > div{ flex-direction:row;align-items:baseline;gap:6px; }
  .hib-lib-hero__figures dd{ font-size:1.4rem; }
}
/* Mobile: keep the horizontal illustration-led composition; ease the artwork
   stage to a comfortable width rather than shrinking it into a utility icon. */
@media (max-width:640px){
  .hib-lib-card__icon,
  .hib-subdomain__tile{ flex-basis:clamp(108px,32vw,140px);padding:clamp(9px,3vw,14px); }
  .hib-lib-card__body,
  .hib-subdomain__body{ padding:clamp(16px,4.4vw,20px) clamp(15px,4.6vw,20px); }
}
@media (prefers-reduced-motion:reduce){
  .hib-lib-card,.hib-lib-card__cue,.hib-lib-card__im,
  .hib-subdomain,.hib-subdomain__go,.hib-subdomain__im{ transition:none; }
  .hib-lib-card:hover,.hib-subdomain:hover{ translate:none; }
  .hib-lib-card:hover .hib-lib-card__im,.hib-subdomain:hover .hib-subdomain__im{ scale:1; }
  .hib-lib-card:hover .hib-lib-card__cue,.hib-subdomain:hover .hib-subdomain__go{ transform:none; }
}


/* ============================================================
   GUIDE CATEGORY ARCHIVE — one editorial journey
   Scoped to taxonomy-video_cat.php (`.hib-cat-*`). Composition,
   typography and spacing carry the page; no new colour language,
   no extra surfaces, no page-specific global overrides. Lives in
   the always-loaded sheet, so there is no purged mirror to keep
   in step.
   ============================================================ */

/* — Hero: compact navy band, controlled asymmetry —
   The category page sits between the navy guides index and the navy
   guide page, so it keeps the navy authority surface for journey
   continuity — but earns its height instead of padding it out: the
   identity holds the reading edge, the real count answers it on the
   far edge, and one soft radial replaces the previous stacked
   gradients. */
.hib-cat-hero{
  position:relative;
  overflow:hidden;              /* the oversized decorative layer is cropped by the band, never by the page */
  padding-block:clamp(var(--hib-space-6),3.4vw,var(--hib-space-8));
  background:
    radial-gradient(760px 380px at 88% -30%, rgba(43,99,214,.22), transparent 62%),
    var(--hib-domain-hero);
  color:var(--hib-dark-text);
}
/* the brand's hero hairline, kept as the one ornament */
.hib-cat-hero::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hib-primary) 28%,var(--hib-primary-on-dark) 50%,var(--hib-primary) 72%,transparent);
}

/* breadcrumb — semantic ol, quiet until hovered */
.hib-cat-hero__crumbs ol,
.hib-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0 0 clamp(var(--hib-space-5),2.6vw,var(--hib-space-7));padding:0;
  font-size:var(--hib-label-s-size);color:var(--hib-on-dark-muted);
}
.hib-cat-hero__crumbs li,
.hib-crumbs li{ display:inline-flex;align-items:center;gap:8px;min-width:0; }
/* RTL-correct separator: points along the reading direction */
.hib-cat-hero__crumbs li + li::before,
.hib-crumbs li + li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;
  border-inline-start:1.5px solid currentColor;border-block-start:1.5px solid currentColor;
  transform:rotate(-45deg);opacity:.5;
}
.hib-cat-hero__crumbs a,
.hib-crumbs a{
  color:inherit;text-decoration:none;border-block-end:1px solid transparent;
  padding-block:7px;margin-block:-7px;   /* hit area grows, layout does not */
}
.hib-cat-hero__crumbs a:hover,
.hib-cat-hero__crumbs a:focus-visible,
.hib-crumbs a:hover,
.hib-crumbs a:focus-visible{ color:#fff;border-block-end-color:rgba(255,255,255,.5); }
.hib-cat-hero__crumbs [aria-current="page"],
.hib-crumbs [aria-current="page"]{ color:var(--hib-dark-text);font-weight:600; }

.hib-cat-hero__inner{ position:relative;z-index:1;min-width:0; }

.hib-cat-hero__title{
  font-family:var(--hib-font-display);font-weight:900;
  font-size:var(--hib-page-title-size);line-height:var(--hib-page-title-lh);letter-spacing:normal;
  color:#fff;margin:0;text-wrap:balance;
}
.hib-cat-hero__desc{
  margin:var(--hib-space-3) 0 0;
  font-size:var(--hib-body-lede-size);line-height:1.62;
  color:var(--hib-on-dark-soft);
  max-width:52ch;                     /* deliberately narrow measure */
  text-wrap:pretty;
}

/* One real figure, on the same reading edge as the type it belongs to: the size
   of the collection below, said in the reader's terms (מדריכים — these links open
   guide pages). Quiet by design; the H1 stays the loudest element in the band. */
.hib-cat-hero__meta{
  display:flex;align-items:baseline;gap:7px;
  margin:clamp(var(--hib-space-4),1.8vw,var(--hib-space-5)) 0 0;
}
.hib-cat-hero__count-num{
  font-family:var(--hib-font-display);font-weight:900;
  font-size:var(--hib-body-lede-size);line-height:1;letter-spacing:normal;
  color:var(--hib-primary-on-dark);
}
.hib-cat-hero__count-word{
  font-size:var(--hib-label-m-size);font-weight:700;letter-spacing:normal;
  color:var(--hib-on-dark-muted);
}

/* The hero's ONE decorative layer (artwork or the category's own line glyph):
   oversized, faint, anchored to the far corner — the zone the composition left
   empty — and faded out before it reaches the text column. Out of flow and
   pointer-transparent, so it can never shift layout or intercept a click, and
   it is sized independently of the text so 200% scaling only grows clearance. */
.hib-cat-hero__art{
  position:absolute;z-index:0;pointer-events:none;
  inset-inline-end:clamp(-40px,-3vw,-16px);inset-block-end:-14%;
  width:clamp(260px,30vw,460px);height:auto;
  opacity:.16;
  -webkit-mask-image:linear-gradient(to var(--hib-art-fade,left),#000 55%,transparent 100%);
  mask-image:linear-gradient(to var(--hib-art-fade,left),#000 55%,transparent 100%);
}
/* RTL reads right-to-left, so the text column is on the RIGHT and the artwork
   must fade towards it; the LTR default above fades the other way. */
[dir="rtl"] .hib-cat-hero__art{ --hib-art-fade:right; }
/* Glyph branch: the same slot, the same contract. The stroke is in SVG user
   units, so it scales with the box (≈12.5px drawn at 300px) — that proportional
   weight is what makes a 24px UI icon read as an intentional large mark. */
.hib-cat-hero__art--glyph{
  display:block;
  inset-block-end:-8%;
  width:clamp(180px,22vw,300px);
  opacity:.13;color:var(--hib-primary-on-dark);
}
.hib-cat-hero__art--glyph svg{ width:100%;height:auto;stroke-width:1; }

/* — Body: one calm surface, the grid is the focus — */
.hib-cat-body{
  padding-block:clamp(var(--hib-space-7),4.5vw,var(--hib-space-10));
  background:var(--hib-bg);
}
.hib-cat-collection__heading,
.hib-cat-siblings__heading{   /* type: block-title role */
  color:var(--hib-text-strong);
  margin:0 0 clamp(var(--hib-space-4),2.2vw,var(--hib-space-6));
}

/* Collection: ONE scan column, centred in the container. 820px is the widest
   rail that keeps the row's text inside a comfortable Hebrew measure (≈72ch)
   while still holding presence on a wide screen; centring balances the gutters
   instead of leaving one wide empty margin that nothing on the page supports. */
.hib-cat-collection{
  display:flex;flex-direction:column;
  gap:10px;
  max-inline-size:820px;margin-inline:auto;
}
/* The collection heading shares the rail so the list reads as one block. */
.hib-cat-collection__heading{ max-inline-size:820px;margin-inline:auto; }

/* The shared stagger script hands EVERY child `i × 100ms` of inline delay, so in
   a 25-guide topic the last row sits at opacity:0 until 2.4s after the list
   enters the viewport — a fast scroll meets blank page. Rows past the first
   viewport-full join as one wave instead; !important is required to beat the
   script's inline style, and the reduced-motion path (animation:none) is
   unaffected because only the delay is capped. */
.hib-cat-collection.is-visible > .hib-cat-card:nth-child(n+9){ animation-delay:.8s !important; }

/* List row — three tracks in normal flow: content · duration · forward cue.
   Nothing is positioned out of flow, and the content track carries min-width:0,
   so a long title, an unclamped teaser or 200% text growth extends the row
   instead of colliding with the metadata. The whole row is one semantic link.

   Resting state is deliberately almost flat: a topic holds up to 25 of these, and
   a stack of shadowed capsules reads as a dashboard rather than an editorial
   list. Separation comes from rhythm (the row gap and the shared rail edge);
   elevation belongs to hover alone. */
.hib-cat-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  column-gap:clamp(var(--hib-space-4),2vw,var(--hib-space-5));
  min-block-size:0;
  padding:var(--hib-space-5) var(--hib-space-6);
  border:1px solid var(--hib-rule-soft);
  border-radius:var(--hib-radius-m);
  box-shadow:none;
  overflow:hidden;
}
.hib-cat-card .hib-guide-entry__content{
  display:flex;flex-direction:column;gap:6px;
  padding:0;
  min-width:0;   /* the content track absorbs the row; without this a long word would blow the grid out */
}
/* The title is the scan track — strongest textual element in the row. */
.hib-cat-card .hib-guide-entry__title{ font-size:var(--hib-card-title-size);line-height:var(--hib-card-title-lh);text-wrap:balance; }
/* The teaser wraps in full: it is one authored line per guide, and clipping it
   would hide authored content at exactly the widths where it matters most. */
.hib-cat-card .hib-guide-entry__summary{
  font-size:var(--hib-body-s-size);line-height:1.6;color:var(--hib-text-secondary);text-wrap:pretty;
  display:block;overflow:visible;-webkit-line-clamp:none;line-clamp:none;
}
/* Duration — its own track at the row's logical end, in flow beside the cue. */
.hib-cat-card .hib-guide-entry__meta{ margin:0;white-space:nowrap; }
/* forward cue — the row's logical end; decorative (the row itself is the link). */
.hib-cat-card__cue{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--hib-domain-soft);color:var(--hib-primary);
  transition:transform .22s var(--hib-ease);
}
.hib-cat-card__cue svg{ width:14px;height:14px; }
.hib-cat-card:hover .hib-cat-card__cue,
.hib-cat-card:focus-visible .hib-cat-card__cue{ transform:translateX(-3px); }

/* Interaction: the resting row stays flat, hover earns one restrained step
   (quiet border, one light shadow, a 2px lift), focus-visible is stronger than
   hover and never relies on shadow (the global outline), and pressed settles
   back to zero lift. Transform/colour/shadow only — no state shifts layout. */
.hib-cat-card{ transition:border-color .2s var(--hib-ease),box-shadow .2s var(--hib-ease),transform .2s var(--hib-ease); }
/* The shared .hib-guide-entry hover (the /guide/ rail's card lift) would add a
   tinted background, a deep shadow and a padding-inline collapse on top of this
   one; each is neutralised here so the row's own restrained step is the whole
   effect and the resting geometry never moves. */
.hib-cat-card:hover{
  background:#fff;
  border-color:rgba(27,74,179,.34);
  box-shadow:0 6px 16px -12px rgba(16,24,40,.28);
  transform:translateY(-2px);
  padding:var(--hib-space-5) var(--hib-space-6);
}
.hib-cat-card:active{ transform:translateY(0);border-color:rgba(27,74,179,.34); }

/* Narrow rows: one text column with the duration under the teaser, and the cue
   holding the row's end across both lines — still every part in flow. */
@media (max-width:640px){
  .hib-cat-card{
    grid-template-columns:1fr auto;
    /* The rows are declared explicitly so the cue's `1 / -1` span resolves against
       them; against an implicit grid `-1` is the first line and the cue would
       centre itself on the title alone. */
    grid-template-rows:auto auto;
    column-gap:var(--hib-space-4);row-gap:8px;
    padding:var(--hib-space-4);
  }
  .hib-cat-card .hib-guide-entry__content{ grid-column:1;grid-row:1;gap:5px; }
  .hib-cat-card .hib-guide-entry__meta{ grid-column:1;grid-row:2; }
  .hib-cat-card__cue{ grid-column:2;grid-row:1 / -1;align-self:center; }
  .hib-cat-card:hover{ padding:var(--hib-space-4); }
}

/* — Sibling topics: compact navigation, never competing with the grid — */
/* §E6 "פס נושאים → --hib-bg": the topics band sits on the neutral page ground,
   not the paper/cream surface (paper is reserved for human evidence, ≤15% —
   §C). The stray cream band was the "פס קרם חריג" the audit flagged. */
/* The topics band groups itself on the soft surface, so the eye reads "the page
   has moved on" without another rule or another white card stack. */
.hib-cat-more{
  padding-block:clamp(var(--hib-space-7),4.2vw,var(--hib-space-10));
  background:var(--hib-surface-soft);
  border-block-start:1px solid var(--hib-rule-soft);
}

/* Topic index — an asymmetric editorial spread on the band's own ground, not a
   bordered component. RTL start (right) holds the anchor: the section's one
   real figure set large in the editorial mono over the heading and its support
   line. The rest of the width belongs to the index — CSS multicolumn, so eleven
   entries fall as two newspaper columns (6/5, filled top-to-bottom like a
   contents page) with a single fine column-rule between them. Nothing is boxed;
   presence comes from the figure, the alignment and the negative space. */
.hib-topic-index{
  display:grid;
  grid-template-columns:minmax(210px,250px) 1fr;
  gap:22px clamp(var(--hib-space-7),3.9vw,var(--hib-space-10)); /* default gutter (56) */
  align-items:start;
}

/* Anchor lockup. DOM order (heading → figure → support) is the sensible spoken
   order; the grid puts the figure visually first. Nothing here is interactive,
   so the visual re-order costs nothing. */
.hib-topic-index__anchor{ display:grid;padding-block-start:4px; }
.hib-topic-index__anchor .hib-cat-siblings__heading{ order:2;margin:0;font-size:clamp(1.2rem,1.6vw,1.35rem); }
/* The figure is the site's editorial-numeral role (mono is reserved for real
   digits) at display scale — a contents-page folio, not a dashboard KPI. */
.hib-topic-index__figure{
  order:1;margin:0 0 4px;
  font-family:var(--hib-font-mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,5vw,4.25rem);line-height:1;
  color:var(--hib-primary);
}
.hib-topic-index__figure-sub{
  order:3;margin:6px 0 0;
  font-size:var(--hib-body-s-size);line-height:1.6;color:var(--hib-text-secondary);
}

/* The index: real CSS columns, so entries fill the first (right) column before
   the second and an odd count ends as a shorter second column — the deliberate
   fall of a contents page, not a grid with a hole. The 19rem ideal width also
   collapses the layout to one column on narrow screens and at 200% text zoom
   without a breakpoint. */
.hib-topic-index__list{
  list-style:none;margin:0;padding:0;
  columns:19rem 2;
  column-gap:clamp(40px,4.5vw,72px);
  column-rule:1px solid var(--hib-border);
}
.hib-topic-index__list > li{ break-inside:avoid; }
.hib-topic-index__item{
  display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  gap:14px;
  min-block-size:56px;                 /* comfortably past the 44px floor */
  padding:15px 2px;
  text-decoration:none;color:inherit;
  /* --hib-border, not --hib-rule-soft: on the band's soft ground the soft rule
     all but vanishes (≈1.09:1) and the index loses its ruled structure. */
  border-block-end:1px solid var(--hib-border);
  transition:color .18s var(--hib-ease);
}
.hib-topic-index__name{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  font-size:var(--hib-title-compact-size);line-height:1.3;color:var(--hib-text-strong);
  min-width:0;                          /* a long topic name wraps instead of pushing the count out */
  transition:color .18s var(--hib-ease);
}
/* The row says its fact in full — "25 מדריכים". Digits render in the editorial
   mono; the Hebrew word falls back to Ploni by the mono stack's own design. */
/* Weight stays 600 — its baseline. Only the FAMILY was wrong here: this count
   reads "25 מדריכים", so the mono it declared could never render the Hebrew
   half of its own string. Ploni has a real 600, so lowering it would have been
   a visible change dressed up as a font fix. */
.hib-topic-index__count{
  font-family:var(--hib-font-ui);font-size:var(--hib-label-s-size);font-weight:600;
  color:var(--hib-text-muted);font-variant-numeric:tabular-nums;
  transition:color .18s var(--hib-ease);
}
.hib-topic-index__cue{
  width:15px;height:15px;align-self:center;
  color:var(--hib-primary);opacity:.72;   /* resting cue must read without hover; hover still lands at 1 */
  transition:transform .18s var(--hib-ease),opacity .18s var(--hib-ease);
}

/* Interaction: colour and a few pixels of cue travel — no fills, no cards. */
.hib-topic-index__item:hover .hib-topic-index__name,
.hib-topic-index__item:focus-visible .hib-topic-index__name,
.hib-topic-index__item:hover .hib-topic-index__count,
.hib-topic-index__item:focus-visible .hib-topic-index__count{ color:var(--hib-primary); }
.hib-topic-index__item:hover .hib-topic-index__cue,
.hib-topic-index__item:focus-visible .hib-topic-index__cue{ opacity:1;transform:translateX(-3px); }
.hib-topic-index__item:active .hib-topic-index__cue{ transform:none; }

/* Below the wide spread: the anchor becomes one compact lockup above the list —
   figure on the reading side, heading and support beside it. */
@media (max-width:1080px){
  .hib-topic-index{ grid-template-columns:1fr;gap:20px; }
  .hib-topic-index__anchor{
    grid-template-columns:auto 1fr;column-gap:16px;align-items:center;
    padding-block-start:0;
  }
  .hib-topic-index__figure{ grid-column:1;grid-row:1 / 3;margin:0;font-size:2.6rem; }
  .hib-topic-index__anchor .hib-cat-siblings__heading{ grid-column:2;grid-row:1;align-self:end; }
  .hib-topic-index__figure-sub{ grid-column:2;grid-row:2;margin:2px 0 0;align-self:start; }
}
@media (max-width:640px){
  .hib-topic-index__figure{ font-size:2.2rem; }
  .hib-topic-index__item{ padding:14px 2px;gap:12px; }
}
.hib-cat-siblings{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}
.hib-cat-sibling{
  display:flex;align-items:center;gap:10px;
  min-block-size:var(--hib-tap-min);
  padding:10px 14px;background:#fff;text-decoration:none;
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-m);
  transition:border-color .2s var(--hib-ease),background-color .2s var(--hib-ease);
}
.hib-cat-sibling:hover,
.hib-cat-sibling:focus-visible{ border-color:var(--hib-primary);background:var(--hib-domain-soft); }
.hib-cat-sibling__icon{ flex:0 0 auto;display:inline-flex;color:var(--hib-primary); }
.hib-cat-sibling__icon svg{ width:19px;height:19px;stroke-width:1.6; }
.hib-cat-sibling__name{
  font-weight:700;font-size:.94rem;color:var(--hib-text);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hib-cat-sibling__count{
  margin-inline-start:auto;flex:0 0 auto;
  font-family:var(--hib-font-mono);font-size:var(--hib-label-min);
  color:var(--hib-text-muted);
}

/* — CTA: proportionate, not an oversized panel. (.hib-cat-cta retired — the
   topic archive's closer sits in a standard .hib-section and takes the shared
   interior-closer epilogue frame.) — */
.hib-cta-section--tight{ padding:clamp(var(--hib-space-6),3.6vw,var(--hib-space-9)) clamp(var(--hib-space-5),4vw,var(--hib-space-8)); }
.hib-cta-section--tight .hib-cta-section__desc{ max-width:54ch;margin-inline:auto; }
/* 11px, not 9px: Ploni gives this link a 23.96px inline box, so 10px lands at
   43.96px — a hair under a 44px tap target. Vertical margins do not apply to an
   inline <a>, so the negative margin stays inert and the band's rhythm is
   unchanged. */
.hib-cta-section--tight .hib-cta-section__secondary{ padding-block:11px;margin-block:-11px; }

/* — Profile closer, same tightened proportions (single-plumbers.php) —
   .hib-profile-bottom-cta is its own BEM block, so the --tight rules above
   cannot reach it; these mirror them against the profile block's own element
   classes. The block's base title runs larger than the cta-section one, so the
   shared clamp is a real reduction here rather than a restatement. Padding is
   declared again for <=767 so the tighter value does not depend on out-ranking
   the base mobile rule (hib-design-system.css) on source order alone. */
.hib-profile-bottom-cta--tight{ padding:clamp(var(--hib-space-6),3.6vw,var(--hib-space-9)) clamp(var(--hib-space-5),4vw,var(--hib-space-8)); }
.hib-profile-bottom-cta--tight .hib-profile-bottom-cta__desc{ max-width:54ch;margin-inline:auto;margin-block-end:var(--hib-space-5); }
/* The tappable element is the link, not its wrapper. Padding on an inline <a>
   grows the hit area; vertical margins do not apply to it, so the negative
   margin stays inert and nothing shifts. */
.hib-profile-bottom-cta--tight .hib-profile-bottom-cta__secondary a{ padding-block:15px;margin-block:-15px; }
@media (max-width:767px){
  .hib-profile-bottom-cta--tight{ padding:var(--hib-space-6) var(--hib-space-5); }
}

@media (max-width:860px){
  /* Mobile: the text column now spans the band, so the decorative layer steps
     back — smaller and fainter — and stays in its far corner. */
  .hib-cat-hero__art{ width:min(46vw,300px);opacity:.10; }
}
@media (max-width:640px){
  .hib-cat-hero__art--glyph{ width:180px;opacity:.08; }
}

@media (prefers-reduced-motion:reduce){
  /* Movement goes, feedback stays: the row keeps its hover border and shadow and
     the focus outline is untouched — only the lift, the cue's slide and every
     transition (including the one .hib-guide-entry contributes) are dropped. */
  .hib-cat-card,
  .hib-cat-card__cue,
  .hib-cat-sibling,
  .hib-topic-index__item,
  .hib-topic-index__cue{ transition:none; }
  .hib-cat-card:hover,
  .hib-cat-card:active{ transform:none; }
  .hib-cat-card:hover .hib-cat-card__cue,
  .hib-cat-card:focus-visible .hib-cat-card__cue{ transform:none; }
  /* The index keeps its colour shift; only the cue's slide goes. */
  .hib-topic-index__item:hover .hib-topic-index__cue,
  .hib-topic-index__item:focus-visible .hib-topic-index__cue{ transform:none; }
}

/* ============================================================
   R6 — שלב 6 (מדריכים / guides). §E6: one thumbnail system
   (frame+duotone / soft+icon+index), the shared video facade on
   the guide player, and uniform topic chips. Guide-scoped, additive;
   monochrome navy — no per-category hue.
   ============================================================ */

/* --- One thumbnail system: no two teasers in a grid are identical --- */

/* (a) frame branch — a real per-guide still, duotone-navy so the library reads
   as one set and any play glyph stays legible over any photograph. */
.hib-guide-entry__thumb--frame{
  background-color:var(--hib-domain-hero);
  background-size:cover;background-position:center;
}
.hib-guide-entry__thumb--frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,37,70,.16) 0%, rgba(8, 30, 58, .54) 100%);
  mix-blend-mode:multiply;
}

/* (b) soft branch — a navy tile with the topic icon and a per-card motif (the
   "index"). The motif is keyed to the card's position (`--hib-thumb-i`) so every
   teaser in a grid draws a distinct, stable pattern; it is purely graphic
   (aria-hidden) and asserts no datum, so it never contradicts the guide title —
   which is what a repeated shared poster did. */
.hib-guide-entry__thumb--soft{
  background-color:var(--hib-dark-raised);
  display:flex;align-items:center;justify-content:center;
}
.hib-guide-entry__thumb-motif{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.92;
  --hib-motif-a:calc(var(--hib-thumb-i, 0) * 34deg + 8deg);
  background:
    radial-gradient(130% 100% at calc(14% + (var(--hib-thumb-i, 0) * 11%)) -10%, rgba(29,84,196,.44) 0%, transparent 56%),
    repeating-linear-gradient(var(--hib-motif-a), rgba(169,198,255,.11) 0 1px, transparent 1px 15px);
}
.hib-guide-entry__thumb--soft .hib-guide-entry__thumb-icon{
  position:relative;z-index:1;color:rgba(169,198,255,.66);
}

/* play affordance — a corner badge over either branch (never centred over the
   icon), so it reads as "there is a video" without hiding the tile identity. */
.hib-guide-entry__thumb--soft .hib-guide-entry__thumb-play,
.hib-guide-entry__thumb--frame .hib-guide-entry__thumb-play{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:3;
  width:32px;height:32px;
}

/* --- Guide player: deferred inline player (§E6 "lite-embed facade") ---
   A real <button> preview that fills the theater 9:16 frame: a poster with a
   centred play glyph. On click hib-main.js replaces it in place with the
   provider's official embedded player (.hib-video-player__embed) — playback
   stays on the HIB page. No provider iframe before that click (LCP), a fixed box
   (no CLS). Reuses the shared .hib-video-facade __glyph/__label parts. */
.hib-video-player__facade{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--hib-space-3);
  appearance:none;-webkit-appearance:none;border:0;margin:0;font:inherit;cursor:pointer;
  text-decoration:none;color:var(--hib-dark-text);text-align:center;padding:var(--hib-space-5);
  background:linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
  transition:background .3s var(--hib-ease);
}
.hib-video-facade__poster{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Navy scrim over the poster so the play glyph + labels stay legible. */
.hib-video-player__facade::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8, 30, 58, .34) 0%, rgba(8, 30, 58, .66) 100%);
}
/* The overlay parts sit above the poster. Scoped to the two elements that are
   overlay — a `> *` catch-all also caught the poster itself, and because both
   selectors carry the same specificity the later one won: the poster lost its own
   `position:absolute`, dropped into the flex column as an ordinary item, and
   pushed the glyph and label below the artwork instead of over it. */
.hib-video-player__facade > .hib-video-facade__glyph,
.hib-video-player__facade > .hib-video-facade__label{ position:relative;z-index:2; }
.hib-video-player__facade:hover,
.hib-video-player__facade:focus-visible{ background:linear-gradient(180deg,#0d2b53 0%,#08203c 100%); }
.hib-video-player__facade:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:-4px; }
.hib-video-player__facade:hover .hib-video-facade__glyph{ transform:scale(1.06);background:rgba(255,255,255,.2); }

/* Official provider player injected on click — fills the same box, so the
   transition preserves the frame's dimensions (no layout shift). */
.hib-video-player__embed{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;background:#000;
}
.hib-video-player__embed iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; }
.hib-video-player__embed:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:-4px; }
/* Short loading state until the provider frame paints — a calm centred spinner. */
.hib-video-player__embed.is-loading{ background:var(--hib-dark-raised); }
.hib-video-player__embed.is-loading::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:1;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(169,198,255,.28);border-block-start-color:var(--hib-primary-on-dark);
  animation:hib-geo-spin .8s linear infinite;
}
/* No-JS fallback link — a legible, explicitly labelled last resort over the box. */
.hib-video-facade__fallback{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:3;
  padding:44px 16px 16px;text-align:center;
  color:#fff;font-weight:700;font-size:var(--hib-body-s-size);text-decoration:underline;
  background:linear-gradient(to top,rgba(4,14,32,.9) 0%,rgba(4,14,32,.62) 55%,transparent 100%);
}
.hib-video-facade__fallback:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:-3px; }

@media (prefers-reduced-motion:reduce){
  .hib-video-player__facade,
  .hib-video-player__facade:hover,
  .hib-video-player__facade:focus-visible,
  .hib-video-player__facade:hover .hib-video-facade__glyph{ transform:none;transition:none; }
  .hib-video-player__embed.is-loading::after{ animation:none; }
}

/* — Individual-video hero: category identity + metadata (hero only) —
   Replaces the badge cluster with one linked category chip that reuses the
   canonical icon, and a metadata line that renders only when it has something
   authoritative to say. Nothing below the hero is touched. */
.hib-video-watch__cat{
  display:inline-flex;align-items:center;gap:8px;
  min-block-size:var(--hib-tap-min);
  padding:6px 14px 6px 12px;margin-block-end:var(--hib-space-4);
  border-radius:var(--hib-radius-pill);
  background:rgba(169,198,255,.10);border:1px solid rgba(169,198,255,.22);
  color:#DCE9FF;text-decoration:none;font-weight:700;font-size:var(--hib-label-m-size);
  transition:background-color .2s var(--hib-ease),border-color .2s var(--hib-ease);
}
.hib-video-watch__cat:hover,
.hib-video-watch__cat:focus-visible{ background:rgba(169,198,255,.18);border-color:rgba(169,198,255,.38); }
.hib-video-watch__cat-icon{ display:inline-flex;color:var(--hib-primary-on-dark); }
.hib-video-watch__cat-icon svg{ width:17px;height:17px;stroke-width:1.7; }
.hib-video-watch__meta{
  display:flex;align-items:center;gap:7px;margin:var(--hib-space-4) 0 0;
  font-family:var(--hib-font-mono);font-size:var(--hib-label-min);
  color:var(--hib-on-dark-muted);
}
.hib-video-watch__meta svg{ width:14px;height:14px;color:var(--hib-primary-on-dark);flex:0 0 auto; }
/* Breadcrumb on the navy watch hero inherits the shared .hib-crumbs treatment. */
.hib-video-watch__crumb{ margin-block-end:clamp(var(--hib-space-5),2.6vw,var(--hib-space-7)); }
@media (prefers-reduced-motion:reduce){ .hib-video-watch__cat{ transition:none; } }

/* — LEGAL DOCUMENT (P4) ————————————————————————————————————————————————
   The combined terms + privacy document is a long read, so the page is built for
   reading distance rather than for browsing: one measure-limited column, a compact
   index above it, and headings that clear the sticky header when jumped to.
   Reuses the shared .hib-prose primitive; nothing here restyles it globally. — */
.hib-container--reading{ max-width:calc(46rem + 2 * var(--hib-page-padding)); }

/* Table of contents — an index, not a nav bar.

   THE SURFACE IS NOT DEFINED HERE. `.hib-legal-toc` composes the shared aside-panel
   primitive at the top of this file (border, radius, padding, white surface, card
   shadow, sticky offset), and `.hib-legal-toc__title` / `__link` compose its label
   and link rhythm — the same treatment the single-guide aside carries. What remains
   below is only what is genuinely this page's: the document-level two-column shell,
   the list reset, and the flow behaviour at each width. */

/* The shell. `--reading` (46rem) stays the measure for a document WITHOUT an index;
   a document with one gets the measure plus one aside column plus the gap, so the
   body's reading width is unchanged by the arrival of the panel beside it. */
.hib-legal-shell{ max-width:calc(46rem + 248px + 56px + 2 * var(--hib-page-padding)); }
.hib-legal-layout{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}
.hib-legal-layout__body{ min-width:0; }
.hib-legal-aside{ min-width:0; }

.hib-legal-toc__list{ list-style:none;margin:0;padding:0; }
.hib-legal-toc__link{ text-decoration:none; }
/* The separator is dropped on the LAST ITEM only. Not `:last-of-type` on the <a>:
   each <a> is the only <a> inside its own <li>, so that selector matches every link
   and silently removes every rule in the list. The guide aside can use it because
   its links are siblings; here they are wrapped, so the list item is what "last"
   has to mean. */
.hib-legal-toc__list > li:last-child .hib-legal-toc__link{ border-block-end:0; }
.hib-legal-toc__link:focus-visible{
  outline:2px solid var(--hib-primary);outline-offset:2px;color:var(--hib-primary);
}

/* MOBILE + TABLET: the index stays in normal document flow, above the document it
   indexes, and is not sticky — a panel pinned to a short viewport would eat the
   reading area it exists to serve. No disclosure: these indexes are at most eight
   entries, so collapsing them would hide a short list behind an extra tap without
   materially shortening the page. */
@media (max-width:1023px){
  .hib-legal-toc{
    position:static;
    margin-block-end:clamp(var(--hib-space-7),4vw,var(--hib-space-10));
  }
}

/* DESKTOP: the index becomes a restrained sticky aside beside the body. The index
   keeps its DOM position BEFORE the document — which is the meaningful reading and
   tab order for an index — and is placed into the second column visually. */
@media (min-width:1024px){
  .hib-legal-layout{ grid-template-columns:minmax(0,46rem) 248px; }
  .hib-legal-aside{ grid-column:2;grid-row:1; }
  .hib-legal-layout__body{ grid-column:1;grid-row:1; }
}

/* The document body. */
.hib-legal-doc h2,
.hib-legal-doc h3{
  /* Anchor jumps must clear the sticky header, or the heading lands underneath it. */
  scroll-margin-block-start:calc(var(--hib-header-h) + 16px);
}
.hib-legal-doc h2{
  margin-block-start:clamp(2.25rem,4vw,2.75rem);
  padding-block-start:clamp(1.1rem,2.2vw,1.5rem);
  border-block-start:1px solid var(--hib-border);
  color:var(--hib-navy,var(--hib-primary));
  font-size:clamp(1.22rem,2.4vw,1.4rem);line-height:1.35;
}
.hib-legal-doc > h2:first-child{ margin-block-start:0;padding-block-start:0;border-block-start:0; }
/* Sub-clause heading inside a legal document. It states its family and weight
   explicitly rather than inheriting them: the base `h3` rule now carries the
   display block-title signature, and a clause heading must stay in the reading
   voice — a document's calm comes from its headings not shouting between
   paragraphs. */
.hib-legal-doc h3{
  color:var(--hib-navy,var(--hib-primary));
  font-family:var(--hib-font-ui);font-size:var(--hib-body-lede-size);
  font-weight:600;line-height:1.3;
}
/* Long policy URLs are printed in full and must never push the page sideways. */
.hib-legal-doc a{ overflow-wrap:anywhere; }
.hib-legal-doc a:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .hib-legal-toc__link,
  .hib-panel__link,
  .hib-guide-aside__link{ transition:none; }
}

/* Accessibility reporting route (§C.10) — the reader meets it BEFORE the document,
   because someone who cannot use the page should not have to read it to find help. */
.hib-legal-report{
  display:flex;align-items:center;gap:12px;
  padding:14px clamp(16px,2.2vw,20px);min-height:56px;box-sizing:border-box;
  border:1px solid var(--hib-border);border-radius:var(--hib-radius-m);
  background:var(--hib-surface-soft,#F6F9FE);
  color:var(--hib-navy,var(--hib-primary));text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.hib-legal-report:hover{ background:rgba(11,37,70,.06);border-color:var(--hib-primary); }
.hib-legal-report:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-legal-report__icon{ display:inline-flex;flex:0 0 auto;color:var(--hib-primary); }
.hib-legal-report__icon svg{ width:20px;height:20px; }
.hib-legal-report__label{ flex:1 1 auto;font-weight:600;line-height:1.4; }
.hib-legal-report__cue{ flex:0 0 auto;opacity:.6;transition:transform .18s ease; }
.hib-legal-report:hover .hib-legal-report__cue{ transform:translateX(-3px); }
@media (prefers-reduced-motion:reduce){
  /* The route itself is a .hib-reveal element, so the design system's site-wide
     reduce rule already governs it (`transform`/`animation` off, a 0.2s opacity
     fade kept) with !important — restating `transition:none` here would be a
     declaration that never applies. Only the cue needs handling: it is not a
     reveal element, so its hover travel is removed explicitly. */
  .hib-legal-report__cue{ transition:none; }
  .hib-legal-report:hover .hib-legal-report__cue{ transform:none; }
}

/* ============================================================
   P6 · ADD-A-PROFESSIONAL — editor-owned copy + state clarity
   (VIS-ADDPRO / §C.13 / §H.4)

   The rail no longer carries a five-step roadmap: it described a form
   most visitors of this page cannot open (audited confusion F14). The
   step progress now lives inside the form, where it is true, labelled
   and announced; the rail is brand context only. Everything below is
   built from the committed token system — no new colours, no new
   type families.
   ============================================================ */

/* — Rail: the founder quote takes the space the step list used to hold — */
.hib-apply__founder{ margin-block-start:auto; }

/* — Column balance: the panel is centred in its track instead of hugging
     the rail with dead space opposite it — */
.hib-apply__form{ margin-inline:auto; }

/* — Gate + success states have no form to scroll to, so they sit centred
     in the full-height column instead of floating at the top — */
.hib-apply:not(.hib-apply--form) .hib-apply__form{ display:flex;flex-direction:column;justify-content:center; }

/* — Locked / invalid / expired / used / revoked ------------------------ */
.hib-apply-gate{ max-width:58ch;margin-inline:auto;text-align:center; }
.hib-apply-gate__mark{
  width:56px;height:56px;border-radius:var(--hib-radius-m);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--hib-info-soft);color:var(--hib-primary);margin-block-end:var(--hib-space-5);
}
.hib-apply-gate__mark svg{ width:26px;height:26px; }
.hib-apply-gate__title{
  font-family:var(--hib-font-display);font-size:var(--hib-h2-size);
  font-weight:var(--hib-heading-weight-section);line-height:var(--hib-h2-lh);
  letter-spacing:normal;margin:0 0 var(--hib-space-3);text-wrap:balance;
}
.hib-apply-gate__text{
  font-size:var(--hib-body-m-size);color:var(--hib-text-secondary);
  line-height:1.65;max-width:48ch;margin:0 auto;text-wrap:pretty;
}
.hib-apply-gate__actions{
  display:flex;flex-wrap:wrap;gap:var(--hib-space-3);justify-content:center;
  margin-block-start:clamp(24px,3.2vw,32px);
}

/* — "מה כולל התהליך": the honest static outline that replaced the rail — */
.hib-apply-outline{
  margin-block-start:clamp(26px,3.4vw,34px);
  padding-block-start:clamp(22px,3vw,28px);
  border-block-start:1px solid var(--hib-rule-soft);
  text-align:start;
}
.hib-apply-outline__title{
  font-family:var(--hib-font-ui);font-size:var(--hib-h4-size);font-weight:600;
  line-height:1.3;margin:0 0 var(--hib-space-4);text-align:center;
}
.hib-apply-outline__list{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--hib-space-4);
  --hib-connect-offset:16px;
  --hib-connect-color:var(--hib-rule-soft);
}
.hib-apply-outline__item{ display:flex;gap:var(--hib-space-3);align-items:flex-start;position:relative;z-index:1; }
.hib-apply-outline__num{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hib-surface);border:1px solid var(--hib-rule-soft);
  font-family:var(--hib-font-mono);font-size:var(--hib-label-s-size);font-weight:500;color:var(--hib-primary);
}
.hib-apply-outline__text{
  font-size:var(--hib-body-s-size);line-height:1.6;color:var(--hib-text-secondary);
  padding-block-start:5px;max-width:56ch;
}

/* — Confirmation: sized for the panel it lives in, not a standalone page — */
.hib-apply .hib-addpro-success{ padding:0;max-width:52ch; }
.hib-apply .hib-addpro-success__icon{ margin-block-end:var(--hib-space-5); }
.hib-apply .hib-addpro-success__title{ text-wrap:balance; }
.hib-apply .hib-addpro-success__text{ text-wrap:pretty;max-width:46ch;margin-inline:auto; }

/* — Form head ---------------------------------------------------------- */
.hib-applyform__head{ margin-block-end:clamp(22px,3vw,30px); }
.hib-applyform__title{ margin:0 0 var(--hib-space-3); }
.hib-applyform__req{
  margin:0;font-size:var(--hib-body-s-size);line-height:1.6;color:var(--hib-text-secondary);max-width:62ch;
}
.hib-applyform__req b{ color:var(--hib-text);font-weight:700; }
.hib-applyform__noscript{
  display:flex;gap:var(--hib-space-2);padding:var(--hib-space-4) var(--hib-space-5);
  margin-block-end:var(--hib-space-6);border-radius:var(--hib-radius-s);
  background:var(--hib-info-soft);color:var(--hib-text);font-size:var(--hib-body-s-size);line-height:1.6;
}

/* — Step progress: one indicator, labelled and announced ---------------- */
.hib-wizsteps{ margin-block-end:clamp(24px,3.4vw,34px); }
.hib-wizsteps__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--hib-space-2);
  --hib-connect-offset:17px;
  --hib-connect-color:var(--hib-rule-soft);
}
.hib-wizsteps__item{
  display:flex;flex-direction:column;align-items:center;gap:var(--hib-space-2);
  text-align:center;position:relative;z-index:1;min-width:0;
}
.hib-wizsteps__num{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hib-surface);border:1px solid var(--hib-border);
  font-family:var(--hib-font-mono);font-size:var(--hib-label-s-size);font-weight:500;
  color:var(--hib-text-muted);
  transition:background var(--hib-duration-base) var(--hib-ease),border-color var(--hib-duration-base) var(--hib-ease),color var(--hib-duration-base) var(--hib-ease);
}
.hib-wizsteps__label{
  font-size:var(--hib-label-s-size);line-height:1.3;color:var(--hib-text-muted);overflow-wrap:break-word;
}
.hib-wizsteps__item.is-done .hib-wizsteps__num{ background:var(--hib-info-soft);border-color:var(--hib-primary);color:var(--hib-primary); }
.hib-wizsteps__item.is-current .hib-wizsteps__num{ background:var(--hib-primary);border-color:var(--hib-primary);color:#fff; }
.hib-wizsteps__item.is-current .hib-wizsteps__label{ color:var(--hib-text);font-weight:600; }
.hib-wizsteps__status{
  margin:var(--hib-space-4) 0 0;font-family:var(--hib-font-mono);
  font-size:var(--hib-label-s-size);color:var(--hib-text-muted);text-align:center;
}

/* — Per-step editorial intro (ACF) and the informational step note ------ */
.hib-apply .hib-stepper__header{ margin-block-end:var(--hib-space-4); }
.hib-stepper__step-intro{
  margin:0 0 var(--hib-space-6);font-size:var(--hib-body-s-size);line-height:1.6;
  color:var(--hib-text-secondary);max-width:62ch;text-wrap:pretty;
}
.hib-stepper__step-note{
  display:flex;gap:var(--hib-space-3);align-items:flex-start;margin:0;
  padding:var(--hib-space-5);border-radius:var(--hib-radius-s);
  background:var(--hib-surface-soft);color:var(--hib-text-secondary);
  font-size:var(--hib-body-s-size);line-height:1.6;
}
.hib-stepper__step-note svg{ width:22px;height:22px;flex:0 0 auto;color:var(--hib-primary);margin-block-start:1px; }

/* — Required / optional stated in words, never by colour or "*" alone --- */
.hib-field__req{
  font-size:var(--hib-micro-label-size);font-weight:600;letter-spacing:normal;
  padding:1px var(--hib-space-2);border-radius:var(--hib-radius-pill);
  background:var(--hib-info-soft);color:var(--hib-primary);
}

/* — Validation: a step summary plus a message tied to each field -------- */
.hib-form-alert{
  display:flex;gap:var(--hib-space-2);align-items:flex-start;
  padding:var(--hib-space-3) var(--hib-space-4);
  border-radius:var(--hib-radius-s);
  background:var(--hib-error-soft);border:1px solid rgba(185,75,72,.28);
  color:var(--hib-text);font-size:var(--hib-body-s-size);line-height:1.55;
}
.hib-form-alert[hidden]{ display:none; }
.hib-form-alert svg{ flex:0 0 auto;margin-block-start:3px;color:var(--hib-error); }
/* The lead reads in ink, not in the error red: measured on the rendered pixels
   the red lands at 4.38:1 on the error tint, which is below AA for 15px bold.
   The error is already carried by the tint, the border and the icon, so the
   sentence does not have to be the thing carrying colour. */
.hib-form-alert strong{ color:var(--hib-text);font-weight:700; }
.hib-field__error{ display:flex;gap:6px;align-items:flex-start;margin-block-start:6px; }
.hib-field__error[hidden]{ display:none; }
.hib-field__error svg{ flex:0 0 auto;margin-block-start:2px; }

/* — Specialties fixed by the invitation: a statement, not a control ---- */
.hib-specialties-select--fixed .hib-specialties-select__option{
  cursor:default;user-select:text;
}

/* — Specialties: selection count visible without hover ----------------- */
.hib-specialties-select__count{
  margin:var(--hib-space-3) 0 0;font-family:var(--hib-font-mono);
  font-size:var(--hib-label-s-size);color:var(--hib-text-muted);
}

/* — Review: a real definition list, empty values plainly marked -------- */
.hib-addpro-summary__rows{ margin:0; }
.hib-addpro-summary__row dt,
.hib-addpro-summary__row dd{ margin:0; }
.hib-addpro-summary__value.is-empty{ color:var(--hib-text-muted); }
/* The review row is a flex pair, and a flex item's default `min-width:auto`
   refuses to shrink below its MIN-CONTENT width. A pasted video URL has no break
   opportunity at all, so its min-content width is the whole string: on a 393px
   phone that widened the row past the viewport and carried the consent
   checkboxes off the right edge with it — the two controls a submission cannot
   happen without. `min-width:0` lets the value shrink; `overflow-wrap:anywhere`
   gives the URL somewhere to break. The label keeps its intrinsic width so it is
   the value, not the field name, that wraps. */
.hib-addpro-summary__label{ flex:none; }
.hib-addpro-summary__value{ min-width:0; overflow-wrap:anywhere; }
/* A URL is Latin text inside an RTL row: isolate it so the bidi algorithm cannot
   drag its trailing slash to the wrong end and misrepresent the address the
   applicant is being asked to confirm. */
#sumVideo{ direction:ltr; unicode-bidi:isolate; text-align:start; }

/* — Submit: honest busy state ----------------------------------------- */
.hib-btn.is-busy{ opacity:.72;pointer-events:none; }

/* — Touch + narrow-viewport behaviour --------------------------------- */
@media (max-width:768px){
  .hib-specialties-select__option,
  .hib-area-city,
  .hib-areas-selector__clear{ min-height:44px; }
  .hib-stepper__nav-buttons .hib-btn{ min-height:44px; }
}

@media (max-width:600px){
  /* Five labels cannot share a 390px row honestly, so only the step the
     applicant is on is named — the numbers keep the sequence visible and
     the status line always spells the position out in full. */
  .hib-wizsteps__item:not(.is-current) .hib-wizsteps__label{ display:none; }
  .hib-wizsteps__list{ align-items:start;gap:var(--hib-space-1); }
  .hib-wizsteps__item.is-current{ grid-column:auto; }
  .hib-wizsteps__num{ width:30px;height:30px; }
  .hib-wizsteps__list{ --hib-connect-offset:15px; }
  .hib-apply-gate__actions .hib-btn{ width:100%; }
}

@media (max-width:880px){
  /* On mobile the rail is a compact header. In the form states the task
     comes first, so the founder block is dropped; in the gate and success
     states there is no task, and the founder presence is the point. */
  .hib-apply:not(.hib-apply--form) .hib-apply__founder{ display:flex; }
}

/* — The wizard's focused-invalid treatment used to be restated here. It is now
     one form-agnostic rule in the FOCUSED-INVALID FIELD block further down
     this stylesheet, which every form inherits (P3d3). — */

/* — Gate and success states have no roadmap to anchor the rail's bottom, so
     the whole block is composed as one centred unit rather than a headline at
     the top and a quote 700px below it. — */
.hib-apply:not(.hib-apply--form) .hib-apply__rail-in{ justify-content:center; }
.hib-apply:not(.hib-apply--form) .hib-apply__founder{ margin-block-start:clamp(28px,4vw,44px); }

/* — The header is sticky, so anything the wizard scrolls to (a step header,
     the field an error just moved focus to) must clear it. Measured against
     the header's own height token, not a guessed constant. — */
.hib-apply .hib-wizsteps,
.hib-apply .hib-stepper__header,
.hib-apply .hib-field,
.hib-apply .hib-form-alert,
.hib-apply .hib-checkbox{ scroll-margin-block-start:calc(var(--hib-header-h,72px) + var(--hib-space-5)); }

/* — Position is stated once per width. Where the labelled list already shows
     it, the live region stays for screen readers but leaves the layout; on
     narrow screens, where only the current step is named, it is shown. — */
@media (min-width:601px){
  .hib-wizsteps__status{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}

/* ============================================================================
   VISION — METHODOLOGY BLOCK  (P3d1 · "איך בעלי המקצוע נבחרים?")
   The canonical answer to the seal's "מה זה אומר?" and the anchor every seal on
   the site links to. It has to read as a self-contained document the moment a
   visitor lands on it from another page, so the steps sit in one bordered,
   azure-tinted panel (§D: soft surface = grouping) rather than floating in the
   page. The numbered steps are a genuine sequence, so they consume the P3b2
   connection-line primitive in its vertical variant.
   ========================================================================== */
.hib-methodology{
  /* An anchor jump must clear the sticky header, or the heading lands under it. */
  scroll-margin-block-start:calc(var(--hib-header-h) + 16px);
  /* Rhythm (vision polish): the letter, the proof panel and the closer are one
     narrative — the compact section step keeps them in conversation instead of
     floating as islands (full + full stacked ~192px of white at each seam). */
  padding-block:var(--hib-section-compact-py);
}
.hib-methodology__panel{
  background:var(--hib-surface-soft);
  border:1px solid var(--hib-rule-soft);
  border-radius:var(--hib-radius-l);
  padding:clamp(24px,3.4vw,48px); /* dense section step (48) */
}
.hib-methodology__head{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--hib-space-3);
  margin-block-end:clamp(22px,3.2vw,32px);
}
.hib-methodology__seal{ --hib-seal-surface:var(--hib-surface); }
.hib-methodology__title{ margin:0; }

.hib-methodology__steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--hib-space-6);
  --hib-method-disc:42px;
  --hib-connect-offset:calc(var(--hib-method-disc) / 2);   /* centre of the numeral disc */
  --hib-connect-color:var(--hib-rule-soft);
}
.hib-methodology__step{
  display:flex;gap:var(--hib-space-4);align-items:flex-start;
  position:relative;z-index:1;
}
/* Sized by a minimum rather than a fixed box: at 200% text zoom the mono
   numeral needs more room than 42px, and a fixed disc would clip it. Growing
   into a pill keeps the number readable instead. */
.hib-methodology__n{
  min-inline-size:var(--hib-method-disc);min-block-size:var(--hib-method-disc);
  padding:2px 6px;flex:0 0 auto;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hib-surface);border:1px solid var(--hib-rule-soft);
  font-family:var(--hib-font-mono);font-size:var(--hib-label-s-size);font-weight:500;
  color:var(--hib-primary);
}
.hib-methodology__body{ min-inline-size:0;padding-block-start:2px; }
/* Block-title role: each step heading opens a block inside the section — the
   same job as the home how-it-works steps, and the same rung. At the previous
   17px compact-rail size the heading rendered at exactly the body's size, so
   the sentences that carry the approval claims read as more prose, not as the
   page's proof outline. */
.hib-methodology__t{
  font-family:var(--hib-font-display);font-size:var(--hib-block-title-size);
  font-weight:900;line-height:var(--hib-block-title-lh);letter-spacing:normal;
  color:var(--hib-text);margin:0 0 6px;
}
.hib-methodology__p{ color:var(--hib-text-secondary);max-inline-size:60ch; }
.hib-methodology__p p{ margin:0; }
.hib-methodology__p p + p{ margin-block-start:.6em; }

/* §P.B2 — rendered only when an editor has stored an approved statement. */
.hib-methodology__neutrality{
  margin:clamp(22px,3.2vw,30px) 0 0;
  padding-block-start:clamp(16px,2.4vw,22px);
  border-block-start:1px solid var(--hib-rule-soft);
  color:var(--hib-text-secondary);font-size:var(--hib-body-s-size);line-height:1.6;
}

/* Narrow phones: the number joins the heading row and the explanation takes the
   panel's full measure — beside a 36px disc the body text collapsed to ~24ch at
   360. `display:contents` promotes title and paragraph to the step grid; the
   connection line would now cross full-width copy, so the numbers alone carry
   the sequence here. */
@media (max-width:520px){
  .hib-methodology__steps{ --hib-method-disc:36px; }
  .hib-methodology__step{ display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--hib-space-3);align-items:center; }
  .hib-methodology__body{ display:contents; }
  .hib-methodology__t{ margin:0; }
  .hib-methodology__p{ grid-column:1 / -1;margin-block-start:6px; }
  .hib-methodology__steps.hib-connect--v::before{ display:none; }
}

/* — P3d1 consequences of publishing the seal's destination —
     Two rules that only become reachable once "מה זה אומר?" has somewhere to go.
     Both are corrections, not decoration. */

/* The trust band's methodology button renders for the first time in P3d1. The
   base ghost button is drawn for light surfaces, so on the navy band its azure
   ink measured 2.2:1 — below AA. It takes the band's own light-on-navy ink
   (10.1:1 measured on the painted pixels) and a hairline, so it also reads as a
   control rather than as a stray line of text beside the solid primary CTA. */
.hib-trustband .hib-btn--ghost.hib-trustband__method{
  color:var(--hib-primary-on-dark);
  border:1px solid rgba(169,198,255,.34);
  background:transparent;
}
.hib-trustband .hib-btn--ghost.hib-trustband__method:hover{
  background:rgba(169,198,255,.12);
  border-color:rgba(169,198,255,.55);
}

/* The explainer is a link inside the seal's own line of text, so its height is
   constrained by that line (the WCAG 2.5.8 inline exception). Padding lifts the
   hit area to the 24px minimum without moving anything: the negative margin
   gives the space back to the layout. */
.hib-seal__more{
  padding-block:6px;
  margin-block:-6px;
}

/* ======================================================================
   P3d2 · inline validation on the public forms (contact + review)
   The two forms reuse the components the wizard already committed —
   `.hib-form-alert`, `.hib-field--error`, `.hib-field__error` — so only the
   two controls the design system's error rules cannot reach are added here.
   ====================================================================== */

/* The contact message box is styled as its own component, not as a
   `.hib-field__input`, so the design-system error rules never reached it. */
.hib-field--error .hib-contact-form__textarea,
.hib-contact-form__textarea[aria-invalid="true"]{
  border-color:var(--hib-error);background:var(--hib-error-soft);
}

/* The review form gives its own fields a border and a background here, in a
   stylesheet that loads AFTER the design system — so the design system's
   `.hib-field--error .hib-field__input` rule, which ties with it on
   specificity, never won and an invalid review field showed no error at all
   (its message was the only sign). Restated at the form's own specificity. */
.hib-review-form .hib-field--error .hib-field__input,
.hib-review-form .hib-field__input[aria-invalid="true"]{
  border-color:var(--hib-error);background:var(--hib-error-soft);
}

/* ── FOCUSED-INVALID FIELD — one rule, every form ──────────────────────────
   An invalid field keeps saying so while it has focus, so the field the
   keyboard is on and the field being complained about are the same thing.

   P6 stated this for `.hib-apply`, P3d2 restated it for `.hib-contact-form`
   and `.hib-review-form__form`. Three copies of one rule is a design-system
   problem, so P3d3 states it **once, form-agnostically**: any `.hib-field`
   marked in error, in any form, present or future.

   Two things have to be beaten, and both were found by looking at the render
   rather than at the cascade:
     1. the activated-surface rule `.hib-field__input:focus{background:
        rgba(29,84,196,.045)}` (0,2,0) ties on specificity with the error tint
        `.hib-field--error .hib-field__input` (0,2,0) and wins on source
        order, so a focused invalid field went blue;
     2. the browser's own focus ring paints navy over the error affordance, so
        it is replaced by a ring drawn in the error colour rather than merely
        suppressed.

   Specificity is deliberately NOT escalated: every selector below is (0,3,0),
   the same weight the per-form copies resolved at once their form prefix is
   dropped. It wins because it is stated after the last competing (0,3,0) rule
   in this stylesheet (`.hib-review-form .hib-field__input:focus`), not because
   it out-specifies anything. Adding a form-scoped copy again would re-create
   exactly the problem this block removes.

   NOTE for future forms: opt in by markup, not by CSS — put `.hib-field--error`
   (or `aria-invalid="true"`) on the control the way `hib-main.js` already does,
   and the treatment applies with no new rule. ────────────────────────────── */
.hib-field--error .hib-field__input:focus,
.hib-field--error .hib-field__input:focus-visible,
.hib-field__input[aria-invalid="true"]:focus,
.hib-field__input[aria-invalid="true"]:focus-visible,
.hib-field--error .hib-contact-form__textarea:focus,
.hib-field--error .hib-contact-form__textarea:focus-visible,
.hib-contact-form__textarea[aria-invalid="true"]:focus,
.hib-contact-form__textarea[aria-invalid="true"]:focus-visible{
  border-color:var(--hib-error);
  background:var(--hib-error-soft);
  box-shadow:0 0 0 3px rgba(185,75,72,.22);
  outline:2px solid transparent;outline-offset:2px;
}

/* The rating is a radiogroup, so the error is drawn around the whole choice
   rather than on one control. Never colour alone: the message underneath
   names it and `aria-invalid` on the group states it programmatically.

   Drawn entirely in box-shadow, never in padding or a border. The group is an
   inline-flex row of five 30px stars: growing its box made it clip its own
   last star by 2px at 200% zoom on a 390px screen (measured, not guessed).
   A shadow paints the same tint and ring outside the box and costs no layout. */
.hib-rating-input[aria-invalid="true"]{
  border-radius:var(--hib-radius-s);
  background:var(--hib-error-soft);
  box-shadow:
    0 0 0 var(--hib-space-2) var(--hib-error-soft),
    0 0 0 calc(var(--hib-space-2) + 1px) var(--hib-error);
}

/* The header is sticky, so whatever the validation scrolls to — the summary,
   or the field it moved focus to — must clear it. Measured against the
   header's own height token, not a guessed constant. */
.hib-contact-form .hib-field,
.hib-contact-form .hib-form-alert,
.hib-review-form__form .hib-field,
.hib-review-form__form .hib-form-alert{
  scroll-margin-block-start:calc(var(--hib-header-h,72px) + var(--hib-space-5));
}

/* The summary is the first thing in the form, so it needs to sit off the
   heading above it and off the fields below it. */
.hib-contact-form .hib-form-alert,
.hib-review-form__form .hib-form-alert{ margin-block-end:var(--hib-space-4); }

/* ==========================================================================
   P3d3 · SECTION-HEADER SYSTEM — three variants, and only three (F12)
   --------------------------------------------------------------------------
   The audited defect: one scaffold — chip-eyebrow + H2 + description + arrow —
   repeated on nearly every section, five times on the homepage alone. It made
   composed pages read as a stack of interchangeable blocks and it is the
   pattern PRODUCT.md itself bans. The remedy is not more variants; it is three
   deliberate ones, each with a job:

     1 · HERO KICKER  — `[block]__eyebrow` / `__kicker` in a page's lead band.
                        ONE PER PAGE. Mono, uppercase, tracked, with a short
                        rule; it says what kind of page this is, once.
     2 · QUIET INNER  — `.hib-section-header--start`: heading, optional lead
                        sentence, optional inline action. No label. The heading
                        names its own subject, so a chip above it repeats it.
     3 · DARK BAND    — `.hib-section-header--band`: the header of a navy
                        narrative band. Band ink plus a hairline rule instead
                        of a chip, so the band reads as a change of voice
                        rather than as another light section wearing a badge.

   The azure pill `.hib-section-header__eyebrow` is variant 1's light-surface
   ancestor and is RETIRED — no template emits it. It is left defined only so
   that a stale cached page does not lose its styling mid-deploy; do not add
   new call sites. Its physical removal rides the P7 dead-CSS sweep, with the
   other rules P4 orphaned.
   ========================================================================== */

/* ── 1 · HERO KICKER — one grammar for all five heroes ──────────────────────
   These were three different labels wearing the same name: 12.5px mono
   uppercase with a 26px rule (home, wizard, contact), 16px Ploni with a
   gradient dash (vision, 404), and a 12.8px mono line at 400 weight (closing
   CTA, now removed). Stated once, they are one variant.

   The kicker is Hebrew, so it is set in the Hebrew text face. It was declared
   in IBM Plex Mono, which has no Hebrew at all — every glyph in it was already
   being painted by Ploni through the fallback chain, so the family said one
   thing and the page showed another, and the whole treatment rested on a
   fallback one stack edit away from disappearing. `text-transform:uppercase`
   went with it: Hebrew has no case, so it did nothing here except wait to shout
   at the first Latin word to land in a kicker. What actually carries the role —
   the 12px rung, the 600 weight, the azure, and the 26px rule drawn below —
   is unchanged, and now all of it is deliberate. */
.hib-mhero__eyebrow,
.hib-vision-hero__eyebrow,
.hib-404__eyebrow,
.hib-apply__eyebrow,
.hib-contact-panel__eyebrow,
.hib-contact-formcol__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--hib-font-ui);font-size:var(--hib-micro-label-size);font-weight:600;
  letter-spacing:normal;color:var(--hib-primary-on-dark);
}
/* The contact form column is the one kicker on a LIGHT ground. Same role, same
   rung, same weight — only the ink changes, so only the ink is restated. */
.hib-contact-formcol__eyebrow{ color:var(--hib-primary); }
/* The rule is drawn by the kicker itself, so a call site needs no extra
   element. `.hib-vision-hero__eyebrow-dot` / `.hib-404__eyebrow-dot` are the
   markup those two heroes already ship; they are neutralised rather than
   removed from the templates, which keeps this a stylesheet-only change. */
.hib-mhero__eyebrow::before,
.hib-vision-hero__eyebrow::before,
.hib-404__eyebrow::before,
.hib-apply__eyebrow::before,
.hib-contact-panel__eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;background:currentColor;flex:0 0 auto;
}
.hib-vision-hero__eyebrow-dot,
.hib-404__eyebrow-dot{ display:none; }

/* NOTE for a future light-surface hero: every kicker call site above sits on a
   navy band, so the grammar is stated once in the band's pale azure. A hero on
   a light surface takes `--hib-primary` instead — add it to that hero's own
   block rather than shipping an unused modifier here. */

/* ── 3 · DARK-BAND HEADER ──────────────────────────────────────────────────
   The chip is gone from the bands that carried one, so the band header needs
   its own quiet signal. A hairline in the band's ink, the same 26px measure as
   the hero kicker's rule, reads as the same family without repeating the
   label. Decorative only — it carries no text and no meaning a reader needs. */
.hib-section-header--band .hib-section-header__title::before,
.hib-home-cta__title::before,
.hib-cta-section__title::before,
.hib-profile-bottom-cta__title::before{
  content:"";display:block;width:26px;height:2px;border-radius:2px;
  background:currentColor;opacity:.5;
  margin-block-end:var(--hib-space-4);
}
/* These bands are centred (approved at `P3b5-G01`), so their rules centre
   too — same grammar, each band's own alignment. The guide closers joined
   with the CTA-family unification: every centred interior closer now opens
   its heading with the same quiet mark. */
.hib-cta-section__title::before,
.hib-profile-bottom-cta__title::before{ margin-inline:auto; }
/* The closing CTA band stays start-aligned — its composition is unchanged;
   only the chip above the heading is gone and this rule takes its place. */

/* ── F16 · MOBILE-MENU TRUST CLOSE ─────────────────────────────────────────
   The drawer is a flex column and `.hib-mobile-menu__cta` already claims its
   free space with `margin-block-start:auto`. This block must NOT claim it too:
   two auto starts share the slack equally, which stranded the CTA mid-panel
   with a matching void above and below it. A token start instead, so the foot
   of the drawer reads as one cluster — the CTA, a deliberate step, then the
   rule and the seal — and on a short phone the slack is nil, the auto start
   above resolves to zero and the drawer simply scrolls. Border, not a filled
   panel: the drawer is a light surface and a tinted block here would read as a
   second CTA competing with the real one above it. */
.hib-mobile-menu__trust{
  margin-block-start:var(--hib-space-5);
  padding-block-start:var(--hib-space-5);
  border-block-start:1px solid var(--hib-border);
  display:flex;flex-direction:column;gap:var(--hib-space-2);
}
.hib-mobile-menu__trust-line{
  margin:0;font-size:var(--hib-label-s-size);line-height:1.5;
  color:var(--hib-text-secondary);
}
/* The seal wraps rather than truncating: on a 320px drawer at large text its
   label, the person and the explainer link cannot share one line, and a
   trust mark that cuts itself off is worse than one that takes two. */
.hib-mobile-menu__seal{ flex-wrap:wrap; }
.hib-mobile-menu__seal .hib-seal__text{ min-width:0;flex-wrap:wrap; }

/* ============================================================
   R1 · VISUAL-GRAMMAR FOUNDATION (loads last — wins)
   Typography & Hebrew-safe grammar. Plan §I·שלב 1 (C / D1 / D2 / G).
   The document is lang="he-IL": Hebrew keeps letter-spacing: normal
   everywhere; the only tracking is Latin, reached solely via .hib-latin.
   ============================================================ */

/* Latin runs only — the sole carrier of negative tracking on this he-IL page,
   applied by an explicit class on the Latin lockup / watermark. Isolated so a
   Latin run inside an RTL line keeps its own direction and never reflows it. */
.hib-latin{ letter-spacing: var(--hib-ls-latin); unicode-bidi: isolate; }

/* A Hebrew child inside a .hib-latin lockup must not inherit the Latin tracking
   (defensive — each __word already declares letter-spacing: normal). */
.hib-latin .hib-header__word,
.hib-latin .hib-footer__word{ letter-spacing: normal; }

/* Editorial NUMERALS — tabular, left-to-right figures isolated from the
   surrounding RTL text so a number set in a Hebrew sentence keeps digit order
   and never reflows the line. Mono is scoped to these numeral slots (plan D1/D2). */
.hib-mhero__k,
.hib-dhero__count strong,
.hib-dresults__count strong,
.hib-results-summary__text strong,
.hib-founder-reach__k,
.hib-amir-section__followers strong,
.hib-hero-founder__stat-value,
.hib-hero-founder__badge--social strong,
.hib-evidence__num,
.hib-subdomain__ct,
.hib-howto__n,
.hib-methodology__n,
.hib-profile-reviews__score,
.hib-rating-bar__ct,
.hib-contact-card__price,
.hib-apply-outline__num,
.hib-wizsteps__num,
.hib-specialties-select__count{
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* `isolate` alone was not enough to deliver the "left-to-right figures" this
     block promises. The isolate inherits the page's RTL base direction, and
     U+002B PLUS SIGN is bidi class ES — it only joins digits when it sits
     BETWEEN two European numbers, so a trailing `+` stayed neutral and resolved
     to the RTL edge: `60+` painted as `+60`, `179K+` as `+179K`. (`100%` was
     never affected because U+0025 is class ET, which rule W5 folds into the
     adjacent number.) Declaring the direction the comment already describes is
     the fix; the isolate stays so the run still cannot reflow its Hebrew line. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* =============================================================================
   R2 · חומרים, מבטא, היררכיית אמון — materials · signature accent · trust hierarchy
   (redesign programme Revised 3 · §C / §D1 / §D4). Loads last, so these govern.

   Three things ship here, all restrained:
     · the AMBER SIGNATURE (≤5%) marks only what reads as Amir's own hand — the
       seal's core and the review stars (both wired through --hib-signature);
     · the compact APPROVAL BADGE (trust hierarchy B) is the card's mark, so the
       full seal is freed to appear once per page on the narrative surfaces;
     · the CLOSER component signs the page off, --brand with Amir's portrait on
       the home page, --context without it elsewhere; and the PAPER material is
       defined for the human-evidence surfaces later phases dress.
   Azure stays the primary UI accent throughout; amber never competes with it.
   ========================================================================== */

/* — The seal's amber core (§C accent) — the vetting glyph reads in the signature
     accent while the label and person stay in the surface's own ink. One mark,
     one core, everywhere a full seal appears. */
.hib-seal--full{ --hib-seal-glyph-color:var(--hib-signature); }

/* Home narrative band — the single full seal on the page, on navy. A brighter
   amber holds up against the dark band, and the text takes the band's light ink;
   the chip is a faint amber wash so the mark reads as a signature, not a button. */
.hib-trustband__seal.hib-seal--full{
  --hib-seal-glyph-color:#E7A24A;
  --hib-seal-label-color:#F2F6FD;
  --hib-seal-meta-color:rgba(226,236,250,.82);
  --hib-seal-surface:rgba(231,162,74,.13);
  margin-block:var(--hib-space-5) var(--hib-space-2);
  border:1px solid rgba(231,162,74,.28);
}
/* Mobile (the stacked band, where the figures read centred): centre the seal's two
   lines geometrically within the FULL card — not just the space beside the icon. A
   three-column grid [icon | centred text | mirror spacer the icon's width] keeps the
   amber glyph on the RTL leading edge while the text sits dead-centre. Hierarchy,
   height, colours, border, radius and icon size are all unchanged; desktop (>768,
   right-aligned) is untouched. */
@media (max-width:768px){
  .hib-trustband__seal.hib-seal--full{
    display:grid;
    grid-template-columns:var(--hib-trust-ic-size,30px) 1fr var(--hib-trust-ic-size,30px);
    align-items:center;
  }
  .hib-trustband__seal.hib-seal--full::after{ content:""; }
  .hib-trustband__seal.hib-seal--full .hib-seal__text{ align-items:center;text-align:center; }
}

/* — Approval badge (trust hierarchy B) — the compact per-card mark: an azure
     check-in-hexagon and the short attribution, subordinate to the name above
     it. Text carries the meaning (the glyph is aria-hidden), so nothing is
     colour- or icon-only, and the label clears AA on the white card. */
.hib-approval-badge{
  display:inline-flex;align-items:center;gap:6px;
  max-inline-size:100%;min-inline-size:0;
}
.hib-approval-badge__glyph{ display:inline-flex;flex:0 0 auto;color:var(--hib-primary); }
.hib-approval-badge__glyph svg{ width:16px;height:16px; } /* glyph ladder 16/18/20 (was 14 from markup attrs) */
.hib-approval-badge__label{
  font-family:var(--hib-font-ui);font-weight:600;letter-spacing:normal;
  font-size:var(--hib-label-m-size);line-height:1.25;color:var(--hib-text-secondary);
  min-inline-size:0;overflow-wrap:break-word;
}
/* It sits under the identity it belongs to, at the same offset the compact seal
   used to, so the card grammar is unchanged bar the mark itself. */
.hib-pro-card-v2__header .hib-approval-badge,
.hib-pro-home__id .hib-approval-badge{ margin-block-start:var(--hib-space-2); }

/* — Paper material (§C materials ×3) — testimony/evidence surface: warm paper
     with a hairline, for a review, a quoted line, the founder's word. Never body
     text or a UI card. Capped to ≤15% of a page in use; the ruled variant adds
     the notebook line for a longer quotation. */
.hib-paper{
  background-color:var(--hib-paper);
  color:var(--hib-paper-ink);
  border:1px solid var(--hib-paper-line);
  border-radius:var(--hib-radius-card);
}
.hib-paper--ruled{
  background-image:repeating-linear-gradient(var(--hib-paper) 0 calc(1.65rem - 1px),var(--hib-paper-line) calc(1.65rem - 1px) 1.65rem);
}

/* — Signature line (§C accent) — a short amber rule that closes a personal
     statement, drawn as if by hand. Utility for the surfaces that carry Amir's
     own words. */
.hib-signature-line{
  display:block;inline-size:56px;block-size:2px;border:0;margin:0;
  background:var(--hib-signature);border-radius:2px;
}

/* — Closer (§C) — the page's final conversion moment. Home (--brand) is now a
     CENTRED invitation on the navy closer card: no portrait (Amir's face is the
     hero's single moment), led by a restrained HIB hexagon mark and converting on
     the primary action. Centring, versus the start-aligned founder letter above,
     makes it read as the page's conclusion rather than a second founder band. */
.hib-closer--brand{ text-align:center; }
/* The home closer's texture is a drafted sheet rather than a dot field: a fine
   18px rule with a heavier line every sixth, masked so it is brightest at the
   top-right corner the card's own radial gradient is already lit from and all
   but gone in the opposite one. The grid reads as a plan drawn for the job,
   which is what the closer is asking the reader to commission. The dot field
   stays the shared `.hib-cta-surface__texture` default for any non-brand
   consumer. The slot (position, inset, layering) is the shared
   class's; only the drawing is overridden here. `background-size` is reset
   because the default tiles its dots at 18px, which would otherwise chop each
   line layer. */
.hib-closer--brand .hib-home-cta__dg{
  --hib-dg-fine:18px;
  --hib-dg-major:calc(var(--hib-dg-fine) * 6);
  background-image:
    repeating-linear-gradient(to left,   rgb(255 255 255 / .11)  0 1px, transparent 1px var(--hib-dg-major)),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .11)  0 1px, transparent 1px var(--hib-dg-major)),
    repeating-linear-gradient(to left,   rgb(255 255 255 / .055) 0 1px, transparent 1px var(--hib-dg-fine)),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .055) 0 1px, transparent 1px var(--hib-dg-fine));
  background-size:auto;
  opacity:1;
  -webkit-mask-image:radial-gradient(124% 132% at 88% -10%, #000 0%, rgb(0 0 0 / .12) 72%);
          mask-image:radial-gradient(124% 132% at 88% -10%, #000 0%, rgb(0 0 0 / .12) 72%);
}
/* The decorative hex mark is gone from this closer: 42px of icon plus 22px of
   margin bought nothing the title does not already do, and it was the single
   largest piece of the card's height. The decorative 26px title rule stays
   disabled here too: it stood in for a retired chip, and reinstating it would
   just be the same decoration again. */
.hib-closer--brand .hib-home-cta__title::before{ display:none; }
/* Compaction, scoped to THIS closer. Both remaining `.hib-home-cta` consumers
   (home, vision) now ride `--brand`. */
.hib-closer__body{ min-inline-size:0;max-inline-size:660px;margin-inline:auto; }
/* The closer is a SPREAD, not a stack: the closing statement holds the RTL
   start column, the way out holds the end column, and a hairline between them
   does the separating that a run of vertical margin used to. Reading and acting
   sit beside each other, which is why the card is short enough to end the page
   without a scroll of its own. Below 820px there is no second column to hold,
   so it collapses back to the centred stack. */
/* Block padding lands on a rhythm STEP (48), not on a value chosen by eye:
   `spacing-rhythm.spec.js` scans every `.hib-home-cta` and allows only
   48/64/96/112 at desktop. Inline padding is free to be optical. */
.hib-closer--brand{
  padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,48px);
  text-align:start;
}
.hib-closer--brand .hib-closer__body{
  max-inline-size:none;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"statement action" "lede action";
  column-gap:32px;row-gap:10px;
}
/* Placement only. The size is NOT this composition's to choose: the closer
   title is one of the three feature-title selectors that share
   `--hib-title-feature-size` (see the feature-title block at the end of this
   file), and `typography-system.spec.js` asserts all of them render one size.
   The split column is what makes that scale sit comfortably here. */
.hib-closer--brand .hib-home-cta__title{
  grid-area:statement;margin:0;max-width:none;text-wrap:balance;
}
/* Placement and measure only — the SIZE belongs to the lede role, exactly as
   the title's size belongs to the feature-title role above. Overriding it to
   `--hib-caption-size` put the page's closing sentence two rungs below every
   other section intro on the site and below the footer's own copyright line:
   50.4px of heading over 13px of explanation. The 36ch measure is what makes
   the lede rung sit in this column. `balance` rather than `pretty` because this
   is two lines of CTA copy, not prose: `pretty` only protects the last line and
   still left "מתאימים." alone under a full one, while `balance` evens both. */
.hib-closer--brand .hib-home-cta__lede{
  grid-area:lede;margin:0;max-width:36ch;
  color:var(--hib-on-dark-soft);text-wrap:balance;
}
.hib-closer--brand .hib-home-cta__acts{
  grid-area:action;flex-direction:column;gap:10px;justify-content:center;
  margin:0;padding-block-start:0;border-block-start:0;
  border-inline-start:1px solid rgb(255 255 255 / .14);
  padding-inline-start:26px;
}
@media (max-width:820px){
  .hib-closer--brand{ text-align:center; }
  .hib-closer--brand .hib-closer__body{
    max-inline-size:660px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"statement" "lede" "action";
  }
  .hib-closer--brand .hib-home-cta__title{ max-width:22ch;margin-inline:auto; }
  .hib-closer--brand .hib-home-cta__lede{ max-width:44ch;margin-inline:auto; }
  /* The hairline turns to face the other way, and 20px is a FLOOR, not a
     preference: the suite asserts the actions still breathe at 390
     (`marginBlockStart >= 20`). */
  .hib-closer--brand .hib-home-cta__acts{
    border-inline-start:0;padding-inline-start:0;
    margin-block-start:var(--hib-space-5);padding-block-start:12px;
    border-block-start:1px solid rgb(255 255 255 / .14);
  }
}
/* The valve sweep itself is the family's now (see SHARED CTA SURFACE — the
   registered property, the wash, the reduced-motion guard all live there).
   What stays HERE is this composition's own emphasis: the button fills its
   grid column, the resting ring reads as a held charge that tightens on
   approach, and the arrow — this closer's button is the one with a
   directional arrow — advances with the wash. */
.hib-closer--brand .hib-home-cta__btn{
  inline-size:100%;justify-content:center;
  box-shadow:0 0 0 8px rgb(255 255 255 / .13), 0 22px 44px -18px rgb(4 16 34 / .7);
}
.hib-closer--brand .hib-home-cta__btn svg{
  transition:translate var(--hib-duration-slow) var(--hib-ease-out-soft);
}
.hib-closer--brand .hib-home-cta__btn:hover,
.hib-closer--brand .hib-home-cta__btn:focus-visible{
  box-shadow:0 0 0 3px rgb(255 255 255 / .3), 0 26px 50px -16px rgb(4 16 34 / .78);
}
.hib-closer--brand .hib-home-cta__btn:hover svg,
.hib-closer--brand .hib-home-cta__btn:focus-visible svg{ translate:-5px 0; }
@media (prefers-reduced-motion: reduce){
  .hib-closer--brand .hib-home-cta__btn svg{ transition:none; }
}
/* Full width on a phone by RULE, not by label length — the old long label made
   the button span the row incidentally, and a shorter editorial label exposed
   that nothing actually guaranteed it. */
@media (max-width:600px){
  .hib-closer--brand .hib-home-cta__btn{ inline-size:100%;justify-content:center; }
}

/* Profile endorse (§C hierarchy C) — the single trust statement now carries the
   one "מה זה אומר?" explainer on the page (QA-06 reachability preserved after the
   sidebar seal was retired). A light link on the navy hero, wrapping below the
   sentence when the column is narrow. */
.hib-profile-hero__endorse{ flex-wrap:wrap; }
.hib-profile-hero__endorse-more{
  margin-inline-start:auto;flex:0 0 auto;
  font-family:var(--hib-font-ui);font-size:var(--hib-label-s-size);font-weight:600;letter-spacing:normal;
  color:var(--hib-primary-on-dark);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
.hib-profile-hero__endorse-more:hover{ color:var(--hib-dark-text); }
.hib-profile-hero__endorse-more:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:3px; }

/* =============================================================================
   R3 · THE UNIFIED PROFESSIONAL CARD (.hib-pro-card) — redesign programme
   Revised 3 · §D4.1 / §C hierarchy B / §H. One DOM for the home network preview
   and the directory results: media → header (name · badge · role · rating) →
   evidence → actions. The container chooses the layout — --preview is a compact
   grid card (home), --rows is a wide row (directory) — but the markup, the
   trust mark (the compact approval badge, once) and the reading order are
   identical. The face is decorative; the name heading identifies.
   ========================================================================== */

/* — Shared bones (both layouts) — */
.hib-pro-card__header{ display:flex;flex-direction:column;gap:2px;min-inline-size:0; }
.hib-pro-card__name{
  font-family:var(--hib-font-display);font-weight:900;letter-spacing:normal;
  color:var(--hib-text);line-height:var(--hib-card-title-lh);margin:0;font-size:var(--hib-card-title-size);
}
/* .hib-pro-card__role removed with the role line itself (B2.5). The card's
   second line is now .hib-pro-card__geo, styled at the end of this file. */
.hib-pro-card__header .hib-approval-badge{ margin-block-start:var(--hib-space-2); }
.hib-pro-card__rating{ display:flex;align-items:center;gap:6px;margin-block-start:5px;flex-wrap:wrap; }
.hib-pro-card__rating .hib-stars svg{ width:15px;height:15px; }
.hib-pro-card__rating-meta{ font-size:var(--hib-label-s-size);color:var(--hib-text-secondary);font-weight:600; }
.hib-pro-card__rating-num{ font-family:var(--hib-font-mono);font-weight:500;color:var(--hib-text);unicode-bidi:isolate; }
.hib-pro-card__initials{ font-family:var(--hib-font-hero);font-weight:900;color:var(--hib-primary);line-height:1;font-size:clamp(1.7rem,4vw,2.1rem); }
/* ≥44px touch targets on both actions (acceptance). The .hib-btn min-block-size
   floor already guarantees it; the card states the guarantee so it cannot slip. */
.hib-pro-card__footer .hib-btn{ min-block-size:44px; }

/* — PREVIEW form (home): the portrait IS the top half of the card, and the
     identity is read on it. The 96px thumbnail beside a name was the same
     composition as the directory row at a smaller size; on the home surface the
     face is what a visitor recognises first, so it carries the name, the
     approval mark and the geographic line over a veil in the brand's navy taken
     most of the way to black.
     Evidence and the two actions stay on white beneath, where facts belong.
     This resets the legacy large-media tile that the shared .hib-pros-grid
     rules impose. — */
.hib-pro-card--preview{
  display:grid;grid-template-rows:auto 1fr;
  background:var(--hib-surface);border:1px solid var(--hib-rule-soft);
  border-radius:var(--hib-radius-card);padding:0;overflow:hidden;height:100%;
  box-shadow:var(--hib-shadow-card);
  transition:border-color .2s var(--hib-ease),box-shadow .2s var(--hib-ease),transform .2s var(--hib-ease);
}
.hib-pro-card--preview:hover{ border-color:rgba(29,84,196,.22);box-shadow:var(--hib-shadow-card-hover);transform:translateY(-2px); }
.hib-pro-card--preview .hib-pro-card__portrait{
  position:relative;aspect-ratio:4 / 3;background:var(--hib-dark-bg);
}
/* The portraits are supplied by the professionals themselves, so the set arrives
   at whatever exposure and saturation a phone happened to pick. A light grade —
   saturation pulled in, contrast opened slightly — is what makes nine unrelated
   snapshots read as one row of cards rather than nine cameras. It is a grade,
   not a filter: at these amounts nobody's skin tone changes, and a photograph
   that was already well shot is essentially untouched. */
.hib-pro-card--preview .hib-pro-card__portrait img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:center 22%;display:block;
  filter:saturate(.92) contrast(1.06);
}
.hib-pro-card--preview .hib-pro-card__portrait--empty{
  display:flex;align-items:center;justify-content:center;
}
.hib-pro-card--preview .hib-pro-card__portrait--empty .hib-pro-card__initials{
  font-family:var(--hib-font-display);font-size:3rem;color:var(--hib-on-dark-faint);
}
/* The veil is TWO washes, and neither of them is a box behind the text.

   The GROUND is the bottom-to-top wash. Its colour is deep navy pushed most of
   the way to black (5,12,24 — the brand navy with the blue drained out of it),
   because a pale blue haze over a bright photograph reads as fog rather than as
   material: it lightens the picture without ever committing to a background.
   The ramp is held, not linear — ~.80 across the band the name actually
   occupies, then released quickly — so the name sits on ONE even tone instead
   of on a slope that gets weaker exactly where the text is. It is fully clear
   by 74%, so the face, cropped to sit in the upper part of the frame, is never
   touched by it.

   The EMPHASIS is a soft ellipse anchored at the bottom-right corner, where the
   name is. It is what keeps this from being a dark band with type on it: the
   corner the eye lands on in RTL carries a little more weight than the rest of
   the bottom edge, the way a photographer would burn one corner of a print. It
   is deliberately radial and deliberately corner-anchored rather than the
   full-height right-edge wash a linear gradient would give — a linear one dims
   the top-right of the frame too, which is picture, not caption.

   The two are balanced against each other on purpose. The ground alone is .80 —
   deliberately NOT the maximum, so the bottom edge does not read as a bar — and
   the ellipse takes the corner under the name to ≈.90. That ten-point delta is
   what the eye reads as burnt-in art direction; at the first tuning the ground
   sat at .84 and the corner at .91, and the emphasis simply disappeared into a
   band that was already dark everywhere. Worst case (a blown-out white
   photograph behind it) the name holds ≈14:1, so the guarantee does not depend
   on which portrait a professional uploaded, and a name long enough to wrap out
   toward the middle of the frame still clears ≈8:1 where the ellipse has fallen
   away.

   The short top scrim this rule used to carry is gone. It seated bright ceilings
   against the card's white edge, but with the overlay down to a single line it
   was the third wash on an image that now says one thing, and it worked against
   "do not make the whole frame uniformly dark". */
.hib-pro-card--preview .hib-pro-card__veil{
  position:absolute;inset:0;
  /* RTL: `start` is the right edge, so the name is anchored to the bottom-RIGHT
     of the frame and shrink-wraps to its own text rather than stretching across
     a width it does not use. `text-align:start` resolves to `right` in this
     document — logical, so it stays correct rather than merely looking correct. */
  display:grid;align-content:end;justify-items:start;text-align:start;
  /* The safe area: 20px of air on the two edges the name can reach, from the
     spacing scale rather than as a one-off number. */
  padding:var(--hib-space-5);
  background:
    radial-gradient(
      100% 74% at 100% 100%,
      rgba(5,12,24,.52) 0%,
      rgba(5,12,24,.18) 46%,
      rgba(5,12,24,0) 74%
    ),
    linear-gradient(
      to top,
      rgba(5,12,24,.80) 0%,
      rgba(5,12,24,.76) 11%,
      rgba(5,12,24,.52) 25%,
      rgba(5,12,24,.30) 38%,
      rgba(5,12,24,.11) 52%,
      rgba(5,12,24,0) 68%
    );
}
/* The name rejoins the card family's ONE title signature — the veil changes what
   the name sits on, not how big a card title is. The shadow is a hairline of
   separation for the edges of the glyphs, not a glow: it does the work on the
   rare photograph whose highlight lands directly behind a letter.

   `max-inline-size` is the collision guard. The name shrink-wraps, so on a phone
   a long name would otherwise run to the frame's edge and lose the safe area the
   veil just declared; capped, it wraps and the block grows upward instead. */
.hib-pro-card--preview .hib-pro-card__name{
  margin:0;font-family:var(--hib-font-display);
  font-size:var(--hib-card-title-size);line-height:var(--hib-card-title-lh);
  color:var(--hib-on-dark);min-inline-size:0;max-inline-size:100%;
  text-shadow:0 1px 2px rgba(3,9,20,.5);
}
.hib-pro-card--preview .hib-pro-card__body{
  display:grid;align-content:space-between;gap:var(--hib-space-4);
  padding:var(--hib-space-5);
}
/* The identity line that opens the body — where they work, and the mark that
   says the network stands behind them. A layout row and nothing else: no fill,
   no border, no radius, no pill. `baseline` rather than `center` because the
   glyph is 16px beside a 14px line, and centring 16 against 14 sits the mark a
   pixel high against the text it belongs to.

   The place itself is NOT restyled here. It inherits the shared
   `.hib-pro-card__geo` signature it already wears in the directory and on the
   profile, so the same fact reads at one weight across every surface; only the
   on-dark colour and text-shadow it needed over the photograph are gone, along
   with the top margin that assumed it followed a name.

   `nowrap` is the anti-orphan rule and it is load-bearing. A professional who
   covers five regions produces a place that wraps to two lines; with a wrapping
   row the mark was pushed onto a third line of its own, a lone glyph under the
   text — the same floating-mark problem this pass removed from the photograph,
   simply relocated one element down. Held on the row, the place wraps INSIDE its
   own box and the mark keeps a fixed position at the line's far end. */
.hib-pro-card--preview .hib-pro-card__locale{
  display:flex;align-items:baseline;flex-wrap:nowrap;gap:var(--hib-space-2);
  min-inline-size:0;
}
.hib-pro-card--preview .hib-pro-card__locale .hib-pro-card__geo{ margin:0;min-inline-size:0;flex:0 1 auto; }
.hib-pro-card--preview .hib-pro-card__locale .hib-approval-badge{ flex:0 0 auto;margin-block-start:0; }
.hib-pro-card--preview .hib-pro-card__evidence{ margin:0; }
/* The meta line — place + approval mark, rating, specialty — reads horizontally
   instead of as a stack of one-line rows, so the 3-up home grid spends its
   vertical budget on the portrait and the actions rather than on slack between
   forty characters of fact. See the note in template-parts/pro-card.php.

   Each fact sits in its own cell and the cells carry the separators, so the line
   wraps by whole facts: the mark never orphans and a fact never splits across
   the break. The separator is a hairline in the card's own rule colour and it is
   decoration only — every fact still reads as itself with the rule removed. */
.hib-pro-card--preview .hib-pro-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--hib-space-2) var(--hib-space-3);min-inline-size:0;
}
.hib-pro-card--preview .hib-pro-card__meta-cell{
  display:flex;align-items:center;gap:var(--hib-space-3);
  min-inline-size:0;flex:0 1 auto;
}
.hib-pro-card--preview .hib-pro-card__meta-cell + .hib-pro-card__meta-cell::before{
  content:"";flex:0 0 auto;inline-size:1px;align-self:stretch;
  background:var(--hib-rule-soft);
}
.hib-pro-card--preview .hib-pro-card__footer{ display:flex;flex-wrap:wrap;gap:var(--hib-space-3); }
.hib-pro-card--preview .hib-pro-card__footer .hib-btn{ flex:1 1 auto; }
/* The profile action carries the weight of the pair; the telephone keeps the
   content width its reveal was designed around (see the `a[data-hib-tel]` rule
   further down, which stays the owner of that button's growth). */
.hib-pro-card--preview .hib-pro-card__footer .hib-btn--primary{ flex:2 1 auto; }

/* — ROWS form (directory) rides the existing .hib-pros-grid--rows grid; the
     richer header (the role line and the star rating) simply grows row 1. The
     media, evidence and vertical action stack are placed by that grid already. — */
.hib-pros-grid--rows .hib-pro-card__rating .hib-stars svg{ width:14px;height:14px; }


/* ============================================================
   R5 · PROFILE — Stage 5 ("שלב 5 — פרופיל", §E3/§F/§G)
   Hero rating stars, the paper evidence surfaces (about + reviews), the
   review-form disclosure and the native <dialog> gallery lightbox. All R5
   styling lives here (hib-extra.css is served in full on both the dev and the
   HIB_USE_PURGED paths), so the PurgeCSS build stays byte-identical.
   ============================================================ */

/* — Hero rating: the full five-star row (§E3 "5 כוכבים") — amber signature on,
     a faint navy-azure off — inline with the score in the facts row (§B fix for
     the lone single-star glyph). — */
.hib-profile-hero__fact-stars{ display:inline-flex;align-items:center; }
.hib-profile-hero__fact-stars .hib-stars{ display:inline-flex;align-items:center;gap:1px;line-height:0; }
.hib-profile-hero__fact-stars .hib-star{ width:16px;height:16px;color:rgba(169,198,255,.30); }
.hib-profile-hero__fact-stars .hib-star.is-on{ color:var(--hib-rating-star); }

/* — "קצת עליי" on paper (§E3): the professional's own words as testimony, in the
     warm paper ink at a comfortable measure. — */
/* The measure guard belongs to the PROSE, not to the panel.
   With `max-width:70ch` on the card, the paper stopped 84px short of its own
   774px grid column — and because the column is start-aligned in RTL, all 84px
   collected on the inner edge. The declared 56px gutter therefore rendered as a
   140px trench, two and a half times the system value the spacing suite pins on
   `.hib-profile-layout`. That gap, not elevation or padding, is why the pair
   read as two unrelated objects rather than one composed section: they shared
   neither edge, and nothing about the distance between them looked chosen.

   The card now fills its column, so both surfaces share the grid's own edges
   and the gutter is the real 56px. The reading measure is protected where it
   actually matters, on the text. */
.hib-profile-about.hib-paper{ padding:clamp(var(--hib-space-5),3vw,var(--hib-space-7)); }
/* 64ch, not the 70ch the card used to carry. The cap now sits inside the
   padding rather than around it, so an unchanged number would have LENGTHENED
   the line (626px → 690px) as a side effect of widening the panel. This holds
   the prose at the measure it already read at. */
.hib-profile-about.hib-paper .hib-profile-about__text{ max-width:64ch; }
.hib-profile-about.hib-paper .hib-profile-about__title{ margin-block-start:0; }
/* NOT resized. This heading is a calibration sample for the site-wide standard
   H2 role (typography-system.spec.js: "standard headings keep the standard role
   across routes"), pinned there against the home FAQ, the add-professional gate
   and the vision letter — and its own comment in that spec reads "subordinate
   to the profile H1". The role was always right; what was wrong was the H1,
   which capped below it. Fixed at the H1, not here. */
.hib-profile-about.hib-paper .hib-profile-about__text,
.hib-profile-about.hib-paper .hib-profile-about__text p{ color:var(--hib-paper-ink); }

/* — Reviews on paper (§E3): each testimony sits on the paper material, its
     opening quote glyph in the amber signature (§C accent · "גרש ציטוט"), its
     stars already amber (R2). Scoped to the profile list. — */
.hib-profile-reviews__list .hib-review-card{
  background:var(--hib-paper);border-color:var(--hib-paper-line);color:var(--hib-paper-ink);
}
.hib-profile-reviews__list .hib-review-card::before{ color:var(--hib-signature);opacity:.22; }
.hib-profile-reviews__list .hib-review-card:hover{ border-color:rgba(184,116,26,.38); }
.hib-profile-reviews__list .hib-review-card__text{ color:var(--hib-paper-ink); }
.hib-profile-reviews__list .hib-review-card__name{ color:var(--hib-text-strong); }

/* — Review-form disclosure (§E3 "טופס disclosure"). The toggle ships hidden so a
     no-JS visitor still meets the whole form; when JS runs it appears, the body
     collapses, and the toggle carries the heading (the body <h3> is hidden so the
     same label is not stated twice). — */
/* The author `display` below beats the UA `[hidden]{display:none}`, so the guard
   is explicit — without it the toggle would show for a no-JS visitor as a dead
   control (the same progressive-enhancement trap the directory disclosure hit). */
.hib-review-form__toggle[hidden]{ display:none; }
.hib-review-form__toggle{
  display:inline-flex;align-items:center;gap:var(--hib-space-2);
  padding:var(--hib-space-3) var(--hib-space-5);
  font-family:var(--hib-font-ui);font-size:1rem;font-weight:600;color:var(--hib-primary);cursor:pointer;
  /* Radius is set once, further down, by the reviews-band rule (--hib-radius-l).
     The pill declared here never won and is removed rather than left to mislead. */
  background:#fff;border:1px solid var(--hib-paper-line);
  transition:border-color .2s var(--hib-ease),box-shadow .2s var(--hib-ease),background .2s var(--hib-ease);
}
.hib-review-form__toggle:hover{ border-color:var(--hib-primary);box-shadow:var(--hib-shadow-focus); }
.hib-review-form__toggle:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-review-form__toggle-ic{ display:inline-flex;transition:transform .25s var(--hib-ease); }
.hib-review-form__toggle-ic svg{ width:18px;height:18px; }
.hib-review-form__toggle[aria-expanded="true"]{ margin-block-end:var(--hib-space-5); }
.hib-review-form__toggle[aria-expanded="true"] .hib-review-form__toggle-ic{ transform:rotate(45deg); }
.hib-review-form__body[hidden]{ display:none; }
html.hib-js .hib-review-form__toggle:not([hidden]) ~ .hib-review-form__body .hib-review-form__title{ display:none; }
@media (prefers-reduced-motion:reduce){ .hib-review-form__toggle-ic{ transition:none; } }

/* — Gallery lightbox — premium centred native <dialog> built by hib-main.js
     (§E3 "+ <dialog>"; §G; correction pass). Fills the viewport so the image is
     always centred (never stranded in a corner), with edge nav controls, a
     counter, a thumbnail rail on wider screens, and clean broken-media handling. */
.hib-lightbox{
  padding:0;border:0;margin:0;
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  background:transparent;overflow:hidden;
  display:flex;flex-direction:column;
}
/* The author `display:flex` above outranks the UA `dialog:not([open])` rule, so
   restore the hidden-when-closed state explicitly (higher specificity). */
.hib-lightbox:not([open]){ display:none; }
.hib-lightbox::backdrop{ background:rgba(4,10,24,.9); }
.hib-lightbox__inner{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,44px);
}
.hib-lightbox__stage{
  margin:0;display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;
}
.hib-lightbox__img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--hib-radius-m);box-shadow:var(--hib-shadow-band);background:#0b1a30;
  transition:opacity .25s var(--hib-ease);
}
.hib-lightbox__stage.is-broken .hib-lightbox__img{ display:none; }
.hib-lightbox__stage.is-broken::after{
  content:"לא ניתן לטעון את התמונה";color:#cdd8ea;font-family:var(--hib-font-ui);font-size:var(--hib-body-s-size);
}
.hib-lightbox__close{
  position:absolute;inset-block-start:clamp(10px,2vw,18px);inset-inline-end:clamp(10px,2vw,18px);z-index:3;
  width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--hib-text-strong);box-shadow:var(--hib-shadow-l);
}
.hib-lightbox__close:hover{ background:#fff; }
.hib-lightbox__close:focus-visible{ outline:2px solid #fff;outline-offset:2px; }
.hib-lightbox__close svg{ width:22px;height:22px; }
.hib-lightbox__nav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;transition:background .2s var(--hib-ease);
}
.hib-lightbox__nav:hover{ background:rgba(255,255,255,.3); }
.hib-lightbox__nav:focus-visible{ outline:2px solid #fff;outline-offset:2px; }
.hib-lightbox__nav svg{ width:24px;height:24px; }
.hib-lightbox__nav--prev{ inset-inline-end:clamp(10px,2vw,22px); } /* RTL: previous sits on the right */
.hib-lightbox__nav--next{ inset-inline-start:clamp(10px,2vw,22px); } /* next sits on the left */
.hib-lightbox__counter{
  position:absolute;inset-block-end:clamp(10px,2vw,18px);inset-inline:0;margin-inline:auto;width:max-content;z-index:3;
  padding:5px 14px;border-radius:var(--hib-radius-pill);background:rgba(4,10,24,.6);color:#fff;
  font-family:var(--hib-font-mono);font-size:var(--hib-label-s-size);letter-spacing:normal;
  /* "current / total" is inherently LTR — force it so the RTL page doesn't
     render it reversed (e.g. "8 / 3" for the third of eight). */
  direction:ltr;unicode-bidi:isolate;
}
.hib-lightbox__rail{
  flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:10px clamp(12px,3vw,24px) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(4,10,24,.55);
}
.hib-lightbox__thumb{
  flex:0 0 auto;width:72px;height:54px;padding:0;overflow:hidden;cursor:pointer;
  border:2px solid transparent;border-radius:8px;background:#0b1a30;opacity:.6;
  transition:opacity .2s var(--hib-ease),border-color .2s var(--hib-ease);
}
.hib-lightbox__thumb img{ width:100%;height:100%;object-fit:cover;display:block; }
.hib-lightbox__thumb:hover{ opacity:.9; }
.hib-lightbox__thumb.is-active{ opacity:1;border-color:#fff; }
.hib-lightbox__thumb:focus-visible{ outline:2px solid #fff;outline-offset:2px; }
@media (max-width:560px){
  .hib-lightbox__rail{ display:none; }  /* mobile: image + counter + close + swipe lead */
  .hib-lightbox__nav{ width:42px;height:42px; }
}
@media (prefers-reduced-motion:reduce){
  .hib-lightbox__img,.hib-lightbox__nav,.hib-lightbox__thumb{ transition:none; }
}

/* — Reviews pagination (server-rendered; JS-enhanced). Wraps rather than
     overflowing on narrow widths; every control clears the 44px touch floor. — */
.hib-reviews-pager{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
  margin-block-start:var(--hib-space-7);
}
.hib-reviews-pager__pages{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px; }
.hib-reviews-pager__page,
.hib-reviews-pager__nav{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;
  border:1px solid var(--hib-border);border-radius:var(--hib-radius-s);
  background:#fff;color:var(--hib-text-strong);text-decoration:none;
  font-family:var(--hib-font-mono);font-size:var(--hib-label-m-size);letter-spacing:normal;
  transition:border-color .18s var(--hib-ease),background .18s var(--hib-ease),color .18s var(--hib-ease);
}
.hib-reviews-pager__page:hover,
.hib-reviews-pager__nav:not(.is-disabled):hover{ border-color:var(--hib-primary);color:var(--hib-primary); }
.hib-reviews-pager__page:focus-visible,
.hib-reviews-pager__nav:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
.hib-reviews-pager__page.is-current{ background:var(--hib-primary);border-color:var(--hib-primary);color:#fff;font-weight:700; }
.hib-reviews-pager__nav svg{ width:18px;height:18px; }
.hib-reviews-pager__nav.is-disabled{ opacity:.4;cursor:default; }
.hib-reviews-pager__gap{ display:inline-flex;align-items:flex-end;min-width:24px;justify-content:center;color:var(--hib-text-muted); }

/* — Review submission: post-accept confirmation + clean fade/collapse — */
.hib-review-form__confirm{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:var(--hib-radius-s);
  background:rgba(22,106,69,.08);border:1px solid rgba(22,106,69,.28);
  color:#15623F;font-weight:600;font-size:var(--hib-body-s-size);
}
.hib-review-form__confirm svg{ width:20px;height:20px;flex:none;color:#1B7A4E; }
.hib-review-form.is-collapsing{
  overflow:hidden;
  transition:max-height .45s var(--hib-ease),opacity .3s var(--hib-ease),
             padding .45s var(--hib-ease),margin .45s var(--hib-ease);
}
@media (prefers-reduced-motion:reduce){ .hib-review-form.is-collapsing{ transition:none; } }

/* ============================================================
   R5 · PROFILE — refinement pass C (§profile visual/structural)
   The reviews leave the two-column layout for a full-container
   social-proof band; the aggregate becomes a composed trust unit;
   review cards, the submission surface and surface separation are
   refined. All still in hib-extra.css (served whole on both paths).
   ============================================================ */

/* — FIX: the post-accept confirmation carries `hidden`, but its author
     `display:flex` (above) beat the UA `[hidden]{display:none}` — so an empty
     pale-green bar rendered on every profile (read as a stray progress bar).
     The guard restores the intended state: nothing until JS reveals it after a
     genuine server acceptance. (Same PE trap the lightbox/disclosure hit.) — */
.hib-review-form__confirm[hidden]{ display:none; }

/* — Full-width social-proof band. A block-level <section> background is already
     edge-to-edge, so the zone reads as its own material while the content stays
     inside the approved container width — no 100vw, no horizontal overflow. The
     band frames the warm testimony against a calm cool ground and marks the
     deliberate transition: professional information → social proof. — */
.hib-reviews-band{
  --hib-reviews-band-bg:   var(--hib-surface-soft);  /* 1B: band = tinted section, not a fourth soft blue */
  --hib-reviews-band-line: var(--hib-rule-soft);     /* 1B: internal rule joins the soft hairline role    */
  background: var(--hib-reviews-band-bg);
  border-block: 1px solid var(--hib-reviews-band-line);
  padding-block: clamp(40px, 4.5vw, 64px); /* standard section step (64) */
  margin-block-start: clamp(20px, 2.6vw, 36px);
}

/* ── The band with nothing in it ─────────────────────────────────────────────
   The populated band is sized for evidence: a trust panel, a two-column card
   grid, a distribution, a pager. With no approved review it holds one short
   invitation, and at the same generous step it read as the biggest statement
   on the page — a section whose entire content is that there is no content.
   The message is unchanged and stays exactly where it is in the journey; the
   band simply stops reserving room for cards that are not there. */
/* Steps DOWN the rhythm ladder rather than off it: 64 standard → 48 dense, the
   step the spacing package already reserves for a low-density section
   (spacing-rhythm.spec.js allows 48/64/96/112 only). An arbitrary 42 would have
   bought 6px and broken the ladder. */
.hib-reviews-band--empty{
  padding-block: clamp(32px, 3.4vw, 48px);
}
.hib-reviews-band--empty .hib-profile-reviews__header{
  margin-block-end: clamp(16px, 1.8vw, 22px);
}
/* Spacing only. I first tried dropping this card's surface entirely so the empty
   band would hold one object instead of two — and that was the same error as the
   contact card: `elevation-system.spec.js` pins `.hib-profile-reviews__empty` at
   e1, i.e. the empty state IS a card in this system, by assignment rather than by
   accident. The surface stays.

   What was actually wrong was its interior: a 44px inset sized for a section that
   had to carry weight, on a panel whose whole content is one line of heading and
   two of text. Tightening the inset takes the band from 542px to 486px without
   removing anything — the same glyph, the same heading, the same sentence, the
   same place in the journey — and on a sparse profile the professional's own
   content (520px) now outweighs the statement that he has no reviews yet. */
.hib-reviews-band--empty .hib-profile-reviews__empty{
  padding: clamp(20px, 2.4vw, 26px) 24px;
  gap: 8px;
  margin-block-end: clamp(20px, 2.4vw, 28px);
  /* Authority follows evidence. A populated section earns the full container
     because it fills it with a two-column card grid; an empty one holding a
     heading and two lines was claiming the same width for a fraction of the
     content — and it stacked a 1152px card above the 680px form, so the zone
     also read as two different measures with no shared edge.

     Both surfaces now share the form's column. The section keeps its heading,
     its message, its position and its pinned e1 surface; what it gives up is a
     width it had no content to justify. The absence of reviews is stated just
     as plainly, in a block that no longer outranks the professional's own
     evidence above it. */
  max-inline-size: 680px;
  margin-inline-end: 0;
}
.hib-reviews-band--empty .hib-profile-reviews__empty-icon{
  width: 40px; height: 40px;
}
.hib-reviews-band--empty .hib-profile-reviews__empty-icon svg{ width: 20px; height: 20px; }
.hib-reviews-band--empty .hib-profile-reviews__empty-title{ font-size: 1.15rem; }

/* Reviews anchor heading — the strongest body heading (social proof leads),
   but sized as an anchor, not a banner. */
/* Reviews anchor — the same standard section role as every other section
   heading on the page, kept at 900 because this band is the page's social-proof
   anchor and weight is where that emphasis belongs. It was on the H3 role, which
   left the single most important evidence block announcing itself more quietly
   than the specialty list above it once the body joined the site's scale. */
.hib-reviews-band .hib-profile-reviews__title{
  font-family: var(--hib-font-display);
  font-size: var(--hib-h2-size);
  font-weight: 900; line-height: var(--hib-h2-lh); letter-spacing: normal;
  color: var(--hib-text-strong); margin: 0;
}
.hib-reviews-band .hib-profile-reviews__subtext{
  margin: 8px 0 0; color: var(--hib-text-secondary);
  font-size: var(--hib-body-s-size); line-height: 1.5; opacity: 1;
}

/* Header stacks the heading over the composed trust panel (no base underline —
   the band frames it). */
.hib-reviews-band .hib-profile-reviews__header{
  display: block; border: 0; padding: 0;
  margin-block-end: clamp(26px, 3.2vw, 38px);
}
.hib-reviews-band .hib-profile-reviews__header-group{
  margin-block-end: clamp(18px, 2.2vw, 24px);
}

/* The trust unit — score, stars, count, approval status and (≥5) the
   distribution, composed as ONE scannable panel. */
.hib-profile-reviews__trust{
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.2vw, 28px);
  background: var(--hib-surface);
  border: 1px solid var(--hib-rule-soft);
  border-radius: var(--hib-radius-l);
  box-shadow: 0 14px 36px -24px rgba(11,37,70,.24);
}
/* With a distribution to show (≥5) the panel spans the row so the histogram has
   room; otherwise it hugs the score + approval status (no sparse stretched bar). */
.hib-profile-reviews__trust--dist{ display: flex; width: 100%; }
.hib-profile-reviews__trust-main{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 22px);
}
.hib-profile-reviews__score-block{ display: flex; align-items: center; gap: 14px; }
.hib-profile-reviews__score{
  font-family: var(--hib-font-hero); font-weight: 900;
  font-size: clamp(2.5rem, 4vw, 3.1rem); line-height: .85;
  color: var(--hib-text-strong); letter-spacing: normal;
}
.hib-profile-reviews__score-num{
  font-family: var(--hib-font-hero); font-weight: 900;
  font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: .9;
  color: var(--hib-primary); letter-spacing: normal;
}
.hib-profile-reviews__score-meta{ display: flex; flex-direction: column; gap: 4px; }
.hib-profile-reviews__trust .hib-profile-reviews__stars{
  display: inline-flex; align-items: center; gap: 2px; box-shadow: none; padding: 0; background: none; border: 0;
}
.hib-profile-reviews__trust .hib-profile-reviews__stars svg{
  width: 17px; height: 17px; color: var(--hib-rating-star);
}
.hib-profile-reviews__trust .hib-profile-reviews__count{
  font-size: var(--hib-label-m-size); color: var(--hib-text-secondary); opacity: 1; letter-spacing: normal;
}
.hib-profile-reviews__verified{
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding-inline-start: clamp(16px, 1.8vw, 22px);
  border-inline-start: 1px solid var(--hib-rule-soft);
  font-size: var(--hib-label-s-size); font-weight: 600; color: var(--hib-text-secondary); line-height: 1.35;
}
.hib-profile-reviews__verified svg{ width: 18px; height: 18px; flex: none; color: var(--hib-primary); }
/* distribution as the panel's trailing zone (only when ≥5) */
.hib-profile-reviews__trust .hib-rating-bars{
  margin: 0; margin-inline-start: auto; max-width: none;
  flex: 1 1 240px; min-width: 220px;
  padding-inline-start: clamp(16px, 1.8vw, 24px);
  border-inline-start: 1px solid var(--hib-rule-soft);
}
@media (max-width: 720px){
  .hib-profile-reviews__trust{ display: flex; width: 100%; align-items: stretch; }
  .hib-profile-reviews__trust-main{ width: 100%; }
  .hib-profile-reviews__verified{
    border-inline-start: 0; padding-inline-start: 0;
    padding-block-start: 14px; border-block-start: 1px solid var(--hib-rule-soft);
    width: 100%;
  }
  .hib-profile-reviews__trust .hib-rating-bars{
    margin-inline-start: 0; border-inline-start: 0; padding-inline-start: 0;
    padding-block-start: 14px; border-block-start: 1px solid var(--hib-rule-soft);
    flex-basis: 100%; width: 100%;
  }
}

/* Review grid — the approved balanced grid: exactly two per row on desktop,
   one on mobile. Natural heights (no forced equalisation). */
.hib-reviews-band .hib-profile-reviews__list{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  align-items: start;
}
@media (max-width: 720px){
  .hib-reviews-band .hib-profile-reviews__list{ grid-template-columns: 1fr; }
}

/* Review cards — calmer, more generous, credible. More internal air, a clear
   identity → date → stars → text rhythm, restrained lift, and a controlled text
   measure so the wider full-container cards never run too long. */
.hib-reviews-band .hib-review-card{
  padding: clamp(20px, 2vw, 27px);
  border-radius: var(--hib-radius-m);
  box-shadow: 0 12px 30px -22px rgba(11,37,70,.20);
}
.hib-reviews-band .hib-review-card__header{ gap: 12px; margin-bottom: 14px; }
/* Unnamed review: no monogram, so the name line leads and the quote carries the
   evidence. Without this the header keeps the avatar's leading gap and the text
   sits in a column that no longer has anything in it. */
.hib-reviews-band .hib-review-card--anon .hib-review-card__header{ gap: 0; }
.hib-reviews-band .hib-review-card--anon .hib-review-card__name{ color: var(--hib-text-secondary); font-weight: 600; }
.hib-reviews-band .hib-review-card__avatar{ width: 44px; height: 44px; font-size: var(--hib-body-s-size); }
.hib-reviews-band .hib-review-card__name{ font-size: var(--hib-body-s-size); }
.hib-reviews-band .hib-review-card__date{ font-size: var(--hib-micro-label-size); opacity: .9; }
.hib-reviews-band .hib-review-card__stars{ margin-bottom: 12px; }
.hib-reviews-band .hib-review-card__stars svg{ width: 15px; height: 15px; }
.hib-reviews-band .hib-review-card__text{
  font-size: var(--hib-body-s-size); line-height: 1.72; max-width: 60ch;
}
/* The amber signature quote glyph (§C "גרש ציטוט") — kept, but quieter and
   clear of the reviewer identity. */
.hib-reviews-band .hib-profile-reviews__list .hib-review-card::before{
  font-size: 3.2rem; top: 12px; inset-inline-end: 20px; opacity: .18;
}

/* Reviews pager — a touch more separation from the last card. */
.hib-reviews-band .hib-reviews-pager{ margin-block-start: clamp(28px, 3.2vw, 40px); }

/* Empty / no-review state — centred within the band. */
.hib-reviews-band .hib-profile-reviews__empty{ background: var(--hib-surface); border: 1px solid var(--hib-rule-soft); border-radius: var(--hib-radius-l); box-shadow: var(--hib-shadow-card); }

/* — Review-submission surface (§profile: deliberate submission block). The
     disclosure toggle becomes a full invitation bar (icon · title · sub-line) so
     the collapsed surface reads as an intentional prompt, never an empty or
     unfinished paper block. The whole form opens beneath it. — */
.hib-reviews-band .hib-review-form{ margin-block-start: clamp(28px, 3.4vw, 44px); border-radius: var(--hib-radius-m); }
/* A control ON the paper, not a second surface inside it. The white fill and
   its own border turned `.hib-review-form` (paper, bordered, rounded) into a
   card containing a card — the one nesting the rest of the page avoids. The
   paper wrapper is the surface; the toggle is the thing you press on it, so it
   drops its fill and keeps only the affordances a control needs (a hairline it
   can brighten on hover, a focus ring, a real 44px+ target). */
.hib-review-form__toggle{
  width: 100%; justify-content: flex-start; text-align: start;
  gap: 14px; padding: clamp(15px, 1.7vw, 19px) clamp(16px, 1.8vw, 22px);
  border-radius: var(--hib-radius-l);
  background: transparent;
  border-color: var(--hib-paper-line);
}
.hib-review-form__toggle:hover{
  background: rgba(255,255,255,.55);
  border-color: var(--hib-primary);
}
.hib-review-form__toggle-ic{
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hib-domain-soft); color: var(--hib-primary);
}
.hib-review-form__toggle-ic svg{ width: 20px; height: 20px; }
.hib-review-form__toggle-text{ display: flex; flex-direction: column; gap: 2px; text-align: start; }
.hib-review-form__toggle-title{ font-size: var(--hib-body-lede-size); font-weight: 700; color: var(--hib-primary); line-height: 1.2; }
.hib-review-form__toggle-sub{ font-size: var(--hib-label-s-size); font-weight: 400; color: var(--hib-text-secondary); line-height:1.45; }
.hib-review-form__toggle[aria-expanded="true"] .hib-review-form__toggle-sub{ display: none; }

/* — Surface separation (§profile: color & surface refinement). The warm paper
     surfaces and the cool page background share nearly the same lightness; a
     restrained shadow + a crisper hairline lift the paper off the page without
     heavy boxes or strong shadows. — */
.hib-profile-about.hib-paper{
  box-shadow: var(--hib-shadow-m);
  border-color: var(--hib-paper-line);
}

/* — Body hierarchy (§profile: improve body-page hierarchy). One consistent
     section-title tier for the pre-reviews sections — a clear scale rather than
     four slightly different sizes.

     The tier was already unified; what it was NOT was the site's. It ran on a
     private `clamp(1.3rem, 2vw, 1.6rem)` (25.6px at 1440) while every other
     HIB section heading — including `קצת עליי` on this very page, which the
     typography suite pins as a calibration sample for the standard role —
     renders at `--hib-h2-size` (41.6px). One page carrying two sizes for one
     semantic level is the definition of a local dialect, and a reader moving
     from the homepage to a profile met section headings at roughly half the
     authority they had a click earlier.

     It now consumes the global role instead of restating it. This was only
     available once the body left the narrowed two-column column: at ~774px a
     41.6px heading would have been overbearing, which is very likely why the
     private scale was introduced. At the full container it is simply the site's
     own heading, at the site's own size. No new token — the role already
     existed and the profile was the one surface not using it. — */
.hib-profile-gallery__title,
.hib-profile-reel__title,
.hib-profile-specialties__title,
.hib-profile-areas__title,
.hib-profile-guides__title{
  font-family: var(--hib-font-display);
  font-size: var(--hib-h2-size);
  font-weight: var(--hib-heading-weight-section); line-height: var(--hib-h2-lh); letter-spacing: normal;
  color: var(--hib-text-strong);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.hib-profile-guides__title{ margin: 0; }

/* — Mobile: reserve clearance for the fixed call bar so the footer's last row is
     never clipped behind it, and pagination/review controls (all mid-page) stay
     clear too (§profile: mobile action bar must not cover controls / no clipped
     content). The bar itself is the approved R5 restore — unchanged. — */
@media (max-width: 767px){
  body.single-plumbers{ padding-block-end: 76px; }
}

/* ===========================================================================
   R8 · Add-professional media step (§E5) + North/South exclusion + review.
   All in hib-extra.css (served whole); the upload* classes are purgecss-
   safelisted for the design-system build too. RTL, AA, reduced-motion aware.
   ======================================================================== */

/* --- North/South mutual-exclusion note + disabled branch --- */
.hib-areas-ns{
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--hib-radius-m);
  background: var(--hib-surface-soft, #f4f1ea);
  border: 1px solid var(--hib-border);
  color: var(--hib-text-secondary);
  font-size: var(--hib-label-s-size);
  line-height: 1.5;
}
.hib-area-section.is-disabled{ opacity: .55; }
.hib-area-section.is-disabled .hib-area-section__toggle,
.hib-area-section.is-disabled .hib-area-section__select,
.hib-area-section.is-disabled .hib-area-city{
  cursor: not-allowed;
}

/* --- Upload container --- */
/* Google Places suggestions on the add-professional address field (issue 2).
   The provider appends `.pac-container` to <body>; keep it above the wizard and
   right-aligned so Hebrew addresses read correctly. hib-extra.css is not purged,
   so these provider-generated classes need no PurgeCSS safelist. */
.pac-container{ z-index:100000;direction:rtl;text-align:right;border-radius:10px;box-shadow:var(--hib-shadow-lg,0 12px 32px -12px rgba(11,37,70,.28));font-family:inherit;margin-block-start:2px; }
.pac-item{ direction:rtl;text-align:right;padding:8px 12px;line-height:1.5;cursor:pointer; }
.pac-item:hover,.pac-item-selected{ background:var(--hib-bg,#f5f7fb); }
.pac-icon{ margin:0 0 0 8px; }
@media (prefers-reduced-motion:reduce){ .pac-container{ transition:none; } }

.hib-upload{ margin-top: 6px; }
.hib-upload__lead{
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--hib-radius-m);
  background: var(--hib-surface-soft, #f4f1ea);
  border: 1px solid var(--hib-border);
  color: var(--hib-text-secondary);
  font-size: var(--hib-body-s-size);
  line-height: 1.65;
}
.hib-upload__disabled{
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 14px 16px;
  border-radius: var(--hib-radius-m);
  background: var(--hib-surface-soft, #f4f1ea);
  border: 1px solid var(--hib-border);
  color: var(--hib-text-secondary); font-size: var(--hib-body-s-size); line-height: 1.6;
}
.hib-upload__disabled svg{ flex: none; width: 22px; height: 22px; color: var(--hib-text-muted); margin-top: 2px; }

.hib-upload__section{ margin-bottom: 26px; }
.hib-upload__section:last-of-type{ margin-bottom: 8px; }
.hib-upload__head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.hib-upload__label{ margin: 0; font-size: var(--hib-body-lede-size); font-weight: 600; color: var(--hib-text); }
.hib-upload__count{
  direction: ltr; unicode-bidi: isolate;
  font-size: var(--hib-label-s-size); font-weight: 600; color: var(--hib-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hib-upload__hint{ margin: 0 0 12px; font-size: var(--hib-label-s-size); color: var(--hib-text-muted); line-height: 1.55; }

/* --- Drop zone (label wraps a focusable, visually-hidden file input) --- */
.hib-upload__drop{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 22px 18px;
  border: 1.5px dashed var(--hib-border-strong, var(--hib-border));
  border-radius: var(--hib-radius-l);
  background: var(--hib-surface);
  color: var(--hib-text-secondary);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.hib-upload__drop:hover{ border-color: var(--hib-primary); color: var(--hib-primary); }
.hib-upload__drop.is-drag{ border-color: var(--hib-primary); background: var(--hib-domain-soft, rgba(8, 30, 58, .04)); color: var(--hib-primary); }
.hib-upload__drop:focus-within{ outline: 3px solid var(--hib-primary); outline-offset: 2px; }
.hib-upload__drop-ic{ width: 30px; height: 30px; color: var(--hib-primary); }
.hib-upload__cta{ font-size: var(--hib-body-s-size); font-weight: 600; }
.hib-upload__input{
  /* Focusable but visually hidden — the drop zone is the visible affordance. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Tiles --- */
.hib-upload__list{
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px;
}
.hib-upload__list:empty{ display: none; }
.hib-upload__list[data-list="primary"]{ grid-template-columns: repeat(auto-fill, minmax(140px, 160px)); }
.hib-upload__tile{
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--hib-border);
  border-radius: var(--hib-radius-m);
  overflow: hidden; background: var(--hib-surface);
}
.hib-upload__thumb{
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--hib-surface-soft, #eee);
}
.hib-upload__thumb--empty{ display: block; }
.hib-upload__tile.is-error{ border-color: #c0392b; }
.hib-upload__tile.is-error .hib-upload__thumb{ opacity: .35; filter: grayscale(1); }
.hib-upload__tile.is-uploading .hib-upload__thumb,
.hib-upload__tile.is-reconciling .hib-upload__thumb,
.hib-upload__tile.is-removing .hib-upload__thumb{ opacity: .55; }
.hib-upload__tile-state{
  display: block; padding: 6px 8px; font-size: .78rem; line-height: 1.35;
  color: var(--hib-text-secondary); background: var(--hib-surface);
}
.hib-upload__tile-state--err{ color: #c0392b; font-weight: 600; }
.hib-upload__tile-actions{ display: flex; gap: 6px; padding: 0 8px 8px; flex-wrap: wrap; }
.hib-upload__btn{
  min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--hib-border); border-radius: var(--hib-radius-s);
  background: var(--hib-surface); color: var(--hib-text-secondary);
  font-size: .78rem; font-weight: 600; cursor: pointer;
}
.hib-upload__btn:hover{ border-color: var(--hib-primary); color: var(--hib-primary); }
.hib-upload__btn--x:hover{ border-color: #c0392b; color: #c0392b; }
.hib-upload__btn:focus-visible{ outline: 3px solid var(--hib-primary); outline-offset: 2px; }
.hib-upload__spin{
  position: absolute; top: 8px; inset-inline-start: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: hib-upload-spin .8s linear infinite;
}
@keyframes hib-upload-spin{ to{ transform: rotate(360deg); } }
.hib-upload__note{ margin: 12px 0 0; min-height: 1.2em; font-size: var(--hib-label-s-size); color: var(--hib-text-secondary); }

/* Touch targets on mobile: remove/retry ≥44px. */
@media (max-width: 767px){
  .hib-upload__btn{ min-height: 44px; padding: 8px 14px; }
}

/* --- Step-5 server-authoritative review --- */
.hib-review-media{ margin-top: 14px; }
.hib-review-media__thumbs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hib-review-media__item{ position: relative; margin: 0; width: 72px; }
.hib-review-media__item img{ display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--hib-radius-s); border: 1px solid var(--hib-border); }
.hib-review-media__item.is-primary img{ border-color: var(--hib-primary); border-width: 2px; }
.hib-review-media__item figcaption{
  position: absolute; inset-block-end: 4px; inset-inline-start: 4px;
  padding: 1px 6px; border-radius: var(--hib-radius-pill);
  background: var(--hib-primary); color: #fff; font-size: .62rem; font-weight: 700;
}
.hib-review-media__note{
  margin: 0 0 10px; padding: 8px 12px;
  border-radius: var(--hib-radius-m); background: var(--hib-surface-soft, #f4f1ea);
  border: 1px solid var(--hib-border); color: var(--hib-text-secondary); font-size: .82rem;
}

/* "המשך" dimmed while media is unresolved — still clickable so the click can
   surface the step-alert + move focus (never a dead pointer-events:none). */
.hib-btn--blocked{ opacity: .6; }

@media (prefers-reduced-motion: reduce){
  .hib-upload__spin{ animation: none; border-top-color: rgba(255,255,255,.5); }
}

/* ── Category icon: custom Media-Library SVG ───────────────────────────────
   hib_category_icon() renders a term's uploaded SVG (`cat_icon_svg`) as an
   <img class="hib-cat-icon-img"> instead of the legacy inline glyph. These
   rules mirror each wrapper's inline-SVG box exactly, so a selected artwork
   occupies the same space at every consumer — no layout shift. object-fit
   contains the artwork within that box regardless of its intrinsic ratio.
   The legacy inline icons are untouched. */
.hib-cat-icon-img{ display:block; object-fit:contain; }
.hib-guides-empty__icon .hib-cat-icon-img{ width:30px;height:30px; }
.hib-guide-entry__thumb-icon .hib-cat-icon-img{ width:46px;height:46px; }
.hib-video-watch__cat-icon .hib-cat-icon-img{ width:17px;height:17px; }
.hib-video-player__fallback-icon .hib-cat-icon-img{ width:100%;height:100%; }

/* ============================================================
   Telephone reveal (homepage preview card + professional profile)

   On a pointer-and-hover device the first activation shows the number and the
   second dials it; touch, pen and narrow windows dial straight away. The number
   is server-rendered in the markup and in the href — this is a UX decision, not
   information hiding.

   The two layers share ONE grid cell, so the anchor's intrinsic width is
   max(label, number) from the first paint. That is what keeps the button from
   changing width and the card from changing height when the number appears, and
   it is the only approach that holds for a flex child — which all five of these
   call-to-action anchors are.

   `[data-hib-tel]` is emitted only by the home preview branch of
   template-parts/pro-card.php and by single-plumbers.php. The directory row
   carries neither the attribute nor these nodes.
   ============================================================ */
.hib-tel__swap{ display:grid;align-items:center;justify-items:center; }
.hib-tel__swap > *{ grid-area:1/1; }
/* Hidden rather than merely transparent: an unrevealed number must not be
   readable by a screen reader either — it is the same control, said twice. */
/* Both offsets are NEGATIVE on purpose. A transform still contributes to a box's
   scrollable overflow, and overflow past the BOTTOM edge counts towards
   scrollHeight — a resting `translateY(2px)` made every one of these buttons
   report 2px of clipped content at 200% text zoom. Overflow past the top edge is
   unreachable and is not counted, so the settle reads the same and the box stays
   honest about its own content. */
.hib-tel__num{ opacity:0;visibility:hidden;transform:translateY(-2px);
  transition:opacity 160ms var(--hib-ease),transform 160ms var(--hib-ease),visibility 0s linear 160ms; }
.hib-tel__label{ opacity:1;visibility:visible;
  transition:opacity 160ms var(--hib-ease),transform 160ms var(--hib-ease),visibility 0s linear 0s; }
html.hib-js a[data-hib-tel][data-revealed] .hib-tel__label{ opacity:0;visibility:hidden;transform:translateY(-2px);
  transition:opacity 160ms var(--hib-ease),transform 160ms var(--hib-ease),visibility 0s linear 160ms; }
html.hib-js a[data-hib-tel][data-revealed] .hib-tel__num{ opacity:1;visibility:visible;transform:none;
  transition:opacity 160ms var(--hib-ease),transform 160ms var(--hib-ease),visibility 0s linear 0s; }
@media (prefers-reduced-motion:reduce){
  .hib-tel__num,
  .hib-tel__label,
  html.hib-js a[data-hib-tel][data-revealed] .hib-tel__label,
  html.hib-js a[data-hib-tel][data-revealed] .hib-tel__num{ transition:none;transform:none; }
}

/* ============================================================
   FAQ — two-column layout, and a collapse that only exists once the
   controller is running.

   Both halves of this block layer over section 21 of the design system, which is
   never edited; this stylesheet loads second, so the same-specificity defaults
   below replace the ones stated there.

   The important inversion: the AUTHORING STATE IS EXPANDED. `.hib-faq` defaults
   to `auto 1fr` with a visible body, and every collapse selector is gated behind
   `html.hib-js .hib-faq-list.is-enhanced` — a class the controller adds only
   after its handlers are attached. Without a script, or with one that failed, the
   answers are readable and `aria-expanded="true"` is the truth.
   ============================================================ */
.hib-faq-layout{
  /* The two columns are named so the gutter rule below can be drawn exactly
     between them instead of guessed at. */
  --hib-faq-rail:20rem;
  --hib-faq-gutter:clamp(var(--hib-space-7),3.2vw,var(--hib-space-9));
  display:grid;
  grid-template-columns:minmax(0,var(--hib-faq-rail)) minmax(0,1fr);
  column-gap:var(--hib-faq-gutter);
  align-items:start;
}
/* The heading column is the grid's first cell, so its own bottom margin would
   only push the two columns out of alignment. */
.hib-faq-layout .hib-section-header{ margin-bottom:0; }
.hib-faq-layout .hib-faq-list{ max-width:none;margin:0; }
.hib-faq-layout .hib-faq__body{ max-width:66ch; }
/* 1023px is the site-wide desktop→tablet collapse boundary — below it there is
   no width to give a second column, so the layout drops to one. */
@media (max-width:1023px){
  .hib-faq-layout{ grid-template-columns:1fr;row-gap:clamp(var(--hib-space-6),3vw,var(--hib-space-7)); }
}

/* Default (no JS, or JS that has not finished): open, readable, announced. */
.hib-faq{ grid-template-rows:auto 1fr; }
.hib-faq__body{ opacity:1;visibility:visible; }

/* Enhanced. `is-ready` arrives a frame later, so the initial collapse is a state,
   not an animation the reader watches run. */
html.hib-js .hib-faq-list.is-enhanced .hib-faq{ transition:none; }
html.hib-js .hib-faq-list.is-enhanced.is-ready .hib-faq{
  transition:grid-template-rows 280ms cubic-bezier(.32,.72,0,1),
             border-color 280ms var(--hib-ease),
             box-shadow 280ms var(--hib-ease);
}
html.hib-js .hib-faq-list.is-enhanced .hib-faq:not(.is-open){ grid-template-rows:auto 0fr; }
/* `visibility:hidden` delivers all three collapsed conditions at once: not seen,
   not in the accessibility tree, and not reachable by sequential focus. The
   padding goes with it — a 0fr row still reserves its item's padding box, which
   is why a collapsed item measured 84.5px against a 62.5px trigger. */
html.hib-js .hib-faq-list.is-enhanced .hib-faq:not(.is-open) .hib-faq__body{
  opacity:0;visibility:hidden;padding-block-end:0;
}
html.hib-js .hib-faq-list.is-enhanced.is-ready .hib-faq__body{
  transition:opacity 200ms ease,padding-block-end 280ms cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){
  html.hib-js .hib-faq-list.is-enhanced.is-ready .hib-faq{
    transition:border-color 280ms var(--hib-ease),box-shadow 280ms var(--hib-ease);
  }
}

/* The row is the target and `.hib-faq` clips to its radius, so an outside ring is
   cut off on all four sides. Drawn inside instead, on the same curve. */
.hib-faq__trigger:focus-visible{
  outline:2px solid var(--hib-accent);
  outline-offset:-2px;
}

/* ============================================================
   FAQ — one editorial surface (homepage two-column layout only;
   every rule scoped through .hib-faq-layout so the domain pages'
   own FAQ treatment is untouched).
   Six separate white cards read as six form controls. The list
   becomes ONE surface — outer border, outer radius, hairline
   separators — so it reads as a curated Q&A list. The collapse
   mechanics, ARIA and the no-JS open state are unchanged.
   ============================================================ */
/* The composition is a two-column editorial field, and the gutter rule is what
   says so: one hairline, full height of the layout, drawn down the middle of
   the gap. It gives the rail a right-hand edge, so the space beneath the lede
   reads as a deliberate margin instead of a column that ran out of content, and
   it binds the introduction to the questions it introduces. Desktop only — once
   the columns stack there is no gutter to rule. The list sits above it
   (z-index:1), so the line stops at the accordion rather than crossing it. */
.hib-faq-layout{ position:relative; }
@media (min-width:1024px){
  .hib-faq-layout::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset-block:0;
    inset-inline-start:calc(var(--hib-faq-rail) + var(--hib-faq-gutter) / 2);
    inline-size:1px;
    /* The section sits on the soft tint, where the hairline token disappears
       into the background; the boundary token is the one that still reads as a
       line there without becoming a divider that competes with the card. */
    background:var(--hib-border);
  }
}
.hib-faq-layout .hib-faq-list{
  gap:0;
  background:var(--hib-surface);
  border:1px solid var(--hib-border);
  border-radius:var(--hib-radius-l);
  box-shadow:var(--hib-shadow-card);
  overflow:hidden;
  position:relative;z-index:1; /* above the rail's decorative geometry */
}
.hib-faq-layout .hib-faq{ border:0;border-radius:0;background:none; }
/* The separator is the composition now; rows keep only a hairline between
   them, and neither hover nor open may repaint it as an accent border. */
.hib-faq-layout .hib-faq + .hib-faq{ border-block-start:1px solid var(--hib-rule-soft); }
.hib-faq-layout .hib-faq:hover,
.hib-faq-layout .hib-faq.is-open{ border-color:var(--hib-rule-soft);box-shadow:none; }

/* — The editorial rail: heading, lede, then the brand geometry beneath. — */
.hib-faq-layout .hib-section-header__desc{ max-width:30ch; }
/* One oversized brand hexagon, genuinely OCCLUDED: it sits beneath the
   accordion surface (the list carries z-index:1 and a real background), so its
   far side visibly continues BEHIND the questions — a reason to be partial,
   instead of a shape floating in space. Absolute and pointer-transparent, so it
   adds no height, shifts nothing and blocks nothing; the azure outline stays
   far beneath the text in contrast. The gesture crosses the gutter toward the
   accordion — rightwards entry, leftwards continuation, the RTL reading path.

   The crop belongs to the ornament, not to the section. This span IS the crop
   window: bounded by the layout's own bottom (`inset-block-end:0`), clipping
   whatever it contains, while the hexagon inside keeps its full drawn size.
   The layout used to carry `overflow:clip` for this, which meant one rule
   governed both the ornament and every question in the accordion — at large
   text sizes that is a content-clipping trap waiting for the first answer that
   grows past the box. Decorative cropping now lives on the decorative element
   alone; content can no longer be cut by it. */
.hib-faq-hex{
  position:absolute;z-index:0;pointer-events:none;
  /* Seated IN the rail, with its leading edge slipping behind the accordion:
     most of the shape reads inside the column it belongs to, and the occlusion
     is what makes it partial. Anchored to the rail's own width so it keeps that
     relationship at every viewport instead of to a fixed offset — at the old
     16rem the shape had drifted almost entirely into the gutter, where it read
     as a stray diagonal rather than as the brand's geometry. */
  inset-inline-start:calc(var(--hib-faq-rail) - 11rem);inset-block-start:9rem;inset-block-end:0;
  inline-size:14.5rem;
  overflow:clip;
  color:var(--hib-primary);opacity:.12;
}
.hib-faq-hex svg{ inline-size:100%;block-size:14.5rem;display:block; }
@media (max-width:1023px){
  /* Stacked: the rail is gone, and a background hexagon under the accordion
     would only be noise between the heading and its questions. */
  .hib-faq-hex{ display:none; }
}

/* ============================================================
   Home network-preview card polish — every rule scoped to `--preview` or to a
   section that contains one, because `template-parts/pro-card.php`,
   `hib_evidence_row()` and `.hib-pros-grid` are all shared with the directory,
   and none of them carries a flag that tells the two surfaces apart.
   ============================================================ */

/* One heading→content rhythm across the page: every section header meets its
   content at the 40 step (--hib-space-8). Measured before this pass the page
   ran 64 (steps band) / 48 (professionals) / 24 (junction) — three values and
   no rule. The junction keeps 24 as the one justified exception: its heading
   introduces an immediate decision, and that tightening was an approved
   decision of its own. */
.hib-section:has(.hib-pros-grid--preview) .hib-section-header{
  margin-bottom:var(--hib-space-8);
}
/* The count link sat baseline-low against a two-line description, floating
   between its two lines instead of belonging to the heading. It reads as the
   heading's companion, so it starts where the heading starts. */
@media (min-width:601px){
  .hib-section:has(.hib-pros-grid--preview) .hib-section-header__action{
    align-self:flex-start;margin-block-start:6px;margin-block-end:0;
  }
}


/* Row equalization from the first two-column breakpoint up. On mobile the grid
   is a single column, where equal rows mean nothing and would only inflate the
   shortest card to the tallest one's height. */
@media (min-width:768px){
  .hib-pros-grid--preview{ grid-auto-rows:1fr; }
}

/* (The two evidence overrides that lived here — key one step up, value opened to
   1.45 — were right, so they became the component's signature rather than the
   homepage's private version of it. See `.hib-evidence__k` / `__v`.) */

/* The telephone action no longer grows to match the profile link: its width is
   already reserved by the reveal's grid stack (max(label, number)), so letting
   it grow on top of that only takes width from the primary action. */
.hib-pro-card--preview .hib-pro-card__footer a[data-hib-tel]{ flex:0 1 auto; }

/* …except on the row it has to itself. Measured on this card's own labels, the
   pair stops sharing a row at 387px and the telephone drops below the profile
   link; at content width it then sat at half the row against the reading edge,
   reading as a mistake rather than a choice. On that wrapped row alone it takes
   the whole width, so the two actions stack as one pair — the 12px footer gap
   keeps the rhythm and .hib-btn's own centring keeps icon and label in place. */
@media (max-width:387px){
  .hib-pro-card--preview .hib-pro-card__footer a[data-hib-tel]{ flex:1 1 100%; }
}

/* ============================================================
   GUIDE TEMPLATE REFINEMENT — /guide/* (single-video.php)
   Hero  · the category hero mirrored (.hib-cat-hero--guide)
   Body  · media figure + summary inside the article
   Cards · related-guide cards (guide page only — the category
           archive keeps its own .hib-cat-card treatment)
   All values are existing tokens; logical properties only.
   ============================================================ */

/* — Hero: .hib-cat-hero, mirrored on the guide page. Same band, hairline,
   crumbs, type and decorative artwork layer; only the content differs (the
   guide title alone), so the H1 gets the measure a title needs. — */
.hib-cat-hero--guide .hib-cat-hero__title{ max-inline-size:24ch; }

/* — Opening composition: metadata → teaser (editorial lead) → summary, with
   the vertical video on the reading edge beside them. DOM order (text before
   video) is the mobile stacking order; the desktop grid places the video
   first (inline-start = RIGHT in RTL). Two columns only where the text keeps
   a readable measure: on the full article grid (≥960px) and again once the
   aside has collapsed and the body runs full-width (720–880px); in the
   squeezed window between, and on phones, a clean stack. */
.hib-guide-open{
  display:grid;grid-template-columns:1fr;
  gap:clamp(var(--hib-space-6),3.9vw,var(--hib-space-10));
}
@media (min-width:720px) and (max-width:880px), (min-width:960px){
  .hib-guide-open{
    grid-template-columns:320px minmax(0,1fr);
    gap:clamp(var(--hib-space-8),4.4vw,var(--hib-space-11));
    align-items:start;
  }
  .hib-guide-open > .hib-guide-media{ grid-column:1;grid-row:1; }
  .hib-guide-open__text{ grid-column:2;grid-row:1;min-width:0; }
}
/* Secondary metadata label — never a title voice. */
.hib-guide-open__meta{
  margin:0 0 var(--hib-space-3);
  font-size:var(--hib-label-s-size);font-weight:700;letter-spacing:normal;
  color:var(--hib-text-muted);
}
/* The teaser: the opening's editorial lead — prominent, clearly beneath the
   hero H1 in rank, and a paragraph (no heading, no TOC entry). */
.hib-guide-open__teaser{
  margin:0 0 var(--hib-space-4);
  font-family:var(--hib-font-ui);
  font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.5;font-weight:600;
  letter-spacing:normal;color:var(--hib-text);
  max-inline-size:44ch;text-wrap:pretty;
}
/* The summary: comfortable body voice directly beneath the teaser. */
.hib-guide-article__summary{
  margin:0;
  font-size:1.0625rem;line-height:1.62;
  color:var(--hib-text-secondary);
  max-inline-size:44ch;
}
/* Body content that follows the opening gets its breathing room only when it
   exists — no empty wrapper, no reserved gap on video-only guides. */
.hib-guide-open + .hib-prose{ margin-block-start:clamp(var(--hib-space-7),4vw,var(--hib-space-9)); }

/* — Item 2 · Media figure: the player's new home inside the article —
   Same deferred facade, a box that reserves the CLIP's shape (no CLS), framed and
   centred like a held phone. Resets the generic prose-img treatment.

   `--hib-video-ar` is set on `.hib-guide-open` by the template when the guide's
   real ratio is known, and inherits from there to this frame and to the provider
   player that replaces the facade on click — which is why the swap moves nothing.
   The fallback value is the portrait box the whole imported library is, so a guide
   whose ratio is not known renders exactly as it did before this property existed. */
.hib-guide-media{
  margin:0 auto;
  inline-size:min(100%,var(--hib-video-cap,360px));   /* mobile: centred, ratio preserved */
}
@media (min-width:720px) and (max-width:880px), (min-width:960px){
  .hib-guide-open > .hib-guide-media{ margin:0;inline-size:100%; } /* fills its 320px grid column */
}
.hib-guide-media__frame{
  position:relative;aspect-ratio:var(--hib-video-ar,9 / 16);
  border-radius:var(--hib-radius-l);overflow:hidden;
  border:1px solid var(--hib-border);
  box-shadow:var(--hib-shadow-m);
  background:linear-gradient(180deg,var(--hib-dark-raised) 0%,var(--hib-dark-shell) 100%);
}

/* — The opening when the clip is NOT portrait —
   The two-column opening exists to stand a phone-shaped clip beside its text: the
   320px rail IS the portrait composition. A landscape clip in that rail would be
   320x180 — the right ratio and the wrong object — so a non-portrait clip takes
   the reading column instead and the text follows beneath it. Same figure, same
   frame, same spacing scale; only the placement and the width cap change, and a
   portrait guide (which emits no orientation class) never reaches these rules. */
.hib-guide-open.hib-video--landscape{ --hib-video-cap:640px; }
.hib-guide-open.hib-video--square{ --hib-video-cap:460px; }
@media (min-width:720px) and (max-width:880px), (min-width:960px){
  .hib-guide-open.hib-video--landscape,
  .hib-guide-open.hib-video--square{ grid-template-columns:minmax(0,1fr); }
  .hib-guide-open.hib-video--landscape > .hib-guide-media,
  .hib-guide-open.hib-video--square > .hib-guide-media{
    grid-column:1;grid-row:1;margin:0;
    inline-size:min(100%,var(--hib-video-cap,360px));
  }
  .hib-guide-open.hib-video--landscape > .hib-guide-open__text,
  .hib-guide-open.hib-video--square > .hib-guide-open__text{ grid-column:1;grid-row:2; }
}

/* Category-image poster: fills the dark frame with an even inset on all sides —
   centred, natural ratio, no crop, no inner card chrome. The frame keeps the
   clip's own box, so the click-to-play swap shifts nothing. */
.hib-video-facade--contain .hib-video-facade__poster{
  inset:var(--hib-space-6);
  inline-size:calc(100% - 2 * var(--hib-space-6));
  block-size:calc(100% - 2 * var(--hib-space-6));
  object-fit:contain;object-position:center;
}

/* — Item 5 · Related-guide cards: one system, equal heights, whole-card link —
   Head is either a real still (cover + legibility scrim) or the topic's icon,
   large, over a token gradient. Duration is a badge on the head's inline-end
   corner; the footer row bottom-aligns via margin-block-start:auto. */
/* Section heading: category context kept, h3-scale so the rail reads as the
   secondary unit it is (overrides the .hib-h2 size, same family/weight). */
.hib-guide-related__title{ font-size:var(--hib-band-title-size); }

.hib-guide-cards{
  display:grid;grid-template-columns:1fr;
  gap:var(--hib-space-5); /* the one card-grid gap */
}
@media (min-width:640px){ .hib-guide-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .hib-guide-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.hib-guide-card{
  display:flex;flex-direction:column;
  background:var(--hib-surface);
  border:1px solid var(--hib-hairline);
  border-radius:var(--hib-radius-m);
  overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:var(--hib-shadow-card);
  transition:translate var(--hib-duration-base) var(--hib-ease),box-shadow var(--hib-duration-base) var(--hib-ease);
}
.hib-guide-card:hover,
.hib-guide-card:focus-visible{ translate:0 -3px;box-shadow:var(--hib-shadow-card-hover); }
.hib-guide-card:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }
/* TEXT-FIRST card — the three cards share one category, so an imagery head
   repeated three identical times; the title and teaser are the real per-card
   differentiators and now lead. One restrained brand accent replaces all
   imagery: a short primary bar on the inline-start edge, at the brand's
   hairline weight (3px — the cat-hero ornament thickness). Light surface —
   the section stays clearly secondary to the guide itself. */
/* The hover accent is the standardized .hib-card top-edge bar — its
   declarations live in the shared card-accent block (search
   ".hib-guide-card::after" above) so all card surfaces stay identical. */
.hib-guide-card{ position:relative; }
/* Eyebrow: display duration as thin, muted metadata — mono numerals, no icon. */
.hib-guide-card__dur{
  font-family:var(--hib-font-mono);font-size:var(--hib-label-min);font-weight:500;
  letter-spacing:normal;color:var(--hib-text-muted);
}
.hib-guide-card__body{
  display:flex;flex-direction:column;gap:var(--hib-space-2);flex:1;
  padding:clamp(16px,2vw,20px) clamp(16px,2.2vw,22px);
}
/* Title: the dominant element of the card. */
.hib-guide-card__title{
  font-family:var(--hib-font-display);font-size:var(--hib-card-title-size);font-weight:900;line-height:var(--hib-card-title-lh);
  letter-spacing:normal;color:var(--hib-text-strong);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hib-guide-card__summary{
  font-size:var(--hib-body-s-size);line-height:1.6;color:var(--hib-text-secondary);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty;}
.hib-guide-card__go{
  margin-block-start:auto;padding-block-start:var(--hib-space-3);
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--hib-label-m-size);font-weight:700;color:var(--hib-primary);
}
.hib-guide-card__go svg{ width:15px;height:15px;transition:translate var(--hib-duration-base) var(--hib-ease); }
.hib-guide-card:hover .hib-guide-card__go svg,
.hib-guide-card:focus-visible .hib-guide-card__go svg{ translate:-3px 0; } /* forward = left in RTL */
@media (prefers-reduced-motion:reduce){
  .hib-guide-card,
  .hib-guide-card__go svg{ transition:none; }
  .hib-guide-card:hover,
  .hib-guide-card:focus-visible{ translate:none; }
  .hib-guide-card:hover .hib-guide-card__go svg,
  .hib-guide-card:focus-visible .hib-guide-card__go svg{ translate:none; }
}

/* ============================================================
   FEATURE / EDITORIAL SECTION TITLES — 3A refinement (Variant B)

   Two heading roles, and the page states which is which.

   FEATURE (this rule) is the homepage's CONVERSION voice — the
   three moments that ask the reader to move: choose a route
   (the junction), meet the professionals, take the final action
   (the closer). Plus the vision page's methodology heading, which
   is that page's equivalent moment.

   SECTION (the standard `.hib-section-header__title` role) is the
   EXPLANATORY voice: how it works, the questions. Subordinate on
   purpose — smaller titles are how those sections read as support
   rather than as another ask.

   Membership is declared in the markup with
   `hib-section-header--feature`, not inferred from what a section
   happens to contain. The previous selectors (`.hib-section--band`,
   `:has(.hib-subdomains)`) encoded the homepage's build order, so
   the hierarchy could only be read from its history; both matched
   the homepage alone and are replaced by the modifier.
   ============================================================ */
.hib-section-header--feature .hib-section-header__title,
.hib-methodology__title,
.hib-vision-prose h2,
.hib-home-cta__title{
  font-size:var(--hib-title-feature-size);
  line-height:var(--hib-title-feature-lh);
  font-weight:900;
  letter-spacing:normal;
}

/* ============================================================
   BLOCK TITLE — the H3 role, one rung below the band title

   The heading that opens a block INSIDE a section: the two junction
   paths, the three how-it-works steps, the guides body heading, the
   category collection and siblings headings. Five components, and
   before this rule each had authored its own scale and leading —
   26/22.4/21.6px across 1.15, 1.20 and 1.30 — because the display
   face's declared weight range is inert (one Danidin file answers
   400–900), so every new level of emphasis had to arrive as a size.
   Two of them sat side by side on the homepage at the same 26px in
   different leadings purely because they were written months apart.

   Membership is by role, not by tag: these are H2s and H3s alike, and
   what they share is the job — naming a block the reader is already
   inside. The card title (19px) stays below it and the band title
   (32.8px) above it, so the three read as steps rather than as noise.

   Not members, deliberately: `.hib-profile-reviews__empty-title` is
   the pinned softer editorial voice (18.4/600), and
   `.hib-vision-story__cap-name` is a photograph's caption, not a
   heading. */
.hib-junction__title,
.hib-howto__t,
.hib-lib-body__heading,
.hib-cat-collection__heading,
.hib-cat-siblings__heading{
  font-family:var(--hib-font-display);
  font-size:var(--hib-block-title-size);
  line-height:var(--hib-block-title-lh);
  font-weight:900;
  letter-spacing:normal;
  text-wrap:balance;
}

@media (max-width:360px){
  /* the CTA band's text column measured 213px at 320 and stacked the heading
     five lines tall; a narrower band pad returns ~24px of column */
  .hib-home-cta{ padding-inline:20px; }
}

/* ============================================================
   CALIBRATION LOOP — one breadcrumb role + vision letter heading
   Breadcrumb role (all dark-hero consumers): 13px, links on-dark-muted/400,
   current item dark-text/600. The domain-hero base keeps its light-surface
   colors for a potential light consumer; none is live today.
   ============================================================ */
/* The vision letter opens the page's most personal section. It reads at the
   FEATURE role (declared in the feature-title group above) beside the
   methodology and the closer — the page's three section moments share one
   scale, and the personal one no longer ranks below the procedural one. */

/* ============================================================
   SERVICE-REGION CUTOVER (B2.3)
   The geographic filter is now a two-level list: the 8 approved groups, each
   with its child regions beneath it. Both levels are real links, so the rail
   still works with JavaScript off; the indent is the only thing that says
   "inside", and it mirrors correctly because it is logical (inline-start).
   ============================================================ */
/* The child panel itself is FLUSH. It used to carry margin + padding + a rule
   (25px in total), which indented the whole row and therefore moved the tick
   and the count out of the rail's one column — hierarchy paid for in alignment.
   "Inside" is now said by the option grid instead: the label track indents, the
   selection column does not move. See `.hib-dbox__sub .hib-dopt__label`. */
.hib-dbox__sub{ margin:0;padding:0;border:0; }

/* State B — a real location the site could not map to a service region. Stated
   as the internal gap it is: informative, not an error, and never styled as a
   result. */
.hib-dresults__note{
  margin:0 0 16px;
  padding:12px 14px;
  border-inline-start:3px solid var(--hib-accent, #B8741A);
  background:var(--hib-surface-soft, rgba(8,30,58,.04));
  border-radius:6px;
  font-size:15px;
  line-height:1.5;
}

/* ============================================================
   GEOGRAPHIC RELEVANCE ON THE CARD (B2.4)
   The line that answers "why is this professional in front of me". It sits
   under the name, above the evidence, and reads quieter than the name and
   louder than the evidence — a reason, not a claim.
   ============================================================ */
.hib-pro-card__geo{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.45;
  color:var(--hib-text-muted, #55627a);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
}
/* The measurement is the one number on the line, so it carries the weight. */
.hib-pro-card__distance{
  font-weight:600;
  color:var(--hib-text, #081E3A);
}
.hib-pro-card__geo-more{
  line-height:1.45;font-size:13px;
  opacity:.75;
  white-space:nowrap;
}
/* Region names wrap; they are never ellipsized — a truncated place name is a
   different place. */
/* Where a professional works, under their name. It had no size of its own at
   all, so it inherited whichever grid was hosting it — 15px on the homepage,
   14px in the directory and on the profile: the same fact at two weights of
   importance depending on where you met the person. It takes the label rung
   explicitly, which also restores real contrast under the 19px card title. */
.hib-pro-card__coverage{
  overflow-wrap:anywhere;
  font-size:var(--hib-label-m-size);line-height:1.45;
}

/* The specialty confirmation appears only under an active specialty filter, and
   reads as a quiet line rather than a pill: it confirms a match the visitor
   asked for, it does not advertise a capability. */
.hib-pro-card__specmatch{
  margin:4px 0 0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--hib-text-muted, #55627a);
}

/* The approval mark on a card is an icon; the words live in the surface legend
   and in the visually hidden label beside the glyph. */
.hib-approval-badge--icon{ padding-inline:0; gap:0; }

/* The group row: the name selects the broad region, the arrow expands it. Two
   separate controls, side by side, so neither has to guess what a click meant. */
/* The group row is ONE box, exactly like every other option row, with the
   disclosure floating inside the lane that every row already reserves. It used
   to be a flex pair — arrow beside option — which made a group row a different
   width from a plain one and moved the count lane with it. Nothing about a
   chevron may move the selection column or the count column. */
.hib-dgroup{ position:relative; }
.hib-dgroup__toggle{
  position:absolute;
  inset-inline-end:0;
  inset-block:0;
  margin-block:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--hib-tap-min);
  height:var(--hib-tap-min);
  padding:0;
  border:0;
  background:none;
  color:var(--hib-text-muted); /* disclosure chrome stays quieter than the labels */
  cursor:pointer;
  border-radius:var(--hib-radius-xs);
}
.hib-dgroup__toggle:hover{ color:var(--hib-text); }
.hib-dgroup__chev{ width:14px;height:14px; }
.hib-dgroup__toggle:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.hib-dgroup__chev{ transition:transform .18s ease; }
.hib-dgroup__toggle.is-open .hib-dgroup__chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .hib-dgroup__chev{ transition:none; } }


/* ============================================================
   DECISION JUNCTION — the layered decision stage
   Two equal-height route surfaces overlap on desktop — the dark
   DIY layer above, the light professional layer beneath — and
   the dark layer's seam edge is cut at a restrained angle, with
   the brand hexagon carrying «או» on the seam. Everything is
   existing vocabulary: the trust band's navy gradient, the card
   border language, the section radii, the brand hexagon shell
   and the spacing scale. No new token.
   ============================================================ */
.hib-junction .hib-section-header{ margin-bottom:clamp(var(--hib-space-5),1.8vw,var(--hib-space-6)); }
.hib-junction__stage{
  position:relative;
  /* Equal decision importance, unequal content footprint: the professional
     route holds six choices and the primary action, the DIY route three rows —
     so the light surface takes the wider track (~57/43 before the pull). */
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:stretch;
  /* One value drives the layers' pull, the compensating padding and the seam
     position, so they cannot drift. The slant is the horizontal run of the
     dark layer's angled seam edge, top → bottom. */
  --hib-junction-overlap:var(--hib-space-10);
  --hib-junction-slant:var(--hib-space-9);
}
.hib-junction__path{
  position:relative;
  display:flex;flex-direction:column;gap:var(--hib-space-5);min-width:0;
  padding:clamp(var(--hib-space-6),2.6vw,var(--hib-space-8));
  border-radius:var(--hib-radius-xl);
}
/* Light layer sits first in RTL reading order (right), beneath the dark one.
   Both surfaces stretch to the same grid row — the outer composition is
   symmetric; only what happens inside each layer is not. */
.hib-junction__path--pro{
  grid-column:1;grid-row:1;z-index:1;
  padding-inline-end:calc(clamp(var(--hib-space-6),2.6vw,var(--hib-space-8)) + var(--hib-junction-overlap));
  background:var(--hib-surface);
  border:1px solid var(--hib-rule-soft);
  box-shadow:var(--hib-shadow-card);
}
/* Dark layer overlaps it from the left. Its surface is a ::before so the
   angled seam edge can be clipped without touching the children: the polygon
   overshoots the three straight sides (radius still rounds them) and slants
   only the seam edge — the full pull at the top receding to a near-kiss at
   the bottom, so the light conversion surface gains ground downward.
   drop-shadow follows the clipped shape, so the light layer receives the
   dark sheet's real silhouette. */
.hib-junction__path--diy{
  grid-column:2;grid-row:1;z-index:2;
  margin-inline-start:calc(-1 * var(--hib-junction-overlap));
  /* The seam side needs the slant's run as extra clearance: at the top the
     clipped edge sits that much further in. */
  padding-inline-start:calc(clamp(var(--hib-space-6),2.6vw,var(--hib-space-8)) + var(--hib-junction-slant));
  color:#fff;
}
.hib-junction__path--diy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:var(--hib-radius-xl);
  background:linear-gradient(160deg,var(--hib-dark-shell) 0%,#0A2244 55%,#0E2C54 100%);
  clip-path:polygon(
    -48px -48px,
    100% -48px,
    calc(100% - var(--hib-junction-slant)) calc(100% + 48px),
    -48px calc(100% + 48px)
  );
  filter:drop-shadow(0 14px 28px rgba(11,37,70,.22)) drop-shadow(0 4px 10px rgba(11,37,70,.14));
}
.hib-junction__head{ display:flex;flex-direction:column;gap:var(--hib-space-2);align-items:flex-start; }
/* Type comes from the block-title role; this keeps only its own margin. */
.hib-junction__title{ margin:0; }
.hib-junction__path--diy .hib-junction__title{ color:#fff; }
.hib-junction__path--pro .hib-junction__title{ color:var(--hib-text-strong); }
.hib-junction__desc{ margin:0;font-size:var(--hib-body-s-size);line-height:1.6;max-width:52ch;text-wrap:pretty;}
.hib-junction__path--diy .hib-junction__desc{ color:var(--hib-on-dark-soft); }
.hib-junction__path--pro .hib-junction__desc{ color:var(--hib-text-secondary); }

/* — Guide previews: three editorial media rows — real guides, real durations,
     the topic's own artwork leading on the right, title flowing to its left.
     The rows centre in the layer's stretch, so the dark surface breathes
     instead of padding itself with empty navy. — */
.hib-junction__guides{
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
  /* The card-grid step, same as every card grid (spacing suite). */
  gap:var(--hib-space-5);
}
.hib-junction__guide{
  display:flex;align-items:center;gap:var(--hib-space-4);
  min-width:0;text-decoration:none;color:inherit;border-radius:var(--hib-radius-s);
}
/* The separator carries the row across the layer's full measure, so a short
   title never leaves the navy reading as unused space. */
.hib-junction__guide + .hib-junction__guide{
  border-block-start:1px solid var(--hib-border-on-dark);
  padding-block-start:var(--hib-space-3);
}
.hib-junction__guide-media{
  position:relative;display:grid;place-items:center;overflow:hidden;
  flex:0 0 clamp(152px,13vw,184px);aspect-ratio:16 / 10;border-radius:var(--hib-radius-s);
  /* The same light artwork stage the topic cards stand on — real HIB media on
     the dark ground, never a claimed video frame. */
  background:radial-gradient(122% 100% at 50% 32%,#F3F8FE 0%,#E8F0FB 56%,#DCE8F7 100%);
  border:1px solid var(--hib-border-on-dark);
}
/* The stage was half empty: the artwork painted at 49% of it and read as an
   icon rather than a category cue. Same definite-box treatment as the specialty
   tile, so both artwork surfaces in this junction obey one rule. */
.hib-junction__guide-media img,
.hib-junction__guide-media svg{
  position:absolute;inset:var(--hib-space-1);
  inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:100%;
  margin:auto;object-fit:contain;
}
.hib-junction__guide-body{ display:flex;flex-direction:column;gap:var(--hib-space-1);min-width:0;flex:1 1 auto; }
.hib-junction__guide-title{
  font-size:var(--hib-body-s-size);font-weight:700;line-height:1.4;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hib-junction__guide:hover .hib-junction__guide-title{ text-decoration:underline;text-underline-offset:3px; }
/* The topic's real guide count — the same secondary fact the /guides/ card
   states, in the on-dark secondary tone. */
.hib-junction__guide-meta{
  font-size:var(--hib-label-min);color:var(--hib-on-dark-soft);
}
/* The /guides/ card's forward cue (RTL: chevron points left), quiet until the
   row is engaged. */
.hib-junction__guide-go{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:20px;block-size:20px;color:var(--hib-on-dark-soft);
  opacity:.55;transition:opacity .18s var(--hib-ease);
}
.hib-junction__guide-go svg{ inline-size:16px;block-size:16px; }
.hib-junction__guide:hover .hib-junction__guide-go,
.hib-junction__guide:focus-visible .hib-junction__guide-go{ opacity:1; }
.hib-junction__guide:focus-visible{ outline:2px solid var(--hib-primary-on-dark);outline-offset:3px; }

/* — The dark layer's CTA: the established on-dark outline treatment. — */
.hib-junction__cta{ align-self:stretch;justify-content:center;margin-block-start:auto; }
.hib-junction__cta--ondark{
  background:rgba(255,255,255,.06);color:#EAF1FB;
  border:1px solid rgba(255,255,255,.26);
}
.hib-junction__cta--ondark:hover{ background:rgba(255,255,255,.12);color:#fff; }

/* — «או» in the brand hexagon shell, seated on the seam. Child of the dark
     layer, centred on the angled edge's mid-height crossing. — */
.hib-junction__or{
  position:absolute;z-index:3;inset-block-start:50%;
  /* The slanted edge sits slant/2 in from the box edge at mid-height; centre
     the hexagon on that crossing. */
  inset-inline-start:calc((var(--hib-junction-slant) / 2) - (var(--hib-space-10) / 2));
  transform:translateY(-50%);
  display:grid;place-items:center;
  inline-size:var(--hib-space-10);block-size:var(--hib-space-10);
}
.hib-junction__or-hex{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  fill:var(--hib-surface);stroke:var(--hib-border);
  filter:drop-shadow(0 8px 18px rgba(16,24,40,.18));
}
.hib-junction__or-txt{
  position:relative;
  font-family:var(--hib-font-hero);font-weight:900;font-size:var(--hib-title-compact-size);
  color:var(--hib-text-strong);
}

/* — The professional layer's internals. — */
.hib-junction__grid-label{
  margin:0;
  font-size:var(--hib-label-min);font-weight:700;letter-spacing:normal;
  color:var(--hib-text-muted);
}
.hib-junction__specs{
  flex:1 1 auto;align-content:center;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hib-space-5);
}
/* Compact navigation cells: the shipped .hib-subdomain markup recomposed as a
   centred column — tile above name — because at a third of a half-container the
   horizontal card has no room to breathe. The tile keeps its artwork treatment
   and its no-resting-scale contract; the forward cue is decorative and drops. */
.hib-junction__specs .hib-subdomain{
  flex-direction:column;align-items:stretch;min-block-size:0;height:auto;
}
.hib-junction__specs .hib-subdomain__tile{
  position:relative;
  flex:0 0 auto;inline-size:100%;block-size:auto;aspect-ratio:4 / 3;
  border-inline-end:0;border-block-end:0;
  padding:var(--hib-space-2);
  /* The tinted stage is dropped here, for two reasons that resolve together:
     the specialty artwork carries its OWN opaque near-white ground (sampled
     rgb(241,240,241)), which painted a hard neutral rectangle over the cool
     radial tint — an accidental seam, and a neutral patch inside a cool
     palette; and the tint was a third nested surface inside an already-
     bordered card. On the plain card surface the artwork's own ground reads as
     its stage. The guide media KEEPS the tint: its artwork is transparent and
     the light stage is what lifts it off the navy panel. */
  background:var(--hib-surface);
}
/* The artwork fills the padded stage and object-fit contains it. A percentage
   max-block-size cannot resolve against a height that `aspect-ratio` derives
   from the width, so the old cap was silently dropped and ~22% of every
   illustration was clipped by the tile. Filling a definite box instead is
   ratio-agnostic: nothing is cropped, nothing is distorted, at any width. */
.hib-junction__specs .hib-subdomain__tile img,
.hib-junction__specs .hib-subdomain__tile svg{
  position:absolute;inset:var(--hib-space-2);
  inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:100%;
  margin:auto;object-fit:contain;
}
.hib-junction__specs .hib-subdomain__body{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;flex:1 1 auto;
  padding:var(--hib-space-3) var(--hib-space-2);
}
/* The name keeps the card family's one title signature — Danidin 900 at the
   card-title size. Overriding it here to 14/700 was a parallel type system in
   miniature, and it broke the family invariant the typography suite guards. */

/* — Between the rail breakpoint and true desktop: keep the two layers but
     soften the pull and the cut before giving up the composition. — */
@media (min-width:1024px) and (max-width:1279px){
  .hib-junction__stage{ --hib-junction-overlap:var(--hib-space-8);--hib-junction-slant:var(--hib-space-7); }
}

/* — Stacked composition: both routes fully visible, DIY first, «או» straddling
     the boundary between them. The angled seam is a desktop gesture — the
     stacked edges stay straight. — */
@media (max-width:1023px){
  .hib-junction__stage{ grid-template-columns:minmax(0,1fr);--hib-junction-overlap:0px;--hib-junction-slant:0px; }
  .hib-junction__path--diy{ grid-column:1;grid-row:1;margin-inline-start:0;padding-inline-start:clamp(var(--hib-space-6),2.6vw,var(--hib-space-8)); }
  .hib-junction__path--diy::before{ clip-path:none;filter:none;box-shadow:var(--hib-shadow-band); }
  .hib-junction__path--pro{
    grid-column:1;grid-row:2;
    padding-inline-end:clamp(var(--hib-space-6),2.6vw,var(--hib-space-8));
    /* Room for the hexagon that hangs off the layer above. */
    padding-block-start:calc(clamp(var(--hib-space-6),2.6vw,var(--hib-space-8)) + var(--hib-space-5));
  }
  .hib-junction__or{
    inset-inline-start:50%;inset-block-start:auto;
    inset-block-end:calc(-1 * (var(--hib-space-10) / 2));
    transform:translateX(50%);
  }
  /* A full-width route surface, a readable editorial measure inside it: the
     rows centre as a block, reading order and the leading-right media stay. */
  .hib-junction__path--diy .hib-junction__head,
  .hib-junction__path--diy .hib-junction__guides,
  .hib-junction__path--diy .hib-junction__cta{
    inline-size:100%;max-inline-size:37.5rem;margin-inline:auto;
  }
}
@media (max-width:600px){
  .hib-junction__guide{ gap:var(--hib-space-3); }
  .hib-junction__guide-media{ flex:0 0 108px;aspect-ratio:16 / 11; }
  .hib-junction__specs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Network preview — three, at every width. The COUNT is decided once, in the
   query (inc/home-featured-pros.php); the phone-only `display:none` on a marked
   fourth-to-sixth card is retired along with the six it was hiding half of.

   What remains here is a LAYOUT correction, not a count: the shared card grid
   drops to two columns from 1023 down, which filled exactly for six and leaves
   a lone half-width orphan on a second row for three. The preview keeps its
   three-across composition through the tablet band and hands over to the shared
   single column at 767, where every grid stacks anyway. Scoped to --preview, so
   the directory's grid and every other .hib-pros-grid are untouched. */
@media (min-width:768px) and (max-width:1023px){
  .hib-pros-grid--preview{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* — §11 COLLECTION NOTICE ————————————————————————————————————————————————
   The short notice beside the submit action on the contact, review and
   add-professional forms.

   IT IS NOT A CARD. The first revision gave it a border, a tinted surface, a radius
   and a mono heading — which made a legal footnote look like the most important
   object in the form, and nested a bordered box inside a bordered panel on two of the
   three surfaces. It is explanatory text about the button below it, so it takes the
   role the design system ALREADY has for exactly that: `.hib-applyform__req`, the
   note under the add-professional form's title. Same size, same colour, same measure,
   same line-height. One role, three call sites, nothing invented.

   Markup: inc/privacy-notice.php (one `<p>`, no children but links). — */
.hib-privacy-notice{
  margin-block:var(--hib-space-5) var(--hib-space-4);
  font-size:var(--hib-body-s-size);line-height:1.6;
  color:var(--hib-text-secondary);       /* 8.5:1 on white — a note, still fully readable */
  max-width:62ch;                         /* the measure the sibling note already uses */
  text-wrap:pretty;                       /* no one-word last line under the button */
}
/* Links stay identifiable without hover: colour AND underline, never colour alone. */
.hib-privacy-notice__link{
  color:var(--hib-primary);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:anywhere;                 /* the address must never push the form sideways */
}
.hib-privacy-notice__link:hover{ color:var(--hib-primary-hover); }
.hib-privacy-notice__link:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* The contact form's `*` markers.
   NOT `.hib-field__req` — that name is already taken by the shipped required-field
   CHIP (a pill reading «חובה» on the intake form), and reusing it both dressed these
   asterisks as pills and would have re-coloured that component everywhere it ships.
   This is a plain typographic mark: the notice below the form refers to it, so it has
   to be visible, and it has to stay quieter than the label it follows. */
.hib-field__star{
  margin-inline-start:3px;
  color:var(--hib-text-muted);font-weight:400;
  background:none;padding:0;border-radius:0;   /* inherit nothing from the chip family */
}

/* The review acknowledgement carries a link inside its label. Give the label the
   note's own reading size so the checkbox row does not become the loudest text in
   the form, and keep the link identifiable inside it. */
.hib-review-form__form .hib-checkbox__label{
  font-size:var(--hib-body-s-size);line-height:1.55;color:var(--hib-text-secondary);
}
.hib-review-form__form .hib-checkbox__label a{
  color:var(--hib-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;
}
.hib-review-form__form .hib-checkbox__label a:hover{ color:var(--hib-primary-hover); }

/* — CONSENT PANEL (GA4 + Meta Pixel gate) ————————————————————————————————
   A bottom sheet, not a modal: it never covers the page and never traps focus, so a
   visitor who wants to read before deciding can. Accept and reject are the SAME
   element type, size and weight — the choice must not be nudged by styling. Markup:
   inc/consent.php · behaviour: assets/js/hib-consent.js. — */
.hib-consent{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:120;
  padding:clamp(12px,2vw,20px);
  display:flex;justify-content:center;
  pointer-events:none; /* only the panel itself is interactive */
}
/* An author `display` beats the UA sheet's `[hidden]{display:none}`, so a panel that
   sets `display:flex` would stay on screen with the attribute set — the dialog would
   never close and the markup would lie about its state to assistive technology.
   Both surfaces that ship `hidden` restate it. */
.hib-consent[hidden],
.hib-consent__options[hidden]{ display:none; }
.hib-consent__panel{
  pointer-events:auto;
  width:min(100%,760px);
  padding:clamp(18px,2.6vw,26px);
  border:1px solid var(--hib-rule-soft);border-radius:var(--hib-radius-l);
  background:#fff;box-shadow:var(--hib-shadow-raised,var(--hib-shadow-card));
  color:var(--hib-text-secondary);
  /* Never taller than the viewport it is pinned to. A fixed bottom sheet that
     outgrows the screen loses its top edge off-screen, where nothing can scroll to
     it — at 200% text zoom on a 390px phone this panel measured 971px against 844px
     and the heading was unreachable. Cap it, and scroll the readable half inside. */
  display:flex;flex-direction:column;
  max-block-size:calc(100vh - 2 * clamp(12px,2vw,20px));
  max-block-size:calc(100dvh - 2 * clamp(12px,2vw,20px));
}
/* The prose + options scroll; the two decisions below stay put. */
.hib-consent__body{
  min-block-size:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.hib-consent__actions{ flex:0 0 auto; }
.hib-consent__title{
  margin:0 0 var(--hib-space-3);
  font-family:var(--hib-font-display);font-weight:800;letter-spacing:normal;
  color:var(--hib-text);font-size:1.125rem;line-height:1.3;
}
.hib-consent__desc{ margin:0;font-size:var(--hib-body-s-size);line-height:1.65; }
.hib-consent__link{
  color:var(--hib-primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;
}
.hib-consent__link:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* Two rows, one line each. The per-row description paragraphs are gone: the provider
   name now rides the label, which is the thing the reader is actually deciding about,
   and everything else lives in the policy this panel links to. */
.hib-consent__options{
  margin-block-start:var(--hib-space-5);padding-block-start:var(--hib-space-4);
  border-block-start:1px solid var(--hib-rule-soft);
  display:grid;gap:var(--hib-space-2);
}
.hib-consent__option{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0;min-height:var(--hib-tap-min,44px);align-content:center;
  font-size:var(--hib-body-s-size);line-height:1.5;
}
.hib-consent__option-name{ font-weight:700;color:var(--hib-text); }
.hib-consent__option-state{ color:var(--hib-text-secondary); }
/* The two real controls keep a full 44px row, so a finger lands on the label, not
   only on the box. */
.hib-consent__toggle{
  display:flex;align-items:center;gap:10px;
  min-height:var(--hib-tap-min,44px);
  font-size:var(--hib-body-s-size);
}

.hib-consent__actions{
  margin-block-start:var(--hib-space-5);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--hib-space-3);
}
/* Accept and reject share ONE class — same box, same type scale, same min-width.
   Only the fill differs, and neither reads as the discouraged option. */
.hib-consent__btn{
  flex:0 1 auto;min-height:44px;min-width:min(100%,220px);
  padding:11px 20px;box-sizing:border-box;
  border-radius:var(--hib-radius-pill);
  font-family:inherit;font-size:var(--hib-body-s-size);font-weight:700;line-height:1.2;
  cursor:pointer;
  transition:background .18s var(--hib-ease),border-color .18s var(--hib-ease),color .18s var(--hib-ease);
}
.hib-consent__btn--accept{
  border:1px solid var(--hib-primary);background:var(--hib-primary);color:#fff;
}
.hib-consent__btn--accept:hover{ background:var(--hib-primary-strong,var(--hib-primary)); }
.hib-consent__btn--reject,
.hib-consent__btn--save{
  border:1px solid var(--hib-primary);background:transparent;color:var(--hib-primary);
}
.hib-consent__btn--reject:hover,
.hib-consent__btn--save:hover{ background:rgba(27,74,179,.08); }
.hib-consent__btn:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* The disclosure is a text control, deliberately quieter than the two decisions. */
.hib-consent__more{
  min-height:44px;padding:8px 4px;
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--hib-body-s-size);font-weight:600;
  color:var(--hib-text-secondary);text-decoration:underline;text-underline-offset:3px;
}
.hib-consent__more:hover{ color:var(--hib-primary); }
.hib-consent__more:focus-visible{ outline:2px solid var(--hib-primary);outline-offset:2px; }

/* The footer control is a button that must read as the links beside it. */
.hib-footer__link--button{
  border:0;background:none;padding:0;
  font:inherit;color:inherit;text-align:inherit;cursor:pointer;
}
.hib-footer__link--button:focus-visible{ outline:2px solid currentColor;outline-offset:2px; }

@media (max-width:520px){
  .hib-consent__btn{ min-width:100%; }
  .hib-consent__more{ width:100%;text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .hib-consent__btn{ transition:none; }
}