/* blocks/badge.liquid */
.badge { --stack: .35rem; display: grid; justify-items: start; }
.align-centre .badge { justify-items: center; text-align: center; }
.badge__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); }
.badge__logo { height: 2.75rem; width: auto; max-width: 9rem; object-fit: contain; }
.badge__label { margin: 0; }

/* blocks/button.liquid */
/* Text only in the accent (the GPS gaps, V4-D79): the words in the band's accent with a soft line of
   the same under them, as a link set apart from the words around it. */
.button.button--link-accent { color: var(--band-accent, var(--color-accent)); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--band-accent, var(--color-accent)) 35%, transparent); text-underline-offset: .3em; }
/* its line is already 2px, so on hover it comes up to the full accent, whatever the site's hover */
@media (hover: hover) { .button.button--link-accent:hover { text-decoration-color: currentColor; } }

/* blocks/column.liquid */
.column { --stack: .5rem; }
.column__icon { display: inline-flex; padding: .6rem; border-radius: var(--radius); background: color-mix(in srgb, currentColor 8%, transparent); }
.align-centre .column__icon { margin-inline: auto; }

/* blocks/divider.liquid */
.divider { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); margin: 0; }
.divider--short { width: 4rem; }
.align-centre .divider--short { margin-inline: auto; }

/* blocks/feature.liquid */
.feature { display: grid; gap: 1.5rem; align-items: center; }
.feature__words { --stack: 1rem; }
.feature__text { --stack: .75rem; }
.feature__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__placeholder { aspect-ratio: 4 / 3; background: color-mix(in srgb, currentColor 8%, transparent); display: grid; place-items: center; }
@media (min-width: 48rem) { .feature { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* blocks/form-choice.liquid */
.form-choice { border: 0; padding: 0; margin: 0; }
.form-choice legend { padding: 0; margin-bottom: .35rem; }
.form-choice__answers { --cluster: .5rem; }
.form-choice .form-choice__answers, .align-centre .form-choice .form-choice__answers { justify-content: flex-start; }
.form-choice__answer { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--radius-box); cursor: pointer; min-height: 2.75rem; }
.form-choice__answer:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.form-choice__answer input { accent-color: var(--color-accent); margin: 0; }
.form-choice__answer span { white-space: nowrap; }
@media (max-width: 30rem) { .form-choice__answer span { white-space: normal; } }

/* blocks/icon-text.liquid */
.icon-text { display: flex; gap: .6rem; align-items: flex-start; }
.icon-text svg { flex: none; margin-top: .2em; }

/* blocks/list.liquid */
.list { --stack: .5rem; list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; gap: .6rem; align-items: flex-start; }
.list__item svg { flex: none; margin-top: .25em; color: var(--color-accent); }
.band-accent .list__item svg { color: inherit; }
.align-centre .list { width: fit-content; margin-inline: auto; text-align: left; }

/* blocks/logo.liquid */
.logo-mark { display: flex; align-items: center; min-height: var(--logo-height, 2.75rem); }
.logo-mark__image { height: var(--logo-height, 2.75rem); width: auto; max-width: 10rem; object-fit: contain; }
.logo-mark__label { color: color-mix(in srgb, currentColor 70%, transparent); letter-spacing: 0.02em; }
.logo-mark__link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-mark__link:hover .logo-mark__label { color: inherit; }

/* blocks/milestone.liquid */
.milestone { --stack: .35rem; position: relative; padding-left: 2.25rem; }
.milestone::before { content: ""; position: absolute; left: 0; top: .3rem; width: .9rem; height: .9rem; border-radius: 999px; background: var(--color-accent); }
.band-accent .milestone::before { background: var(--color-accent-foreground); }
.milestone__when { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.milestone__text { --stack: .5rem; }

/* blocks/own-form-tape.liquid */
/* It takes no room among the form's pieces, so the piece after it stands where it would without it */
.own-form-tape { display: contents; }
.stack > .own-form-tape:first-child + * { margin-top: 0; }

/* blocks/own-tape-button.liquid */
/* Beside the library's buttons in a section's stack, as they sit beside each other, centred on one line */
.stack > .own-tape-button-wrap { display: inline-flex; vertical-align: middle; margin-right: 1.125rem; }
.stack > .own-tape-button-wrap ~ .cluster:has(> .button--link) { vertical-align: middle; }
.align-centre .own-tape-button-wrap { justify-content: center; }
.own-tape-button-wrap--full, .stack > .own-tape-button-wrap--full { display: flex; margin-right: 0; }
.own-tape-button-wrap--full .own-tape-button { width: 100%; }
/* The original's: bold 16px words with 16 by 30 pixels of tape around them, turned 1.2 degrees */
.own-tape-button { --gps-tape: var(--color-own-masking-tape, #3b79b9); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 1rem 1.875rem; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.own-tape-button--taped { color: var(--color-own-masking-tape-words, #fff); rotate: var(--tilt); }
.own-tape-button__tape { position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 10%), color-mix(in srgb, var(--gps-tape), #000 14%)); filter: var(--torn); }
.own-tape-button--small { padding: .6875rem 1.375rem; font-size: .875rem; }
.own-tape-button--large { padding: 1.125rem 2.125rem; font-size: 1.0625rem; }
.own-tape-button--taped:hover, .own-tape-button--taped:focus-visible { color: var(--color-own-masking-tape-words, #fff); }
.own-tape-button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.own-tape-button--press:active { scale: .97; }
@media (prefers-reduced-motion: no-preference) { .own-tape-button--press { transition: scale .12s ease; } }
@media (min-width: 30rem) { .own-tape-button__words { white-space: nowrap; } }

/* blocks/own-tape-dab.liquid */
/* One dab where it sits: the original's 42 by 14 pixels of tape, turned 2 degrees */
.own-tape-dab-wrap { line-height: 0; }
.align-centre .own-tape-dab-wrap { text-align: center; }
.own-tape-dab { display: inline-block; width: var(--width); height: calc(var(--width) / 3); rotate: var(--tilt); background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--color-own-masking-tape, #3b79b9), #fff 10%), color-mix(in srgb, var(--color-own-masking-tape, #3b79b9), #000 14%)); filter: var(--torn); }
/* Over each point, it takes no room of its own among the section's parts */
.own-tape-dab-points { position: absolute; width: 0; height: 0; overflow: hidden; }

/* blocks/own-tape-label.liquid */
/* The original's chip: 31px of tape, 17px either side of the words, turned 1.1 degrees; its words in
   capitals, spaced out, on the tape in the colour Masking tape names for them. */
.own-tape-label { --gps-tape: var(--color-own-masking-tape, #3b79b9); position: relative; isolation: isolate; display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 1.9375rem; padding: .3rem 1.0625rem; rotate: var(--tilt); }
.align-centre .own-tape-label { margin-inline: auto; }
.own-tape-label__tape { position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 10%), color-mix(in srgb, var(--gps-tape), #000 14%)); filter: var(--torn); }
.own-tape-label__words { font-family: var(--font-body); font-weight: 600; font-size: .71875rem; line-height: 1.25; letter-spacing: .15em; text-transform: uppercase; color: var(--color-own-masking-tape-words, #fff); }
.own-tape-label--small { min-height: 1.625rem; padding: .25rem .8125rem; }
.own-tape-label--small .own-tape-label__words { font-size: .65625rem; letter-spacing: .13em; }
.own-tape-label--large { min-height: 2.375rem; padding: .35rem 1.375rem; }
.own-tape-label--large .own-tape-label__words { font-size: .8125rem; }
/* Without tape, the words alone, in the colour of the band's links */
.own-tape-label--plain { padding-inline: 0; rotate: none; }
.own-tape-label--plain .own-tape-label__words { color: var(--band-accent, var(--color-accent)); }

/* blocks/plan.liquid */
.plan { --stack: .5rem; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.plan--highlight { border-color: transparent; }
.plan__flag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.plan > .plan__price { margin-top: .75rem; }
.plan__features { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; gap: .5rem; }
.plan__feature { display: flex; gap: .6rem; align-items: flex-start; text-align: left; }
.plan__check { display: inline-flex; flex: none; padding-top: .2rem; }
.align-centre .plan__features { margin-inline: auto; width: fit-content; }
.plan > .plan__action { margin-top: auto; padding-top: 1.25rem; }

/* blocks/quote.liquid */
.quote { --stack: .75rem; margin: 0; max-width: 44rem; }
.quote__text { margin: 0; }
.quote__text::before { content: "\201C"; }
.quote__text::after { content: "\201D"; }
.align-centre .quote { margin-inline: auto; }
.quote--line { padding-left: 1.25rem; border-left: 2px solid var(--band-accent, var(--color-accent)); }
.quote--accent .quote__text { color: var(--band-accent, var(--color-accent)); }
.quote--large { max-width: 48rem; }
.quote--large .quote__text { line-height: 1.2; }

/* blocks/spacer.liquid */
.spacer--small { height: .5rem; } .spacer--medium { height: 1.5rem; } .spacer--large { height: 3rem; }

/* blocks/stat.liquid */
.stat { --stack: .25rem; }
.stat__value { font-variant-numeric: tabular-nums; }

/* blocks/text.liquid */
.text-paragraphs > p { margin: 0; }
.text-paragraphs > p + p { margin-top: .75em; }

/* blocks/theme-toggle.liquid */
.theme-toggle { display: inline-flex; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--radius); overflow: hidden; }
.theme-toggle__button { display: inline-flex; padding: .45rem .6rem; border: 0; background: transparent; color: inherit; cursor: pointer; }
.theme-toggle__button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-foreground); }
/* on an accent band (a header or footer may sit on one, gap 19) the pressed half swaps, as a button does */
.band-accent .theme-toggle__button[aria-pressed="true"] { background: var(--color-accent-foreground); color: var(--color-accent); }
.theme-toggle__button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* blocks/video.liquid */
.video { aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video.lib-video { aspect-ratio: auto; }

/* sections/about.liquid */
.about__grid { display: grid; gap: 2rem; align-items: center; }
.about__words { --stack: 1rem; }
.about__story { --stack: .75rem; }
.about__signature { font-style: italic; }
.about__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start; padding-top: .5rem; }
.about__placeholder { aspect-ratio: 4 / 5; background: color-mix(in srgb, currentColor 8%, transparent); display: grid; place-items: center; }
@media (min-width: 48rem) {
  .about__grid { grid-template-columns: 5fr 7fr; }
  .about--right .about__photo { order: 2; }
}

/* sections/announcement-bar.liquid */
.announcement.spacing-cosy, .announcement.spacing-normal, .announcement.spacing-generous { padding-block: .5rem; }
.announcement__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; text-align: center; }
[class*="band-"] .announcement__inner.text-small { color: inherit; }
.announcement__link { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }

/* sections/areas.liquid */
.areas__list { list-style: none; margin: 0; padding: 0; }
.areas__item { padding: .4rem .9rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }

/* sections/before-after-slider.liquid */
.ba-slider__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2.5rem; }
.ba-slider__heading > * { margin: 0; }
.ba-slider__frame { position: relative; overflow: hidden; border-radius: var(--ba-corners); aspect-ratio: 3 / 2; background: color-mix(in srgb, currentColor 8%, transparent); }
.ba-slider--wide .ba-slider__frame { aspect-ratio: 16 / 9; }
.ba-slider--square .ba-slider__frame { aspect-ratio: 1; max-width: 40rem; }
.ba-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba-pos)); }
.ba-slider--down .ba-slider__after { clip-path: inset(var(--ba-pos) 0 0 0); }
.ba-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 3px; translate: -50% 0; background: var(--band-bg); pointer-events: none; }
.ba-slider__handle::after { content: "\25C2\25B8"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: .35rem .5rem; border-radius: 999px; background: var(--band-bg); color: var(--band-fg); font-size: .8rem; line-height: 1; white-space: nowrap; }
.ba-slider--down .ba-slider__handle { top: var(--ba-pos); bottom: auto; left: 0; right: 0; width: auto; height: 3px; translate: 0 -50%; }
.ba-slider--down .ba-slider__handle::after { content: "\25B4\25BE"; }
.ba-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-slider--down .ba-slider__range { writing-mode: vertical-lr; cursor: ns-resize; }
.ba-slider__range:focus-visible + .ba-slider__handle::after { outline: 2px solid var(--band-fg); outline-offset: 2px; }
.ba-slider .ba-slider__label { position: absolute; bottom: 1rem; padding: .15rem .5rem; font-size: var(--text-small); background: var(--color-accent); color: var(--color-accent-foreground); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba-slider.ba-slider--labels-band .ba-slider__label { background: var(--color-band); color: var(--color-band-foreground); }
.ba-slider__label--before { left: 1rem; } .ba-slider__label--after { right: 1rem; }
.ba-slider--down .ba-slider__label--before { top: 1rem; bottom: auto; }
.ba-slider__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; }
.ba-slider__thumbs { display: flex; flex-wrap: wrap; gap: .75rem; }
.ba-slider__thumb { display: grid; gap: .35rem; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ba-slider__thumb-img { width: 6rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ba-corners); outline: 2px solid transparent; outline-offset: 2px; }
.ba-slider__thumb[aria-pressed="true"] .ba-slider__thumb-img { outline-color: var(--band-accent); }
.ba-slider__thumb[aria-pressed="true"] span { font-weight: 600; }

/* sections/before-after.liquid */
.before-after__pair { display: grid; gap: 1.5rem; max-width: 56rem; }
.before-after__side { --stack: .5rem; margin: 0; }
.before-after__placeholder { background: color-mix(in srgb, currentColor 8%, transparent); display: grid; place-items: center; }
.align-centre .before-after__pair { margin-inline: auto; }
@media (min-width: 40rem) { .before-after__pair { grid-template-columns: 1fr 1fr; } }

/* sections/blog-cards.liquid */
.blog-cards__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.blog-cards__top > .text-title { margin: 0; }
.blog-cards__all { color: inherit; text-decoration: none; white-space: nowrap; }
.blog-cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.blog-card { display: grid; gap: .75rem; align-content: start; }
.blog-card__picture { border-radius: var(--corners); overflow: hidden; aspect-ratio: 3 / 2; background: color-mix(in srgb, currentColor 8%, transparent); }
.blog-cards--pictures-wide .blog-card__picture { aspect-ratio: 16 / 9; }
.blog-card__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card__words { display: grid; gap: .4rem; }
.blog-card__meta { margin: 0; }
.blog-card__title { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: calc(var(--title-size) * .75); line-height: 1.25; }
.blog-card--big .blog-card__title, .blog-cards--equal .blog-card__title { font-size: var(--title-size); }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card .text-body { margin: 0; }
/* One large: the newest down the left, the rest listed beside it, a line above each. */
.blog-cards--large .blog-card:not(.blog-card--big), .blog-cards--list .blog-card { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
@media (min-width: 48rem) {
  .blog-cards--large { grid-template-columns: 3fr 2fr; column-gap: 2rem; align-items: start; }
  .blog-cards--large .blog-card--big { grid-column: 1; grid-row: 1 / span 6; }
  .blog-cards--large .blog-card:not(.blog-card--big) { grid-column: 2; }
  .blog-cards--equal { grid-template-columns: repeat(3, 1fr); }
}

/* sections/booking.liquid */
.booking__inner { max-width: 48rem; }
.booking__frame { overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); }
.booking__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.booking__frame--short { height: 28rem; }
.booking__frame--normal { height: 42rem; }
.booking__frame--tall { height: 60rem; }

/* sections/call-to-action.liquid */
.cta__inner { --stack: 1rem; max-width: 44rem; }

/* sections/columns.liquid */
.columns__grid { --row-gap: 2rem; display: grid; gap: 2rem 1.5rem; }
@media (min-width: 40rem) { .columns__grid--two, .columns__grid--three, .columns__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .columns__grid--three { grid-template-columns: repeat(3, 1fr); } .columns__grid--four { grid-template-columns: repeat(4, 1fr); } }

/* sections/contact-form.liquid */
.contact__inner > * { max-width: 44rem; }
.align-centre .contact__inner > * { margin-inline: auto; }
.contact__trap { position: absolute; left: -9999px; }
.contact__form { --stack: 1rem; }
.contact__fields { --row-gap: 1rem; display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; text-align: start; }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea, .field select { font: inherit; padding: .7rem .8rem; border-radius: var(--radius-box); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: var(--color-background); color: var(--color-foreground); width: 100%; }
/* A box of one line is a text box's height, its line, its padding and its border, whatever it asks
   for, so a date and a drop-down side by side line up; a browser draws a date taller and a drop-down
   shorter on its own. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select { height: calc(1lh + 1.4rem + 2px); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
/* Words in an empty box are in the soft colour on the page colour every box has, a pair the looks
   test holds to 4.5 to 1, not the browser's own paler grey. */
.field ::placeholder { color: var(--color-muted); opacity: 1; }
.contact__details-line { margin-top: .5rem; }
/* A card around the form: the page's own colour, lifted a touch toward white, with a fine border. */
.contact--card .contact__form { padding: 1.75rem; border-radius: var(--radius-box); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); background: color-mix(in srgb, var(--band-bg, var(--color-background)) 95%, #fff); }
@media (max-width: 39.99rem) { .contact--card .contact__form { padding: 1.25rem; } }
.contact--steps-capitals :is(.part-kicker, .contact__details-line) { text-transform: uppercase; }
.field__optional { font-weight: 400; font-size: .9em; color: var(--band-muted, var(--color-muted)); }
@media (min-width: 40rem) { .contact__fields { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
/* Questions at Half width (the owner, 2026-10-09): on a wider screen the form's parts and questions
   are laid out on two columns, each across both but a half-width question, so two in a row share
   one, as GPS Painting's date and time do; on a phone they sit one under the other. Only a form with
   one is laid out so, and the rest are drawn as they always were. The stack still spaces them: a
   part's own room below is left to the one after it, as the stack's margins meet there. The two of a
   pair line up at the top, their labels side by side, so the second stands as far down as the first,
   which a part's Space above it may move, and at the very top when the pair starts the form. */
@media (min-width: 40rem) {
  .contact__intro:has(> .field--half) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-items: start; }
  .contact__intro:has(> .field--half) > * { grid-column: 1 / -1; }
  .contact__intro:has(> .field--half) > .field--half { grid-column: auto; }
  .contact__intro:has(> .field--half) > .part:has(+ .part) { margin-bottom: 0; }
  .contact__intro > .part--space-none + .field--half + .field--half { margin-top: 0; }
  .contact__intro > .part--space-small + .field--half + .field--half { margin-top: .5rem; }
  .contact__intro > .part--space-large + .field--half + .field--half { margin-top: 2rem; }
  .contact__intro > .field--half:first-child + .field--half { margin-top: 0; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .contact__intro > .part--t-space-none + .field--half + .field--half { margin-top: 0; }
  .contact__intro > .part--t-space-small + .field--half + .field--half { margin-top: .5rem; }
  .contact__intro > .part--t-space-normal + .field--half + .field--half { margin-top: var(--stack, 1rem); }
  .contact__intro > .part--t-space-large + .field--half + .field--half { margin-top: 2rem; }
}

/* sections/cta-band.liquid */
.cta-band__inner { display: grid; gap: .75rem 2.5rem; align-items: center; }
.cta-band__inner > * { margin: 0; }
.cta-band.cta-band--boxed { background: var(--color-background); color: var(--color-foreground); }
.cta-band--boxed .cta-band__inner { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-box); background: var(--band-bg); color: var(--band-fg); }
.cta-band__phone { color: var(--band-muted); }
.cta-band__phone a { color: inherit; }
.align-centre .cta-band__inner { justify-items: center; text-align: center; }
.align-centre .cta-band__inner .cluster { justify-content: center; }
@media (min-width: 48rem) {
  .cta-band--beside .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .cta-band--beside .cta-band__inner > :not(.part-button):not(.cta-band__phone) { grid-column: 1; }
  .cta-band--beside .cta-band__inner > .part-button, .cta-band--beside .cta-band__inner > .cta-band__phone { grid-column: 2; }
  .cta-band--beside .cta-band__inner > .part-button { grid-row: 1 / span 2; align-self: center; }
  .cta-band--beside .cta-band__inner:has(> .cta-band__phone) > .part-button { grid-row: 1; align-self: end; }
}
.cta-band--strip .cta-band__inner > .part-heading { position: relative; padding-top: 1.25rem; }
.cta-band--strip .cta-band__inner > .part-heading::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: .4rem; background: var(--band-accent); rotate: var(--cta-band-turn); }
.align-centre.cta-band--strip .cta-band__inner > .part-heading::before { left: calc(50% - 1.5rem); }

/* sections/cv.liquid */
.cv__parts { display: grid; gap: 2.5rem; }
.cv__part { display: grid; gap: .75rem; align-content: start; }
.cv__part-name { text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-small); }
.cv__entries { list-style: none; margin: 0; padding: 0; display: grid; }
.cv__entry { display: grid; gap: .2rem; padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.cv__entry:first-child { padding-top: 0; }
.cv__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.cv__what { min-width: 0; overflow-wrap: anywhere; }
/* the owner's own words for the dates: a short one stays on one line beside what it was, a long one takes a line of its own and wraps there */
.cv__when { font-variant-numeric: tabular-nums; flex: none; max-width: 100%; overflow-wrap: anywhere; }
.cv__summary { display: grid; gap: .5rem; margin-top: .25rem; }
/* Dates above: the when is a small line over what it was, as on a timeline; it comes first in the page too, so it reads in the order it shows */
.cv__parts--dates-above .cv__head { flex-direction: column; align-items: flex-start; }
.cv__download { padding-top: .5rem; }
@media (min-width: 48rem) {
  /* Names beside: each part's name in a column of its own, its entries to the right */
  .cv__parts--beside .cv__part { grid-template-columns: minmax(8rem, 1fr) 3fr; column-gap: 2.5rem; }
  .cv__parts--beside .cv__entries:first-child { grid-column: 2; }
  /* the owner's note under a part's entries stays under them (list-more) */
  .cv__parts--beside .cv__part > .empty-note { grid-column: 2; }
  /* Side by side: the parts as columns, as many as fit */
  .cv__parts--columns { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: 3rem; }
}

/* sections/faq.liquid */
.faq__inner > * { max-width: 44rem; }
.align-centre .faq__inner > * { margin-inline: auto; }
.faq__list { display: grid; }
.faq__item { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.faq__question { cursor: pointer; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; font-weight: 400; }
.faq__item[open] .faq__question::after { content: "\2212"; }
.faq__answer { padding: 0 0 1rem; }

/* sections/feature-rows.liquid */
.feature-rows__list { --row-gap: 3rem; display: grid; gap: 3rem; }
@media (min-width: 48rem) {
  .feature-rows__list { --row-gap: 4.5rem; gap: 4.5rem; }
  .feature-rows__list--left .feature:nth-child(even) .feature__photo,
  .feature-rows__list--right .feature:nth-child(odd) .feature__photo { order: 2; }
}

/* sections/filter-bar.liquid */
/* The Filter bar (V4-D107). Its sizes are its own settings' steps, written for each bar (above). */
.filter-bar[hidden] { display: none; }
.filter-bar__chips { display: flex; flex-wrap: wrap; gap: var(--chip-gap, .5rem); }
.align-centre .filter-bar__chips { justify-content: center; }
.filter-bar__chip { font: inherit; font-size: var(--chip-text, .8125rem); line-height: 1.2; padding: .5em 1em; border-radius: var(--chip-corners, 99px); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; cursor: pointer; }
.filter-bar__count { opacity: .65; font-variant-numeric: tabular-nums; }
.filter-bar--filled .filter-bar__chip { border-color: transparent; background: color-mix(in srgb, currentColor 8%, transparent); }
.filter-bar--underlined .filter-bar__chip { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding-inline: .25em; }
.filter-bar--picked-accent .filter-bar__chip[aria-pressed="true"] { background: var(--band-accent); border-color: var(--band-accent); color: var(--band-bg); }
.filter-bar--picked-text .filter-bar__chip[aria-pressed="true"] { background: var(--band-fg); border-color: var(--band-fg); color: var(--band-bg); }
.filter-bar--underlined.filter-bar--picked-accent .filter-bar__chip[aria-pressed="true"] { background: transparent; color: var(--band-accent); border-bottom-color: var(--band-accent); }
.filter-bar--underlined.filter-bar--picked-text .filter-bar__chip[aria-pressed="true"] { background: transparent; color: var(--band-fg); border-bottom-color: var(--band-fg); }
.filter-bar--sticky { position: sticky; top: 0; z-index: 2; background: var(--band-bg); }
@media (max-width: 39.99rem) { .filter-bar--phone-scroll .filter-bar__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filter-bar--phone-scroll .filter-bar__chip { flex: none; } }

/* sections/find-us-map.liquid */
.find-us-map__inner { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 48rem) {
  .find-us-map--right .find-us-map__inner:has(> .find-us-map__map) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .find-us-map--left .find-us-map__inner:has(> .find-us-map__map) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .find-us-map--left .find-us-map__map { order: -1; }
}
.find-us-map__facts { margin: 0; display: grid; }
.find-us-map__fact { display: grid; gap: .2rem; padding: .9rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.find-us-map__fact dt { color: var(--band-muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.find-us-map__fact dd { margin: 0; display: grid; gap: .25rem; }
.find-us-map__fact address { font-style: normal; }
.find-us-map .find-us-map__link { width: fit-content; color: var(--band-accent); text-decoration: underline; text-underline-offset: .2em; }
.find-us-map .find-us-map__directions { font-size: var(--text-small); }
.find-us-map--links-plain .find-us-map__link { color: inherit; }
.find-us-map__map { position: relative; display: grid; place-content: center; justify-items: center; gap: .75rem; min-height: var(--find-us-height); padding: 1.5rem; overflow: hidden; border-radius: var(--find-us-corners); background: color-mix(in srgb, currentColor 7%, var(--band-bg)); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); text-align: center; }
.find-us-map__pin { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-foreground); }
.find-us-map__pin svg { width: 1.25rem; height: 1.25rem; }
.find-us-map__waits { margin: 0; color: var(--band-muted); }
.find-us-map__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* sections/find-us.liquid */
.find-us__grid { display: grid; gap: 2rem; align-items: center; }
.find-us__address { font-style: normal; }
@media (min-width: 48rem) { .find-us__grid { grid-template-columns: 1fr 1fr; } }

/* sections/food-menu.liquid */
.food-menu__courses { display: grid; gap: 2rem; }
/* the owner's note under the dishes with no course, or under one course alone, keeps to the width of the menu (list-more) */
.food-menu__courses > .empty-note { grid-column: 1 / -1; }
.food-menu__course { --stack: .5rem; }
.food-menu__course-name { text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-small); }
.food-menu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.food-menu__item { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.food-menu__item-words { display: grid; gap: .15rem; min-width: 0; }
/* A price may be a list of choices (Small £4.50, Large £7.95), so it wraps inside its own half
   of the row rather than pushing the menu off a phone screen. */
.food-menu__price { margin: 0; flex: 0 1 auto; max-width: 50%; text-align: end; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .food-menu__courses--two { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* sections/footer.liquid */
/* A section that ends on the footer's own background runs straight into it, and the two read as
   one. A hairline in the current text colour separates them whatever the look, light or dark, and
   disappears into the edge when the section above is a different colour anyway. It is the footer's
   Fine line, along its top only (the fine lines of base.css draw top and bottom): Always, the one
   every footer had before the setting, or In the dark. */
.footer--line-always { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer--line-dark { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); } }
:root[data-theme="dark"] .footer--line-dark { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.footer__grid { display: grid; gap: 2rem; }
.footer__details { --stack: .5rem; font-style: normal; }
.footer__details p, .footer__details a { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.footer__profiles { list-style: none; margin: 0; padding: 0; gap: .5rem 1rem; }
.footer__profiles a { text-decoration: underline; text-underline-offset: .2em; }
/* The profile icons: each mark in a soft square of the footer's own accent: the accent on bands on the
   band, the accent on the page and the soft band, the text on the accent on an accent band. */
.footer__online { gap: .875rem 1rem; }
.footer__icons { list-style: none; margin: 0; padding: 0; gap: .875rem; }
.footer__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: .5rem; color: var(--band-accent, var(--color-accent)); background: color-mix(in srgb, var(--band-accent, var(--color-accent)) 10%, transparent); }
.footer__icon svg { width: 1.1875rem; height: 1.1875rem; }
@media (hover: hover) { .footer__icon:hover { background: color-mix(in srgb, var(--band-accent, var(--color-accent)) 20%, transparent); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .footer__icon { transition: background-color .2s, color .2s; } }
/* The mountains: a line across the top edge, quiet in the footer's own text colour. It takes the
   place of the hairline and of the room above the footer's words. */
.footer.footer--edge-mountains { padding-top: 0; }
.footer__edge { display: block; width: 100%; height: 3rem; margin-bottom: 2.25rem; color: color-mix(in srgb, currentColor 8%, transparent); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__links a { text-decoration: none; }
.footer__hours { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.footer__hours dd { margin: 0; }
.footer__extras { margin-left: auto; }
.footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 2fr 1fr 1.5fr; } }
/* The business name in the heading font, heavy and close, as a words logo is. */
.footer__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; }
.footer__main > .footer__note { margin-top: .375rem; font-size: .875rem; }
.footer__made a { color: inherit; }
/* Name left, profiles right: the name and its small print on the left, the profiles and the made-with
   line on the right, both resting on the same line at the foot; on a phone one under the other. */
.footer--split .footer__side { --stack: 1rem; }
@media (min-width: 48rem) {
  .footer--split .footer__grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.875rem; }
  .footer--split .footer__side { align-items: flex-end; text-align: end; }
  .footer--split .footer__side > * { margin-inline-start: auto; }
}
.footer--split .footer__made { font-size: .8125rem; color: var(--band-muted, var(--color-muted)); }

/* sections/form-sent.liquid */
.form-sent__inner { --stack: 1rem; }
.form-sent__inner > * { max-width: 44rem; }
.align-centre .form-sent__inner > * { margin-inline: auto; }

/* sections/gallery.liquid */
.gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .gallery__grid--three { grid-template-columns: repeat(3, 1fr); } .gallery__grid--four { grid-template-columns: repeat(4, 1fr); } }
.gallery__record { max-width: 64rem; }
.align-centre .gallery__record { margin-inline: auto; }
.gallery__photo { margin: 0; display: grid; gap: .4rem; }
.gallery__caption { margin: 0; }

/* sections/header.liquid */
.header { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.header--sticky { position: sticky; top: 0; z-index: 50; }
/* A sticky box only moves inside its parent, and the header's parent is its section's own box, no
   taller than the header, so on its own the header never stuck. The section's box sticks instead.
   Since it does, Stick to the top is a setting of its own (stick): a header saved before it has none,
   and reads as off as it is read (model upgrade.js), so it looks as it always did until it is turned
   on; a new site's header has it on. */
.section-header:has(> .header--sticky) { position: sticky; top: 0; z-index: 50; }
.header__inner { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding-block: .5rem; }
.header__name { text-decoration: none; margin-right: auto; }
/* On a narrow screen the name gives way, cut short (on a phone it wraps instead, below), so the menu
   button, the header's parts and the phone button keep their size and the page is never wider than
   the screen. A logo shrinks the same way, keeping its shape. */
.header__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header__disclosure, .header__extras, .header__phone { flex-shrink: 0; }
/* nothing in the header breaks onto a second line */
.header__name, .header__links a, .header .button { white-space: nowrap; }
/* The header's buttons sit a step below a page's: Normal has the room the header has always given
   them, Small less, Large a page's normal. Only the room is set here, through the variables base.css
   pads a button with, so a size, the site's exact padding and a part's own exact padding all reach a
   button in the header. The words keep base.css's sizes, so the site's exact font size still wins.
   Per device as every part's choices, outweighing base.css's per-device sizes, which come later. */
.header .button { --button-py: .55rem; --button-px: 1rem; }
.header .button--size-small { --button-py: .35rem; --button-px: .75rem; }
.header .button--size-large { --button-py: .75rem; --button-px: 1.25rem; }
/* Text only keeps the room the header's old fixed padding gave it */
.header .button--link { padding: var(--button-py) var(--button-px); }
@media (max-width: 63.99rem) {
  .header .button.part--t-size-small { --button-py: .35rem; --button-px: .75rem; }
  .header .button.part--t-size-normal { --button-py: .55rem; --button-px: 1rem; }
  .header .button.part--t-size-large { --button-py: .75rem; --button-px: 1.25rem; }
}
@media (max-width: 39.99rem) {
  .header .button.part--p-size-small { --button-py: .35rem; --button-px: .75rem; }
  .header .button.part--p-size-normal { --button-py: .55rem; --button-px: 1rem; }
  .header .button.part--p-size-large { --button-py: .75rem; --button-px: 1.25rem; }
}
.header__logo { height: 2.5rem; width: auto; object-fit: contain; object-position: left center; }
/* A words logo: the name large in the heading font, and beside it the note in small capitals on two
   lines, both sitting on the same line at the foot. */
.header__name--words { display: inline-flex; align-items: flex-end; gap: .7rem; padding-block: .15rem; }
.header__wordmark { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.5625rem; line-height: 1; letter-spacing: -.02em; }
.header__note { font-weight: 600; font-size: .6875rem; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; color: var(--band-muted, var(--color-muted)); padding-bottom: .1rem; }
/* The soft band. Sticky, it is a little see-through with the page blurred behind it, so the header
   sits solid over the top of the page and lets the page show through once it scrolls under. Higher
   than the band classes, which come later in the page. */
.header.header--soft { --band-bg: var(--color-soft-band); }
.header.header--soft.header--sticky { --band-bg: color-mix(in srgb, var(--color-soft-band) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header--soft .header__nav--narrow, .header--soft .header__nav--wide .header__sub { background: var(--color-soft-band); }
.header__disclosure { position: static; }
.header__toggle { list-style: none; cursor: pointer; display: inline-flex; padding: .5rem; border-radius: var(--radius); }
.header__toggle::-webkit-details-marker { display: none; }
.header__toggle-open { display: none; }
.header__disclosure[open] .header__toggle > svg:first-child { display: none; }
.header__disclosure[open] .header__toggle-open { display: inline-flex; }
.header__nav--wide { display: none; }
.header__nav--narrow { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--band-bg, var(--color-background)); color: var(--band-fg, var(--color-foreground)); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); padding: .5rem; min-width: 14rem; box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.header__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.header__links a { display: block; padding: .6rem .75rem; text-decoration: none; border-radius: var(--radius); }
.header__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
.header__sub { list-style: none; margin: 0; padding: 0 0 0 .75rem; }
/* A drop-down's arrow, a button of its own beside its link, or the words of a heading with no page,
   as tall as a link. The arrow is two sides of a small square turned to point down, and up while the
   drop-down is open; it turns only for a visitor who has not asked for less motion. */
.header__drop > summary { list-style: none; cursor: pointer; }
.header__drop > summary::-webkit-details-marker { display: none; }
.header__drop-toggle { display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; min-height: 2.75rem; min-height: calc(1lh + 1.2rem); padding: .6rem .75rem; border-radius: var(--radius); }
.header__drop-toggle::after { content: ""; flex-shrink: 0; width: .4em; height: .4em; border: solid currentColor; border-width: 0 .125em .125em 0; transform: translateY(-.15em) rotate(45deg); }
.header__drop[open] > .header__drop-toggle::after { transform: translateY(.15em) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .header__drop-toggle::after { transition: transform .2s; } }
.header__drop-toggle--heading { justify-content: space-between; }
/* In the phone's menu the arrow sits at the right of its link's row, and the links under it fold
   open below; a heading is the whole row. */
.header__links .has-children { position: relative; }
.header__nav--narrow .has-children > a { padding-right: 3.25rem; }
.header__nav--narrow .has-children > .header__drop > .header__drop-toggle:not(.header__drop-toggle--heading) { position: absolute; top: 0; right: 0; min-width: 3.25rem; justify-content: flex-end; }
/* Stuck to the top, the open menu moves with the header, so a menu taller than the room under the
   header scrolls inside itself, or its last links and buttons could never be reached. The room is the
   screen's height less the box the menu hangs from, which is the header. The menu's own scroll hands
   on to the page at its end, so a header that has not yet reached the top gets there. */
.header--sticky .header__nav--narrow { max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; }
/* The full-width phone menu: the open menu spans the whole header, edge to edge, its links divided by
   hairlines, and the header's button, when it is set to sit in the menu, under them. */
.header--menu-full:not(.header--sticky) { position: relative; }
.header--menu-full .header__inner { position: static; }
.header--menu-full .header__nav--narrow { left: 0; right: 0; min-width: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 0; padding: .375rem 1.25rem 1.125rem; box-shadow: 0 14px 26px -18px rgb(20 30 50 / .4); }
.header--menu-full .header__nav--narrow .header__links a { padding: .95rem .125rem; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.header--menu-full .header__nav--narrow .header__drop-toggle { min-height: calc(1lh + 1.9rem); padding-block: .95rem; }
.header--menu-full .header__nav--narrow .header__drop-toggle--heading { padding-inline: .125rem; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.header--menu-full .header__nav--narrow .has-children > a { padding-right: 3.25rem; }
.header--menu-full .header__nav--narrow .has-children > .header__drop > .header__drop-toggle:not(.header__drop-toggle--heading) { padding-right: .125rem; }
.header--menu-full .header__menu-extras { margin-top: 0; padding: 1rem 0 0; border-top: 0; }
/* The full-screen phone menu (Northgate's touches, 2026-10-10): the open menu covers the whole screen,
   its links large in the heading font down the middle, a copy of the header's buttons and call button
   under them wherever those sit in the bar, since the menu covers the bar, and the business name and
   the close button where they were, above it. Still the details element, so it opens and closes with
   no script; the header's small script, which comes with every phone menu, closes it on Escape
   and keeps the keyboard inside it while it is open, a jump on the same page closes it through the
   header's script for jumps, and a link to another page leaves it. Nothing moves as it opens. The page
   under it does not scroll while it is open. A soft band's blur would hold the menu inside the header,
   so it is set aside while the menu is open. */
.header--menu-screen :is(.header__toggle, .header__name) { position: relative; z-index: 61; }
.header--menu-screen:has(.header__disclosure[open]) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.header--menu-screen .header__nav--narrow { position: fixed; inset: 0; max-height: none; min-width: 0; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 5rem 1.5rem 3rem; text-align: center; }
.header--menu-screen .header__nav--narrow .header__links { align-items: center; gap: .25rem; }
.header--menu-screen .header__nav--narrow .header__links > li > a { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; padding: .35rem 1rem; }
.header--menu-screen .header__nav--narrow .header__sub { padding: 0 0 .5rem; }
.header--menu-screen .header__menu-extras { justify-content: center; margin-top: 0; padding: 0; border-top: 0; }
.header__phone-number { display: none; }
.header__extras { gap: .5rem; }
/* The open menu's buttons, under its links; the call button there shows its number, as there is room */
.header__menu-extras { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; padding: .75rem .75rem .25rem; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.header__menu-extras .header__phone-number { display: inline; }
/* On a phone the buttons left of the menu icon or in the menu stand in the bar on their own, so each
   moves apart from the light and dark switch, which stays right of the icon */
@media (max-width: 47.99rem) {
  .header__name { order: -2; }
  /* On a phone a long name wraps onto a second line rather than being cut at the edge of the screen,
     a words logo's words beside its note as well (the owner, 2026-10-09); a word longer than the room
     breaks. */
  .header__name { white-space: normal; overflow: visible; overflow-wrap: break-word; }
  .header__wordmark { min-width: 0; }
  .header--button-left .header__extras, .header--button-menu .header__extras { display: contents; }
  .header--button-left .header__extras > *, .header--button-menu .header__extras > * { flex-shrink: 0; }
  .header--button-left .header__extras > .part-button { order: -1; }
  .header--button-menu .header__extras > .part-button { display: none; }
  .header--call-left .header__inner > .header__phone { order: -1; }
  .header--call-menu .header__inner > .header__phone { display: none; }
  :root:has(.header--menu-screen .header__disclosure[open]) { overflow: hidden; }
}
@media (min-width: 48rem) {
  .header__disclosure { display: none; }
  .header__nav--wide { display: block; }
  .header__nav--wide .header__links { flex-direction: row; gap: .25rem; }
  /* On a wide screen the arrow sits close beside its link and the links under it hang below both.
     The link's right padding and the arrow's left padding add up to the gap a heading leaves between
     its words and its arrow, so an arrow sits as far from its words either way. */
  .header__nav--wide .has-children { display: flex; align-items: center; }
  .header__nav--wide .has-children > a { padding-right: .125rem; }
  .header__nav--wide .has-children > .header__drop > .header__drop-toggle:not(.header__drop-toggle--heading) { min-width: 1.75rem; justify-content: flex-start; padding-inline: .375rem .5rem; }
  .header__nav--wide .header__sub { position: absolute; z-index: 60; left: 0; top: 100%; background: var(--band-bg, var(--color-background)); color: var(--band-fg, var(--color-foreground)); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); padding: .5rem; min-width: 12rem; }
  .header--centre .header__inner { flex-wrap: wrap; justify-content: center; }
  .header--centre .header__name { margin-right: 0; width: 100%; text-align: center; padding-top: .75rem; }
  /* a words logo is a row of its own, which the centring of words does not move */
  .header--centre .header__name--words { justify-content: center; }
}
@media (min-width: 64rem) { .header__phone-number { display: inline; } }
/* A line that draws in under a top menu link, left to right, where a pointer can hover (the line, not
   the site's own link hover, which it takes the place of). Without movement it is simply there. */
@media (hover: hover) {
  .header--hover-line .header__nav--wide .header__links > li > a { position: relative; }
  .header--hover-line .header__nav--wide .header__links > li > a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; background: var(--band-accent, var(--color-accent)); transform: scaleX(0); transform-origin: left center; }
  .header--hover-line .header__nav--wide .header__links > li > a:hover::after { transform: scaleX(1); }
  .header.header--hover-line .header__nav--wide .header__links > li > a:hover { text-decoration-line: none; color: inherit; opacity: 1; }
  /* a heading with no page draws the same line, before its arrow */
  .header--hover-line .header__nav--wide .header__drop-toggle--heading { position: relative; }
  .header--hover-line .header__nav--wide .header__drop-toggle--heading::before { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; background: var(--band-accent, var(--color-accent)); transform: scaleX(0); transform-origin: left center; }
  .header--hover-line .header__nav--wide .header__drop-toggle--heading:hover::before { transform: scaleX(1); }
  .header.header--hover-line .header__nav--wide .header__drop-toggle--heading:hover { text-decoration-line: none; color: inherit; opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header--hover-line .header__nav--wide .header__links > li > a::after { transition: transform .3s cubic-bezier(.66, 0, .2, 1); }
  .header--hover-line .header__nav--wide .header__drop-toggle--heading::before { transition: transform .3s cubic-bezier(.66, 0, .2, 1); }
}

/* sections/hero-photo.liquid */
.hero-photo { position: relative; overflow: hidden; }
.hero-photo__inner { display: grid; gap: 2rem; align-items: center; }
.hero-photo__words { --stack: 1.25rem; display: flex; flex-wrap: wrap; column-gap: .75rem; align-content: start; }
.hero-photo__words > * { flex: 1 1 100%; }
.hero-photo__words > .part-button, .hero-photo__words > .hero-photo__call { flex: 0 0 auto; }
.hero-photo__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hero-photo-corners); }
.hero-photo--words-first .hero-photo__photo { order: 1; }
.hero-photo__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; justify-content: space-between; }
.hero-photo__facts--line { padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.hero-photo__fact-name { color: var(--band-accent); }
.hero-photo__facts--plain .hero-photo__fact-name { color: inherit; }
.hero-photo__fact-name svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }
.hero-photo__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo.hero-photo--behind { color: #fff; --band-fg: #fff; --band-muted: rgb(255 255 255 / .8); }
.hero-photo--behind::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .65)); }
.hero-photo--behind .hero-photo__inner { position: relative; z-index: 1; }
.hero-photo--behind.hero-photo--no-photo, .hero-photo--behind.hero-photo--no-photo::after { color: inherit; --band-fg: inherit; background: none; }
@media (max-width: 47.99rem) {
  .hero-photo__words { order: 1; }
  .hero-photo--words-first .hero-photo__words { order: 0; }
  .hero-photo__facts { order: 2; flex-direction: column; }
}
@media (min-width: 48rem) {
  .hero-photo--right .hero-photo__inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-photo-share)); }
  .hero-photo--left .hero-photo__inner { grid-template-columns: minmax(0, var(--hero-photo-share)) minmax(0, 1fr); }
  .hero-photo--left .hero-photo__photo { order: -1; }
  .hero-photo--behind .hero-photo__words, .hero-photo--no-photo .hero-photo__words { max-width: 40rem; }
  .hero-photo--no-photo .hero-photo__inner { grid-template-columns: minmax(0, 1fr); }
  .hero-photo--no-photo .hero-photo__inner:has(> .empty-state) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-photo__facts { grid-column: 1 / -1; }
}

/* sections/hero.liquid */
.hero { position: relative; overflow: hidden; }
.hero__inner { display: grid; gap: 2rem; align-items: center; }
.hero--short .hero__inner { min-height: 30vh; }
.hero--medium .hero__inner { min-height: 50vh; }
.hero--tall .hero__inner { min-height: 75vh; }
.hero__words { --stack: 1.25rem; max-width: 40rem; }
.hero--centre .hero__words { margin-inline: auto; text-align: center; }
.hero--centre .cluster { justify-content: center; }
.hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Doubled on purpose. The base sheet is linked after this one, so a single class here loses
   to .band-background on --band-fg and the words go dark on the photo. */
.hero.hero--over { color: #fff; --band-fg: #fff; --band-muted: rgb(255 255 255 / .8); }
.hero--over::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / .55)); }
.hero--over .hero__inner { position: relative; z-index: 1; }
/* Shaded from one side: dark behind the words, the photo coming through towards the other edge. Three
   classes, so it holds over a finish's own shade, which comes later in the page. */
.hero.hero--over.hero--shade-left::after { background: linear-gradient(105deg, rgb(0 0 0 / .92) 40%, rgb(0 0 0 / .5) 100%); }
.hero.hero--over.hero--shade-right::after { background: linear-gradient(255deg, rgb(0 0 0 / .92) 40%, rgb(0 0 0 / .5) 100%); }
/* From the right, the words move to the right half, where the shade is, once the screen is wide
   enough for halves; on a phone they keep the whole width, at the left, as every hero's do. */
@media (min-width: 48rem) {
  .hero--beside .hero__inner { grid-template-columns: 1fr 1fr; }
  .hero--shade-right:not(.align-centre) .hero__words { margin-left: auto; }
}

/* sections/hours-week.liquid */
.hours-week__inner { display: grid; gap: 2rem 3rem; align-items: start; }
.hours-week__words { --stack: 1rem; }
@media (min-width: 48rem) { .hours-week--beside .hours-week__inner:has(> .hours-week__words + .hours-week__table) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hours-week--alone .hours-week__table, .hours-week--under .hours-week__table { max-width: 36rem; }
.hours-week__now { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; margin: 0; padding: .35rem .8rem; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); font-weight: 600; }
.hours-week__now::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .5; }
.hours-week__now--open::before { opacity: 1; background: var(--band-accent); }
.hours-week__address { font-style: normal; }
.hours-week__table { margin: 0; display: grid; }
.hours-week__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; }
.hours-week--lines .hours-week__row { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.hours-week__row dt { margin: 0; }
.hours-week__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours-week__closed { color: var(--band-muted); }
.hours-week__note { grid-column: -2 / -1; margin: 0; color: var(--band-muted); }
.hours-week__row--today { padding-inline: .75rem; font-weight: 600; background: color-mix(in srgb, var(--band-fg) 6%, var(--band-bg)); }
.hours-week--today-band .hours-week__row--today { background: var(--color-band); color: var(--color-band-foreground); }
.hours-week--today-plain .hours-week__row--today { background: none; padding-inline: 0; }
.hours-week__row--today dd { color: var(--band-accent); }
.hours-week--today-text .hours-week__row--today dd, .hours-week--today-band .hours-week__row--today dd { color: inherit; }

/* sections/image-banner.liquid */
.image-banner { position: relative; overflow: hidden; }
.image-banner__inner { position: relative; z-index: 1; display: flex; align-items: center; }
.image-banner--short .image-banner__inner { min-height: 30vh; }
.image-banner--medium .image-banner__inner { min-height: 50vh; }
.image-banner--tall .image-banner__inner { min-height: 75vh; }
.image-banner__words { --stack: 1.25rem; max-width: 40rem; }
.image-banner--centre .image-banner__inner { justify-content: center; }
.image-banner--centre .image-banner__words { text-align: center; }
.image-banner--centre .cluster { justify-content: center; }
.image-banner--right .image-banner__inner { justify-content: flex-end; }
.image-banner--right .image-banner__words { text-align: right; }
.image-banner--right .cluster { justify-content: flex-end; }
.image-banner__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-banner.image-banner--photo::after { content: ""; position: absolute; inset: 0; }
.image-banner.image-banner--shade-none,
.image-banner.image-banner--shade-dark { color: white; --band-fg: white; --band-muted: color-mix(in srgb, white 85%, transparent); }
.image-banner--shade-none .image-banner__words { text-shadow: 0 .05rem .75rem color-mix(in srgb, black 70%, transparent); }
.image-banner.image-banner--shade-dark::after { background: color-mix(in srgb, black 50%, transparent); }
.image-banner.image-banner--shade-light { color: black; --band-fg: black; --band-muted: color-mix(in srgb, black 75%, transparent); }
.image-banner.image-banner--shade-light::after { background: color-mix(in srgb, white 65%, transparent); }

/* sections/image-with-text.liquid */
.image-with-text__grid { display: grid; gap: 2rem; align-items: center; }
.image-with-text__words { --stack: 1rem; }
.image-with-text__placeholder { aspect-ratio: 4 / 3; background: color-mix(in srgb, currentColor 8%, transparent); display: grid; place-items: center; }
/* A fine frame behind the photo (Northgate's touches, 2026-10-10): a line in the band's accent, set out
   from the photo's top corner on the side away from the words and stopping short of the other, so it
   reads as a frame behind the picture rather than a border round it. Off, nothing is drawn. On a phone
   it stays inside the page's gutter, so the page never grows wider than the screen. */
.image-with-text--frame .image-with-text__photo { position: relative; isolation: isolate; }
.image-with-text--frame .image-with-text__photo::before { content: ""; position: absolute; z-index: -1; inset: -.75rem 1.5rem 1.5rem -.75rem; border: 1px solid var(--band-accent, var(--color-accent)); opacity: .45; pointer-events: none; }
@media (min-width: 48rem) {
  .image-with-text--frame .image-with-text__photo::before { inset: -1rem 2rem 2rem -1rem; }
  .image-with-text--frame.image-with-text--right .image-with-text__photo::before { inset: -1rem -1rem 2rem 2rem; }
  .image-with-text__grid { grid-template-columns: 1fr 1fr; }
  .image-with-text--right .image-with-text__photo { order: 2; }
}

/* sections/logo-list.liquid */
.logo-list__row { --row-gap: 1.5rem; --logo-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.logo-list__row--small { --row-gap: 1rem; --logo-height: 2rem; gap: 1rem 2rem; }
.logo-list__row--large { --row-gap: 2rem; --logo-height: 4rem; gap: 2rem 4rem; }
.align-centre .logo-list__row { justify-content: center; }

/* sections/logos-strip.liquid */
.logos-strip__line { margin: 0; text-align: center; letter-spacing: .16em; text-transform: uppercase; }
.logos-strip__track { display: flex; overflow: hidden; gap: var(--logo-gap); }
.logos-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem var(--logo-gap); flex: 1 0 100%; }
.logos-strip__item { display: flex; align-items: center; min-height: var(--logo-height); }
.logos-strip__logo { display: block; height: var(--logo-height); width: auto; max-width: 12rem; object-fit: contain; }
.logos-strip__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: calc(var(--logo-height) * .68); line-height: 1; white-space: nowrap; }
.logos-strip__link { color: inherit; text-decoration: none; display: flex; align-items: center; }
.logos-strip--muted .logos-strip__item { color: var(--band-muted, var(--color-muted)); }
.logos-strip--accent .logos-strip__item { color: var(--band-accent, var(--color-accent)); }
.logos-strip--text .logos-strip__item { color: var(--band-fg, var(--color-foreground)); }
.logos-strip--one-colour .logos-strip__logo { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos-strip--one-colour .logos-strip__item:hover .logos-strip__logo, .logos-strip--one-colour .logos-strip__link:focus-visible .logos-strip__logo { filter: none; opacity: 1; }
/* Slowly across: the row and a copy of it slide by, round and round; still for a device that asks for less motion, and while the pointer rests on it. */
.logos-strip--across .logos-strip__list { flex: none; flex-wrap: nowrap; justify-content: flex-start; animation: logos-strip-by 40s linear infinite; }
.logos-strip--across:hover .logos-strip__list { animation-play-state: paused; }
@keyframes logos-strip-by { to { transform: translateX(calc(-100% - var(--logo-gap))); } }
@media (prefers-reduced-motion: reduce) {
  .logos-strip--across .logos-strip__list { animation: none; flex-wrap: wrap; justify-content: center; flex: 1 0 100%; }
  .logos-strip--across .logos-strip__list--again { display: none; }
}

/* sections/map.liquid */
.map__frame { overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.map__frame--short { height: 16rem; } .map__frame--medium { height: 24rem; } .map__frame--tall { height: 32rem; }
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* sections/menu.liquid */
/* The Menu (V4-D106). Its sizes are its own settings' steps, written for each menu as custom properties
   (above); these fall back to the steps it starts on. */
.menu__jumps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.menu__jumps a { color: var(--band-accent); }
.menu__group + .menu__group, .menu__jumps + .menu__group { margin-top: var(--menu-group-space, 2.5rem); }
.menu__group-name { margin: 0 0 .5rem; font-size: var(--menu-heading, 1.5rem); line-height: 1.2; }
.menu__group-name a { color: inherit; }
.menu__items { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--menu-column-gap, 2rem); }
@media (min-width: 48rem) { .menu__items { grid-template-columns: repeat(var(--menu-columns, 2), minmax(0, 1fr)); } }
.menu__item { display: flex; gap: 1rem; align-items: flex-start; padding-block: calc(var(--menu-item-gap, 1.25rem) / 2); }
.menu--lines .menu__item { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.menu__photo { flex: none; width: 4.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-box, .25rem); }
.menu__words { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.menu__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; }
.menu__line { margin: 0; }
/* a price may be words (Small £4.50, Large £7.95), so it wraps in its own part of the row */
.menu__price { margin: 0; flex: 0 1 auto; max-width: 50%; text-align: end; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.menu--price-after .menu__price { max-width: none; text-align: start; }
.menu--price-accent .menu__price { color: var(--band-accent); }
.menu__mark { display: inline-block; padding: 0 .35em; border-radius: var(--radius-box, .25rem); font-size: var(--text-small); font-weight: 600; letter-spacing: .04em; line-height: 1.5; text-decoration: none; }
.menu--marks-soft .menu__mark { background: var(--color-soft-band); color: var(--color-foreground); }
.menu--marks-band .menu__mark { background: var(--color-band); color: var(--color-band-foreground); }
.menu--marks-none .menu__mark { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.menu__key { margin-top: 1.5rem; color: var(--band-muted); }
.menu__key .menu__mark { margin-inline-end: .2em; }
/* what a Filter bar or a Search box above it leaves out (V4-D107), and a group or its link left empty */
.menu__item:is(.is-filtered-out, .is-searched-out), .menu__group[hidden], .menu__jumps a[hidden] { display: none; }

/* sections/news.liquid */
.news__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.post { --stack: .4rem; }
.post__photo { display: block; }
.post__photo img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.post__link { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
@media (min-width: 40rem) { .news__list--two, .news__list--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .news__list--three { grid-template-columns: repeat(3, 1fr); } }

/* sections/opening-hours.liquid */
.hours__inner > * { max-width: 32rem; }
.align-centre .hours__inner > * { margin-inline: auto; }
.hours__table { margin: 0; display: grid; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums; }

/* sections/own-header-tape.liquid */
.own-header-tape { position: absolute; width: 0; height: 0; overflow: hidden; }

/* sections/own-reach-card.liquid */
/* The original's card: as wide as the estimate's words and the form, 576 pixels, 30 by 28 pixels inside,
   its tape 88 by 30 pixels, turned 4 degrees, over the top edge near the right. */
.reach-card-section__inner { max-width: 36rem; }
.align-centre .reach-card-section__inner { margin-inline: auto; }
/* its words start at the left wherever the card sits */
.reach-card { --gps-tape: var(--color-own-masking-tape, #3b79b9); position: relative; padding: 1.875rem 1.75rem; border-radius: 6px; text-align: start; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reach-card { border-block: 1px solid color-mix(in srgb, var(--band-fg) 14%, transparent); } }
:root[data-theme="dark"] .reach-card { border-block: 1px solid color-mix(in srgb, var(--band-fg) 14%, transparent); }
.reach-card__tape { position: absolute; top: -.875rem; right: 1.5rem; width: var(--width); height: 1.875rem; rotate: var(--tilt); background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 10%), color-mix(in srgb, var(--gps-tape), #000 14%)); filter: var(--torn); }
.reach-card__heading { font-family: var(--font-heading); font-weight: 700; font-size: 1.3125rem; line-height: 1.25; margin-bottom: .5rem; }
.reach-card__text { font-size: .90625rem; line-height: 1.55; color: color-mix(in srgb, var(--band-fg) 82%, transparent); margin-bottom: 1.375rem; }
.reach-card__ways { display: flex; flex-wrap: wrap; gap: 1.625rem 2.5rem; }
.reach-card__label { font-weight: 600; font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--band-fg) 58%, transparent); margin-bottom: .3125rem; }
.reach-card__link { font-weight: 600; font-size: 1.0625rem; color: var(--band-accent); text-decoration: none; }
.reach-card__link:hover { text-decoration: underline; text-underline-offset: .2em; }
.reach-card__areas { font-size: .9375rem; line-height: 1.55; color: color-mix(in srgb, var(--band-fg) 82%, transparent); max-width: 18rem; }

/* sections/own-taped-cards.liquid */
/* The original's What we do: its heading and line on one row, the line at the right, then four cards
   on a white face with a fine warm border, two to a row below 860 pixels and one below 560. */
.taped-cards { --gps-tape: var(--color-own-masking-tape, #3b79b9); }
.taped-cards__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3.25rem; }
/* the heading at the original's size, 36 pixels on a computer down to 26 on a phone, or the part's own */
.taped-cards .taped-cards__heading { letter-spacing: -.02em; font-size: clamp(calc(var(--heading-size, 36px) * .7222), 5vw, var(--heading-size, 36px)); }
.taped-cards__intro { max-width: 23.75rem; font-size: .96875rem; color: var(--band-muted, var(--color-muted)); }
.taped-cards__grid { list-style: none; margin: 0; padding: 1rem; display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 35rem) { .taped-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 53.75rem) { .taped-cards__grid { grid-template-columns: repeat(4, 1fr); } }
.taped-card { position: relative; padding: 1.625rem 1.375rem 1.75rem; border-radius: 4px; background: color-mix(in srgb, var(--band-bg, var(--color-background)), #fff 75%); border: 1px solid color-mix(in srgb, var(--band-fg, var(--color-foreground)) 9%, transparent); box-shadow: 0 1px 0 rgb(0 0 0 / .02); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .taped-card { background: color-mix(in srgb, var(--band-bg, var(--color-background)), #fff 5%); } }
:root[data-theme="dark"] .taped-card { background: color-mix(in srgb, var(--band-bg, var(--color-background)), #fff 5%); }
/* on the band the card is a lifted dark, light and dark, as the Reach us card, since a light card on a
   dark band would leave the band's light words on a light face; its words in the band's own, softened */
.band-band .taped-card { background: color-mix(in srgb, var(--band-bg), #fff 5%); }
.band-band .taped-card__text, .band-band .taped-cards__intro { color: color-mix(in srgb, var(--band-fg) 82%, transparent); }
.taped-card__label { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 1.625rem; padding: .25rem .8125rem; margin: 0 0 1.125rem; rotate: var(--tilt); }
.taped-card__tape { position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 10%), color-mix(in srgb, var(--gps-tape), #000 14%)); filter: var(--torn); }
.taped-card__words { font-weight: 600; font-size: .65625rem; line-height: 1.25; letter-spacing: .13em; text-transform: uppercase; color: var(--color-own-masking-tape-words, #fff); }
.taped-card__label--plain { padding-inline: 0; rotate: none; }
.taped-card__label--plain .taped-card__words { color: var(--band-accent, var(--color-accent)); }
.taped-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.21875rem; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .5625rem; }
.taped-card__text { font-size: .90625rem; line-height: 1.5; color: var(--band-muted, var(--color-muted)); }

/* The strips: torn tape, the strip's width thick, reaching a little past the card's corners. Each
   starts rolled up at one end and sticks on from there, left, top, right then bottom, a moment apart. */
.gps-taped { position: relative; }
.gps-strip { --gps-tape: var(--color-own-masking-tape, #3b79b9); position: absolute; z-index: 3; pointer-events: none; opacity: 0; background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .10) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 18%), color-mix(in srgb, var(--gps-tape), #000 9%)); filter: var(--torn); transition: transform calc(var(--speed) * 1.31) cubic-bezier(.34, 1.4, .64, 1), opacity calc(var(--speed) * .95) ease; }
.gps-strip--top, .gps-strip--bottom { left: calc(var(--strip) * -.86); right: calc(var(--strip) * -.86); height: var(--strip); transform: scaleX(0); }
.gps-strip--top { top: calc(var(--strip) / -2); transform-origin: left center; }
.gps-strip--bottom { bottom: calc(var(--strip) / -2); transform-origin: right center; }
.gps-strip--left, .gps-strip--right { top: calc(var(--strip) * -.86); bottom: calc(var(--strip) * -.86); width: var(--strip); transform: scaleY(0); }
.gps-strip--left { left: calc(var(--strip) / -2); transform-origin: center bottom; }
.gps-strip--right { right: calc(var(--strip) / -2); transform-origin: center top; }
/* stuck: under the pointer where there is one, as it scrolls in where the script says so, or always */
.gps-taped.is-stuck .gps-strip, [data-tape-stick="always"] .gps-strip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { [data-tape-stick="pointer"] .gps-taped:hover .gps-strip { opacity: 1; transform: none; } }
.gps-taped.is-stuck .gps-strip, [data-tape-stick="pointer"] .gps-taped:hover .gps-strip { transition: transform var(--speed) cubic-bezier(.34, 1.4, .64, 1) var(--delay, 0s), opacity calc(var(--speed) * .67) ease var(--delay, 0s); }
.gps-strip--top { --delay: calc(var(--speed) * .19); }
.gps-strip--right { --delay: calc(var(--speed) * .38); }
.gps-strip--bottom { --delay: calc(var(--speed) * .57); }
[data-tape-stick="always"] .gps-strip { transition: none; }
/* before the script has run, or with none, tape that waits for it is simply there */
[data-tape-stick="scroll"]:not([data-tape-ready]) .gps-strip { opacity: 1; transform: none; }
@media not all and (hover: hover) and (pointer: fine) { [data-tape-stick="pointer"]:not([data-tape-ready]) .gps-strip { opacity: 1; transform: none; } }
/* less motion: the tape is simply there */
@media (prefers-reduced-motion: reduce) { .gps-strip { opacity: 1; transform: none; transition: none; } }

/* sections/own-taped-photos.liquid */
/* The original's Recent work: three photos 300 pixels tall in a row, 24 pixels apart, the middle one
   34 pixels lower, with a soft shadow under each, one under another below 860 pixels. */
/* the strips reach past each photo, beyond the screen's edge on a phone with a wide strip, and are cut
   there rather than widening the page */
.taped-photos { overflow-x: clip; }
/* the heading at the original's size, 36 pixels on a computer down to 26 on a phone, or the part's own */
.taped-photos .taped-photos__heading { letter-spacing: -.02em; margin-bottom: 2.125rem; font-size: clamp(calc(var(--heading-size, 36px) * .7222), 5vw, var(--heading-size, 36px)); }
.taped-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 53.75rem) {
  .taped-photos__grid { grid-template-columns: repeat(3, 1fr); }
  .taped-photo:nth-child(3n + 2) { margin-top: var(--drop); }
}
.taped-photo__figure { margin: 0; }
.taped-photo__frame { position: relative; border-radius: 3px; }
.taped-photo__photo { height: var(--photo-height); overflow: hidden; border-radius: 3px; box-shadow: 0 14px 34px -18px rgb(20 30 50 / .35); background: color-mix(in srgb, var(--band-fg, var(--color-foreground)) 10%, transparent); }
.taped-photo__photo img { width: 100%; height: 100%; object-fit: cover; }
.taped-photo__caption { margin-top: .875rem; font-weight: 600; font-size: .8125rem; color: var(--band-muted, var(--color-muted)); }
/* the builder's note that a photo has no description stands where a caption would; under a taped photo
   whichever comes first starts below the tape, whose left and right strips reach furthest, .86 of the
   strip's width past the photo, so neither is ever under it at any strip width */
.taped-photo__frame + .empty-note { margin-top: .875rem; }
.taped-photo__frame.gps-taped + :is(.empty-note, .taped-photo__caption) { margin-top: calc(var(--strip) * .86 + .875rem); }

/* The strips, as on GPS's taped cards: torn tape, the strip's width thick, sticking on left, top,
   right then bottom, under the pointer, as the photo scrolls in, or always. */
.gps-taped { position: relative; }
.gps-strip { --gps-tape: var(--color-own-masking-tape, #3b79b9); position: absolute; z-index: 3; pointer-events: none; opacity: 0; background-image: repeating-linear-gradient(91deg, rgb(255 255 255 / .10) 0 1px, transparent 1px 6px), linear-gradient(180deg, color-mix(in srgb, var(--gps-tape), #fff 18%), color-mix(in srgb, var(--gps-tape), #000 9%)); filter: var(--torn); transition: transform calc(var(--speed) * 1.31) cubic-bezier(.34, 1.4, .64, 1), opacity calc(var(--speed) * .95) ease; }
.gps-strip--top, .gps-strip--bottom { left: calc(var(--strip) * -.86); right: calc(var(--strip) * -.86); height: var(--strip); transform: scaleX(0); }
.gps-strip--top { top: calc(var(--strip) / -2); transform-origin: left center; }
.gps-strip--bottom { bottom: calc(var(--strip) / -2); transform-origin: right center; }
.gps-strip--left, .gps-strip--right { top: calc(var(--strip) * -.86); bottom: calc(var(--strip) * -.86); width: var(--strip); transform: scaleY(0); }
.gps-strip--left { left: calc(var(--strip) / -2); transform-origin: center bottom; }
.gps-strip--right { right: calc(var(--strip) / -2); transform-origin: center top; }
.gps-taped.is-stuck .gps-strip, [data-tape-stick="always"] .gps-strip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { [data-tape-stick="pointer"] .gps-taped:hover .gps-strip { opacity: 1; transform: none; } }
.gps-taped.is-stuck .gps-strip, [data-tape-stick="pointer"] .gps-taped:hover .gps-strip { transition: transform var(--speed) cubic-bezier(.34, 1.4, .64, 1) var(--delay, 0s), opacity calc(var(--speed) * .67) ease var(--delay, 0s); }
.gps-strip--top { --delay: calc(var(--speed) * .19); }
.gps-strip--right { --delay: calc(var(--speed) * .38); }
.gps-strip--bottom { --delay: calc(var(--speed) * .57); }
[data-tape-stick="always"] .gps-strip { transition: none; }
[data-tape-stick="scroll"]:not([data-tape-ready]) .gps-strip { opacity: 1; transform: none; }
@media not all and (hover: hover) and (pointer: fine) { [data-tape-stick="pointer"]:not([data-tape-ready]) .gps-strip { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gps-strip { opacity: 1; transform: none; transition: none; } }

/* sections/page-title.liquid */
/* the words are capped, not the container, so the title keeps the page's left edge */
.page-title__inner { --stack: .75rem; }
.page-title__inner > * { max-width: 44rem; }
.align-centre .page-title__inner > * { margin-inline: auto; }

/* sections/people.liquid */
.people__inner { display: grid; gap: 2rem 3rem; }
@media (min-width: 60rem) { .people:not(.people--above) .people__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }
.people__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(min(var(--people-across), 2), minmax(0, 1fr)); }
@media (min-width: 48rem) { .people__grid { grid-template-columns: repeat(var(--people-across), minmax(0, 1fr)); } }
.people__person { --stack: .6rem; }
.people__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--people-corners); }
.people--square .people__photo { aspect-ratio: 1; }
.people--round .people__photo { aspect-ratio: 1; border-radius: 50%; }
.people--mono .people__photo { filter: grayscale(1); transition: filter .3s ease; }
@media (hover: hover) { .people--mono .people__person:hover .people__photo { filter: none; } }
@media (prefers-reduced-motion: reduce) { .people--mono .people__photo { transition: none; } }
.people__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 0; }
.people .people__role { font-size: var(--text-small); color: var(--band-accent); letter-spacing: .08em; font-weight: 600; }
.people.people--roles-plain .people__role { color: var(--band-muted); }
.people--roles-capitals .people__role { text-transform: uppercase; }

/* sections/photo-gallery.liquid */
.photo-gallery__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.photo-gallery__top > .text-title { margin: 0; }
.photo-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .photo-gallery__grid { grid-template-columns: repeat(3, 1fr); } .photo-gallery--mosaic { grid-template-columns: repeat(4, 1fr); } }
.photo-gallery--mosaic .photo-gallery__tile:first-child { grid-column: span 2; grid-row: span 2; }
.photo-gallery__photo { position: relative; margin: 0; height: 100%; display: grid; gap: .4rem; }
.photo-gallery__open { display: block; height: 100%; border-radius: var(--corners); overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.photo-gallery__open img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-gallery__caption { margin: 0; }
.photo-gallery--caption-on .photo-gallery__caption { position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); padding: .15rem .45rem; border-radius: .25rem; background: color-mix(in srgb, var(--band-bg, var(--color-background)) 85%, transparent); color: var(--band-fg, var(--color-foreground)); pointer-events: none; }
/* Taped: each photo held on by a strip of tape across its top, a little crooked, every other one the other way. */
.photo-gallery--taped { row-gap: calc(var(--space) + 1.25rem); padding-top: .75rem; }
.photo-gallery--taped .photo-gallery__photo { rotate: -1deg; }
.photo-gallery--taped .photo-gallery__tile:nth-child(even) .photo-gallery__photo { rotate: 1.2deg; }
.photo-gallery--taped .photo-gallery__photo::before { content: ""; position: absolute; z-index: 1; top: -.6rem; left: 50%; width: 4.5rem; height: 1.2rem; translate: -50% 0; rotate: -4deg; background: color-mix(in srgb, var(--band-accent, var(--color-accent)) 55%, transparent); }
/* the rest wait behind the line once the script has run; without it every photo shows */
[data-photo-ready] .photo-gallery__tile--more:not(.is-shown) { display: none; }
.photo-gallery__more-line { margin: 0; }
.photo-gallery__more { font: inherit; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.photo-view { max-width: min(64rem, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-box); background: var(--color-background); color: var(--color-foreground); }
.photo-view::backdrop { background: color-mix(in srgb, var(--color-foreground) 80%, transparent); }
.photo-view img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
.photo-view__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.photo-view__foot p { margin: 0; }
.photo-view__bar { display: flex; gap: .4rem; }
.photo-view__bar button { font: inherit; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .4rem; background: transparent; color: inherit; cursor: pointer; }

/* sections/policy-page.liquid */
/* the words are capped, not the container, so the title keeps the page's left edge */
.policy-page__inner { --stack: 1rem; }
.policy-page__inner > * { max-width: 44rem; }
.align-centre .policy-page__inner > * { margin-inline: auto; }
.policy-page__inner > .policy-page__heading { margin-top: 2rem; }
.policy-page__headings { padding: 1rem 1.25rem; }
.policy-page__headings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.policy-page__headings a { text-underline-offset: .2em; }

/* sections/price-list.liquid */
.price-list__inner { max-width: 44rem; }
.price-list__rows { margin: 0; display: grid; gap: .25rem; }
.price-list__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.price-list__row dt { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.price-list__row dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* sections/prices.liquid */
.prices__groups { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 48rem) { .prices__groups { grid-template-columns: repeat(min(var(--prices-across), 2), minmax(0, 1fr)); align-items: start; } }
@media (min-width: 64rem) { .prices__groups { grid-template-columns: repeat(var(--prices-across), minmax(0, 1fr)); } }
.prices__group { --stack: .75rem; }
.prices .prices__group-name { margin: 0; font-size: var(--text-small); padding-bottom: .6rem; color: var(--band-fg); font-weight: 600; letter-spacing: .12em; }
.prices--capitals .prices__group-name { text-transform: uppercase; }
.prices--group-line .prices__group-name { border-bottom: 1px solid var(--band-accent); }
.prices__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--prices-space); }
.prices__row { display: grid; gap: .25rem; padding-block: calc(var(--prices-space) / 2); }
.prices__line { display: flex; align-items: baseline; gap: .75rem; margin: 0; }
.prices--dots .prices__line::after { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 1px dotted color-mix(in srgb, currentColor 40%, transparent); }
.prices__price { order: 2; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--prices-size); color: var(--band-accent); }
.prices--plain .prices__price { color: inherit; }
.prices__more { display: flex; gap: .75rem; margin: 0; color: var(--band-muted); }
.prices__time { flex: none; color: var(--band-accent); }
.prices--plain .prices__time { color: inherit; }
.prices__note { margin: 0; color: var(--band-muted); }

/* sections/pricing.liquid */
.pricing__grid { --row-gap: 1.5rem; display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 40rem) { .pricing__grid--two, .pricing__grid--three, .pricing__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .pricing__grid--three { grid-template-columns: repeat(3, 1fr); } .pricing__grid--four { grid-template-columns: repeat(4, 1fr); } }

/* sections/products.liquid */
.products__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.products__words { display: grid; gap: .35rem; }
.products__words > * { margin: 0; }
.products__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(min(var(--across), 2), 1fr); }
@media (min-width: 64rem) { .products__grid { grid-template-columns: repeat(var(--across), 1fr); } }
.product-card { display: flex; flex-direction: column; gap: .5rem; }
.product-card > * { margin: 0; }
.product-card__photo { border-radius: var(--corners); overflow: hidden; aspect-ratio: 4 / 5; background: color-mix(in srgb, currentColor 8%, transparent); }
.products--square .product-card__photo { aspect-ratio: 1; }
.products--three_two .product-card__photo { aspect-ratio: 3 / 2; }
.product-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .25rem; }
.product-card__name { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.15; }
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__price { margin: 0; font-weight: 600; white-space: nowrap; }
.products--price-accent .product-card__price { color: var(--band-accent, var(--color-accent)); }
.product-card__when { justify-self: start; align-self: flex-start; padding: .1rem .5rem; border-radius: .25rem; background: color-mix(in srgb, var(--band-accent, var(--color-accent)) 14%, transparent); color: var(--band-fg, var(--color-foreground)); }

/* sections/project-cards.liquid */
.project-cards__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.project-cards__top > .text-title { margin: 0; }
.project-cards__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .project-cards__grid { grid-template-columns: repeat(min(var(--across), 2), 1fr); } }
@media (min-width: 64rem) { .project-cards__grid { grid-template-columns: repeat(var(--across), 1fr); } }
.project-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--corners); border: 1px solid color-mix(in srgb, var(--band-fg, var(--color-foreground)) 12%, transparent); transition: transform .2s, box-shadow .2s; }
.project-cards--page .project-card { background: var(--color-background); color: var(--color-foreground); }
.project-cards--soft .project-card { background: var(--color-soft-band); color: var(--color-foreground); }
.project-cards--none .project-card { background: transparent; }
.project-card__picture { background: color-mix(in srgb, currentColor 8%, transparent); aspect-ratio: 3 / 2; }
.project-cards--wide .project-card__picture { aspect-ratio: 16 / 9; }
.project-cards--square .project-card__picture { aspect-ratio: 1; }
.project-card__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card__body { --stack: .6rem; padding: 1.25rem; flex: 1; }
.project-card__title { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; }
.project-card__title a { color: inherit; text-decoration: none; }
.project-card__more { margin: 0; margin-top: auto; }
.project-card .card-chips { margin: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .project-cards--lift .project-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color-foreground) 45%, transparent); } }

/* sections/questions.liquid */
.questions__inner { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 48rem) { .questions--beside:not(.questions--empty) { grid-template-columns: 2fr 3fr; align-items: start; } }
.questions__head { --stack: .9rem; }
.questions__head > * { margin: 0; }
.questions__kicker { letter-spacing: .16em; text-transform: uppercase; color: var(--band-accent, var(--color-accent)); }
.questions--empty { margin-bottom: 1.5rem; }
.questions__list { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.questions__item { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding-block: var(--q-gap); }
.questions__question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--q-size); line-height: 1.35; }
.questions__question::-webkit-details-marker { display: none; }
.questions__answer { padding-top: .6rem; }
.questions__answer > * { margin: 0; }
.questions__answer > * + * { margin-top: .6em; }
.questions__sign { flex: none; position: relative; width: .8rem; height: .8rem; }
.questions--sign-accent .questions__sign { color: var(--band-accent, var(--color-accent)); }
.questions--sign-text .questions__sign { color: inherit; }
.questions--sign-plus .questions__sign::before, .questions--sign-plus .questions__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.questions--sign-plus .questions__sign::after { rotate: 90deg; transition: rotate .2s; }
.questions--sign-plus .questions__item[open] .questions__sign::after { rotate: 0deg; }
.questions--sign-arrow .questions__sign::before { content: ""; position: absolute; inset: 15%; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -20%; transition: rotate .2s; }
.questions--sign-arrow .questions__item[open] .questions__sign::before { rotate: 225deg; translate: 0 20%; }
@media (prefers-reduced-motion: reduce) { .questions__sign::before, .questions__sign::after { transition: none; } }

/* sections/record-body.liquid */
.record-body__inner { --stack: 1rem; max-width: 44rem; }
.align-centre .record-body__inner { margin-inline: auto; }

/* sections/record-booking.liquid */
.record-booking__inner { --stack: 1rem; max-width: 44rem; }
.record-booking__inner > * { margin: 0; }
.record-booking__line { color: var(--band-muted); }
.record-booking__act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.record-booking__act > * { margin: 0; }
.record-booking__phone.text-small { color: var(--band-muted); }
.record-booking__phone a { color: inherit; }
.align-centre .record-booking__inner { margin-inline: auto; text-align: center; }
.align-centre .record-booking__act { justify-content: center; }
.record-booking--buy .record-buy { max-width: 36rem; }

/* sections/record-details.liquid */
.record-details__list { display: grid; gap: .75rem; margin: 0; }
.record-details__row { display: grid; gap: .15rem; }
.record-details__row dd { margin: 0; }
.record-details__inner { --stack: 2rem; }
.record-details__list { max-width: 44rem; text-align: left; }
.align-centre .gallery-show__thumbs { justify-content: safe center; }
.align-centre .record-details__list, .align-centre .section-heading { margin-inline: auto; }
.record-details__gallery { max-width: 64rem; width: 100%; }
.align-centre .record-details__gallery { margin-inline: auto; }
.record-details__gallery-label { margin: 0 0 .5rem; }

/* slideshow */
.gallery-show { display: grid; gap: .75rem; }
.gallery-show__stage { position: relative; container-type: inline-size; }
.gallery-show__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius-box); scrollbar-width: none; }
.gallery-show__track::-webkit-scrollbar { display: none; }
/* each slide is its photo in a frame of one shape, so the photos stay put whether a caption sits under them or not */
.gallery-show__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; }
.gallery-show__frame { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius-box); overflow: hidden; background: color-mix(in srgb, currentColor 5%, transparent); }
.gallery-show__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* a video among the photos fills the same frame, as a photo does */
.gallery-show__frame > .lib-video__clip { width: 100%; height: 100%; object-fit: contain; }
.gallery-show__thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gallery-grid__tile .lib-video__clip { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery-strip__clip > .lib-video__clip { height: 22rem; width: auto; max-width: 85vw; object-fit: cover; border-radius: var(--radius-box); }
@media (max-width: 40rem) { .gallery-strip__clip > .lib-video__clip { height: 14rem; } }
/* in the strip the video and its button sit in a box as wide as the video, so the button stays on the
   video when a caption makes the column wider than a tall clip */
.gallery-strip__clip { justify-self: start; }
.align-centre .gallery-strip__clip { justify-self: center; }
/* in the grid its button to pause it sits on the video's top corner, clear of a caption under it */
.gallery-grid__item > .lib-video__toggle { top: .6rem; bottom: auto; }
.gallery-show__caption, .gallery-show__slide > .empty-note { margin: 0; padding-top: .6rem; }
/* the arrows sit halfway down the photo, whatever its caption adds under it */
.gallery-show__arrow { display: none; position: absolute; top: 50%; top: calc(100cqw * 5 / 16); translate: 0 -50%; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 0; background: var(--color-background); color: var(--color-foreground); box-shadow: 0 2px 10px rgb(0 0 0 / .18); cursor: pointer; place-items: center; }
.gallery-show__arrow--prev { left: .75rem; }
.gallery-show__arrow--prev svg { rotate: 180deg; }
.gallery-show__arrow--next { right: .75rem; }
.gallery-show.is-ready .gallery-show__arrow { display: grid; }
/* room round the thumbnails for the current one's outline, which the row's scrolling would cut off,
   taken back by the margin so the thumbnails stay where they were */
.gallery-show__thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: 4px 4px .25rem; margin: -4px -4px 0; }
.gallery-show__thumb { flex: 0 0 5.5rem; aspect-ratio: 4 / 3; border-radius: calc(var(--radius-box) / 2); overflow: hidden; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; }
.gallery-show__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery-show__thumb.is-current, .gallery-show__thumb:hover { opacity: 1; }
.gallery-show__thumb.is-current { outline-color: var(--color-accent); }

/* even grid, opening a photo large */
.gallery-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid__item { margin: 0; display: grid; gap: .4rem; align-content: start; }
.gallery-grid__tile { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-box); }
.gallery-grid__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery-grid__caption { margin: 0; }
/* as wide as its photo, so a long caption wraps under it rather than widening the view, though never
   so narrow that a caption under a tall photo runs down a thin column */
.gallery-view { border: 0; padding: 0; width: min-content; max-width: 95vw; max-height: 92vh; background: transparent; }
.gallery-view:has(.gallery-view__caption:not([hidden])) { min-width: min(95vw, 20rem); }
/* nearly black, so the page's own captions behind no longer show beside the view's */
.gallery-view::backdrop { background: rgb(0 0 0 / .95); }
/* the photo gives up height to the words and the buttons under it, so a tall photo with a long caption
   still has all three in the view; only on a screen too short for that does the view scroll */
.gallery-view[open] { display: flex; flex-direction: column; }
.gallery-view video { flex: 0 1 auto; min-height: min(12rem, 40vh); max-width: 95vw; max-height: calc(92vh - 8rem); width: auto; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-box); }
.gallery-view img { flex: 0 1 auto; min-height: min(12rem, 40vh); max-width: 95vw; max-height: calc(92vh - 8rem); width: auto; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-box); }
.gallery-view__words, .gallery-view__bar { flex: none; }
.gallery-view__words { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .75rem; color: #fff; font-size: var(--text-small); }
.gallery-view__words p { margin: 0; }
.gallery-view__caption { flex: 1 1 12rem; }
.gallery-view__words .gallery-view__count { flex: none; margin: 0 0 0 auto; white-space: nowrap; color: rgb(255 255 255 / .75); }
.gallery-view__bar { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.gallery-view__bar button { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 0; background: #fff; color: #111; cursor: pointer; font-size: 1.1rem; }
/* a phone on its side: the photo takes the full height, and the words and the buttons stand beside it
   rather than under it, where they left the photo a strip and most of the screen empty */
@media (orientation: landscape) and (max-height: 30rem) {
  .gallery-view[open] { display: grid; grid-template-columns: auto minmax(10rem, 16rem); grid-template-rows: 1fr auto; column-gap: 1rem; width: auto; min-width: 0; }
  .gallery-view[open] img, .gallery-view[open] video { grid-column: 1; grid-row: 1 / 3; min-height: 0; max-height: 92vh; max-width: calc(95vw - 17rem); margin: 0; }
  .gallery-view[open] .gallery-view__words { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .gallery-view[open] .gallery-view__bar { grid-column: 2; grid-row: 2; justify-content: flex-start; }
}

/* strip */
.gallery-strip { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
/* each photo with its caption under it, as wide as the photo, though never so narrow that a caption
   under a tall photo runs down a thin column and leaves the strip tall and empty under every other photo;
   the builder's note that a photo has no description is given the same room */
.gallery-strip__item { flex: 0 0 auto; width: min-content; margin: 0; display: grid; gap: .4rem; align-content: start; scroll-snap-align: start; }
.gallery-strip__item:has(> figcaption, > .empty-note) { min-width: min(85vw, 20rem); }
.align-centre .gallery-strip__img { justify-self: center; }
.gallery-strip__img { height: 22rem; width: auto; max-width: 85vw; object-fit: cover; border-radius: var(--radius-box); }
.gallery-strip__caption { margin: 0; }
@media (max-width: 40rem) { .gallery-strip__img { height: 14rem; } }
@media (min-width: 48rem) { .record-details__row { grid-template-columns: 12rem 1fr; gap: 1rem; } }

/* sections/record-facts.liquid */
.align-centre .record-facts__inner > .text-title { text-align: center; }

/* sections/record-header.liquid */
.record-header__inner { display: grid; gap: 2rem; align-items: center; }
.record-header__words { --stack: .75rem; }
.record-header__back { padding-inline: 0; }
.record-header__meta { display: flex; flex-wrap: wrap; gap: 1rem; }
.record-header__photo img { width: 100%; height: auto; display: block; }
@media (min-width: 48rem) {
  .record-header__inner--beside { grid-template-columns: 1fr 1fr; }
  .record-header__inner--beside_reversed { grid-template-columns: 1fr 1fr; }
  .record-header__inner--beside_reversed .record-header__words { order: 2; }
}
.record-header__inner--words > *, .record-header__inner--above > * { max-width: 44rem; }
.align-centre .record-header__inner--words > *, .align-centre .record-header__inner--above > * { margin-inline: auto; }

/* sections/record-more.liquid */
.record-more__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .record-more__grid { grid-template-columns: repeat(min(var(--across), 2), 1fr); } }
@media (min-width: 64rem) { .record-more__grid { grid-template-columns: repeat(var(--across), 1fr); } }
.record-more__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--corners); border: 1px solid color-mix(in srgb, var(--band-fg, var(--color-foreground)) 12%, transparent); }
.record-more--page .record-more__card { background: var(--color-background); color: var(--color-foreground); }
.record-more--soft .record-more__card { background: var(--color-soft-band); color: var(--color-foreground); }
.record-more--none .record-more__card { background: transparent; border-color: transparent; }
.record-more__picture { aspect-ratio: 4 / 3; background: color-mix(in srgb, currentColor 8%, transparent); }
.record-more__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.record-more__body { --stack: .5rem; padding: 1.25rem; flex: 1; }
.record-more__body > * { margin: 0; }
.record-more--none .record-more__body { padding-inline: 0; }
.record-more__title { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-body); line-height: 1.25; }
.record-more__price { color: var(--band-accent, var(--color-accent)); }

/* sections/record-others.liquid */
.record-others__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.record-other__card { display: grid; gap: .25rem; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); }
@media (min-width: 40rem) { .record-others__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .record-others__grid { grid-template-columns: repeat(3, 1fr); } }
/* A record with a photo shows it as a thumbnail across the top of its card; the photo is decoration
   beside the title, so it has an empty alt rather than repeating the name. */
.record-other__card--photo { padding-top: 0; overflow: hidden; }
.record-other__photo { width: calc(100% + 2.5rem); max-width: none; margin: 0 -1.25rem .5rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; }
/* a badge on the photo's corner (base.css) measured from the photo's own edges, which reach past the
   card's padding at the sides and stop short of the room under it */
.record-other__card { --photo-badge-side: -.625rem; --photo-badge-foot: 1.125rem; }

/* sections/record-photos.liquid */
.record-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .record-photos__grid { grid-template-columns: repeat(min(var(--across), 2), 1fr); } }
@media (min-width: 64rem) { .record-photos__grid { grid-template-columns: repeat(var(--across), 1fr); } }
.record-photos__photo { margin: 0; display: grid; gap: .5rem; }
.record-photos__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--corners); background: color-mix(in srgb, currentColor 8%, transparent); }
.record-photos--square .record-photos__photo img { aspect-ratio: 1; }
.record-photos--wide .record-photos__photo img { aspect-ratio: 16 / 9; }
.record-photos--natural .record-photos__photo img { aspect-ratio: auto; }
.record-photos__caption { margin: 0; }

/* sections/record-top.liquid */
.record-top__inner { display: grid; gap: 2rem; }
.record-top__words { --stack: 1rem; }
.record-top__words > * { margin: 0; }
.record-top__line { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.record-top__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; }
.record-top__text { --stack: .75rem; flex: 1 1 24rem; max-width: 44rem; }
.record-top__text > * { margin: 0; }
.record-top__button { flex: 0 0 auto; }
.record-top__when { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; }
.record-top__hero .record-top__when { color: inherit; }
.record-top__empty { margin-top: 2rem; }
.record-top__photo img { display: block; width: 100%; height: auto; border-radius: var(--record-top-corners); }
/* the hero: the photo across the top, the label and the name on a dark wash at its foot, in white words
   whatever band the part sits on, as a hero over a photo keeps them */
.record-top.record-top--hero { padding-top: 0; }
.record-top__hero { position: relative; display: flex; align-items: flex-end; min-height: min(var(--record-top-height), 70vh); margin-bottom: 2rem; overflow: hidden; color: #fff; --band-fg: #fff; --band-muted: rgb(255 255 255 / .8); }
.record-top__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.record-top__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .7)); }
.record-top__over { --stack: .75rem; position: relative; z-index: 1; width: 100%; padding-block: 1.5rem; }
.record-top__over > * { margin: 0; }
.align-centre .record-top__words, .align-centre .record-top__over { text-align: center; justify-items: center; }
.align-centre .record-top__body { justify-content: center; }
@media (min-width: 48rem) {
  .record-top--beside .record-top__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .record-top--beside.record-top--no-photos .record-top__inner:not(:has(> .empty-state)) { grid-template-columns: minmax(0, 1fr); }
}

/* sections/record-words.liquid */
.record-words__inner { --stack: 1.25rem; max-width: var(--record-words-width, 45rem); }
.record-words__inner > * { margin: 0; }
.align-centre .record-words__inner { margin-inline: auto; }

/* sections/records-list.liquid */
.records-list__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.records-list__card { --stack: .5rem; }
/* A column, so the badge after the title in the page's code can show above it (base.css). The gap
   is the stack's own room between things. */
.records-list__card.stack { display: flex; flex-direction: column; gap: var(--stack); }
.records-list__card.stack > * { margin-top: 0; }
.records-list__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.records-list--framed .records-list__card, .records-list--numbered .records-list__card { padding: 1.25rem; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); background: color-mix(in srgb, currentColor 4%, transparent); }
.records-list__number { display: block; font-family: var(--font-heading); font-size: var(--text-small); letter-spacing: .06em; color: var(--band-muted, var(--color-muted)); }
@media (min-width: 40rem) { .records-list__grid--two, .records-list__grid--three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .records-list__grid--three { grid-template-columns: repeat(3, 1fr); } }

/* sections/reviews.liquid */
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.reviews__average { display: flex; align-items: center; gap: .75rem; margin: 0; }
.reviews__average-number { color: var(--band-accent); line-height: 1; }
.reviews__average-words { display: grid; gap: .15rem; }
.reviews__stars { display: inline-flex; gap: .15rem; margin: 0; color: var(--band-accent); }
.reviews--stars-plain .reviews__stars { color: inherit; }
.reviews__star svg { display: block; width: .9em; height: .9em; fill: currentColor; stroke: none; }
.reviews__star--off { opacity: .3; }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--reviews-gap); }
.review-card { --stack: 1rem; padding: 1.5rem; border-radius: var(--reviews-corners); background: color-mix(in srgb, var(--band-fg) 5%, var(--band-bg)); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.reviews--on-band .review-card { background: var(--color-band); color: var(--color-band-foreground); }
.reviews--plain .review-card { background: none; border-color: transparent; padding-inline: 0; }
.review-card__quote { margin: 0; font-size: var(--reviews-quote); line-height: 1.4; }
.review-card__quote::before { content: "\201C"; } .review-card__quote::after { content: "\201D"; }
.review-card__who { display: flex; align-items: center; gap: .75rem; margin: 0; }
.review-card__who > span:last-child { display: grid; }
.review-card__initial { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in srgb, currentColor 10%, transparent); color: var(--band-accent); }
.review-card__place { color: var(--band-muted); }
@media (min-width: 40rem) { .reviews--cards .reviews__list { grid-template-columns: repeat(min(var(--reviews-across), 2), minmax(0, 1fr)); } }
@media (min-width: 60rem) { .reviews--cards .reviews__list { grid-template-columns: repeat(var(--reviews-across), minmax(0, 1fr)); } }
.reviews--one .reviews__list { grid-auto-flow: column; grid-auto-columns: min(85%, 36rem); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.reviews--one .review-card { scroll-snap-align: start; }
.reviews--big .reviews__list { max-width: 48rem; }
.reviews--big .review-card { background: none; border: 0; padding: 0; }
.reviews--big .review-card__quote { font-size: calc(var(--reviews-quote) * 1.6); }

/* sections/rich-text.liquid */
.rich-text__inner { --stack: 1rem; max-width: 40rem; }
.rich-text.align-centre .rich-text__inner { margin-inline: auto; }

/* sections/search-box.liquid */
/* The Search box (V4-D107). Its sizes are its own settings' steps, written for each box (above). */
.search-box[hidden], .search-box__clear[hidden] { display: none; }
.search-box__field { display: flex; align-items: center; gap: .5rem; width: min(100%, var(--search-width, 460px)); min-height: var(--search-height, 48px); padding-inline: .9rem .5rem; border: var(--search-border, 1.5px) solid var(--band-fg); border-radius: var(--search-corners, 10px); color: var(--band-fg); }
.align-centre .search-box__field { margin-inline: auto; }
.search-box--background .search-box__field { background: var(--color-background); color: var(--color-foreground); }
.search-box--soft .search-box__field { background: var(--color-soft-band); color: var(--color-foreground); }
.search-box--band .search-box__field { background: var(--color-band); color: var(--color-band-foreground); }
.search-box__field:focus-within { outline: 2px solid var(--band-accent); outline-offset: 2px; }
.search-box__input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; padding: .5rem 0; outline: none; }
.search-box__input::-webkit-search-cancel-button { display: none; }
.search-box__clear { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; }
.search-box__said { margin: 0; min-height: 1.5em; color: var(--band-muted); }
.search-box--sticky { position: sticky; top: 0; z-index: 2; background: var(--band-bg); }

/* sections/services.liquid */
.services__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.service { --stack: .35rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); }
.service__meta { display: flex; gap: 1rem; }
.service__price { font-weight: 700; color: var(--band-fg); }
.service__link { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
@media (min-width: 40rem) { .services__grid--two, .services__grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .services__grid--three { grid-template-columns: repeat(3, 1fr); } }

/* sections/stats-row.liquid */
.stats-row__grid { --gap: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (min-width: 40rem) { .stats-row__grid { grid-template-columns: repeat(var(--across), 1fr); } }
.stats-row__grid--centre { text-align: center; }
.stats-row__grid .stat__value { font-size: clamp(1.75rem, 10vw, var(--number-size)); line-height: 1; }
/* A line before every number, the first in each row clipped away, so the lines sit between them however many fit across. */
.stats-row__grid--lines { overflow: hidden; }
.stats-row__grid--lines > .stat { border-inline-start: 1px solid color-mix(in srgb, currentColor 18%, transparent); margin-inline-start: calc(var(--gap) / -2 - 1px); padding-inline-start: calc(var(--gap) / 2); }

/* sections/stats.liquid */
.stats__grid { --row-gap: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .stats__grid--two, .stats__grid--three, .stats__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .stats__grid--three { grid-template-columns: repeat(3, 1fr); } .stats__grid--four { grid-template-columns: repeat(4, 1fr); } }

/* sections/steps.liquid */
.steps__list { --row-gap: 1.5rem; display: grid; gap: 1.5rem; counter-reset: step; }
.step { --stack: .35rem; position: relative; padding-left: 3.25rem; counter-increment: step; }
.step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-foreground); font-weight: 700; }
.band-accent .step::before { background: var(--color-accent-foreground); color: var(--color-accent); }
@media (max-width: 47.99rem) { .align-centre .step { text-align: left; } }
@media (min-width: 48rem) {
  .steps__list--row { display: flex; flex-wrap: wrap; }
  .steps__list--row > .step { flex: 1 1 0; }
  .steps__list--row .step { padding-left: 0; padding-top: 3rem; }
  .steps__list--row .step::before { top: 0; }
  .align-centre .steps__list--row .step::before { left: 50%; transform: translateX(-50%); }
}

/* sections/tag-cards.liquid */
.tag-cards__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.tag-card { display: flex; flex-direction: column; overflow: hidden; }
.tag-card__photo { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.tag-card__words { --stack: .375rem; padding: 1rem 0; }
.tag-cards--framed .tag-card { border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-box); }
.tag-cards--framed .tag-card__words { padding: 1rem; }
@media (min-width: 40rem) { .tag-cards__grid--two, .tag-cards__grid--three, .tag-cards__grid--four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .tag-cards__grid--three { grid-template-columns: repeat(3, 1fr); } .tag-cards__grid--four { grid-template-columns: repeat(4, 1fr); } }

/* sections/tag-page.liquid */
.tag-page__back { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-page__top { display: grid; gap: 1.5rem; align-items: center; }
.tag-page__photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tag-page__top--above .tag-page__photo { order: -1; }
@media (min-width: 48rem) { .tag-page__top--right.tag-page__top--photo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tag-page__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.tag-page__item { display: flex; gap: 1rem; align-items: center; }
.tag-page__item-photo { width: 4rem; height: 4rem; object-fit: cover; flex: none; }
.tag-page__item-words { --stack: .25rem; }
@media (min-width: 40rem) { .tag-page__list--two, .tag-page__list--three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .tag-page__list--three { grid-template-columns: repeat(3, 1fr); } }
/* with the hero across the top, the part starts at the hero and the words follow it */
.tag-page.tag-page--hero { padding-top: 0; }
.tag-page--hero .tag-hero { margin-bottom: 2rem; }

/* sections/team.liquid */
.team__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.person { --stack: .35rem; }
@media (min-width: 48rem) { .team__grid { grid-template-columns: repeat(4, 1fr); } }

/* sections/testimonials.liquid */
.testimonials__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.review { --stack: .6rem; padding: 1.5rem; border-radius: var(--radius-box); background: color-mix(in srgb, var(--band-fg) 5%, var(--band-bg)); }
.review__quote { margin: 0; }
.review__quote::before { content: "\201C"; } .review__quote::after { content: "\201D"; }
.review__rating { letter-spacing: .1em; }
.review__star--off { opacity: .3; }
@media (min-width: 40rem) { .testimonials__grid--two, .testimonials__grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .testimonials__grid--three { grid-template-columns: repeat(3, 1fr); } }

/* sections/timeline.liquid */
.timeline__list { --row-gap: 2rem; position: relative; display: grid; gap: 2rem; text-align: left; }
/* the line runs from each point to the next, so a heading above the points is never crossed by it */
.timeline__list .milestone:has(+ .milestone)::after { content: ""; position: absolute; top: .75rem; bottom: calc(-1 * var(--row-gap) - .3rem); left: .4rem; width: .125rem; background: color-mix(in srgb, currentColor 20%, transparent); }
@media (min-width: 48rem) {
  .timeline__list--alternate .milestone:has(+ .milestone)::after { left: auto; right: -.0625rem; }
  .timeline__list--alternate .milestone:nth-child(even):has(+ .milestone)::after { right: auto; left: -.0625rem; }
  .timeline__list--alternate .milestone { width: 50%; padding-left: 0; padding-right: 2.5rem; text-align: right; }
  .timeline__list--alternate .milestone::before { left: auto; right: -.45rem; }
  .timeline__list--alternate .milestone:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 2.5rem; text-align: left; }
  .timeline__list--alternate .milestone:nth-child(even)::before { right: auto; left: -.45rem; }
}

/* sections/trust-badges.liquid */
.trust-badges__row--row { --row-gap: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; }
.align-centre .trust-badges__row--row { justify-content: center; }
@media (max-width: 47.99rem) { .trust-badges__row--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }
.trust-badges__row--grid { --row-gap: 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .trust-badges__row--grid { grid-template-columns: repeat(4, 1fr); } }

/* sections/video.liquid */
.video-section__frame { max-width: 56rem; }
.align-centre .video-section__frame { margin-inline: auto; }
.video { aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video.lib-video { aspect-ratio: auto; }

/* snippets/empty-state.liquid */
.empty-state { --stack: .4rem; max-width: 36rem; margin-inline: auto; padding: 1.75rem 1.5rem; text-align: center; border: 2px dashed color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--radius-box); background: color-mix(in srgb, currentColor 6%, transparent); }
.empty-state p { margin-inline: auto; }
.empty-state__plus { font-size: 1.25rem; line-height: 1; }
.empty-state__action { display: inline-block; padding: .3rem .75rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--radius); }
.empty-state__only { color: var(--band-muted, currentColor); }

/* snippets/record-buy.liquid */
.record-buy { --stack: 1.25rem; }
.record-buy > * { margin: 0; }
.record-buy__line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.record-buy__price { color: var(--band-accent, var(--color-accent)); }
.record-buy__stock { font-size: var(--text-small); padding: .125rem .5rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: var(--radius); color: inherit; }
.record-buy__words { --stack: .75rem; }
.record-buy__button { justify-self: start; width: fit-content; }

/* snippets/record-fact-rows.liquid */
.record-facts__list { margin: 0; display: grid; }
.record-facts__row { display: grid; grid-template-columns: minmax(6rem, 1fr) 2fr; gap: .25rem 1.5rem; padding-block: .875rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.record-facts__row:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.record-facts__row > * { margin: 0; }
.record-facts__row dt { align-self: center; }

/* snippets/record-label.liquid */
.record-label { display: inline-flex; align-items: center; width: fit-content; margin: 0; font-size: var(--text-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.record-label--filled { padding: .125rem .5rem; background: var(--color-accent); color: var(--color-accent-foreground); }
.band-accent .record-label--filled { background: var(--color-accent-foreground); color: var(--color-accent); }
.record-label--words { color: var(--band-accent, var(--color-accent)); }

/* snippets/tag-hero.liquid */
/* the hero: on a photo, white words on a dark wash at its foot whatever band it sits on, as Record top's */
.tag-hero { position: relative; }
.tag-hero__over { --stack: .75rem; position: relative; z-index: 1; width: 100%; }
.tag-hero__over > * { margin: 0; }
.tag-hero--photo { display: flex; align-items: flex-end; min-height: min(25rem, 70vh); overflow: hidden; color: #fff; --band-fg: #fff; --band-muted: rgb(255 255 255 / .8); }
.tag-hero--photo .tag-hero__over { padding-block: 1.5rem; }
.tag-hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tag-hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .7)); }
/* hidden by the filter script: a held-back hero, and the page's own while a tag's stands in its place */
.tag-hero[hidden], .shopify-section[hidden] { display: none; }
.align-centre .tag-hero__over { text-align: center; justify-items: center; }