/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Every page uses these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* ---------- layout ---------- */
.wrap { width: min(var(--max-w), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--c-paper-alt); }
.section--ink { background: var(--c-ink); color: var(--c-on-ink); }
.head { max-width: 46rem; display: grid; gap: var(--space-3); }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 40rem; }
.section--ink .head__line { color: var(--c-on-ink-soft); }
.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); }
main { display: block; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 52px; padding: 0 1.6em; border-radius: var(--radius-pill); font: 650 1rem/1 var(--font-ui); letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-brand); color: var(--c-on-brand); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 22px -10px rgb(13 27 51 / 0.55); }
.btn--primary:hover { background: var(--c-brand-dark); box-shadow: 0 0 0 3px rgb(196 162 98 / 0.35), 0 12px 26px -10px rgb(13 27 51 / 0.6); }
.btn--gold, .section--ink .btn--primary, .on-ink .btn--primary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 12px 28px -12px rgb(0 0 0 / 0.6); }
.btn--gold:hover, .section--ink .btn--primary:hover, .on-ink .btn--primary:hover { background: #D2B377; }
.btn__arrow { width: 18px; height: 18px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.textlink { color: var(--c-brand-text); font-weight: 650; text-decoration: none; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-med) var(--ease-out); }
.textlink:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.section--ink .textlink { color: var(--c-on-ink); }
.micro { font-size: var(--fs-small); color: var(--c-ink-soft); }
.section--ink .micro { color: var(--c-on-ink-soft); }

/* ---------- the stop icon ---------- */
.stop { position: absolute; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--c-ink); background: var(--c-glass); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: var(--shadow-s); transition: transform var(--dur-fast) var(--ease-out); }
.stop:hover { transform: scale(1.06); }
.stop svg { width: 14px; height: 14px; }
.stop--ink { background: rgb(13 27 51 / 0.55); color: var(--c-on-ink); }

/* ---------- the header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: var(--space-4); padding-inline: max(var(--gutter), (100% - var(--max-w)) / 2); background: rgb(248 243 234 / 0.9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgb(226 215 195 / 0.7); }
.site-header__logo { display: block; color: var(--c-ink); flex: none; line-height: 0; margin-right: auto; }
.logo { height: 46px; width: auto; display: block; }
.site-header__nav { display: flex; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.nav__item { position: relative; }
.nav__item > a, .nav__group { display: inline-flex; align-items: center; gap: 0.35em; height: 44px; padding: 0 0.85rem; font: 560 0.97rem/1 var(--font-ui); color: var(--c-ink); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; }
.nav__item > a::after, .nav__group::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 8px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); }
.nav__item > a:hover::after, .nav__group:hover::after, .nav__item > a[aria-current]::after { transform: scaleX(1); }
.nav__group::before { content: ''; order: 2; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.nav__group[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); }
.nav__sub { list-style: none; margin: 0; padding: 0.5rem; position: absolute; left: 0; top: calc(100% + 6px); min-width: 15rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.nav__group[aria-expanded="true"] + .nav__sub, .nav__item--group:hover .nav__sub, .nav__item--group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: 0.7rem 0.85rem; border-radius: var(--radius-s); font: 560 0.97rem/1.2 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.nav__sub a:hover { background: var(--c-paper-alt); }
.nav a[data-planned] { opacity: 0.72; }
.site-header__cta { display: inline-flex; align-items: center; height: 46px; padding: 0 1.3em; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-on-brand); font: 650 0.95rem/1 var(--font-ui); text-decoration: none; white-space: nowrap; flex: none; box-shadow: 0 8px 18px -10px rgb(13 27 51 / 0.6); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.site-header__cta:hover { background: var(--c-brand-dark); box-shadow: 0 0 0 3px rgb(196 162 98 / 0.35), 0 8px 18px -10px rgb(13 27 51 / 0.6); }
.site-header__menu { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-s); background: var(--c-paper-alt); color: var(--c-ink); cursor: pointer; position: relative; }
.site-header__menu span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.site-header__menu span:nth-of-type(1) { top: 16px; }
.site-header__menu span:nth-of-type(2) { top: 26px; }
.site-header[data-open] .site-header__menu span:nth-of-type(1) { transform: translateY(5px) rotate(45deg); }
.site-header[data-open] .site-header__menu span:nth-of-type(2) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .logo { height: 38px; }
  .site-header { gap: var(--space-2); }
  .site-header__menu { display: block; order: 3; }
  .site-header__cta { height: 40px; padding: 0 1em; font-size: 0.875rem; order: 2; }
  .site-header__nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-l); padding: var(--space-3) var(--gutter) var(--space-4); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-header[data-open] .site-header__nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item > a, .nav__group { width: 100%; height: 52px; font-size: 1.08rem; padding: 0 0.25rem; border-bottom: 1px solid var(--c-line); justify-content: space-between; }
  .nav__item > a::after, .nav__group::after { display: none; }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 0.75rem; display: none; min-width: 0; }
  .nav__group[aria-expanded="true"] + .nav__sub { display: block; }
  .nav__item--group:hover .nav__sub { transform: none; }
}
@media (max-width: 380px) { .site-header__cta { padding: 0 0.8em; font-size: 0.82rem; } .logo { height: 34px; } }

/* ---------- the seam (the pen line where a navy band meets the page) and the flourish ---------- */
.seam { display: block; width: 100%; height: clamp(36px, 5vw, 72px); margin-bottom: -1px; color: var(--c-ink); }
.seam path:first-child { fill: currentColor; }
.seam__pen { fill: none; stroke: var(--c-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.flourish { position: absolute; pointer-events: none; color: var(--c-accent); opacity: 0.06; width: min(46vw, 560px); height: auto; }
.flourish path { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; }

/* ---------- the footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); padding: var(--space-6) max(var(--gutter), (100% - var(--max-w)) / 2) var(--space-5); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--space-5) var(--space-4); }
.site-footer .flourish { right: -6%; bottom: -18%; }
.site-footer__logo { color: var(--c-on-ink); display: inline-block; line-height: 0; }
.site-footer__logo .logo { height: 58px; }
.site-footer__line { margin-top: var(--space-3); color: var(--c-on-ink-soft); max-width: 22rem; }
.site-footer__title { font: 650 0.8125rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-on-ink); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--c-on-ink); text-decoration: none; }
.site-footer__col a:hover, .site-footer__talk a:not(.btn):hover { color: var(--c-accent-on-ink); }
.site-footer__col a[data-planned] { color: var(--c-on-ink-soft); }
.site-footer__talk { display: grid; gap: 0.75rem; align-content: start; }
.site-footer__talk .btn { justify-self: start; margin-bottom: 0.25rem; }
.site-footer__reply { color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.site-footer__social { display: flex; gap: 0.6rem; margin-top: 0.25rem; }
.site-footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--c-line-ink); transition: box-shadow var(--dur-fast), color var(--dur-fast); }
.site-footer__social a:hover { box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-accent-on-ink); }
.site-footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--c-line-ink); color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.site-footer__legal ul { display: flex; gap: var(--space-4); }
.site-footer__legal a { color: var(--c-on-ink-soft); }
@media (max-width: 900px) { .site-footer { grid-template-columns: 1fr 1fr; } .site-footer__brand, .site-footer__talk { grid-column: 1 / -1; } }

/* ---------- glass cards (over footage) and plain cards ---------- */
.glass { background: var(--c-glass); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); border-radius: var(--radius-m); box-shadow: var(--shadow-glass); border: 1px solid var(--c-glass-edge); color: var(--c-ink); }
.card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }

/* ---------- a stage: a rounded window of footage with a scene over it ---------- */
.stage { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); isolation: isolate; }
.stage > video, .stage > img, .stage > picture > img, .stage .stage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage > [data-scene] { position: absolute; inset: 0; z-index: 2; }
.stage .stop { right: 14px; top: 14px; }

/* ---------- the picker: the first screen's box (choices shown, each tap answered, the booking button) ---------- */
.picker { position: relative; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: 2.4rem 1.4rem 1.1rem; display: grid; gap: 0.9rem; margin-top: 28px; }
.picker__answer p { margin: 0; }
.picker__face { position: absolute; left: 1.4rem; top: -28px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--c-card), 0 0 0 4.5px var(--c-accent), var(--shadow-s); }
.picker__ask { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.85rem; }
.picker__legend { font: 650 1.06rem/1.3 var(--font-ui); color: var(--c-ink); padding: 0; }
.picker__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.choice { position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 64px; padding: 0.55rem 0.8rem 0.55rem 0.55rem; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); cursor: pointer; font: 600 0.94rem/1.25 var(--font-ui); color: var(--c-ink); transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink-soft); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.choice__pic { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--c-card); box-shadow: inset 0 0 0 1px var(--c-line); display: grid; place-items: center; overflow: hidden; }
.choice__pic svg { width: 40px; height: 40px; overflow: visible; }
.choice__check { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); display: grid; place-items: center; transform: scale(0); transition: transform var(--dur-med) var(--ease-out); }
.choice__check svg { width: 12px; height: 12px; }
.choice:has(input:checked) { background: var(--c-card); box-shadow: inset 0 0 0 2px var(--c-brand), 0 8px 18px -12px rgb(13 27 51 / 0.5); }
.choice:has(input:checked) .choice__check { transform: scale(1); }
.picker__go { width: 100%; }
.picker__answer { font-size: var(--fs-small); color: var(--c-ink-soft); text-align: center; min-height: 2.6em; display: grid; place-items: center; line-height: 1.35; }
.picker__answer b { color: var(--c-ink); font-weight: 650; }
@media (max-width: 420px) { .choice { font-size: 0.86rem; min-height: 60px; gap: 0.5rem; } .choice__pic { width: 40px; height: 40px; } .choice__pic svg { width: 34px; height: 34px; } }

/* the choice pictures: drawn in the site's own lines; each answers its tap */
.pic-line { fill: none; stroke: var(--c-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pic-fill { fill: var(--c-brand-light); }
.pic-gold { fill: var(--c-accent); }
.pic-gold-line { fill: none; stroke: var(--c-accent); stroke-width: 1.8; stroke-linecap: round; }
.pic-move { transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.choice:has(input:checked) .pic-rise { transform: translateY(-4px); }
.pic-on { opacity: 0; }
.choice:has(input:checked) .pic-on { opacity: 1; }
.choice:has(input:checked) .pic-off { opacity: 0; }

/* ---------- the exit popup ---------- */
.exit { padding: 0; margin: auto; border: 0; background: none; max-width: none; max-height: none; width: min(780px, 100% - 2rem); color: var(--c-ink); }
.exit::backdrop { background: rgb(13 27 51 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.exit__in { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--c-card); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.exit[data-kit-on] .exit__in { opacity: 1; transform: none; }
.exit__side { position: relative; background: var(--c-ink); color: var(--c-on-ink); padding: 2rem 1.75rem; display: grid; align-content: end; gap: 0.75rem; min-height: 340px; overflow: hidden; }
.exit__side .flourish { left: -30%; top: -20%; width: 140%; opacity: 0.06; }
.exit__face { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 5px var(--c-accent); position: relative; }
.exit__note { color: var(--c-on-ink-soft); font-size: var(--fs-small); position: relative; }
.exit__body { padding: 2.25rem 2rem 2rem; display: grid; gap: 1rem; align-content: center; }
.exit__body h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.exit__echo { font-size: var(--fs-small); color: var(--c-ink-soft); }
.exit__echo b { color: var(--c-ink); }
.exit__or { display: grid; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--c-line); }
.exit__or label { font-size: var(--fs-small); color: var(--c-ink-soft); }
.exit__row { display: flex; gap: 0.5rem; }
.exit__row input { flex: 1; min-width: 0; height: 48px; padding: 0 1rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line); background: var(--c-paper); font: 500 1rem var(--font-ui); color: var(--c-ink); }
.exit__row input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.exit__row .btn { min-height: 48px; padding: 0 1.2em; }
.exit__err { color: #9B2C2C; font-size: var(--fs-small); }
.exit__close { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-paper-alt); color: var(--c-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.exit__close:hover { background: var(--c-line); }
@media (max-width: 700px) { .exit__in { grid-template-columns: 1fr; } .exit__side { min-height: 0; padding: 1.5rem; grid-template-columns: auto 1fr; align-items: center; } .exit__face { width: 72px; height: 72px; } }

/* ---------- the call bar on the phone ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 0.5rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgb(13 27 51 / 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out), visibility var(--dur-med); }
.callbar[data-kit-on] { transform: none; }
.callbar a { height: 50px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font: 650 0.98rem/1 var(--font-ui); text-decoration: none; }
.callbar__cta { flex: 1; background: var(--c-accent); color: var(--c-on-accent); }
.callbar__mail { width: 50px; flex: none; color: var(--c-on-ink); box-shadow: inset 0 0 0 1px var(--c-line-ink); }
.callbar__mail svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.75rem; max-width: 52rem; }
.faq details { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); transition: box-shadow var(--dur-fast); }
.faq details[open] { box-shadow: var(--shadow-m); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; font: 650 1.08rem/1.35 var(--font-ui); color: var(--c-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-paper-alt) center / 12px no-repeat; background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink), var(--c-ink)); background-size: 11px 1.6px, 1.6px 11px; background-position: center; transition: transform var(--dur-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--c-accent); }
.faq details > div { padding: 0 1.35rem 1.25rem; color: var(--c-ink-soft); max-width: 44rem; }

/* ---------- the close: a navy band over footage ---------- */
.close-band { position: relative; color: var(--c-on-ink); background: var(--c-ink); overflow: hidden; isolation: isolate; }
.close-band__media { position: absolute; inset: 0; z-index: -2; }
.close-band__media video, .close-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }
.close-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--c-ink) 0%, rgb(13 27 51 / 0.92) 38%, rgb(13 27 51 / 0.45) 70%, rgb(13 27 51 / 0.2) 100%); }
.close-band .flourish { left: -4%; top: -8%; }
.close-band__in { padding-block: clamp(5rem, 4rem + 6vw, 9rem); display: grid; gap: var(--space-4); max-width: 36rem; position: relative; }
.close-band h2 { font-size: var(--fs-display); }
.close-band p { font-size: var(--fs-lead); color: var(--c-on-ink-soft); }
.close-band .stop { right: var(--gutter); bottom: 1.25rem; }
@media (max-width: 760px) { .close-band::before { background: linear-gradient(180deg, rgb(13 27 51 / 0.55) 0%, rgb(13 27 51 / 0.9) 45%, var(--c-ink) 100%); } .close-band__media video, .close-band__media img { object-position: 78% 30%; } .close-band__in { padding-top: 14rem; } }

/* ---------- the thank-you and 404 pages ---------- */
.thanks, .notfound { min-height: 60vh; display: grid; align-content: center; justify-items: start; gap: var(--space-4); padding: var(--section-y) max(var(--gutter), (100% - 46rem) / 2); }
.thanks__headline { font-size: var(--fs-h1); }
.thanks__body { font-size: var(--fs-lead); color: var(--c-ink-soft); display: grid; gap: var(--space-4); justify-items: start; }
.thanks__body b { color: var(--c-ink); }
.thanks__next { list-style: none; margin: 0; padding: 0; }
.thanks__next a { color: var(--c-brand-text); font-weight: 650; }

/* ---------- small additions: the header's short button, the seam before the footer, the popup's quiet close ---------- */
@media (max-width: 960px) { .site-header__more { display: none; } }
body:has(.close-band) .seam--footer { display: none; }
.site-footer .site-footer__social { display: flex; gap: 0.6rem; margin-top: 0.25rem; }
.exit__body > p:not(.exit__echo) { color: var(--c-ink-soft); }
.exit__go { justify-self: start; }
.exit__no { justify-self: start; background: none; border: 0; padding: 0.25rem 0; font: 560 var(--fs-small) var(--font-ui); color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.exit__no:hover { color: var(--c-ink); }
html[data-kit-modal] { overflow: hidden; }

/* the choice pictures' own states: the pin rises, the Book button turns gold, the ringing call gets its check, the stars light */
.pic-pin { fill: var(--c-maps); }
.pic-btn { fill: var(--c-brand); transition: fill var(--dur-med) var(--ease-out); }
.choice:has(input:checked) .pic-btn { fill: var(--c-accent); }
.pic-star { fill: var(--c-line); transition: fill var(--dur-med) var(--ease-out); }
.choice:has(input:checked) .pic-star { fill: var(--c-star); }
.choice:has(input:checked) .pic-star:nth-of-type(2) { transition-delay: 60ms; }
.choice:has(input:checked) .pic-star:nth-of-type(3) { transition-delay: 120ms; }
.choice:has(input:checked) .pic-star:nth-of-type(4) { transition-delay: 180ms; }
.choice:has(input:checked) .pic-star:nth-of-type(5) { transition-delay: 240ms; }
.choice__label { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .pic-move, .pic-btn, .pic-star, .choice, .choice__check { transition: none; } }
.exit:focus, .exit:focus-visible { outline: none; }

/* the flourish always sits behind the words of its band; the gold button keeps its navy text in the footer */
.site-footer { isolation: isolate; }
.site-footer .flourish, .close-band .flourish { z-index: -1; }
.exit__side .flourish { z-index: 0; }
.exit__face, .exit__note { z-index: 1; }
.site-footer .btn--gold, .site-footer .btn--gold:hover { color: var(--c-on-accent); }

/* The exit popup's side carries the logo above a larger portrait, centred (no empty navy over a small face); a gold
   hairline and a deeper wash keep the card clear over the navy close band. */
.exit::backdrop { background: rgb(13 27 51 / 0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.exit__in { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 75%, transparent), var(--shadow-l); }
.exit__side { align-content: center; justify-items: start; gap: 1.1rem; }
.exit__side .logo { height: 52px; color: var(--c-on-ink); position: relative; z-index: 1; margin-bottom: 0.4rem; }
.exit__face { width: 148px; height: 148px; }
@media (max-width: 700px) { .exit__side .logo { display: none; } .exit__face { width: 72px; height: 72px; } }
/* The footer's way to book: a gold link, not a second gold button right under the close band's. */
.site-footer .site-footer__book { display: inline-flex; align-items: center; gap: 0.4em; color: var(--c-accent); font-weight: 650; font-size: var(--fs-lead); text-decoration: none; }
.site-footer .site-footer__book:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__book .btn__arrow { width: 1.1em; height: 1.1em; }
/* The thank-you page: the face of the person who replies. */
.thanks__face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 5.5px var(--c-accent); }
/* On the phone the call bar takes over booking once it shows, so the header keeps the logo and the menu: one Book
   button on screen, not two. */
@media (max-width: 899px) { .site-header__cta { transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med); } body:has(.callbar[data-kit-on]) .site-header__cta { opacity: 0; visibility: hidden; } }