/* My Parent Helper v2 — styled after Anna's concept (docs/design/): photos, cream paper, sage, serif + script, soft transitions */
:root {
  /* beta feedback #59 (2026-11-04): one palette everywhere. sage #718365 (buttons, accents, icons), deep olive #4E5F46 (logo, headings), warm cream #F8F5EE (background), soft beige #EAE1CF (secondary sections), warm charcoal #5B554B (body text). paper, sage-light and line are light tints of these. */
  --cream: #f8f5ee;
  --paper: #fcfaf6;
  --sand: #eae1cf;
  --sage: #718365;
  --sage-deep: #4e5f46;
  --sage-light: #e6eadf;
  --ink: #5b554b;
  --ink-soft: #5b554b;
  --line: #e4dccb;
  --draft: #fff1b8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Caveat", "Segoe Script", cursive;
  --sans: "Lato", "Segoe UI", system-ui, sans-serif;
  --max: 1100px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.65 var(--sans); font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
a { color: var(--sage-deep); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--sage-deep); line-height: 1.15; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 12px; }
.beta-banner { background: var(--draft); text-align: center; padding: 6px; font-size: .85rem; }
[data-draft] { background: var(--draft); outline: 1px dashed #c9a400; border-radius: 4px; }

/* header */
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top nav { display: flex; align-items: center; gap: 26px; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.logo { display: block; line-height: 0; }
.top .wrap { max-width: none; padding-left: 32px; padding-right: 32px; }
.logo .logo-svg { width: 200px; height: auto; }
@media (max-width: 760px) { .top .wrap { padding-left: 16px; padding-right: 16px; } .logo .logo-svg { width: 150px; } }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; letter-spacing: .04em; }
.top nav a:hover { color: var(--sage-deep); }
@media (max-width: 760px) { .top nav a:not(.pill) { display: none; } }
.pill { background: var(--sage); color: #fff !important; padding: 7px 16px; border-radius: 999px; }

/* hero: photo left, paper panel right */
.hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 560px; background: var(--paper); }
.hero-photo { position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(252,250,246,0) 70%, var(--paper) 100%); }
.hero-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 40px 60px; }
.mark { width: 64px; height: 40px; margin-bottom: 6px; }
.brand-row { display: flex; justify-content: center; margin-bottom: 10px; }
.brand-row .mark { margin-bottom: 0; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.hero h1.hero-logo { line-height: 0; text-transform: none; letter-spacing: normal; }
.hero-logo .logo-svg { width: min(420px, 82vw); height: auto; }
.hero .tagline { font-family: var(--script); font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--sage-deep); line-height: 1.15; margin: 14px 0 8px; }
.hero .flourish { width: 160px; height: 20px; margin: 4px auto 18px; }
.hero .lede { color: var(--ink-soft); max-width: 430px; }
.btn { display: inline-block; background: var(--sage); color: #fff; padding: 13px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; letter-spacing: .03em; transition: background .25s, transform .25s; }
.btn:hover { background: var(--sage-deep); transform: translateY(-1px); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { height: 300px; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(252,250,246,0) 55%, var(--paper) 100%); }
  .hero-text { padding: 20px 22px 50px; }
}

/* painted band */
.band { position: relative; margin: -22px 0 0; padding: 0 16px; z-index: 2; }
.band-inner { position: relative; max-width: 980px; margin: 0 auto; color: #fff; text-align: center; padding: 18px 30px; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.band-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.band-inner span + span::before { content: "•"; margin: 0 14px; opacity: .8; }
@media (max-width: 640px) { .band-inner span { display: block; } .band-inner span + span::before { content: none; } }

section { padding: 70px 0; }
.intro { text-align: center; padding-top: 50px; padding-bottom: 30px; }
.intro p { max-width: 640px; margin: 0 auto; font-size: 1.12rem; color: var(--ink-soft); }

/* services: photo cards */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 980px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }
.svc { background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -24px rgba(60,70,50,.55); display: flex; flex-direction: column; }
.svc img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.svc .body { position: relative; padding: 34px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.badge { position: absolute; top: -24px; left: 22px; width: 48px; height: 48px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper); }
.badge svg { width: 24px; height: 24px; }
.svc h3 { font-size: 1.45rem; margin-bottom: .3em; }
.svc p { color: var(--ink-soft); font-size: .97rem; }
.svc .price { margin-top: auto; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--sage-deep); }
.svc .ask { font-weight: 700; font-size: .9rem; text-decoration: none; margin-top: 6px; }
.svc .ask:hover { text-decoration: underline; }

/* soft wave transition */
.wave { display: block; width: 100%; height: 60px; }
.sand { background: var(--sand); }

/* trust row */
.trust { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; gap: 0; }
.trust div { padding: 10px 18px; border-right: 1px solid #d6cbb5; font-family: var(--serif); font-size: .95rem; font-weight: 700; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); }
.trust div:last-child { border-right: 0; }
.trust svg { width: 30px; height: 30px; display: block; margin: 0 auto 10px; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; row-gap: 18px; } .trust div { border-right: 0; } }

/* about */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.about .photo { border-radius: 22px; overflow: hidden; position: relative; width: 100%; max-width: 420px; justify-self: center; }
.about .photo img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; width: 100%; height: auto; }
.about .photo figcaption { position: absolute; bottom: 10px; left: 10px; background: var(--draft); font-size: .78rem; padding: 3px 8px; border-radius: 6px; }
.about h2, .how h2, .contact h2 { font-size: clamp(2rem, 4vw, 2.6rem); }
.script-sub { font-family: var(--script); font-size: 1.7rem; color: var(--sage); margin: -6px 0 10px; }
ul.ticks { list-style: none; padding: 0; margin: 16px 0 0; }
ul.ticks li { position: relative; padding-left: 26px; margin-bottom: 8px; }
ul.ticks li svg { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* how it works */
.how { text-align: center; padding: 30px 0; }
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: left; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--sage-light); padding-top: 14px; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--sage); font-weight: 700; }
.steps strong { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--sage-deep); margin: 2px 0 4px; }
.note { margin-top: 26px; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }

/* contact: sage panel + photo */
.contact .panel { display: grid; grid-template-columns: 1.2fr .8fr; border-radius: 26px; overflow: hidden; background: var(--sage-deep); color: #eef1e8; }
.contact .copy { padding: 48px 44px; }
.contact h2 { color: #fff; font-family: var(--script); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.3rem); }
.contact p { color: #e1e7d8; }
.contact .btn { background: var(--cream); color: var(--sage-deep); }
.contact .btn:hover { background: #fff; }
.contact .addr { font-size: .95rem; margin: 14px 0 0; overflow-wrap: anywhere; }
.contact .side { position: relative; }
.contact .side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact .side { min-height: 320px; }
.contact .side .stack { position: absolute; left: 18px; bottom: 18px; margin: 0; background: var(--paper); color: var(--sage-deep); font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.3; padding: 12px 20px; border-radius: 12px; box-shadow: 0 8px 22px -12px rgba(40,50,35,.55); }
.contact a:focus-visible { outline-color: var(--cream); }
@media (max-width: 760px) { .contact .panel { grid-template-columns: 1fr; } .contact .side { height: 260px; } .contact .copy { padding: 34px 24px; } }

footer { text-align: center; padding: 30px 0 46px; color: var(--ink); font-size: .9rem; }

/* gentle reveal */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .8s ease both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { animation: none; } .btn { transition: none; } }

/* beta feedback #36 (2026-10-30): desktop felt "blown up"; smaller type, logo, photos and spacing on wider screens. Phone layout unchanged. */
@media (min-width: 861px) {
  body { font-size: 16px; }
  .logo .logo-svg { width: 160px; }
  .top nav a { font-size: .85rem; }
  .pill { padding: 6px 14px; }
  .hero { min-height: 440px; }
  .hero-text { padding: 44px 36px 40px; }
  .hero-logo .logo-svg { width: min(330px, 82vw); }
  .hero .tagline { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 10px 0 6px; }
  .hero .flourish { margin: 2px auto 12px; }
  .btn { padding: 11px 22px; }
  .band-inner { padding: 14px 26px; font-size: .76rem; }
  section { padding: 52px 0; }
  .intro { padding-top: 40px; padding-bottom: 22px; }
  .intro p { font-size: 1.04rem; }
  .services { gap: 20px; }
  .svc .body { padding: 30px 18px 20px; }
  .badge { width: 42px; height: 42px; top: -21px; left: 18px; }
  .badge svg { width: 21px; height: 21px; }
  .svc h3 { font-size: 1.28rem; }
  .svc p { font-size: .92rem; }
  .svc .price { font-size: 1.08rem; }
  .wave { height: 44px; }
  .trust div { font-size: .85rem; padding: 8px 14px; }
  .trust svg { width: 26px; height: 26px; margin-bottom: 8px; }
  .about { gap: 40px; }
  .about h2, .how h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
  .script-sub { font-size: 1.45rem; }
  .steps li::before { font-size: 1.4rem; }
  .steps strong { font-size: 1.12rem; }
  .contact .copy { padding: 38px 36px; }
  .contact h2 { font-size: clamp(2.3rem, 3.8vw, 2.8rem); }
  .contact .side { min-height: 280px; }
  .contact .side .stack { font-size: 1.2rem; padding: 10px 16px; }
}
/* beta feedback #39 (2026-10-31): desktop still felt "quite large"; one more step down on wider screens. Phone layout unchanged. */
@media (min-width: 861px) {
  html { font-size: 15px; }
  body { font-size: 15px; }
  .wrap { max-width: 1040px; }
  .top .wrap { padding-top: 6px; padding-bottom: 6px; }
  .logo .logo-svg { width: 140px; }
  .top nav { gap: 22px; }
  .top nav a { font-size: .82rem; }
  .hero { min-height: 380px; }
  .hero-text { padding: 34px 32px 34px; }
  .hero-logo .logo-svg { width: min(280px, 82vw); }
  .hero .tagline { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 8px 0 4px; }
  .hero .flourish { width: 130px; margin: 2px auto 10px; }
  .hero .lede { max-width: 400px; }
  .btn { padding: 10px 20px; }
  .band-inner { padding: 12px 24px; font-size: .74rem; }
  section { padding: 42px 0; }
  .intro { padding-top: 32px; padding-bottom: 18px; }
  .intro p { font-size: 1rem; }
  .services { gap: 18px; }
  .svc .body { padding: 26px 16px 18px; }
  .badge { width: 38px; height: 38px; top: -19px; left: 16px; }
  .badge svg { width: 19px; height: 19px; }
  .svc h3 { font-size: 1.2rem; }
  .svc p { font-size: .9rem; }
  .svc .price { font-size: 1.02rem; }
  .wave { height: 36px; }
  .trust div { font-size: .8rem; padding: 6px 12px; }
  .trust svg { width: 24px; height: 24px; margin-bottom: 6px; }
  .about { gap: 34px; }
  .about h2, .how h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
  .script-sub { font-size: 1.3rem; }
  .steps { margin-top: 22px; gap: 18px; }
  .steps li::before { font-size: 1.25rem; }
  .steps strong { font-size: 1.05rem; }
  .contact .copy { padding: 32px 32px; }
  .contact h2 { font-size: clamp(2rem, 3.2vw, 2.5rem); }
  .contact .side { min-height: 240px; }
  .contact .side .stack { font-size: 1.1rem; padding: 9px 14px; }
}
/* beta feedback #40, #41 (2026-10-31), desktop only: hero words a little larger (#40); the four service cards a touch smaller (#41). Phone layout unchanged. */
@media (min-width: 861px) {
  .hero .tagline { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
  .hero .lede { font-size: 1.1rem; max-width: 440px; }
  .wrap.services { max-width: 960px; }
}
/* beta feedback #44 #45 (2026-11-02): Anna's own logo artwork (img/logo.png) replaces the drawn SVG mark; existing .logo-svg widths still apply. */
.logo-img { display: block; height: auto; max-width: 100%; }
.hero-logo .logo-img { margin: 0 auto; }

/* beta feedback #49 #51 (2026-11-03), desktop only (1536x695): hero logo and words larger to fill the panel, in proportion (#49); menu a bit larger (#51). Logo color lightened in img/logo.png (#49, #50). Phone layout unchanged. */
@media (min-width: 861px) {
  .top nav { gap: 28px; }
  .top nav a { font-size: 1rem; }
  .pill { padding: 7px 18px; }
  .hero { min-height: 440px; }
  .hero-text { padding: 40px 48px; }
  .hero-logo .logo-svg { width: min(400px, 82vw); }
  .hero .tagline { font-size: clamp(2rem, 3vw, 2.6rem); margin: 18px 0 6px; }
  .hero .flourish { width: 160px; }
  .hero .lede { font-size: 1.22rem; max-width: 520px; }
  .hero .btn { font-size: 1.05rem; padding: 12px 26px; }
}

/* beta feedback #56 #58 #60 (2026-11-04): one consistent type scale and spacing; a calmer hero.
   #56 (desktop 1536x695): hero logo about 22% smaller (400px -> 310px), tagline a little smaller, more breathing room on the right,
   less empty space around the logo, the hero button the same as the other buttons. Header logo in proportion to the menu.
   #58: script lettering only for the tagline and the small script lines; "Interested?" is a serif heading like the others;
   body text one size; the same spacing between headings, text and buttons everywhere. */
:root { --gap-head: .5em; --gap-text: 1em; --gap-btn: 1.4em; }
h1, h2, h3 { margin-bottom: var(--gap-head); }
.btn { margin-top: calc(var(--gap-btn) - var(--gap-text)); }
.contact h2 { font-family: var(--serif); font-weight: 600; }
.svc .ask { margin-top: .4em; }
@media (min-width: 861px) {
  .logo .logo-svg { width: 150px; }
  .hero { grid-template-columns: 1fr 1fr; min-height: 420px; align-items: stretch; }
  .hero-text { padding: 36px 64px 40px; }
  .hero-logo .logo-svg { width: min(310px, 82vw); }
  .hero .tagline { font-size: clamp(1.7rem, 2.4vw, 2.15rem); margin: 10px 0 2px; }
  .hero .flourish { width: 140px; margin: 2px auto 12px; }
  .hero .lede { font-size: 1.08rem; max-width: 460px; }
  .hero .btn { font-size: inherit; padding: 10px 20px; }
  section { padding: 48px 0; }
  .intro p, .about p, .how .steps li, .contact p { font-size: 1rem; }
  .svc p { font-size: .95rem; }
  .note, .contact .addr { font-size: .95rem; }
  .about h2, .how h2, .contact h2 { font-size: clamp(1.7rem, 2.6vw, 2rem); }
  .svc h3 { font-size: 1.2rem; }
  .services { gap: 20px; }
  .svc .body { padding: 26px 18px 20px; }
}
@media (max-width: 860px) {
  .contact h2 { font-size: clamp(1.9rem, 6vw, 2.3rem); }
}

/* beta feedback #61 (2026-11-04): a fresher, lighter palette, cohesive top to bottom. Clean soft white is the main background (was warm cream);
   fresh sage for buttons, accents and icons; deeper forest green for headings, the logo and important text; very light sage for the
   alternating sections (was beige); a little warm ivory only as an accent (the contact button and the note on the contact photo). */
:root {
  --cream: #fdfdfb;
  --paper: #ffffff;
  --ivory: #f7f2e8;
  --sand: #eef3ec;
  --sage: #68845b;
  --sage-deep: #2f4a33;
  --sage-light: #e3ebdf;
  --line: #e3e8df;
}
.hero-photo::after { background: linear-gradient(90deg, rgba(255,255,255,0) 70%, var(--paper) 100%); }
@media (max-width: 860px) { .hero-photo::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, var(--paper) 100%); } }
.svc { border: 1px solid var(--line); box-shadow: 0 12px 30px -24px rgba(40,60,40,.45); }
.trust div { border-right-color: #cfdac9; }
.contact .btn { background: var(--ivory); }
.contact .side .stack { background: var(--ivory); }

/* beta feedback #65 (2026-11-05): Anna prefers the colors of the published site (myparenthelper.com, main, styles.css v20261027):
   its warm cream background, color balance and text colors come back on beta. Her logo, portrait, photos, type scale and spacing stay.
   Values are the published site's own palette. Replaces the #61 white-and-sage palette. */
:root {
  --cream: #faf6ef;
  --paper: #fffdf9;
  --ivory: #faf6ef;
  --sand: #f1e9dc;
  --sage: #6b7f5f;
  --sage-deep: #4b5e44;
  --sage-light: #e4eadc;
  --ink: #3b3a35;
  --ink-soft: #66625a;
  --line: #e7ddcd;
}
.hero-photo::after { background: linear-gradient(90deg, rgba(255,253,249,0) 70%, var(--paper) 100%); }
@media (max-width: 860px) { .hero-photo::after { background: linear-gradient(180deg, rgba(255,253,249,0) 55%, var(--paper) 100%); } }
.svc { border: 0; box-shadow: 0 12px 30px -24px rgba(60,70,50,.55); }
.trust div { border-right-color: #d6cbb5; }
.contact .btn { background: var(--cream); }
.contact .side .stack { background: var(--paper); }

/* beta feedback #63 #64 (2026-11-05, desktop 1536x695): the About subtitle "A parent helper you can count on" was too small to read (#63):
   larger and in the deeper heading green; the "About Anna" heading a little larger (#64). Phone sizes unchanged except the subtitle color. */
.about .script-sub { color: var(--sage-deep); }
@media (min-width: 861px) {
  .about h2 { font-size: clamp(2rem, 3vw, 2.4rem); }
  .about .script-sub { font-size: 1.8rem; line-height: 1.2; margin: -2px 0 14px; }
}
/* beta feedback #66 (2026-11-06, desktop 1536x695): the published site stays the color reference (palette unchanged from #65).
   Hero: a caregiver and a child together again, in a neat, everyday outfit (new Unsplash photo). Service photos: one natural grade
   with no cream cast (reserved day and date nights kept, date nights evened out; weddings and house sitting back to the #57 photos).
   Buttons: one style everywhere (same font, weight, letter spacing, rounded ends and padding); the header pill matches. */
.btn, .top nav a.pill { font-family: var(--sans); font-weight: 700; letter-spacing: .03em; border-radius: 999px; line-height: 1.25; }
.btn, .hero .btn, .contact .btn { font-size: 1rem; padding: 12px 26px; }
.contact .btn:hover { transform: translateY(-1px); }
.hero-photo img { object-position: center 15%; }
@media (min-width: 861px) {
  .btn, .hero .btn, .contact .btn { font-size: 1rem; padding: 11px 24px; }
  .top nav a.pill { font-size: .95rem; padding: 8px 20px; }
}

/* parent quote in About (D13) */
.about .quote { margin: 18px 0 22px; padding: 14px 20px; border-left: 3px solid var(--sage); background: var(--sage-light); border-radius: 0 14px 14px 0; }
.about .quote blockquote { margin: 0; }
.about .quote p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--sage-deep); margin: 0; }
.about .quote figcaption { margin-top: 6px; font-size: .9rem; color: var(--ink-soft); }

/* Ask about availability page (/ask/, D15) */
.ask-page { padding: 48px 0 64px; }
.ask-page .wrap { max-width: 760px; }
.ask-page h1 { font-size: clamp(2.2rem, 4vw, 2.9rem); margin-bottom: 0; }
.ask-page .script-sub { margin: 0 0 10px; }
.ask-page .lede { color: var(--ink); margin: 0 0 22px; }
.ask-form.card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 20px; box-shadow: 0 12px 30px -24px rgba(40,50,35,.45); }
.ask-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .ask-form .two { grid-template-columns: 1fr; } .ask-form.card { padding: 20px 16px 16px; } }
.ask-form p { margin: 0 0 12px; }
.ask-form label, .ask-form legend { display: block; font-size: .92rem; font-weight: 700; color: var(--sage-deep); margin-bottom: 5px; }
.ask-form input[type=text], .ask-form input[type=email], .ask-form input[type=tel], .ask-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #cfc7b5; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.ask-form textarea { resize: vertical; }
.ask-form input:focus, .ask-form textarea:focus { outline: 3px solid #c9d4bf; outline-offset: 1px; border-color: var(--sage); }
.ask-form fieldset { border: 0; padding: 0; margin: 4px 0 14px; }
.ask-form .chk { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; color: var(--ink); margin: 0 18px 8px 0; }
.ask-form .hint { font-size: .88rem; color: var(--ink); margin-top: -4px; }
.ask-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-msg { min-height: 1.4em; margin-top: 10px !important; color: var(--sage-deep); }
.ask-done { font-family: var(--serif); font-size: 1.5rem; color: var(--sage-deep); }
.ask-alt { margin-top: 18px; font-size: .95rem; }
.ask-alt a { color: var(--sage-deep); font-weight: 700; }

/* beta feedback #67 (2026-11-07, desktop 1710x1843): the hero text panel about 30% bigger to fill the space better; same structure and
   components. Logo 310 -> 403px, tagline 2.15 -> 2.8rem, intro 1.08 -> 1.4rem in a wider column, flourish and spacing scaled to match.
   The button keeps the one site-wide button style (#66). Sizes ease down on narrower desktops so nothing crowds. Phone layout unchanged. */
@media (min-width: 861px) {
  .hero { min-height: 546px; }
  .hero-text { padding: 47px clamp(36px, 3.75vw, 64px) 52px; }
  .hero-logo .logo-svg { width: min(403px, 100%); }
  .hero .tagline { font-size: clamp(1.9rem, 2.8vw, 2.8rem); margin: 13px 0 3px; }
  .hero .flourish { width: 182px; height: 26px; margin: 3px auto 16px; }
  .hero .lede { font-size: clamp(1.12rem, 1.6vw, 1.4rem); max-width: 598px; }
}

/* beta feedback #78-#85 (2026-11-08, desktop 1536x695). #82: new hero photo (caregiver and boy reading by a play tent), framed a little
   lower than the cupcake photo. #84: the logo (img/logo.png) and the "Supporting families" band now use the deep sage of the
   "Interested?" panel (#4b5e44). #85: every button matches the family portal and the theme: sage with white lettering, deeper on hover;
   the "Interested?" button was cream and now matches too, with a faint light ring so it stands out on the deep sage panel. */
.hero-photo img { object-position: center 40%; }
.contact .btn { background: var(--sage); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.contact .btn:hover { background: #7a8e6d; }

/* beta feedback #105 #106 (2026-11-12, phone 280px): hero photo 2 from #103 (Pexels, D33). On phones the photo box follows the
   photo's shape (5:4) instead of a fixed 300px, so the caregiver on the left and the girl on the right both stay in view on narrow
   screens (about 224px tall at 280px wide, about 312px at 390px). Desktop unchanged. */
@media (max-width: 860px) { .hero-photo { height: auto; aspect-ratio: 5 / 4; } }

/* beta feedback #112 (2026-11-12): hero is Pexels 8504292 (Ivan S, D33), a tall photo cut to a tight 7:5 band and mirrored so the
   caregiver sits at the left edge and the boy left of centre. Anchor the photo to its left edge so any side trimming (phone 5:4 box,
   narrower desktop columns) comes off the right, where the fade is, and keep both faces in view vertically. */
.hero-photo img { object-position: left 35%; }
/* beta feedback #114 #115 (2026-11-12, phone 280x513: "zoom out a bit ... see the baby in the useful activity"). The hero photo is now a
   taller 9:10 cut of the same picture (Pexels 8504292) and the reserved day photo a square cut (Pexels 8504270), so on phones the photo
   box follows that shape and shows their hands and the toys; the phone fade is shorter so the toys stay clear. On desktop and in the
   two-column card grid the boxes keep their shape and show about the same frame as before (from the top). */
.hero-photo img { object-position: left 8%; }
@media (max-width: 860px) {
  .hero-photo { aspect-ratio: 9 / 10; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(255,253,249,0) 82%, var(--paper) 100%); }
}
.svc img.svc-tall { object-position: center top; }
@media (max-width: 560px) { .svc img.svc-tall { aspect-ratio: 1 / 1; } }
/* desktop: the taller photo must not stretch the hero; it fills the column the text sets (min-height as before) */
@media (min-width: 861px) { .hero-photo img { position: absolute; inset: 0; } }

/* hiring-a-nanny page and the intake note (D35-D40) */
.law-page { padding: 34px 0 60px; }
.law-page h2 { margin-top: 1.4em; font-size: 1.7rem; }
.law-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.law-two .card, .law-callout { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.law-two h3 { margin: 0 0 .3em; }
.law-tag { display: inline-block; margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--sage-deep); background: var(--sage-light); padding: 2px 10px; border-radius: 999px; }
.law-table { overflow-x: auto; }
.law-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.law-table th, .law-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.law-table th { color: var(--sage-deep); }
.law-callout { margin-top: 22px; background: var(--sage-light); }
.law-links li { margin: 6px 0; }
.law-fine { font-size: .85rem; color: var(--ink); opacity: .85; }
.ask-note { background: var(--sage-light); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; font-size: .95rem; }
.ask-note p { margin: 0 0 .6em; } .ask-note p:last-child { margin: 0; }