/* =============================================================================
   The public website stylesheet.

   Every value comes from the --site-* custom properties rendered by
   website/themes.py into templates/website/base.html. Nothing here loads an
   external font, icon set, or script: Inter and the Phosphor regular weight are
   vendored under /static/ss-admin/vendor/ and linked by the base template.

   Section order:
     1. Reset and base type
     2. Layout primitives (container, section, style variants, grid, card)
     2b. Section appearance (fixed backgrounds, overlays, height, card styles, fade in)
     3. Buttons and links
     4. Navigation
     5. Footer
     6. Rich text
     7. Placeholder image
     8. Section types
     8b. Wired sections and the draft notice
     9. Reduced motion and print
   ========================================================================== */

/* ---- 1. Reset and base type ---------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.site-body {
    margin: 0;
    padding: 0;
    font-family: var(--site-font-body);
    font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
    line-height: 1.65;
    color: var(--site-text);
    background: var(--site-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.site-body > main {
    flex: 1 0 auto;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.6em;
    font-family: var(--site-font-heading);
    font-weight: var(--site-heading-weight);
    line-height: 1.18;
    letter-spacing: var(--site-heading-tracking, -0.01em);
    text-transform: var(--site-heading-case, none);
    color: var(--site-text);
}

/* Website.heading_scale multiplies h1 and h2; h3 and h4 move half as far so
   card titles stay in proportion to their text. */
h1 {
    font-size: calc(clamp(2.1rem, 1.25rem + 3.3vw, 3.3rem) * var(--site-heading-scale, 1));
}

h2 {
    font-size: calc(clamp(1.65rem, 1.15rem + 2vw, 2.4rem) * var(--site-heading-scale, 1));
}

h3 {
    font-size: calc(clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem) * (1 + (var(--site-heading-scale, 1) - 1) / 2));
}

h4 {
    font-size: calc(clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem) * (1 + (var(--site-heading-scale, 1) - 1) / 2));
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--site-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--site-primary-hover);
}

:focus-visible {
    outline: 3px solid var(--site-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--site-border);
    margin: 2rem 0;
}

.site-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--site-primary);
    color: var(--site-primary-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--site-radius) 0;
}

.site-skip-link:focus {
    left: 0;
}

/* ---- 2. Layout primitives ------------------------------------------------ */

.site-container {
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.site-section {
    position: relative;
    padding-top: var(--site-section-padding);
    padding-bottom: var(--site-section-padding);
    background: var(--site-surface);
    color: var(--site-text);
}

.site-section + .site-section {
    border-top: 1px solid transparent;
}

.site-section__heading {
    margin-bottom: 0.5em;
}

/* The eyebrow: a small label above a section heading, in the brand color,
   or in the section's own light ink on a dark or brand backdrop. */
.site-section__eyebrow {
    margin: 0 0 0.75rem;
    font-family: var(--site-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--site-primary);
}

.site-section--ink-light .site-section__eyebrow {
    color: color-mix(in srgb, currentColor 82%, transparent);
}

.site-section__intro {
    max-width: 62ch;
    margin: 0 0 2rem;
    color: var(--site-text-muted);
    font-size: 1.05em;
}

.site-section__header {
    margin-bottom: 2.25rem;
}

.site-section__header--centered {
    text-align: center;
}

.site-section__header--centered .site-section__intro {
    margin-left: auto;
    margin-right: auto;
}

.site-section__unavailable {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    color: var(--site-text-muted);
}

/* Style variants. Each one rebinds the local ink tokens so buttons, links, and
   muted text inside the section follow the background without extra classes. */

.site-section--variant-tinted {
    background: var(--site-surface-alt);
}

/* The brand and dark variants swap the section's background and text, so the
   tokens derived from the page text and surface (--site-text-muted, --site-border)
   are re-derived here from the variant's own pair. Custom properties cascade, so
   every muted label, divider, and input border inside the section picks the
   legible value without a rule per class. --site-text and --site-surface are
   deliberately not redefined: the dark background reads --site-text on this
   same element, and a self-reference would be a cycle. */
.site-section--variant-brand {
    --site-text-muted: color-mix(in srgb, var(--site-primary-ink) 78%, var(--site-primary));
    --site-border: color-mix(in srgb, var(--site-primary-ink) 26%, var(--site-primary));
    background: var(--site-primary);
    color: var(--site-primary-ink);
}

.site-section--variant-dark {
    --site-text-muted: color-mix(in srgb, var(--site-surface) 74%, var(--site-text));
    --site-border: color-mix(in srgb, var(--site-surface) 22%, var(--site-text));
    background: var(--site-text);
    color: var(--site-surface);
}

/* An overlay (section appearance) sets the ink the same way, without the
   variant's background, so the picture shows through the shade. So does a
   gradient that paints the whole section (brand to accent, dark fade; section
   2b draws it). Every descendant rule below that names a variant names its
   overlay and its gradient backdrop too. The light wash puts the page's own
   ink back, and comes last so it also wins over a dark or brand variant or
   gradient underneath it. */
.site-section--overlay-brand {
    --site-text-muted: color-mix(in srgb, var(--site-primary-ink) 78%, var(--site-primary));
    --site-border: color-mix(in srgb, var(--site-primary-ink) 26%, var(--site-primary));
    color: var(--site-primary-ink);
}

.site-section--overlay-dark {
    --site-text-muted: color-mix(in srgb, var(--site-surface) 74%, var(--site-text));
    --site-border: color-mix(in srgb, var(--site-surface) 22%, var(--site-text));
    color: var(--site-surface);
}

.site-section--gradient-backdrop-brand {
    --site-text-muted: color-mix(in srgb, var(--site-primary-ink) 78%, var(--site-primary));
    --site-border: color-mix(in srgb, var(--site-primary-ink) 26%, var(--site-primary));
    color: var(--site-primary-ink);
}

.site-section--gradient-backdrop-dark {
    --site-text-muted: color-mix(in srgb, var(--site-surface) 74%, var(--site-text));
    --site-border: color-mix(in srgb, var(--site-surface) 22%, var(--site-text));
    color: var(--site-surface);
}

.site-section--overlay-light {
    --site-text-muted: color-mix(in srgb, var(--site-text) 68%, var(--site-surface));
    --site-border: color-mix(in srgb, var(--site-text) 14%, var(--site-surface));
    color: var(--site-text);
}

.site-section--variant-brand h1,
.site-section--variant-brand h2,
.site-section--variant-brand h3,
.site-section--variant-brand h4,
.site-section--variant-dark h1,
.site-section--variant-dark h2,
.site-section--variant-dark h3,
.site-section--variant-dark h4,
.site-section--overlay-brand h1,
.site-section--overlay-brand h2,
.site-section--overlay-brand h3,
.site-section--overlay-brand h4,
.site-section--overlay-dark h1,
.site-section--overlay-dark h2,
.site-section--overlay-dark h3,
.site-section--overlay-dark h4,
.site-section--gradient-backdrop-brand h1,
.site-section--gradient-backdrop-brand h2,
.site-section--gradient-backdrop-brand h3,
.site-section--gradient-backdrop-brand h4,
.site-section--gradient-backdrop-dark h1,
.site-section--gradient-backdrop-dark h2,
.site-section--gradient-backdrop-dark h3,
.site-section--gradient-backdrop-dark h4 {
    color: inherit;
}

.site-section--variant-brand a:not(.site-button),
.site-section--variant-dark a:not(.site-button),
.site-section--overlay-brand a:not(.site-button),
.site-section--overlay-dark a:not(.site-button),
.site-section--gradient-backdrop-brand a:not(.site-button),
.site-section--gradient-backdrop-dark a:not(.site-button) {
    color: inherit;
}

/* Accents painted in the brand color vanish on the brand background. */
.site-section--variant-brand .site-button--link,
.site-section--variant-brand .site-testimonial__mark,
.site-section--variant-brand .site-faq__question .ph,
.site-section--variant-brand .site-announcement .ph,
.site-section--variant-brand .site-person__role,
.site-section--variant-brand .site-plan-card__price,
.site-section--variant-brand .site-rich-text li::marker,
.site-section--variant-brand .site-service-area-check__message--in-area,
.site-section--overlay-brand .site-button--link,
.site-section--overlay-brand .site-testimonial__mark,
.site-section--overlay-brand .site-faq__question .ph,
.site-section--overlay-brand .site-announcement .ph,
.site-section--overlay-brand .site-person__role,
.site-section--overlay-brand .site-plan-card__price,
.site-section--overlay-brand .site-rich-text li::marker,
.site-section--overlay-brand .site-service-area-check__message--in-area,
.site-section--gradient-backdrop-brand .site-button--link,
.site-section--gradient-backdrop-brand .site-testimonial__mark,
.site-section--gradient-backdrop-brand .site-faq__question .ph,
.site-section--gradient-backdrop-brand .site-announcement .ph,
.site-section--gradient-backdrop-brand .site-person__role,
.site-section--gradient-backdrop-brand .site-plan-card__price,
.site-section--gradient-backdrop-brand .site-rich-text li::marker,
.site-section--gradient-backdrop-brand .site-service-area-check__message--in-area {
    color: inherit;
}

.site-section--variant-brand .site-testimonial__author-name,
.site-section--variant-dark .site-testimonial__author-name,
.site-section--overlay-brand .site-testimonial__author-name,
.site-section--overlay-dark .site-testimonial__author-name,
.site-section--gradient-backdrop-brand .site-testimonial__author-name,
.site-section--gradient-backdrop-dark .site-testimonial__author-name {
    color: inherit;
}

.site-section--variant-brand .site-rich-text blockquote,
.site-section--variant-brand .site-rich-text thead th,
.site-section--variant-dark .site-rich-text blockquote,
.site-section--variant-dark .site-rich-text thead th,
.site-section--overlay-brand .site-rich-text blockquote,
.site-section--overlay-brand .site-rich-text thead th,
.site-section--overlay-dark .site-rich-text blockquote,
.site-section--overlay-dark .site-rich-text thead th,
.site-section--gradient-backdrop-brand .site-rich-text blockquote,
.site-section--gradient-backdrop-brand .site-rich-text thead th,
.site-section--gradient-backdrop-dark .site-rich-text blockquote,
.site-section--gradient-backdrop-dark .site-rich-text thead th {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.site-section--variant-brand .site-card,
.site-section--variant-dark .site-card,
.site-section--overlay-brand .site-card,
.site-section--overlay-dark .site-card,
.site-section--gradient-backdrop-brand .site-card,
.site-section--gradient-backdrop-dark .site-card {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 24%, transparent);
}

.site-section--variant-brand .site-button--primary,
.site-section--overlay-brand .site-button--primary,
.site-section--gradient-backdrop-brand .site-button--primary {
    background: var(--site-primary-ink);
    color: var(--site-primary);
    border-color: var(--site-primary-ink);
}

.site-section--variant-brand .site-button--primary:hover,
.site-section--overlay-brand .site-button--primary:hover,
.site-section--gradient-backdrop-brand .site-button--primary:hover {
    background: color-mix(in srgb, var(--site-primary-ink) 88%, var(--site-primary));
    color: var(--site-primary);
}

.site-section--variant-brand.site-section--overlay-light .site-button--primary {
    background: var(--site-primary);
    color: var(--site-primary-ink);
    border-color: var(--site-primary);
}

.site-section--variant-brand.site-section--overlay-light .site-button--primary:hover {
    background: var(--site-primary-hover);
    color: var(--site-primary-ink);
    border-color: var(--site-primary-hover);
}

/* The same restore for a brand gradient under a light wash, and for a dark
   gradient painted over the brand variant. */
.site-section--gradient-backdrop-brand.site-section--overlay-light .site-button--primary,
.site-section--variant-brand.site-section--gradient-backdrop-dark:not(.site-section--overlay) .site-button--primary {
    background: var(--site-primary);
    color: var(--site-primary-ink);
    border-color: var(--site-primary);
}

.site-section--gradient-backdrop-brand.site-section--overlay-light .site-button--primary:hover,
.site-section--variant-brand.site-section--gradient-backdrop-dark:not(.site-section--overlay) .site-button--primary:hover {
    background: var(--site-primary-hover);
    color: var(--site-primary-ink);
    border-color: var(--site-primary-hover);
}

.site-section--variant-brand .site-button--secondary,
.site-section--variant-dark .site-button--secondary,
.site-section--overlay-brand .site-button--secondary,
.site-section--overlay-dark .site-button--secondary,
.site-section--gradient-backdrop-brand .site-button--secondary,
.site-section--gradient-backdrop-dark .site-button--secondary {
    color: inherit;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.site-section--variant-brand .site-button--secondary:hover,
.site-section--variant-dark .site-button--secondary:hover,
.site-section--overlay-brand .site-button--secondary:hover,
.site-section--overlay-dark .site-button--secondary:hover,
.site-section--gradient-backdrop-brand .site-button--secondary:hover,
.site-section--gradient-backdrop-dark .site-button--secondary:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
}

/* Section background image. render_section's inline style sets only the
   --site-section-photo URL; these paint and place it. Two classes so they
   outrank the base and variant `background` shorthands, which reset the
   image, size, position and repeat. The variant's color stays underneath, so
   a transparent tile reads as a pattern over the variant color. A gradient
   (section 2b) adds its own layer to the same background-image. */
.site-section.site-section--background {
    background-image: var(--site-section-photo);
}

.site-section.site-section--background-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-section.site-section--background-tile {
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
}

/* Full width: the container drops its max width and side padding so the
   section runs edge to edge. Headings, intros and notices keep the left edge
   every other section's content lines up with (margins, not padding, so the
   intro's 62ch measure is not eaten by the gutter). */
.site-section--full-width {
    --site-full-width-gutter: max(1.25rem, calc((100vw - var(--site-max-width)) / 2 + 1.25rem));
}

.site-section--full-width > .site-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.site-section--full-width > .site-container > .site-section__eyebrow,
.site-section--full-width > .site-container > .site-section__heading,
.site-section--full-width > .site-container > .site-section__intro,
.site-section--full-width > .site-container > .site-wired-notice,
.site-section--full-width > .site-container > .site-custom-code__notice {
    margin-left: var(--site-full-width-gutter);
    margin-right: var(--site-full-width-gutter);
}

.site-section--full-width .site-gallery__item img,
.site-section--full-width .site-gallery__item .site-placeholder-image,
.site-section--full-width .site-map-widget,
.site-section--full-width .site-image-with-text__media img,
.site-section--full-width .site-image-with-text__media .site-placeholder-image {
    border-radius: 0;
}

.site-section--full-width .site-custom-form {
    max-width: none;
}

.site-section--full-width .site-image-with-text__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 900px) {
    .site-section--full-width .site-image-with-text__body {
        padding-left: 0;
        padding-right: var(--site-full-width-gutter);
    }

    .site-section--full-width .site-image-with-text--image-right .site-image-with-text__body {
        padding-left: var(--site-full-width-gutter);
        padding-right: 0;
    }
}

/* ---- 2b. Section appearance ---------------------------------------------- */

/* Background image fit: fixed. The picture stays put while the page scrolls
   past it. iOS Safari sizes a fixed background to the whole page, so it gets
   plain cover; -webkit-touch-callout is supported only there. Not a
   (hover: none) query: desktops can match it too (a touchscreen laptop,
   headless Chrome), and there fixed looked exactly like cover. Android
   Chrome ignores a fixed background by itself and scrolls it. */
.site-section.site-section--background-fixed {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
    .site-section.site-section--background-fixed {
        background-attachment: scroll;
    }
}

/* Overlay: a shade between the section's background (color and picture) and
   its content. isolation makes the section its own stacking context, so the
   pseudo element at z-index -1 paints over the section's background but under
   every child. The light wash needs more strength than the dark shade to keep
   dark text readable, so each overlay reads its own strength token. */
.site-section--overlay {
    --site-overlay-dark-strength: 55%;
    --site-overlay-light-strength: 72%;
    --site-overlay-brand-strength: 78%;
    isolation: isolate;
}

.site-section--overlay.site-section--overlay-strength-subtle {
    --site-overlay-dark-strength: 35%;
    --site-overlay-light-strength: 55%;
    --site-overlay-brand-strength: 60%;
}

.site-section--overlay.site-section--overlay-strength-strong {
    --site-overlay-dark-strength: 75%;
    --site-overlay-light-strength: 86%;
    --site-overlay-brand-strength: 90%;
}

.site-section--overlay-dark {
    --site-overlay-color: color-mix(in srgb, var(--site-text) var(--site-overlay-dark-strength), transparent);
}

.site-section--overlay-light {
    --site-overlay-color: color-mix(in srgb, var(--site-surface) var(--site-overlay-light-strength), transparent);
}

.site-section--overlay-brand {
    --site-overlay-color: color-mix(in srgb, var(--site-primary) var(--site-overlay-brand-strength), transparent);
}

.site-section--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--site-overlay-color);
    pointer-events: none;
}

/* The hero with the picture behind the text has its own shade (::after on
   .site-hero--image_background). An overlay replaces it; None removes it. */
.site-section--overlay .site-hero--image_background::after {
    background: var(--site-overlay-color);
}

.site-section--overlay-none .site-hero--image_background::after {
    display: none;
}

.site-section--overlay-light .site-hero--image_background {
    color: var(--site-text);
}

.site-section--overlay-brand .site-hero--image_background {
    color: var(--site-primary-ink);
}

/* Gradient: a layer of the section's own background built from the website
   colors, so it needs no pseudo element and stacks under the overlay. Brand
   to accent and the dark fade paint the whole section (their ink is set in
   section 2 with the variants); the glows tint the variant's color. Over a
   cover or fixed picture the gradient goes on top and turns see-through;
   under a tile it stays solid and the tile repeats over it. */
.site-section--gradient {
    --site-gradient-opacity: 100%;
}

.site-section--gradient.site-section--background-cover,
.site-section--gradient.site-section--background-fixed {
    --site-gradient-opacity: 80%;
}

.site-section.site-section--gradient {
    background-image: var(--site-section-gradient);
}

.site-section.site-section--gradient.site-section--background {
    background-image: var(--site-section-gradient), var(--site-section-photo);
}

.site-section.site-section--gradient.site-section--background-tile {
    background-image: var(--site-section-photo), var(--site-section-gradient);
}

.site-section--gradient-brand-to-accent {
    --site-section-gradient: linear-gradient(
        135deg,
        color-mix(in srgb, var(--site-primary) var(--site-gradient-opacity), transparent) 15%,
        color-mix(in srgb, color-mix(in srgb, var(--site-accent) 80%, var(--site-primary)) var(--site-gradient-opacity), transparent) 100%);
}

.site-section--gradient-dark-fade {
    --site-section-gradient: linear-gradient(
        160deg,
        color-mix(in srgb, var(--site-text) var(--site-gradient-opacity), transparent) 25%,
        color-mix(in srgb, color-mix(in srgb, var(--site-text) 72%, var(--site-primary)) var(--site-gradient-opacity), transparent) 100%);
}

/* The glows mix the brand and accent colors toward white first, so a deep
   brand color reads as light rather than as a grey smudge. */
.site-section--gradient-soft-glow,
.site-section--gradient-mesh {
    --site-glow-primary: color-mix(in oklch, var(--site-primary) 72%, #ffffff);
    --site-glow-accent: color-mix(in oklch, var(--site-accent) 72%, #ffffff);
}

/* On the dark variant a whitened glow reads as fog; the pure colors glow. */
.site-section--variant-dark.site-section--gradient-soft-glow,
.site-section--variant-dark.site-section--gradient-mesh {
    --site-glow-primary: var(--site-primary);
    --site-glow-accent: var(--site-accent);
}

.site-section--gradient-soft-glow {
    --site-section-gradient:
        radial-gradient(ellipse 75% 70% at 50% 0%, color-mix(in srgb, var(--site-glow-primary) 40%, transparent), transparent 72%),
        radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--site-glow-accent) 26%, transparent), transparent 72%);
}

.site-section--gradient-mesh {
    --site-section-gradient:
        radial-gradient(at 8% 12%, color-mix(in srgb, var(--site-glow-primary) 42%, transparent), transparent 52%),
        radial-gradient(at 92% 8%, color-mix(in srgb, var(--site-glow-accent) 36%, transparent), transparent 50%),
        radial-gradient(at 82% 92%, color-mix(in srgb, var(--site-glow-primary) 32%, transparent), transparent 55%),
        radial-gradient(at 12% 96%, color-mix(in srgb, var(--site-glow-accent) 26%, transparent), transparent 50%);
}

/* Pattern: one black-on-clear SVG per pattern used as a mask on ::after, so
   the fill color tints it and a single file suits every brand. The brand
   color on a light section, the text color on a dark one (where the brand
   color could vanish). isolation keeps the pseudo element at z-index -1 above
   the section's background and overlay but under its content. */
.site-section--pattern {
    --site-pattern-strength: 16%;
    --site-pattern-color: var(--site-primary);
    isolation: isolate;
}

.site-section--pattern.site-section--ink-light {
    --site-pattern-color: currentColor;
}

.site-section--pattern.site-section--pattern-strength-medium {
    --site-pattern-strength: 28%;
}

.site-section--pattern.site-section--pattern-strength-strong {
    --site-pattern-strength: 44%;
}

.site-section--pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--site-pattern-color) var(--site-pattern-strength), transparent);
    -webkit-mask-image: var(--site-pattern-mask);
    mask-image: var(--site-pattern-mask);
    -webkit-mask-size: var(--site-pattern-size);
    mask-size: var(--site-pattern-size);
    pointer-events: none;
}

.site-section--pattern-dots {
    --site-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.1'/%3E%3C/svg%3E");
    --site-pattern-size: 22px 22px;
}

.site-section--pattern-grid {
    --site-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' fill='none' stroke='black'/%3E%3C/svg%3E");
    --site-pattern-size: 32px 32px;
}

.site-section--pattern-diagonal {
    --site-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-4 4L4 -4M0 16L16 0M12 20L20 12' stroke='black' stroke-width='1.25'/%3E%3C/svg%3E");
    --site-pattern-size: 16px 16px;
}

.site-section--pattern-contour {
    --site-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpath d='M325 420L321 412L317 404L313 396L309 388L304 380L300 374L295 368L288 363L280 365L275 372L272 384L274 396L277 404L282 412L288 418L291 420M291 0L299 4L308 7L316 9L326 8L325 0M36 26L36 32L40 40L47 48L52 53L60 60L67 64L76 68L84 69L92 67L100 61L104 52L102 40L99 32L93 24L88 20L80 16L68 14L56 14L48 16L40 20L36 26ZM384 420L376 416L368 414L360 411L352 407L344 403L336 397L331 392L325 384L320 377L316 371L312 363L308 355L304 346L300 337L296 330L288 328L282 332L276 338L271 344L267 352L263 360L260 372L260 380L260 390L262 400L264 409L268 419L269 420M269 0L274 8L280 15L286 20L292 24L300 29L308 34L316 39L322 44L328 48L336 54L344 57L356 58L364 55L372 50L379 44L384 39L392 32L396 27L400 20L399 12L392 5L384 0M304 282L300 292L304 301L312 297L318 292L321 284L316 277L306 280L304 282ZM17 0L28 1L40 1L52 1L64 1L76 2L84 4L92 8L100 15L105 20L110 28L114 36L117 44L118 56L116 64L111 72L104 77L96 80L84 81L76 80L66 76L59 72L52 67L44 61L37 56L32 52L24 47L16 43L4 40L0 40M420 414L412 411L404 408L394 404L384 401L376 399L366 396L356 392L349 388L343 384L336 377L332 372L327 364L324 356L321 344L321 332L324 324L329 316L336 309L341 304L347 296L350 288L348 276L344 270L338 264L332 260L323 256L312 255L304 257L296 261L289 268L284 275L280 283L277 292L275 300L272 309L268 320L265 328L261 336L258 344L255 352L252 364L251 372L251 384L252 396L253 404L255 416L256 420M256 0L260 11L264 20L268 27L272 32L280 38L288 43L296 48L302 52L308 56L316 62L323 68L328 72L336 77L344 80L355 80L364 76L370 72L376 67L384 60L389 56L396 51L404 46L412 42L420 40M99 0L104 4L111 12L116 20L120 26L124 34L128 43L131 52L132 60L132 68L128 76L120 84L113 88L104 91L96 93L84 92L76 90L68 87L60 83L52 78L44 73L37 68L31 64L24 60L13 56L4 55L0 55M99 420L92 415L84 412L72 410L60 409L48 409L36 408L28 407L17 404L8 401L0 397M247 0L248 12L248 20L248 28L244 39L240 44L232 49L224 53L216 56L208 60L200 65L192 71L187 76L183 84L184 95L188 102L195 108L204 111L216 110L224 108L232 104L240 99L248 93L253 88L260 80L264 76L272 70L280 68L288 69L298 72L305 76L312 81L320 87L328 92L335 96L344 99L356 99L364 95L372 89L377 84L384 77L389 72L396 66L404 61L412 57L420 55M420 397L412 394L404 391L395 388L384 385L376 383L366 380L357 376L352 372L344 364L340 357L338 348L339 336L344 328L348 323L356 317L363 312L369 308L376 302L380 292L376 284L370 276L364 270L358 264L352 259L344 253L336 248L328 245L320 244L308 244L300 246L292 250L284 256L280 260L274 268L269 276L266 284L264 293L261 304L259 312L256 321L252 332L250 340L248 348L245 360L244 371L244 380L244 392L244 400L246 412L247 420M420 68L412 70L404 75L397 80L392 86L386 92L380 100L376 104L368 110L360 114L348 115L336 112L328 109L320 104L313 100L306 96L297 92L288 90L277 92L268 96L262 100L255 104L248 108L240 113L232 117L224 121L216 124L204 128L196 129L187 128L179 124L172 117L168 112L161 104L156 99L148 95L136 96L128 98L120 101L108 103L100 104L89 104L80 102L72 100L64 96L56 91L48 86L40 81L33 76L25 72L16 68L8 67L0 68M0 318L5 312L9 304L8 292L4 285L0 282M114 420L108 413L104 408L96 402L88 399L76 397L64 397L52 397L40 396L32 394L24 392L15 388L7 384L0 380M114 0L119 8L124 16L128 22L132 29L136 36L141 44L146 52L152 58L160 63L172 62L180 59L188 56L197 52L205 48L213 44L220 39L228 33L232 27L236 18L238 8L238 0M152 195L152 202L155 212L160 220L166 224L176 226L184 221L187 212L186 200L183 192L179 184L172 178L160 180L156 184L152 195ZM420 282L412 278L404 274L396 271L388 268L380 264L372 259L364 254L356 249L348 244L341 240L332 236L324 234L312 234L300 236L292 239L284 243L277 248L272 253L265 260L261 268L257 276L255 284L252 296L251 304L248 316L246 324L244 332L241 344L239 352L238 364L237 376L237 388L237 400L238 412L238 420M420 318L413 324L406 328L396 332L388 334L380 336L372 340L367 348L370 356L377 360L387 364L396 367L404 371L412 375L420 380M420 80L412 83L406 88L400 94L395 100L389 108L384 114L378 120L372 124L363 128L352 129L343 128L332 124L324 120L316 116L308 112L300 109L292 107L280 107L272 109L264 112L256 116L248 120L240 124L232 129L224 133L216 138L208 143L202 148L197 156L195 164L196 176L197 184L200 196L202 204L203 216L203 228L199 236L192 242L184 245L172 245L164 242L156 237L151 232L145 224L140 216L137 208L135 200L135 188L136 178L139 168L143 160L147 152L150 144L148 132L144 126L136 121L128 119L116 118L104 118L92 117L84 116L73 112L65 108L58 104L52 100L44 94L36 89L28 84L20 81L12 79L0 80M125 420L121 412L117 404L112 396L108 390L103 384L96 379L84 378L76 380L64 382L52 383L40 381L32 378L24 373L18 368L13 360L13 348L17 340L23 332L28 326L32 320L36 312L38 300L36 291L32 282L28 275L21 268L14 264L4 261L0 260M125 0L130 8L135 16L140 24L144 30L149 36L156 42L164 45L176 46L187 44L196 41L204 37L212 32L216 28L223 20L227 12L229 4L229 0M420 260L412 259L400 257L392 255L383 252L374 248L367 244L359 240L352 236L344 232L335 228L324 225L312 225L300 227L292 230L284 233L276 238L268 243L261 248L256 253L250 260L247 268L244 280L243 288L241 300L240 310L238 320L236 331L234 340L232 352L231 360L230 372L230 384L230 396L230 408L229 420M221 420L223 408L223 396L223 384L224 372L224 364L225 352L227 340L228 331L230 320L231 308L231 296L230 284L229 272L227 264L220 256L216 256L204 258L192 259L180 260L168 258L160 255L152 250L145 244L140 238L136 232L131 224L127 216L124 208L120 196L119 188L118 176L118 164L116 152L112 145L106 140L96 136L88 134L80 131L72 127L64 122L56 117L50 112L44 108L36 102L28 97L20 94L8 92L0 95M136 420L132 412L128 401L126 392L124 381L123 372L123 360L122 348L120 339L116 332L108 324L100 321L92 318L84 316L76 312L68 305L64 300L59 292L55 284L50 276L45 268L40 260L36 255L28 248L20 245L12 243L0 243M136 0L140 8L144 14L149 20L156 27L164 32L172 34L184 34L192 31L200 28L208 22L214 16L218 8L221 0M420 95L412 100L408 104L402 112L397 120L392 126L386 132L380 136L371 140L360 142L348 142L339 140L329 136L321 132L314 128L305 124L296 121L288 119L276 120L268 122L260 125L252 128L244 132L236 137L228 142L221 148L216 154L212 160L209 172L209 184L212 196L213 204L216 213L219 224L222 232L225 240L232 245L240 244L249 240L258 236L266 232L274 228L283 224L292 221L300 218L309 216L320 215L328 216L340 220L348 223L356 227L364 232L372 236L380 239L388 241L400 244L412 244L420 243M211 420L214 412L215 400L216 389L216 380L216 368L217 356L218 344L219 332L220 324L220 312L220 304L217 292L213 284L208 280L199 276L188 274L176 274L164 272L156 270L148 266L141 260L136 254L131 248L126 240L122 232L117 224L113 216L108 208L104 200L100 193L96 186L92 180L84 172L79 168L72 164L64 158L59 152L53 144L48 136L44 131L38 124L32 118L24 113L16 111L7 112L0 117M147 420L143 412L140 403L138 392L138 380L138 368L139 356L139 344L137 332L135 324L131 316L124 308L119 304L110 300L100 296L92 293L84 289L78 284L72 278L67 272L62 264L58 256L54 248L50 240L47 232L44 224L40 216L32 209L22 212L16 216L8 220L0 224M147 0L152 8L156 13L164 19L172 22L184 22L192 20L200 15L207 8L211 0M420 117L415 124L409 132L404 139L398 144L392 148L383 152L372 155L364 156L352 157L344 155L334 152L325 148L318 144L311 140L304 136L293 132L284 131L272 132L264 134L256 137L248 141L240 146L232 152L228 157L223 164L220 176L221 188L224 200L227 208L232 216L236 220L247 224L253 224L264 222L272 219L280 216L289 212L300 208L308 206L320 204L332 205L341 208L349 212L357 216L365 220L373 224L384 228L392 229L404 229L412 227L420 224M76 230L75 240L77 248L81 256L87 264L93 268L104 271L113 268L114 256L111 248L107 240L101 232L96 226L88 222L80 224L76 230ZM199 420L203 412L206 404L207 392L208 380L208 368L208 360L208 348L209 336L209 324L208 314L205 304L200 297L192 293L184 291L172 291L164 293L156 298L153 308L153 320L154 332L153 344L152 356L152 364L150 376L150 388L151 400L153 408L157 416L160 420M160 0L164 4L172 9L184 10L192 6L199 0M236 166L233 176L233 188L236 197L241 204L248 209L260 210L271 208L280 205L288 202L296 198L304 195L312 191L320 188L329 184L332 178L328 172L320 164L316 160L308 154L300 148L292 145L284 143L272 143L264 145L256 148L248 153L240 160L236 166ZM348 182L348 188L356 196L361 200L368 205L376 209L388 211L400 209L406 204L410 196L410 184L404 176L396 173L384 173L372 175L364 176L352 180L348 182ZM164 382L164 391L166 400L171 408L178 412L184 412L192 404L195 396L196 388L196 376L196 368L195 356L194 344L192 333L188 325L180 324L176 329L172 340L171 348L168 359L166 368L164 380L164 382ZM248 180L249 184L254 192L264 195L276 192L284 188L290 184L295 176L292 165L286 160L276 158L264 159L256 164L252 168L248 180Z' fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E");
    --site-pattern-size: 420px 420px;
}

.site-section--pattern-leaves {
    --site-pattern-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2824 26%29 rotate%2835%29'%3E%3Cpath d='M0 -13C7 -8 7 7 0 13C-7 7 -7 -8 0 -13ZM0 -9V17'/%3E%3C/g%3E%3Cg transform='translate%2872 72%29 rotate%28-145%29'%3E%3Cpath d='M0 -13C7 -8 7 7 0 13C-7 7 -7 -8 0 -13ZM0 -9V17'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --site-pattern-size: 96px 96px;
}

/* Bottom edge (divider). A mask cuts the shape out of the section's bottom
   band, and the section overlaps the next one by the band's height, so the
   next section (its color, picture or gradient) shows through below the line.
   The section sits above everything after it (z-index from its order, which
   render_section writes as --site-section-order, so a run of shaped sections
   stacks each above the next; kept under the menu's 100), and each band grows
   the padding on both sides
   so no content falls in it. The mask's first layer keeps everything above
   the band; the second is the shape, drawn black where the section stays.
   The last section's shape shows the footer. */
.site-section--divider,
.site-section--divider + .site-section,
main:has(> .site-section--divider:last-of-type) + .site-footer {
    --site-divider-standard-height: clamp(2.5rem, 6vw, 5.5rem);
}

.site-section--divider {
    --site-divider-height: var(--site-divider-standard-height);
    --site-divider-tile-width: 100%;
    --site-divider-repeat: no-repeat;
    z-index: max(1, calc(90 - var(--site-section-order, 0)));
    margin-bottom: calc(-1 * var(--site-divider-height));
    padding-bottom: calc(var(--site-section-padding) + var(--site-divider-height));
    -webkit-mask-image: linear-gradient(#000000 0 0), var(--site-divider-shape);
    mask-image: linear-gradient(#000000 0 0), var(--site-divider-shape);
    -webkit-mask-size: 100% calc(100% - var(--site-divider-height) + 1px), var(--site-divider-tile-width) var(--site-divider-height);
    mask-size: 100% calc(100% - var(--site-divider-height) + 1px), var(--site-divider-tile-width) var(--site-divider-height);
    -webkit-mask-position: top left, bottom left;
    mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, var(--site-divider-repeat);
    mask-repeat: no-repeat, var(--site-divider-repeat);
}

.site-section--divider + .site-section,
main:has(> .site-section--divider:last-of-type) + .site-footer {
    --site-divider-above: var(--site-divider-standard-height);
}

.site-section--divider-zigzag + .site-section,
main:has(> .site-section--divider-zigzag:last-of-type) + .site-footer {
    --site-divider-above: 1.25rem;
}

.site-section--divider + .site-section {
    padding-top: calc(var(--site-section-padding) + var(--site-divider-above));
}

main:has(> .site-section--divider:last-of-type) + .site-footer {
    padding-top: calc(3rem + var(--site-divider-above));
    border-top-color: transparent;
}

.site-section--divider-wave {
    --site-divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V58C1090 98 970 102 850 78S630 16 490 28S210 96 0 50Z'/%3E%3C/svg%3E");
}

.site-section--divider-curve {
    --site-divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200Q600 200 0 0Z'/%3E%3C/svg%3E");
}

.site-section--divider-slant-left {
    --site-divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200L0 100Z'/%3E%3C/svg%3E");
}

.site-section--divider-slant-right {
    --site-divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V100Z'/%3E%3C/svg%3E");
}

.site-section--divider-zigzag {
    --site-divider-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40L20 20Z'/%3E%3C/svg%3E");
    --site-divider-height: 1.25rem;
    --site-divider-tile-width: 2.5rem;
    --site-divider-repeat: repeat-x;
}

/* Height and content position. The section becomes a column so its
   container can sit at the top, middle or bottom. Full screen leaves room for
   the pinned menu (--site-nav-height is measured by site.js). */
.site-section--height-tall,
.site-section--height-full-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-section--height-tall {
    min-height: 70vh;
    min-height: 70svh;
}

.site-section--height-full-screen {
    min-height: calc(100vh - var(--site-nav-height, 4.25rem));
    min-height: calc(100svh - var(--site-nav-height, 4.25rem));
}

.site-section--position-top {
    justify-content: flex-start;
}

.site-section--position-bottom {
    justify-content: flex-end;
}

.site-section--height-tall .site-hero--image_background {
    min-height: 70vh;
    min-height: 70svh;
}

.site-section--height-full-screen .site-hero--image_background {
    min-height: calc(100vh - var(--site-nav-height, 4.25rem));
    min-height: calc(100svh - var(--site-nav-height, 4.25rem));
}

.site-section--position-top .site-hero--image_background {
    align-items: flex-start;
}

.site-section--position-bottom .site-hero--image_background {
    align-items: flex-end;
}

/* Card styles. Standard is the base .site-card. The fills and borders are
   drawn from currentColor where they can be, so one rule reads on a light
   section and on a dark or brand one. These come after the variant card rule
   so they win at the same specificity. The shadows are Website.shadow_depth
   tokens; outline and borderless cards never carry one. */
.site-section--cards-raised .site-card {
    border-color: transparent;
    box-shadow: var(--site-shadow-raised);
}

.site-section--cards-outline .site-card {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    box-shadow: none;
}

.site-section--cards-borderless .site-card {
    background: color-mix(in srgb, currentColor 6%, transparent);
    border-color: transparent;
    box-shadow: none;
}

/* Frosted glass: a see-through fill that blurs whatever is behind the card.
   It needs a picture, pattern or overlay behind it to read as glass. On a
   section with light text the fill drops to a faint frost so the text keeps
   its contrast. */
.site-section--cards-glass {
    --site-glass-fill: 55%;
    --site-glass-edge: 65%;
}

.site-section--cards-glass.site-section--ink-light {
    --site-glass-fill: 14%;
    --site-glass-edge: 28%;
}

.site-section--cards-glass .site-card {
    background: color-mix(in srgb, var(--site-surface) var(--site-glass-fill), transparent);
    border-color: color-mix(in srgb, var(--site-surface) var(--site-glass-edge), transparent);
    box-shadow:
        0 10px 34px color-mix(in srgb, #000000 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}

/* Image frames, on the section types that show pictures (hero, image with
   text, gallery, people). A hero with the picture behind the text is left
   alone: its picture is the background. Placeholders take the same shape so
   the editor shows the finished layout. */
.site-section--image-shape-square :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    border-radius: 0;
}

.site-section--image-shape-rounded :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    border-radius: max(1.5rem, calc(var(--site-radius) * 2.5));
}

/* A huge top radius is scaled down to fit, which rounds the top into a
   half circle and leaves the bottom corners square. */
.site-section--image-shape-arch :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    border-radius: 100vw 100vw 0 0;
}

.site-section--image-aspect-ratio-landscape :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    aspect-ratio: 4 / 3;
}

.site-section--image-aspect-ratio-wide :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    aspect-ratio: 16 / 9;
}

.site-section--image-aspect-ratio-square :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    aspect-ratio: 1 / 1;
}

.site-section--image-aspect-ratio-portrait :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    aspect-ratio: 4 / 5;
}

.site-section--image-shape-circle :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.site-section:is(.site-section--image-shape-circle, [class*="site-section--image-aspect-ratio-"]) :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* A full-card circle portrait would be huge; it sits at a headshot size. */
.site-section--image-shape-circle .site-person__portrait {
    max-width: 10rem;
}

.site-section--image-frame-shadow :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    box-shadow: var(--site-shadow-raised);
}

.site-section--image-frame-offset {
    --site-image-offset-color: color-mix(in srgb, var(--site-primary) 26%, transparent);
}

.site-section--image-frame-offset.site-section--ink-light {
    --site-image-offset-color: color-mix(in srgb, currentColor 22%, transparent);
}

.site-section--image-frame-offset :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) :is(img, .site-placeholder-image) {
    box-shadow: 0.85rem 0.85rem 0 var(--site-image-offset-color);
}

/* The placeholder keeps its dashed edge, so only a real picture gets the
   print border. */
.site-section--image-frame-border :is(.site-hero:not(.site-hero--image_background) .site-hero__media, .site-image-with-text__media, .site-gallery__item, .site-person__portrait) img {
    border: 0.45rem solid var(--site-surface);
    box-shadow: var(--site-shadow-raised);
}

/* Fade in on scroll (Website.fade_in_on_scroll). site.js adds
   .site-body--fade-ready only once it has marked the sections already on
   screen, and never when the browser lacks IntersectionObserver or the
   visitor asks for less motion, so a page without the script hides nothing.
   The content fades, not the section, so backgrounds stay put. */
.site-body--fade-ready > main > .site-section > .site-container {
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-body--fade-ready > main > .site-section:not(.is-visible) > .site-container {
    opacity: 0;
    transform: translateY(1.5rem);
}

.site-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr);
}

.site-grid--2 {
    --columns: 2;
}

.site-grid--3 {
    --columns: 3;
}

.site-grid--4 {
    --columns: 4;
}

@media (min-width: 720px) {
    .site-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .site-grid {
        grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    }
}

.site-card {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow-resting, none);
    padding: 1.5rem;
    height: 100%;
}

a.site-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

a.site-card:hover {
    border-color: color-mix(in srgb, var(--site-primary) 45%, var(--site-border));
    box-shadow: var(--site-shadow-raised);
}

.site-card__title {
    margin-bottom: 0.4em;
}

.site-card__text {
    color: var(--site-text-muted);
    margin: 0;
}

.site-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: var(--site-radius);
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: 1.6rem;
}

/* ---- 3. Buttons ---------------------------------------------------------- */

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--site-button-radius, var(--site-radius));
    font-family: var(--site-font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.site-button--primary {
    background: var(--site-primary);
    color: var(--site-primary-ink);
    border-color: var(--site-primary);
}

.site-button--primary:hover {
    background: var(--site-primary-hover);
    border-color: var(--site-primary-hover);
    color: var(--site-primary-ink);
}

.site-button--secondary {
    background: transparent;
    color: var(--site-primary);
    border-color: color-mix(in srgb, var(--site-primary) 45%, var(--site-border));
}

.site-button--secondary:hover {
    background: var(--site-primary-soft);
    color: var(--site-primary-hover);
}

.site-button--link {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--site-primary);
    text-decoration: underline;
}

.site-button--link:hover {
    color: var(--site-primary-hover);
}

.site-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
}

/* ---- 4. Navigation ------------------------------------------------------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--site-surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--site-border);
}

.site-nav > .site-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    flex-wrap: wrap;
}

.site-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--site-font-heading);
    font-size: 1.15rem;
    font-weight: var(--site-heading-weight);
    color: var(--site-text);
    text-decoration: none;
    padding: 0.35rem 0;
}

/* The logo's height comes from Website.logo_size, with its own cap on phones.
   Once the page scrolls (.is-scrolled, set by site.js) it eases back to the
   standard height so a large badge does not keep a tall bar on screen; site.js
   gives the bar a bottom margin for the height it gives up, so the page does
   not jump. */
.site-nav__logo img {
    max-height: var(--site-logo-height-phone, 2.75rem);
    width: auto;
    transition: max-height 200ms ease;
}

@media (min-width: 720px) {
    .site-nav__logo img {
        max-height: var(--site-logo-height, 2.75rem);
    }
}

.site-nav.is-scrolled .site-nav__logo img {
    max-height: 2.75rem;
}

/* The light logo (Website.logo_on_dark) is only rendered with the see-through
   header, and only shows while that header sits over a first section with
   light text; see the swap under the see-through header rules. */
.site-nav__logo-image--on-dark {
    display: none;
}

/* The business name beside the logo, for a logo that does not include it
   (Client.show_name_below_logo). */
.site-nav__logo-name {
    line-height: 1.15;
}

.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    font-family: var(--site-font-body);
    font-size: 0.95rem;
    color: var(--site-text);
    cursor: pointer;
}

.site-nav__toggle .ph {
    font-size: 1.2rem;
}

.site-nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-bottom: 1rem;
}

.site-nav__links.is-open {
    display: flex;
}

.site-nav__link {
    display: block;
    padding: 0.6rem 0.25rem;
    color: var(--site-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--site-radius);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--site-primary);
}

.site-nav__dropdown {
    position: relative;
}

.site-nav__dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.6rem 0.25rem;
    background: transparent;
    border: 0;
    /* Buttons do not inherit the page font; inherit it so the dropdown
       trigger matches the size and line height of the plain nav links. */
    font: inherit;
    font-weight: 500;
    color: var(--site-text);
    cursor: pointer;
    text-align: left;
}

.site-nav__dropdown-toggle:hover,
.site-nav__dropdown-toggle[aria-expanded="true"] {
    color: var(--site-primary);
}

.site-nav__dropdown-toggle .ph {
    font-size: 0.9rem;
    transition: transform 140ms ease;
}

.site-nav__dropdown-toggle[aria-expanded="true"] .ph {
    transform: rotate(180deg);
}

.site-nav__dropdown-menu {
    display: none;
    flex-direction: column;
    padding: 0 0 0.5rem 0.9rem;
}

.site-nav__dropdown-menu.is-open {
    display: flex;
}

.site-nav__portal-link {
    padding: 0.6rem 0.25rem;
    color: var(--site-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.site-nav__portal-link:hover {
    color: var(--site-primary);
}

.site-nav__call-to-action {
    margin-top: 0.5rem;
    align-self: flex-start;
}

@media (min-width: 900px) {
    .site-nav__toggle {
        display: none;
    }

    .site-nav__links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.35rem 1.35rem;
        width: auto;
        padding-bottom: 0;
    }

    .site-nav__link,
    .site-nav__dropdown-toggle,
    .site-nav__portal-link {
        padding: 0.4rem 0;
        width: auto;
    }

    .site-nav__dropdown-menu {
        position: absolute;
        top: 100%;
        left: -0.9rem;
        min-width: 13rem;
        padding: 0.5rem;
        background: var(--site-surface);
        border: 1px solid var(--site-border);
        border-radius: var(--site-radius);
        box-shadow: 0 14px 34px color-mix(in srgb, var(--site-text) 14%, transparent);
        z-index: 20;
    }

    .site-nav__dropdown-menu .site-nav__link {
        padding: 0.5rem 0.65rem;
    }

    .site-nav__dropdown-menu .site-nav__link:hover {
        background: var(--site-primary-soft);
    }

    .site-nav__call-to-action {
        margin-top: 0;
        align-self: auto;
    }
}

/* See-through header (Website.header_transparent_over_first_section). The
   page pulls up under the pinned menu by the menu's height (measured by
   site.js), and the first section adds that height to its top padding so its
   content still starts below the menu. Until the visitor scrolls, or while
   the phone menu is open, the menu has no background of its own; after that
   it is the usual frosted bar. When the first section has light text (an
   overlay, a dark or brand variant, or the hero with the picture behind the
   text) the menu takes light text too, and on a brand color backdrop the
   call to action button inverts so it does not vanish. */
.site-body--transparent-header > main {
    margin-top: calc(-1 * var(--site-nav-height, 4.25rem));
}

.site-body--transparent-header > main > .site-section:first-of-type {
    padding-top: calc(var(--site-section-padding) + var(--site-nav-height, 4.25rem));
}

.site-body--transparent-header > main > .site-section--announcement_banner:first-of-type {
    padding-top: calc(1rem + var(--site-nav-height, 4.25rem));
}

.site-body--transparent-header > main > .site-section:first-of-type:has(.site-hero--image_background) {
    padding-top: 0;
}

.site-body--transparent-header > main > .site-section:first-of-type .site-hero--image_background {
    padding-top: calc(clamp(4rem, 10vw, 7rem) + var(--site-nav-height, 4.25rem));
}

.site-body--transparent-header > main > .site-section--height-full-screen:first-of-type,
.site-body--transparent-header > main > .site-section--height-full-screen:first-of-type .site-hero--image_background {
    min-height: 100vh;
    min-height: 100svh;
}

.site-body--transparent-header .site-nav {
    transition: background-color 200ms ease, border-color 200ms ease;
}

.site-body--transparent-header .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--ink-light) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) :is(.site-nav__logo, .site-nav__links > .site-nav__link, .site-nav__dropdown-toggle, .site-nav__portal-link, .site-nav__toggle) {
    color: var(--site-surface);
    text-shadow: 0 1px 14px color-mix(in srgb, #000000 35%, transparent);
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--ink-light) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) :is(.site-nav__links > .site-nav__link, .site-nav__dropdown-toggle, .site-nav__portal-link):is(:hover, [aria-current="page"]) {
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--ink-light) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) .site-nav__toggle {
    border-color: color-mix(in srgb, var(--site-surface) 45%, transparent);
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--ink-light) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) .site-nav__logo:has(.site-nav__logo-image--on-dark) .site-nav__logo-image--standard {
    display: none;
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--ink-light) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) .site-nav__logo-image--on-dark {
    display: block;
}

.site-body--transparent-header:has(> main > .site-section:first-of-type.site-section--backdrop-brand) .site-nav:not(.is-scrolled):not(:has(.site-nav__links.is-open)) .site-nav__call-to-action {
    background: var(--site-primary-ink);
    color: var(--site-primary);
    border-color: var(--site-primary-ink);
}

/* The extended header layout's bar above the menu, in the brand color. It is
   a sibling before .site-nav rather than a child, so it scrolls away while the
   menu stays pinned. Phone widths keep the phone number (tap to call) and the
   portal link, shrink the email to its icon, drop the hours and social links,
   and give the bar text its own line on top. */
.site-header-bar {
    background: var(--site-primary);
    color: var(--site-primary-ink);
    font-size: 0.875rem;
    line-height: 1.4;
}

.site-header-bar > .site-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.25rem;
    min-height: 2.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.site-header-bar a,
.site-header-bar a:hover {
    color: inherit;
    text-decoration: none;
}

.site-header-bar a:hover span {
    text-decoration: underline;
}

.site-header-bar :focus-visible {
    outline-color: var(--site-primary-ink);
}

.site-header-bar__contact,
.site-header-bar__end {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header-bar__end {
    margin-left: auto;
}

.site-header-bar__item,
.site-header-bar__portal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.site-header-bar__portal-link {
    font-weight: 600;
}

.site-header-bar .ph {
    font-size: 1.05rem;
}

.site-header-bar__text {
    order: -1;
    flex-basis: 100%;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

.site-header-bar__item-text,
.site-header-bar__item--hours,
.site-header-bar__social {
    display: none;
}

.site-header-bar__social {
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .site-header-bar__item-text {
        display: inline;
    }

    .site-header-bar__social {
        display: flex;
    }
}

@media (min-width: 900px) {
    .site-header-bar__item--hours {
        display: inline-flex;
    }

    .site-header-bar__text {
        order: 0;
        flex-basis: auto;
        text-align: left;
    }
}

/* ---- 5. Footer ----------------------------------------------------------- */

.site-footer {
    background: var(--site-surface-alt);
    border-top: 1px solid var(--site-border);
    padding-top: 3rem;
    padding-bottom: 2rem;
    font-size: 0.97rem;
}

.site-footer__columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
    .site-footer__columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.site-footer__brand-name {
    display: block;
    font-family: var(--site-font-heading);
    font-size: 1.1rem;
    font-weight: var(--site-heading-weight);
    margin-bottom: 0.5rem;
}

.site-footer__brand img {
    max-height: var(--site-footer-logo-height, 3rem);
    width: auto;
    margin-bottom: 0.85rem;
}

.site-footer__tagline {
    color: var(--site-text-muted);
    margin: 0 0 1rem;
}

.site-footer__heading {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-text-muted);
    margin-bottom: 0.9rem;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.site-footer__links a {
    color: var(--site-text);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--site-primary);
    text-decoration: underline;
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--site-text-muted);
}

.site-footer__contact-item .ph {
    color: var(--site-primary);
    font-size: 1.1rem;
    line-height: 1.5;
}

.site-footer__contact-item a {
    color: var(--site-text);
    text-decoration: none;
}

.site-footer__contact-item a:hover {
    color: var(--site-primary);
    text-decoration: underline;
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    color: var(--site-text);
    font-size: 1.2rem;
    text-decoration: none;
}

.site-footer__social a:hover {
    border-color: var(--site-primary);
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

/* Copyright on the left, the editable footer text on the right. Stacked and
   left-aligned on narrow screens, where a right-aligned block under a
   left-aligned line reads as a mistake. */
.site-footer__legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--site-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem 2rem;
    color: var(--site-text-muted);
    font-size: 0.9rem;
}

.site-footer__legal p {
    margin: 0 0 0.4em;
}

.site-footer__legal p:last-child {
    margin-bottom: 0;
}

.site-footer__legal-start {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.25rem;
}

.site-footer__legal-links {
    display: flex;
    gap: 1rem;
}

.site-footer__legal-links a {
    color: var(--site-text-muted);
    text-decoration: none;
}

.site-footer__legal-links a:hover {
    color: var(--site-primary);
    text-decoration: underline;
}

.site-footer__text {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 720px) {
    .site-footer__legal {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }

    .site-footer__text {
        margin-left: auto;
        text-align: right;
    }
}

/* ---- 6. Rich text -------------------------------------------------------- */

.site-rich-text {
    max-width: 72ch;
}

.site-rich-text > *:first-child {
    margin-top: 0;
}

.site-rich-text > *:last-child {
    margin-bottom: 0;
}

.site-rich-text h2 {
    margin-top: 1.8em;
}

.site-rich-text h3,
.site-rich-text h4 {
    margin-top: 1.6em;
}

.site-rich-text ul,
.site-rich-text ol {
    margin: 0 0 1.1em;
    padding-left: 1.35em;
}

.site-rich-text li {
    margin-bottom: 0.4em;
}

.site-rich-text li::marker {
    color: var(--site-primary);
}

.site-rich-text blockquote {
    margin: 1.6em 0;
    padding: 1rem 1.4rem;
    background: var(--site-primary-soft);
    border-radius: var(--site-radius);
    font-size: 1.08em;
}

.site-rich-text blockquote p:last-child {
    margin-bottom: 0;
}

.site-rich-text img {
    border-radius: var(--site-radius);
    margin: 1.4em 0;
}

.site-rich-text hr {
    margin: 2.2em 0;
}

.site-rich-text table {
    width: 100%;
    margin: 1.6em 0;
    border-collapse: collapse;
    font-size: 0.97em;
}

.site-rich-text th,
.site-rich-text td {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--site-border);
    text-align: left;
    vertical-align: top;
}

.site-rich-text thead th {
    background: var(--site-surface-alt);
    font-family: var(--site-font-heading);
    font-weight: var(--site-heading-weight);
}

.site-rich-text a {
    color: var(--site-primary);
}

.site-rich-text--wide {
    max-width: none;
}

/* ---- 7. Placeholder image ------------------------------------------------ */

.site-placeholder-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 1.25rem;
    text-align: center;
    background: var(--site-primary-soft);
    border: 2px dashed color-mix(in srgb, var(--site-primary) 38%, var(--site-border));
    border-radius: var(--site-radius);
    /* The box keeps the page's pale tint on every variant, so its text is
       derived from the page colors directly rather than the section's muted
       token, which the brand and dark variants turn light. */
    color: color-mix(in srgb, var(--site-text) 68%, var(--site-surface));
}

/* Aspect ratio per easy-thumbnails alias, so the include needs no inline style.
   website_hero is 16:9, the card, gallery, and thumb aliases are 4:3, and the
   logo alias is 5:2 (master/settings.py THUMBNAIL_ALIASES). */

.site-placeholder-image {
    aspect-ratio: 4 / 3;
}

.site-placeholder-image--website_hero {
    aspect-ratio: 16 / 9;
}

.site-placeholder-image--website_card,
.site-placeholder-image--website_gallery,
.site-placeholder-image--website_thumb {
    aspect-ratio: 4 / 3;
}

.site-placeholder-image--website_logo {
    aspect-ratio: 5 / 2;
}

.site-placeholder-image__label {
    font-family: var(--site-font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--site-primary) 72%, var(--site-text));
}

.site-placeholder-image__description {
    font-size: 0.92rem;
    max-width: 34ch;
    line-height: 1.45;
}

/* ---- 8. Section types ---------------------------------------------------- */

/* Hero */

.site-hero {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.site-hero__heading {
    margin-bottom: 0.35em;
}

.site-hero__subheading {
    max-width: 58ch;
    margin: 0;
    font-size: 1.15em;
    color: var(--site-text-muted);
}

.site-hero__media img,
.site-hero__media .site-placeholder-image {
    border-radius: var(--site-radius);
}

@media (min-width: 900px) {
    .site-hero--image_right,
    .site-hero--image_left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }

    .site-hero--image_left .site-hero__body {
        order: 2;
    }

    .site-hero--image_left .site-hero__media {
        order: 1;
    }
}

.site-hero--centered {
    text-align: center;
    justify-items: center;
}

.site-hero--centered .site-hero__subheading {
    margin-left: auto;
    margin-right: auto;
}

.site-hero--centered .site-buttons {
    justify-content: center;
}

/* The image_background layout cannot add a class to the outer <section> (the
   shell markup is fixed), and inline styles are not allowed, so the image is a
   real <img> pinned behind the copy instead of a CSS background.

   It runs edge to edge: :has() drops the section's padding and the
   container's max width, and the side padding keeps the copy lined up with
   the container every other section uses. */

.site-section--hero:has(.site-hero--image_background) {
    padding-top: 0;
    padding-bottom: 0;
}

.site-section--hero:has(.site-hero--image_background) .site-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.site-hero--image_background {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(28rem, 72vh, 44rem);
    padding: clamp(4rem, 10vw, 7rem) max(1.25rem, calc((100% - var(--site-max-width)) / 2 + 1.25rem));
    overflow: hidden;
    background: var(--site-text);
    color: var(--site-surface);
}

.site-hero--image_background .site-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.site-hero--image_background .site-hero__media img,
.site-hero--image_background .site-hero__media .site-placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 0;
}

.site-hero--image_background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--site-text) 80%, transparent),
        color-mix(in srgb, var(--site-text) 45%, transparent));
}

.site-hero--image_background .site-hero__body {
    position: relative;
    max-width: 44rem;
}

.site-hero--image_background .site-hero__heading,
.site-hero--image_background .site-hero__subheading {
    color: inherit;
}

.site-hero--image_background .site-hero__subheading {
    color: color-mix(in srgb, currentColor 84%, transparent);
}

/* The default secondary button is primary-colored ink, which disappears on
   the dark overlay; take the light ink the way the brand and dark variants do. */
.site-hero--image_background .site-button--secondary {
    color: inherit;
    border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.site-hero--image_background .site-button--secondary:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
}

/* Feature grid */

.site-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.site-feature__link:hover {
    text-decoration: underline;
}

/* Image with text */

.site-image-with-text {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.site-image-with-text__media img,
.site-image-with-text__media .site-placeholder-image {
    border-radius: var(--site-radius);
}

@media (min-width: 900px) {
    .site-image-with-text {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem;
    }

    .site-image-with-text--image-right .site-image-with-text__media {
        order: 2;
    }

    .site-image-with-text--image-right .site-image-with-text__body {
        order: 1;
    }
}

/* Steps */

.site-steps {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr);
    counter-reset: site-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .site-steps {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

.site-step {
    position: relative;
    padding-top: 3.5rem;
}

.site-step::before {
    counter-increment: site-step;
    content: counter(site-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--site-primary);
    color: var(--site-primary-ink);
    font-family: var(--site-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
}

.site-step__title {
    margin-bottom: 0.35em;
}

.site-step__text {
    margin: 0;
    color: var(--site-text-muted);
}

/* Testimonials */

.site-testimonials {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.site-testimonial {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-testimonial__mark {
    color: var(--site-primary);
    font-size: 1.75rem;
    line-height: 1;
}

.site-testimonial__quote {
    margin: 0;
    font-size: 1.08em;
}

.site-testimonial__attribution {
    margin: 0;
    font-style: normal;
    color: var(--site-text-muted);
    font-size: 0.95em;
}

.site-testimonial__author-name {
    display: block;
    font-family: var(--site-font-heading);
    font-weight: 600;
    color: var(--site-text);
}

/* FAQ */

.site-faq {
    max-width: 52rem;
}

.site-faq__item {
    border-bottom: 1px solid var(--site-border);
}

.site-faq__item[open] .site-faq__question .ph {
    transform: rotate(180deg);
}

.site-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    cursor: pointer;
    font-family: var(--site-font-heading);
    font-size: 1.08rem;
    font-weight: 600;
    list-style: none;
}

.site-faq__question::-webkit-details-marker {
    display: none;
}

.site-faq__question .ph {
    flex: 0 0 auto;
    color: var(--site-primary);
    transition: transform 140ms ease;
}

.site-faq__answer {
    padding: 0 0 1.35rem;
}

/* Call to action band */

.site-call-to-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.site-call-to-action__heading {
    margin-bottom: 0;
}

.site-call-to-action__text {
    max-width: 58ch;
    margin: 0;
    font-size: 1.05em;
    color: var(--site-text-muted);
}

.site-call-to-action .site-buttons {
    margin-top: 0.5rem;
    justify-content: center;
}

/* Gallery */

/* Each picture is a <figure>, whose browser margin inset every picture. */
.site-gallery__item {
    margin: 0;
}

.site-gallery__item img,
.site-gallery__item .site-placeholder-image {
    border-radius: var(--site-radius);
    width: 100%;
}

/* Stats */

.site-stats {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    text-align: center;
}

.site-stat__value {
    display: block;
    font-family: var(--site-font-heading);
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--site-primary);
}

.site-section--variant-brand .site-stat__value,
.site-section--variant-dark .site-stat__value,
.site-section--overlay-brand .site-stat__value,
.site-section--overlay-dark .site-stat__value,
.site-section--gradient-backdrop-brand .site-stat__value,
.site-section--gradient-backdrop-dark .site-stat__value {
    color: inherit;
}

.site-stat__label {
    display: block;
    margin-top: 0.35rem;
    color: var(--site-text-muted);
    font-size: 0.97em;
}

/* Contact details */

.site-contact-details {
    display: grid;
    gap: 1.25rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.site-contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.site-contact-detail .ph {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--site-primary);
    font-size: 1.35rem;
}

.site-section--variant-brand .site-contact-detail .ph,
.site-section--variant-dark .site-contact-detail .ph,
.site-section--overlay-brand .site-contact-detail .ph,
.site-section--overlay-dark .site-contact-detail .ph,
.site-section--gradient-backdrop-brand .site-contact-detail .ph,
.site-section--gradient-backdrop-dark .site-contact-detail .ph {
    color: inherit;
}

.site-contact-detail__label {
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-text-muted);
}

.site-contact-detail__value {
    display: block;
    font-size: 1.05em;
}

.site-contact-detail__value a {
    text-decoration: none;
}

.site-contact-detail__value a:hover {
    text-decoration: underline;
}

.site-contact-details__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.site-contact-details__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    color: inherit;
    font-size: 1.3rem;
    text-decoration: none;
}

.site-contact-details__social a:hover {
    border-color: var(--site-primary);
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

/* Announcement banner */

.site-section--announcement_banner {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: var(--site-primary-soft);
    border-bottom: 1px solid var(--site-border);
}

.site-announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
    font-size: 1rem;
}

.site-announcement .ph {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--site-primary);
}

.site-announcement__text {
    margin: 0;
}

.site-announcement a {
    color: inherit;
    font-weight: 600;
}

.site-announcement__window-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.88em;
    color: var(--site-text-muted);
}

.site-announcement--warning {
    color: #5c3d05;
}

.site-section--announcement_banner:has(.site-announcement--warning) {
    background: #fbf1dd;
    border-bottom-color: #e6cf9f;
}

.site-announcement--warning .ph {
    color: #a3700d;
}

/* People grid */

.site-person__portrait {
    margin-bottom: 1rem;
}

.site-person__portrait img,
.site-person__portrait .site-placeholder-image {
    width: 100%;
    border-radius: var(--site-radius);
}

.site-person__name {
    margin-bottom: 0.15em;
}

.site-person__role {
    display: block;
    margin-bottom: 0.7em;
    color: var(--site-primary);
    font-size: 0.95em;
    font-weight: 600;
}

.site-person__text {
    margin: 0;
    color: var(--site-text-muted);
}

/* Logo strip */

.site-logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}

.site-logo-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 10rem;
}

.site-logo-strip__item img {
    max-height: 3.5rem;
    width: auto;
    object-fit: contain;
}

.site-logo-strip__item .site-placeholder-image {
    width: 100%;
}

.site-logo-strip__name {
    font-size: 0.95em;
    color: var(--site-text-muted);
    text-align: center;
}

/* Custom code. The team's own markup and CSS own the look inside; the wrapper
   only clears floats. The notice is shown to signed-in team members when
   scripts were taken out of their copy. */
.site-custom-code {
    display: flow-root;
}

.site-custom-code__notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    color: var(--site-text-muted);
    font-size: 0.9rem;
}

/* ---- 8b. Wired sections and the draft notice ------------------------------ */

/* The staff-only strip page.html shows above an unpublished website or page. */
.site-draft-notice {
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
    color: var(--site-text-muted);
    background: var(--site-surface-alt);
    border-bottom: 1px solid var(--site-border);
}

/* Configuration warnings the wired sections show in edit mode only. */
.site-wired-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface-alt);
    color: var(--site-text);
}

.site-wired-notice .ph {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Plan cards, shared by plans_grid and the service_area_check results. */
.site-plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

.site-plan-card__name {
    margin: 0;
    font-family: var(--site-font-heading);
    font-weight: var(--site-heading-weight);
    font-size: 1.25rem;
}

.site-plan-card__price {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--site-primary);
}

.site-plan-card__description {
    margin: 0;
    flex: 1 1 auto;
    color: var(--site-text-muted);
    white-space: pre-line;
}

.site-plan-card .site-button {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* service_area_check */
.site-service-area-check {
    max-width: 720px;
    margin: 0;
}

.site-service-area-check__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.site-service-area-check__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-service-area-check__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    font: inherit;
    font-family: var(--site-font-body);
    color: var(--site-text);
    background: var(--site-surface);
}

.site-service-area-check__input:focus {
    outline: 2px solid var(--site-primary);
    outline-offset: 1px;
}

.site-service-area-check__input:disabled,
.site-service-area-check__row .site-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.site-service-area-check__status {
    margin: 0.75rem 0 0;
    color: var(--site-text-muted);
}

.site-service-area-check__status:empty {
    display: none;
}

.site-service-area-check__result {
    margin-top: 1.5rem;
}

.site-service-area-check__result[hidden] {
    display: none;
}

.site-service-area-check__message {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.site-service-area-check__message--in-area {
    color: var(--site-primary);
}

.site-service-area-check__plans {
    margin-bottom: 1.25rem;
}

/* map_widget */
.site-map-widget {
    width: 100%;
    border-radius: var(--site-radius);
    overflow: hidden;
    background: var(--site-surface-alt);
}

.site-map-widget iframe {
    display: block;
}

/* custom_form */
.site-custom-form {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.site-custom-form iframe {
    display: block;
}

/* impact_statistics */
.site-impact-statistic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.site-impact-statistic__image {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.site-impact-statistic__text {
    margin: 0;
}

.site-impact-statistic__text > :first-child {
    margin-top: 0;
}

.site-impact-statistic__text > :last-child {
    margin-bottom: 0;
}

/* ---- 9. Reduced motion and print ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body.site-body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .site-header-bar,
    .site-nav,
    .site-nav__toggle,
    .site-skip-link,
    .site-footer__social,
    .site-section--announcement_banner {
        display: none !important;
    }

    .site-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        background: #ffffff !important;
        color: #000000 !important;
        break-inside: avoid;
    }

    .site-section--overlay::before {
        display: none;
    }

    .site-body--fade-ready > main > .site-section > .site-container {
        opacity: 1 !important;
        transform: none !important;
    }

    .site-card,
    .site-placeholder-image {
        border: 1px solid #999999;
        box-shadow: none;
        break-inside: avoid;
    }

    .site-button {
        border: 1px solid #000000;
        background: transparent !important;
        color: #000000 !important;
    }

    .site-faq__item {
        break-inside: avoid;
    }

    .site-faq__answer {
        display: block !important;
    }

    a {
        color: #000000;
    }
}