/* Shared page chrome for the Alisa Chessler homepage previews (previews 5 and 6 only since 2026-11-03; 1 to 4 archived).
   Round 3 (2026-11-03, the block at the end): a warm hint per preview (--accent, --accent-ink, --wash, set on body.p5
   and body.p6), Mulish for the body, pill buttons, a soft footer. The palette notes below are the history.
   There is no live site. Her logo ("Logo Options – Option 1 — Classic Serif", sent 2026-11-03) sets navy #1B2A41
   (hover #0F1828), brass #8A6A2F, Cormorant Garamond 600 in spaced capitals and Jost; those replace the nearest tokens of
   the palette first PROPOSED, chosen for
   "Tel Aviv • Palm Beach" and a senior advisor to Jewish and Israel-focused organizations, to be confirmed with
   Alisa: navy ink #14233A (with #1E3252 and #0B1422), sand #F6F1E9 (with #ECE3D5, stone #D9CCB8, paper #FBF8F3),
   brass #A8834A (with #CAA56B and #85663A), and sea blue #2D6A86 (with #8AB7C9). Every preview uses these.
   Fonts (Google Fonts): Cormorant Garamond for display, Inter for body.
   Her own rule for donor websites ("flashing images and fast-moving video … can drive away the very donors you most
   want to reach") governs the motion: slow, calm, no flashing; prefers-reduced-motion respected.
   A preview sets a theme class on <body>: theme-light (sand) or theme-dark (navy). The lower sections are the same in both. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@400;500;600;700&family=Jost:wght@500&display=swap');


:root {
  --navy: #1b2a41;
  --navy-2: #1e3252;
  --navy-dk: #0f1828;
  --sand: #f6f1e9;
  --sand-2: #ece3d5;
  --stone: #d9ccb8;
  --paper: #fbf8f3;
  --white: #ffffff;
  --brass: #a8834a;
  --brass-lt: #caa56b;
  --brass-dk: #8a6a2f;
  --sea: #2d6a86;
  --sea-lt: #8ab7c9;
  --ink: #1b2433;
  --muted: #6b6458;
  --muted-lt: #b8c1cd;
  --line: rgba(20, 35, 58, 0.14);
  --line-dk: rgba(202, 165, 107, 0.22);
  --head-h: 76px;
  --card-bg: rgba(255, 255, 255, 0.95);
  --card-line: rgba(20, 35, 58, 0.1);
  --card-ink: #2a3445;
  --card-head: #14233a;
  --card-muted: #6b6458;
  --card-accent: var(--accent-ink);
  --stage-bg: #f6f1e9;
  --f-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-body: 'Mulish', 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-logo: 'Jost', 'Mulish', 'Helvetica Neue', Arial, sans-serif; /* her logo's tagline only */
  /* the warm hint (round 3, 2026-11-03). Each preview sets its own on body.p5 / body.p6; these are the defaults.
     --accent is for thin lines and underlines; --accent-ink is the darker shade for text (4.5:1 or better on --bg
     and --wash). The logo keeps navy and gold (--logo-gold), whatever the hint. */
  --bg: #f8f2ec;
  --bg-2: #fcf8f4;
  --wash: #f6e9e2;
  --foot-bg: #faf1ec;
  --accent: #c07f6a;
  --accent-ink: #955744;
  --accent-line: rgba(192, 127, 106, 0.32);
  --logo-gold: #8a6a2f;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.theme-dark {
  --card-bg: rgba(11, 20, 34, 0.9);
  --card-line: rgba(202, 165, 107, 0.22);
  --card-ink: rgba(236, 230, 220, 0.9);
  --card-head: #fbf8f3;
  --card-muted: rgba(184, 193, 205, 0.85);
  --card-accent: var(--brass-lt);
  --stage-bg: #0b1422;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); margin: 0; min-width: 320px; font-family: var(--f-body); }
.theme-dark { background: var(--navy-dk); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container { margin: 0 auto; width: min(1200px, calc(100% - 48px)); }
.eyebrow { color: var(--accent-ink); font: 600 11.5px/1.3 var(--f-body); letter-spacing: 0.24em; text-transform: uppercase; }
.display { font: 500 clamp(2.6rem, 5.4vw, 5.2rem)/1 var(--f-display); letter-spacing: -0.015em; margin: 0; }
.display em, .card h2 em { color: var(--accent-ink); font-style: italic; }
.theme-dark .display em, .theme-dark .card h2 em { color: var(--brass-lt); }
.section-title { color: var(--navy); font: 500 clamp(2.1rem, 3.8vw, 3.4rem)/1.04 var(--f-display); letter-spacing: -0.01em; margin: 0; }
.section-title em { color: var(--accent-ink); font-style: italic; }
.body-copy { color: var(--muted); font-size: 16.5px; line-height: 1.72; }
.arrow { font-size: 18px; line-height: 0; }

/* buttons: quiet, squared, letter-spaced */
.btn { align-items: center; border: 1.5px solid transparent; border-radius: 2px; cursor: pointer; display: inline-flex; font: 600 12.5px/1 var(--f-body); gap: 10px; justify-content: center; letter-spacing: 0.12em; min-height: 46px; padding: 15px 22px; text-transform: uppercase; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; white-space: nowrap; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-brass { background: var(--accent); border-color: var(--accent); color: var(--navy-dk); }
.btn-brass:hover { background: var(--brass-lt); border-color: var(--brass-lt); }
.btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--paper); }
.btn-ghost-light { background: transparent; border-color: rgba(251, 248, 243, 0.8); color: var(--paper); }
.btn-ghost-light:hover { background: var(--paper); color: var(--navy); }
.theme-dark .hero-copy .btn-ghost, .theme-dark .card .btn-ghost { border-color: rgba(251, 248, 243, 0.8); color: var(--paper); }
.theme-dark .hero-copy .btn-primary, .theme-dark .card .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--navy-dk); }

/* ---------- header: sits over the stage */
.head { backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); background: rgba(251, 248, 243, 0.92); border-bottom: 1px solid var(--line); height: var(--head-h); left: 0; position: fixed; right: 0; top: 0; z-index: 40; }
.head .container { align-items: center; display: flex; height: 100%; justify-content: space-between; gap: 16px; }
.brand { align-items: center; color: var(--navy); display: flex; gap: 12px; }
.brand-name { display: block; font: 600 22px/1 'Cormorant Garamond', 'Times New Roman', serif; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand-sub { color: var(--accent-ink); display: block; font: 500 9px/1 'Jost', 'Inter', sans-serif; letter-spacing: 0.28em; margin-top: 5px; text-transform: uppercase; white-space: nowrap; }
.head-links { align-items: center; display: flex; gap: clamp(14px, 2vw, 28px); }
.head-links > a:not(.btn) { color: var(--ink); font: 500 13.5px/1 var(--f-body); letter-spacing: 0.02em; }
.head-links > a:not(.btn):hover { color: var(--accent-ink); }
.head .btn { min-height: 0; padding: 12px 16px; }
.story-progress { background: var(--accent); bottom: -1px; height: 2px; left: 0; position: absolute; right: 0; transform: scaleX(0); transform-origin: 0 50%; }
.theme-dark .head { background: rgba(11, 20, 34, 0.88); border-bottom-color: var(--line-dk); }
.theme-dark .brand { color: var(--paper); }
.theme-dark .brand-sub { color: var(--brass-lt); }
.theme-dark .head-links > a:not(.btn) { color: rgba(236, 230, 220, 0.86); }
.theme-dark .head-links > a:not(.btn):hover { color: var(--brass-lt); }
.theme-dark .head .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--navy-dk); }
.theme-dark .head .btn-primary:hover { background: var(--brass-lt); border-color: var(--brass-lt); }

/* ---------- the story: a stage that sticks, words that scroll over it */
.story { background: var(--stage-bg); position: relative; }
.stage { height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; position: sticky; top: 0; width: 100%; }
.stage canvas { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.stage-fallback { align-items: center; color: var(--card-muted); display: none; font-size: 14px; inset: 0; justify-content: center; padding: 24px; position: absolute; text-align: center; }
.no-3d .stage-fallback { display: flex; }
.stage-shade { background: linear-gradient(90deg, rgba(246, 241, 233, 0.96) 0%, rgba(246, 241, 233, 0.84) 30%, rgba(246, 241, 233, 0.35) 46%, rgba(246, 241, 233, 0) 60%); inset: 0; pointer-events: none; position: absolute; }
.theme-dark .stage-shade { background: linear-gradient(90deg, rgba(11, 20, 34, 0.93) 0%, rgba(11, 20, 34, 0.66) 30%, rgba(11, 20, 34, 0) 58%); }
.stage-labels { inset: 0; pointer-events: none; position: absolute; }
.tag { left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; will-change: transform, opacity; }
.tag > span { background: rgba(251, 248, 243, 0.96); border: 1px solid rgba(168, 131, 74, 0.6); border-radius: 2px; color: var(--navy); display: block; font: 600 10.5px/1 var(--f-body); left: 14px; letter-spacing: 0.14em; padding: 7px 10px; position: absolute; text-transform: uppercase; top: -32px; white-space: nowrap; }
.tag::before { background: var(--accent); border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px rgba(20, 35, 58, 0.4); content: ''; height: 10px; left: -5px; position: absolute; top: -5px; width: 10px; }
.tag::after { background: rgba(168, 131, 74, 0.8); content: ''; height: 1px; left: 3px; position: absolute; top: -9px; transform: rotate(-52deg); transform-origin: 0 50%; width: 22px; }
.theme-dark .tag > span { background: rgba(11, 20, 34, 0.92); color: var(--paper); }
.stage-note { background: rgba(251, 248, 243, 0.9); border-radius: 2px; bottom: 70px; color: var(--muted); font-size: 11px; margin: 0; padding: 5px 8px; position: absolute; right: 18px; z-index: 3; }
.theme-dark .stage-note { background: rgba(11, 20, 34, 0.82); color: var(--muted-lt); }

/* an HTML read-out over the stage */
.hud { background: rgba(251, 248, 243, 0.95); border: 1px solid rgba(168, 131, 74, 0.4); color: var(--muted); font: 600 10.5px/1.3 var(--f-body); letter-spacing: 0.18em; opacity: 0; padding: 12px 14px; pointer-events: none; position: absolute; right: 18px; text-transform: uppercase; top: calc(var(--head-h) + 18px); transition: opacity 0.6s ease; }
.hud.is-on { opacity: 1; }
.hud b { color: var(--navy); display: block; font: 500 22px/1.15 var(--f-display); letter-spacing: 0; margin-top: 6px; text-transform: none; }
.theme-dark .hud { background: rgba(11, 20, 34, 0.9); color: var(--muted-lt); }
.theme-dark .hud b { color: var(--paper); }

.story-nav { align-items: flex-end; display: flex; flex-direction: column; gap: 2px; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.story-dot { align-items: center; display: flex; gap: 8px; padding: 4px 0 4px 8px; }
.story-dot-label { background: rgba(251, 248, 243, 0.95); color: var(--navy); font: 600 11px/1 var(--f-body); letter-spacing: 0.04em; opacity: 0; padding: 5px 7px; transition: opacity 0.25s ease; }
.story-dot-mark { background: transparent; border: 1.5px solid var(--navy); border-radius: 50%; height: 10px; transition: transform 0.25s ease, background 0.25s ease; width: 10px; }
.story-dot:hover .story-dot-label, .story-dot:focus-visible .story-dot-label, .story-dot.is-on .story-dot-label { opacity: 1; }
.story-dot.is-on .story-dot-mark { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.theme-dark .story-dot-label { background: rgba(11, 20, 34, 0.9); color: var(--paper); }
.theme-dark .story-dot-mark { border-color: var(--paper); }

.beats { margin-top: -100vh; margin-top: min(-100svh, -34rem); pointer-events: none; position: relative; }
.beat { align-items: center; display: flex; min-height: 100vh; min-height: 100svh; padding: var(--head-h) 5vw 0; scroll-margin-top: 0; }
.card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--card-bg); border: 1px solid var(--card-line); border-top: 2px solid var(--accent); border-radius: 2px; box-shadow: 0 24px 60px rgba(20, 35, 58, 0.12); color: var(--card-ink); max-width: 29rem; padding: 30px 30px 28px; pointer-events: auto; width: 100%; }
.theme-dark .card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.card .eyebrow, .hero-copy .eyebrow { align-items: center; color: var(--card-accent); display: flex; gap: 10px; }
.card h2 { color: var(--card-head); font: 500 clamp(1.7rem, 2.4vw, 2.3rem)/1.06 var(--f-display); letter-spacing: -0.005em; margin: 14px 0 0; }
.card p { color: var(--card-ink); font-size: 15.5px; line-height: 1.66; margin: 12px 0 0; }
.card .fine { color: var(--card-muted); font-size: 13px; }
.card ul, .card ol { color: var(--card-ink); font-size: 14.5px; line-height: 1.55; list-style: none; margin: 14px 0 0; padding: 0; }
.card li { display: flex; gap: 10px; margin-top: 8px; }
.card li::before { background: var(--accent); content: ''; flex: none; height: 1px; margin-top: 11px; width: 14px; }
.card li b { color: var(--card-head); }
.card .more { align-items: center; color: var(--card-head); display: inline-flex; font: 600 12px/1 var(--f-body); gap: 8px; letter-spacing: 0.14em; margin-top: 18px; text-transform: uppercase; }
.card .more + .more { margin-left: 18px; }
.card blockquote { border-left: 2px solid var(--accent); color: var(--card-head); font: italic 500 20px/1.45 var(--f-display); margin: 14px 0 0; padding-left: 16px; }

.hero-copy { max-width: 40rem; pointer-events: auto; }
.hero-copy h1 { margin: 0; }
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-copy .display { color: var(--navy); display: block; }
.hero-copy .intro { color: var(--ink); font-size: 18px; line-height: 1.65; margin: 26px 0 30px; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-hint { align-items: center; color: var(--muted); display: inline-flex; font: 600 11.5px/1 var(--f-body); gap: 10px; letter-spacing: 0.18em; margin-top: 34px; text-transform: uppercase; }
.hero-hint::before { animation: hint 2.4s ease-in-out infinite; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); content: ''; height: 8px; transform: rotate(45deg); width: 8px; }
@keyframes hint { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
.theme-dark .hero-copy .display { color: var(--paper); }
.theme-dark .hero-copy .eyebrow { color: var(--brass-lt); }
.theme-dark .hero-copy .intro, .theme-dark .hero-hint { color: rgba(236, 230, 220, 0.86); }

.js-story .beat .card, .js-story .beat .hero-copy { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js-story .beat.is-on .card, .js-story .beat.is-on .hero-copy { opacity: 1; transform: none; }
.js-story .beat:not(.is-on) .card, .js-story .beat:not(.is-on) .hero-copy { pointer-events: none; }

/* ---------- the rest of the home page */
.band { padding: 110px 0; }
.band-head { align-items: flex-end; display: flex; gap: 48px; justify-content: space-between; margin-bottom: 52px; }
.band-head > div:first-child { max-width: 640px; }
.band-head h2 { margin-top: 16px; }
.band-head p, .band-copy { margin: 0; max-width: 540px; }
.band-copy p { margin: 0 0 12px; }

/* the proof, as her bio gives it */
.facts-strip { background: var(--navy); color: var(--paper); }
.facts-strip .container { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); }
.facts-strip .container > div { border-left: 1px solid var(--line-dk); padding: 34px 22px 32px; }
.facts-strip .container > div:first-child { border-left: 0; padding-left: 0; }
.facts-strip strong { color: var(--brass-lt); display: block; font: 500 clamp(1.5rem, 2.3vw, 2.05rem)/1.1 var(--f-display); }
.facts-strip small { color: rgba(236, 230, 220, 0.78); display: block; font-size: 13.5px; line-height: 1.5; margin-top: 8px; }

.about-band { background: var(--paper); }
.about { display: grid; gap: 64px; grid-template-columns: 1fr 1.15fr; }
.about-lead { color: var(--navy); font: italic 500 clamp(1.35rem, 2vw, 1.7rem)/1.4 var(--f-display); margin: 26px 0 0; }
.portrait { aspect-ratio: 4 / 5; border-radius: 2px; box-shadow: 0 24px 50px rgba(20, 35, 58, 0.14); margin: 34px 0 0; max-width: 380px; overflow: hidden; }
.portrait img { display: block; height: 100%; object-fit: cover; object-position: 50% 22%; width: 100%; }
@media (max-width: 1080px) { .portrait { max-width: 320px; } }
.about-body p { color: var(--ink); font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; }
.about-body .about-close { border-top: 1px solid var(--line); color: var(--navy); font: 500 22px/1.4 var(--f-display); margin-top: 26px; padding-top: 22px; }

.svc-band { background: var(--sand); }
.svc-grid { background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); }
.svc { background: var(--paper); display: flex; flex-direction: column; padding: 32px 28px; scroll-margin-top: calc(var(--head-h) + 16px); }
.svc .n { color: var(--accent-ink); font: 600 11.5px/1 var(--f-body); letter-spacing: 0.2em; }
.svc h3 { color: var(--navy); font: 500 25px/1.12 var(--f-display); margin: 14px 0 0; }
.svc p { color: var(--muted); font-size: 14.5px; line-height: 1.66; margin: 12px 0 0; }
.svc .qs { list-style: none; margin: 12px 0 0; padding: 0; }
.svc .qs li { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.55; padding: 9px 0; }
.svc .qs b { color: var(--navy); display: block; font-weight: 600; }

.ways-band { background: var(--navy); color: var(--paper); }
.ways-band .eyebrow { color: var(--brass-lt); }
.ways-band .section-title { color: var(--paper); }
.ways-band .section-title em { color: var(--brass-lt); }
.ways-band .body-copy { color: rgba(236, 230, 220, 0.8); }
.ways { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
.ways article { border-top: 1px solid var(--accent); padding-top: 22px; }
.ways .n { color: var(--brass-lt); display: block; font: 600 11.5px/1 var(--f-body); letter-spacing: 0.2em; }
.ways h3 { color: var(--paper); font: 500 24px/1.15 var(--f-display); margin: 12px 0 0; }
.ways p { color: rgba(236, 230, 220, 0.8); font-size: 15px; line-height: 1.65; margin: 10px 0 0; }
.ways-foot { border-top: 1px solid var(--line-dk); display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; margin-top: 48px; padding-top: 28px; }
.ways-foot p { color: rgba(236, 230, 220, 0.86); font-size: 16px; line-height: 1.6; margin: 0; max-width: 40rem; }
.ways-foot .can-help { color: var(--brass-lt); font: italic 500 26px/1.3 var(--f-display); }

.phil-band { background: var(--paper); }
.phil { display: grid; gap: 1px; grid-template-columns: 1.2fr 1fr; background: var(--line); border: 1px solid var(--line); }
.phil > div { background: var(--white); padding: 36px 34px; }
.phil h3 { color: var(--navy); font: 500 28px/1.12 var(--f-display); margin: 0; }
.phil h3.trusted { margin-top: 30px; }
.phil p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 12px 0 0; }
.phil .steps { counter-reset: s; list-style: none; margin: 20px 0 0; padding: 0; }
.phil .steps li { border-top: 1px solid var(--line); color: var(--muted); counter-increment: s; font-size: 15px; line-height: 1.65; padding: 14px 0 14px 46px; position: relative; }
.phil .steps li::before { color: var(--accent-ink); content: counter(s, decimal-leading-zero); font: 500 24px/1 var(--f-display); left: 0; position: absolute; top: 14px; }
.phil .steps b { color: var(--navy); }
.phil .decisions { border-left: 2px solid var(--accent-ink); color: var(--navy); font: italic 500 20px/1.45 var(--f-display); padding-left: 16px; }
.phil ul { list-style: none; margin: 14px 0 0; padding: 0; }
.phil ul li { border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.55; padding: 11px 0; }
.phil .btn { margin-top: 24px; }

.cta { background: var(--navy-dk); color: var(--paper); overflow: hidden; position: relative; }
.cta::before { background: radial-gradient(ellipse at 85% 50%, rgba(202, 165, 107, 0.14), transparent 60%); content: ''; inset: 0; position: absolute; }
.cta .container { align-items: center; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; position: relative; z-index: 1; }
.cta .eyebrow { color: var(--brass-lt); }
.cta .section-title { color: var(--paper); }
.cta .section-title em { color: var(--brass-lt); }
.cta p { color: rgba(236, 230, 220, 0.86); font-size: 17px; line-height: 1.6; margin: 18px 0 0; max-width: 580px; }

.foot { background: var(--navy-dk); border-top: 1px solid var(--line-dk); color: var(--muted-lt); font-size: 13px; padding: 34px 0 88px; }
.foot .container { align-items: center; display: flex; flex-wrap: wrap; gap: 18px 24px; justify-content: space-between; }
.foot a:hover { color: var(--brass-lt); }
.foot .brand { color: var(--paper); }
.foot .brand-sub { color: var(--brass-lt); }

/* ---------- review bar: for moving between the previews, not part of the design */
.review { align-items: center; background: rgba(11, 20, 34, 0.95); border: 1px solid rgba(202, 165, 107, 0.4); border-radius: 999px; bottom: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color: #fff; display: flex; font: 500 13px/1 var(--f-body); gap: 4px; left: 50%; max-width: calc(100% - 24px); overflow-x: auto; padding: 5px; position: fixed; scrollbar-width: none; transform: translateX(-50%); z-index: 60; }
.review::-webkit-scrollbar { display: none; }
.review a { border-radius: 999px; color: rgba(236, 230, 220, 0.85); padding: 9px 12px; white-space: nowrap; }
.review a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.review a[aria-current='page'] { background: var(--brass-lt); color: var(--navy-dk); }
.review .review-label { color: rgba(236, 230, 220, 0.5); letter-spacing: 0.16em; padding: 0 8px 0 12px; text-transform: uppercase; }
@media (max-width: 1400px) { .review a { padding: 9px 9px; font-size: 12.5px; } .review .review-label { display: none; } }

@media (max-width: 1080px) {
  .head-links > a:not(.btn) { display: none; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .band-head { align-items: flex-start; flex-direction: column; gap: 24px; }
  .about, .phil { grid-template-columns: 1fr; gap: 1px; }
  .about { gap: 32px; }
  .ways, .facts-strip .container { grid-template-columns: 1fr 1fr; }
  .facts-strip .container > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 820px) {
  .beat { align-items: flex-end; padding: 0 16px 120px; } /* the card ends above the stage note and the review bar */
  .beat-hero { align-items: flex-start; padding-top: calc(var(--head-h) + 4vh); }
  .card { max-width: none; padding: 22px; }
  .card h2 { font-size: 1.6rem; }
  .card p { font-size: 14.5px; }
  .hero-copy { max-width: none; }
  .hero-copy .intro { font-size: 16px; margin: 18px 0 22px; }
  .stage-shade { background: linear-gradient(180deg, rgba(246, 241, 233, 0.97) 0%, rgba(246, 241, 233, 0.84) 50%, rgba(246, 241, 233, 0) 76%); opacity: 0; transition: opacity 0.5s ease; }
  .theme-dark .stage-shade { background: linear-gradient(180deg, rgba(11, 20, 34, 0.93) 0%, rgba(11, 20, 34, 0.78) 50%, rgba(11, 20, 34, 0) 78%); }
  .story.js-story:has(.beat-hero.is-on) .stage-shade { opacity: 1; }
  .story-nav, .tag, .hud { display: none; }
  .band { padding: 72px 0; }
  .svc-grid, .ways, .facts-strip .container { grid-template-columns: 1fr; }
  .facts-strip .container > div { border-left: 0; border-top: 1px solid var(--line-dk); padding: 22px 0; }
  .facts-strip .container > div:first-child { border-top: 0; }
  .phil > div { padding: 26px 22px; }
  .review a { padding: 9px 8px; }
  .container { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-story .beat .card, .js-story .beat .hero-copy { transition: none; }
  .hero-hint::before { animation: none; }
  .btn { transition: none; }
}

/* the review bar scrolls sideways on a phone instead of overflowing */
@media (max-width: 820px) { .review { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; } .review::-webkit-scrollbar { display: none; } }

/* the stage note clears the review bar, on a phone too */
@media (max-width: 820px) { .stage-note { bottom: 64px; right: 12px; font-size: 10px; } }
/* a short laptop screen: the scroll hint would sit under the review bar */
@media (max-height: 760px) { .hero-hint { display: none; } }
/* secondary lines a phone card can do without */
@media (max-width: 820px) { .ph-hide { display: none; } }
/* the header's main button gets its short label on a phone */
.head-cta .short { display: none; }
@media (max-width: 560px) { .head-cta .long { display: none; } .head-cta .short { display: inline; } }
/* a narrow phone: the brand on one line */
@media (max-width: 420px) { .brand-sub { display: none; } .brand-name { font-size: 17px; letter-spacing: 0.1em; } .head .btn { padding: 11px 12px; font-size: 11.5px; letter-spacing: 0.08em; } .hero-hint { display: none; } }
/* a phone's hero: the headline and the buttons, so the picture has the lower half */
@media (max-width: 820px) { #top .hero-copy .intro { display: none; } #top .hero-hint { display: none; } }
/* a phone's closing beat: one button, so the picture keeps some room */
@media (max-width: 820px) { .closing .intro { display: none; } .closing .hero-actions .btn + .btn { display: none; } }
/* a phone's hero: space under the headline when the intro is hidden, and one button (builder 3, 2026-11-03) */
@media (max-width: 820px) { .beat-hero .hero-actions { margin-top: 22px; } #top .hero-actions .btn + .btn { display: none; } }

/* her logo's full lockup: name, a 96px brass rule, the tagline (Logo Option 1, 2026-11-03) */
.lockup { align-items: center; display: flex; flex-direction: column; gap: 14px; padding: 8px 0 30px; text-align: center; width: 100%; }
.lockup-name { color: var(--paper); font: 600 clamp(30px, 4.6vw, 54px)/1 'Cormorant Garamond', 'Times New Roman', serif; letter-spacing: 0.16em; text-transform: uppercase; }
.lockup-rule { background: var(--brass-lt); height: 1px; width: 96px; }
.lockup-tag { color: var(--brass-lt); font: 500 12px/1.5 'Jost', 'Inter', sans-serif; letter-spacing: 0.32em; text-transform: uppercase; }
@media (max-width: 560px) { .lockup-tag { font-size: 10px; letter-spacing: 0.2em; } .lockup-name { letter-spacing: 0.1em; } }
.phil .qnote { color: var(--muted); font-size: 14px; margin: 16px 0 6px; }
.phil .qsections { columns: 2; column-gap: 24px; counter-reset: q; list-style: none; margin: 0; padding: 0; }
.phil .qsections li { break-inside: avoid; color: var(--ink); counter-increment: q; font-size: 14px; line-height: 1.45; padding: 5px 0 5px 26px; position: relative; }
.phil .qsections li::before { color: var(--accent-ink); content: counter(q); font: 500 16px/1 var(--f-display); left: 0; position: absolute; top: 6px; }
@media (max-width: 560px) { .phil .qsections { columns: 1; } }

/* ---------- animated process flows (shared/flow.js), light in her colours; .theme-dark flips them */
.flow-band { background: var(--paper); }
.flow-head { margin: 0 auto 34px; max-width: 760px; text-align: center; }
.flow-head .eyebrow { justify-content: center; }
.flow-head .section-title { margin-top: 14px; }
.flow-head .body-copy { margin: 16px auto 0; max-width: 620px; }
.fx { --fx-a: #1b2a41; --fx-b: #8a6a2f; --fx-ok: #2f7d5b; --fx-warn: #b0702a; --fx-bad: #b2453b; --fx-ink: #1b2a41; --fx-dim: #6b6458;
  --fx-bg: rgba(255, 255, 255, 0.86); --fx-line-soft: rgba(27, 42, 65, 0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(170deg, #ffffff, #f7f3ec); border: 1px solid rgba(27, 42, 65, 0.12);
  border-radius: 16px; box-shadow: 0 30px 70px -36px rgba(27, 42, 65, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; margin: 0 auto; max-width: 1040px; padding: 16px 18px 12px; position: relative; text-align: left; }
.fx-head { align-items: center; border-bottom: 1px solid var(--fx-line-soft); display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; }
.fx-rec { background: #c9c3b8; border-radius: 50%; height: 8px; width: 8px; }
.fx.is-playing .fx-rec { animation: fx-pulse 1.6s ease-in-out infinite; background: #c0503f; box-shadow: 0 0 8px rgba(192, 80, 63, 0.6); }
@keyframes fx-pulse { 50% { opacity: 0.35; } }
.fx-type { border: 1px solid rgba(27, 42, 65, 0.25); border-radius: 999px; color: var(--fx-a); flex: none; font: 600 10px/1 'Jost', 'Inter', sans-serif; letter-spacing: 0.2em; padding: 5px 10px; text-transform: uppercase; }
.fx-title { color: var(--fx-ink); font: 500 16px/1.3 'Jost', 'Inter', sans-serif; margin: 0; }
.fx-stage { background: radial-gradient(circle at 1px 1px, rgba(27, 42, 65, 0.14) 1px, transparent 0) 0 0 / 22px 22px; border-radius: 10px; margin: 12px 0 0; overflow-x: auto; }
.fx-stage svg { display: block; height: auto; min-width: 640px; width: 100%; }
.fx .tone-a { --t: var(--fx-a); } .fx .tone-b { --t: var(--fx-b); } .fx .tone-ok { --t: var(--fx-ok); } .fx .tone-warn { --t: var(--fx-warn); } .fx .tone-bad { --t: var(--fx-bad); }
.fx-node { cursor: pointer; opacity: 0; outline: none; transform: scale(0.84); transform-box: fill-box; transform-origin: center; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1); }
.fx-node.is-on { opacity: 1; transform: none; }
.fx-node.is-on.is-dim { opacity: 0.45; }
.fx-node-group { cursor: default; pointer-events: none; }
.fx-node-group.is-on.is-dim { opacity: 0.6; }
.fx-shape { fill: color-mix(in srgb, var(--t) 7%, #ffffff); stroke: var(--t); stroke-width: 1.3; transition: fill 0.3s, stroke-width 0.3s, filter 0.3s; }
.fx-node.is-focus .fx-shape { fill: color-mix(in srgb, var(--t) 16%, #ffffff); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--t) 35%, transparent)); }
.fx-node:hover .fx-shape, .fx-node:focus-visible .fx-shape, .fx-node.is-selected .fx-shape { fill: color-mix(in srgb, var(--t) 22%, #ffffff); stroke-width: 2.2; }
.fx-group { fill: color-mix(in srgb, var(--t) 4%, transparent); stroke: color-mix(in srgb, var(--t) 45%, transparent); stroke-dasharray: 5 5; stroke-width: 1; }
.fx-group-label { fill: var(--t); font: 600 9.5px 'Jost', 'Inter', sans-serif; letter-spacing: 0.18em; }
.fx-label { fill: var(--fx-ink); font: 500 13.5px 'Jost', 'Inter', sans-serif; pointer-events: none; }
.fx-label-sm { font-size: 12px; }
.fx-table-title { fill: var(--t); font: 600 10px 'Jost', 'Inter', sans-serif; letter-spacing: 0.16em; pointer-events: none; }
.fx-row { fill: #3d4656; font: 400 11.5px 'Jost', 'Inter', sans-serif; pointer-events: none; }
.fx-rule { stroke: color-mix(in srgb, var(--t) 45%, transparent); stroke-width: 1; }
.fx-edge { opacity: 0; transition: opacity 0.3s; }
.fx-edge.is-on { opacity: 1; }
.fx-edge.is-on.is-dim { opacity: 0.4; }
.fx-line { fill: none; stroke: var(--t); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 1.5; transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.08s, stroke 0.3s; }
.fx-edge.is-on .fx-line { stroke-dashoffset: 0; }
.fx-edge.is-on .fx-line.is-dashed { animation: fx-march 1.4s linear infinite; stroke-dasharray: 0.03 0.03; }
@keyframes fx-march { to { stroke-dashoffset: -0.06; } }
.fx-edge.is-focus .fx-line { stroke-width: 2.1; }
.fx-arrow { fill: var(--t); }
.fx-packets { display: none; }
.fx-edge.is-flowing .fx-packets { display: inline; }
.fx-packet { fill: var(--t); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--t) 70%, transparent)); }
.fx-edge-label { fill: var(--fx-dim); font: 500 10px 'Jost', 'Inter', sans-serif; }
.fx-caption { min-height: 66px; padding: 14px 4px 6px; }
.fx-caption p { animation: fx-caption 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); color: var(--fx-ink); font: 400 15.5px/1.55 'Jost', 'Inter', sans-serif; margin: 0; }
.fx-caption b { color: var(--fx-b); font: 600 12px 'Jost', 'Inter', sans-serif; letter-spacing: 0.08em; margin-right: 10px; }
.fx-caption strong { color: var(--fx-a); font-weight: 600; }
@keyframes fx-caption { from { opacity: 0; transform: translateY(8px); } }
.fx-controls { align-items: center; border-top: 1px solid var(--fx-line-soft); display: flex; gap: 6px; padding-top: 10px; }
.fx-controls > button { background: #fff; border: 1px solid rgba(27, 42, 65, 0.2); border-radius: 8px; color: var(--fx-a); cursor: pointer; display: grid; height: 32px; place-items: center; transition: border-color 0.2s, background 0.2s; width: 32px; }
.fx-controls > button:hover:not(:disabled) { border-color: var(--fx-a); }
.fx-controls > button:disabled { cursor: default; opacity: 0.35; }
.fx-controls .fx-play { background: var(--fx-a); border-color: var(--fx-a); color: #fff; }
.fx-dots { align-items: center; display: flex; gap: 5px; margin: 0 6px; }
.fx-dots button { background: none; border: 0; cursor: pointer; height: 14px; padding: 0; width: 20px; }
.fx-dots button::before { background: rgba(27, 42, 65, 0.18); border-radius: 3px; content: ''; display: block; height: 3px; transition: background 0.3s; }
.fx-dots button.is-done::before { background: var(--fx-b); }
.fx-dots button.is-on::before { background: var(--fx-a); }
.fx-tip { color: #8a8378; font: 500 10px 'Jost', 'Inter', sans-serif; letter-spacing: 0.12em; margin-left: auto; text-align: right; text-transform: uppercase; }
.fx-transcript { color: var(--fx-dim); font-size: 14px; line-height: 1.6; margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 560px) { .fx-tip { display: none; } .fx { padding: 12px 12px 10px; } .fx-caption p { font-size: 14.5px; } }
.theme-dark .flow-band, .flow-band.is-dark { background: var(--navy-dk); }
.theme-dark .flow-head .section-title { color: var(--paper); }
.theme-dark .flow-head .body-copy { color: rgba(236, 230, 220, 0.8); }
.theme-dark .fx { --fx-ink: #f1ebe4; --fx-dim: #b8c1cd; --fx-a: #a9c3dc; --fx-b: #caa56b; --fx-ok: #7fcf98; --fx-warn: #e3a35a; --fx-line-soft: rgba(202, 165, 107, 0.2);
  background: linear-gradient(170deg, rgba(20, 31, 50, 0.95), rgba(11, 20, 34, 0.95)); border-color: rgba(202, 165, 107, 0.25); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.7); }
.theme-dark .fx-shape { fill: color-mix(in srgb, var(--t) 14%, #0f1828); }
.theme-dark .fx-node.is-focus .fx-shape { fill: color-mix(in srgb, var(--t) 26%, #0f1828); }
.theme-dark .fx-row { fill: #cfd6e0; }
.theme-dark .fx-stage { background: radial-gradient(circle at 1px 1px, rgba(202, 165, 107, 0.16) 1px, transparent 0) 0 0 / 22px 22px; }
.theme-dark .fx-type { border-color: rgba(202, 165, 107, 0.4); color: #caa56b; }
.theme-dark .fx-controls > button { background: rgba(15, 24, 40, 0.8); border-color: rgba(202, 165, 107, 0.3); color: #f1ebe4; }
.theme-dark .fx-controls .fx-play { background: #caa56b; border-color: #caa56b; color: #0f1828; }
.theme-dark .fx-dots button::before { background: rgba(241, 235, 228, 0.2); }
.theme-dark .fx-packet { stroke: #0f1828; }
@media (prefers-reduced-motion: reduce) { .fx-node.is-on { transform: none; } .fx-line { stroke-dashoffset: 0; transition: none; } }
.phil-flow { margin-top: 40px; }
.theme-dark .fx-dots button.is-done::before { background: var(--fx-b); } .theme-dark .fx-dots button.is-on::before { background: var(--fx-a); }

/* ---------- multi-page (2026-11-03): current page in the nav, a phone menu, the inner pages, the sample forms */
.head-links > a[aria-current='page'] { color: var(--accent-ink); box-shadow: inset 0 -1px 0 currentColor; }
.theme-dark .head-links > a[aria-current='page'] { color: var(--brass-lt); }
.m-menu { display: none; position: relative; }
.m-menu > summary { align-items: center; border: 1px solid var(--line); border-radius: 2px; color: var(--navy); cursor: pointer; display: inline-flex; font: 600 12px/1 var(--f-body); gap: 8px; letter-spacing: 0.12em; list-style: none; min-height: 44px; padding: 0 14px; text-transform: uppercase; }
.m-menu > summary::-webkit-details-marker { display: none; }
.m-menu > summary > span { border-bottom: 1.5px solid currentColor; border-top: 1.5px solid currentColor; height: 9px; position: relative; width: 16px; }
.m-menu > summary > span::after { border-top: 1.5px solid currentColor; content: ''; left: 0; position: absolute; right: 0; top: 2.2px; }
.m-menu nav { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 24px 50px rgba(20, 35, 58, 0.18); display: grid; min-width: 240px; padding: 8px; position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; }
.m-menu nav a:not(.btn) { border-radius: 2px; color: var(--ink); font: 500 16px/1 var(--f-body); padding: 14px 12px; }
.m-menu nav a:not(.btn):hover, .m-menu nav a[aria-current='page'] { background: var(--sand); color: var(--accent-ink); }
.m-menu nav .btn { margin-top: 6px; }
.theme-dark .m-menu > summary { border-color: var(--line-dk); color: var(--paper); }
@media (max-width: 1080px) { .m-menu { display: block; } }
@media (max-width: 560px) { .head-cta { display: none !important; } }

body:not([data-page='home']) main#page { background: var(--paper); color: var(--ink); display: block; padding-top: var(--head-h); }
.pg-hero { background: linear-gradient(180deg, var(--sand), var(--paper)); border-bottom: 1px solid var(--line); padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 84px); }
.pg-hero-in { align-items: center; display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1fr; }
.pg-hero.has-img .pg-hero-in { grid-template-columns: 1.05fr 1fr; }
.pg-hero .eyebrow { margin-bottom: 18px; }
.pg-title { color: var(--navy); font: 500 clamp(2.6rem, 5.4vw, 4.6rem)/1.02 var(--f-display); letter-spacing: -0.015em; margin: 0; max-width: 16ch; }
.pg-title em { color: var(--accent-ink); font-style: italic; }
.pg-lead { color: var(--ink); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; margin: 22px 0 0; max-width: 40rem; }
.pg-meta { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.pg-hero .hero-actions { margin-top: 30px; }
.pg-hero-img { aspect-ratio: 4 / 3; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(20, 35, 58, 0.4); margin: 0; overflow: hidden; }
.pg-hero-img img { display: block; height: 100%; object-fit: cover; width: 100%; }
.pg-band { padding: clamp(64px, 8vw, 110px) 0; }
.pg-band + .pg-band { border-top: 1px solid var(--line); }
.pg-head { margin: 0 0 40px; max-width: 760px; }
.pg-head .section-title { margin-top: 14px; }
.pg-head .body-copy { margin: 16px 0 0; }
.pg-two { display: grid; gap: clamp(24px, 5vw, 64px); grid-template-columns: 1.1fr 1fr; align-items: start; }
.pg-quote { border-left: 2px solid var(--accent); color: var(--navy); font: italic 500 clamp(1.3rem, 2vw, 1.65rem)/1.45 var(--f-display); margin: 0; padding-left: 20px; }
.pg-quote-c { border: 0; margin: 40px auto 0; max-width: 46rem; padding: 0; text-align: center; }
.pg-narrow { max-width: 820px; text-align: center; }
.pg-about { align-items: start; display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(240px, 0.8fr) 1.4fr; }
.pg-portrait { aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(20, 35, 58, 0.4); margin: 0; overflow: hidden; position: sticky; top: calc(var(--head-h) + 24px); }
.pg-portrait img { display: block; height: 100%; object-fit: cover; object-position: 50% 22%; width: 100%; }
.pg-prose p { color: var(--ink); font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.pg-prose .pg-close { border-top: 1px solid var(--line); color: var(--navy); font: 500 24px/1.4 var(--f-display); margin-top: 28px; padding-top: 24px; }
.pg-duo { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.pg-duo figure { margin: 0; }
.pg-duo img { aspect-ratio: 16 / 10; border-radius: 12px; display: block; height: auto; object-fit: cover; width: 100%; }
.pg-duo figcaption { color: var(--accent-ink); font: 600 11.5px/1 var(--f-body); letter-spacing: 0.22em; margin-top: 12px; text-transform: uppercase; }
.pg-svc-list { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pg-svc { background: var(--white); padding: clamp(24px, 3vw, 38px); scroll-margin-top: calc(var(--head-h) + 20px); }
.pg-svc .n { color: var(--accent-ink); font: 600 11.5px/1 var(--f-body); letter-spacing: 0.2em; }
.pg-svc h2 { color: var(--navy); font: 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.12 var(--f-display); margin: 12px 0 0; }
.pg-svc-body p { color: var(--muted); font-size: 15.5px; line-height: 1.72; margin: 12px 0 0; }
.pg-svc-body .qs { list-style: none; margin: 12px 0 0; padding: 0; }
.pg-svc-body .qs li { border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.6; padding: 10px 0; }
.pg-svc-body .qs b { color: var(--navy); display: block; font-weight: 600; }
.pg-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 26px; }
.pg-tab { background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--navy); cursor: pointer; font: 500 14px/1 var(--f-body); min-height: 44px; padding: 0 18px; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.pg-tab:hover { border-color: var(--navy); }
.pg-tab[aria-selected='true'] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.pg-steps { counter-reset: s; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 0 44px; padding: 0; }
.pg-steps li { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; }
.pg-steps .n, .pg-card .n { color: var(--accent-ink); font: 500 26px/1 var(--f-display); }
.pg-steps h3 { color: var(--navy); font: 500 22px/1.2 var(--f-display); margin: 12px 0 0; }
.pg-steps p { color: var(--muted); font-size: 15px; line-height: 1.68; margin: 10px 0 0; }
.pg-flow { margin-top: 8px; }
.pg-qcard { align-items: center; background: linear-gradient(140deg, #eef4f6, var(--white)); border: 1px solid rgba(45, 106, 134, 0.25); border-radius: 16px; color: inherit; display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1.1fr 1fr; padding: clamp(28px, 4vw, 52px); transition: box-shadow 0.25s, border-color 0.25s; }
.pg-qcard:hover { border-color: var(--accent-ink); box-shadow: 0 24px 60px -36px rgba(45, 106, 134, 0.6); }
.pg-qcard .section-title { margin-top: 12px; }
.pg-qcard .body-copy { margin: 14px 0 22px; }
.pg-qlist { columns: 2; column-gap: 22px; counter-reset: q; list-style: none; margin: 0; padding: 0; }
.pg-qlist li { break-inside: avoid; color: var(--ink); counter-increment: q; font-size: 15px; line-height: 1.45; padding: 7px 0 7px 28px; position: relative; }
.pg-qlist li::before { color: var(--accent-ink); content: counter(q); font: 500 18px/1 var(--f-display); left: 0; position: absolute; top: 8px; }
.pg-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.pg-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; }
.pg-card p { color: var(--ink); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }
.pg-trusted { background: var(--sand); }
.pg-form-band { background: var(--sand); }
.pg-form-wrap { max-width: 980px; }
.pg-contact { align-items: start; display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1.5fr 1fr; }
.pg-side { display: grid; gap: 16px; position: sticky; top: calc(var(--head-h) + 24px); }
.pg-side-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; }
.pg-side-card p { color: var(--ink); font-size: 15px; line-height: 1.65; margin: 10px 0 0; }
.pg-link { color: var(--accent-ink); display: inline-block; font: 600 13px/1 var(--f-body); letter-spacing: 0.06em; margin-top: 14px; }
.pg-side-btn { justify-self: start; }

/* the sample forms */
.form { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px -44px rgba(20, 35, 58, 0.4); padding: clamp(22px, 4vw, 48px); }
.form-banner { align-items: center; background: #fbf5e8; border: 1px solid rgba(168, 131, 74, 0.35); border-radius: 10px; color: var(--accent-ink); display: flex; font: 500 14px/1.45 var(--f-body); gap: 10px; margin: 0 0 26px; padding: 12px 16px; }
.form-banner:last-child { margin: 26px 0 0; }
.form-banner span { font-size: 9px; }
.form-head { margin-bottom: 10px; }
.form-title { color: var(--navy); font: 500 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--f-display); margin: 0 0 6px; }
.form-intro { color: var(--muted); font-size: 16px; margin: 6px 0 0; }
.form-section { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 28px; }
.form-section-title { align-items: baseline; color: var(--navy); display: flex; font: 500 clamp(1.4rem, 2.4vw, 1.8rem)/1.15 var(--f-display); gap: 14px; margin: 0 0 18px; }
.form-section-title .n { color: var(--accent-ink); font-size: 0.95em; }
.form-group { border: 0; margin: 0 0 20px; padding: 0; }
.form-legend { color: var(--ink); font: 600 15.5px/1.4 var(--f-body); margin-bottom: 10px; padding: 0; }
.form-options { display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.form-options-inline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.form-options-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.form-check { align-items: center; border-radius: 8px; color: var(--ink); cursor: pointer; display: flex; font-size: 15.5px; gap: 12px; line-height: 1.4; min-height: 44px; padding: 6px 8px; }
.form-check:hover { background: var(--sand); }
.form-check input[type='checkbox'], .form-check input[type='radio'], .form-table input[type='checkbox'] { accent-color: var(--navy); flex: none; height: 20px; margin: 0; width: 20px; }
.form-check-other { flex-wrap: wrap; }
.form-check-other .form-input-sm { flex: 1 1 140px; }
.form-label { color: var(--ink); display: block; font: 600 14.5px/1.3 var(--f-body); margin-bottom: 8px; }
.form-label .opt { color: var(--muted); font-weight: 400; }
.form-field { margin: 0 0 20px; }
.form-row { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.form-input { background: var(--white); border: 1px solid rgba(27, 42, 65, 0.25); border-radius: 8px; color: var(--ink); font: 400 16px/1.4 var(--f-body); min-height: 46px; padding: 10px 12px; width: 100%; }
.form-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27, 42, 65, 0.12); outline: none; }
.form-input-sm { min-height: 38px; padding: 6px 10px; width: auto; }
.form-input-xs { max-width: 120px; }
.form-input:disabled { background: #f1eee8; color: var(--muted); cursor: not-allowed; }
.form-textarea { min-height: 96px; resize: vertical; }
.form-instruction { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.form-hint { color: var(--accent-ink); font-size: 14px; margin: 8px 0 0; }
.form-note { background: var(--sand); border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; margin: 6px 0 18px; padding: 10px 14px; }
.form-table-wrap { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow-x: auto; }
.form-table { border-collapse: collapse; font-size: 15px; width: 100%; }
.form-table th, .form-table td { border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: middle; }
.form-table thead th { background: var(--sand); color: var(--navy); font: 600 13px/1.3 var(--f-body); letter-spacing: 0.04em; }
.form-table tbody th { color: var(--ink); font-weight: 400; }
.form-table tr:last-child th, .form-table tr:last-child td { border-bottom: 0; }
.form-table .c { text-align: center; width: 84px; }
.form-table td.c input { height: 22px; width: 22px; }
.form-table .office { color: var(--muted); }
.form-orgs td { padding: 6px 8px; }
.form-orgs .form-input { min-height: 40px; }
.form-closing { color: var(--navy); font: italic 500 20px/1.5 var(--f-display); margin: 30px 0 0; text-align: center; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.form-questionnaire .form-actions { justify-content: center; }
.form-done { background: #eef6f1; border: 1px solid rgba(47, 125, 91, 0.35); border-radius: 10px; color: #23573f; font-size: 15.5px; line-height: 1.55; margin-top: 18px; padding: 14px 18px; }
.form-done strong { color: #1d4a35; }
@media (max-width: 1080px) {
  .pg-hero.has-img .pg-hero-in, .pg-two, .pg-qcard, .pg-contact { grid-template-columns: 1fr; }
  .pg-about { grid-template-columns: 1fr; }
  .pg-portrait { max-width: 360px; position: static; }
  .pg-side { position: static; }
  .pg-steps, .pg-cards { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .pg-svc-list, .pg-duo, .form-row { grid-template-columns: 1fr; }
  .pg-qlist { columns: 1; }
  .pg-title { max-width: none; }
  .form-options, .form-options-2 { grid-template-columns: 1fr; }
  .form-table .c { width: 56px; }
}
.pg-svc:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- inner pages, revised 2026-11-03 ("less is more", "super clean"): one calm column, generous space */
.pg-col { max-width: 760px; }
.pg-cta-light { background: var(--paper); border-top: 1px solid var(--line); text-align: center; }
.pg-cta-light .section-title { margin: 14px auto 0; max-width: 18em; }
.pg-cta-light .body-copy { margin: 14px auto 28px; }
.pg-cta-light .hero-actions, .pg-narrow .hero-actions { justify-content: center; }
.pg-hero.has-mark .pg-hero-in { grid-template-columns: 1.4fr 0.6fr; }
.pg-hero-mark { display: grid; place-items: center; }
.pg-mark { height: auto; max-width: 220px; opacity: 0.9; width: 100%; }
.pg-h2 { margin: 12px 0 0; }
.pg-col .body-copy { margin: 14px 0 0; }
.pg-big { color: var(--ink) !important; font-size: 18px !important; line-height: 1.75 !important; margin: 0 0 30px !important; }
.pg-after-quote { margin-top: 24px !important; }
.pg-intro-line { margin-bottom: 8px !important; }
.pg-list { counter-reset: none; list-style: none; margin: 0; padding: 0; }
.pg-item { border-top: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 44px 1fr; padding: 34px 0 36px; scroll-margin-top: calc(var(--head-h) + 20px); }
.pg-item:last-child { border-bottom: 1px solid var(--line); }
.pg-item .n { color: var(--accent-ink); font: 500 13px/2.2 var(--f-body); letter-spacing: 0.12em; }
.pg-item h2, .pg-item h3 { color: var(--navy); font: 500 clamp(1.45rem, 2.1vw, 1.8rem)/1.15 var(--f-display); margin: 0; }
.pg-item p, .pg-item-body p { color: var(--muted); font-size: 16px; line-height: 1.75; margin: 12px 0 0; }
.pg-item-body .qs { list-style: none; margin: 14px 0 0; padding: 0; }
.pg-item-body .qs li { color: var(--muted); font-size: 15.5px; line-height: 1.65; padding: 8px 0; }
.pg-item-body .qs b { color: var(--navy); display: block; font-weight: 600; }
.pg-steps-list { margin: 30px 0 36px; }
.pg-ways { margin: 18px 0 0; }
.pg-ways > div { border-top: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 210px 1fr; padding: 20px 0; }
.pg-ways > div:last-child { border-bottom: 1px solid var(--line); }
.pg-ways dt { color: var(--navy); font: 500 20px/1.3 var(--f-display); }
.pg-ways dd { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; }
.pg-after-list { margin-top: 26px !important; }
.pg-can-help { color: var(--navy); font: italic 500 24px/1.4 var(--f-display); margin: 18px 0 0; }
.pg-plain { list-style: none; margin: 22px 0 0; padding: 0; }
.pg-plain li { border-top: 1px solid var(--line); color: var(--ink); font-size: 17px; line-height: 1.6; padding: 16px 0; }
.pg-plain li:last-child { border-bottom: 1px solid var(--line); }
.pg-q-link { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 28px 0 0; }
.pg-q-link .pg-link { margin-top: 0; }
@media (max-width: 820px) {
  .pg-hero.has-mark .pg-hero-in { grid-template-columns: 1fr; }
  .pg-hero-mark { display: none; }
  .pg-item { gap: 8px; grid-template-columns: 1fr; padding: 26px 0 28px; }
  .pg-ways > div { gap: 6px; grid-template-columns: 1fr; }
}

/* ---------- round 3 (2026-11-03): soft and warm, the words still all business
   Alisa liked previews 5 and 6 only, and asked for "a juxtaposition of clean text and softer more feminine design"
   with "a hint of a warm color"; still "less is more", "super clean", "down to business but warm", no stock photos.
   So: pill buttons, lighter Cormorant headings with one italic phrase, Mulish for the body, more air, a soft warm
   footer. The warm hint stays a hint: kicker labels, the one thin-line graphic, the italic phrase, link underlines,
   one wash band, button hover. Navy stays for the text and the logo; the logo keeps its gold. */
body { color: var(--ink); font-family: var(--f-body); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--accent-ink); }
.eyebrow { color: var(--accent-ink); font: 600 11.5px/1.5 var(--f-body); letter-spacing: 0.22em; }
.section-title { font-weight: 400; letter-spacing: -0.005em; line-height: 1.12; }
.section-title em, .pg-title em, .display em { color: var(--accent-ink); font-style: italic; font-weight: 400; }
.body-copy { line-height: 1.82; }

/* pill buttons, in her own capitalisation */
.btn { border-radius: 999px; border-width: 1px; font: 600 14px/1 var(--f-body); letter-spacing: 0.02em; min-height: 48px; padding: 15px 28px; text-transform: none; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-ghost { background: transparent; border-color: rgba(27, 42, 65, 0.3); color: var(--navy); }
.btn-ghost:hover { background: var(--wash); border-color: var(--accent); color: var(--accent-ink); }

/* header: her logo in navy and gold, a pill for the consultation */
.head { background: color-mix(in srgb, var(--bg-2) 90%, transparent); border-bottom-color: rgba(27, 42, 65, 0.07); }
.brand { color: var(--navy); }
.brand-sub { color: var(--logo-gold); font-family: var(--f-logo); }
.head-links > a:not(.btn) { color: var(--ink); font: 500 14px/1 var(--f-body); letter-spacing: 0.01em; }
.head-links > a:not(.btn):hover, .head-links > a[aria-current='page'] { color: var(--accent-ink); }
.head-links > a[aria-current='page'] { box-shadow: inset 0 -1px 0 var(--accent); }
.head .btn { font-size: 13.5px; min-height: 0; padding: 12px 22px; }
.m-menu > summary { border-color: rgba(27, 42, 65, 0.18); border-radius: 999px; font: 600 13.5px/1 var(--f-body); letter-spacing: 0.04em; padding: 0 18px; text-transform: none; }
.m-menu nav { background: var(--bg-2); border-color: rgba(27, 42, 65, 0.08); border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(27, 42, 65, 0.22); }
.m-menu nav a:not(.btn) { border-radius: 12px; }
.m-menu nav a:not(.btn):hover, .m-menu nav a[aria-current='page'] { background: var(--wash); color: var(--accent-ink); }

/* footer: soft and warm, her logo in navy and gold */
.foot { background: var(--foot-bg); border-top: 1px solid var(--accent-line); color: var(--muted); font-size: 14px; padding: 64px 0 104px; }
.foot .container { gap: 12px 30px; justify-content: center; text-align: center; }
.foot a { border-bottom: 1px solid var(--accent-line); }
.foot a:hover { border-bottom-color: var(--accent); color: var(--accent-ink); }
.lockup { gap: 14px; padding: 0 0 20px; }
.lockup-name { color: var(--navy); font-size: clamp(26px, 3.4vw, 40px); }
.lockup-rule { background: var(--logo-gold); }
.lockup-tag { color: var(--logo-gold); font-family: var(--f-logo); }

/* review bar (not part of the design): smaller and lower on a phone, so it leaves a page's buttons clear */
.review { background: rgba(27, 42, 65, 0.9); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 10px 28px rgba(27, 42, 65, 0.22); font: 500 13px/1 var(--f-body); }
.review a[aria-current='page'] { background: var(--wash); color: var(--navy); }
.review .review-label { color: rgba(236, 230, 220, 0.78); }
@media (max-width: 820px) {
  .review { bottom: 8px; font-size: 12px; padding: 3px; }
  .review a { padding: 7px 11px; }
}

/* inner pages: one calm column on a warm page, more air */
body:not([data-page='home']) main#page { background: var(--bg-2); }
.pg-hero { background: var(--bg); border-bottom-color: rgba(27, 42, 65, 0.07); padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.pg-title { font-weight: 400; line-height: 1.08; }
.pg-lead { line-height: 1.8; }
.pg-band { padding: clamp(72px, 9vw, 124px) 0; }
.pg-band + .pg-band { border-top-color: rgba(27, 42, 65, 0.07); }
.pg-quote { border-left: 1px solid var(--accent); font-weight: 400; line-height: 1.5; padding-left: 24px; }
.pg-portrait { border-radius: 999px 999px 18px 18px; box-shadow: none; }
.pg-prose p { line-height: 1.85; }
.pg-prose .pg-close { border-top-color: var(--accent-line); font-weight: 400; }
.pg-item { border-top-color: rgba(27, 42, 65, 0.08); }
.pg-item:last-child { border-bottom-color: rgba(27, 42, 65, 0.08); }
.pg-item h2, .pg-item h3 { font-weight: 400; line-height: 1.2; }
.pg-item p, .pg-item-body p { line-height: 1.82; }
.pg-ways > div, .pg-ways > div:last-child, .pg-plain li, .pg-plain li:last-child { border-color: rgba(27, 42, 65, 0.08); }
.pg-can-help { font-weight: 400; }
.pg-link { border-bottom: 1px solid var(--accent); color: var(--navy); padding-bottom: 3px; }
.pg-link:hover { color: var(--accent-ink); }
.pg-cta-light { background: var(--bg-2); border-top-color: rgba(27, 42, 65, 0.07); }
.pg-cta-light .section-title { max-width: 16em; }
.pg-form-band { background: var(--bg); }
.pg-side-card { border-color: rgba(27, 42, 65, 0.08); border-radius: 20px; }
.pg-mark { opacity: 1; }
.pg-h2 + .pg-quote { margin-top: 26px; }

/* the sample forms, softened */
.form { border-color: rgba(27, 42, 65, 0.08); border-radius: 24px; box-shadow: 0 30px 70px -48px rgba(27, 42, 65, 0.3); }
.form-banner { background: var(--wash); border-color: var(--accent-line); border-radius: 14px; color: var(--accent-ink); }
.form-title, .form-section-title, .form-closing { font-weight: 400; }
.form-input { border-color: rgba(27, 42, 65, 0.2); border-radius: 12px; }
.form-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-line); }
.form-check { border-radius: 12px; }
.form-check:hover { background: var(--wash); }
.form-check input[type='checkbox'], .form-check input[type='radio'], .form-table input[type='checkbox'] { accent-color: var(--accent-ink); }
.form-note { background: var(--bg); border-radius: 12px; }
.form-table-wrap { border-color: rgba(27, 42, 65, 0.1); border-radius: 14px; }
.form-table thead th { background: var(--bg); }

/* ---------- round 4 (2026-11-03): quiet fine-line art (shared/art.js)
   Mitchell: "subtle and revealing of the professionalism of alisa and the care she gives to her clients". Line art
   only, in each preview's warm hint, at 1.25px; no photographs except her portrait, nothing moves but the gentle fade. */
:root { --f-script: 'Pinyon Script', 'Allura', cursive; --blush: #f3e2d9; }
.ic { color: var(--accent-ink); fill: none; flex: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; width: 22px; }
.ic * { vector-effect: non-scaling-stroke; }
.ic .dash { stroke-dasharray: 1.5 2.6; }

/* her published facts, a quiet row: a hairline, a tiny icon, the figure in her serif, her own line beneath */
.facts-row { display: grid; gap: 0 clamp(20px, 3vw, 36px); grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts-row.c2 { grid-template-columns: 1fr 1fr; }
.facts-row > div { border-top: 1px solid var(--accent-line); padding: 20px 0 6px; }
.facts-row dt { color: var(--navy); font: 400 clamp(1.3rem, 1.9vw, 1.55rem)/1.2 var(--f-display); margin: 0; }
.facts-row dt .ic { display: block; height: 20px; margin: 0 0 12px; width: 20px; }
.facts-row dd { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 8px 0 0; }
@media (max-width: 900px) { .facts-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .facts-row, .facts-row.c2 { grid-template-columns: 1fr; } .facts-row > div { padding: 16px 0 10px; } }

/* her name in a script face as a sign-off: a typeset stand-in, not her signature */
.sign-off { color: var(--accent-ink); font: 400 clamp(2.1rem, 3.2vw, 2.6rem)/1.15 var(--f-script); margin: 20px 0 0; }

/* a fine-line seal with her initials, for the confidential Giving Portfolio Review */
.seal { fill: none; flex: none; height: 84px; stroke: var(--accent); width: 84px; }
.seal * { stroke-width: 1; vector-effect: non-scaling-stroke; }
.seal .seal-inner { opacity: 0.85; stroke-dasharray: 1 3.2; }
.seal .seal-rule { opacity: 0.7; }
.seal text { fill: var(--accent-ink); font: italic 400 28px var(--f-display); letter-spacing: 0.02em; stroke: none; }
.seal .seal-dot { fill: var(--accent); stroke: none; }

/* a very faint paper grain over the page (1.4% on average; the text contrast was measured with it), never on the footer */
body { position: relative; }
body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.08 0.04 0 0 0 -0.006'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 30; }
.foot { position: relative; z-index: 31; }

/* inner pages: the service icons, the seal by the Review, the envelope by Contact, her facts on About */
.pg-item .n { align-items: flex-start; display: flex; flex-direction: column; gap: 10px; }
.pg-item .n .ic { height: 26px; width: 26px; }
.pg-hero-icon { margin-bottom: 18px; }
.pg-hero-icon .ic { height: 28px; width: 28px; }
.pg-review-head { align-items: center; display: flex; gap: 28px; justify-content: space-between; }
.pg-review-head .seal { height: 92px; width: 92px; }
.pg-hero-mark .seal { height: auto; max-width: 180px; width: 100%; }
.pg-facts { border-top: 0; margin-top: clamp(56px, 7vw, 88px); }
.pg-prose .sign-off { margin: 4px 0 26px; }
@media (max-width: 820px) { .pg-review-head .seal { height: 68px; width: 68px; } .pg-item .n { align-items: center; flex-direction: row; } }

/* one landing page per preview (2026-11-03 evening): the header links land each section just under the fixed header */
#top, #about, #services, #philanthropists, #contact { scroll-margin-top: calc(var(--head-h) + 16px); }
.form-short .form-row { margin-top: 0; }
/* ---------- 2026-11-04: the original globe returns, and it is the whole site
   Alisa chose the first Tel Aviv • Palm Beach ("loved Tel Aviv palm beach graphic"); the globe story is restored as
   first built and the sections under it carry her whole document ("Alisa Chessler — Website Content", 2026-11-04) on
   one light page: each service is one line that opens to her full words, and Contact holds the short sample form. */
.svc-layout { align-items: start; display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: 0.85fr 1.15fr; }
.svc-intro { position: sticky; top: calc(var(--head-h) + 32px); }
.svc-intro .section-title { margin: 16px 0 22px; }
.svc-intro .body-copy { color: var(--ink); font-size: 16px; margin: 0 0 14px; }
.svc-rows { border-top: 1px solid var(--line); }
.svc-row { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 16px); }
.svc-row > summary { align-items: center; cursor: pointer; display: grid; gap: 16px; grid-template-columns: 30px 1fr 16px; list-style: none; min-height: 64px; padding: 16px 4px; }
.svc-row > summary::-webkit-details-marker { display: none; }
.svc-row .n { color: var(--accent-ink); font: 600 11.5px/1 var(--f-body); letter-spacing: 0.2em; }
.svc-row h3 { color: var(--navy); font: 400 clamp(1.3rem, 1.8vw, 1.55rem)/1.2 var(--f-display); margin: 0; transition: color 0.25s ease; }
.svc-row > summary:hover h3, .svc-row[open] h3 { color: var(--accent-ink); }
.svc-mark { height: 14px; position: relative; width: 14px; }
.svc-mark::before, .svc-mark::after { background: var(--accent-ink); content: ''; height: 1.25px; left: 0; position: absolute; top: 6.5px; transition: transform 0.3s ease; width: 14px; }
.svc-mark::after { transform: rotate(90deg); }
.svc-row[open] .svc-mark::after { transform: rotate(0deg); }
.svc-body { padding: 0 34px 26px 50px; }
.svc-body p { color: var(--muted); font-size: 15.5px; line-height: 1.78; margin: 0 0 12px; }
.svc-body .qs { list-style: none; margin: 4px 0 14px; padding: 0; }
.svc-body .qs li { border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.6; padding: 10px 0; }
.svc-body .qs b { color: var(--navy); display: block; font-weight: 600; }
.ways-foot { align-items: center; }
.ways-foot .btn-brass { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--navy-dk); }
.ways-foot .btn-brass:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.phil h4.how { color: var(--accent-ink); font: 600 11.5px/1.5 var(--f-body); letter-spacing: 0.22em; margin: 28px 0 0; text-transform: uppercase; }
.phil h4.how + .steps { margin-top: 10px; }
.contact-band { background: var(--bg); border-top: 1px solid var(--accent-line); }
.contact { align-items: start; display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: 0.85fr 1.15fr; }
.contact-copy .section-title { margin-top: 16px; }
.contact-copy .body-copy { color: var(--ink); font-size: 17px; margin: 20px 0 0; max-width: 30rem; }
.contact-copy .hero-actions { margin-top: 26px; }
@media (max-width: 900px) {
  .svc-layout, .contact { grid-template-columns: 1fr; }
  .svc-intro { position: static; }
}
@media (max-width: 560px) {
  .svc-row > summary { gap: 12px; grid-template-columns: 24px 1fr 14px; padding: 14px 2px; }
  .svc-body { padding: 0 0 22px 36px; }
  .ways-foot .btn { width: 100%; }
}

/* ---------- 2026-11-09: pink, flowers, her full logo at the top, Services on its own page
   Alisa, in the walkthrough with Mitchell: "Add pink - feminine and flowers", "make the earth animation more pink",
   "Make services a second page", and her logo (Option 1, Classic Serif) "add this to the top". The page turns blush
   and rose; navy stays for the words and her logo keeps its navy and gold. Flowers are fine-line blossoms drawn in
   code (shared/page.js sprig()), in a few corners only. */
:root {
  --bg: #fbf2f1;
  --bg-2: #fdf8f7;
  --wash: #f7e3e5;
  --foot-bg: #f8e8ea;
  --accent: #d6899c;
  --accent-ink: #a34a63;
  --accent-line: rgba(214, 137, 156, 0.4);
  --blush: #f6dde1;
  --petal: #f6cfd8;
  --petal-line: #d07f94;
  --stage-bg: #fbf2f1;
}
.head { background: color-mix(in srgb, #fdf6f5 92%, transparent); border-bottom-color: rgba(163, 74, 99, 0.12); }

/* her full logo in the header: the name, a short gold rule, the whole tagline */
.brand-lock { align-items: center; display: flex; flex-direction: column; }
.head .brand-name { font-size: 21px; letter-spacing: 0.17em; margin-right: -0.17em; }
.brand-rule { background: var(--logo-gold); display: block; height: 1px; margin: 6px 0 5px; width: 46px; }
.head .brand-sub { font-size: 8px; letter-spacing: 0.25em; margin: 0 -0.25em 0 0; }
@media (max-width: 1180px) and (min-width: 1081px) { .head-links { gap: 14px; } .head-links > a:not(.btn) { font-size: 13.5px; } }
@media (max-width: 420px) { .head .brand-name { font-size: 16px; letter-spacing: 0.1em; margin-right: -0.1em; } .head .brand-sub { display: block; font-size: 6.4px; letter-spacing: 0.15em; margin-right: -0.15em; } .brand-rule { margin: 4px 0 3px; width: 30px; } }

/* a tiny blossom before each section label */
.sec-eyebrow { align-items: center; display: inline-flex; gap: 10px; }
.sec-eyebrow::before { background: var(--accent); content: ''; flex: none; height: 14px; width: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* the blossoms: rose petals, gold stems and leaves, fine lines */
.floral { height: auto; pointer-events: none; position: absolute; z-index: 0; }
.floral *, .floral-rule * { vector-effect: non-scaling-stroke; }
.fl-stem { fill: none; stroke: var(--logo-gold); stroke-linecap: round; stroke-opacity: 0.55; stroke-width: 1.1; }
.fl-leaf { fill: rgba(138, 106, 47, 0.07); stroke: var(--logo-gold); stroke-opacity: 0.6; stroke-width: 1; }
.fl-vein { fill: none; stroke: var(--logo-gold); stroke-opacity: 0.4; stroke-width: 0.8; }
.fl-petal { fill: var(--petal); fill-opacity: 0.85; stroke: var(--petal-line); stroke-width: 1; }
.fl-stamen { stroke: var(--accent-ink); stroke-opacity: 0.7; stroke-width: 0.8; }
.fl-dot { fill: var(--logo-gold); }
.fl-eye { fill: var(--accent-ink); fill-opacity: 0.75; }
.floral-rule { display: block; height: 30px; margin: 0 auto 6px; width: 110px; }
.foot .floral-rule { flex: 0 0 100%; margin-bottom: -2px; width: 100%; }

.about-band, .svc-band, .contact-band { overflow: hidden; position: relative; }
.about-band > .container, .svc-band > .container, .contact-band > .container { position: relative; z-index: 1; }
/* pink grounds for the light sections (the navy bands stay navy, her logo's colour) */
.about-band, .phil-band { background: var(--bg-2); }
.svc-band { background: #faeeef; }
.contact-band { background: var(--bg); }
/* each sprig sits in a margin or an empty corner, never behind her words */
.floral-stage { bottom: -70px; left: -40px; width: 150px; z-index: 2; }
.floral-about { right: -40px; top: -30px; transform: rotate(180deg); width: 150px; }
.floral-teaser { bottom: -96px; left: -40px; width: 160px; }
.floral-contact { bottom: -26px; left: -30px; transform: scaleX(-1); width: clamp(150px, 14vw, 220px); }
.svc-page-close .floral-contact.fl-right { left: auto; right: -30px; transform: none; }
@media (max-width: 1399px) { .floral-about { display: none; } }
@media (max-width: 900px) { .floral-teaser { display: none; } }
@media (max-width: 820px) {
  .floral-contact { width: 120px; }
  .floral-stage { width: 110px; bottom: -50px; left: -30px; }
  #top .hero-copy .intro { display: block; font-size: 15px; line-height: 1.55; margin: 12px 0 0; } /* her line at the top on a phone too */
}

/* the home page lists the eleven services and opens the Services page */
.svc-teaser .svc-intro .hero-actions { margin-top: 26px; }
.svc-names { align-self: center; column-gap: clamp(20px, 3vw, 40px); display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .svc-names { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; } }
.svc-names li { border-bottom: 1px solid var(--line); }
.svc-names a { align-items: center; display: grid; gap: 12px; grid-template-columns: 26px 1fr 16px; min-height: 52px; padding: 10px 2px; }
.svc-names .n { color: var(--accent-ink); font: 600 11.5px/1 var(--f-body); letter-spacing: 0.2em; }
.svc-names .nm { color: var(--navy); font: 400 clamp(1.08rem, 1.3vw, 1.2rem)/1.25 var(--f-display); transition: color 0.25s ease; }
.svc-names .arrow { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.svc-names a:hover .nm { color: var(--accent-ink); }
.svc-names a:hover .arrow { opacity: 1; transform: none; }

/* the Services page: her intro beside the eleven, then one closing line */
body[data-page='services'] main#page { background: var(--bg); padding-top: var(--head-h); }
.svc-page { padding-top: clamp(56px, 7vw, 104px); }
.svc-page h1.section-title { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.svc-page .svc-intro .hero-actions { margin-top: 26px; }
.svc-page-close { text-align: center; }
.svc-close { display: flex; flex-direction: column; align-items: center; }
.svc-close .body-copy { color: var(--ink); font-size: 17px; margin: 18px 0 0; }
.svc-close .hero-actions { justify-content: center; margin-top: 28px; }

/* 2026-11-09, later: her shorter bio and its Beyond the Work section; three facts (she took out "more than a decade") */
.facts-strip .container { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .facts-strip .container { grid-template-columns: repeat(3, 1fr); } .facts-strip .container > div:nth-child(3) { border-left: 1px solid var(--line-dk); padding-left: 22px; } }
@media (max-width: 820px) { .facts-strip .container { grid-template-columns: 1fr; } .facts-strip .container > div:nth-child(3) { border-left: 0; padding-left: 0; } }
.about-beyond { background: var(--wash); border-radius: 18px; margin: 28px 0 6px; padding: 24px 26px 10px; position: relative; }
.about-beyond h3 { align-items: center; color: var(--navy); display: flex; font: 400 clamp(1.4rem, 2vw, 1.7rem)/1.2 var(--f-display); gap: 10px; margin: 0 0 12px; }
.about-beyond h3::before { background: var(--accent); content: ''; flex: none; height: 16px; width: 16px; -webkit-mask: var(--blossom-mask) center / contain no-repeat; mask: var(--blossom-mask) center / contain no-repeat; }
:root { --blossom-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-6' rx='3.6' ry='5.6' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E"); }
.about-beyond p { color: var(--ink); }
.about-beyond + .hero-actions { margin-top: 24px; }

/* ---------- 2026-11-12: two forms, General and Philanthropists, compact
   Mitchell, for Alisa: both forms on Contact as tabs (General first) and the philanthropists' form at the foot of For
   Philanthropists, "easy to complete and not take up too much of the screen". The questionnaire shows one section at a
   time with a progress line; its options are small chips you tap; comments open only when asked for. */
.form [hidden], .form-panel[hidden] { display: none !important; }
.form-compact { padding: clamp(18px, 2.4vw, 30px); }
.form-compact .form-banner { font-size: 13px; margin: 0 0 16px; padding: 9px 14px; }
.form-compact .form-row { gap: 0 14px; }
.form-compact .form-field { margin: 0 0 14px; }
.form-compact .form-label { font-size: 13.5px; margin-bottom: 6px; }
.form-compact .form-input { font-size: 15.5px; min-height: 42px; padding: 8px 12px; }
.form-compact .form-textarea { min-height: 70px; }
.form-compact .form-instruction { font-size: 14px; margin: 0 0 10px; }
.form-compact .form-hint { font-size: 13px; }
.form-compact .form-check { font-size: 14.5px; min-height: 38px; padding: 4px 8px; }
.form-select { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a34a63' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; cursor: pointer; padding-right: 40px !important; }
.form-foot { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.form-pref { margin: 0; }
.form-pref .form-legend { font-size: 13.5px; margin-bottom: 2px; }
.form-pref .form-options-inline { gap: 0 10px; }

/* Contact: the two tabs */
.form-tabs { background: var(--wash); border-radius: 999px; display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; }
.form-tab { background: none; border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; font: 600 14px/1 var(--f-body); letter-spacing: 0.01em; min-height: 40px; padding: 0 22px; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.form-tab:hover { color: var(--accent-ink); }
.form-tab[aria-selected='true'] { background: var(--white); box-shadow: 0 3px 12px -5px rgba(27, 42, 65, 0.3); color: var(--accent-ink); }
.form-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the questionnaire, one section at a time */
.form-review { scroll-margin-top: calc(var(--head-h) + 16px); }
.rv-top { margin: 0 0 12px; }
.rv-name { color: var(--navy); font: 400 clamp(1.35rem, 2vw, 1.7rem)/1.15 var(--f-display); margin: 0; }
.rv-top .form-intro { font-size: 14.5px; margin: 4px 0 0; }
.rv-progress { margin: 0 0 16px; }
.rv-count { color: var(--muted); font: 600 11.5px/1.3 var(--f-body); letter-spacing: 0.1em; margin: 0 0 7px; text-transform: uppercase; }
.rv-count [data-rv-t] { color: var(--accent-ink); }
.rv-bar { background: var(--wash); border-radius: 99px; height: 4px; overflow: hidden; }
.rv-bar span { background: var(--accent); border-radius: 99px; display: block; height: 100%; transition: width 0.35s ease; width: 0; }
/* the step's name is already on the progress line, so its heading is for screen readers only */
.rv-title { clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.rv-group { border: 0; margin: 0 0 14px; min-width: 0; padding: 0; }
.rv-group .form-legend { font-size: 14px; margin-bottom: 8px; }
.rv-half { max-width: calc(50% - 7px); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips-long { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chip { align-items: center; background: var(--white); border: 1px solid rgba(27, 42, 65, 0.16); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font: 500 13.5px/1.3 var(--f-body); gap: 8px; min-height: 36px; padding: 6px 14px 6px 11px; position: relative; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; user-select: none; }
.chips-long .chip { border-radius: 14px; padding: 8px 14px 8px 11px; }
.chip input, .star input { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
/* a small tick box, not a round marker: every question takes as many answers as apply */
.chip::before { border: 1.5px solid rgba(27, 42, 65, 0.3); border-radius: 4px; content: ''; flex: none; height: 13px; transition: background 0.15s ease, border-color 0.15s ease; width: 13px; }
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--wash); border-color: var(--accent); color: var(--accent-ink); }
.chip.is-on::before { background: var(--accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat; border-color: var(--accent-ink); }
.chip:focus-within, .star:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-compact .chip-say { border-radius: 999px; flex: 1 1 160px; font-size: 14px; max-width: 300px; min-height: 36px; padding: 6px 14px; }
/* causes: the chip says "I care", the small star beside it says "one of my top three" */
.cause { align-items: stretch; display: inline-flex; }
.cause .chip { border-radius: 999px 0 0 999px; border-right: 0; padding-right: 10px; }
.star { align-items: center; background: var(--white); border: 1px solid rgba(27, 42, 65, 0.16); border-left: 1px dashed rgba(27, 42, 65, 0.16); border-radius: 0 999px 999px 0; color: rgba(27, 42, 65, 0.3); cursor: pointer; display: inline-flex; font-size: 13px; padding: 0 12px 0 9px; position: relative; transition: background 0.15s ease, color 0.15s ease; }
.star:hover { color: var(--brass); }
.cause .chip.is-on + .star { background: var(--wash); border-color: var(--accent); }
.cause.is-star .star, .cause.is-star .chip.is-on + .star { background: #fbefd6; border-color: var(--brass-lt); color: var(--brass-dk); }
.rv-orgs { display: grid; gap: 8px; }
.rv-org { display: grid; gap: 8px; grid-template-columns: 1fr 130px; }
.rv-link { background: none; border: 0; color: var(--accent-ink); cursor: pointer; font: 600 13px/1 var(--f-body); padding: 10px 0 2px; }
.rv-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-comment .form-field { margin: 8px 0 0; }
.rv-source { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }
.rv-closing { color: var(--navy); font: italic 400 17px/1.5 var(--f-display); margin: 16px 0 0; }
.rv-nav { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; }
.rv-nav [data-rv-next], .rv-nav [data-rv-submit] { margin-left: auto; }
.rv-skip { color: var(--muted); font-size: 13px; }
.form-review .form-done { margin-top: 14px; }
/* For Philanthropists: her questionnaire at the foot of the section */
.phil-form { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 820px; scroll-margin-top: calc(var(--head-h) + 16px); }
@media (max-width: 820px) {
  .rv-half { max-width: none; }
  .rv-org { grid-template-columns: 1fr 100px; }
  .chips-long { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
  .rv-skip { display: none; }
}
/* connected forms (2026-11-12): the robot trap stays off screen; a failed send says so */
.form-trap { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }
.form-fail { background: #fbeeee; border: 1px solid rgba(163, 74, 99, 0.35); border-radius: 12px; color: #7d2b40; font-size: 15px; line-height: 1.55; margin-top: 14px; padding: 12px 16px; }
.form button[disabled] { cursor: progress; opacity: 0.7; }