/* HoneyCub Babysitting. The one stylesheet for the public pages (portal.css adds to it).
   Order: tokens, fonts, base, header, buttons and small parts, sections, forms, dialogs, footer, motion.
   Shape rule: buttons are pills, cards are 18px, inputs are 12px. Honey is the only accent. */

:root {
  color-scheme: light;
  --milk: #fffdf9; --ink: #3b281c; --ink-soft: #6b5546; --line: #e6ddd0;
  --honey: #d9ad3c; --pink: #f8dbe3; --blue: #d9e8f5; --yellow: #fbefc4; --green: #dcebd3;
  --st-open: #bfe0b2; --st-part: #f6df8a; --st-booked: #cdbbe8; --st-closed: #f1b3ad; --st-na: #efeae2;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --r-card: 18px; --r-input: 12px; --r-pill: 999px;
  --wrap: 1120px; --gutter: clamp(16px, 4vw, 40px);
}

/* Working shades of the tokens above: a lighter honey for hover, a red for errors, a tinted shadow. */
:root {
  --honey-hi: #e4bd58; --bad: #94231a; --hair: rgb(59 40 28 / .16); --shade: rgb(59 40 28 / .22);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* The polish layer: a larger radius for the tinted "sheets", one soft shadow tinted with the ink,
   and a spring for things that pop. Radius rule, in full: buttons are pills, inputs 12px,
   cards 18px, sheets --r-sheet. */
:root {
  --r-sheet: clamp(22px, 3.2vw, 40px);
  --lift: 0 1px 2px rgb(59 40 28 / .05), 0 16px 36px -18px rgb(59 40 28 / .26);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); }
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgb(59 40 28 / .12); }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
section[id], [id]:target { scroll-margin-top: 16px; }
body { margin: 0; background: var(--milk); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-wrap: break-word; }
body::after { content: ""; position: fixed; inset: 0; z-index: 20; background: url("../img/grain.png"); pointer-events: none; }   /* a fine paper grain, like the crayon in the logo */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 23px; line-height: 1.15; }
p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--yellow); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 30; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--milk); font-weight: 700; }
.skip:focus { top: 12px; }

/* The logo: one class wherever it appears, cropped to a circle here and nowhere else. */
.logo { border-radius: 50%; }

/* ---------- header ---------- */

.site-head { background: var(--milk); }
.site-head__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 72px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.brand__name { font: 700 22px/1 var(--display); letter-spacing: -.03em; }
.brand__name small { display: block; margin-top: 5px; font: 600 12px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.nav a:not(.btn) { background: linear-gradient(var(--ink), var(--ink)) 14px calc(50% + .78em) / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.nav a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) { background-size: calc(100% - 28px) 2px; }
.nav .btn { margin-left: 6px; }
.nav__lang { color: var(--ink-soft); }

.menu-btn:hover { background: var(--yellow); }
.menu-btn { display: none; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: transparent; font-weight: 700; cursor: pointer; }

@media (max-width: 759px) {
  .menu-btn:not([hidden]) { display: inline-flex; align-items: center; }
  /* site.js adds nav--folds, so without scripts the links simply stay on show. */
  .nav--folds { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 12px; border-top: 2px solid var(--line); }
  .nav--folds.is-open { display: flex; }
  .nav--folds a:not(.btn) { min-height: 48px; font-size: 18px; }
  .nav--folds .btn { margin: 8px 0 0; }
}

/* ---------- buttons and small parts ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px;
  border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--honey); color: var(--ink);
  font: 700 16px/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 var(--ink);
  transition: background-color .2s ease, translate .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover { background: var(--honey-hi); }
.btn:active { translate: 0 2px; box-shadow: 0 0 0 0 var(--ink); transition-duration: .08s; }
@media (hover: hover) {
  .btn:hover:not(:active, [disabled], [aria-disabled="true"]) { translate: 0 -3px; box-shadow: 0 4px 0 0 var(--ink); }
}
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: rgb(59 40 28 / .07); }
.btn--small { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; translate: none; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* A plain text button, for the smaller actions (remove, send a new code). */
.link-btn { min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }

.card { padding: clamp(20px, 4vw, 32px); border-radius: var(--r-card); background: var(--milk); }
.card--line { border: 2px solid var(--line); }
.tint--pink { background: var(--pink); }
.tint--blue { background: var(--blue); }
.tint--yellow { background: var(--yellow); }
.tint--green { background: var(--green); }

.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--milk); font: 700 13px/1.2 var(--body); white-space: nowrap; }

/* ---------- sections ---------- */

.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section[class*="tint--"] { position: relative; margin-inline: clamp(8px, 1.8vw, 28px); border-radius: var(--r-sheet); }

/* Honey running off the bottom of the rates sheet, as it does in the logo. One shape, used as a mask. */
.drips { position: absolute; left: var(--r-sheet); right: var(--r-sheet); top: 100%; height: 60px; margin-top: -2px; background: var(--yellow); pointer-events: none;
  -webkit-mask: url("../img/drips.svg") left top / 420px 60px round no-repeat; mask: url("../img/drips.svg") left top / 420px 60px round no-repeat; transform-origin: top; }
@media (min-width: 860px) { .drips { height: 80px; -webkit-mask-size: 560px 80px; mask-size: 560px 80px; } }
#rates + .section { padding-top: clamp(84px, 11vw, 132px); }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-soft); }

/* Home: hero */
.hero { padding-block: clamp(20px, 5vw, 72px) clamp(40px, 7vw, 88px); }
.hero__in { display: grid; gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.3vw, 62px); line-height: 1.04; letter-spacing: -.035em; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--yellow) 62%) left / 100% 100% no-repeat; }
:lang(es) .hero h1 { font-size: clamp(33px, 4.5vw, 52px); }   /* the Spanish headline is longer */
.hero .lead { max-width: 46ch; margin: 16px 0 24px; }
.hero__art { display: grid; justify-items: center; gap: 22px; }
.hero__disc { position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
.hero__disc::before { content: ""; position: absolute; inset: -6.5%; border: 2px dashed var(--honey); border-radius: 50%; opacity: .6; }
.hero__disc .logo { width: 80%; box-shadow: 0 0 0 clamp(4px, .6vw, 7px) var(--milk), var(--lift); }
@media (min-width: 860px) {
  .hero__in { grid-template-columns: 1.25fr 1fr; gap: 56px; }
  .hero__disc { width: min(100%, 360px); }
}

/* Home: this week's openings under the logo (filled by site.js). */
.week { width: min(100%, 400px); padding: 16px 16px 14px; border: 2px solid var(--yellow); border-radius: var(--r-card); background: var(--milk); box-shadow: var(--lift); }
.week__title { margin-bottom: 10px; font: 700 13px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.week__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.week__day { display: block; padding: 7px 0 8px; border-radius: var(--r-input); background: var(--st-na); font-size: 12px; line-height: 1.3; text-align: center; text-decoration: none; }
.week__day { transition: translate .3s var(--ease), box-shadow .2s ease; }
.week__day:hover { box-shadow: inset 0 0 0 2px var(--ink); translate: 0 -3px; }
.week__day b { display: block; font: 700 19px/1.2 var(--display); }
.week__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 700; }

/* Calendar state colours, shared by the week strip, the calendar and the legend. Each state
   always sits next to its name in text, so colour is never the only signal. */
[data-state="open"] { background: var(--st-open); }
[data-state="part"] { background: var(--st-part); }
[data-state="booked"] { background: var(--st-booked); }
[data-state="closed"] { background: var(--st-closed); }
[data-state="na"] { background: var(--st-na); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hair); }

/* Home: what HoneyCub is */
.statement h2 { max-width: 18ch; }
.statement p { max-width: 60ch; margin-top: 20px; font: 500 clamp(20px, 2.5vw, 28px)/1.42 var(--body); }

/* Home: how a visit works. Four steps with no numbers; the bars borrow the four tints. */
.steps { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 44px); }
.steps li { position: relative; padding-top: 26px; }
.steps li::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 4px; background: var(--pink); transform-origin: left; }
.steps li:nth-child(2)::before { background: var(--blue); }
.steps li:nth-child(3)::before { background: var(--yellow); }
.steps li:nth-child(4)::before { background: var(--green); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-soft); }
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Home: rates */
.prices { display: grid; gap: 4px 48px; margin-top: clamp(20px, 3vw, 32px); }
.prices li { display: flex; align-items: baseline; gap: 14px; }
.prices b { font: 700 clamp(60px, 10vw, 112px)/1 var(--display); letter-spacing: -.045em; }
.prices span { font-size: 18px; font-weight: 600; }
.notes { display: grid; gap: 0 48px; max-width: 920px; margin-top: clamp(24px, 4vw, 40px); }
.notes li { padding: 14px 0; border-top: 1px solid var(--hair); }
@media (min-width: 700px) {
  .prices { grid-template-columns: repeat(3, auto); justify-content: start; }
  .prices li { display: block; }
  .prices span { display: block; margin-top: 4px; }
  .notes { grid-template-columns: 1fr 1fr; }
}

/* Training: a green card with a CSS-drawn check beside each certification. */
.training { padding: clamp(24px, 5vw, 56px); border-radius: var(--r-sheet); }
.training__lead { margin-top: 14px; font-size: 19px; }
.checks { margin-top: 18px; }
.checks li { position: relative; padding: 7px 0 7px 38px; font-size: 19px; font-weight: 600; line-height: 1.35; break-inside: avoid; }
.checks li::before { content: ""; position: absolute; left: 6px; top: .52em; width: 9px; height: 17px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.training__more { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.training__more .pill { margin-right: 8px; vertical-align: 2px; }
@media (min-width: 700px) { .checks { columns: 2; column-gap: 48px; } }

/* Home: reviews */
.reviews { display: grid; gap: clamp(32px, 5vw, 56px); }
.review-list__grid { display: grid; gap: 16px; margin-top: 24px; }
.review { display: grid; gap: 10px; align-content: start; box-shadow: var(--lift); }
.review__stars { display: flex; gap: 3px; }
.review__text { font-size: 18px; line-height: 1.5; }
.review__name { font-weight: 700; }
.review-list__more { margin-top: 20px; }
.review-form { display: grid; gap: 24px 56px; align-items: start; }
.review-form .form { max-width: 560px; }
.review-form__note { margin-top: 12px; color: var(--ink-soft); }
@media (min-width: 700px) { .review-list__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) {
  .review-form { grid-template-columns: 1fr 1.25fr; }
  .review-list__grid { grid-template-columns: repeat(3, 1fr); }
}

/* A star drawn with a clip path, so it looks the same on every device. */
.star-shape { display: block; width: 22px; aspect-ratio: 1; background: rgb(59 40 28 / .36); clip-path: polygon(50% 3%, 62% 36%, 97% 37%, 69% 58%, 79% 92%, 50% 72%, 21% 92%, 31% 58%, 3% 37%, 38% 36%); }
.star-shape { transition: scale .3s var(--spring), background-color .15s ease; }
.star-shape.is-on { background: var(--ink); }
.star:hover .star-shape { scale: 1.14; }
.stars { display: flex; gap: 2px; }
.star { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-input); cursor: pointer; }
.star .star-shape { width: 34px; }
.star:focus-within { outline: 3px solid var(--ink); outline-offset: 1px; }
.star:hover .star-shape { background: rgb(59 40 28 / .6); }
.star:hover .star-shape.is-on { background: var(--ink); }

/* Closing band */
.band { text-align: center; }
.band h2 { margin-bottom: 24px; }

/* About */
.page-head { padding-block: clamp(28px, 6vw, 80px) clamp(24px, 4vw, 40px); }
.page-head h1 { max-width: 16ch; font-size: clamp(36px, 5.3vw, 62px); line-height: 1.04; letter-spacing: -.035em; }
.page-head .lead { max-width: 52ch; margin-top: 16px; }
.sitters { display: grid; gap: 16px; }
.sitter { padding: clamp(24px, 4vw, 40px); transition: translate .45s var(--ease), box-shadow .45s var(--ease); }
@media (hover: hover) { .sitter:hover { translate: 0 -5px; box-shadow: var(--lift); } }
.sitter h2 { font-size: clamp(40px, 6vw, 64px); }
.sitter p { margin-top: 12px; font-size: 19px; }
.approach { display: grid; gap: 32px 56px; margin-top: clamp(28px, 4vw, 44px); }
.approach h3 { margin-bottom: 8px; }
.approach p { max-width: 44ch; }
@media (min-width: 700px) {
  .sitters { grid-template-columns: 1.25fr 1fr; }
  .approach { grid-template-columns: 1fr 1fr; }
}

/* ---------- forms ---------- */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-size: 15px; font-weight: 700; }
.field > legend { margin-bottom: 6px; }
.field input:not([type="radio"], [type="checkbox"]), .field select, .field textarea {
  transition: box-shadow .2s ease, border-color .2s ease;
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: var(--r-input);
  background: var(--milk); font-size: 17px; line-height: 1.4;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { color: var(--ink); appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 21px) 52%, calc(100% - 15px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 2px; border-radius: var(--r-input); }
.field input:not([type="radio"], [type="checkbox"]):hover, .field select:hover, .field textarea:hover { box-shadow: 0 0 0 3px var(--yellow); }
.field__hint { font-size: 14px; color: var(--ink-soft); }
.field__error { font-size: 15px; font-weight: 700; color: var(--bad); }
.field.is-bad input:not([type="radio"], [type="checkbox"]), .field.is-bad select, .field.is-bad textarea { border-color: var(--bad); border-width: 2.5px; }
.field__count { justify-self: end; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } .form__row--3 { grid-template-columns: 2fr 1fr; } }

/* A message under a form or a list. role="status" or role="alert" is set in the markup. */
.note { padding: 12px 16px; border-radius: var(--r-input); background: var(--yellow); font-weight: 600; }
.note--bad { background: #fbe1dd; color: var(--bad); }
.note--good { background: var(--green); }
.note:empty { display: none; }

/* The honeypot: off screen for people, on the page for bots. */
.hp { position: absolute; left: -6000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Radio choices drawn as pills (sitter choice, payment, portal filters). */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { transition: background-color .2s ease, color .2s ease, scale .25s var(--spring); display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 18px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--milk); font-weight: 700; line-height: 1.2; }
.choice small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.choice input:hover:not(:disabled, :checked) + span { background: var(--yellow); }
.choice input:checked + span { background: var(--ink); color: var(--milk); }
.choice input:active:not(:disabled) + span { scale: .96; }
.choice input:checked + span small { color: var(--milk); }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice input:disabled { cursor: not-allowed; }
.choice input:disabled + span { border-style: dashed; color: var(--ink-soft); background: transparent; }

/* ---------- booking ---------- */

.page-head--slim { padding-bottom: clamp(16px, 3vw, 28px); }
.page-head--slim h1 { max-width: none; }
.booking { padding-bottom: clamp(48px, 8vw, 96px); }
.booking__grid { display: grid; gap: 40px; }
.booking__details { min-width: 0; margin: 0; padding: 0; border: 0; }
.h-step { display: block; width: 100%; margin-bottom: 18px; padding: 0 0 12px; border-bottom: 2px solid var(--ink); font: 700 clamp(24px, 3vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.h-part { margin: 32px 0 14px; }
.form--after { margin-top: 28px; }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.booking__after { margin-top: 12px; }
.btn--wide { width: 100%; }
@media (min-width: 980px) {
  .booking__grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .booking__when { position: sticky; top: 20px; }
}

/* The calendar. A day's colour is its state; the same state is in its title, in hidden text for
   screen readers and in the legend underneath. */
.cal-box { display: grid; gap: 18px; }
.cal { padding: 16px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--milk); box-shadow: var(--lift); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal__title { font-size: 22px; text-align: center; }
.cal__nav { position: relative; flex: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; }
.cal__nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: translate(-30%, -50%) rotate(45deg); }
.cal__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.cal__nav:hover:not(:disabled) { background: var(--yellow); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.cal.is-loading .cal__grid { opacity: .5; }
.day { display: grid; place-items: center; min-height: 44px; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-input); font: 700 17px/1 var(--display); color: var(--ink); cursor: pointer; }
.day--blank { background: none; }
.day--skeleton { background: var(--st-na); }
.day:disabled { cursor: not-allowed; }
.day[data-state="na"] { color: rgb(59 40 28 / .45); font-weight: 500; }
.day.is-today span[aria-hidden] { padding-bottom: 2px; border-bottom: 2.5px solid currentColor; }
.day { transition: box-shadow .18s ease, scale .25s var(--spring); }
.day:hover:not(:disabled), .day[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.day:active:not(:disabled) { scale: .92; }
.day:focus-visible { outline-offset: 2px; }
.cal__status { min-height: 1.6em; font-weight: 600; }
.cal__status .btn { margin-left: 4px; }
.cal__times { display: grid; gap: 14px; }
.cal__times .form__row { grid-template-columns: 1fr 1fr; }
.cal__summary { font: 700 19px/1.3 var(--display); letter-spacing: -.02em; }
.cal__summary:empty { display: none; }

.children { display: grid; gap: 14px; margin-bottom: 14px; }
.child { min-width: 0; margin: 0; padding: 16px 18px 12px; border: 2px solid var(--line); border-radius: var(--r-card); }
.child > legend { padding: 0 8px; font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
.child .link-btn { margin-top: 6px; }

.quote-box { padding: 18px 20px; border-radius: var(--r-card); background: var(--yellow); box-shadow: var(--lift); }
.quote { display: grid; gap: 10px; margin: 0; }
.quote > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.quote dt { font-weight: 600; }
.quote dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.quote dd small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.quote__total { padding-top: 12px; border-top: 2px solid var(--ink); }
.quote__total dt, .quote__total dd { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; }
.quote-box .note { margin-top: 12px; }
#form-error { margin: 18px 0 0; }
#when-note { margin-bottom: 16px; }
#send { margin-top: 18px; }

.done { display: grid; gap: 14px; justify-items: start; max-width: 720px; padding: clamp(24px, 5vw, 48px); border-radius: var(--r-sheet); }
.done__visit { font: 700 clamp(20px, 3vw, 26px)/1.25 var(--display); letter-spacing: -.02em; }
.done h2:focus { outline: none; }

/* ---------- My visits ---------- */

.visits { display: grid; gap: 20px; }
.visits h3 { margin-top: 18px; }
.visits__sign { max-width: 460px; }
.visits__in { display: grid; gap: 14px; }
.visits__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.visits__who { font-weight: 700; }
.visits__who:focus, #visits-note:focus { outline: none; }
.visits__empty { color: var(--ink-soft); }
.visit-list { display: grid; gap: 12px; }
.visit { display: grid; gap: 6px; padding: 18px 20px; box-shadow: var(--lift); }
.visit__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.visit__when { font: 700 19px/1.3 var(--display); letter-spacing: -.02em; }
.visit__total { color: var(--ink-soft); }
.visit .btn-row { margin-top: 8px; }
.pill[data-status="confirmed"] { background: var(--st-open); }
.pill[data-status="pending"] { background: var(--st-part); }
.pill[data-status="declined"], .pill[data-status="cancelled"] { background: var(--st-na); }
.family { max-width: 760px; }
.family__note { font-weight: 700; }
.sheet__when { font: 700 19px/1.3 var(--display); letter-spacing: -.02em; }

/* ---------- dialogs ---------- */

dialog.sheet { width: min(100% - 24px, 540px); max-height: min(92dvh, 820px); padding: 0; border: 0; border-radius: var(--r-card); background: var(--milk); color: var(--ink); box-shadow: 0 24px 64px var(--shade); overflow: auto; overscroll-behavior: contain; }
dialog.sheet--wide { width: min(100% - 24px, 580px); }
dialog.sheet .day { aspect-ratio: auto; height: 46px; }
dialog.sheet .cal { padding: 12px; }
dialog.sheet::backdrop { background: rgb(59 40 28 / .5); }
.sheet__in { display: grid; gap: 16px; padding: clamp(20px, 5vw, 32px); }
.sheet__in h2 { font-size: clamp(26px, 4vw, 34px); }

/* ---------- footer ---------- */

.site-foot { margin-top: clamp(24px, 4vw, 48px); border-top: 2px solid var(--line); }
.site-foot__in { display: grid; gap: 20px; padding-block: 36px 28px; }
.site-foot__brand { display: flex; align-items: center; gap: 14px; }
.site-foot__brand p { max-width: 34ch; line-height: 1.45; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.site-foot__credit { font-size: 14px; color: var(--ink-soft); }
.site-foot__credit a { display: inline-block; padding-block: 12px; }
@media (min-width: 760px) {
  .site-foot__in { grid-template-columns: 1fr auto; align-items: center; }
  .site-foot__credit { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
}

/* ---------- motion ----------
   Everything that moves lives in the block below and runs only when the visitor has not asked
   for less motion. Only opacity and the transform properties are animated. Each piece has a
   job: the hero introduces itself once, sections arrive as they are scrolled to (js/motion.js
   arms those), the calendar shows which way a month went, and controls answer a press. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html.lenis { scroll-behavior: auto; }                      /* Lenis does the gliding where it runs */
  .lenis.lenis-stopped { overflow: hidden; }

  @keyframes hc-rise { from { opacity: 0; translate: 0 18px; } }
  @keyframes hc-fade { from { opacity: 0; } }
  @keyframes hc-pop { from { opacity: 0; scale: .8; rotate: -9deg; } }
  @keyframes hc-mark { from { background-size: 0 100%; } }
  @keyframes hc-spin { to { rotate: 360deg; } }
  @keyframes hc-float { 50% { translate: 0 -7px; } }
  @keyframes hc-day { from { opacity: 0; translate: var(--dx, 0) 8px; } }
  @keyframes hc-press { from { scale: .86; } }
  @keyframes hc-sheet { from { opacity: 0; translate: 0 22px; scale: .97; } }
  @keyframes hc-page-out { to { opacity: 0; translate: 0 -10px; } }
  @keyframes hc-page-in { from { opacity: 0; translate: 0 14px; } }

  /* Moving between pages: the header stays put and the page below it changes over. */
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: hc-head; }
  main { view-transition-name: hc-page; }
  ::view-transition-old(hc-page) { animation: hc-page-out .2s ease both; }
  ::view-transition-new(hc-page) { animation: hc-page-in .5s var(--ease) both; }

  /* Hero, once, on load: words rise in turn, the marker sweeps under the headline, the bear pops in. */
  .hero__copy > *, .page-head > * { animation: hc-rise .8s var(--ease) backwards; }
  .hero__copy > :nth-child(2), .page-head > :nth-child(2) { animation-delay: .09s; }
  .hero__copy > :nth-child(3) { animation-delay: .18s; }
  .hero h1 em { animation: hc-mark .8s var(--ease) .5s backwards; }
  .hero__disc { animation: hc-fade .6s ease .1s backwards; }
  .hero__disc::before { animation: hc-spin 90s linear infinite; }
  .hero__disc .logo { animation: hc-pop 1s var(--spring) .2s backwards, hc-float 7s ease-in-out 1.4s infinite; transition: rotate .7s var(--spring); }
  .hero__disc:hover .logo { rotate: -6deg; }
  .week:not([hidden]) { animation: hc-rise .7s var(--ease) backwards; }
  .week__day { animation: hc-rise .55s var(--ease) backwards; animation-delay: calc(.12s + var(--i, 0) * 45ms); }
  .week__day:nth-child(2) { --i: 1; } .week__day:nth-child(3) { --i: 2; } .week__day:nth-child(4) { --i: 3; }
  .week__day:nth-child(5) { --i: 4; } .week__day:nth-child(6) { --i: 5; } .week__day:nth-child(7) { --i: 6; }

  /* Sections arriving. js/motion.js adds .will-reveal to what is below the fold, then .is-in. */
  .will-reveal { opacity: 0; translate: 0 26px; }
  .will-reveal.is-in { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease) calc(var(--i, 0) * 85ms), translate 1s var(--ease) calc(var(--i, 0) * 85ms); }
  .steps .will-reveal::before { scale: 0 1; }
  .steps .will-reveal.is-in::before { scale: 1 1; transition: scale .9s var(--ease) calc(.1s + var(--i, 0) * 85ms); }
  .checks .will-reveal { opacity: 1; translate: none; }
  .checks .will-reveal::before { scale: 0; }
  .checks .will-reveal.is-in::before { scale: 1; transition: scale .55s var(--spring) calc(.25s + var(--i, 0) * 110ms); }
  .drips.will-reveal { opacity: 1; translate: none; scale: 1 .12; }
  .drips.will-reveal.is-in { scale: 1 1; transition: scale 1.9s cubic-bezier(.2, .7, .2, 1) .15s; }

  /* The calendar: days arrive from the side the month came from; a picked day answers. */
  .fade-in { animation: hc-fade .3s ease both; }
  .cal__grid[data-dir="next"] { --dx: 16px; }
  .cal__grid[data-dir="prev"] { --dx: -16px; }
  .cal__grid.fade-in { animation: none; }
  .cal__grid.fade-in .day { animation: hc-day .42s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 9ms); }
  .day[aria-pressed="true"] { animation: hc-press .4s var(--spring); }
  .cal__times:not([hidden]), .note:not(:empty), .quote > div, .visit, .child, .done:not([hidden]) { animation: hc-rise .45s var(--ease) backwards; }
  .star-shape.is-on { animation: hc-press .35s var(--spring); }

  /* Dialogs rise into place and the page dims behind them. */
  dialog.sheet[open] { animation: hc-sheet .4s var(--ease); }
  dialog.sheet[open]::backdrop { animation: hc-fade .3s ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}