:root { --logo: url("/img/avivit.jpg"); --logo-full: url("/img/logo-full.jpg"); --logo-mark: url("/img/logo-mark.jpg"); }
/* palette "כחול לילה", Avivit's final choice 2026-09-19: the navy night, teal washes and foam of her logo and business card */
:root {
  --paper: #F3F5F6;
  --mist: #E6ECEF;
  --ink: #2B3445;
  --ink-soft: #5B6778;
  --line: #D2DAE0;
  --teal: #2F6770;
  --teal-hover: #25555D;
  --on-teal: #FFFFFF;
  --teal-soft: #DCE9EA;
  --shadow: 0 24px 48px -28px rgba(30, 40, 60, .45);
  /* brand constants, the same in both themes */
  --navy: #394357;
  --navy-deep: #2C3546;
  --on-navy: #F2F6F7;
  --on-navy-soft: #C3D1D8;
  --navy-line: rgba(255, 255, 255, .18);
  --foam: #A9D3CF;
  --foam-hover: #FFFFFF;
  --quote-bg: rgba(255, 255, 255, .06);
  --trail: rgba(169, 211, 207, .55);
  --wash:
    radial-gradient(ellipse 60% 46% at 10% 12%, rgba(104, 131, 141, .42), transparent 70%),
    radial-gradient(ellipse 55% 42% at 92% 86%, rgba(57, 80, 95, .95), transparent 72%),
    radial-gradient(ellipse 30% 26% at 70% 20%, rgba(104, 131, 141, .18), transparent 70%);
  --band-wash: radial-gradient(ellipse 60% 130% at 88% 50%, rgba(104, 131, 141, .42), transparent 70%);
  --display: 'Bellefair', 'Frank Ruhl Libre', 'David', Georgia, serif;
  --body: 'Assistant', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  --hand: 'Gveret Levin', 'Bellefair', 'David', cursive;   /* the handwriting of her business card: titles and headers (user request 2026-09-19) */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 8.4C10.8 4.2 5.6 3.6 4.2 7.4 2.6 11.8 8 16.5 13.4 21.6'/%3E%3Cpath d='M12.2 8.4C13.6 4.2 18.8 3.6 20 7.4 21.4 11.8 15.6 16.8 10.4 21.8'/%3E%3C/svg%3E");
  --script: var(--display);   /* her name: after trying three faces she chose the headline face (round 13) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C2330;
    --mist: #242D3B;
    --ink: #E7EDF1;
    --ink-soft: #A9B6C2;
    --line: #36414F;
    --teal: #7DB9BC;
    --teal-hover: #96CACC;
    --on-teal: #10202A;
    --teal-soft: #24363D;
    --shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1C2330;
  --mist: #242D3B;
  --ink: #E7EDF1;
  --ink-soft: #A9B6C2;
  --line: #36414F;
  --teal: #7DB9BC;
  --teal-hover: #96CACC;
  --on-teal: #10202A;
  --teal-soft: #24363D;
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.75; }
.wrap { max-width: 1128px; margin-inline: auto; padding-inline: clamp(18px, 5vw, 48px); }
a { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.on-navy :focus-visible { outline-color: var(--foam); }
h1, h2, h3, h4 { font-family: var(--hand); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; margin: 8px 0 12px; }
h3 { font-size: 1.7rem; line-height: 1.2; }
p { margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* shared pieces */
.on-navy { color: var(--on-navy); }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--teal); font-weight: 700; font-size: .82rem; letter-spacing: .1em; }
.kicker::before, .sep::before { content: ""; display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; flex: none; }
.sep { font-size: 0; }
.sep::before { font-size: .95rem; vertical-align: -.22em; margin-inline: 2px; }
.tagline .sep::before { font-size: .85rem; vertical-align: -.12em; margin-inline: .5rem; }
.tagline .sep.last::before { display: none; }
.on-navy .kicker { color: var(--foam); }
.head { max-width: 660px; margin-bottom: clamp(24px, 4vw, 44px); }
.head p { color: var(--ink-soft); margin: 0; }
section[id], aside[id] { scroll-margin-top: 76px; }   /* menu links that jump to a part of a page stop below the sticky header */
.band { padding-block: clamp(52px, 8vw, 100px); }
.band.mist { background: var(--mist); }
.sprig { color: var(--foam); display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1.1 var(--body); text-decoration: none; text-align: center;
  border-radius: 999px; padding: 13px 24px; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--teal); color: var(--on-teal); }
.btn-primary:hover { background: var(--teal-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.on-navy .btn-primary { background: var(--foam); color: var(--navy-deep); }
.on-navy .btn-primary:hover { background: var(--foam-hover); }
.on-navy .btn-ghost { color: var(--on-navy); border-color: var(--navy-line); }
.on-navy .btn-ghost:hover { color: var(--on-navy); border-color: var(--on-navy); }
.chip { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--teal); background: var(--teal-soft); border-radius: 999px; padding: 2px 11px; line-height: 1.7; }


/* header + menu */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 10px; color: var(--on-navy); text-decoration: none; }
.logo-mark { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--navy) var(--logo-mark) center / cover no-repeat; box-shadow: 0 0 0 1.5px var(--navy-line); }
.brand-name { font-family: var(--hand); font-weight: 400; font-size: 2rem; line-height: 1; }
@media (max-width: 1180px) { .top .wrap { position: relative; } .top .brand-name { position: absolute; inset-inline-start: 50%; transform: translateX(50%) scaleX(.86); transform-origin: center; white-space: nowrap; } }
.nav { margin-inline-start: auto; display: flex; gap: 2px; }
.nav a { white-space: nowrap; color: var(--on-navy-soft); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 9px; border-radius: 999px; }   /* eight links: compact, so they and her name stay on one line */
.nav a:hover { color: var(--on-navy); }
.nav a[aria-current="page"] { background: var(--foam); color: var(--navy-deep); }
.top .btn { padding: 9px 18px; font-size: .92rem; }
.menu-btn { display: none; margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy-line); background: transparent; color: var(--on-navy); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 1180px) {
  .nav, .top .btn { display: none; }
  .menu-btn { display: inline-flex; }
}
.menu { position: fixed; inset: 0; z-index: 60; background: var(--wash), var(--navy-deep); overflow: auto; padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(18px, 5vw, 48px) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.menu nav { display: grid; }
.menu nav a { font-family: var(--hand); font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.2; color: var(--on-navy); text-decoration: none; padding-block: 9px; border-bottom: 1px solid var(--navy-line); }
.menu nav a[aria-current="page"] { color: var(--on-navy); }
.menu .btn { margin-top: 22px; align-self: flex-start; }
.menu .sprig { width: 110px; margin-top: auto; align-self: flex-end; opacity: .55; }

/* hero */
.hero, .page-head, .path, .whisper, .cta, .foot { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .page-head::before, .path::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash); }
.hero { background: var(--navy); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 7vw, 92px); }
.eyebrow { color: var(--foam); font-weight: 600; font-size: .92rem; letter-spacing: .04em; }
.hero .eyebrow, .hero h1, .hero .lede { text-align: center; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.2rem); font-weight: 400; line-height: 1.02; margin: 12px 0 14px; }
.lede { font-family: var(--hand); font-size: clamp(1.3rem, 3vw, 1.8rem); word-spacing: .22em; letter-spacing: .02em; line-height: 1.35; color: var(--foam); max-width: 44ch; margin: 0 auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.facts { list-style: none; padding: 20px 0 0; margin: 34px 0 0; border-top: 1px solid var(--navy-line); display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 14px 36px; font-size: .92rem; color: var(--on-navy-soft); }
.facts strong { display: block; font-family: var(--hand); font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--on-navy); }
/* the logo file has a flat navy ground; "lighten" lets the washes show through it, so it has no visible edge */
.logo-full { width: 100%; max-width: 500px; justify-self: center; aspect-ratio: 1000 / 708; background: var(--logo-full) center / contain no-repeat; mix-blend-mode: lighten; }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .logo-full { max-width: 380px; order: -1; }
}

/* inner page heads */
.page-head { background: var(--navy); padding-block: clamp(34px, 6vw, 76px); }
.page-head h1 { font-size: clamp(2.5rem, 6.4vw, 4.2rem); line-height: 1.05; margin-top: 8px; max-width: 18ch; }
/* one line whatever the screen: 9.4 = the sentence's width in em in the handwriting (8.63), plus a margin */
.page-head h1.oneline { white-space: nowrap; max-width: none; font-size: min(4.2rem, calc((100vw - 2 * clamp(18px, 5vw, 48px)) / 9.4)); }
.page-head h1.long { font-size: clamp(1.75rem, 4.8vw, 3.1rem); line-height: 1.2; max-width: 22ch; word-spacing: .12em; }
.page-head p { color: var(--on-navy-soft); max-width: 52ch; margin: 14px 0 0; font-size: 1.08rem; }
@media (max-width: 640px) { .page-head .sprig { inset-inline-end: -26px !important; opacity: .26 !important; } }
.page-head .sprig { position: absolute; inset-inline-end: clamp(8px, 7vw, 96px); bottom: -14px; width: clamp(84px, 15vw, 160px); opacity: .45; z-index: -1; }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--foam); text-decoration: none; font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
.back:hover { text-decoration: underline; }

/* "השביל": her core text. A dashed trail runs beside the words, with a ring at every step. */
.path { background: var(--navy-deep); padding-block: clamp(60px, 9vw, 124px); }
.path-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 88px); align-items: start; }
.path-title { position: sticky; top: 96px; }
.path-title h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; margin-top: 10px; }
.path-title .sprig { width: clamp(90px, 12vw, 150px); margin-top: 22px; opacity: .7; }
.trail { position: relative; padding-inline-start: 42px; max-width: 60ch; }
.trail::before { content: ""; position: absolute; inset-block: 12px 18px; inset-inline-start: 11px; border-inline-start: 2px dashed var(--trail); }
.trail::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 1px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--foam); background: radial-gradient(circle, var(--foam) 0 4px, var(--navy-deep) 5px); }
.trail p { color: var(--on-navy-soft); margin: 0 0 20px; }
.trail .step { position: relative; }
.trail .step::before { content: ""; position: absolute; inset-inline-start: -37px; top: .6em; width: 12px; height: 12px; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--foam); }
.trail .ask { font-family: var(--display); font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.4; color: var(--on-navy); margin-block: 32px; }
.trail .creed { list-style: none; padding: 0; margin: 34px 0; display: grid; gap: 4px; font-family: var(--display); font-size: clamp(1.6rem, 4.2vw, 2.4rem); line-height: 1.28; color: var(--on-navy); }
.trail blockquote { position: relative; margin: 36px 0; padding: 30px 26px 24px; border: 1px solid var(--navy-line); border-radius: 14px; background: var(--quote-bg); }
.trail blockquote::before { content: "”"; position: absolute; top: -6px; inset-inline-start: 20px; font-family: var(--display); font-size: 4.4rem; line-height: 1; color: var(--foam); }
.trail blockquote p { font-family: var(--display); font-size: 1.32rem; line-height: 1.6; color: var(--on-navy); margin: 0; }
.trail cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--on-navy-soft); }
.trail > :last-child { margin-bottom: 0; padding-bottom: 44px; }
.trail .sig { margin: 30px 0 0; padding: 18px 0 34px; border-top: 1px solid var(--navy-line); color: var(--on-navy); font-weight: 600; }
.trail .sig a { color: var(--foam); }
@media (max-width: 820px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-title { position: static; }
  .path-title .sprig { display: none; }
}

/* "לידה זו אמונה" */
.belief-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 6vw, 88px); align-items: start; }
.belief-grid h2 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); margin: 0; }
.belief { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 0; }
.belief li { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.4; padding-block: 12px; border-bottom: 1px solid var(--line); }
.belief li:first-child { border-top: 1px solid var(--line); }
.belief b { font-weight: 700; color: var(--teal); }
.closing { font-family: var(--display); font-weight: 700; line-height: 1.2; color: var(--teal); margin: 22px 0 0; white-space: nowrap;
  font-size: calc(.6 * (min(1128px, 100vw) - 2 * clamp(18px, 5vw, 48px) - clamp(20px, 6vw, 88px)) / 13.4); }   /* 13.4: desktop scrollbars make 100vw a little wider than the page */
@media (max-width: 820px) { .closing { font-size: calc((100vw - 2 * clamp(18px, 5vw, 48px)) / 12.8); } }
.belief-grid p b { display: inline-block; font-family: var(--hand); font-weight: 400; font-size: 1.7em; line-height: 1.1; color: var(--teal); }
@media (max-width: 820px) { .belief-grid { grid-template-columns: 1fr; } }

/* about */
.about { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 6vw, 88px); align-items: center; }
.portrait { width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; border-radius: 50%; background: var(--mist) var(--logo) center / cover no-repeat; box-shadow: 0 0 0 8px var(--paper), 0 0 0 10px var(--teal), 0 0 0 18px var(--paper), 0 0 0 19px var(--line); }
.about-text p { max-width: 62ch; }
.creds { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.creds li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.creds li::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--teal); -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; transform: translateY(2px); }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 230px; margin-block: 14px 8px; }
}

/* index rows: services at a glance, and the list of her articles */
.index { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; padding-block: 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.index .t { font-family: var(--display); font-size: clamp(1.45rem, 3.4vw, 2.05rem); line-height: 1.2; }
.index .d { grid-column: 1; color: var(--ink-soft); font-size: .98rem; }
.index .go { grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--teal); font-size: 1.2rem; transition: background-color .2s, color .2s, border-color .2s; }
.index a:hover .go { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.index-label { font-weight: 700; font-size: .82rem; letter-spacing: .1em; color: var(--ink-soft); margin: 34px 0 10px; }
.index-label:first-child { margin-top: 0; }

/* her recurring lines, sprinkled on every page */
.whisper { background: var(--navy); padding-block: clamp(32px, 5vw, 52px); }
.whisper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--band-wash); }
.whisper .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 3vw, 32px); align-items: center; }
.whisper .sprig { width: clamp(44px, 7vw, 72px); opacity: .8; }
.whisper p { font-family: var(--display); font-size: clamp(1.5rem, 3.8vw, 2.3rem); line-height: 1.3; margin: 0 0 8px; max-width: 32ch; text-wrap: balance; }
.whisper a { color: var(--foam); font-size: .88rem; font-weight: 600; text-decoration: none; }
.whisper a:hover { text-decoration: underline; }

/* testimonials */
/* testimonials as slides: swipe right and left on a phone, arrows elsewhere */
.quotes { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: thin; }
.quotes figure { flex: 0 0 min(88%, 560px); scroll-snap-align: center; margin: 0; max-height: min(64vh, 500px); overflow-y: auto; padding: 24px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.slide-nav { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.slide-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: 400 1.2rem/1 var(--body); cursor: pointer; }
.slide-nav button:hover { border-color: var(--teal); color: var(--teal); }
.quotes figure::before { content: "”"; display: block; font-family: var(--display); font-size: 4rem; line-height: .7; height: 30px; color: var(--teal); }
.quotes blockquote { margin: 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.6; }
.quotes blockquote p { margin: 0 0 10px; }

/* the gift: her guided-imagery recording, the highlighted part of the "מתנה ממני" page */
.gift { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); padding-block: clamp(44px, 7vw, 88px); }
.gift::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash); }
.gift-card { max-width: 640px; margin-inline: auto; text-align: center; border: 1.5px solid var(--foam); border-radius: 18px; padding: clamp(24px, 5vw, 44px); background: var(--quote-bg); box-shadow: var(--shadow); }
.gift-card .kicker { justify-content: center; }
.gift-card h2 { transform-origin: center; margin: 10px 0 14px; }
.gift-card p { margin: 0 auto 12px; max-width: 46ch; font-size: 1.12rem; }
.gift-card .gift-note { font-size: .98rem; color: var(--on-navy-soft); }
.gift-card .btn { margin-top: 12px; }
.reading .article h2 { margin-bottom: 18px; }

/* closing call band */
.cta { background: var(--navy); padding-block: clamp(48px, 7vw, 88px); }
.cta h2 { font-size: clamp(2.4rem, 6vw, 4rem); }
.cta p { color: var(--on-navy-soft); max-width: 46ch; font-size: 1.1rem; }

/* services page */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.jump a { color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid var(--navy-line); border-radius: 999px; padding: 6px 14px; }
.jump a:hover { border-color: var(--foam); color: var(--foam); }
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pkg { border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); }
.pkg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pkg h3 { font-size: 1.6rem; }
.pkg .desc { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.pkg ul { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: .97rem; flex: 1; align-content: start; }
.pkg li { display: flex; gap: 10px; align-items: baseline; }
.pkg li::before { content: "✓"; color: var(--teal); font-weight: 700; flex: none; }
.pkg .btn { margin-top: auto; }
.pkg, .pkg.featured { background: var(--wash), var(--navy); color: var(--on-navy); border-color: transparent; box-shadow: var(--shadow); --ground: var(--navy); }
.pkg .desc { color: var(--on-navy-soft); }
.pkg ul { border-color: var(--navy-line); }
.pkg li::before { color: var(--foam); }
.pkg.featured .desc { color: var(--on-navy-soft); }
.pkg.featured ul { border-color: var(--navy-line); }
.pkg.featured li::before { color: var(--foam); }
.pkg.featured .chip { background: rgba(255, 255, 255, .14); color: var(--foam); }
.pkg .btn, .pkg.featured .btn-primary { background: var(--foam); color: var(--navy-deep); border-color: transparent; }
.pkg .btn:hover { background: var(--foam-hover); color: var(--navy-deep); border-color: transparent; }
.pkg .more > summary { padding-block: 2px 8px; }
@media (max-width: 940px) { .packages { grid-template-columns: 1fr; max-width: 560px; } }

.journey { list-style: none; padding: 0; padding-inline-start: 34px; margin: 0; display: grid; gap: 30px; position: relative; max-width: 760px; }
.journey::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 8px; width: 2px; background: var(--line); }
.journey li { position: relative; }
.journey .dot { position: absolute; inset-inline-start: -34px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--mist); border: 2px solid var(--teal); }
.journey .birth .dot { background: var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.journey .wk { display: block; font-size: .84rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.journey h3 { font-size: 1.5rem; margin: 2px 0 6px; }
.journey p { margin: 0 0 8px; color: var(--ink-soft); max-width: 64ch; }

.svcs { display: grid; gap: clamp(40px, 6vw, 64px); }
.svc { border-top: 1px solid var(--line); padding-top: 26px; scroll-margin-top: 84px; }
.svc h3 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
.svc h4 { font-size: 1.4rem; margin: 20px 0 10px; }
.svc-sub { margin: 0 0 6px; font-weight: 600; color: var(--teal); max-width: 66ch; }
.svc .btn { margin-top: 8px; }
#tracks, #journey { scroll-margin-top: 84px; }

/* her long texts */
.article { max-width: 66ch; }
.article .lead-lines, .lead-lines { font-family: var(--display); font-size: 1.42rem; line-height: 1.5; }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal); padding-block: 6px 14px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.more[open] > summary::after { transform: rotate(45deg); }
.more:not([open]) .when-open, .more[open] .when-closed { display: none; }
.byline { font-weight: 600; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; }
.reading { padding-block: clamp(36px, 6vw, 72px); }
.reading .article { font-size: 1.08rem; }
.next { margin-top: clamp(32px, 5vw, 56px); }

/* accordions: hospital bag, the ten things, FAQ */
.bags { display: grid; gap: 12px; max-width: 800px; }
.bag { border: 1px solid var(--line); border-radius: 12px; background: var(--mist); padding-inline: 18px; }
.band.mist .bag { background: var(--paper); }
.bag > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding-block: 16px; font-weight: 700; font-size: 1.1rem; }
.bag > summary::-webkit-details-marker { display: none; }
.bag > summary::after { content: "+"; margin-inline-start: auto; font-size: 1.4rem; line-height: 1; color: var(--teal); transition: transform .2s; }
.bag[open] > summary::after { transform: rotate(45deg); }
.bag .count { font-weight: 500; font-size: .9rem; color: var(--ink-soft); }
.bag .num { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--teal); min-width: 1.5em; font-variant-numeric: tabular-nums; }
.bag p { margin: 0 0 12px; max-width: 64ch; }
.bag p:last-child { padding-bottom: 8px; }
.checklist { list-style: none; padding: 0 0 16px; margin: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 12px; align-items: baseline; }
.checklist li::before { content: ""; width: 11px; height: 11px; flex: none; border: 1.5px solid var(--teal); border-radius: 3px; transform: translateY(1px); }
.ten-intro { max-width: 66ch; margin-bottom: 22px; }

.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq > details { border-bottom: 1px solid var(--line); }
.faq > details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; }
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary::after { content: "+"; font-family: var(--body); font-size: 1.5rem; line-height: 1; color: var(--teal); flex: none; transition: transform .2s; }
.faq > details[open] > summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; color: var(--ink-soft); max-width: 66ch; }
.faq .faq-a { padding-bottom: 10px; }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.contact-list { margin: 26px 0 0; border-top: 1px solid var(--line); }
.contact-list div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 13px; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--ink-soft); }
.contact-list dd { margin: 0; font-weight: 600; }
.area { margin-top: 28px; }
.area h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.towns { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 13px; font-size: .92rem; }
.form-panel { background: var(--mist); border-radius: 16px; padding: clamp(22px, 4vw, 36px); }
.form-panel h3 { margin-bottom: 18px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .92rem; font-weight: 600; }
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
.field textarea { min-height: 110px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: .84rem; color: var(--ink-soft); margin: 12px 0 0; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } }

/* footer */
.foot { background: var(--navy-deep); color: var(--on-navy-soft); font-size: .92rem; padding-block: 44px calc(44px + 24px); }
.foot .wrap { display: grid; gap: 22px; }
.foot-brand { display: flex; align-items: center; gap: 12px; color: var(--on-navy); }
.tagline { text-align: center; font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.3; color: var(--on-navy); margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot nav a { color: var(--on-navy-soft); text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: var(--foam); }
.foot small { font-size: .84rem; }

/* floating WhatsApp */
.wa-float { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px; z-index: 30; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--foam); color: var(--navy-deep); display: inline-flex; align-items: center; gap: 9px; font: 700 1rem/1 var(--body); text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.wa-float svg { width: 24px; height: 24px; flex: none; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 10px; font-size: .92rem; max-width: calc(100% - 32px); text-align: center; }

/* ---- alternating palettes down every page (user request 2026-09-19): 1 · כחול לילה, 2 · בוקר בהיר, 1, 2 … to the end.
   Each top-level section re-defines the whole token set, so everything inside it follows, and the phone's dark mode cannot mix in. */
[data-view] > :nth-child(odd), #main > :nth-child(odd) {
  --paper: #2C3546; --mist: #323C4F; --ink: #F2F6F7; --ink-soft: #C3D1D8; --line: rgba(255, 255, 255, .18);
  --teal: #A9D3CF; --teal-hover: #FFFFFF; --on-teal: #2C3546; --teal-soft: rgba(169, 211, 207, .16);
  --navy: #394357; --navy-deep: #2C3546; --on-navy: #F2F6F7; --on-navy-soft: #C3D1D8; --navy-line: rgba(255, 255, 255, .18);
  --foam: #A9D3CF; --foam-hover: #FFFFFF; --quote-bg: rgba(255, 255, 255, .06);
  --trail: rgba(169, 211, 207, .55);
  --wash:
    radial-gradient(ellipse 60% 46% at 10% 12%, rgba(104, 131, 141, .42), transparent 70%),
    radial-gradient(ellipse 55% 42% at 92% 86%, rgba(57, 80, 95, .95), transparent 72%),
    radial-gradient(ellipse 30% 26% at 70% 20%, rgba(104, 131, 141, .18), transparent 70%);
  --band-wash: radial-gradient(ellipse 60% 130% at 88% 50%, rgba(104, 131, 141, .42), transparent 70%);
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);
  color: var(--ink); color-scheme: dark;
}
[data-view] > :nth-child(even), #main > :nth-child(even) {
  --paper: #FCFDFD; --mist: #EEF3F5; --ink: #2B3445; --ink-soft: #5B6778; --line: #D5DEE4;
  --teal: #2F6770; --teal-hover: #25555D; --on-teal: #FFFFFF; --teal-soft: #DCE9EA;
  --navy: #DDE8EC; --navy-deep: #CDDCE2; --on-navy: #2B3445; --on-navy-soft: #4A5869; --navy-line: rgba(43, 52, 69, .16);
  --foam: #2F6770; --foam-hover: #25555D; --quote-bg: rgba(255, 255, 255, .6);
  --trail: rgba(47, 103, 112, .5);
  --wash:
    radial-gradient(ellipse 60% 46% at 10% 12%, rgba(169, 211, 207, .6), transparent 70%),
    radial-gradient(ellipse 55% 42% at 92% 86%, rgba(104, 131, 141, .34), transparent 72%),
    radial-gradient(ellipse 30% 26% at 70% 20%, rgba(255, 255, 255, .8), transparent 70%);
  --band-wash: radial-gradient(ellipse 60% 130% at 88% 50%, rgba(169, 211, 207, .55), transparent 70%);
  --shadow: 0 24px 48px -28px rgba(30, 40, 60, .3);
  color: var(--ink); color-scheme: light;
}
.band, .reading { background-color: var(--paper); }
/* on the light palette the accent buttons are teal, so their words are white */
[data-view] > :nth-child(even) .on-navy .btn-primary, #main > :nth-child(even) .on-navy .btn-primary,
[data-view] > :nth-child(even).on-navy .btn-primary, #main > :nth-child(even).on-navy .btn-primary,
[data-view] > :nth-child(even) .pkg .btn, #main > :nth-child(even) .pkg .btn,
[data-view] > :nth-child(even) .pkg .btn:hover, #main > :nth-child(even) .pkg .btn:hover { color: #FFFFFF; }
[data-view] > :nth-child(even) .pkg, #main > :nth-child(even) .pkg { border-color: var(--teal); }
[data-view] > :nth-child(even) .pkg.featured .chip, #main > :nth-child(even) .pkg.featured .chip { background: var(--teal); color: #FFFFFF; }

/* the handwriting, made lighter and narrower (user request 2026-09-19: "less fat and less round, by half").
   The face has one weight, so it is thinned by an outline in the colour of the ground behind it, and narrowed to 86%. */
.top, .on-navy, .pkg.featured { --ground: var(--navy); }
.path, .menu, .foot { --ground: var(--navy-deep); }
.band, .reading, .pkg { --ground: var(--paper); }
.band.mist { --ground: var(--mist); }
h1, h2, h3, h4, .brand-name, .menu nav a, .lede, .facts strong, .belief-grid p b {
  -webkit-text-stroke: .026em var(--ground, transparent);
  transform: scaleX(.86); transform-origin: right center;
}
.hero h1, .hero .lede, .facts strong { transform-origin: center; }

/* printing (the hospital bag list): only the page's own content, black on white, every part open */
.print-row { margin: 22px 0 0; }
@media print {
  .top, .menu, .foot, .wa-float, .toast, .next, .whisper, .cta, .print-row, .back, .sprig, .skip { display: none !important; }
  body, .site, .reading, .band { background: #FFFFFF !important; color: #000000 !important; }
  .page-head { background: none !important; color: #000000 !important; padding-block: 0 10px !important; }
  .page-head::before { display: none !important; }
  .page-head h1, .page-head .kicker, .bag .num, .bag .count { color: #000000 !important; }
  /* paper is always white: the colour tokens go back to dark-on-light even when the phone is in dark mode */
  :root, [data-view] > *, #main > * { --paper: #FFFFFF !important; --mist: #FFFFFF !important; --ink: #000000 !important; --ink-soft: #333333 !important; --line: #999999 !important; --teal: #000000 !important; --teal-soft: #FFFFFF !important; }
  .reading { padding-block: 0 !important; }
  .bag { background: none !important; border-color: #999999 !important; }
  .bag > summary { break-after: avoid; }
  .bag li, .bag p { break-inside: avoid; }
  .bag > summary::after { display: none !important; }
  /* her business card in the top left corner of every printed page (page-margin boxes: Chrome 131+, Android included) */
  @page { margin: 38mm 14mm 16mm; @top-left { content: url("/img/card-print.svg"); vertical-align: middle; } }
}


/* live-site additions */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 84px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--foam); color: var(--navy-deep); padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 0; }
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 28px; }
.legal ul { padding-inline-start: 22px; margin: 0 0 14px; }
.foot .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot .legal-links a { color: var(--on-navy-soft); }
.form-ok { background: var(--teal-soft); color: var(--ink); border-radius: 12px; padding: 16px 18px; font-weight: 600; }
.hp { position: absolute; left: -9999px; }