/* DevByLoki Starter: the base sheet. Colours and fonts come only from the variables the
   layout writes from theme settings. Sections never name a colour; they pick a band. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.55; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-accent); color: var(--color-accent-foreground); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* text styles: the six named styles, nothing else sets a size or weight */
.text-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
.text-subtitle { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; }
.text-body { font-size: var(--text-body); }
.text-strong { font-size: var(--text-body); font-weight: 700; }
.text-small { font-size: var(--text-small); color: var(--color-muted); }
/* The small line above a heading: the heading font, small, in the muted colour so it reads as well as any small text, after a short bar in the accent. */
.kicker { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--font-heading); font-size: var(--text-small); letter-spacing: .06em; color: var(--band-muted, var(--color-muted)); }
.kicker::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--band-accent, var(--color-accent)); }
.band-accent .kicker::before { background: currentColor; }
.align-centre .kicker { justify-content: center; }
/* The small tags on a list card (snippets/card-chips.liquid): small text in a thin rounded outline, in the card's own colour. */
.card-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.card-chip { padding: .125rem .5rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 999px; line-height: 1.5; }
.align-centre .card-chips { justify-content: center; }
/* A list card whose title links to the record's page (snippets/card-links.liquid): the title's link
   covers the whole card for a pointer, and the card's second link sits above it, a link of its own. */
.card-linked { position: relative; }
.card-linked__link { color: inherit; text-decoration: none; }
.card-linked__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-box); }
/* A keyboard on the title's link rings the whole card, as a pointer over it moves the whole card. */
.card-linked:has(.card-linked__link:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.card-linked:has(.card-linked__link:focus-visible) .card-linked__link:focus-visible { outline: none; }
.band-accent .card-linked:has(.card-linked__link:focus-visible) { outline-color: var(--color-accent-foreground); }
/* The badge on a list card (snippets/card-badge.liquid): its words in the card's own colour, after a
   small dot in the accent, in a thin rounded outline. */
.card-badge { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; padding: .125rem .625rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; color: inherit; font-weight: 600; line-height: 1.5; }
.card-badge::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--band-accent, var(--color-accent)); }
.band-accent .card-badge::before { background: currentColor; }
.align-centre .card-badge { margin-inline: auto; }
/* The badge follows the title in the page's code, so a screen reader moving from heading to heading
   hears it, and shows above the title on a card laid out as a column or grid. */
:has(> .card-title + .card-badge) > :is(.card-title, .card-title ~ *) { order: 1; }
:has(> .card-title + .card-badge) > .card-title + .card-badge { order: 0; }
/* On the photo's corner instead (a list section's Where the badge sits): the photo and the badge share
   the card's first row, the badge in the corner named, on the band's own background so its words read
   over any photo, and a pointer passes through it to the card. It stays after the title in the page's
   code, and a card with no photo keeps it above the title. */
.badges-on-photo :has(> :is(.records-list__photo, .record-other__photo)) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.badges-on-photo :is(.records-list__photo, .record-other__photo) { grid-area: 1 / 1; }
.badges-on-photo :is(.records-list__photo, .record-other__photo) ~ .card-badge { grid-area: 1 / 1; align-self: end; justify-self: start; margin: .625rem var(--photo-badge-side, .625rem) var(--photo-badge-foot, .625rem); background: var(--band-bg, var(--color-background)); pointer-events: none; }
.badges-on-photo--bottom-right :is(.records-list__photo, .record-other__photo) ~ .card-badge, .badges-on-photo--top-right :is(.records-list__photo, .record-other__photo) ~ .card-badge { justify-self: end; }
.badges-on-photo--top-left :is(.records-list__photo, .record-other__photo) ~ .card-badge, .badges-on-photo--top-right :is(.records-list__photo, .record-other__photo) ~ .card-badge { align-self: start; }
/* The foot of a list card: its own link words and its second link, underlined as links are. */
.card-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; color: inherit; font-weight: 600; }
.card-links__more, .card-links__second { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card-links__second { position: relative; z-index: 1; }
.align-centre .card-links { justify-content: center; }
.text-navigation { font-size: var(--text-navigation); font-weight: 600; letter-spacing: 0.01em; }

/* bands: a section chooses one of these and everything inside inherits. Words and lines in the
   accent take the band's own accent: the accent on the page, the look's accent on bands on a band
   (V4-D79), and the text-on-accent colour on an accent band. Buttons keep the accent everywhere.
   The soft band is the page's own words, small text and accent on the look's soft band, as the
   header has it. */
.band-background { --band-bg: var(--color-background); --band-fg: var(--color-foreground); --band-muted: var(--color-muted); --band-accent: var(--color-accent); }
.band-soft { --band-bg: var(--color-soft-band); --band-fg: var(--color-foreground); --band-muted: var(--color-muted); --band-accent: var(--color-accent); }
.band-band { --band-bg: var(--color-band); --band-fg: var(--color-band-foreground); --band-muted: var(--color-muted); --band-accent: var(--color-band-accent); }
.band-accent { --band-bg: var(--color-accent); --band-fg: var(--color-accent-foreground); --band-muted: var(--color-accent-foreground); --band-accent: var(--color-accent-foreground); }
[class*="band-"] { background: var(--band-bg); color: var(--band-fg); }
[class*="band-"] .text-small { color: var(--band-muted); }
/* A fine line above and below a section (the GPS gaps, V4-D79): always, or only in the dark, where a
   band lifted from a dark page reads as a block of its own with a hairline at each edge. */
.band-lines-always { border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-lines-dark { border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent); } }
:root[data-theme="dark"] .band-lines-dark { border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
/* Hairlines between columns and cards (Northgate's touches, 2026-10-10): the cards sit edge to edge
   with no gap, and a fine line runs only between them, never round the outside. Each card draws its
   line on its left and top, and the grid trims what falls outside it, so the first column and the first
   row draw none and a short last row ends where its last card does. The cards drop their own box,
   since the lines now stand for it, and a section's own card Border, Corners, Background and gap are
   set aside with it (snippets/section-own-rules.liquid). The grid reaches out by the room inside a card
   on both sides, so the words of the first and last columns line up with the section's heading; the
   section clips what reaches past the screen's edge, so a phone never scrolls sideways. */
.dividers-hairlines { overflow-x: clip; }
.dividers-hairlines :is(.team__grid, .services__grid, .columns__grid, .food-menu__courses) { --hairline-pad: clamp(1.25rem, 3vw, 2.5rem); gap: 0; overflow: hidden; margin-inline: calc(-1 * var(--hairline-pad)); }
.dividers-hairlines :is(.team__grid > .person, .services__grid > .service, .columns__grid > .column, .food-menu__courses > *) { background: none; border: 0; border-radius: 0; box-shadow: -1px 0 0 0 color-mix(in srgb, currentColor 14%, transparent), 0 -1px 0 0 color-mix(in srgb, currentColor 14%, transparent); padding: var(--hairline-pad); }
/* A short line under a heading (Northgate's touches, 2026-10-10), in the band's accent, under its
   words wherever they are aligned, on each screen: the part's own alignment for that screen, or its
   section's. Every rule weighs the same, so the later one wins, as the part's alignment does. */
.part--line-short::after { content: ""; display: block; width: 3.75rem; height: 1px; margin-top: .45em; background: var(--band-accent, var(--color-accent)); }
:where(.align-centre, .hero--centre) .part--line-short::after { margin-inline: auto; }
.part--line-short:where(.part--align-left)::after { margin-inline: 0; }
.part--line-short:where(.part--align-centre)::after { margin-inline: auto; }
.part--line-short:where(.part--align-right)::after { margin-inline: auto 0; }
@media (max-width: 63.99rem) {
  .part--line-short:where(.part--t-align-section, .part--t-align-left)::after { margin-inline: 0; }
  :where(.align-centre, .hero--centre) .part--line-short:where(.part--t-align-section)::after, .part--line-short:where(.part--t-align-centre)::after { margin-inline: auto; }
  .part--line-short:where(.part--t-align-right)::after { margin-inline: auto 0; }
}
@media (max-width: 39.99rem) {
  .part--line-short:where(.part--p-align-section, .part--p-align-left)::after { margin-inline: 0; }
  :where(.align-centre, .hero--centre) .part--line-short:where(.part--p-align-section)::after, .part--line-short:where(.part--p-align-centre)::after { margin-inline: auto; }
  .part--line-short:where(.part--p-align-right)::after { margin-inline: auto 0; }
}

/* spacing and layout */
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.spacing-cosy { padding-block: 1.5rem; }
.spacing-normal { padding-block: 3rem; }
.spacing-generous { padding-block: 5rem; }
@media (min-width: 48rem) { .spacing-cosy { padding-block: 2rem; } .spacing-normal { padding-block: 4.5rem; } .spacing-generous { padding-block: 7rem; } }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.align-centre { text-align: center; }
.align-centre .cluster { justify-content: center; }
/* Buttons next to each other sit side by side, each still its own block. */
.stack > .cluster:has(> .button) { display: inline-flex; vertical-align: top; margin-right: .75rem; }

/* buttons */
.button { display: inline-flex; align-items: center; gap: .5rem; padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.button--primary { background: var(--color-accent); color: var(--color-accent-foreground); }
.band-accent .button--primary { background: var(--color-accent-foreground); color: var(--color-accent); }
.button--secondary { border-color: currentColor; color: inherit; background: transparent; }
.button--link { padding: 0; border: 0; text-decoration: underline; text-underline-offset: .2em; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
/* on an accent band the accent ring would vanish into the band */
.band-accent :focus-visible { outline-color: var(--color-accent-foreground) !important; }

/* ---------------------------------------------------------------------------------------
   Parts (the part styles plan, approved 2026-09-27). A part's own choices, or the site's for
   its kind, arrive as classes; a part left on the defaults carries none of them.
   --------------------------------------------------------------------------------------- */
.part--align-left { text-align: left; }
.part--align-centre { text-align: center; }
.part--align-right { text-align: right; }
.cluster.part--align-left { display: flex; justify-content: flex-start; }
.cluster.part--align-centre { display: flex; justify-content: center; }
.cluster.part--align-right { display: flex; justify-content: flex-end; }
.kicker.part--align-centre { justify-content: center; }
.kicker.part--align-right { justify-content: flex-end; }
.part--colour-text { color: inherit; }
.part--colour-soft { color: var(--band-muted, var(--color-muted)); }
.part--colour-accent { color: var(--band-accent, var(--color-accent)); }
.band-accent .part--colour-accent { color: var(--color-accent-foreground); }
.part--width-narrow { max-width: 32rem; }
.part--width-normal { max-width: 44rem; }
.align-centre .part--width-narrow, .align-centre .part--width-normal,
.part--align-centre.part--width-narrow, .part--align-centre.part--width-normal { margin-inline: auto; }
.part--align-right.part--width-narrow, .part--align-right.part--width-normal { margin-left: auto; }
.stack > .part--space-none + * { margin-top: 0; }
.stack > .part--space-small + * { margin-top: .5rem; }
.stack > .part--space-large + * { margin-top: 2rem; }
/* The top of a section: its parts, a normal line apart. */
.section-heading { --stack: 1rem; }

/* Parts drawn among a section's own items (steps, numbers, plans, logos) take a whole row, and
   two parts together sit the normal line apart whatever gap the items keep between them. */
.parts-in > .part, .parts-in > .kicker-empty, .parts-in > .heading-empty, .parts-in > .text-empty { grid-column: 1 / -1; flex: 0 0 100%; }
.parts-in > .part:has(+ .part) { margin-bottom: calc(1rem - var(--row-gap, 0px)); }
.parts-in > .part--space-none:has(+ .part) { margin-bottom: calc(0px - var(--row-gap, 0px)); }
.parts-in > .part--space-small:has(+ .part) { margin-bottom: calc(.5rem - var(--row-gap, 0px)); }
.parts-in > .part--space-large:has(+ .part) { margin-bottom: calc(2rem - var(--row-gap, 0px)); }
.button--soft { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: inherit; }
.button--corners-square { border-radius: 0; }
.button--corners-soft { border-radius: .5rem; }
.button--corners-round { border-radius: 1rem; }
.button--corners-pill { border-radius: 999px; }
.button--size-small { --button-py: .5rem; --button-px: .9rem; font-size: .9em; }
.button--size-large { --button-py: 1rem; --button-px: 1.6rem; font-size: 1.1em; }
.button__arrow { display: inline-flex; }
/* A heading's picked words (slice 5): the accent, an accent underline, or a marker stroke behind
   them. On an accent band the accent would vanish, so there the words keep the band's own colour. */
.highlight--accent { color: var(--band-accent, var(--color-accent)); }
.band-accent .highlight--accent { color: inherit; text-decoration: underline; text-underline-offset: .12em; }
.highlight--underline { text-decoration: underline; text-decoration-color: var(--band-accent, var(--color-accent)); text-decoration-thickness: .1em; text-underline-offset: .14em; }
.band-accent .highlight--underline { text-decoration-color: currentColor; }
.highlight--marker { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--band-accent, var(--color-accent)) 35%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.band-accent .highlight--marker { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--color-accent-foreground) 35%, transparent) 58%); }
/* screens: made by tools/parts/screens.mjs from its table; do not edit by hand */
@media (min-width: 64rem) { .part-hide-d { display: none; } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .part-hide-t { display: none; } }
@media (max-width: 39.99rem) { .part-hide-p { display: none; } }
@keyframes part-in-fade { from { opacity: 0; } }
@keyframes part-in-rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes part-in-slide_left { from { opacity: 0; transform: translateX(-2rem); } }
@keyframes part-in-slide_right { from { opacity: 0; transform: translateX(2rem); } }
@keyframes part-in-zoom { from { opacity: 0; transform: scale(.94); } }
.part--motion-none { --part-motion: none; } .motion-on .part--motion-none:not(.is-in) { opacity: 1; }
.part--motion-fade { --part-motion: part-in-fade; } .motion-on .part--motion-fade:not(.is-in) { opacity: 0; }
.part--motion-rise { --part-motion: part-in-rise; } .motion-on .part--motion-rise:not(.is-in) { opacity: 0; }
.part--motion-slide_left { --part-motion: part-in-slide_left; } .motion-on .part--motion-slide_left:not(.is-in) { opacity: 0; }
.part--motion-slide_right { --part-motion: part-in-slide_right; } .motion-on .part--motion-slide_right:not(.is-in) { opacity: 0; }
.part--motion-zoom { --part-motion: part-in-zoom; } .motion-on .part--motion-zoom:not(.is-in) { opacity: 0; }
.part--speed-quick { --part-motion-time: .3s; }
.part--speed-normal { --part-motion-time: .6s; }
.part--speed-slow { --part-motion-time: 1s; }
.motion-cards-none { --card-motion: none; } .motion-on .motion-cards-none :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 1; }
.motion-cards-fade { --card-motion: part-in-fade; } .motion-on .motion-cards-fade :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
.motion-cards-rise { --card-motion: part-in-rise; } .motion-on .motion-cards-rise :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
.motion-cards-slide_left { --card-motion: part-in-slide_left; } .motion-on .motion-cards-slide_left :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
.motion-cards-slide_right { --card-motion: part-in-slide_right; } .motion-on .motion-cards-slide_right :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
.motion-cards-zoom { --card-motion: part-in-zoom; } .motion-on .motion-cards-zoom :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
.motion-cards-speed-quick { --card-motion-time: .3s; }
.motion-cards-speed-normal { --card-motion-time: .6s; }
.motion-cards-speed-slow { --card-motion-time: 1s; }
.motion-cards-stagger { --card-step: 90ms; }
.motion-on .part.is-in { animation: var(--part-motion, none) var(--part-motion-time, .6s) ease-out backwards; }
.motion-on :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item).is-in { animation: var(--card-motion, none) var(--card-motion-time, .6s) ease-out backwards; animation-delay: calc(var(--motion-i, 0) * var(--card-step, 0ms)); }
@media (prefers-reduced-motion: reduce), print { .motion-on .part, .motion-on :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item) { opacity: 1 !important; animation: none !important; } }
.lists-card_title_style-title .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
.lists-card_title_style-subtitle .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
.lists-card_title_style-body .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-card_title_style-strong .card-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-card_title_style-small .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
.lists-card_title_style-navigation .card-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
.lists-card_title_align-section .card-title { text-align: inherit; }
.lists-card_title_align-left .card-title { text-align: left; }
.lists-card_title_align-centre .card-title { text-align: center; }
.lists-card_title_align-right .card-title { text-align: right; }
.lists-card_title_colour-text .card-title { color: inherit; }
.lists-card_title_colour-soft .card-title { color: var(--band-muted, var(--color-muted)); }
.lists-card_title_colour-accent .card-title { color: var(--band-accent, var(--color-accent)); }
.band-accent.lists-card_title_colour-accent .card-title, .band-accent .lists-card_title_colour-accent .card-title, .lists-card_title_colour-accent .band-accent .card-title { color: var(--color-accent-foreground); }
.lists-card_text_style-title .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
.lists-card_text_style-subtitle .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
.lists-card_text_style-body .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-card_text_style-strong .card-text { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-card_text_style-small .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
.lists-card_text_style-navigation .card-text { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
.lists-card_text_align-section .card-text { text-align: inherit; }
.lists-card_text_align-left .card-text { text-align: left; }
.lists-card_text_align-centre .card-text { text-align: center; }
.lists-card_text_align-right .card-text { text-align: right; }
.lists-card_text_colour-text .card-text { color: inherit; }
.lists-card_text_colour-soft .card-text { color: var(--band-muted, var(--color-muted)); }
.lists-card_text_colour-accent .card-text { color: var(--band-accent, var(--color-accent)); }
.band-accent.lists-card_text_colour-accent .card-text, .band-accent .lists-card_text_colour-accent .card-text, .lists-card_text_colour-accent .band-accent .card-text { color: var(--color-accent-foreground); }
.lists-list_item_style-title .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
.lists-list_item_style-subtitle .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
.lists-list_item_style-body .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-list_item_style-strong .list-item { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
.lists-list_item_style-small .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
.lists-list_item_style-navigation .list-item { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
.lists-list_item_align-section .list-item { text-align: inherit; }
.lists-list_item_align-left .list-item { text-align: left; }
.lists-list_item_align-centre .list-item { text-align: center; }
.lists-list_item_align-right .list-item { text-align: right; }
.lists-list_item_colour-text .list-item { color: inherit; }
.lists-list_item_colour-soft .list-item { color: var(--band-muted, var(--color-muted)); }
.lists-list_item_colour-accent .list-item { color: var(--band-accent, var(--color-accent)); }
.band-accent.lists-list_item_colour-accent .list-item, .band-accent .lists-list_item_colour-accent .list-item, .lists-list_item_colour-accent .band-accent .list-item { color: var(--color-accent-foreground); }
.lists-photo_corners-look :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: var(--radius-box); }
.lists-photo_corners-square :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 0; }
.lists-photo_corners-soft :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: .5rem; }
.lists-photo_corners-round :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 1rem; }
@media (max-width: 63.99rem) {
  .part--t-style-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; } .kicker.part--t-style-title { display: block; } .kicker.part--t-style-title::before { display: none; }
  .part--t-style-subtitle { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; } .kicker.part--t-style-subtitle { display: block; } .kicker.part--t-style-subtitle::before { display: none; }
  .part--t-style-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; } .kicker.part--t-style-body { display: block; } .kicker.part--t-style-body::before { display: none; }
  .part--t-style-strong { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; } .kicker.part--t-style-strong { display: block; } .kicker.part--t-style-strong::before { display: none; }
  .part--t-style-small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; } .kicker.part--t-style-small { display: block; } .kicker.part--t-style-small::before { display: none; }
  .part--t-style-navigation { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; } .kicker.part--t-style-navigation { display: block; } .kicker.part--t-style-navigation::before { display: none; }
  .part--t-style-small_line { display: flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: .06em; } .part--t-style-small_line::before { content: ""; display: block; flex: none; width: 1.5rem; height: 2px; background: var(--band-accent, var(--color-accent)); } .band-accent .part--t-style-small_line::before { background: currentColor; }
  .part--t-align-section { text-align: inherit; } .cluster.part--t-align-section, .kicker.part--t-align-section { justify-content: flex-start; } .align-centre .cluster.part--t-align-section, .align-centre .kicker.part--t-align-section { justify-content: center; } .part--t-align-section:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: 0; } .align-centre .part--t-align-section:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: auto; }
  .part--t-align-left { text-align: left; } .cluster.part--t-align-left { display: flex; justify-content: flex-start; } .kicker.part--t-align-left { justify-content: flex-start; } .part--t-align-left:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: 0; }
  .part--t-align-centre { text-align: center; } .cluster.part--t-align-centre { display: flex; justify-content: center; } .kicker.part--t-align-centre { justify-content: center; } .part--t-align-centre:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: auto; }
  .part--t-align-right { text-align: right; } .cluster.part--t-align-right { display: flex; justify-content: flex-end; } .kicker.part--t-align-right { justify-content: flex-end; } .part--t-align-right:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-left: auto; margin-right: 0; }
  .part--t-colour-text.part--t-colour-text { color: inherit; }
  .part--t-colour-soft.part--t-colour-soft { color: var(--band-muted, var(--color-muted)); }
  .part--t-colour-accent.part--t-colour-accent { color: var(--band-accent, var(--color-accent)); } .band-accent .part--t-colour-accent.part--t-colour-accent { color: var(--color-accent-foreground); }
  .part--t-width-narrow { max-width: 32rem; }
  .part--t-width-normal { max-width: 44rem; }
  .part--t-width-full { max-width: none; }
  .stack > .part--t-space-none + * { margin-top: 0; } .parts-in > .part--t-space-none:has(+ .part) { margin-bottom: calc(0px - var(--row-gap, 0px)); }
  .stack > .part--t-space-small + * { margin-top: .5rem; } .parts-in > .part--t-space-small:has(+ .part) { margin-bottom: calc(.5rem - var(--row-gap, 0px)); }
  .stack > .part--t-space-normal + * { margin-top: var(--stack, 1rem); } .parts-in > .part--t-space-normal:has(+ .part) { margin-bottom: calc(1rem - var(--row-gap, 0px)); }
  .stack > .part--t-space-large + * { margin-top: 2rem; } .parts-in > .part--t-space-large:has(+ .part) { margin-bottom: calc(2rem - var(--row-gap, 0px)); }
  .button.part--t-fill-primary { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; background: var(--color-accent); color: var(--color-accent-foreground); } .band-accent .button.part--t-fill-primary { background: var(--color-accent-foreground); color: var(--color-accent); }
  .button.part--t-fill-secondary { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; border-color: currentColor; background: transparent; color: inherit; }
  .button.part--t-fill-soft { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: inherit; }
  .button.part--t-fill-link { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  .button.part--t-corners-look { border-radius: var(--radius); }
  .button.part--t-corners-square { border-radius: 0; }
  .button.part--t-corners-soft { border-radius: .5rem; }
  .button.part--t-corners-round { border-radius: 1rem; }
  .button.part--t-corners-pill { border-radius: 999px; }
  .button.part--t-size-small { --button-py: .5rem; --button-px: .9rem; font-size: .9em; }
  .button.part--t-size-normal { --button-py: .75rem; --button-px: 1.25rem; font-size: 1em; }
  .button.part--t-size-large { --button-py: 1rem; --button-px: 1.6rem; font-size: 1.1em; }
  .part--t-motion-none { --part-motion: none; } .motion-on .part--t-motion-none:not(.is-in) { opacity: 1; }
  .part--t-motion-fade { --part-motion: part-in-fade; } .motion-on .part--t-motion-fade:not(.is-in) { opacity: 0; }
  .part--t-motion-rise { --part-motion: part-in-rise; } .motion-on .part--t-motion-rise:not(.is-in) { opacity: 0; }
  .part--t-motion-slide_left { --part-motion: part-in-slide_left; } .motion-on .part--t-motion-slide_left:not(.is-in) { opacity: 0; }
  .part--t-motion-slide_right { --part-motion: part-in-slide_right; } .motion-on .part--t-motion-slide_right:not(.is-in) { opacity: 0; }
  .part--t-motion-zoom { --part-motion: part-in-zoom; } .motion-on .part--t-motion-zoom:not(.is-in) { opacity: 0; }
  .part--t-speed-quick { --part-motion-time: .3s; }
  .part--t-speed-normal { --part-motion-time: .6s; }
  .part--t-speed-slow { --part-motion-time: 1s; }
  .motion-cards-t-none { --card-motion: none; } .motion-on .motion-cards-t-none :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 1; }
  .motion-cards-t-fade { --card-motion: part-in-fade; } .motion-on .motion-cards-t-fade :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-t-rise { --card-motion: part-in-rise; } .motion-on .motion-cards-t-rise :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-t-slide_left { --card-motion: part-in-slide_left; } .motion-on .motion-cards-t-slide_left :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-t-slide_right { --card-motion: part-in-slide_right; } .motion-on .motion-cards-t-slide_right :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-t-zoom { --card-motion: part-in-zoom; } .motion-on .motion-cards-t-zoom :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-t-speed-quick { --card-motion-time: .3s; }
  .motion-cards-t-speed-normal { --card-motion-time: .6s; }
  .motion-cards-t-speed-slow { --card-motion-time: 1s; }
  .lists-t-card_title_style-title .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-t-card_title_style-subtitle .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-t-card_title_style-body .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_title_style-strong .card-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_title_style-small .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_title_style-navigation .card-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-t-card_title_align-section .card-title { text-align: inherit; }
  .lists-t-card_title_align-left .card-title { text-align: left; }
  .lists-t-card_title_align-centre .card-title { text-align: center; }
  .lists-t-card_title_align-right .card-title { text-align: right; }
  .lists-t-card_title_colour-text .card-title { color: inherit; }
  .lists-t-card_title_colour-soft .card-title { color: var(--band-muted, var(--color-muted)); }
  .lists-t-card_title_colour-accent .card-title { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-t-card_title_colour-accent .card-title, .band-accent .lists-t-card_title_colour-accent .card-title, .lists-t-card_title_colour-accent .band-accent .card-title { color: var(--color-accent-foreground); }
  .lists-t-card_text_style-title .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-t-card_text_style-subtitle .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-t-card_text_style-body .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_text_style-strong .card-text { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_text_style-small .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-t-card_text_style-navigation .card-text { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-t-card_text_align-section .card-text { text-align: inherit; }
  .lists-t-card_text_align-left .card-text { text-align: left; }
  .lists-t-card_text_align-centre .card-text { text-align: center; }
  .lists-t-card_text_align-right .card-text { text-align: right; }
  .lists-t-card_text_colour-text .card-text { color: inherit; }
  .lists-t-card_text_colour-soft .card-text { color: var(--band-muted, var(--color-muted)); }
  .lists-t-card_text_colour-accent .card-text { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-t-card_text_colour-accent .card-text, .band-accent .lists-t-card_text_colour-accent .card-text, .lists-t-card_text_colour-accent .band-accent .card-text { color: var(--color-accent-foreground); }
  .lists-t-list_item_style-title .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-t-list_item_style-subtitle .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-t-list_item_style-body .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-list_item_style-strong .list-item { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-t-list_item_style-small .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-t-list_item_style-navigation .list-item { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-t-list_item_align-section .list-item { text-align: inherit; }
  .lists-t-list_item_align-left .list-item { text-align: left; }
  .lists-t-list_item_align-centre .list-item { text-align: center; }
  .lists-t-list_item_align-right .list-item { text-align: right; }
  .lists-t-list_item_colour-text .list-item { color: inherit; }
  .lists-t-list_item_colour-soft .list-item { color: var(--band-muted, var(--color-muted)); }
  .lists-t-list_item_colour-accent .list-item { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-t-list_item_colour-accent .list-item, .band-accent .lists-t-list_item_colour-accent .list-item, .lists-t-list_item_colour-accent .band-accent .list-item { color: var(--color-accent-foreground); }
  .lists-t-photo_corners-look :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: var(--radius-box); }
  .lists-t-photo_corners-square :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 0; }
  .lists-t-photo_corners-soft :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: .5rem; }
  .lists-t-photo_corners-round :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 1rem; }
}
@media (max-width: 39.99rem) {
  .part--p-style-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; } .kicker.part--p-style-title { display: block; } .kicker.part--p-style-title::before { display: none; }
  .part--p-style-subtitle { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; } .kicker.part--p-style-subtitle { display: block; } .kicker.part--p-style-subtitle::before { display: none; }
  .part--p-style-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; } .kicker.part--p-style-body { display: block; } .kicker.part--p-style-body::before { display: none; }
  .part--p-style-strong { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; } .kicker.part--p-style-strong { display: block; } .kicker.part--p-style-strong::before { display: none; }
  .part--p-style-small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; } .kicker.part--p-style-small { display: block; } .kicker.part--p-style-small::before { display: none; }
  .part--p-style-navigation { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; } .kicker.part--p-style-navigation { display: block; } .kicker.part--p-style-navigation::before { display: none; }
  .part--p-style-small_line { display: flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: .06em; } .part--p-style-small_line::before { content: ""; display: block; flex: none; width: 1.5rem; height: 2px; background: var(--band-accent, var(--color-accent)); } .band-accent .part--p-style-small_line::before { background: currentColor; }
  .part--p-align-section { text-align: inherit; } .cluster.part--p-align-section, .kicker.part--p-align-section { justify-content: flex-start; } .align-centre .cluster.part--p-align-section, .align-centre .kicker.part--p-align-section { justify-content: center; } .part--p-align-section:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: 0; } .align-centre .part--p-align-section:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: auto; }
  .part--p-align-left { text-align: left; } .cluster.part--p-align-left { display: flex; justify-content: flex-start; } .kicker.part--p-align-left { justify-content: flex-start; } .part--p-align-left:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: 0; }
  .part--p-align-centre { text-align: center; } .cluster.part--p-align-centre { display: flex; justify-content: center; } .kicker.part--p-align-centre { justify-content: center; } .part--p-align-centre:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-inline: auto; }
  .part--p-align-right { text-align: right; } .cluster.part--p-align-right { display: flex; justify-content: flex-end; } .kicker.part--p-align-right { justify-content: flex-end; } .part--p-align-right:not(.cluster):is(.part--width-narrow, .part--width-normal, [class*="-width-narrow"], [class*="-width-normal"]) { margin-left: auto; margin-right: 0; }
  .part--p-colour-text.part--p-colour-text { color: inherit; }
  .part--p-colour-soft.part--p-colour-soft { color: var(--band-muted, var(--color-muted)); }
  .part--p-colour-accent.part--p-colour-accent { color: var(--band-accent, var(--color-accent)); } .band-accent .part--p-colour-accent.part--p-colour-accent { color: var(--color-accent-foreground); }
  .part--p-width-narrow { max-width: 32rem; }
  .part--p-width-normal { max-width: 44rem; }
  .part--p-width-full { max-width: none; }
  .stack > .part--p-space-none + * { margin-top: 0; } .parts-in > .part--p-space-none:has(+ .part) { margin-bottom: calc(0px - var(--row-gap, 0px)); }
  .stack > .part--p-space-small + * { margin-top: .5rem; } .parts-in > .part--p-space-small:has(+ .part) { margin-bottom: calc(.5rem - var(--row-gap, 0px)); }
  .stack > .part--p-space-normal + * { margin-top: var(--stack, 1rem); } .parts-in > .part--p-space-normal:has(+ .part) { margin-bottom: calc(1rem - var(--row-gap, 0px)); }
  .stack > .part--p-space-large + * { margin-top: 2rem; } .parts-in > .part--p-space-large:has(+ .part) { margin-bottom: calc(2rem - var(--row-gap, 0px)); }
  .button.part--p-fill-primary { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; background: var(--color-accent); color: var(--color-accent-foreground); } .band-accent .button.part--p-fill-primary { background: var(--color-accent-foreground); color: var(--color-accent); }
  .button.part--p-fill-secondary { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; border-color: currentColor; background: transparent; color: inherit; }
  .button.part--p-fill-soft { padding: var(--button-py, .75rem) var(--button-px, 1.25rem); border: 2px solid transparent; text-decoration: none; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: inherit; }
  .button.part--p-fill-link { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
  .button.part--p-corners-look { border-radius: var(--radius); }
  .button.part--p-corners-square { border-radius: 0; }
  .button.part--p-corners-soft { border-radius: .5rem; }
  .button.part--p-corners-round { border-radius: 1rem; }
  .button.part--p-corners-pill { border-radius: 999px; }
  .button.part--p-size-small { --button-py: .5rem; --button-px: .9rem; font-size: .9em; }
  .button.part--p-size-normal { --button-py: .75rem; --button-px: 1.25rem; font-size: 1em; }
  .button.part--p-size-large { --button-py: 1rem; --button-px: 1.6rem; font-size: 1.1em; }
  .part--p-motion-none { --part-motion: none; } .motion-on .part--p-motion-none:not(.is-in) { opacity: 1; }
  .part--p-motion-fade { --part-motion: part-in-fade; } .motion-on .part--p-motion-fade:not(.is-in) { opacity: 0; }
  .part--p-motion-rise { --part-motion: part-in-rise; } .motion-on .part--p-motion-rise:not(.is-in) { opacity: 0; }
  .part--p-motion-slide_left { --part-motion: part-in-slide_left; } .motion-on .part--p-motion-slide_left:not(.is-in) { opacity: 0; }
  .part--p-motion-slide_right { --part-motion: part-in-slide_right; } .motion-on .part--p-motion-slide_right:not(.is-in) { opacity: 0; }
  .part--p-motion-zoom { --part-motion: part-in-zoom; } .motion-on .part--p-motion-zoom:not(.is-in) { opacity: 0; }
  .part--p-speed-quick { --part-motion-time: .3s; }
  .part--p-speed-normal { --part-motion-time: .6s; }
  .part--p-speed-slow { --part-motion-time: 1s; }
  .motion-cards-p-none { --card-motion: none; } .motion-on .motion-cards-p-none :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 1; }
  .motion-cards-p-fade { --card-motion: part-in-fade; } .motion-on .motion-cards-p-fade :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-p-rise { --card-motion: part-in-rise; } .motion-on .motion-cards-p-rise :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-p-slide_left { --card-motion: part-in-slide_left; } .motion-on .motion-cards-p-slide_left :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-p-slide_right { --card-motion: part-in-slide_right; } .motion-on .motion-cards-p-slide_right :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-p-zoom { --card-motion: part-in-zoom; } .motion-on .motion-cards-p-zoom :is(.service, .review, .person, .post, .record-other, .records-list__card, .faq__item, .step, .stat, .milestone, .column, .badge, .logo-mark, .plan, .food-menu__item, .price-list__row, .cv__entry, .areas__item, .gallery-grid__item):not(.is-in) { opacity: 0; }
  .motion-cards-p-speed-quick { --card-motion-time: .3s; }
  .motion-cards-p-speed-normal { --card-motion-time: .6s; }
  .motion-cards-p-speed-slow { --card-motion-time: 1s; }
  .lists-p-card_title_style-title .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-p-card_title_style-subtitle .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-p-card_title_style-body .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_title_style-strong .card-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_title_style-small .card-title { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_title_style-navigation .card-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-p-card_title_align-section .card-title { text-align: inherit; }
  .lists-p-card_title_align-left .card-title { text-align: left; }
  .lists-p-card_title_align-centre .card-title { text-align: center; }
  .lists-p-card_title_align-right .card-title { text-align: right; }
  .lists-p-card_title_colour-text .card-title { color: inherit; }
  .lists-p-card_title_colour-soft .card-title { color: var(--band-muted, var(--color-muted)); }
  .lists-p-card_title_colour-accent .card-title { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-p-card_title_colour-accent .card-title, .band-accent .lists-p-card_title_colour-accent .card-title, .lists-p-card_title_colour-accent .band-accent .card-title { color: var(--color-accent-foreground); }
  .lists-p-card_text_style-title .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-p-card_text_style-subtitle .card-text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-p-card_text_style-body .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_text_style-strong .card-text { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_text_style-small .card-text { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-p-card_text_style-navigation .card-text { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-p-card_text_align-section .card-text { text-align: inherit; }
  .lists-p-card_text_align-left .card-text { text-align: left; }
  .lists-p-card_text_align-centre .card-text { text-align: center; }
  .lists-p-card_text_align-right .card-text { text-align: right; }
  .lists-p-card_text_colour-text .card-text { color: inherit; }
  .lists-p-card_text_colour-soft .card-text { color: var(--band-muted, var(--color-muted)); }
  .lists-p-card_text_colour-accent .card-text { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-p-card_text_colour-accent .card-text, .band-accent .lists-p-card_text_colour-accent .card-text, .lists-p-card_text_colour-accent .band-accent .card-text { color: var(--color-accent-foreground); }
  .lists-p-list_item_style-title .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
  .lists-p-list_item_style-subtitle .list-item { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subtitle); line-height: 1.2; letter-spacing: normal; }
  .lists-p-list_item_style-body .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-list_item_style-strong .list-item { font-family: var(--font-body); font-weight: 700; font-size: var(--text-body); line-height: 1.55; letter-spacing: normal; }
  .lists-p-list_item_style-small .list-item { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); line-height: 1.55; letter-spacing: normal; }
  .lists-p-list_item_style-navigation .list-item { font-family: var(--font-body); font-weight: 600; font-size: var(--text-navigation); line-height: 1.55; letter-spacing: 0.01em; }
  .lists-p-list_item_align-section .list-item { text-align: inherit; }
  .lists-p-list_item_align-left .list-item { text-align: left; }
  .lists-p-list_item_align-centre .list-item { text-align: center; }
  .lists-p-list_item_align-right .list-item { text-align: right; }
  .lists-p-list_item_colour-text .list-item { color: inherit; }
  .lists-p-list_item_colour-soft .list-item { color: var(--band-muted, var(--color-muted)); }
  .lists-p-list_item_colour-accent .list-item { color: var(--band-accent, var(--color-accent)); }
  .band-accent.lists-p-list_item_colour-accent .list-item, .band-accent .lists-p-list_item_colour-accent .list-item, .lists-p-list_item_colour-accent .band-accent .list-item { color: var(--color-accent-foreground); }
  .lists-p-photo_corners-look :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: var(--radius-box); }
  .lists-p-photo_corners-square :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 0; }
  .lists-p-photo_corners-soft :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: .5rem; }
  .lists-p-photo_corners-round :is(.records-list__photo, .post__photo img, .record-other__photo, .person__photo, .feature__image, .gallery-grid__tile) { border-radius: 1rem; }
}
@media (hover: hover) {
  .button { transition: background-color .15s, color .15s, border-color .15s, text-decoration-color .15s, transform .15s, box-shadow .15s; }
  :is(.header__links a, .header__links .header__drop-toggle--heading, .footer a, .post__link, .service__link), .records-list__link { transition: color .15s, opacity .15s, text-decoration-color .15s; }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).button--primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).button--primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).button--secondary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).button--soft:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).button--link:hover { text-decoration-thickness: 2px; }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--secondary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--secondary:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--soft:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--soft:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--link:hover { color: var(--color-accent); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).button--link:hover { color: inherit; text-decoration-thickness: 2px; }
  :is(.hover-buttons-underline .button:not([class*="button--hover-"]), .button.button--hover-underline):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  .hover-links-underline :is(.header__links a, .header__links .header__drop-toggle--heading, .footer a, .post__link, .service__link):hover, .hover-links-underline .records-list__link:hover { text-decoration-line: underline; text-decoration-color: currentColor; text-underline-offset: .2em; }
  .hover-links-accent :is(.header__links a, .header__links .header__drop-toggle--heading, .footer a, .post__link, .service__link):hover, .hover-links-accent .records-list__link:hover { color: var(--band-accent, var(--color-accent)); }
  .hover-links-accent .band-accent :is(.header__links a, .header__links .header__drop-toggle--heading, .footer a, .post__link, .service__link):hover, .hover-links-accent .band-accent .records-list__link:hover { color: inherit; text-decoration-line: underline; }
  .hover-links-fade :is(.header__links a, .header__links .header__drop-toggle--heading, .footer a, .post__link, .service__link):hover, .hover-links-fade .records-list__link:hover { opacity: .7; }
  .hover-cards-border :is(.records-list--framed, .records-list--numbered) .records-list__card:has(a:hover), .hover-cards-border .record-other__card:hover { border-color: color-mix(in srgb, currentColor 30%, transparent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .records-list__card, .record-other__card { transition: transform .2s, box-shadow .2s, border-color .2s; }
  .gallery-grid__img, .post__photo img, .record-other__photo { transition: scale .6s ease; }
  .hover-photos-zoom .post__photo { overflow: hidden; }
  :is(.hover-buttons-lift .button:not([class*="button--hover-"]), .button.button--hover-lift):hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem -.5rem rgb(0 0 0 / .35); }
  :is(.hover-buttons-lift .button:not([class*="button--hover-"]), .button.button--hover-lift).button--link:hover { box-shadow: none; }
  .hover-cards-lift :is(.records-list--framed, .records-list--numbered) .records-list__card:has(a:hover), .hover-cards-lift .record-other__card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem -.75rem rgb(0 0 0 / .3); }
  .hover-photos-zoom :is(.gallery-grid__tile:hover .gallery-grid__img, .post__photo:hover img, .record-other__card--photo:hover .record-other__photo) { scale: 1.04; }
}
@media (hover: hover) and (max-width: 63.99rem) {
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--t-fill-primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--t-fill-primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--t-fill-secondary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--t-fill-soft:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--t-fill-link:hover { text-decoration-thickness: 2px; }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-secondary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-secondary:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-soft:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-soft:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-link:hover { color: var(--color-accent); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--t-fill-link:hover { color: inherit; text-decoration-thickness: 2px; }
}
@media (hover: hover) and (max-width: 39.99rem) {
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--p-fill-primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--p-fill-primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--p-fill-secondary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--p-fill-soft:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
  :is(.hover-buttons-darken .button:not([class*="button--hover-"]), .button.button--hover-darken).part--p-fill-link:hover { text-decoration-thickness: 2px; }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-primary:hover { background: color-mix(in srgb, var(--color-accent-foreground) 88%, var(--color-accent)); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-secondary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-secondary:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-soft:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-foreground); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-soft:hover { background: var(--color-accent-foreground); border-color: var(--color-accent-foreground); color: var(--color-accent); }
  :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-link:hover { color: var(--color-accent); }
  .band-accent :is(.hover-buttons-fill .button:not([class*="button--hover-"]), .button.button--hover-fill).part--p-fill-link:hover { color: inherit; text-decoration-thickness: 2px; }
}
/* screens: end */

/* images */
.image--square { aspect-ratio: 1; object-fit: cover; }
.image--wide { aspect-ratio: 16 / 9; object-fit: cover; }
.rounded { border-radius: var(--radius-box); }

/* ---------------------------------------------------------------------------------------
   Finish: masking tape.

   A band that is not the page background is taped to the wall: a piece of blue tape over its
   top edge towards the left, another towards the right, each lying a little off square with
   both ends showing, half on the band and half on the wall above it.

   Inboard of the edges, not across the corners. A band runs the full width of the screen, so
   its corners are the screen's corners, and a piece of tape laid across one is half off the
   side of the page.

   Pieces, not a border. A continuous run along an edge reads as a rule drawn round the box, no
   matter how well it is shaded; what says tape is a short length of it lying at an angle with
   two cut ends and a shadow under it.

   The right hand piece has come away and curled over, showing its pale underside. That curl is
   drawn lifted at rest, because it is the point of the whole finish and it cannot depend on a
   hover a phone does not have or on a scroll animation an older browser will not run. Hover,
   touch and scroll each pull it further; those are the extras.

   All of it is CSS, the scroll part being a scroll-driven animation rather than a script, so a
   site keeps its promise of no visitor JavaScript unless a working part needs one.

   The blue is written here rather than taken from the palette, on purpose. Tape is a material,
   not a role: a decorator's tape is blue whatever colours the business chose, the same call the
   hero already makes for white text over a photo. It is painted opaque rather than blended into
   the band underneath, because blending looked right on cream and went black on a dark band and
   muddy on a green one, and the palette is the customer's to choose.
   --------------------------------------------------------------------------------------- */
.finish-tape {
  --tape: #4b80c6;
  --tape-top: #7ba6de;
  --tape-dark: #2e5685;
  --tape-under: #9dc0e6;   /* the back of the tape: lighter than the face, still plainly blue */
  --tape-crease: #24466d;
  --tape-w: clamp(1.6rem, 2.7vw, 2.2rem);
  --tape-l: clamp(8rem, 19vw, 13rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .finish-tape { --tape: #5d90d6; --tape-top: #97bbe9; --tape-dark: #39669e; --tape-under: #a9c7ea; --tape-crease: #1d3c60; }
}
:root[data-theme="dark"] .finish-tape { --tape: #5d90d6; --tape-top: #97bbe9; --tape-dark: #39669e; --tape-under: #a9c7ea; --tape-crease: #1d3c60; }

/* The face of a piece of tape: lit along one long edge, shaded along the other, with a faint
   lengthways sheen. No hard grain: at this size it reads as corduroy rather than paper. */
.finish-tape [class*="spacing-"]:not(.band-background)::before,
.finish-tape [class*="spacing-"]:not(.band-background)::after,
.finish-tape figure::before, .finish-tape figure::after,
.finish-tape .gallery-show__frame::before, .finish-tape .gallery-show__frame::after,
.finish-tape li:has(> img.rounded)::before, .finish-tape li:has(> img.rounded)::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  height: var(--tape-w);
  /* flat, the way tape is. A hard dark edge along the bottom turns it into a bar of soap. */
  background:
    linear-gradient(97deg, rgb(255 255 255 / .14) 0 4%, transparent 4% 96%, rgb(0 0 0 / .08) 96% 100%),
    linear-gradient(180deg, rgb(255 255 255 / .26) 0 16%, rgb(255 255 255 / .04) 16% 68%, rgb(0 0 0 / .1) 88% 100%),
    linear-gradient(var(--tape), var(--tape));
  /* cut with a blade: close to square, never quite */
  clip-path: polygon(1% 12%, 4% 0, 97% 5%, 100% 88%, 96% 100%, 2% 92%);
  /* then torn: the filter in the layout ruffles that cut into fibres, and the shadow goes on
     after it so it follows the torn outline rather than the clean one. A browser that cannot
     find the filter drops it and keeps the shadow, which is the blade-cut tape we had before. */
  filter: url(#tape-torn) drop-shadow(0 .14rem .28rem rgb(0 0 0 / .26));
}

.finish-tape [class*="spacing-"]:not(.band-background) { position: relative; }

/* the piece towards the left, stuck down */
.finish-tape [class*="spacing-"]:not(.band-background)::before {
  width: var(--tape-l);
  top: calc(var(--tape-w) * -.3);
  left: clamp(1rem, 7vw, 6rem);
  rotate: -6.5deg;
}

/* the piece towards the right, come away and curled over */
.finish-tape [class*="spacing-"]:not(.band-background)::after {
  width: calc(var(--tape-l) * 1.15);
  top: calc(var(--tape-w) * -.3);
  right: clamp(1rem, 7vw, 6rem);
  rotate: 5.5deg;
  transform-origin: 100% 50%;
  /* the back of the tape at the free end, the crease where it folds over, the face beyond */
  background:
    linear-gradient(180deg, rgb(255 255 255 / .22) 0 16%, rgb(255 255 255 / .03) 16% 70%, rgb(0 0 0 / .1) 88% 100%),
    linear-gradient(93deg,
      color-mix(in srgb, var(--tape-under) 82%, white) 0 8%,
      var(--tape-under) 12% 30%,
      var(--tape-crease) 33% 35.5%,
      var(--tape-top) 38%,
      var(--tape) 54%,
      var(--tape) 100%);
  /* the free end is squarer than the cut end: it was pulled away, not sliced */
  clip-path: polygon(1% 16%, 5% 3%, 97% 4%, 100% 90%, 7% 97%, 0 82%);
  border-radius: .3rem 0 0 .3rem;
  transform: perspective(18rem) rotateX(13deg);
  filter: drop-shadow(-.3rem .5rem .5rem rgb(0 0 0 / .42));
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .5s ease;
}

@media (hover: hover) {
  .finish-tape [class*="spacing-"]:not(.band-background):hover::after { transform: perspective(18rem) rotateX(58deg) translateY(-.25rem); filter: drop-shadow(-.45rem .85rem .75rem rgb(0 0 0 / .5)); }
}
.finish-tape [class*="spacing-"]:not(.band-background):active::after { transform: perspective(18rem) rotateX(58deg) translateY(-.25rem); filter: drop-shadow(-.45rem .85rem .75rem rgb(0 0 0 / .5)); }

/* Two ways it moves on its own, and every browser gets one of them.

   Where a browser can tie an animation to the scroll, the tape peels as the band comes up the
   screen, which is the one worth having. Where it cannot, and that is most phones today, the
   tape lifts once in a while by itself, the way a loose end catches a draught. Leaning on the
   scroll alone meant a phone saw nothing move at all. */
@keyframes tape-peel {
  from { transform: perspective(18rem) rotateX(6deg); }
  to { transform: perspective(18rem) rotateX(62deg) translateY(-.3rem); }
}
@keyframes tape-flutter {
  0%, 58% { transform: perspective(18rem) rotateX(13deg); filter: drop-shadow(-.3rem .5rem .5rem rgb(0 0 0 / .42)); }
  72% { transform: perspective(18rem) rotateX(56deg) translateY(-.25rem); filter: drop-shadow(-.45rem .85rem .75rem rgb(0 0 0 / .5)); }
  84% { transform: perspective(18rem) rotateX(26deg) translateY(-.05rem); }
  100% { transform: perspective(18rem) rotateX(13deg); filter: drop-shadow(-.3rem .5rem .5rem rgb(0 0 0 / .42)); }
}
.finish-tape [class*="spacing-"]:not(.band-background)::after {
  animation: tape-flutter 7s ease-in-out infinite;
}
@supports (animation-timeline: view()) {
  .finish-tape [class*="spacing-"]:not(.band-background)::after {
    animation: tape-peel linear both;
    animation-timeline: view();
    animation-range: entry 25% cover 55%;
  }
}

/* The two sections that draw their own shade over a photo need ::after for it, so they keep the
   stuck-down piece and give up the curl. */
.finish-tape .hero--over::after, .finish-tape .image-banner--photo::after {
  inset: 0; top: 0; right: 0; width: auto; height: auto;
  background: linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / .55));
  clip-path: none; transform: none; rotate: none; filter: none; border-radius: 0; animation: none; z-index: 0;
}
.finish-tape .image-banner--photo.image-banner--shade-light::after { background: color-mix(in srgb, white 65%, transparent); }
.finish-tape .image-banner--photo.image-banner--shade-none::after { background: none; }

/* A photo is taped up too, a shorter piece centred on two opposite corners. An image cannot
   carry a pseudo-element, so the tape goes on whatever holds it; the base sheet owns .rounded,
   so it can look for it without any part having to know the tape exists. */
.finish-tape figure, .finish-tape .gallery-show__frame,
.finish-tape li:has(> img.rounded) { position: relative; }
.finish-tape figure::before, .finish-tape figure::after,
.finish-tape .gallery-show__frame::before, .finish-tape .gallery-show__frame::after,
.finish-tape li:has(> img.rounded)::before, .finish-tape li:has(> img.rounded)::after {
  z-index: 2;
  width: clamp(4.5rem, 13vw, 6.5rem);
  height: calc(var(--tape-w) * .8);
}
.finish-tape figure::before, .finish-tape .gallery-show__frame::before,
.finish-tape li:has(> img.rounded)::before { top: 0; left: 0; translate: -46% -52%; rotate: -42deg; }
.finish-tape figure::after, .finish-tape .gallery-show__frame::after,
.finish-tape li:has(> img.rounded)::after { bottom: 0; right: 0; translate: 46% 52%; rotate: -42deg; }
/* Tape never lies over words. A photo with words under it, its caption or the builder's note that it
   has no description, is taped across its two top corners, as a gallery's is: a bottom piece sat over a
   caption of two lines, over the note and over the next photo's words. */
.finish-tape figure:has(> figcaption, > .empty-note)::after { top: 0; bottom: auto; translate: 46% -52%; rotate: 42deg; }
/* A top piece reaches above its photo by half its turned height, a third of its length and three
   tenths of the tape's width, so whatever has words above a taped photo stands that far off: the
   heading over a part, and the row above in a grid with captions or notes. */
.finish-tape { --tape-reach: calc(clamp(4.5rem, 13vw, 6.5rem) * .34 + var(--tape-w) * .3 + .25rem); }
.finish-tape .stack > * + :is(.record-photos__grid, .photo-gallery__grid, .ba-slider__pair) { margin-top: var(--tape-reach); }
.finish-tape :is(.record-photos__grid, .photo-gallery__grid):has(figcaption, .empty-note), .finish-tape .before-after__pair { row-gap: var(--tape-reach); }
/* a quote is a figure but not a photo, and tape on its corners lay over its words, so it is left untaped */
.finish-tape .quote::before, .finish-tape .quote::after { content: none; }
/* In a gallery, where a caption may run to several lines, a photo with one is taped across its two
   top corners instead, clear of the words. A slideshow tapes the frame its photos sit in, which clips
   the tape to its corners as the slideshow always did, and a grid or a strip stays untaped. The
   builder's note that a photo has no description is kept clear the same way. */
.finish-tape .gallery__photo:has(> figcaption, > .empty-note)::after { top: 0; bottom: auto; translate: 46% -52%; rotate: 42deg; }
.finish-tape .gallery__grid:has(figcaption, .empty-note) { row-gap: 3rem; }
/* The top pieces reach about 3rem above a photo, so the Photos collection stands that far from the
   words above it, as each row does from the captions above it, and covers none of them. */
.finish-tape .stack > * + .gallery__grid { margin-top: 3rem; }
.finish-tape :is(.gallery-show__slide, .gallery-grid__item, .gallery-strip__item)::before,
.finish-tape :is(.gallery-show__slide, .gallery-grid__item, .gallery-strip__item)::after { content: none; }
.finish-tape .stack > .before-after__pair { margin-top: var(--tape-reach); }
/* tape that reaches past the page edge never makes a phone scroll sideways */
.finish-tape main { overflow-x: clip; }
/* the band right under the header is not taped: the header would cover the tape */
.finish-tape main > .shopify-section:first-child [class*="spacing-"]::before,
.finish-tape main > .shopify-section:first-child [class*="spacing-"]::after { display: none; }

/* Nobody is shown movement they asked not to be shown. The tape stays, curl and all. */
@media (prefers-reduced-motion: reduce) {
  .finish-tape [class*="spacing-"]:not(.band-background)::after { animation: none !important; transition: none; }
  .finish-tape [class*="spacing-"]:not(.band-background):hover::after,
  .finish-tape [class*="spacing-"]:not(.band-background):active::after { transform: perspective(18rem) rotateX(13deg); filter: drop-shadow(-.3rem .5rem .5rem rgb(0 0 0 / .42)); }
}

/* A jump to a place on a page (/#services) lands with the section's top just under a header that
   stays at the top, and at the top of the window under one that scrolls away. The header's own small
   script (assets/jump.js) writes the header's real height into --header-height; until it runs, or
   without it, a header that stays is taken as 5rem. A jump glides there, unless the device asks for
   less motion. Each section's addresses are empty marks at the top of its box (render anchors.js). */
html { scroll-padding-top: var(--header-height, 0px); }
html:has(.header--sticky) { scroll-padding-top: var(--header-height, 5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.section-anchor { display: block; height: 0; }
/* The menu marks where the visitor is: the page they are on, the drop-down holding it, and on a page
   its menu jumps around, the section in view (jump.js), which takes the mark from the page's link.
   A section in view whose link is in a closed drop-down marks the drop-down's own link too, or its
   words where it is a heading with no page, so the menu never shows no mark at all. */
.header__links :is(a, summary):is([aria-current="true"], [aria-current="location"]) { text-decoration: underline; text-underline-offset: .25em; }
.header__links:has(a[aria-current="location"]) a[aria-current="page"] { text-decoration: none; }
.header__links > li:has(.header__sub a[aria-current="location"]) > a,
.header__links > li:has(.header__sub a[aria-current="location"]) > details > .header__drop-toggle--heading { text-decoration: underline; text-underline-offset: .25em; }

/* Background texture (a named choice on the theme): a faint pattern on every page-coloured
   section, drawn in the accent so it follows light and dark. More kinds can join these two. */
.texture-grid .band-background:not(.header) {
  background-image: linear-gradient(var(--texture-ink) 1px, transparent 1px), linear-gradient(90deg, var(--texture-ink) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.texture-dots .band-background:not(.header) {
  background-image: radial-gradient(var(--texture-ink-strong) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
}
:root { --texture-ink: color-mix(in srgb, var(--color-accent) 7%, transparent); --texture-ink-strong: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* A video from the library (snippets/library-video.liquid). A looping one has a button of its own to
   pause it, drawn here: two bars while it plays, a triangle while it is still. video.js shows it. */
.lib-video { position: relative; }
.lib-video__clip { display: block; width: 100%; height: auto; border-radius: inherit; }
/* the Video part keeps one shape whether its still or the video shows, so nothing jumps as it starts */
.video.lib-video .lib-video__clip { aspect-ratio: 16 / 9; object-fit: contain; }
.lib-video__toggle { position: absolute; right: .6rem; bottom: .6rem; z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lib-video__toggle[hidden] { display: none; }
.lib-video__toggle::before { content: ''; box-sizing: border-box; width: .8rem; height: .95rem; border-inline: .28rem solid currentColor; }
.lib-video__toggle.is-paused::before { width: 0; height: 0; border-block: .5rem solid transparent; border-inline: .8rem solid currentColor; border-inline-end: 0; margin-left: .2rem; }
/* the house ring, with a white one inside it filling the gap, so focus shows on a light frame and a dark one */
.lib-video__toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
/* The tag pills over a part's cards (snippets/filter-pills.liquid), shown by the part's own script. */
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pills[hidden] { display: none; }
.filter-pill { font: inherit; font-size: var(--text-small); padding: .35rem .9rem; border: 1px solid color-mix(in srgb, var(--band-fg, var(--color-foreground)) 25%, transparent); border-radius: 999px; background: transparent; color: var(--band-fg, var(--color-foreground)); cursor: pointer; }
@media (hover: hover) { .filter-pill:hover { border-color: color-mix(in srgb, var(--band-fg, var(--color-foreground)) 55%, transparent); } }
.filter-pills--dark .filter-pill[aria-pressed="true"] { background: var(--band-fg, var(--color-foreground)); border-color: var(--band-fg, var(--color-foreground)); color: var(--band-bg, var(--color-background)); }
.filter-pills--accent .filter-pill[aria-pressed="true"] { background: var(--band-accent, var(--color-accent)); border-color: var(--band-accent, var(--color-accent)); color: var(--color-accent-foreground); }
[data-tags][hidden] { display: none !important; }