/* A business's site, the same for every one: the look's own colours, faces and sizes are each page's :root, written by
   Looks.Css. Served from the Website feature at /site-styles, kept a year, its address changing with what it says. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--text); }
img { display: block; max-width: 100%; }
a { color: var(--main-text); }
h1, h2, h3 { margin: 0 0 12px; color: var(--headings-color); font-family: var(--headings); font-weight: var(--weight); line-height: 1.15; letter-spacing: var(--heading-spacing); text-transform: var(--heading-case); overflow-wrap: anywhere; }
h1 { font-size: calc(2.25rem * var(--scale)); } h2 { font-size: calc(1.75rem * var(--scale)); } h3 { font-size: calc(1.125rem * var(--scale)); }
/* Each section's heading carries the highlight colour, so a site shows its colours beyond its buttons */
.wrap > h2::after, .words > h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--highlight); }
.action h2::after { display: none; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 0 24px; border-radius: var(--button); background: var(--button-bg); color: var(--on-button); font-weight: 700; text-decoration: none; white-space: nowrap; border: 0; font: inherit; font-weight: 700; cursor: pointer; text-transform: var(--button-case); letter-spacing: .02em; }
.button.light { background: var(--ground); color: var(--main-on-ground); }
.buttons-outline .button { background: transparent; color: var(--button-bg); box-shadow: inset 0 0 0 2px var(--button-bg); }
.buttons-outline .button.light { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 16px; background: #1f1b18; color: #fff; font-size: 15px; }
.preview-bar a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; white-space: nowrap; }
.preview-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header { background: var(--ground); }
.top { display: flex; align-items: center; gap: 8px; max-width: 68rem; min-height: 64px; margin: 0 auto; padding: 0 8px 0 16px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--main-text); font-family: var(--headings); font-weight: var(--weight); font-size: 1.25rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: min-content; flex: 0 0 auto; max-width: 45%; }
.brand img { height: 40px; width: auto; flex-shrink: 0; }
.menu-wide { display: none; }
.menu-wide a, .menu-phone a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--main-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu-phone summary { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; list-style: none; cursor: pointer; }
.menu-phone summary::-webkit-details-marker { display: none; }
.menu-phone:not([open]) nav { display: none; }
.menu-phone nav { position: absolute; left: 8px; right: 8px; top: 60px; z-index: 10; padding: 8px; border-radius: var(--card); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
@media (min-width: 48rem) { .menu-wide { display: flex; } .menu-phone { display: none; } h1 { font-size: calc(3.25rem * var(--scale)); } h2 { font-size: calc(2.25rem * var(--scale)); } }
.hero { position: relative; margin: 0 8px; border-radius: var(--card); overflow: hidden; }
.hero.behind { min-height: 440px; display: flex; align-items: flex-end; background: var(--main); width: calc(100% - 16px); }
.hero.behind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.behind::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.hero.behind .words { position: relative; z-index: 1; padding: 24px; }
.hero.behind h1, .hero.behind .lead { color: #fff; }
.hero.beside img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--card); }
.hero.beside .words { padding: 24px 8px; }
.hero.none { padding: 40px 24px 32px; background: var(--main-band); }
.hero.none h1, .hero.none .lead { color: var(--on-main-band); }
.hero.none .button { background: var(--ground); color: var(--main-on-ground); }
.lead { font-size: 1.125rem; max-width: 40rem; }
.hero .button { margin-top: 12px; }
@media (min-width: 48rem) { .hero.none { max-width: 68rem; margin: 0 auto; padding: 64px 48px; } .hero.beside { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; max-width: 68rem; margin: 0 auto; } .hero.behind { min-height: 560px; max-width: 68rem; margin: 0 auto; width: 100%; } .hero.behind .words { padding: 48px; } }
.text-picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--card); margin-bottom: 16px; }
@media (min-width: 48rem) { .text-picture { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .text-picture.left img { order: 0; } .text-picture.right img { order: 1; } }
.prose a { display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; }
.action { margin: 0 8px; padding: 32px 24px; border-radius: var(--card); background: var(--main); color: var(--on-main); }
.action h2 { color: var(--on-main); }
@media (min-width: 48rem) { .action { max-width: 66rem; margin: 0 auto; padding: 48px; } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--button); background: var(--surface); color: var(--main-on-surface); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.chip.on { background: var(--main); color: var(--on-main); box-shadow: none; }
/* WEB-079: a list's Filters: its button and what's chosen, in one row that slides; how many it shows under them */
.finder-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
button.chip { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.finder-open svg { margin-right: 6px; }
.finder-dot { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--main); color: var(--on-main); font-size: 13px; }
.chip.chosen { gap: 6px; background: color-mix(in srgb, var(--main) 12%, var(--surface)); color: var(--main-on-surface); box-shadow: inset 0 0 0 1.5px var(--main); }
.finder-count { margin: 0 0 12px; font-size: 15px; }
/* Its sheet: from the foot of a phone, a panel in the middle of a computer, its button always in view */
dialog.finder { --ink: var(--on-surface); --muted: var(--muted-on-surface); --main-text: var(--main-on-surface); --headings-color: var(--surface-headings); width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--card) var(--card) 0 0; background: var(--surface); color: var(--on-surface); box-shadow: 0 -12px 40px rgba(0,0,0,.25); overflow: hidden; }
dialog.finder::backdrop { background: rgba(0,0,0,.45); }
dialog.finder form { display: flex; flex-direction: column; max-height: 88dvh; }
.finder-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px 20px; }
.finder-head h2 { flex: 1; margin: 0; font-size: 20px; color: var(--headings-color); }
.finder-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--main-on-surface); font-weight: 600; text-decoration: none; }
.finder-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.finder-body { display: grid; gap: 20px; padding: 8px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.finder fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.finder legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.pick { position: relative; display: block; min-width: 0; }
.pick.wide { grid-column: span 2; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--on-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-surface) 20%, transparent); font-weight: 600; white-space: nowrap; }
.picks.grid .pick span { padding: 0 4px; }
.pick input:checked + span { background: color-mix(in srgb, var(--main) 12%, var(--surface)); color: var(--main-on-surface); box-shadow: inset 0 0 0 2px var(--main); }
.pick input:focus-visible + span { outline: 2px solid var(--main); outline-offset: 2px; }
/* What's rarely asked for, each a row that opens in place, saying what's chosen */
.finder-rows { display: grid; }
.finder-more { border-top: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent); }
.finder-more summary { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.finder-more summary::-webkit-details-marker { display: none; }
.finder-more summary .said { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.finder-more summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.finder-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.finder-more .ticks { display: grid; padding-bottom: 8px; }
dialog.finder .tick { display: flex; align-items: center; }
.finder-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent); }
.finder-foot .button { width: 100%; }
@media (min-width: 48rem) { dialog.finder { width: min(100% - 32px, 520px); max-height: 80vh; margin: auto; border-radius: var(--card); box-shadow: 0 24px 64px rgba(0,0,0,.3); } dialog.finder form { max-height: 80vh; } }
.cards { display: grid; gap: 12px; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; padding: 16px; border-radius: var(--card); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card p { margin: 0; }
.card-picture { width: calc(100% + 32px); max-width: none; margin: -16px -16px 12px; aspect-ratio: 4 / 3; object-fit: cover; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 12px; }
.card-foot .button { margin-left: auto; }
.event-foot .button { margin-left: 0; }
.price { font-weight: 700; white-space: nowrap; }
.places { padding: 2px 10px; border-radius: 999px; background: var(--accent-band); color: var(--on-accent-band); font-size: 14px; font-weight: 600; white-space: nowrap; }
.rows, .week { display: grid; gap: 8px; }
.row-words { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.month { margin-top: 16px; }
.month h3 { margin: 0 0 8px; }
.month-grid { display: grid; gap: 8px; }
.weekday, .cal-day.blank, .cal-day:not(.on) { display: none; }
.cal-day.on { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--card); background: var(--surface); color: var(--ink); }
.cal-num { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 56px; border-radius: min(var(--card), 14px); background: var(--main-band); color: var(--on-main-band); font-family: var(--headings); font-size: 22px; font-weight: 700; line-height: 1; }
.cal-num small { margin-bottom: 3px; font-family: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cal-shows { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.cal-show { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.cal-show span { color: var(--main-text); font-size: 14px; }
@media (min-width: 48rem) {
    .month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--card); background: var(--line); }
    .weekday { display: block; padding: 8px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
    .cal-day, .cal-day.blank, .cal-day:not(.on) { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 104px; padding: 8px; border-radius: 0; background: var(--surface); color: var(--ink); }
    .cal-day.on { border-radius: 0; }
    .cal-day.past .cal-num { color: var(--muted); }
    .cal-num { width: auto; height: auto; background: none; color: var(--ink); font-size: 15px; align-items: flex-start; }
    .cal-day.on .cal-num { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--main-band); color: var(--on-main-band); }
    .cal-num small { display: none; }
    .cal-show { flex: none; min-height: 0; padding: 4px 6px; border-radius: 6px; background: var(--accent-band); color: var(--on-accent-band); font-size: 13px; line-height: 1.3; white-space: normal; }
    .cal-show span { color: inherit; font-size: 12px; }
}
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: var(--card); background: var(--surface); color: var(--ink); text-decoration: none; }
.row-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.row-time { min-width: 5rem; font-weight: 700; color: var(--main-text); white-space: nowrap; }
.day h3 { margin: 16px 0 8px; }
/* The shared list's step 1 (the canvas): every list a row each with a hairline under it, the whole row its link, two to a row on
   a computer; a name, its line and what it is each take two lines at most, so nothing is cut on a phone; its price, then
   what's left, amber while it counts down and grey once full. Or a card each, the same words under its picture */
.list-count-line { margin: -4px 0 16px; font-size: 15px; }
.list-find { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 12px; padding: 0 2px 0 14px; border-radius: min(var(--card), 12px); background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.list-find:focus-within { box-shadow: inset 0 0 0 1.5px var(--main); }
.list-find svg { flex: none; }
.list-find input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; }
.list-find input::-webkit-search-cancel-button { appearance: none; }
.list-clear { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--muted); }
.list-clear[hidden] { display: none; }
.list-clear span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.list-chips { margin-bottom: 8px; scrollbar-width: none; }
/* APT-094: Book with, Anyone then each who takes clients online, a face and a first name each, sliding sideways within itself
   when there are more than a phone holds; the one chosen ringed */
.book-with { margin: 0 0 16px; min-width: 0; }
.book-with-title { margin: 0 0 10px; color: var(--muted); font-family: var(--text); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.book-with-people { display: flex; gap: 6px; margin: 0 -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.book-with-person { display: flex; flex: none; flex-direction: column; align-items: center; gap: 6px; width: 68px; color: var(--ink); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.book-with-face { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 28px; object-fit: cover; background: var(--accent-band); color: var(--on-accent-band); font-weight: 700; }
.book-with-face.anyone { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.book-with-person[aria-current] { color: var(--main-text); font-weight: 700; }
.book-with-person[aria-current] .book-with-face { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--main); }
.book-with-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-with-line { margin: 10px 0 0; font-size: 15px; }
.list-count { margin: 4px 0 0; font-size: 15px; }
.list-group + .list-group { margin-top: 28px; }
.list-chips + .list-group, .finder-count + .list-group { margin-top: 16px; }
.list-heading { margin: 0 0 2px; font-size: calc(1.0625rem * var(--scale)); }
.list-heading span { color: var(--muted); font-family: var(--text); font-weight: 500; letter-spacing: 0; text-transform: none; }
.list-rows { display: grid; }
.list-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.list-words { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.list-name, .list-line, .list-about, .list-price { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.list-name { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.list-line, .list-about { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.list-price { color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.list-left.few { color: color-mix(in srgb, #a65a00 85%, var(--ink)); }
.list-left.none { color: var(--muted); font-weight: 500; }
.list-picture { flex: none; width: 72px; height: 72px; border-radius: min(var(--card), 12px); object-fit: cover; }
.list-chevron { flex: none; color: var(--muted); opacity: .7; }
.list-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--main-text); font-weight: 600; text-decoration: none; }
.list-card { gap: 2px; color: var(--ink); text-decoration: none; }
@media (min-width: 48rem) { .list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } .list-row { min-height: 80px; padding: 16px 0; } .list-picture { width: 76px; height: 76px; } .list-heading { font-size: calc(1.125rem * var(--scale)); }
    .list-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 16px; } .list-top .list-count-line { margin: 0; } .list-find { flex: 0 1 340px; margin: 0 0 0 auto; } }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: var(--card); background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.person img, .initials { width: 80px; height: 80px; border-radius: 40px; object-fit: cover; }
.initials { display: flex; align-items: center; justify-content: center; background: var(--accent-band); color: var(--on-accent-band); font-weight: 800; font-size: 1.25rem; }
.person-name { max-width: 100%; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* APT-094: someone booked with from the team, their card then Book with under it; a teacher's page leads to it too */
.person-only { display: contents; }
.person-with { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.person-with .person { flex: 1; }
.person-book { width: 100%; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; }
.person-page-book { margin-top: 8px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--card) / 1.5); }
.gallery figcaption { font-size: 14px; color: var(--muted); padding-top: 4px; }
.gallery.slideshow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.gallery.slideshow figure { flex: 0 0 85%; scroll-snap-align: start; }
.gallery.slideshow img { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery.slideshow figure { flex-basis: 45%; } }
.quotes { display: grid; gap: 12px; }
@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote { margin: 0; padding: 20px; border-radius: var(--card); background: var(--surface); }
.quote blockquote { margin: 0 0 8px; line-height: 1.4; white-space: pre-line;}
.quote figcaption { color: var(--muted); font-weight: 600; }
.questions details { border-radius: var(--card); background: var(--surface); margin-bottom: 8px; }
.questions summary { display: flex; align-items: center; min-height: 56px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.questions details p { padding: 0 16px 16px; white-space: pre-line; }
.contact { display: grid; gap: 4px; align-content: start; }
.contact-parts { display: grid; gap: 24px; }
@media (min-width: 48rem) { .asking .contact-parts:has(> .contact) { grid-template-columns: 1fr 1.25fr; } }
.ask, .ask-thanks { display: grid; gap: 14px; max-width: 36rem; padding: 18px 16px; border-radius: var(--card); background: var(--surface); }
.ask-column { display: grid; gap: 14px; max-width: 36rem; min-width: 0; }
.ask-title { font-size: 2.125rem; }
.ask-who { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 4px; font-size: 15px; color: var(--muted); }
.ask-face { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; background: var(--accent-band); color: var(--on-accent-band); font-size: 12px; font-weight: 800; }
.ask label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ask input, .ask select, .ask textarea { min-height: 48px; width: 100%; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--main) 14%, #fff); border-radius: 14px; background: color-mix(in srgb, var(--ground) 45%, #fff); font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); }
.ask-about { min-width: 0; margin: 0; padding: 0; border: 0; }
.ask-about legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 700; }
.ask-chips { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.ask .ask-chip { position: relative; display: block; flex: none; }
.ask .ask-chip input { position: absolute; inset: 0; min-height: 0; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ask-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--main) 18%, #fff); border-radius: 999px; background: var(--surface); color: var(--main-on-surface); font-size: 15px; font-weight: 700; white-space: nowrap; }
.ask-chip input:checked + span { border-color: var(--main-band); background: var(--main-band); color: var(--on-main-band); }
.ask-chip input:checked + span::before { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.ask-chip input:focus-visible + span { outline: 2px solid var(--main); outline-offset: 2px; }
.ask textarea { resize: vertical; }
/* The box is drawn; the real one lies over the whole row, so the row is what's tapped */
:is(.ask, .finder) .tick { position: relative; flex-direction: row; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-weight: 500; color: var(--ink); }
:is(.ask, .finder) .tick input { position: absolute; inset: 0; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
:is(.ask, .finder) .box { flex: none; width: 24px; height: 24px; border: 2px solid rgba(0,0,0,.35); border-radius: 6px; background: var(--surface); }
:is(.ask, .finder) .tick input:checked + .box { border-color: var(--main); background: var(--main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; }
:is(.ask, .finder) .tick input:focus-visible + .box { outline: 2px solid var(--main); outline-offset: 2px; }
.ask .button { width: 100%; }
.ask .small { font-size: 14px; text-align: center; }
.ask .small a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; color: var(--main-text); }
.ask .refused { padding: 10px 12px; border-radius: 12px; background: #fdecea; color: #a61b1b; font-weight: 600; }
.ask-trap { position: absolute; left: -10000px; width: 240px; }
.ask-thanks h3 { margin: 0; }
.class-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.class-actions.trial { margin-bottom: 16px; }
.button.light-line { background: var(--surface); color: var(--main-on-surface); box-shadow: inset 0 0 0 2px var(--main-on-surface); }
.contact > a, .place a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
.place { display: flex; flex-direction: column; padding-top: 8px; }
.class-page img.cover, .side-page img.cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--card); margin-bottom: 16px; }
/* On a bigger screen the photo leads without pushing the name below the fold: as wide as the page, a band of it */
@media (min-width: 48rem) { .class-page img.cover, .side-page img.cover { aspect-ratio: 21 / 9; max-height: 440px; } }
.facts { display: grid; gap: 4px; margin-bottom: 16px; }
.facts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
.description { white-space: pre-line; }
.post-card { color: inherit; text-decoration: none; gap: 4px; }
.post-card strong { color: var(--main-text); font-family: var(--headings); font-size: 1.125rem; line-height: 1.25; }
.post-date { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* SOC-015: a post's photos in its shape: on a card the first, as a class's picture; on its page, one after another to swipe */
.post-card .post-photo { width: calc(100% + 32px); max-width: none; margin: -16px -16px 12px; object-fit: cover; }
.post-photo.portrait { aspect-ratio: 4 / 5; }
.post-photo.square { aspect-ratio: 1; }
.post-photo.wide { aspect-ratio: 1.91; }
.post-photos { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.post-photos .post-photo { flex: 0 0 calc(100% - 24px); scroll-snap-align: center; border-radius: var(--card); object-fit: cover; }
.post-photos .post-photo:only-child { flex-basis: 100%; }
.post-video { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto 16px; border-radius: var(--card); background: #000; }
.post-page { max-width: 44rem; }
.side-page { display: grid; gap: 16px; align-items: start; }
.side-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.side-card .places { justify-self: start; align-self: flex-start; }
.camp-register { justify-content: center; margin: 4px 0 12px; }
.side-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.08); }
.side-row .button { flex-shrink: 0; }
.side-row .left { display: block; font-size: .9rem; font-weight: 700; color: #15803D; }
.side-row .dancing { display: block; font-size: .9rem; font-weight: 700; color: var(--main-text); }
.side-row .later { flex-shrink: 0; white-space: nowrap; }
.sold-out { flex-shrink: 0; color: #9A3412; }
.event-about { white-space: pre-line; }
.party-price { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; }
.party-included { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.party-book-top { margin-bottom: 16px; }
@media (min-width: 64rem) { .party-book-top { display: none; } }
.presale { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.presale p { margin: 0; }
@media (min-width: 64rem) { .side-page { grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; } }
.post-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
/* The reach audit's FQ-EP-11: Find my tickets, under the events and an event's shows, a link a thumb reaches */
.find-tickets { margin: 16px 0 0; }
.find-tickets a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.post-link { margin: 8px 0 24px; gap: 2px; }
.post-more { margin-top: 24px; }
.list-plain { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 4px; }
footer { margin: 40px 8px 8px; padding: 24px; border-radius: var(--card); background: var(--main); color: var(--on-main); }
.footer-name { font-family: var(--headings); font-size: 1.375rem; font-weight: var(--weight); }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; column-gap: 16px; padding-top: 8px; }
footer .footer-menu { padding-top: 0; }
footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; white-space: nowrap; }
@media (min-width: 48rem) { footer { max-width: 66rem; margin: 48px auto 16px; } }
/* The website system: a section's ground, width, alignment and room; the header's, footer's and bars' choices */
.sec { position: relative; padding: calc(var(--gap) / 2) 0; overflow: hidden; }
main > .sec:first-child { padding-top: 8px; }
.sec.p-small { padding: calc(var(--gap) / 4) 0; } .sec.p-large { padding: var(--gap) 0; } .sec.p-none { padding: 0; }
@media (min-width: 48rem) { .sec { padding: calc(var(--gap) * .75) 0; } .sec.p-large { padding: calc(var(--gap) * 1.5) 0; } }
.sec.bg-alt { background: var(--alt); color: var(--on-alt); --button-bg: var(--btn-alt); --on-button: var(--on-btn-alt); --headings-color: var(--alt-headings); --kicker-text: var(--kicker-on-alt); --accent-text: var(--accent-on-alt); --main-text: var(--main-on-alt); --ink: var(--on-alt); --muted: var(--muted-on-alt); --stars: var(--stars-on-alt); }
.sec.bg-main { background: var(--main-band); color: var(--on-main-band); --headings-color: var(--main-headings); --ink: var(--on-main-band); --muted: var(--on-main-band); }
.sec.bg-accent { background: var(--accent-band); color: var(--on-accent-band); --headings-color: var(--accent-headings); --ink: var(--on-accent-band); --muted: var(--on-accent-band); }
.sec.bg-dark { background: var(--dark-band); color: var(--on-dark-band); --headings-color: var(--dark-headings); --ink: var(--on-dark-band); --muted: var(--on-dark-band); }
.sec.bg-picture, .sec.bg-video { color: #fff; --headings-color: #fff; --ink: #fff; --muted: rgba(255,255,255,.85); min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.sec > img.behind, .sec > video.behind { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec .shade { position: absolute; inset: 0; background: #000; }
.sec > section { position: relative; }
/* WEB-059: on any coloured band or picture, a card, a quote, a row or a day is the page's surface, with the words that read on it */
.sec:is(.bg-main, .bg-dark, .bg-accent, .bg-gradient, .bg-own, .bg-picture, .bg-video) :is(.card, .quote, .row, .cal-day, .weekday, .hours-place, .ask, .ask-thanks) {
    --stars: var(--stars-on-surface); --ink: var(--on-surface); --muted: var(--muted-on-surface); --main-text: var(--main-on-surface); --headings-color: var(--surface-headings);
    color: var(--on-surface); background: var(--surface);
}
.sec.w-full .wrap { max-width: none; padding: 0 24px; }
.sec.a-centre .wrap, .sec.a-centre .words { text-align: center; }
.sec.a-centre .wrap > h2::after, .sec.a-centre .words > h2::after { margin-left: auto; margin-right: auto; }
.sec.a-centre .lead, .sec.a-centre .intro { margin-left: auto; margin-right: auto; }
.sec.h-screen { min-height: 100svh; } .sec.h-tall { min-height: 70svh; } .sec.h-short { min-height: 240px; }
.sec.w-full > .hero, .sec.w-full > .action { margin: 0; border-radius: 0; max-width: none; }
.sec.w-full > .hero.behind { width: 100%; }
.sec.h-screen > .hero.behind, .sec.h-screen > .hero.split { min-height: 100svh; }
.sec.h-tall > .hero.behind, .sec.h-tall > .hero.split { min-height: 70svh; }
.hero.over { background: none; padding: 24px 16px; max-width: 68rem; margin: 0 auto; width: 100%; }
.hero.over h1, .hero.over .lead { color: #fff; }
@media (min-width: 48rem) { .hero.over { padding: 48px 24px; } .hero.over h1 { font-size: calc(4rem * var(--scale)); } }
.hero.slideshow img { opacity: 0; transition: opacity 1s; }
.hero.slideshow img.on { opacity: 1; }
.hero.split { display: grid; background: var(--main); color: var(--on-main); }
.hero.split h1, .hero.split .lead { color: var(--on-main); }
.hero.split .words { padding: 32px 24px; align-self: center; }
.hero.split img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
@media (min-width: 48rem) { .hero.split { grid-template-columns: 1fr 1fr; min-height: 520px; max-width: 68rem; margin: 0 auto; } .hero.split .words { padding: 48px; } }
.text-picture.above { display: block; } .text-picture.above img { aspect-ratio: 16 / 7; }
.text-picture.words { display: block; max-width: 46rem; }
.sec.a-centre .text-picture.words { margin: 0 auto; }
.lead.intro { margin-bottom: 20px; }
.gallery.masonry { display: block; columns: 2; column-gap: 8px; }
.gallery.masonry figure { break-inside: avoid; margin-bottom: 8px; }
.gallery.masonry img { aspect-ratio: auto; }
.gallery.row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery.row figure { flex: 0 0 60%; scroll-snap-align: start; }
@media (min-width: 48rem) { .gallery.masonry { columns: 4; } .gallery.row figure { flex-basis: 24%; } }
.quotes.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.quotes.carousel .quote { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 48rem) { .quotes.carousel .quote { flex-basis: 40%; } }
.quotes.single { display: block; max-width: 46rem; margin: 0 auto; text-align: center; }
.quotes.single .quote { background: none; padding: 0; }
.quotes.single blockquote { font-size: calc(1.75rem * var(--scale)); }
.stars { display: block; letter-spacing: 2px; margin-bottom: 6px;}
.quote-from { font-weight: 400; }
@media (min-width: 48rem) { .questions.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; } }
.features, .tiers, .team { display: grid; gap: 16px; }
@media (min-width: 48rem) { .features.n2, .tiers.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .features.n3, .tiers.n3, .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } .features.n4, .tiers.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .team.list { grid-template-columns: 1fr; } }
.feature { display: flex; flex-direction: column; gap: 6px; }
.features.cards .feature { padding: 20px; border-radius: var(--card); background: var(--surface); color: var(--ink); }
.features .feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--card) / 1.5); margin-bottom: 6px; }
.features.cards .feature img { width: 56px; height: 56px; aspect-ratio: 1; object-fit: contain; border-radius: 0; }
.feature-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 1.5rem; font-weight: 800; }
.sec.a-centre .feature { align-items: center; }
.feature h3, .tier h3, .member h3 { margin: 4px 0 0; }
.feature p { margin: 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: center; }
@media (min-width: 48rem) { .stats.n3 { grid-template-columns: repeat(3, 1fr); } .stats.n4 { grid-template-columns: repeat(4, 1fr); } }
.stat strong { display: block; font-family: var(--headings); font-weight: var(--weight); font-size: calc(2.75rem * var(--scale)); line-height: 1.1; color: var(--headings-color); }
.stat span { color: var(--muted); font-weight: 600; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; }
.logos img { max-height: 56px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.logos span { font-weight: 700; }
/* Badges and sponsors in their own colours: a picture size shows logos as they are, that big */
.sec:is(.pictures-small, .pictures-medium) .logos img { filter: none; opacity: 1; }
.sec.pictures-small .logos img { max-height: 96px; max-width: 180px; }
.sec.pictures-medium .logos img { max-height: 160px; max-width: 260px; }
.logos.grid { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.steps li { counter-increment: step; padding: 20px; border-radius: var(--card); background: var(--surface); color: var(--ink); }
.steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 999px; background: var(--main); color: var(--on-main); font-weight: 800; }
.steps p { margin: 0; color: var(--muted); }
.tier { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--card); background: var(--surface); color: var(--ink); }
.tier-price strong { font-family: var(--headings); font-size: calc(2rem * var(--scale)); color: var(--headings-color); }
.tier ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.tier .button { margin-top: auto; }
.table-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table.rates { width: 100%; border-collapse: collapse; background: var(--surface); color: var(--ink); border-radius: var(--card); overflow: hidden; font-size: 15px; }
table.rates th, table.rates td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.rates thead th { background: var(--main); color: var(--on-main); }
.video-part .frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--card); overflow: hidden; background: #000; }
.video-part iframe, .video-part video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 48rem) { .video-part.beside { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; } }
.map { border-radius: var(--card); overflow: hidden; }
/* WEB-068: what another site serves, held until a visitor taps it, then in its place */
.held { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--surface); }
.held.map { height: 360px; } .held.embed { min-height: 560px; border-radius: var(--card); }
.video-part .held { position: absolute; inset: 0; background: var(--dark-band); }
.held.shown { display: block; }
.held iframe, .held video { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.hold { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 12px 22px; border: 0; border-radius: var(--button); background: var(--btn-main); color: var(--on-btn-main); font: inherit; font-weight: 700; cursor: pointer; }
.hold small { font-size: 13px; font-weight: 500; }
.member { display: flex; flex-direction: column; gap: 10px; }
.member img, .member .initials { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--card); object-fit: cover; }
.team.list .member { flex-direction: row; } .team.list .member img, .team.list .member .initials { width: 96px; flex: none; }
.member .role { margin: 0; color: var(--muted); font-weight: 600; }
.member .bio { margin: 6px 0 0; }
.newsletter { display: grid; gap: 16px; align-items: center; }
@media (min-width: 48rem) { .newsletter { grid-template-columns: 1fr 1fr; } }
.signup { display: flex; flex-wrap: wrap; gap: 8px; }
.signup p { flex-basis: 100%; margin: 0; }
.signup input:not([type=hidden]) { flex: 1 1 12rem; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--button); font: inherit; font-size: 16px; background: #fff; color: #1f1b18; }
.banner { overflow: hidden; white-space: nowrap; padding: 14px 0; font-family: var(--headings); font-weight: var(--weight); text-transform: var(--heading-case); letter-spacing: var(--heading-spacing); font-size: 1.25rem; }
.banner-run { display: inline-flex; gap: 48px; animation: banner 40s linear infinite; }
@keyframes banner { to { transform: translateX(-50%); } }
/* Still for a visitor who'd rather no motion, and the banner held while pointed at */
.banner:hover .banner-run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .banner-run { animation: none; } }
.count { display: flex; gap: 12px; margin: 8px 0 16px; }
.sec.a-centre .count { justify-content: center; }
.count span { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; padding: 12px; border-radius: var(--card); background: var(--surface); color: var(--ink); font-size: 14px; }
.count strong { font-family: var(--headings); font-size: 2rem; line-height: 1.1; }
.sec.a-centre .countdown { text-align: center; }
.announce { display: block; margin: 0; padding: 10px 16px; background: var(--accent); color: var(--on-accent); text-align: center; font-weight: 700; font-size: 15px; text-decoration: none; }
.topbar { background: var(--dark); color: var(--on-dark); font-size: 14px; }
.topbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; max-width: 68rem; margin: 0 auto; padding: 0 16px; min-height: 36px; }
.topbar a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: none; }
.topbar-social { margin-left: auto; display: flex; gap: 12px; }
@media (max-width: 47.99rem) { .topbar-hours, .topbar-social { display: none; } }
.header-sticky .site-header { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--line); }
.site-header.over { position: absolute; left: 0; right: 0; z-index: 20; background: transparent; box-shadow: none; }
.header-sticky .site-header.over { position: absolute; top: auto; }
.site-header.over .brand, .site-header.over .menu-wide a:not(.button), .site-header.over .menu-phone summary { color: #fff; }
.site-header.over + main > .sec.under { padding-top: 0; }
.sec.under .hero.over, .sec.under > section { padding-top: 96px; }
.menu-phone summary { color: var(--main-text); }
.header-button { min-height: 44px; margin-left: 8px; padding: 0 18px; }
@media (min-width: 48rem) {
    .header-centred .top { flex-direction: column; justify-content: center; padding: 12px 16px; }
    .header-centred .brand { flex: none; }
    .header-centred .brand img { height: 56px; }
    .header-split .top { justify-content: center; }
    .header-split .brand { flex: none; flex-direction: column; margin: 0 24px; }
    .header-split .brand img { height: 56px; }
    .header-split .menu-wide { flex: 1; }
    .header-split .menu-wide a:not(.button) { padding: 0 8px; }
    @media (max-width: 90rem) { body.header-split .menu-wide a:not(.button) { padding: 0 6px; font-size: 14px; letter-spacing: .03em; } .header-split .brand { margin: 0 16px; } }
    .header-split .split-left { justify-content: flex-end; }
}
.site-footer .footer-in { display: grid; gap: 16px; }
.footer-button { margin-top: 12px; }
.footer-menu, .footer-contact { display: flex; flex-direction: column; }
.footer-contact p { margin: 0; }
.footer-dark footer { background: var(--dark); color: var(--on-dark); }
.footer-light footer { color: var(--ink);}
@media (min-width: 48rem) {
    .footer-columns .footer-more { grid-column: 1 / -1; }
}
.footer-centred .footer-in { justify-items: center; text-align: center; }
.footer-centred .footer-menu { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 16px; }
.footer-centred .footer-contact { align-items: center; }
.phone-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--button); background: var(--main); color: var(--on-main); font-weight: 800; text-decoration: none; text-transform: var(--button-case); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body:has(.phone-bar) { padding-bottom: 76px; }
@media (min-width: 48rem) { .phone-bar { display: none; } body:has(.phone-bar) { padding-bottom: 0; } }
.kicker { margin: 0 0 6px; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker-text); }
.hero .kicker, .hero.over .kicker { color: inherit; }
.hero.behind .kicker, .hero.over .kicker { color: #fff; }
.logo-large .brand img { height: 64px; } .logo-larger .brand img { height: 88px; }
.logo-only .brand:has(img) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.name-only .brand img { display: none; }
.menu-upper .menu-wide a:not(.button), .menu-upper .menu-phone nav a { text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.features.pictures h3, .features.plain h3 { font-size: calc(1.5rem * var(--scale)); margin-top: 8px; }
.features .button { align-self: flex-start; margin-top: 8px; }
.sec.a-centre .features .button { align-self: center; }
@media (min-width: 48rem) { .quotes.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 4rem; line-height: .8; color: var(--accent); }
.quotes.single .quote::before { font-size: 6rem; }
.footer-columns footer, .footer-centred footer { margin: 48px 0 0; max-width: none; border-radius: 0; padding: 40px 24px 32px; }
.footer-columns .footer-in, .footer-centred .footer-in { max-width: 68rem; margin: 0 auto; }
.text-picture.below { flex-direction: column-reverse;} .text-picture.below img { aspect-ratio: 16 / 7;}
.text-picture img { max-height: 640px; }
/* Round two: dropdowns, a section's own colour and shape, words over a light picture, links as words, the header's ground */
.drop { position: relative; }
.drop > a { gap: 4px; }
.drop-menu { position: absolute; top: 100%; left: 0; z-index: 30; display: none; min-width: 14rem; padding: 8px; border-radius: var(--card); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.drop:hover .drop-menu, .drop:focus-within .drop-menu { display: grid; }
.drop-menu a { color: var(--ink) !important; white-space: nowrap; }
.menu-phone .menu-child { padding-left: 28px; font-weight: 500; }
.sec.bg-own { background: var(--own); color: var(--on-own); --headings-color: var(--on-own); --ink: var(--on-own); --muted: var(--on-own); }
.sec.words-dark { color: #1f1b18; --headings-color: var(--main); --ink: #1f1b18; --muted: #3d3833; }
.sec.words-dark .hero.over h1, .sec.words-dark .hero.over .lead, .sec.words-dark .hero .kicker { color: inherit; }
.sec.edge-wave { padding-bottom: calc(var(--gap) / 2 + 40px); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 39px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v12c-150 34-300 34-450 10S450-6 300 12 150 40 0 22Z'/%3E%3C/svg%3E") bottom / 100% 40px no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 39px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v12c-150 34-300 34-450 10S450-6 300 12 150 40 0 22Z'/%3E%3C/svg%3E") bottom / 100% 40px no-repeat; }
.sec.edge-slant { padding-bottom: calc(var(--gap) / 2 + 40px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
.sec.edge-curve { padding-bottom: calc(var(--gap) / 2 + 40px); clip-path: ellipse(120% 100% at 50% 0); }
.sec.edge-wave + .sec, .sec.edge-slant + .sec, .sec.edge-curve + .sec { margin-top: -40px; padding-top: calc(var(--gap) / 2 + 40px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.sec.a-centre .actions { justify-content: center; }
.hero .actions .button { margin-top: 0; }
.more-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--headings-color); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.more-link::after { content: "\2192"; margin-left: 6px; }
.hero.behind .more-link, .hero.over .more-link, .hero.none .more-link, .hero.split .more-link { color: #fff; }
.no-rule .wrap > h2::after, .no-rule .words > h2::after { display: none; }
.accent-word { font-family: var(--accent-face); font-weight: inherit; text-transform: inherit; letter-spacing: inherit; }
.header-on-main .site-header { background: var(--main); } .header-on-dark .site-header { background: var(--dark); } .header-on-accent .site-header { background: var(--accent); }
.header-on-main .site-header:not(.over) .brand, .header-on-main .site-header:not(.over) .menu-wide > a:not(.button), .header-on-main .site-header:not(.over) .drop > a, .header-on-main .menu-phone summary { color: var(--on-main); }
.header-on-dark .site-header:not(.over) .brand, .header-on-dark .site-header:not(.over) .menu-wide > a:not(.button), .header-on-dark .site-header:not(.over) .drop > a, .header-on-dark .menu-phone summary { color: var(--on-dark); }
.header-on-accent .site-header:not(.over) .brand, .header-on-accent .site-header:not(.over) .menu-wide > a:not(.button), .header-on-accent .site-header:not(.over) .drop > a, .header-on-accent .menu-phone summary { color: var(--on-accent); }
.site-header.over .drop > a { color: #fff; }
.quotes.plain { display: grid; gap: 28px; } .quotes.plain .quote { background: none; padding: 0; text-align: center; max-width: 44rem; margin: 0 auto; }
.quotes.plain blockquote { font-family: var(--text); font-style: italic; font-size: 1.125rem; }
.quote blockquote { font-family: var(--text); font-size: 1.0625rem; }
.quotes.single blockquote { font-family: var(--headings); }
.sec.w-full .text-picture.above img, .sec.w-full .text-picture.below img { width: calc(100% + 48px); max-width: none; margin-left: -24px; border-radius: 0; max-height: 80vh; }
.footer-logo { height: 64px; width: auto; margin-bottom: 8px; }
.footer-title { display: block; margin-bottom: 4px; font-family: var(--headings); font-weight: var(--weight); text-transform: var(--heading-case); letter-spacing: var(--heading-spacing); font-size: 15px; }
.footer-more { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.footer-more .social { gap: 8px; }
.footer-copy { margin-left: auto; font-size: 14px; }
.footer-light footer { background: var(--ground); border-top: 1px solid var(--line); }
.menu-wide a.button { color: var(--on-button); }
.sec.bg-main .prose a, .sec.bg-dark .prose a, .sec.bg-own .prose a, .sec.bg-accent .prose a, .sec.bg-picture .prose a, .sec.bg-video .prose a { color: inherit; text-decoration: underline; }
.sec.w-full > .hero.behind .words, .sec.w-full > .hero.over { max-width: 68rem; margin-left: auto; margin-right: auto; width: 100%; }
.sec:not(.bg-ground) > .action { background: none; color: inherit; padding-left: 0; padding-right: 0; }
.sec:not(.bg-ground) > .action h2 { color: var(--headings-color); }
@media (min-width: 48rem) { .sec[data-columns="set"] .features, .sec[data-columns="set"] .tiers, .sec[data-columns="set"] .team, .sec[data-columns="set"] .gallery:not(.row):not(.slideshow):not(.masonry), .sec[data-columns="set"] .quotes:not(.carousel):not(.single), .sec[data-columns="set"] .stats { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); } .sec[data-columns="set"] .gallery.masonry { columns: var(--columns); } }
.tiers.list { display: grid; gap: 0; grid-template-columns: 1fr !important; max-width: 52rem; }
.sec.a-centre .tiers.list { margin: 0 auto; text-align: left; }
.tiers.list .tier { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.tiers.list .tier h3 { margin: 0; font-size: calc(1.125rem * var(--scale)); }
.tiers.list .tier-price { margin: 0; grid-column: 2; grid-row: 1; text-align: right; }
.tiers.list .tier-price strong { font-size: 1.125rem; }
.tiers.list .tier ul { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; color: var(--muted); }
.tiers.list .tier .button { grid-column: 1 / -1; justify-self: start; }
.sec.a-centre .prose ul, .sec.a-centre .prose ol { list-style-position: inside; padding-left: 0; }
.countdown h2::after { margin-left: auto; margin-right: auto; }
.footer-columns footer, .footer-centred footer { margin-top: 0; }
.footer-columns main, .footer-centred main { padding-bottom: 40px; }
.footer-columns main:has(> .sec:last-child:not(.bg-ground)), .footer-centred main:has(> .sec:last-child:not(.bg-ground)) { padding-bottom: 0; }
@media (max-width: 47.99rem) { .logo-large .brand img { height: 52px; } .logo-larger .brand img { height: 60px; } }
.site-header.over .topbar { background: rgba(0,0,0,.35); }
.sec.bg-gradient { background: linear-gradient(135deg, var(--main-band), var(--accent-band)); --headings-color: var(--on-main);}
.sec.heading-large h2, .sec.heading-large h1 { font-size: calc(2.5rem * var(--scale)); }
.sec.heading-huge h2, .sec.heading-huge h1 { font-size: calc(3.25rem * var(--scale)); line-height: 1.02; }
@media (min-width: 48rem) { .sec.heading-large h2, .sec.heading-large h1 { font-size: calc(3.5rem * var(--scale)); } .sec.heading-huge h2, .sec.heading-huge h1 { font-size: calc(5.5rem * var(--scale)); } }
.sec.shape-circle .feature img, .sec.shape-circle .member img, .sec.shape-circle .gallery img, .sec.shape-circle .text-picture img { aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.sec.shape-circle .feature img, .sec.shape-circle .member img { width: 70%; align-self: center; }
.sec.shape-square .feature img, .sec.shape-square .member img, .sec.shape-square .gallery img, .sec.shape-square .text-picture img { aspect-ratio: 1; object-fit: cover; }
.sec.shape-portrait .feature img, .sec.shape-portrait .member img, .sec.shape-portrait .gallery img, .sec.shape-portrait .text-picture img { aspect-ratio: 4 / 5; object-fit: cover; }
.sec.shape-whole .feature img, .sec.shape-whole .member img, .sec.shape-whole .gallery img, .sec.shape-whole .text-picture img, .sec.shape-whole .hero img { aspect-ratio: auto; object-fit: contain; height: auto; }
.features.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.features.carousel .feature { flex: 0 0 80%; scroll-snap-align: start; padding: 20px; border-radius: var(--card); background: var(--surface); color: var(--ink); }
@media (min-width: 48rem) { .features.carousel .feature { flex-basis: calc((100% - 32px) / 3); } }
.form-part { display: grid; gap: 16px; }
@media (min-width: 48rem) { .form-part.beside { grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; } }
.own-form { max-width: none;}
.ask-ticks { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; } .ask-ticks legend { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sec.bg-main .tier, .sec.bg-dark .tier, .sec.bg-own .tier, .sec.bg-accent .tier, .sec.bg-gradient .tier, .sec.bg-picture .tier, .sec.bg-video .tier,
.sec.bg-main .features.cards .feature, .sec.bg-dark .features.cards .feature, .sec.bg-own .features.cards .feature, .sec.bg-accent .features.cards .feature, .sec.bg-gradient .features.cards .feature,
.sec.bg-main .features.carousel .feature, .sec.bg-dark .features.carousel .feature, .sec.bg-own .features.carousel .feature,
.sec.bg-main .steps li, .sec.bg-dark .steps li, .sec.bg-own .steps li, .sec.bg-accent .steps li, .sec.bg-gradient .steps li,
.sec.bg-main .count span, .sec.bg-dark .count span, .sec.bg-own .count span, .sec.bg-main .questions details, .sec.bg-dark .questions details, .sec.bg-own .questions details {
    --ink: var(--on-surface); --muted: var(--muted-on-surface); --main-text: var(--main-on-surface); --headings-color: var(--surface-headings); color: var(--on-surface);
}
body:has(.site-header.over .topbar) .sec.under .hero.over, body:has(.site-header.over .topbar) .sec.under > section { padding-top: 136px; }
.hero.beside.right img { order: 2; }
@media (max-width: 47.99rem) { .hero.beside.right img { order: 0; } }
.button.outline { background: transparent; color: var(--headings-color); box-shadow: inset 0 0 0 2px currentColor; }
.hero.behind .button.outline, .hero.over .button.outline, .hero.none .button.outline, .hero.split .button.outline { color: #fff; }
.feature-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--headings-color); }
.sec.a-centre .feature-icon { align-self: center; }
.sec.cards-outlined .feature, .sec.cards-outlined .tier, .sec.cards-outlined .quote, .sec.cards-outlined .steps li, .sec.cards-outlined .card, .sec.cards-outlined .questions details { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: inherit; --ink: inherit; }
.sec.cards-soft .feature, .sec.cards-soft .tier, .sec.cards-soft .quote, .sec.cards-soft .steps li, .sec.cards-soft .card, .sec.cards-soft .questions details { background: var(--alt); color: var(--on-alt); --ink: var(--on-alt); --muted: var(--muted-on-alt); --main-text: var(--main-on-alt); --stars: var(--stars-on-alt); }
.sec.cards-none .feature, .sec.cards-none .tier, .sec.cards-none .quote, .sec.cards-none .steps li, .sec.cards-none .card { background: none; padding-left: 0; padding-right: 0; color: inherit; }
.sec.cards-outlined .features.pictures .feature, .sec.cards-soft .features.pictures .feature { padding: 0 0 20px; overflow: hidden; border-radius: var(--card); }
.sec.cards-outlined .features.pictures .feature > :not(img), .sec.cards-soft .features.pictures .feature > :not(img) { margin-left: 20px; margin-right: 20px; }
.sec.cards-outlined .features.pictures .feature img, .sec.cards-soft .features.pictures .feature img { border-radius: 0; }
.stars { color: var(--stars); }
.hero.over .words, .hero.behind .words { max-width: 48rem; }
.sec.a-centre .hero.over .words, .sec.a-centre .hero.behind .words { margin-left: auto; margin-right: auto; }
.menu-wide a.header-social { padding: 0 8px; }
/* The cart's count, on its icon in the header, and on a phone beside the menu while it holds something: drawn as the badge's
   own content, its words in the link's label */
.cart { position: relative; }
.cart-count::after { content: attr(data-count); }
.cart-count { position: absolute; top: 4px; right: 0; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; }
.cart-phone { display: none; }
@media (max-width: 47.99rem) {
  .cart-phone { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; margin-left: auto; color: var(--main-text); }
  .cart-phone + .menu-phone { margin-left: 0; }
}
.site-header.over .cart-phone { color: #fff; }
.header-on-main .site-header:not(.over) .cart-phone { color: var(--on-main); }
.header-on-dark .site-header:not(.over) .cart-phone { color: var(--on-dark); }
.header-on-accent .site-header:not(.over) .cart-phone { color: var(--on-accent); }
.sec.a-centre .action { text-align: center; }
.sec.a-centre .action h2::after { margin-left: auto; margin-right: auto; }
.action p, .form-part .intro { white-space: pre-line; }
.sec .quotes.plain .quote, .sec .quotes.single .quote { background: none; color: inherit; --ink: inherit; --muted: inherit; }
.quotes.plain .quote::before { font-size: 3rem; margin-top: 8px; }
.footer-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.footer-centred .footer-about { display: flex; flex-direction: column; align-items: center; }
.footer-centred .footer-menu .footer-title, .footer-centred .footer-contact .footer-title { flex-basis: 100%; text-align: center; }
.accent-italic .accent-word { font-style: italic; }
.accent-colour .accent-word { color: var(--accent-large); }
.kicker-accent .kicker { color: var(--accent-text); }
.kicker-face .kicker { font-family: var(--accent-face); font-weight: 400; font-size: 1.75rem; text-transform: none; letter-spacing: 0; }
.sec .tiers.list .tier, .sec.cards-none .tier { color: inherit; --headings-color: inherit; --ink: inherit; --muted: inherit; }
.sec .tiers.list .tier-price strong { color: inherit; }
.sec.w-full > .action { padding-left: 24px; padding-right: 24px; }
.menu-wide { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
.has-accent-face .accent-word { font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 47.99rem) { .kicker-face .kicker { font-size: 1.375rem; } .sec.heading-large h2, .sec.heading-large h1 { font-size: calc(2.125rem * var(--scale)); } .sec.heading-huge h2, .sec.heading-huge h1 { font-size: calc(2.5rem * var(--scale)); } }
.sec.heading-small h2, .sec.heading-small h1 { font-size: calc(1.375rem * var(--scale)); }
.features.carousel .feature h3 { font-size: calc(1.25rem * var(--scale)); }
.sec.cards-white .feature, .sec.cards-white .tier, .sec.cards-white .quote, .sec.cards-white .steps li, .sec.cards-white .card, .sec.cards-white .questions details { background: #fff; color: #1f1b18; --ink: #1f1b18; --muted: #57504a; --headings-color: var(--card-headings); padding: 20px; border-radius: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sec.words-at-top > .hero.over, .sec.words-at-top > .hero.behind { align-self: flex-start; align-items: flex-start; }
.sec.words-at-top { justify-content: flex-start; }
.sec.words-at-bottom { justify-content: flex-end; }
.sec.words-at-bottom > .hero.behind { align-items: flex-end; }
.own-form, .own-form label, .own-form legend, .own-form .tick { color: var(--on-surface); --ink: var(--on-surface); }
.sec[class] .quotes.plain .quote, .sec[class] .quotes.single .quote { background: none; color: inherit; --ink: inherit; --muted: inherit; }
.sec.edge-wave, .sec.edge-slant, .sec.edge-curve { z-index: 1; }
.sec.w-full > .hero.beside .words { padding-left: 24px; padding-right: 24px; }
.sec.bg-alt.cards-soft .feature, .sec.bg-alt.cards-soft .tier, .sec.bg-alt.cards-soft .quote, .sec.bg-alt.cards-soft .steps li, .sec.bg-alt.cards-soft .card { background: var(--ground); color: var(--ink); }
.sec:not(.bg-ground) > .hero.none { background: none; }
.sec:not(.bg-ground) > .hero.none h1, .sec:not(.bg-ground) > .hero.none .lead { color: inherit; }
.sec.shape-circle .features.cards .feature img { width: 56px; height: 56px; aspect-ratio: 1; align-self: flex-start; }
.sec.a-centre.shape-circle .features.cards .feature img { align-self: center; }
.feature p { white-space: pre-line; }
.menu-phone { margin-left: auto; }
.logo-huge .brand img { height: 120px; }
@media (max-width: 47.99rem) { .logo-huge .brand img { height: 72px; } }
.footer-accent footer { background: var(--accent); color: var(--on-accent); }
.footer-line footer { margin: 0; max-width: none; border-radius: 0; padding: 16px 24px; background: none; color: var(--muted); border-top: 1px solid var(--line); }
.footer-line .footer-about, .footer-line .footer-menu, .footer-line .footer-contact { display: none; }
.footer-line .footer-in { max-width: 68rem; margin: 0 auto; }
.text-picture-head { margin-bottom: 16px; }
.sec.a-centre .text-picture-head { text-align: center; }
.menu-wide { margin-left: auto; }
.header-split .menu-wide, .header-centred .menu-wide { margin-left: 0; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 47.99rem) { .brand { flex: 1 1 auto; max-width: none; min-width: 0; } }
.top { padding-top: 8px; padding-bottom: 8px; }
.header-centred .sec.under .hero.over, .header-centred .sec.under > section { padding-top: 180px; }
body.logo-huge .site-header .brand img { height: 120px; }
@media (max-width: 47.99rem) { body.logo-huge .site-header .brand img { height: 72px; } }
.footer-line.footer-dark footer { background: var(--dark); color: var(--on-dark); border: 0; }
.footer-line.footer-main footer { background: var(--main); color: var(--on-main); border: 0; }
.footer-line.footer-accent footer { background: var(--accent); color: var(--on-accent); border: 0; }
.sec.h-tall, .sec.h-screen, .sec.h-short { display: flex; flex-direction: column; justify-content: center; }
.sec.cards-white .member, .sec.cards-soft .member, .sec.cards-outlined .member { padding: 16px; border-radius: var(--card); }
.sec.cards-white .member { background: #fff; color: #1f1b18; --ink: #1f1b18; --muted: #57504a; --headings-color: var(--card-headings); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sec.cards-soft .member { background: var(--alt); color: var(--on-alt); --ink: var(--on-alt); --muted: var(--muted-on-alt); }
.sec.cards-outlined .member { box-shadow: inset 0 0 0 1px var(--line); }
.arrows { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sec.a-centre .arrows { justify-content: center; }
.arrows button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;}
.prose p a, .prose li a { display: inline; min-height: 0; white-space: normal; padding-block: 13px; }
.stat span, .stat strong { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 47.99rem) { .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important; } }
.sec.bg-main, .sec.bg-gradient { --button-bg: var(--btn-main); --on-button: var(--on-btn-main); }
.sec.bg-accent { --button-bg: var(--btn-accent); --on-button: var(--on-btn-accent); }
.sec.bg-dark { --button-bg: var(--btn-dark); --on-button: var(--on-btn-dark); }
.action { --button-bg: var(--btn-main); --on-button: var(--on-btn-main); }
.hero.none { --button-bg: var(--btn-main); --on-button: var(--on-btn-main); }
.hero .button.outline { background: transparent; }
.button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sec.cards-none .quote, .sec.cards-none .feature, .sec.cards-none .tier { --ink: inherit; --muted: inherit; --headings-color: inherit; }
.footer-note { grid-column: 1 / -1; margin: 0; font-size: 14px; white-space: pre-line; }
@media (min-width: 48rem) { .pair { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .pair > .sec .wrap { max-width: 34rem; } .pair > .sec:first-child .wrap { margin-right: 0; } .pair > .sec:last-child .wrap { margin-left: 0; } }
@media (min-width: 48rem) { .pair > .sec > .wrap, .pair > .sec > section.wrap { max-width: none; margin: 0; } }
.pair .gallery.slideshow figure { flex-basis: 100%; }
@media (min-width: 48rem) { .pair .features:not(.carousel) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pair .newsletter { grid-template-columns: 1fr; } .pair table.rates th, .pair table.rates td { white-space: normal; } }
.arrows button { background: #fff; color: #1f1b18; }
.footer-columns .footer-in, .footer-centred .footer-in { padding: 0 16px; }
.phone-only { display: none; }
@media (max-width: 47.99rem) { .header-button.phone-only { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: 15px; } }
.sec.framed { max-width: calc(68rem - 32px); margin: 16px auto; border-radius: var(--card); }
.footer-note a { text-decoration: underline; color: inherit; }
.tab-names { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab-names button { flex: none; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; }
.tab-names button[aria-selected=true] { color: var(--headings-color); border-bottom-color: var(--accent); }
.tab-panel { max-width: 52rem; }
.sec.a-centre .tab-panel { margin: 0 auto; }
.sec .own-card { background: var(--card-bg) !important; color: var(--card-on) !important; --ink: var(--card-on); --muted: var(--card-on); --headings-color: var(--card-on); padding: 20px; border-radius: var(--card); }
.sec .own-card .button { --button-bg: var(--card-on); --on-button: var(--card-bg); }
@media (min-width: 48rem) { .pair:has(> .sec.framed) { max-width: 68rem; margin: 0 auto; } .pair > .sec > .wrap, .pair > .sec > section.wrap { padding: 0 16px; } .pair > .sec > .action { margin: 0 16px; } .pair > .sec.framed { margin: 8px; } }
@media (min-width: 48rem) { .footer-columns .footer-in, .footer-columns .footer-in:has(.footer-own) { grid-template-columns: minmax(12rem, 1.4fr) repeat(auto-fit, minmax(8rem, 1fr)); gap: 24px; } .footer-columns .footer-in > * { min-width: 0; } }
/* A long name in a column wraps rather than running into the next */
.footer-columns .footer-in a { white-space: normal; }
@media (max-width: 47.99rem) { .sec.framed { margin: 8px 16px; } .button { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }
.sec.framed > .action { padding: 32px 24px; }
.sec[class] .feature.own-card, .sec[class] .tier.own-card { --card-headings: var(--card-on) !important; --headings-color: var(--card-on) !important; --ink: var(--card-on) !important; --muted: var(--card-on) !important; --main-text: var(--card-on) !important; color: var(--card-on) !important; }
.sec.a-centre .tab-names { justify-content: safe center; }
.social svg + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pictures-small .text-picture img, .pictures-small .hero.beside img, .pictures-small .feature img, .pictures-small .member img { width: auto; max-width: 160px; max-height: 160px; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.pictures-medium .text-picture img, .pictures-medium .hero.beside img, .pictures-medium .feature img, .pictures-medium .member img { width: auto; max-width: min(100%, 360px); max-height: 360px; aspect-ratio: auto; object-fit: contain; }
.sec.a-centre.pictures-small img, .sec.a-centre.pictures-medium img { margin-left: auto; margin-right: auto; }
@media (min-width: 48rem) { .pictures-small .text-picture, .pictures-medium .text-picture { grid-template-columns: auto 1fr; } .pictures-small .text-picture.right, .pictures-medium .text-picture.right { grid-template-columns: 1fr auto; } }
.quotes.reviews { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.quotes.reviews .quote::before { display: none; }
.reviewer { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.reviewer img, .reviewer .initials { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 14px; }
.reviewer > span { display: flex; flex-direction: column; line-height: 1.3; }
.reviewer .quote-from { font-size: 13px; color: var(--muted); }
.quotes.reviews blockquote { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.quote-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.sec.a-centre .quote-face { margin-left: auto; margin-right: auto; }
.stars-off { opacity: .25; }
.text-picture.below { display: block; } .text-picture.below img { margin: 16px 0; }
.sec.a-centre .features:not(.carousel) { display: flex; flex-wrap: wrap; justify-content: center; }
.sec.a-centre .features:not(.carousel) > .feature { flex: 1 1 14rem; max-width: 22rem; }
.sec.w-full.pictures-small .text-picture img, .sec.pictures-small .features.cards .feature img { width: auto; height: auto; max-width: 160px; max-height: 160px; margin-left: 0; aspect-ratio: auto; border-radius: 0; }
.sec.w-full.pictures-medium .text-picture img, .sec.pictures-medium .features.cards .feature img { width: auto; height: auto; max-width: min(100%, 360px); max-height: 360px; margin-left: 0; aspect-ratio: auto; }
.sec.a-centre.w-full.pictures-small .text-picture img, .sec.a-centre.w-full.pictures-medium .text-picture img { margin-left: auto; }
.sec.a-centre .quotes.reviews .quote { text-align: left; }
.site-header .button.outline { color: var(--headings-color); }
.site-header.over .button.outline { color: #fff; }
.rule-brush .wrap > h2::after, .rule-brush .words > h2::after { width: 120px; height: 12px; border-radius: 0; background: var(--highlight); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-5 40-6 60-4s40 2 56-2c1 2 1 4-1 5-18 4-38 3-58 2S20 10 4 12C1 12 0 9 2 8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-5 40-6 60-4s40 2 56-2c1 2 1 4-1 5-18 4-38 3-58 2S20 10 4 12C1 12 0 9 2 8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.rule-wave .wrap > h2::after, .rule-wave .words > h2::after { width: 72px; height: 10px; border-radius: 0; background: var(--highlight); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 5c6-6 11-6 17 0s11 6 17 0 11-6 17 0 11 6 17 0' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 5c6-6 11-6 17 0s11 6 17 0 11-6 17 0 11 6 17 0' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.rule-full .wrap > h2::after, .rule-full .words > h2::after { width: 100%; height: 1px; border-radius: 0; background: var(--line); }
/* 2026-10-29: the menu behind ☰ on a computer too, wide dropdowns, sections rising into view, parallax, patterns, before and after */
@media (min-width: 48rem) {
    .menu-hidden .menu-wide > :not(.button):not(.cart) { display: none; }
    .menu-hidden .menu-phone { display: block; margin-left: 8px; }
    .menu-hidden .menu-phone nav { position: fixed; inset: 0; top: 0; left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 80px 24px; border-radius: 0; background: var(--dark); box-shadow: none; overflow-y: auto; }
    .menu-hidden .menu-phone:not([open]) nav { display: none; }
    .menu-hidden .menu-phone nav a { color: var(--on-dark); font-family: var(--headings); font-size: 2rem; min-height: 56px; }
    .menu-hidden .menu-phone nav a.menu-child { font-size: 1.25rem; padding-left: 12px; }
    .menu-hidden .menu-phone[open] summary { position: fixed; top: 16px; right: 16px; z-index: 41; color: var(--on-dark); }
    .drop-menu.wide { grid-template-columns: repeat(3, minmax(12rem, 1fr)); min-width: 40rem; padding: 16px; }
    .drop:hover .drop-menu.wide, .drop:focus-within .drop-menu.wide { display: grid; }
    .sec.fixed > img.behind { position: fixed; inset: 0; width: 100%; height: 100%; }
    .sec.fixed { clip-path: inset(0); }
}
/* WEB-065: opening hours, a card for each location */
.hours-places { display: grid; gap: 16px; }
@media (min-width: 48rem) { .hours-places { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.hours-place { padding: 16px 20px; border-radius: var(--card); background: var(--surface); color: var(--on-surface); }
.hours-place h3 { margin: 4px 0 8px; }
table.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.hours th, table.hours td { padding: 10px 0; border-bottom: 1px solid var(--line); }
table.hours th { text-align: left; font-weight: 600; }
table.hours td { text-align: right; }
.hours-range { display: block; white-space: nowrap; }
table.hours tr:last-child :is(th, td) { border-bottom: 0; }
table.hours tr.today { color: var(--main-text); font-weight: 700; }
.hours-closed { margin: 12px 0 0; }
/* WEB-064: a band of colour at the screen's edges, the page inside it; or the page a column on the dark colour */
body:is(.frame-main, .frame-accent, .frame-dark) { --frame-width: 8px; padding: var(--frame-width); }
body:is(.frame-main, .frame-accent, .frame-dark)::after { content: ""; position: fixed; inset: 0; z-index: 70; border: var(--frame-width) solid var(--frame); pointer-events: none; }
body.frame-main { --frame: var(--main-band); }
body.frame-accent { --frame: var(--accent-band); }
body.frame-dark { --frame: var(--dark-band); }
body:is(.frame-main, .frame-accent, .frame-dark) .phone-bar { left: calc(12px + var(--frame-width)); right: calc(12px + var(--frame-width)); bottom: calc(12px + var(--frame-width)); }
html:has(body.frame-boxed) { background: var(--dark-band); }
body.frame-boxed { max-width: 1240px; min-height: 100vh; margin: 0 auto; box-shadow: 0 0 48px rgba(0,0,0,.25); }
@media (min-width: 48rem) { body:is(.frame-main, .frame-accent, .frame-dark) { --frame-width: 14px; } }
/* WEB-063: a pop-up, over the page on a shade; its section takes no room of its own */
.sec.k-popup { padding: 0; min-height: 0; }
.popup-stub { display: block; min-height: 44px; margin: 12px auto; padding: 0 18px; border: 1px dashed var(--line); border-radius: 999px; background: var(--surface); color: var(--on-surface); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
dialog.popup { --ink: var(--on-surface); --muted: var(--muted-on-surface); --main-text: var(--main-on-surface); --headings-color: var(--surface-headings); width: min(100% - 32px, 440px); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--card); background: var(--surface); color: var(--on-surface); overflow: auto; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
dialog.popup::backdrop { background: rgba(0,0,0,.55); }
/* WEB-077, K5: the business's own tools asked about first, a card at the foot over everything, the page's surface and words */
.cookies { --ink: var(--on-surface); --headings-color: var(--surface-headings); position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; max-width: 34rem; margin: 0 auto; padding: 16px; border-radius: var(--card); background: var(--surface); color: var(--on-surface); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
.cookie-answers { display: flex; justify-content: flex-end; gap: 8px; }
.popup-close { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #111; font-size: 28px; line-height: 1; cursor: pointer; }
.popup-picture { display: block; width: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; }
.popup-words { padding: 24px; text-align: center; outline: none; }
.popup-words h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
.popup:not(:has(.popup-picture)) .popup-words { padding-top: 48px; }
.popup-words p { margin: 0 0 16px; }
.motion-rise .sec.rise { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.motion-rise .sec.rise.risen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .motion-rise .sec.rise { opacity: 1; transform: none; transition: none; } }
/* A pattern on a layer of its own, so a gradient or a section's own colour stays under it */
.sec:is(.pattern-dots, .pattern-lines, .pattern-grid, .pattern-confetti) { isolation: isolate; }
.sec:is(.pattern-dots, .pattern-lines, .pattern-grid, .pattern-confetti)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sec.pattern-dots::before { background-image: radial-gradient(color-mix(in srgb, currentColor 14%, transparent) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.sec.pattern-lines::before { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 8%, transparent) 0 2px, transparent 2px 18px); }
.sec.pattern-grid::before { background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
.sec.pattern-confetti::before { background-image: radial-gradient(var(--accent) 3px, transparent 3.5px), radial-gradient(var(--main) 2.5px, transparent 3px), radial-gradient(color-mix(in srgb, var(--accent) 60%, #fff) 2px, transparent 2.5px); background-size: 90px 90px, 70px 70px, 50px 50px; background-position: 0 0, 30px 40px, 15px 25px; }
.gallery.pairs { display: grid; gap: 16px; }
@media (min-width: 48rem) { .gallery.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare { position: relative; margin: 0; overflow: hidden; border-radius: var(--card); }
.compare img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.compare img.before { position: absolute; inset: 0; height: 100%; clip-path: inset(0 calc(100% - var(--at)) 0 0); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.35); pointer-events: none; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) { outline: 3px solid var(--main-text); outline-offset: 3px; }
.compare figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; }
.arrows[hidden], .dots[hidden] { display: none; }
@media (max-width: 47.99rem) { .arrows { display: none; } }
.tiers.list .price-group { margin: 28px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: calc(1.15rem * var(--scale)); }
.tiers.list .price-group:first-child { margin-top: 0; }
.sec.own-headings .hero h1, .sec.own-headings .hero .kicker, .sec.own-headings .banner { color: var(--headings-color); }
.sec.own-headings { --kicker-text: var(--headings-color); }
/* Words in the main or accent colour read wherever they are: on a coloured band they take the band's words, on the soft band a readable main */
.sec:is(.bg-main, .bg-accent, .bg-dark, .bg-own, .bg-gradient, .bg-picture, .bg-video), .action { --kicker-text: currentColor; --main-text: currentColor; --accent-text: currentColor; --accent-large: var(--headings-color); }
.sec.bg-gradient { color: var(--on-gradient); --ink: var(--on-gradient); --muted: var(--on-gradient); }
/* Each card sets its words from its own ground, the surface, whatever band it sits in */
.sec:is(.bg-ground, .bg-alt):not(.cards-none):not(.cards-outlined):not(.cards-soft):not(.cards-white) :is(.person, .card, .row, .cal-day, .weekday, .hours-place, .quote:not(.plain .quote), .questions details, .ask, .ask-thanks, .features.cards .feature:not(.own-card), .steps li, .tiers:not(.list) .tier:not(.own-card), table.rates, .count span, .features.carousel .feature:not(.own-card)) { --ink: var(--on-surface); --muted: var(--muted-on-surface); --main-text: var(--main-on-surface); --headings-color: var(--surface-headings); color: var(--on-surface); }
.dots { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dots button::before { content: ""; display: block; width: 9px; height: 9px; margin: auto; border-radius: 999px; background: currentColor; opacity: .3; }
.dots button[aria-current]::before { opacity: 1; }
/* Round 7's fixes: long buttons on cards wrap, plain items read on a soft band, long footer links wrap, a centred form's labels stay left, questions in 3 or 4 columns, a big banner */
.features .button, .tiers .button { white-space: normal; height: auto; min-height: 44px; padding-block: 10px; text-align: center; line-height: 1.25; }
.sec.bg-alt .features.plain, .sec.bg-alt .features.pictures { --ink: var(--on-alt); --muted: var(--on-alt); }
.site-footer { overflow-wrap: anywhere; }
.sec.a-centre form.own-form { text-align: left; }
@media (min-width: 48rem) { .sec[data-columns="set"] .questions.columns { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); } }
.action .button.outline, .sec:is(.bg-main, .bg-dark, .bg-accent, .bg-gradient, .bg-picture, .bg-video) .button.outline { color: inherit; }
.sec.heading-large .banner { font-size: 2.25rem; padding: 18px 0; }
.sec.heading-huge .banner { font-size: clamp(3rem, 9vw, 7.5rem); padding: 20px 0; line-height: 1.05; }