/* ============================================================
   Efrat Stern — main.css · layout, components, motion
   Loads after theme.css. Every colour / font / radius reads from
   the tokens defined there. Hand-drawn SVG underlines + paper
   grain + Caveat handwriting accents form the V2 scrapbook layer.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Paper grain — fixed overlay across the whole viewport ────
   SVG feTurbulence noise, inlined as a data: URL so there's no extra
   request. Sits above every surface but below all content, so it
   tints both light AND dark sections with the same fine paper grain.
   Opacity tuned low (~5%) so it reads as material, not as visual
   noise. The blend-mode multiply keeps it darkening only — the
   light surfaces gain warmth, the dark sections gain texture. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0.22; }
}

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

::selection { background: var(--accent); color: var(--text-inverse); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade.v { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1 !important; transform: none !important; }
  .morph-word { animation: none !important; }
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -60px;
  background: var(--ink);
  color: var(--text-inverse);
  padding: 0.625rem 1rem;
  border-radius: 4px;
  z-index: 999;
  font-weight: 500;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ── Trust strip above nav ───────────────────────────────────
   Credential band that establishes authority in 2 seconds
   before the visitor even reaches the hero. Subtle paper bg,
   thin rule below, terracotta dot separators. Scrolls away
   normally — only the nav below it is sticky. */
.trust-strip {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  padding: 0.625rem 1.5rem;
  position: relative;
  z-index: 201;
}
.trust-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.trust-strip__sep {
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 900px) {
  .trust-strip { padding: 0.5rem 1rem; }
  .trust-strip__inner { font-size: 0.68rem; gap: 0.4rem; }
  /* Hide alternating items on small screens so we don't wrap to 3 lines. */
  .trust-strip__inner > span:nth-child(n+5) { display: none; }
}

/* ── Type scale ───────────────────────────────────────────── */
.t-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--text-faint);
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(241, 233, 216,0.92);
  backdrop-filter: blur(14px);
  padding: 0 3rem;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
}
.nav-logo__sep {
  color: var(--rule);
  font-weight: 400;
  font-size: 1em;
}
.nav-logo__tag {
  font-weight: 700;
  color: var(--text);
}
/* "אחרת" — italic accent, mirrors footer-frieze sign-off. */
.nav-logo__tag em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
/* On narrow screens the nav has to fit the menu CTA + logo;
   drop the tagline + separator and keep just the name. */
@media (max-width: 600px) {
  .nav-logo__sep,
  .nav-logo__tag { display: none; }
}
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  /* Hand-drawn underline that draws in on hover — same SVG path the
     section eyebrows use, scaled to nav-link width. clip-path animates
     left-to-right so visually (in RTL) the line reads as drawn from
     the word start. */
  content: '';
  position: absolute;
  inset-inline: -0.1em;
  bottom: -0.25em;
  height: 0.5em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' preserveAspectRatio='none'><path d='M3 10 C 25 4, 50 14, 78 9 S 130 4, 157 11' fill='none' stroke='%23B07F2A' stroke-width='3' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.nav-links a:not(.nav-cta):hover { color: var(--text); }
.nav-links a:not(.nav-cta):hover::after { clip-path: inset(0 0 0 0); }
.nav-links a:not(.nav-cta).is-current { color: var(--text); }
.nav-links a:not(.nav-cta).is-current::after { clip-path: inset(0 0 0 0); }

/* ── Inner-page hero — a quieter band than the full-bleed homepage
   hero. Used at the top of about / method / pricing / faq / booking
   pages: eyebrow + h1 + lede on linen, no image. */
.page-hero {
  padding: 6rem 3.5rem 3.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.page-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.page-hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.page-hero h1 em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.page-hero__lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}
@media (max-width: 700px) {
  .page-hero { padding: 4rem 1.5rem 2.5rem; }
}

/* ── Inner-page body container — for prose-heavy pages that don't
   need a custom section layout. Use as `<section class="page-body">`
   wrapping a `.page-body__inner` for max-width control. */
.page-body {
  padding: 4rem 3.5rem;
  background: var(--bg);
}
.page-body--alt { background: var(--bg-alt); }
.page-body__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.page-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.page-body h2 em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}
.page-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  margin: 2rem 0 0.625rem;
}
.page-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  max-width: 62ch;
}
.page-body p strong { color: var(--text); font-weight: 700; }
.page-body ul:not([class]) {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 62ch;
}
.page-body ul:not([class]) li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-inline-start: 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.page-body ul:not([class]) li::before {
  content: '—';
  color: var(--accent);
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}
.page-body .lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 56ch;
  margin-bottom: 2rem;
}
@media (max-width: 700px) {
  .page-body { padding: 3rem 1.5rem; }
}

/* ── Inner-page handmade chrome ──────────────────────────────
   A small library of scrapbook moments inner pages use so they
   don't read as a Word document. Every component reads from the
   established palette + the Caveat handwritten font. */

/* Photographic figure embedded in page-body prose. Soft sepia tint
   to match the page palette, optional handwritten caption beneath.
   Use .page-image--wide for full-width, .page-image--inline for
   half-width floated to the start side. */
.page-image {
  margin: 2.5rem auto;
  max-width: 100%;
}
.page-image__frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--rule);
}
.page-image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(0.92);
}
.page-image__caption {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-hand);
  font-size: 1.125rem;
  color: var(--text-muted);
  text-align: center;
}
.page-image--inline {
  float: inline-start;
  inline-size: 45%;
  max-width: 380px;
  margin: 0.5rem 0 1rem;
  margin-inline-end: 2rem;
}
.page-image--inline .page-image__frame { aspect-ratio: 4 / 3; }
@media (max-width: 700px) {
  .page-image--inline { float: none; inline-size: auto; max-width: 100%; margin-inline-end: 0; }
}

/* Handwritten "field note" margin block — like a margin annotation
   in someone's notebook. Used to break up long prose with a
   personal aside. */
.field-note {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--bg-alt);
  border-inline-start: 3px solid var(--accent);
  /* Logical radii so the rounded corners end up on the FAR side from
     the border. Was `border-radius: 0 4px 4px 0` (physical) — that
     rounded the wrong corners in RTL. */
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  position: relative;
}
.field-note__label {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.field-note p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: none;
}

/* Pull-quote — Open Sans italic, oversize, terracotta start-rule.
   Used to break up About / Method prose with a memorable line.
   Padding uses LOGICAL properties so the text always sits on the
   far side of the border, not against it (the previous physical
   `padding: ... 1.5rem` put the gap on the LEFT in RTL while the
   border was on the RIGHT — text crashed into the border). */
.page-quote {
  margin: 2.5rem 0;
  padding-block: 0.5rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 4px solid var(--accent);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
}
.page-quote__cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.125rem;
  color: var(--text-muted);
}

/* Polaroid-style image with handwritten caption. White frame,
   slight rotation, soft shadow. */
.polaroid {
  display: inline-block;
  background: #fff;
  padding: 0.875rem 0.875rem 2.5rem;
  box-shadow: 0 8px 22px -10px rgba(31, 27, 20, 0.3);
  transform: rotate(-1.5deg);
  margin: 2rem auto;
  position: relative;
  max-width: 360px;
}
.polaroid img {
  display: block;
  width: 100%;
  height: auto;
}
.polaroid__caption {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.125rem;
  color: var(--ink);
}
.polaroid--right { transform: rotate(1.5deg); }
.polaroid--center { display: block; margin: 2rem auto; }

/* Small data block — three labelled stats in a row, Caveat numerals.
   Used on About / Method to bring the page's editorial register to
   numeric content. */
.page-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-block: 1px solid var(--rule);
}
.page-figures__cell {
  text-align: center;
  padding: 0 1rem;
  position: relative;
}
.page-figures__cell:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0.5rem;
  width: 1px;
  background: var(--rule);
}
.page-figures__v {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.875rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.page-figures__k {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .page-figures { grid-template-columns: 1fr; gap: 1rem; }
  .page-figures__cell:not(:last-child)::after { display: none; }
  .page-figures__cell { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .page-figures__cell:last-child { border: 0; }
}

/* ── Form styling — used by booking.html and any contact / intake
   form a buyer wires up. Buyer connects the action attribute to
   Netlify Forms / Formspree / a self-hosted endpoint of their
   choice. */
.eden-form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.eden-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.eden-form__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.eden-form__label .required {
  color: var(--accent);
  margin-inline-start: 0.2em;
}
.eden-form__hint {
  font-size: 0.8125rem;
  color: var(--text-faint);
  line-height: 1.5;
}
.eden-form__input,
.eden-form__textarea,
.eden-form__select {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 0.875rem;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.eden-form__textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.eden-form__input:focus,
.eden-form__textarea:focus,
.eden-form__select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.eden-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.eden-form__radio-group,
.eden-form__check-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.eden-form__radio-group label,
.eden-form__check-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}
.eden-form__radio-group input,
.eden-form__check-group input { accent-color: var(--accent); }
.eden-form__submit {
  justify-self: start;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 2rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              box-shadow 0.3s ease;
  cursor: pointer;
}
.eden-form__submit:hover {
  background: var(--ink);
  transform: translateY(-2px) rotate(-0.6deg);
  box-shadow: 0 10px 22px -12px rgba(31, 27, 20, 0.4);
}
@media (max-width: 700px) {
  .eden-form__row { grid-template-columns: 1fr; }
}

/* ── Utility-page layout — small standalone status pages
   (intake-confirmed, session-rescheduled, etc.). Centred card on
   linen, no fancy chrome. */
.utility-page {
  min-height: calc(100vh - 64px);
  padding: 6rem 1.5rem 4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg);
}
.utility-card {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--accent);
  border-radius: 6px;
  padding: 2.5rem 2.25rem;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 2px 0 rgba(31, 27, 20, 0.04);
}
.utility-card__eyebrow {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.utility-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1rem;
}
.utility-card p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.utility-card__divider {
  border: 0;
  border-top: 1px dashed var(--rule);
  margin: 1.5rem 0;
}
.utility-card .utility-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s ease;
}
.utility-card .utility-card__cta:hover {
  background: var(--ink);
  transform: translateY(-1px) rotate(-0.4deg);
}
.utility-card__details {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border-radius: 4px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}
.utility-card__details dt {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--accent);
  white-space: nowrap;
}
.utility-card__details dd {
  margin: 0;
  color: var(--text);
}
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav-cta:hover {
  background: var(--ink);
  transform: translateY(-1px) rotate(-0.6deg);
}

@media (max-width: 900px) {
  .nav { padding: 0 1.25rem; }
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ── HERO — full-bleed warm image + text overlay ──────────── */
.hero {
  position: relative;
  height: calc(100vh - 64px);
  min-height: 620px;
  max-height: 760px;
  overflow: hidden;
  display: flex;
  /* Content sits vertically centred in the hero band, so it has
     equal breathing room above (toward the nav) and below (toward
     the manifesto). */
  align-items: center;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly darken + desaturate the image itself so the white type
     never has to fight a bright highlight in the underlying photo. */
  filter: sepia(0.05) saturate(0.85) brightness(0.7);
}
/* Two stacked scrims — a soft top-and-bottom gradient that puts a
   slightly darker band across the centre where the (now-centred)
   text sits, plus a flat ink wash that takes the floor up
   everywhere. Combined effect: white type reads at WCAG AA on any
   pixel of the image. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(31, 27, 20, 0.35) 0%,
      rgba(31, 27, 20, 0.55) 25%,
      rgba(31, 27, 20, 0.62) 50%,
      rgba(31, 27, 20, 0.55) 75%,
      rgba(31, 27, 20, 0.4) 100%),
    rgba(31, 27, 20, 0.2);
}
.hero-content {
  position: relative;
  z-index: 2;
  /* Symmetric inline padding; vertical padding handled by flex
     centring on the parent. Slight bottom padding so the stats
     don't sit too close to the very bottom on tall viewports. */
  padding: 1rem 3.5rem 1rem;
  max-width: 900px;
  width: 100%;
}
.hero-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--soft);
  margin-bottom: 1rem;
  display: inline-block;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero h1 .line {
  display: block;
  /* Each line drifts up + fades in on page load, staggered. Feels
     like writing appearing on a page, not like a SaaS hero reveal.
     Lines 2 and 3 use animation-delay so they cascade. */
  opacity: 0;
  transform: translateY(0.6em);
  animation: line-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero h1 .line:nth-child(1) { animation-delay: 0.1s; }
.hero h1 .line:nth-child(2) { animation-delay: 0.32s; }
.hero h1 .line:nth-child(3) { animation-delay: 0.54s; }
@keyframes line-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .line {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* morphing word inside hero */
.morph {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.morph-word {
  display: inline-block;
  transition: opacity 0.4s ease;
}
/* Hand-drawn underline — wavy SVG line as a ::after background, sized
   to the word it sits under. SVG is encoded as a data: URL so there's
   no extra request. The path uses cubic curves to feel pencilled, not
   geometric. Drawn-in animation uses background-position rather than
   stroke-dashoffset, because background-image can't be CSS-animated;
   we cheat by clipping width 0→100%. */
.accent-underline {
  position: relative;
  white-space: nowrap;
  /* Tiny bit of padding so the underline doesn't crash into letter feet. */
  padding-bottom: 0.18em;
}
.accent-underline::after {
  content: '';
  position: absolute;
  inset-inline: -0.08em;
  bottom: 0;
  height: 0.34em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' preserveAspectRatio='none'><path d='M3 10 C 25 4, 50 14, 78 9 S 130 4, 157 11' fill='none' stroke='%23B07F2A' stroke-width='3' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: inline-start;
  /* Clip-path draws the line in left-to-right (in LTR coords). For RTL
     the visual reads right-to-left because the SVG itself doesn't flip. */
  clip-path: inset(0 100% 0 0);
  animation: scribble-in 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s forwards;
}
@keyframes scribble-in {
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .accent-underline::after { clip-path: inset(0 0 0 0); animation: none; }
}

/* Reusable scribble underline — applied as a class to em words inside
   section headings, with the line drawn on viewport entry via an
   IntersectionObserver (.is-drawn). Same hand-drawn SVG path as
   .accent-underline, just thinner / shorter. Repeats the hero gesture
   across the whole page so the page reads as one writing hand. */
.scribble-em {
  position: relative;
  white-space: nowrap;
  padding-bottom: 0.08em;
}
.scribble-em::after {
  content: '';
  position: absolute;
  inset-inline: -0.05em;
  bottom: 0;
  height: 0.22em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18' preserveAspectRatio='none'><path d='M3 10 C 25 4, 50 14, 78 9 S 130 4, 157 11' fill='none' stroke='%23B07F2A' stroke-width='3' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.scribble-em.is-drawn::after { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .scribble-em::after { clip-path: inset(0 0 0 0); transition: none; }
}

.hero p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(241, 233, 216, 0.78);
  margin-bottom: 1.75rem;
  max-width: 56ch;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              box-shadow 0.3s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  /* Slight rotation on hover so the button feels like a piece of
     paper being picked up, not a SaaS pill. */
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(31, 27, 20, 0.06);
}
.btn-primary:hover {
  background: var(--bone);
  color: var(--ink);
  transform: translateY(-2px) rotate(-0.6deg);
  box-shadow: 0 10px 22px -12px rgba(31, 27, 20, 0.4);
}
.btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover {
  border-color: var(--soft);
  color: var(--soft);
  transform: translateY(-1px) rotate(0.4deg);
}
.btn .arrow { display: inline-flex; }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }

/* Stat cluster — 4 cells below the CTAs. Animated counters
   bumped via IntersectionObserver below. Bordered top, separators
   between cells, terracotta-soft accent for the small suffix.   */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(241, 233, 216, 0.18);
  list-style: none;
}
.hero-stat {
  padding: 0 1rem;
  position: relative;
}
.hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: rgba(241, 233, 216,0.15);
}
.hero-stat__v {
  /* Caveat handwriting — pencilled stat-numbers, sized so the four
     of them sit comfortably on a single line WITHOUT visually
     competing with the h1 above. The previous 3.75rem cap pushed
     content into the nav. */
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.005em;
  margin: 0;
}
.hero-stat__v em {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 0.6em;
  color: var(--soft);
  margin-inline-start: 0.08em;
  vertical-align: 0.35em;
  font-weight: 700;
}
.hero-stat__k {
  margin: 0.375rem 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(241, 233, 216, 0.6);
}

@media (max-width: 900px) {
  .hero { max-height: none; min-height: 580px; }
  .hero-content { padding: 0 1.5rem 3rem; }
  .hero p { font-size: 0.95rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; margin-top: 2.5rem; padding-top: 1.5rem; }
  .hero-stat:not(:last-child)::after { display: none; }
  .hero-stat:nth-child(odd)::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background: rgba(241, 233, 216,0.15);
    display: block;
  }
  .hero-stat__v { font-size: 1.625rem; }
}

/* ── MANIFESTO — dark counter section ─────────────────────── */
.manifesto {
  background: var(--bg-deep);
  color: var(--text-inverse);
  padding: 6rem 3.5rem;
}
.manifesto-inner {
  max-width: 920px;
  margin: 0 auto;
}
.manifesto-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: rgba(241, 233, 216,0.5);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.manifesto-eyebrow::before {
  content: '';
  display: block;
  width: 60px;
  height: 10px;
  flex: 0 0 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.manifesto-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  color: #fff;
}
.manifesto-body em {
  font-style: italic;
  color: var(--soft);
}
/* Word-by-word progressive reveal — the body splits into spans
   client-side, then each span fades in with a 35ms stagger once
   the paragraph enters the viewport. Feels like reading. */
.manifesto-body .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.manifesto-body.is-revealed .word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .manifesto-body .word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.manifesto-sign {
  margin-top: 2rem;
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  color: rgba(241, 233, 216, 0.78);
}
/* Colophon — small inscription beneath the signature, like a
   periodical's issue note. Mono-flavoured (small caps spacing) so
   it reads as a publication mark, not as another tagline. */
.manifesto-colophon {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(241, 233, 216,0.12);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 233, 216,0.45);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.manifesto-colophon span:not(.sep) {
  display: inline-block;
}
.manifesto-colophon .sep {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: rgba(176, 127, 42,0.7);
}

@media (max-width: 900px) {
  .manifesto { padding: 4rem 1.5rem; }
}

/* ── SECTION HEAD ─────────────────────────────────────────── */
.section-head {
  max-width: 720px;
  margin-bottom: 3.5rem;
}
.section-head__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1rem;
  /* Editorial leading line — same pattern as .manifesto-eyebrow and
     .feature-banner__eyebrow so every section header reads as the same
     magazine. Width is fixed so the line doesn't fight long Hebrew
     section names. */
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.section-head__eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  flex: 0 0 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 1rem;
}
/* Editorial italic accent on a single word/phrase inside any major
   heading — terracotta in light sections, dropped to terracotta as well
   on light surfaces so the page reads as one magazine, not ten. */
.section-head__title em,
.about-content h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}
.section-head__sub {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── EXPERTISE — image-led cards ──────────────────────────── */
.expertise {
  padding: 6rem 3.5rem;
  background: var(--bg);
}
.expertise-inner { max-width: 1200px; margin: 0 auto; }
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.exp-card {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* "Picked up off the desk" tilt — each card gets a tiny rotation
     and a soft shadow on hover, so it feels tactile rather than
     SaaS-clickable. Alternate cards tilt opposite directions for
     extra randomness (handled via :nth-child below). */
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.45s ease;
  box-shadow: 0 1px 0 rgba(31, 27, 20, 0.04);
}
.exp-card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  border-color: var(--accent);
  box-shadow: 0 14px 28px -16px rgba(31, 27, 20, 0.25);
}
.exp-card:nth-child(even):hover {
  transform: translateY(-6px) rotate(0.5deg);
}
.exp-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: sepia(0.06);
}
.exp-card__body {
  padding: 1.75rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.exp-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.exp-card__body p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  flex: 1;
}
.exp-card__signs {
  list-style: none;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.exp-card__signs li {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.exp-card__signs li::before {
  content: '';
  display: block;
  width: 12px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-0.4em);
}
.exp-card__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 0.2rem;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.exp-card__more:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) {
  .expertise { padding: 4rem 1.5rem; }
  .expertise-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── METHOD — animated vertical timeline ──────────────────────
   Four steps on a hand-drawn spine. The spine itself is two SVG
   paths layered: a dashed track (the empty future) and a solid
   wavy line (the path travelled). The solid line's
   stroke-dashoffset is driven by scroll position, so the spine
   visually fills as the visitor moves through the section. Each
   step's circular badge activates when it crosses the viewport
   centre, and the row's content fades in alongside. */
.method {
  padding: 7rem 3.5rem;
  background: var(--bg-alt);
}
.method-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.method-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.method-timeline {
  position: relative;
}

/* The spine — absolutely positioned hand-drawn vertical line that
   spans all four rows. Lives INSIDE the first grid column of every
   row (the node column, 96px wide), centred at 48px from the start
   edge so the 72px badge centres exactly over it. Both spine and
   badges are on the inline-start side — that's the RIGHT in Hebrew
   RTL, the LEFT in LTR. The logical properties handle both. */
.method-timeline__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 44px;
  width: 8px;
  pointer-events: none;
}
.method-timeline__spine svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.method-timeline__track,
.method-timeline__fill {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.method-timeline__track {
  stroke: var(--rule);
  stroke-dasharray: 3 6;
}
.method-timeline__fill {
  stroke: var(--accent);
  /* Path length is normalised via pathLength="100" on the element. */
  stroke-dasharray: 100;
  stroke-dashoffset: var(--fill, 100);
  transition: stroke-dashoffset 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .method-timeline__fill { transition: none; }
}

/* Each row = 3-column grid: timeline node | image | content. The
   node column is fixed width so badges align vertically along the
   spine; the other two share remaining space. */
.method-rows {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}
.method-row {
  display: grid;
  grid-template-columns: 96px 0.9fr 1.2fr;
  gap: 2rem;
  align-items: center;
  position: relative;
}

/* Node — circular badge containing the step number, anchored to
   the spine. Column is 96px wide, badge is 72px, both centred at
   48px from the column's start edge — which is the same horizontal
   position as the spine (inset-inline-start: 44px + 4px half-width
   = 48px). Direction-agnostic. */
.method-row__node {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.method-row__badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.45s ease;
  box-shadow: 0 0 0 6px var(--bg-alt);
}
.method-row.is-active .method-row__badge {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 0 0 6px var(--bg-alt),
              0 12px 24px -14px rgba(31, 27, 20, 0.35);
}
.method-row__num {
  font-family: var(--font-hand);
  font-weight: 700;
  font-style: normal;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
  transition: color 0.45s ease;
}
.method-row.is-active .method-row__num { color: #fff; }

/* Image — same warm crop as before; slightly smaller now that it
   sits between the spine and the content. Subtle scale-on-hover
   feels like flipping a polaroid. */
.method-row__img {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rule);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.method-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(0.92);
  transition: transform 0.6s ease;
}
.method-row:hover .method-row__img { transform: rotate(-0.6deg); }
.method-row:hover .method-row__img img { transform: scale(1.04); }

/* Content — text block. Title bigger now that there's no separate
   numeral block above it. Reveal on row activation (slight rise +
   opacity bump from a muted state). */
.method-row__content {
  padding-inline: 0.25rem;
  opacity: 0.55;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.method-row.is-active .method-row__content {
  opacity: 1;
  transform: translateY(0);
}
.method-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.625rem;
}
.method-row__title em {
  font-style: italic;
  color: var(--accent);
}
.method-row__duration {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  letter-spacing: 0;
}
.method-row__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 56ch;
}
.method-row__output {
  padding: 1rem 1.375rem;
  background: var(--bg);
  border-inline-start: 3px solid var(--accent);
  border-radius: 4px;
  max-width: 56ch;
}
.method-row__output-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.method-row__output-text {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .method { padding: 4.5rem 1rem; }
  .method-head { margin-bottom: 3rem; }
  /* Pull the rows away from the start edge so the spine has room to
     run on the right (in RTL) / left (in LTR). Badge sits inside
     that padded zone. */
  .method-timeline { padding-inline-start: 72px; }
  .method-timeline__spine { inset-inline-start: 32px; }
  .method-rows { gap: 3.5rem; }
  .method-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Pull badge OUT of the row, into the padding zone, anchored to
     the spine. Negative margin-inline-start lifts it -56px (badge
     width) so its centre lands on the spine at 36px from the
     timeline start edge. */
  .method-row__node {
    justify-content: center;
    margin-inline-start: -56px;
    margin-inline-end: auto;
    margin-bottom: 0.5rem;
    width: 56px;
  }
  .method-row__badge { width: 56px; height: 56px; }
  .method-row__num { font-size: 1.875rem; }
  .method-row__output { max-width: 100%; }
}

/* ── ABOUT — portrait + narrative + side quote ────────────── */
.about {
  padding: 6rem 3.5rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.about-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}
.about-portrait {
  border: 1px solid var(--rule);
  padding: 0.75rem;
  background: var(--bg-alt);
}
.about-portrait img {
  width: 100%;
  //filter: grayscale(1) sepia(0.05);
}
.about-side-quote {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--accent);
}
.about-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.about-content .lede {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}
.about-content p { margin-bottom: 1.25rem; color: var(--text-muted); }
.about-creds {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.about-creds li {
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.about-creds li::before {
  content: '—';
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

/* "On my desk now" sidenote — magazine-column flourish under the
   credentials. Reads as a personal field-note rather than a
   credential, which is the editorial register the rest of the page
   is in. Soft-terracotta tinted card, narrow column, italic label. */
.about-desknote {
  margin-top: 2.25rem;
  padding: 1.5rem 1.5rem 1.625rem;
  background: var(--soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
}
.about-desknote__label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.about-desknote__label::after {
  content: '';
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(176, 127, 42,0.25);
}
.about-desknote__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.about-desknote__list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.about-desknote__list li::before {
  content: counter(desknote, decimal) ".";
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 1.5em;
}
.about-desknote__list { counter-reset: desknote; }
.about-desknote__list li { counter-increment: desknote; }
.about-desknote__date {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.125rem;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* "Influences" footnote — single italic line below the desk-now
   card that names three frameworks the practice draws from. Adds
   intellectual depth without bloating the column. Reads as a
   footnote, not a heading. */
.about-influences {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--rule);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.about-influences__label {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.about-influences strong {
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
}

@media (max-width: 900px) {
  .about { padding: 4rem 1.5rem; }
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-desknote { padding: 1.25rem 1.25rem 1.375rem; }
}

/* ── METHOD SUMMARY — homepage-only compact version of the
   method timeline. Four cards in a row, each linking to the full
   step on method.html. Keeps the brand of the method visible on
   the homepage without occupying four screens of vertical space. */
.method-summary {
  padding: 6rem 3.5rem 5rem;
  background: var(--bg-alt);
}
.method-summary__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.method-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.method-summary__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
  box-shadow: 0 1px 0 rgba(31, 27, 20, 0.04);
}
.method-summary__card:hover {
  transform: translateY(-5px) rotate(-0.4deg);
  border-color: var(--accent);
  box-shadow: 0 14px 28px -16px rgba(31, 27, 20, 0.25);
}
.method-summary__card:nth-child(even):hover { transform: translateY(-5px) rotate(0.4deg); }
.method-summary__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--accent);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.method-summary__card:hover .method-summary__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.method-summary__card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}
.method-summary__card h3 em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.method-summary__duration {
  font-family: var(--font-hand);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--text-muted);
}
.method-summary__cta {
  margin-top: 2.75rem;
  text-align: center;
}
.method-summary__cta a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 0.25rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.method-summary__cta a:hover {
  color: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 900px) {
  .method-summary { padding: 4.5rem 1.5rem 3.5rem; }
  .method-summary__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 520px) {
  .method-summary__grid { grid-template-columns: 1fr; }
}

/* ── CASE TEASER — small homepage promo for the full case-study
   page. Single editorial lede + a hand-drawn "read more" link. */
.case-teaser {
  padding: 4.5rem 3.5rem;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.case-teaser__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.case-teaser__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.case-teaser__eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.case-teaser h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.case-teaser h2 em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.case-teaser__lede {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.75rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--accent);
  text-align: start;
}
.case-teaser__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 0.25rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.case-teaser__cta:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 700px) {
  .case-teaser { padding: 3.5rem 1.5rem; }
}

/* ── HAND-DRAWN SECTION ARROW — sits between Method and Feature
   banner. SVG arrow with a squiggle, paths stroke in on viewport
   entry via stroke-dashoffset transition. Reads as a reader's
   margin annotation: "turn the page". */
.section-arrow {
  display: flex;
  justify-content: center;
  padding: 1rem 1.5rem 0;
  background: var(--bg);
}
.section-arrow svg {
  width: 64px;
  height: 96px;
  color: var(--accent);
  opacity: 0.85;
}
.section-arrow svg path,
.section-arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 260);
  stroke-dashoffset: var(--len, 260);
  transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.section-arrow.is-drawn svg path,
.section-arrow.is-drawn svg polyline {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .section-arrow svg path,
  .section-arrow svg polyline {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ── FEATURE BANNER — full-bleed editorial pull-quote ───────
   Sits between Method (04) and About (05) to break the page
   rhythm and give the eye somewhere to rest before the personal
   narrative. Background image is heavily darkened so it reads
   as texture, not subject; the quote does the work. */
.feature-banner {
  position: relative;
  padding: clamp(7rem, 14vw, 10.5rem) 3.5rem;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.feature-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) contrast(1.05);
}
.feature-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(31, 27, 20,0.78) 0%, rgba(47, 90, 63,0.82) 100%);
}
.feature-banner__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.feature-banner__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--soft);
  text-transform: uppercase;
  margin-bottom: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.feature-banner__eyebrow::before,
.feature-banner__eyebrow::after {
  content: '';
  display: block;
  width: 60px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.feature-banner__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 3.4vw, 2.625rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
}
.feature-banner__quote em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--soft);
  display: inline-block;
}
.feature-banner__sign {
  margin-top: 2.5rem;
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.4rem;
  color: rgba(241, 233, 216, 0.82);
  letter-spacing: 0.005em;
}
@media (max-width: 700px) {
  .feature-banner { padding: 5rem 1.5rem; }
  .feature-banner__eyebrow::before,
  .feature-banner__eyebrow::after { width: 32px; }
}

/* ── TESTIMONIAL — pullquote + image, two columns on teal ───
   Open Sans italic for the quote (real italic master, unlike
   Varela Round which has only one weight + no italic). Big
   decorative open-quote mark in soft terracotta. Warm sepia
   image sits opposite so the section reads as an editorial
   feature, not a banner. */
.testimonial {
  /* Section was reading as the page's tallest band, but the content
     is short — a quote + a books-stack image. Reduced vertical
     padding from 7rem and capped the image so the section's
     proportions match its actual content weight. */
  padding: 4.5rem 3.5rem;
  background: var(--teal);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}
.testimonial-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}
.testim-image {
  border-radius: 4px;
  overflow: hidden;
  /* Landscape ratio + height cap — the image is a pile of books on
     wood, which suits a horizontal crop and stops the section from
     being driven by image aspect alone. */
  aspect-ratio: 5/4;
  max-height: 360px;
  background: rgba(241, 233, 216, 0.08);
  position: relative;
}
.testim-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(47, 90, 63,0.15) 0%,
    rgba(47, 90, 63,0.35) 100%
  );
  pointer-events: none;
}
.testim-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.85);
}
.testim-content { position: relative; }
.testim-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--soft);
  margin-bottom: 1.25rem;
}
.testim-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
  line-height: 1.5;
  color: var(--bone);
  margin: 0 0 1.5rem;
  max-width: 42ch;
}
.testim-emph {
  display: block;
  margin-top: 0.875rem;
  font-style: italic;
  font-weight: 600;
  color: #fff;
}
.testim-cite {
  font-style: normal;
  display: block;
  border-top: 1px solid rgba(241, 233, 216, 0.18);
  padding-top: 1rem;
  max-width: 42ch;
}
.testim-cite__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--bone);
  margin-bottom: 0.25rem;
}
.testim-cite__role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: rgba(241, 233, 216,0.6);
}

@media (max-width: 900px) {
  .testimonial { padding: 3.5rem 1.5rem; }
  .testimonial-inner { grid-template-columns: 1fr; gap: 2rem; }
  .testim-image { aspect-ratio: 16/9; max-height: 240px; }
  .testim-quote { max-width: none; }
}

/* ── CASE STUDY — editorial mini-feature between Testimonial
   and FAQ. Single-column, paper background to break the bone/teal
   alternation, with a top eyebrow ("מקרה") and a footer
   privacy disclaimer. Italic lead paragraph carries the editorial
   register; body paragraphs are plain narrative. */
.case-study {
  padding: 7rem 3.5rem;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.case-study__inner {
  max-width: 720px;
  margin: 0 auto;
}
.case-study__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.case-study__eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' preserveAspectRatio='none'><path d='M2 5 C 12 1, 22 9, 30 5 S 50 1, 58 5' fill='none' stroke='%23B07F2A' stroke-width='1.6' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.case-study__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 1.75rem;
}
.case-study__title em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.case-study__lede {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 2.25rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--accent);
}
.case-study__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.case-study__body p:last-child { margin-bottom: 0; }
.case-study__body strong {
  color: var(--ink);
  font-weight: 700;
}
.case-study__outcome {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.5rem;
  align-items: baseline;
}
.case-study__outcome dt {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.case-study__outcome dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.case-study__disclaimer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--rule);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

@media (max-width: 700px) {
  .case-study { padding: 4.5rem 1.5rem; }
  .case-study__outcome {
    grid-template-columns: 1fr;
    gap: 0.375rem 0;
    padding: 1.25rem 1.375rem;
  }
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq {
  padding: 6rem 3.5rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  width: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-item__body {
  margin-top: 0.875rem;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 70ch;
}

@media (max-width: 900px) {
  .faq { padding: 4rem 1.5rem; }
  .faq-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── PRICING — 3 tier cards on paper ──────────────────────── */
.pricing {
  padding: 7rem 3.5rem;
  background: var(--bg-alt);
}
.pricing-inner { max-width: 1100px; margin: 0 auto; }
.pricing-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.price-card--featured {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--bg-alt);
  padding-top: 3.25rem;
  z-index: 1;
}
.price-card--featured::before {
  content: 'ההמלצה';
  position: absolute;
  top: -0.85rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card__eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}
.price-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}
.price-card__price-suffix {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-faint);
  margin-inline-start: 0.2rem;
  vertical-align: 0.4em;
}
.price-card__duration {
  font-size: 0.825rem;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}
.price-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 2rem;
  flex: 1;
}
.price-card__cta {
  display: block;
  padding: 0.875rem 1.25rem;
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.price-card:hover .price-card__cta {
  background: var(--accent);
  color: #fff;
}
.price-card--featured .price-card__cta {
  background: var(--accent);
  color: #fff;
}
.price-card--featured:hover .price-card__cta {
  background: var(--ink);
  transform: translateY(-1px);
}
.pricing-note {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-faint);
  line-height: 1.6;
  max-width: 600px;
  margin-inline: auto;
}

/* "Not for you if…" card — editorial honesty move beneath the
   pricing grid. Three honest disqualifiers in a bordered card with
   a soft-terracotta tint. Reads as confidence ("we know who this is
   for"), not as a sales pitch. */
.pricing-disqualify {
  margin-top: 3.5rem;
  max-width: 720px;
  margin-inline: auto;
  padding: 2rem 2.25rem 2.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  border-radius: 4px;
}
.pricing-disqualify__label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.pricing-disqualify__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.pricing-disqualify__title em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.pricing-disqualify__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.pricing-disqualify__list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.pricing-disqualify__list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 1em;
  flex-shrink: 0;
  line-height: 1;
}
.pricing-disqualify__close {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .pricing { padding: 4.5rem 1.5rem; }
  .pricing-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .price-card { padding: 2.25rem 1.75rem 1.75rem; }
  .price-card--featured { padding-top: 3rem; }
  .pricing-head { margin-bottom: 2.5rem; }
  .pricing-disqualify { padding: 1.75rem 1.5rem 1.875rem; margin-top: 2.5rem; }
}

/* ── BOOKING CTA — image + panel split ────────────────────── */
.booking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}
.booking-image {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.booking-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.92);
}
.booking-panel {
  background: var(--accent);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.booking-panel__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--soft);
  margin-bottom: 1.5rem;
}
.booking-panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
}
.booking-panel h2 em {
  font-style: italic;
  color: var(--soft);
}
.booking-panel__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: 2.25rem;
  max-width: 42ch;
}
.booking-bullets {
  list-style: none;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 42ch;
}
.booking-bullets li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: #fff;
  padding-inline-start: 1.25rem;
  position: relative;
}
.booking-bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.booking-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  background: #fff;
  color: var(--accent);
  padding: 1.125rem 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              box-shadow 0.3s ease;
  box-shadow: 0 1px 0 rgba(31, 27, 20, 0.05);
}
.booking-cta i {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.booking-cta:hover {
  transform: translateY(-3px) rotate(-0.8deg);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(31, 27, 20, 0.5);
}
.booking-cta:hover i {
  transform: rotate(-12deg) scale(1.1);
}
.booking-secondary {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.booking-secondary i { font-size: 1.125rem; line-height: 1; }
.booking-secondary a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

@media (max-width: 900px) {
  .booking { grid-template-columns: 1fr; min-height: 0; }
  .booking-image { min-height: 240px; max-height: 320px; }
  .booking-panel { padding: 3.5rem 1.5rem; }
  .booking-cta { align-self: stretch; text-align: center; }
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Editorial frieze — large display lockup at the top of the footer.
   Acts as the page's endmark / sign-off. Bilingual lockup (Hebrew
   display + English italic) framed by terracotta rules, with a small
   endmark glyph beneath. Magazine convention. */
.footer-frieze {
  padding: 5.5rem 3.5rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.footer-frieze__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
.footer-frieze__mark em {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* Main footer block — three columns under the frieze. */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 3.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
}
.footer-tag {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
}
.footer-contact { color: var(--text-faint); }
.footer-contact > div { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.footer-contact i { color: var(--accent); font-size: 1.0625rem; line-height: 1; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 3.5rem 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .footer-frieze { padding: 4rem 1.5rem 3.5rem; }
  .footer-inner { flex-direction: column; gap: 1.5rem; padding: 2.5rem 1.5rem 1.5rem; }
  .footer-bottom { padding: 1.25rem 1.5rem 1.75rem; flex-direction: column; }
}

/* ── Back-to-top ──────────────────────────────────────────── */
.btt {
  position: fixed;
  bottom: 2rem;
  inset-inline-end: 2rem;
  width: 44px;
  height: 44px;
  background: var(--bone);
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(31, 27, 20,0.1);
}
.btt:hover { background: var(--accent); }
.btt.show { opacity: 1; pointer-events: auto; }
.btt svg { width: 14px; height: 14px; fill: var(--accent); transition: fill 0.2s ease; }
.btt:hover svg { fill: #fff; }