/* ============================================
   Good People — Design Tokens
   Generated from the Figma brand guidelines
   ============================================ */

/* Spam honeypot — invisible to sighted users and screen readers
   (aria-hidden on the wrapper), off-screen rather than display:none
   so basic bots that skip hidden fields still fill it in. */
/* Spam honeypot — hidden from people, still fillable by a bot.
   It used to be parked at `left: -9999px`. In a right-to-left document that
   is the scroll direction, so it stretched the page to ~11,400px wide.
   `body { overflow-x: clip }` hid the damage in normal browsing, but DevTools
   works off the real layout — which is why the page looked broken the moment
   you opened inspect. This clip-based hiding takes up no space at all. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:root {
  /* Colors */
  --brand-primary: #2E4A34;   /* primary button */
  --brand-accent:  #4F7254;   /* accent / quote band */
  --text-primary:  #0F1912;
  --text-secondary:#4A564C;
  --text-on-tag:   #33502F;
  --page-bg:       #FFFFFF;   /* raw page/canvas white, not a Figma surface token */
  --surface-bg:    #FAFBF9;
  --surface-tag:   #EAF0EB;
  --surface-alt:   #F2F1EF;
  --surface-warm:  #FAF5F0;
  --border:        #E0DCD3;
  --star:          #D2AF66;
  --white:         #FFFFFF;

  /* Hover states */
  --brand-primary-hover: #0F1912;

  /* "קצת עליי" band — body text is plain white on the deep green so it
     reads at full strength (about 16:1), not a tinted grey-green. */
  --about-bg:        #16241A;
  --about-ink-soft:  #FFFFFF;
  --surface-tag-hover:   #F0F2EE;

  /* Type scale */
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-body-lg: 20px;
  --fs-body: 20px;
  --fs-caption: 16px;

  /* Layout */
  --page-max: 1440px;
  --gutter: 80px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.4s;
}

/* ============================================
   Reset
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

/* ============================================
   Shared pieces
   ============================================ */

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.badge {
  display: inline-block;
  background: var(--surface-tag);
  color: var(--text-on-tag);
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 16px;   /* Figma keeps buttons at 16 even though body text is 18 */
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--brand-primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--brand-primary-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--brand-primary-hover);
  color: var(--page-bg);
  border-color: var(--brand-primary-hover);
}

.btn .arrow { width: 16px; height: 16px; flex: none; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = right edge under RTL */
  gap: 12px;
  margin-bottom: 40px;
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================
   Header
   ============================================ */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 73px;
}
.logo {
  font-family: 'Unbounded', 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.nav {
  display: flex;
  gap: 32px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}
.nav a { transition: color var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--text-primary); }

.nav-toggle { display: none; }

/* Under-review banner shown while site is private */
.under-review-banner {
  display: block;
  background: #FFF3E6;
  color: #6A3A00;
  border-top: 1px solid rgba(0,0,0,0.03);
  padding: 10px  var(--gutter);
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}

/* ============================================
   Hero
   ============================================ */

.hero .container {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 80px;
  min-height: 828px;   /* fixed height in Figma, not content-hugging */
}
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = right edge under RTL */
  gap: 24px;
  text-align: right;
}
.hero-content h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
}
/* Forced break in the headline; released on narrow screens so it can reflow. */
.line-break { display: inline; }
.hero-sub {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 16px; padding-top: 12px; }

/* ---- Card deck ---- */

.deck {
  position: relative;
  width: 519px;
  height: 500px;
  flex: none;

  /* ---- Single source of truth for deck timing ----
     JavaScript reads these back, so the transition duration and the
     logic that waits for it can never drift apart. Tests override
     them at runtime to compress many cycles into a short run. */
  --deck-exit: 520ms;    /* outgoing card's flight off the stack */
  --deck-shift: 560ms;   /* remaining cards stepping forward      */
  --deck-hold: 1900ms;   /* time the front card is held           */
  --deck-intro: 900ms;   /* delay before the very first shuffle   */

  /* Decisive settle for cards moving up the stack. */
  --deck-ease-shift: cubic-bezier(0.22, 1, 0.36, 1);
  /* Accelerating departure for the card leaving. */
  --deck-ease-exit:  cubic-bezier(0.55, 0, 0.85, 0.35);
}

.deck-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  min-height: 336px;
  margin: 0;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;

  /* Every visual property is derived from custom props set in JS. */
  transform:
    translate3d(-50%, calc(-50% + var(--dy, 0px)), 0)
    scale(var(--s, 1))
    rotate(var(--r, 0deg));
  opacity: var(--o, 1);
  z-index: var(--z, 1);
  box-shadow:
    0 calc(15px * var(--d, 1)) calc(44px * var(--d, 1)) rgba(0, 0, 0, calc(0.15 * var(--d, 1))),
    0 calc(2px * var(--d, 1)) calc(10px * var(--d, 1)) rgba(0, 0, 0, calc(0.06 * var(--d, 1)));

  transition:
    transform var(--deck-shift) var(--deck-ease-shift),
    opacity var(--deck-shift) var(--deck-ease-shift),
    box-shadow var(--deck-shift) var(--deck-ease-shift),
    border-color 240ms var(--ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.deck-card.is-front { border-color: var(--text-primary); }

/* The departing card gets its own, faster, accelerating curve. */
.deck-card.is-exiting {
  transition:
    transform var(--deck-exit) var(--deck-ease-exit),
    opacity var(--deck-exit) var(--deck-ease-exit),
    box-shadow var(--deck-exit) var(--deck-ease-exit);
}

/* Used for the one frame where a card is teleported to the back of
   the stack. Never visible, because opacity is still 0 at that point. */
.deck-card.is-snapping {
  transition: none !important;
}

.deck-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.deck-name { font-size: 20px; font-weight: 700; }
.deck-tag {
  background: rgba(121, 121, 121, 0.07);
  color: var(--text-on-tag);
  font-size: 16px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 150px;
}
.deck-quote {
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ============================================
   Criteria — how to find the right professional
   ============================================ */

.criteria {
  background: var(--white);
  padding-block: 78px;
  min-height: 560px;   /* matches the About section right below it */
  display: flex;
  align-items: center;
}
@media (max-width: 980px) {
  .criteria { min-height: 0; }
}
.criteria-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.criteria-header {
  flex: none;
  width: 448px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = right edge under RTL */
  gap: 16px;
  text-align: right;
  padding-top: 8px;
}
.criteria-header h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.criteria-header p { color: var(--text-secondary); line-height: 1.7; }
.criteria-header .badge {
  background: var(--surface-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

/* ---- The checklist: flat, no card boxes — a title + checkmark row, then
        a description underneath, one after another. ---- */
.criteria-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 100px;          /* Figma spaces the rows instead of ruling them */
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 980px) {
  .criteria-list { gap: 48px; }
}
/* Figma: the tick is a 48px disc centred against the whole row — title and
   body together — with the text column beside it. No rules between rows;
   the separation is done with a large gap instead. */
.criteria-item {
  display: flex;
  /* RTL: plain `row` starts at the right, which put the text there and pushed
     the tick to the left. Reversed, the tick takes the right edge and the
     text sits beside it — the way the design has it. */
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  padding-block: 0;
  border-bottom: none;
}
.criteria-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 6px;
}
.criteria-item-text h3 { font-size: 24px; font-weight: 700; }
.criteria-check {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-tag);
  color: var(--text-on-tag);
}
.criteria-check svg { width: 28px; height: 28px; }
.criteria-item p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: right;
}

@media (max-width: 1100px) {
  .criteria-row { flex-direction: column; align-items: stretch; gap: 32px; }
  .criteria-header { width: 100%; }
}

/* ============================================
   Mission quote band
   ============================================ */

.mission {
  background: var(--brand-accent);
  color: var(--white);
  text-align: center;
  padding-block: 64px;
}
.mission .container { padding-inline: 140px; }
.mission-mark { font-size: 24px; opacity: 0.7; margin-bottom: 12px; }
.mission blockquote {
  margin: 0 auto;
  max-width: 900px;
  font-size: var(--fs-h3);
  line-height: 1.45;
  white-space: pre-line;
}
.mission .attrib {
  margin-top: 16px;
  font-size: var(--fs-caption);
  font-weight: 600;
  opacity: 0.85;
}

/* ============================================
   About
   ============================================ */

.about .container {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 100px;
}
/* Already exported pre-cropped from Figma, so no object-fit repositioning. */
.about-photo {
  width: 480px;
  height: 480px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--surface-tag);
  border: 4px solid var(--border);
}
.about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = right edge under RTL */
  gap: 20px;
  text-align: right;
}
.about-content h2 { font-size: 40px; font-weight: 700; line-height: 1.2; }
.about-content p {
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-line;
  max-width: 540px;
}

/* ============================================
   Professionals
   ============================================ */

.professionals {
  background: var(--surface-tag);
  padding-block: 100px;
}
.pro-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.pro-head .section-head {
  align-items: center;
  text-align: center;
}
.chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.chip {
  background: var(--surface-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 100px;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--surface-tag-hover); border-color: var(--text-on-tag); }
.chip.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); }

.pro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* While only one professional is published, centre the single card
   instead of leaving two empty grid columns beside it. Uses :only-of-type
   (not :only-child) because script.js also parks a hidden #proEmptyState
   <p> inside .pro-grid for the "no results" filter state. */
.pro-grid:has(.pro-card:only-of-type) {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.pro-card {
  background: var(--surface-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
/* The work photo is inset inside the card with its own radius, as in Figma. */
.pro-card img {
  width: calc(100% - 48px);
  height: 200px;
  object-fit: cover;
  margin: 24px 24px 0;
  border-radius: var(--radius);
}
.pro-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pro-name { font-size: 24px; font-weight: 700; text-align: right; }
/* Role sits on the right, rating to its left — matching the Figma card. */
.pro-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.pro-role { font-size: 16px; color: var(--text-secondary); }
.pro-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; }
.pro-rating .star { color: var(--star); }
.pro-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pro-tag {
  background: var(--surface-tag);
  color: var(--text-on-tag);
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 100px;
}
.pro-quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}
.pro-foot {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pro-foot .label { font-size: 16px; font-weight: 600; }
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface-tag);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--brand-primary); color: var(--white); }
.pro-actions { display: flex; gap: 8px; }

/* ============================================
   Contact
   ============================================ */

.contact .container {
  display: flex;
  align-items: center;   /* Figma centres the text column against the form */
  gap: 64px;
  padding-block: 100px;
}
.contact-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* = right edge under RTL */
  gap: 20px;
  text-align: right;
}
.contact-content h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.contact-content p { color: var(--text-secondary); line-height: 1.7; max-width: 540px; }

.contact-form {
  width: 470px;
  flex: none;
  background: var(--surface-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form h3 { font-size: 20px; font-weight: 700; text-align: right; }
.form-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: right;
  margin-top: -8px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field input, .field textarea { padding: 12px; }
.field label { font-size: 16px; font-weight: 500; text-align: right; }
.field input, .field textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-tag);
  text-align: right;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(79, 114, 84, 0.15);
}
/* Multi-line fields need to *look* multi-line, otherwise people
   assume there is no room to type. */
.field textarea {
  resize: vertical;
  min-height: 96px;
  height: 96px;
  line-height: 1.6;
}
/* The profession field is the main free-text input on the page. */
#topic { min-height: 104px; height: 104px; }
.contact-form .btn { justify-content: center; }

.form-note {
  font-size: 16px;
  text-align: center;
  color: var(--text-secondary);
  min-height: 0;
}
/* Validation feedback shouldn't reserve space until there's a message. */
.form-note:empty { display: none; }
/* Figma puts 8px of breathing room above the submit button. */
.contact-form .btn { margin-top: 8px; }

/* ============================================
   Footer
   ============================================ */

.site-footer {
  background: var(--brand-primary-hover);
  color: var(--page-bg);
  padding-block: 80px 48px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 64px;
}
.footer-brand { max-width: 460px; text-align: right; }
.footer-brand .logo { display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 16px; line-height: 1.7; color: #D8DCD6; }
.footer-brand .tagline { margin-top: 12px; font-weight: 600; color: var(--page-bg); }
.footer-cols { display: flex; gap: 56px; }
.footer-col h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; text-align: right; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: right; }
.footer-col a { font-size: 16px; color: #B5B5B5; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--page-bg); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 64px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #8D948B;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease);
}
.socials a:hover { background: var(--brand-accent); }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1100px) {
  :root { --gutter: 40px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; }
  .hero .container,
  .about .container,
  .contact .container { flex-direction: column; align-items: stretch; }
  /* The fixed desktop hero height would leave a dead gap once stacked. */
  .hero .container { min-height: 0; }
  .mission .container { padding-inline: var(--gutter); }
  .deck { width: 100%; max-width: 420px; margin-inline: auto; }
  .about-photo { width: 320px; height: 320px; margin-inline: auto; }
  .contact-form { width: 100%; }
  .pro-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; --fs-h1: 32px; --fs-h2: 28px; }
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 73px; right: 0; left: 0;
    flex-direction: column;
    gap: 0;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px 16px;
    text-align: right;
  }
  .nav.is-open a { padding: 12px 0; }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .pro-grid { grid-template-columns: 1fr; }
  .line-break { display: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas .btn { justify-content: center; }
  .deck-card { width: 260px; min-height: 320px; }
  .about-photo { width: 240px; height: 240px; }
  .footer-cols { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column-reverse; gap: 16px; text-align: center; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Profile page
   ============================================ */

/* ---- Hero ---- */

.profile-hero .container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: center;
  gap: 0;
  min-height: 0;   /* the inset photo box now sets the band's height */
}
/* Inset inside the band rather than filling its full height — the same box
   as Nati's portrait in the About section (526x558, 80px to the page edge,
   106px above and below). RTL: the photo sits in the left column, so its
   screen-left edge is inline-END. */
.profile-cover {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 526px;
  height: auto;
  aspect-ratio: 526 / 558;
  min-height: 0;
  border: none;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center 22%;
  margin-block: 106px;
  margin-inline: 56px 80px;
  justify-self: end;      /* = the left edge of the column, under RTL */
}
.profile-intro {
  grid-column: 1;
  grid-row: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 24px;
  text-align: right;
  padding-block: 76px;
  /* RTL: inline-START is the right-hand page edge — keeps the text lined up
     with every section above/below; inline-END is the inner side, against
     the photo. Same approach as story.html's hero. */
  padding-inline-start: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  padding-inline-end: 64px;
}
.badges-row { display: flex; gap: 10px; flex-wrap: wrap; }
.name-title { display: flex; flex-direction: column; gap: 8px; }
.profile-intro h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.15; }
.profile-role { font-size: 20px; color: var(--text-secondary); }

.meta-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--text-secondary);
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item strong { color: var(--text-primary); }
.meta-item .muted { color: var(--text-secondary); }
.meta-divider { width: 1px; height: 16px; background: var(--border); }
.stars { display: inline-flex; gap: 2px; color: var(--star); letter-spacing: 1px; }
.stars .is-half { opacity: 0.45; }

.profile-bio {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px;
}

/* Soft-filled secondary action ("add a review") */
.btn-soft {
  background: var(--surface-tag);
  color: var(--text-on-tag);
  border-color: transparent;
}
.btn-soft:hover { background: #E0E6DE; }

/* ---- Details + form ---- */

.profile-main {
  background: #FAFBF9;
}
.profile-main .container {
  display: flex;
  flex-direction: row-reverse;  /* form left, details right — as in Figma */
  align-items: flex-start;
  gap: 80px;
  padding-block: 40px 100px;
}
.quote-form {
  width: 480px;
  flex: none;
  position: sticky;
  top: 105px;
  scroll-margin-top: 96px;   /* clears the sticky header when jumped to via #quoteForm */
  background: var(--surface-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-form h2 { font-size: 24px; font-weight: 700; text-align: right; }

.profile-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.detail-block { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.detail-block h2 { font-size: 28px; font-weight: 700; line-height: 1.25; }
.detail-block p {
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-line;
}
.chip.is-static { cursor: default; }
.chip.is-static:hover { background: var(--surface-bg); border-color: var(--border); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}
.portfolio-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---- Reviews ---- */

.reviews {
  background: #EAF0EB;
  padding-block: 100px;
  scroll-margin-top: 73px;   /* clears the sticky header when jumped to via #reviews */
}
.reviews .section-head { margin-bottom: 48px; }
.reviews-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.review-card {
  background: var(--surface-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quote-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-tag);
  color: var(--text-on-tag);
  font-size: 20px;
}
.review-quote {
  flex: 1;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.review-foot { display: flex; align-items: center; gap: 16px; }
.review-foot img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.review-author { display: flex; flex-direction: column; gap: 4px; }
.review-author strong { font-size: 16px; font-weight: 600; }
.review-author span { font-size: 16px; color: var(--text-secondary); }

/* ---- Profile responsive ---- */

@media (max-width: 1100px) {
  .profile-main .container { flex-direction: column; align-items: stretch; min-height: 0; }
  .quote-form { width: 100%; position: static; }
  .reviews-row { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .profile-hero .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .profile-cover {
    grid-column: 1;
    grid-row: 1;
    /* An explicit width: `auto` on an <img> would fall back to the file's own
       aspect ratio and overflow the screen. */
    width: calc(100% - 2 * var(--gutter));
    max-width: none;
    aspect-ratio: auto;
    height: 340px;
    min-height: 0;
    justify-self: center;
    margin-block: 48px 0;
    margin-inline: auto;
    object-position: center 12%;
  }
  .profile-intro {
    grid-column: 1;
    grid-row: 2;
    padding-block: 48px 56px;
    padding-inline: var(--gutter);
  }
}

@media (max-width: 700px) {
  .profile-cover { height: 320px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-grid img { height: 200px; }
  .meta-stats { gap: 12px; }
  .meta-divider { display: none; }
  .review-card { padding: 24px; }
}

/* Linked professional cards.
   Direct child only: this is meant for the photo link that wraps the card
   image. Unscoped it also caught .icon-btn in the card footer, overriding
   its `display: grid` and dropping the arrow into the corner of the
   44px touch target instead of centring it. */
.pro-card > a { display: block; }
.pro-name a { transition: color var(--dur-fast) var(--ease); }
.pro-name a:hover { color: var(--brand-accent); }

/* Rows that Figma lays out left-to-right, even though the page is RTL.
   Children are flipped back so their Hebrew text still reads correctly. */
.ltr-flow { direction: ltr; }
.ltr-flow > * { direction: rtl; }

/* ============================================
   Motion
   --------------------------------------------
   Reveal styles are scoped to `.js` so that if
   the script never runs, everything stays visible.
   All of it is disabled under prefers-reduced-motion.
   ============================================ */

@media (prefers-reduced-motion: no-preference) {

  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 0.55s var(--ease),
      transform 0.55s var(--ease);
    transition-delay: calc(var(--stagger, 0) * 70ms);
    will-change: opacity, transform;
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  /* Drop the hint once it has played, so hover transforms stay crisp. */
  .js [data-reveal].is-done { will-change: auto; }

  /* Sideways entrances for the two-column sections */
  .js [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
  .js [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
  .js [data-reveal="scale"] { transform: scale(0.97); }

  /* Once those columns stack, a sideways entrance both reads wrong and
     pushes the layout past a narrow viewport. Move vertically instead. */
  @media (max-width: 1100px) {
    .js [data-reveal="right"],
    .js [data-reveal="left"] { transform: translate3d(0, 18px, 0); }
  }

  /* The criteria checklist reveals one row at a time, seconds apart —
     a deliberate pace, not the quick cascade used elsewhere. Each item
     carries its own --item-delay inline, in seconds. */
  .js .criteria-item[data-reveal] {
    transition-delay: var(--item-delay, 0s);
  }
}

/* Safety net: no off-screen entrance may ever create a horizontal
   scrollbar. `clip` (unlike `hidden`) does not create a scroll
   container, so `position: sticky` keeps working. */
body { overflow-x: clip; }

/* ---- Micro-interactions ---- */

.btn { will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Nav links get a quiet underline that grows from the start edge */
.nav a {
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--text-primary);
  transition: width var(--dur-fast) var(--ease);
}
.nav a:hover::after { width: 100%; }

/* Professional cards: the photo eases up slightly with the card */
.pro-card img { transition: transform var(--dur) var(--ease); }
.pro-card:hover img { transform: scale(1.03); }

/* Portfolio tiles lift instead of zooming, so the grid stays tidy */
.portfolio-grid img {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.portfolio-grid img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

/* Review cards match the professional cards */
.review-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

/* The deck is clickable, so say so */
.deck { cursor: pointer; }

/* Social icons */
.socials a { transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.socials a:hover { transform: translateY(-2px); }

/* Form fields settle in a touch more softly */
.field input, .field textarea { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.field input:hover, .field textarea:hover { background: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .pro-card:hover img,
  .portfolio-grid img:hover,
  .review-card:hover,
  .socials a:hover { transform: none; }
}

/* Neutral stand-in used where a professional's photo has not been
   supplied yet. Deliberately branded rather than a grey box, and
   it states plainly that an image is pending. */
.pro-photo--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 48px);
  height: 200px;
  margin: 24px 24px 0;
  border-radius: var(--radius);
  background: var(--surface-tag);
  border: 1px dashed var(--border);
  color: var(--text-on-tag);
  text-align: center;
}
.pro-photo--placeholder span { font-size: 20px; font-weight: 600; }
.pro-photo--placeholder small { font-size: 16px; color: var(--text-secondary); }

.reviews-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--text-secondary);
}

/* Shown on a professional's page while their full profile is still
   being filled in — keeps the page from reading as broken/empty. */
.profile-notice {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text-secondary);
  font-size: 16px;
}
/* Stand-in for a professional's portrait on the profile hero. */
.profile-cover--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-tag);
  border: 1px dashed var(--border);
  color: var(--text-on-tag);
  text-align: center;
}
.profile-cover--placeholder span { font-size: 24px; font-weight: 700; }
.profile-cover--placeholder small { font-size: 16px; color: var(--text-secondary); }

/* ============================================
   The `hidden` attribute must always win.
   --------------------------------------------
   Any author rule that sets `display` (e.g. `.pro-card { display: flex }`)
   outranks the user-agent's `[hidden] { display: none }`, which silently
   defeats attribute-based filtering. This makes `hidden` authoritative.
   ============================================ */
[hidden] { display: none !important; }

/* Social icons stay 32px visually, but the tappable area is expanded to
   44px via an overlay so it meets touch-target guidance. Appearance is
   unchanged; only the hit region grows. */
.socials a { position: relative; }
.socials a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
/* Keep neighbouring hit areas from meeting edge to edge. */
.socials { gap: 14px; }

/* A professional's own links. Reuses the .socials icon row; only the
   surrounding label and colours are new, so the icons stay identical
   to the footer treatment but read correctly on a light background. */
.pro-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 10px;
}
.pro-links__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-secondary);
}
.pro-links .socials a {
  background: var(--surface-tag);
  color: var(--text-on-tag);
}
.pro-links .socials a:hover {
  background: var(--brand-primary);
  color: var(--white);
}

/* ============================================
   Story page ("הסיפור שלי")
   ============================================ */

.story-hero .container {
  display: flex;
  flex-direction: row-reverse;   /* photo left, text right — as in Figma */
  align-items: center;
  gap: 64px;
  padding-block: 80px;
  min-height: 776px;
}
.story-photo {
  width: 480px;
  height: 480px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--border);
  background: var(--surface-tag);
}
.story-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 24px;
  text-align: right;
}
.story-intro h1 { font-size: 40px; font-weight: 700; line-height: 1.2; }
.story-text {
  max-width: 600px;
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-line;
}

/* ---- About the project ---- */

.story-about .container {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 80px;
}
.story-about-photo {
  width: 520px;
  height: 420px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 4px solid var(--border);
}
.story-about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 24px;
  text-align: right;
}
.story-about-content h2 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.story-about-content p {
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-line;
}

/* ---- Selection: how I choose my professionals ---- */

.selection {
  background: var(--surface-warm);
  padding-block: 80px;
}
.selection-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 16px;
  margin-bottom: 48px;
  text-align: right;
}
.badge--outline {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.selection-header h2 { font-size: 32px; font-weight: 700; }
.selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.selection-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 16px;
  text-align: right;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.selection-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.selection-num { font-size: 40px; font-weight: 700; color: var(--brand-accent); }
.selection-card h3 { font-size: 20px; font-weight: 700; }
.selection-card p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 1100px) {
  .story-about .container { flex-direction: column; align-items: stretch; gap: 32px; }
  .story-about-photo { width: 100%; max-width: 520px; height: 340px; margin-inline: auto; }
  .selection-grid { grid-template-columns: 1fr; }
}

/* ---- New contact section (form + CTA) ---- */

.story-contact {
  background: var(--white);
  padding-block: 100px;
}
.story-contact .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 80px;
}
/* Was a fixed 680 beside a fixed 520 form + 80 gap = 1280 exactly, which
   overflowed the container on any screen under ~1440px. The text column now
   takes what is left and caps at the design width. */
.story-contact-content {
  flex: 1 1 auto;
  width: auto;
  max-width: 680px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 24px;
  text-align: right;
}
.story-contact-content h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.story-contact-content p { color: var(--text-secondary); line-height: 1.6; font-size: 20px; }

.story-contact-form {
  width: 520px;
  flex: none;
  background: var(--surface-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.story-contact-form h2 { font-size: 20px; font-weight: 700; text-align: right; }
.story-contact-form .btn { justify-content: center; margin-top: 8px; }

@media (max-width: 1100px) {
  .story-contact .container { flex-direction: column; align-items: stretch; gap: 40px; }
  .story-contact-content,
  .story-contact-form { width: 100%; }
}

/* ---- Story responsive ---- */

@media (max-width: 1100px) {
  .story-hero .container { flex-direction: column; align-items: stretch; min-height: 0; }
  .story-photo { width: 320px; height: 320px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .story-photo { width: 240px; height: 240px; }
  .story-intro h1 { font-size: 32px; }
}

/* ============================================
   Story page — colour corrections to match Figma
   --------------------------------------------
   Figma puts this page on pure white, and the contact
   band is NOT the green accent: it is transparent with
   dark type, with the card itself carrying the tint.
   Scoped to .story-page so the other pages are untouched.
   ============================================ */

.story-page { background: #FFFFFF; }
.story-page .site-header { background: #FFFFFF; }
.story-hero { background: #FFFFFF; }

/* Secondary type on this page is #39433B, not the global secondary. */
.story-page .nav { color: #39433B; }
.story-page .story-text { color: #39433B; }
.story-page .pro-links__label { color: #39433B; }

/* Quote band text is a warm off-white in the design. */
.story-page .mission blockquote,
.story-page .mission .attrib { color: #F8F8F8; }

/* Footer icon chips are the light surface in this design. */
.story-page .site-footer .socials a { background: #FAFBF9; color: var(--text-on-tag); }
.story-page .site-footer .socials a:hover { background: var(--brand-accent); color: var(--white); }

/* ---- New story-page section colours (About / Selection / Contact) ---- */
.story-page .story-about-content p,
.story-page .selection-card p { color: #39433B; }
.story-page .story-contact-content p { color: #39433B; }

/* ============================================
   Column geometry corrected against Figma
   --------------------------------------------
   Every number below was read off the Figma frames, not guessed.
   The bug these fix: text columns were sized with `flex: 1`, so they
   grew to whatever space was left instead of the fixed width the
   design gives them. That moved the right edge of the copy, which is
   what showed up as "the text isn't aligned right".
   ============================================ */

/* Hero — Figma: row is CENTRE-packed, deck 519 + gap 64 + content 600.
   Total 1183 inside a 1280 container, so 48px of air on each side. */
.hero .container { justify-content: center; gap: 64px; }
.hero-content { flex: none; width: 600px; }

/* About — Figma: CENTRE-packed, content 540 + gap 80 + photo 480. */
.about .container { justify-content: center; gap: 80px; }
.about-content { flex: none; width: 540px; }
.about-content p { max-width: none; }

/* Landing contact — Figma: packed from the start edge,
   form 480 + gap 80 + text 720 = exactly the 1280 container. */
.contact .container { justify-content: flex-start; gap: 80px; }
/* The form keeps its Figma width; the text column takes what is left and
   caps at the Figma 720. They used to be BOTH fixed (480 + 80 + 720 = 1280),
   which overflowed the container on every screen under ~1440px — worse the
   narrower it got — until the 1100px stacking rule finally rescued it. */
.contact-form { flex: none; width: 480px; max-width: 100%; }
.contact-content { flex: 1 1 auto; width: auto; max-width: 720px; min-width: 0; }
.contact-content p { max-width: none; }

/* Footer link columns — Figma gap is 64px. */
.footer-cols { gap: 64px; }

/* Fixed widths must not survive into the stacked layouts. */
@media (max-width: 1100px) {
  .hero-content,
  .about-content,
  .contact-content,
  .contact-form { width: 100%; }
  .hero .container,
  .about .container,
  .contact .container { justify-content: flex-start; gap: 40px; }
}

/* Profile form submit — Figma centres the label inside a full-width
   button (416px inside the 480px card). Without this the label packs
   to the RTL start edge and sits ~90px right of the design. */
.quote-form .btn { justify-content: center; }

/* Figma: details column caps at 720px, but shrinks rather than overflowing
   the container on screens between the stacking breakpoint and 1440px. */
.profile-details { flex: 1 1 auto; width: auto; max-width: 720px; min-width: 0; }
@media (max-width: 1100px) {
  .profile-details { width: 100%; }
}

/* ============================================
   Legal page ("משפטי ומנהלתי")
   ============================================ */

.legal-hero {
  background: var(--surface-bg);
  padding-block: 64px;
}
.legal-hero h1 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.legal-hero p {
  margin-top: 16px;
  max-width: 720px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-main .container {
  display: flex;
  flex-direction: row-reverse;  /* content left, quick-nav right — as in Figma */
  align-items: flex-start;
  gap: 64px;
  padding-block: 40px 100px;
}

.legal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 48px;
  scroll-margin-top: 96px;  /* keep the heading clear of the sticky header when jumped to */
}
.legal-content h2:first-child { margin-top: 0; }
.legal-article {
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-content h2 + .legal-article { padding-top: 24px; }
.legal-article h3 { font-size: 20px; font-weight: 700; }
.legal-article p { color: var(--text-secondary); line-height: 1.7; }

.legal-nav {
  width: 320px;
  flex: none;
  position: sticky;
  top: 105px;
  background: var(--surface-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-nav__title { font-size: 16px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.legal-nav__link {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legal-nav__link:hover { background: var(--surface-tag); }
.legal-nav__link.is-active { background: var(--brand-primary); color: var(--white); }

@media (max-width: 1100px) {
  .legal-main .container { flex-direction: column; align-items: stretch; }
  .legal-nav { width: 100%; position: static; }
}

/* ============================================
   Add-a-review form
   --------------------------------------------
   Built from the Figma `ReviewsSection` frame. Sits directly under
   the published reviews on every professional's page.

   RTL note: the rating row places its label on the right like every
   other label on the card, and the stars at the far end — the Figma
   frame puts the label on the left, which is the one place in that
   design where a Hebrew label leaves the right edge.
   ============================================ */

.reviews-add {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = right edge under RTL */
  gap: 8px;
  text-align: right;
}
.reviews-add h3 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.reviews-add p { color: var(--text-secondary); line-height: 1.7; }

.review-form {
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Rating ---- */

/* A role="group" + aria-labelledby, rather than fieldset/legend: a
   <legend> is laid out outside its fieldset's box and so cannot take
   part in the row, which is exactly what this layout needs it to do. */
.rating-row {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rating-label { font-size: 16px; font-weight: 500; }

.star-input { display: inline-flex; gap: 4px; }
/* Real radios drive the state; they are hidden visually but stay
   focusable, so the control is fully keyboard operable. */
.star-input input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.star-input label {
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.star-input label:hover { transform: scale(1.12); }
.star-input svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Fill every star up to and including the one chosen. */
.star-input:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1),
.star-input:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2),
.star-input:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3),
.star-input:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4),
.star-input:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5) {
  color: var(--star);
}
.star-input:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1) svg,
.star-input:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2) svg,
.star-input:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3) svg,
.star-input:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4) svg,
.star-input:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5) svg {
  fill: var(--star);
}
/* Keyboard focus must be visible even though the input itself is not. */
.star-input input:focus-visible + label {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ---- Fields + footer ---- */

.review-form .field input,
.review-form .field textarea { background: var(--white); }
.review-form .field textarea { min-height: 132px; height: 132px; }

.review-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.review-form-foot .btn { padding-inline: 32px; }
.review-note { font-size: 16px; color: var(--text-secondary); }

@media (max-width: 700px) {
  .review-form { padding: 24px; }
  .rating-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .review-form-foot { flex-direction: column-reverse; align-items: stretch; }
  .review-form-foot .btn { justify-content: center; }
  .review-note { text-align: center; }
}


/* The "מומלץ אישית" mark that sits beside the role on a card. */
.pro-endorsed {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-on-tag);
}

/* Anchors jumped to from a hero button must clear the sticky header. */
#reviewForm, .reviews-add { scroll-margin-top: 96px; }

/* One published review should not sit in a third of the row looking like
   two are missing — same treatment the professionals grid already gets. */
.reviews-row:has(.review-card:only-child) {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* ---- Consent tick required by the Privacy Protection Law ----
   Sits directly above the submit button on every form. Deliberately
   plain text rather than fine print: the point is that it is read. */
.field--consent { margin-top: 4px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: right;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.consent a { text-decoration: underline; color: var(--text-primary); }
.consent a:hover { color: var(--brand-accent); }
/* The tick is small, so the whole label carries the 44px touch target. */
.consent { min-height: 44px; padding-block: 4px; }

/* ============================================
   Hero deck — the people themselves
   --------------------------------------------
   The deck used to hold abstract principle cards. It now carries the
   real photo, name and trade of everyone in the list, cycling through
   them, so the hero answers its own headline with faces.
   ============================================ */

.deck-card {
  /* Photo-led now, so the card is taller and packs from the top rather
     than centring a short block of text in a mostly empty box. */
  justify-content: flex-start;
  padding: 16px 16px 20px;
  gap: 0;
  overflow: hidden;
}
.deck-photo {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: var(--radius);
  flex: none;
}
.deck-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px 0;
  text-align: center;
}
.deck-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease);
}
.deck-name:hover { color: var(--brand-accent); text-decoration: underline; }
.deck-role {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.deck-card .deck-tag { margin-top: 4px; }

/* The hero was a fixed 828px tall holding ~400px of content, which left a
   wide band of dead white above and below. Let the taller deck set the
   height instead. */
.hero .container { min-height: 0; padding-block: 72px 88px; }

@media (max-width: 1100px) {
  .hero .container { padding-block: 48px 64px; }
}
@media (max-width: 700px) {
  .deck-card { width: 272px; }
  .deck-photo { height: 150px; }
  .deck-name { font-size: 20px; }
}

/* The deck box was 500px tall for a 336px text card. The photo card is
   296px and the stack rises ~60px above it, so ~380px is the real extent —
   anything more is the dead band that made the hero feel unanchored. */
.deck { height: 380px; }
@media (max-width: 700px) { .deck { height: 350px; } }

/* ============================================
   Video intro hero
   ============================================
   The clip is pinned under the header while the white hero below scrolls
   up over it, so the video "disappears" and the question takes the screen.
   Pinning means every later block must paint above it: sections with no
   background of their own get white here, and all of them get their own
   layer. Without that, static section backgrounds paint *below* the
   positioned video and the clip shows through halfway down the page. */

.video-hero {
  position: -webkit-sticky;
  position: sticky;
  top: 73px;                        /* height of the sticky header */
  z-index: 0;
  height: calc(100vh - 73px);
  height: calc(100svh - 73px);      /* svh: ignores mobile browser chrome */
  min-height: 420px;
  overflow: hidden;
  background: #0F1912;              /* shown for the instant before the poster paints */
}
.video-hero__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controls sit on their own opaque pill, so their contrast never depends
   on which frame of the video happens to be underneath. */
/* ---- Hero badge + CTAs, now that the headline sits on the film ---- */
.video-hero__badge { pointer-events: none; }
.video-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;   /* the one part of the block that is clickable */
  margin-top: 8px;
}
/* The page-wide secondary button is a dark outline, which disappears against
   the film. On the hero it takes the Figma's filled sage pill instead. */
.video-hero .btn-secondary {
  background: var(--surface-tag);
  color: var(--text-on-tag);
  border-color: transparent;
}
.video-hero .btn-secondary:hover {
  background: var(--white);
  color: var(--text-on-tag);
  border-color: transparent;
}
@media (max-width: 700px) {
  .video-hero__text { gap: 14px; }
  .video-hero__ctas { gap: 12px; }
}

.video-hero__toggle,
.video-hero__scroll {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 25, 18, 0.78);
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.video-hero__toggle:hover,
.video-hero__scroll:hover { background: rgba(15, 25, 18, 0.95); }
.video-hero__toggle:focus-visible,
.video-hero__scroll:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.video-hero__toggle svg,
.video-hero__scroll svg { width: 20px; height: 20px; }

/* Left corner (inline-end under RTL): the accessibility launcher already
   owns the right one. */
.video-hero__toggle { inset-inline-end: 24px; bottom: 28px; }
.video-hero__scroll { inset-inline: 0; margin-inline: auto; bottom: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .video-hero__scroll { animation: heroNudge 2.2s var(--ease) infinite; }
}
@keyframes heroNudge {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(6px); }
}

@media (max-width: 700px) {
  .video-hero__toggle { inset-inline-end: 16px; bottom: 20px; }
  .video-hero__scroll { bottom: 20px; }
  /* A 16:9 clip in a portrait window crops hard. Centred it lands on the
     back of a head; this holds the crop on the two faces instead. */
  .video-hero__media { object-position: 72% 34%; }
}

/* ---- Layers above the pinned video ---- */
.hero, .mission, .about, .criteria, .professionals, .contact, .site-footer {
  position: relative;
  z-index: 1;
}
.hero, .about, .contact { background-color: var(--page-bg); }

/* The question the arrow jumps to must clear the sticky header. */
#start { scroll-margin-top: 73px; }

/* ---- Hero without the card deck ----
   With the video carrying the opening, the hero is a title card: one
   question, centred on white, and nothing competing with it. */
.hero .container {
  justify-content: center;
  gap: 0;
  padding-block: 120px 128px;
}
.hero-content {
  flex: none;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.hero-content h1 { font-size: clamp(34px, 5.4vw, 60px); }
.hero-sub { max-width: 620px; }
.hero-ctas { justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .hero .container { padding-block: 64px 72px; }
}

/* ---- Welcome line over the clip ----
   White text on video only passes contrast if we put something opaque
   behind it. The scrim is darkest exactly where the words sit and fades
   out towards the edges, so the picture keeps its light without the
   sentence ever dropping below 4.5:1 on a bright frame. */
.video-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Centred on the copy block (top: 40%), not on the old caption position,
     so the darkest part of the wash sits behind the headline. */
  background: radial-gradient(ellipse 78% 58% at 50% 42%,
              rgba(15, 25, 18, 0.78) 0%,
              rgba(15, 25, 18, 0.58) 55%,
              rgba(15, 25, 18, 0.24) 100%);
}
.video-hero__text {
  position: absolute;
  inset-inline: 0;
  top: 40%;              /* where the block sits in the Figma frame */
  transform: translateY(-50%);
  padding-inline: 24px;
  /* The block itself stays click-through so it never steals a click from
     the pause button underneath it; only the CTAs take pointer events. */
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.video-hero__title {
  margin: 0;
  color: #FFFFFF;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.video-hero__subtitle {
  margin: 0;
  color: #FFFFFF;
  font-weight: 600;
  font-size: clamp(16px, 2.6vw, 28px);
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* Small phones: the floor above (18px) forces a wrap. Let it shrink
   further here so the line stays on one row. */
@media (max-width: 480px) {
  .video-hero__subtitle { font-size: 16px; }   /* was clamp(10px…): 16 is the site floor now */
}

/* ---- "אני נתי" — the underline draws itself ----
   The stroke rides on .about-content's existing reveal class, so it starts
   only once the paragraph has actually arrived — no second observer, and it
   can never fire while the section is still off screen. Default state is an
   undrawn line; every path that turns the animation off has to put the
   dash offset back to zero itself, or the line would simply never show. */
.name-mark { position: relative; display: inline-block; white-space: nowrap; }
.name-underline {
  position: absolute;
  inset-inline: -6px;
  bottom: -0.22em;
  width: calc(100% + 12px);
  height: 0.28em;
  overflow: visible;
  pointer-events: none;
}
.name-underline path {
  fill: none;
  stroke: var(--brand-accent);   /* overridden inside the dark band below */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
@media (prefers-reduced-motion: no-preference) {
  .about-content.is-visible .name-underline path {
    animation: drawNameUnderline 900ms cubic-bezier(.65, 0, .35, 1) 420ms forwards;
  }
}
@keyframes drawNameUnderline { to { stroke-dashoffset: 0; } }

/* Motion off, by system setting or by the accessibility panel: show the
   finished line rather than nothing at all. */
@media (prefers-reduced-motion: reduce) {
  .name-underline path { stroke-dashoffset: 0; }
}
.a11y-stop-motion .name-underline path { stroke-dashoffset: 0 !important; }

/* ============================================
   "קצת עליי" — dark band
   ============================================
   The section drops out of the white run of the page into deep green, and
   the photo runs off the edge of the screen instead of floating inside the
   container. Type sizes and weights are untouched — only colour and layout
   change here, so nothing has to be re-decided if the typography changes
   later. */

.about {
  background: var(--about-bg);
  color: var(--white);
}
.about .container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: center;
  gap: 0;
  min-height: 560px;
}
/* The photo comes first in the markup so it reads first without CSS, but on
   screen it belongs in the left column with the text on the reading edge. */
/* Both rows pinned: with only grid-column set, auto-placement refuses to
   move backwards and drops the second item onto a second row. */
.about-content { grid-column: 1; grid-row: 1; }
.about-photo   { grid-column: 2; grid-row: 1; }
.about-content {
  width: auto;
  flex: none;
  padding-block: 76px;
  /* Keeps the text on the site's own gutter, so it lines up with every
     other section even though the container's padding is gone. */
  /* RTL: inline-START is the right-hand page edge. This carries the site's
     own gutter so the text lines up with every section above and below;
     inline-END is the inner side, against the photo. */
  padding-inline-start: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  padding-inline-end: 64px;
}
.about-content p { color: var(--about-ink-soft); max-width: 52ch; }
.about-content .badge {
  background: transparent;
  color: var(--about-ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.about-content .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.about-content .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  color: var(--white);
}
/* Figma insets the portrait inside the green band — 526x558 with 80px to
   the outer page edge and 106px above and below — instead of bleeding it to
   the edge of the screen. RTL note: the photo sits in the left column, so
   its screen-left edge is inline-END and the side facing the text is
   inline-START. */
.about-photo {
  width: 100%;
  max-width: 526px;
  height: auto;
  aspect-ratio: 526 / 558;
  min-height: 0;
  flex: none;
  border: none;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center 22%;
  margin-block: 106px;
  margin-inline: 56px 80px;
  justify-self: end;      /* = the left edge of the column, under RTL */
}

@media (max-width: 980px) {
  .about .container {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .about-photo {
    /* The desktop inset (526 wide, 56/80 side margins) is a two-column
       measurement — carried into the stacked layout it pushed the photo
       80px past the screen edge. Here it simply sits on the page gutter. */
    min-height: 0;
    height: 340px;
    /* width:auto on an <img> falls back to the file's own aspect ratio, which
       made it 385px wide at height 340 and pushed it off the screen. An
       explicit width keeps it on the gutter at every phone size. */
    aspect-ratio: auto;
    width: calc(100% - 2 * var(--gutter));
    max-width: none;
    justify-self: center;
    margin-block: 48px 0;
    margin-inline: auto;
    object-position: center 12%;   /* his eyes survive the shallower crop */
    grid-column: 1;
    grid-row: 1;        /* the face comes first on a phone */
  }
  .about-content { grid-column: 1; grid-row: 2; }
  .about .container { grid-template-rows: auto auto; }
  .about-content {
    padding-block: 48px 56px;
    padding-inline: var(--gutter);
  }
}

/* The underline sits on deep green here, so the mid-green stroke would
   disappear into it. */
.about .name-underline path { stroke: #8FBF97; stroke-width: 3.5; }

/* ============================================
   "קצת עליי" page — the hero is the same band
   ============================================
   The story page opens where the homepage section left off, so it gets the
   identical treatment: deep green, photo off the edge, white text. Sizes and
   weights are untouched — only colour and layout. */

.story-hero {
  background: var(--about-bg);
  color: var(--white);
}
.story-hero .container {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: center;
  gap: 0;
  min-height: 640px;
}
.story-intro {
  grid-column: 1;
  grid-row: 1;
  flex: none;
  padding-block: 76px;
  /* RTL: inline-START is the right-hand page edge. This carries the site's
     own gutter so the text lines up with every section above and below;
     inline-END is the inner side, against the photo. */
  padding-inline-start: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  padding-inline-end: 64px;
}
.story-photo {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 640px;
  border: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center 22%;
}

/* These beat the .story-page light-mode overrides further up the file. */
.story-page .story-hero .story-text,
.story-page .story-hero .pro-links__label { color: var(--white); }
.story-page .story-hero h1 { color: var(--white); }
.story-page .story-hero .badge {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 980px) {
  .story-hero .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .story-photo {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 340px;
    min-height: 0;
    object-position: center 12%;
  }
  .story-intro {
    grid-column: 1;
    grid-row: 2;
    padding-block: 48px 56px;
    padding-inline: var(--gutter);
  }
}

/* ============================================
   "קצת עליי" — section colours, matching Figma
   ============================================
   Reading down the page the bands now go
   deep green → white → off-white → sage → white → dark footer,
   so no two coloured bands ever touch each other. All three of these
   sections live only on this page, so the rules are scoped to it and
   nothing else on the site moves. */

/* 1. The Einstein quote sits on white, not on the accent green. */
.story-page .mission { background: var(--page-bg); color: var(--text-primary); }
.story-page .mission blockquote { color: var(--text-primary); }
.story-page .mission .attrib { color: var(--text-secondary); }
.story-page .mission-mark { color: var(--brand-accent); opacity: 1; }

/* 2. "אודות פרויקט אנשים טובים" — off-white, so it separates from the
      white quote above it without shouting. */
.story-page .story-about { background: var(--surface-bg); }

/* 3. "איך אני בוחר את אנשי המקצוע שלי" — sage, the same tint the
      professionals grid uses on the homepage. */
.story-page .selection { background: var(--surface-tag); }

/* ============================================
   "קצת עליי" — UI polish pass
   ============================================
   Everything here brings this page onto the values the rest of the site
   already uses. No new patterns, no new tokens: each rule below points at
   an existing homepage equivalent.
   Font SIZES are corrected at the end of accessibility.css instead, because
   that file loads last and re-declares every size to apply the reader's
   zoom — a size set here would simply be overwritten. */

/* -- Rhythm: 96 / 96 / 100 / 100, the same run as the homepage
      (criteria 96, professionals 100, contact 100). Was 64 / 80 / 80 / 100. -- */
.story-page .mission { padding-block: 96px; }
.story-page .story-about .container { padding-block: 96px; }
.story-page .selection { padding-block: 100px; }

/* The quote's 140px inset left only ~110px of text on a phone. Now it eases
   down to the page gutter instead of holding a desktop measure. */
.story-page .mission .container { padding-inline: clamp(var(--gutter), 10vw, 140px); }

/* -- Body copy: the site sets 1.7 everywhere (.about-content p,
      .criteria p, .story-about-content p). The hero paragraph was 1.8. -- */
.story-page .story-text { line-height: 1.7; }

/* -- Headings: h2 line-height is 1.2 across the site; this one was 1.5.
      The big numeral was carrying a 1.5 body line-height too. -- */
.story-page .selection-header h2 { line-height: 1.2; }
.story-page .selection-num { line-height: 1.1; }

/* -- The intro paragraph in the contact block matches its homepage twin. -- */
.story-page .story-contact-content p { line-height: 1.7; }

/* -- The project photo was pinned to 520px, so between 900 and 1200 the text
      column was squeezed to ~350px. Fluid, like .about-photo on the
      homepage, with the same 4:3 proportion it has now. -- */
.story-page .story-about-photo {
  width: 44%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 4 / 3;
  flex: 0 0 44%;
}
@media (max-width: 900px) {
  .story-page .story-about-photo {
    width: 100%;
    max-width: 520px;
    flex: none;
    margin-inline: auto;
  }
}