/* ==========================================================================
   My Verna — Verna Companion Care
   Stylesheet. Authored, not generated from a framework.

   ENGINEERING RULES OBSERVED IN THIS FILE — do not quietly undo these:
   · Every fixed/sticky surface pays its safe-area inset. Nothing paints under
     a notch, a status bar, or a home indicator.
   · No interactive card is centred in a viewport unit. Opening the keyboard
     must never move the field a person is typing into. See the .callbar
     keyboard rule in script.js for the mobile half of this.
   · Header and footer are byte-identical on every page in a language. They do
     not reflow between routes.
   · Overflow is declared on both axes. Never one alone.
   · No @layer. Nothing that must ship depends on cascade layers.

   ACCESSIBILITY IS THE POSITIONING, NOT A COMPLIANCE TASK.
   The reader is 70+ and often low-vision, or their 45-year-old child on a phone
   at 11pm. Base type is 19px. Every interactive colour pair was measured, not
   eyeballed — see tools/check-contrast.mjs, which is run by the publish gate.
   nb — eb2df6c9
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Ground and ink. Warm, never clinical white. */
  --ground:       #FBF7F4;
  --surface:      #FFFFFF;
  --surface-alt:  #F5EDE8;
  --ink:          #241E1B;   /* 15.9:1 on ground */
  --ink-soft:     #574B45;   /*  7.9:1 on ground */
  --hairline:     #E3D8D1;

  /* The mark's rose — the inner shape, the support that is held.
     Deepened from the logo tint so it carries white text at 6.8:1. */
  --rose:         #9B3A4C;
  --rose-deep:    #7E2E3D;
  --rose-tint:    #F6E7E9;

  /* The gold dot. The detail you do not see at first glance.
     --gold-ink is the text-safe weight; --gold-mark is decorative only and
     must never carry text. */
  --gold-ink:     #7C611A;   /* darkened from #8A6D1F — 4.24:1 on --surface-alt failed the gate */
  --gold-mark:    #C9A227;

  --focus:        #1D4ED8;

  /* Type. Serif heads for warmth, humanist sans for body — a sans at this size
     is measurably easier for low-vision readers than a serif, and legibility
     outranks prettiness here. No webfonts: this audience is on slow mobile. */
  --font-head: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;      /* reading width */
  --shell:   72rem;      /* page width */
  --radius:  14px;

  /* Elevation cast in the brand's own light, not black. A black shadow on a
     warm ground greys it underneath and reads as a dirty halo. Two steps only;
     a third is how an elevation system becomes decoration. */
  --raised: 0 1px 2px rgba(36, 30, 27, .06), 0 2px 8px rgba(126, 46, 61, .05);
  --lifted: 0 2px 4px rgba(36, 30, 27, .07), 0 8px 24px rgba(126, 46, 61, .08);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  /* Both axes, declared. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Both axes, declared. */
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  /* Safe-area: the page itself pays left/right insets so nothing is lost to
     a rounded corner in landscape. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3 { font-size: 1.28rem; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }

a { color: var(--rose-deep); text-underline-offset: .18em; }
a:hover { color: var(--rose); }

/* One focus treatment, everywhere, always visible. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Utilities ---------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: .85rem 1.25rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

section { padding-block: clamp(3rem, 7vw, 5rem); }
section + section { border-top: 1px solid var(--hairline); }

.lede { font-size: 1.18rem; color: var(--ink-soft); }
.eyebrow {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 .6rem;
}

/* --- Preview ribbon ----------------------------------------------------- */
/* Injected by the preview build only. Its presence means unverified values are
   on the page. The publish build refuses to emit it. */

.preview-ribbon {
  background: #7E2E3D; color: #fff; text-align: center;
  padding: .55rem 1rem; font-size: .88rem; font-weight: 600;
  padding-top: calc(.55rem + env(safe-area-inset-top));
}

/* --- Header — identical on every route ------------------------------------- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 100;
  /* Safe-area: pay the top inset so we never paint under the status bar. */
  padding-top: env(safe-area-inset-top);
}

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 74px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; line-height: 1.1;
  letter-spacing: .5pt; /* Ruling 2026-09-04: wordmark tracked +.5pt (Native) */ }
.brand__descriptor { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__list { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { max-width: none; }
.nav__list a {
  display: block; padding: .7rem .8rem; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .98rem; border-radius: 8px;
}
.nav__list a:hover { background: var(--surface-alt); color: var(--ink); }
.nav__list a[aria-current="page"] { color: var(--rose-deep); box-shadow: inset 0 -3px 0 var(--rose); }

.lang {
  margin-left: .4rem; padding: .55rem .85rem; border: 1px solid var(--hairline);
  border-radius: 999px; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .88rem; white-space: nowrap;
}
.lang:hover { background: var(--surface-alt); color: var(--ink); }

/* Mobile: the nav collapses to a details/summary disclosure. No JS dependency —
   if the script fails, the menu still opens. */
.nav__toggle { display: none; }

@media (max-width: 860px) {
  .masthead__inner { min-height: 66px; }
  .brand__descriptor { display: none; }
  .nav { position: static; }
  .nav__toggle { display: block; }
  .nav__toggle > summary {
    list-style: none; cursor: pointer; padding: .7rem .9rem;
    border: 1px solid var(--hairline); border-radius: 10px; font-weight: 700;
    min-height: 48px; display: flex; align-items: center;
  }
  .nav__toggle > summary::-webkit-details-marker { display: none; }
  .nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
    box-shadow: var(--lifted); padding: .6rem 1.25rem 1.1rem;
    /* Both axes. */
    overflow-x: hidden; overflow-y: auto;
    max-height: 70vh;
  }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: .95rem .2rem; font-size: 1.05rem; border-radius: 0;
    border-bottom: 1px solid var(--hairline); }
  .nav__list a[aria-current="page"] { box-shadow: none; }
  .lang { display: inline-block; margin: .9rem 0 0; }
  .nav__desktop { display: none; }
}
@media (min-width: 861px) {
  .nav__toggle { display: none; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* 48px minimum target. This audience does not have precise thumbs. */
  min-height: 56px; padding: .9rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--rose); color: #fff; }        /* 6.8:1 */
.btn--primary:hover { background: var(--rose-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--onDark { background: #fff; color: var(--rose-deep); }
.btn--onDark:hover { background: var(--rose-tint); color: var(--rose-deep); }

/* Deliberately no transform on hover. Motion that lifts and drops under the
   cursor reads as instability to an older user, and it is decoration. */

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

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

.hero { background: var(--surface); border-bottom: 1px solid var(--hairline); position: relative; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; position: relative; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

/* THE PAIRING (ruling 2026-09-04, Native): on phones the mark appears twice and
   does two jobs. A watermark instance sits behind the first screen as
   atmosphere (11% ink, top-right, out of flow, out of the accessibility tree).
   The real mark keeps its size and becomes the anchor: it straddles the seam
   between the hero and the proof section, gold dot up, so the eye leaves the
   CTAs, lands on the dot, drops through the rose centre and arrives on
   "Why families call me." Neither instance moves layout on interaction.
   Desktop is untouched: one mark, right column, holding the space until real
   photography exists. */
.hero__watermark { display: none; }
@media (max-width: 899px) {
  .hero__watermark {
    display: block; position: absolute; right: -18vw; top: -6vw; width: 78vw; height: auto;
    opacity: .11; pointer-events: none; z-index: 0;
    clip-path: inset(0 18vw 0 0); /* trims the bleed at the viewport edge */
  }
  .hero__grid > div { position: relative; z-index: 1; }
}

.hero h1 { margin-bottom: .55rem; }
.hero__quote {
  font-family: var(--font-head); font-size: 1.22rem; font-style: italic;
  color: var(--ink-soft); border-left: 4px solid var(--rose);
  padding-left: 1.1rem; margin: 1.6rem 0 0; max-width: var(--measure);
}
.hero__area { font-size: .98rem; color: var(--ink-soft); margin-top: 1.5rem; }

.hero__mark { justify-self: center; width: min(300px, 72vw); }
@media (max-width: 899px) {
  .hero__mark {
    width: 44vw; position: relative; z-index: 2; margin-bottom: -22vw;
    filter: drop-shadow(0 6px 10px rgba(36, 30, 27, .10));
  }
  .hero { padding-bottom: 0; }
  .hero + section { padding-top: 26vw; }
}

/* --- Pillars ------------------------------------------------------------ */

.pillars { display: grid; gap: 1.6rem; }
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--raised); }
.pillar h3 { margin-bottom: .4rem; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* --- The scope panel — the most important block on the site ------------- */

.scope {
  background: var(--ink); color: #F7F1ED;
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem);
}
.scope h2 { color: #fff; }
.scope p { color: #E4DAD4; }
.scope a { color: #F6C9CF; }
.scope__cols { display: grid; gap: 2rem; margin-top: 1.6rem; }
@media (min-width: 820px) { .scope__cols { grid-template-columns: 1fr 1fr; } }
.scope__list { list-style: none; margin: 0; padding: 0; }
.scope__list li {
  position: relative; padding-left: 2rem; margin-bottom: .6rem;
  max-width: none; color: #E4DAD4;
}
.scope__list li::before {
  position: absolute; left: 0; top: -.05em; font-weight: 700; font-size: 1.15rem;
}
.scope__list--yes li::before { content: "✓"; color: #7BD3A0; }
.scope__list--no  li::before { content: "✕"; color: #F6A7B1; }
.scope__head { font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #C6B4AB; margin: 0 0 .9rem; }

/* --- Service cards ------------------------------------------------------ */

.services { display: grid; gap: 1.8rem; }
@media (min-width: 940px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1.8rem;
  display: flex; flex-direction: column; box-shadow: var(--raised);
}
/* The lead product is marked by weight and a rule, not by scaling the card.
   Rule: emphasis never moves layout. */
.service--lead { border-color: var(--rose); box-shadow: var(--lifted); }
.service--lead::before {
  content: attr(data-flag);
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rose-deep);
  background: var(--rose-tint); border-radius: 999px;
  padding: .35rem .8rem; align-self: flex-start; margin-bottom: .9rem;
}
.service h3 { margin-bottom: .3rem; }
.service__price { font-family: var(--font-head); font-size: 2.3rem; font-weight: 600;
  color: var(--ink); line-height: 1.1; margin: .6rem 0 .2rem; }
.service__price small { font-family: var(--font-body); font-size: .95rem;
  font-weight: 600; color: var(--ink-soft); }
.service__note { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.service ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.service li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem;
  font-size: 1rem; max-width: none; }
.service li::before { content: "·"; position: absolute; left: .45rem; top: -.15em;
  color: var(--rose); font-size: 1.6rem; line-height: 1; }
.service .btn { margin-top: auto; }

/* --- Report block ------------------------------------------------------- */

.report { background: var(--surface-alt); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem); }
.report__sample {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold-mark); border-radius: 10px;
  padding: 1.3rem 1.5rem; font-size: 1rem; box-shadow: var(--raised);
}
.report__sample p:last-child { margin-bottom: 0; }
.report__meta { font-size: .84rem; color: var(--ink-soft); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: .7rem; }

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

.story { max-width: var(--measure); }
.story h2 { margin-top: 2.4rem; }
.story__pull {
  font-family: var(--font-head); font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.4; color: var(--ink); border-left: 4px solid var(--rose);
  padding-left: 1.2rem; margin: 2.2rem 0;
}

/* --- Forms — stay in document flow --------------------------------------- */
/* The form sits in normal document flow. It is never centred in a viewport
   unit and never inside a fixed-position card, so opening the keyboard cannot
   drift the field being typed into. Do not "improve" this by centring it. */

.form { max-width: var(--measure); }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-weight: 700; margin-bottom: .4rem; }
.field .hint { font-size: .9rem; color: var(--ink-soft); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 56px; padding: .85rem 1rem;
  font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
  background: var(--surface); border: 2px solid var(--hairline);
  border-radius: 10px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--rose); }

/* --- Call band ---------------------------------------------------------- */

.callband { background: var(--rose-deep); color: #fff; }
.callband h2, .callband p { color: #fff; }
.callband a:not(.btn) { color: #F6C9CF; }
.callband__phone {
  font-family: var(--font-head); font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 600; color: #fff; text-decoration: none; display: inline-block;
  margin: .3rem 0 .6rem;
}
.callband__phone:hover { color: #F6C9CF; text-decoration: underline; }

/* Sticky mobile call bar. Pays the bottom inset. Keyboard rule: the
   script hides it while an input has focus so it can never ride up on the
   keyboard and cover the field. */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--rose); border-top: 1px solid var(--rose-deep);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; color: #fff; font-weight: 700; font-size: 1.1rem;
  text-decoration: none;
}
.callbar[hidden] { display: none !important; }
@media (max-width: 860px) {
  .callbar { display: block; }
  body { padding-bottom: 5.5rem; }
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--ink); color: #C6B4AB;
  padding: 3rem 0 calc(2.4rem + env(safe-area-inset-bottom));
  font-size: .95rem;
}
.footer a { color: #E4DAD4; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 { font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .8rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5rem; max-width: none; }
.footer__legal { border-top: 1px solid #453B36; margin-top: 2.4rem; padding-top: 1.6rem;
  font-size: .87rem; color: #A4938B; }
.footer__legal p { max-width: 46rem; }

/* --- Print -------------------------------------------------------------- */

@media print {
  .masthead, .callbar, .callband, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
}