/*
 * core.css — structure and pattern styles for the golden exemplar.
 * Contract (doc/design-system-contract.md §10.9): consumes var(--pf-*) only —
 * no raw color literals, no url(), no @import, no @font-face.
 * One block per section pattern, in catalog order (§8).
 */

/* ---------- Base ---------- */

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

html {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--pf-color-bg);
    color: var(--pf-color-text);
    font-family: var(--pf-font-body);
    font-size: var(--pf-text-md);
    line-height: var(--pf-leading-body);
}

h1,
h2,
h3,
h4 {
    font-family: var(--pf-font-heading);
    line-height: var(--pf-leading-heading);
    font-weight: 600;
    margin: 0 0 var(--pf-space-sm);
    text-wrap: balance;
}

h1 {
    font-size: var(--pf-text-3xl);
}

h2 {
    font-size: var(--pf-text-2xl);
}

h3 {
    font-size: var(--pf-text-lg);
}

h4 {
    font-size: var(--pf-text-md);
}

p,
ul,
ol,
dl,
blockquote,
figure,
table {
    margin: 0 0 var(--pf-space-md);
}

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

a {
    color: var(--pf-color-primary);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
}

a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--pf-color-accent);
    outline-offset: 2px;
    border-radius: var(--pf-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none;
        animation: none;
    }
}

/* ---------- Primitives ---------- */

.pf-container {
    max-width: var(--pf-content-width);
    margin-inline: auto;
    padding-inline: var(--pf-space-lg);
}

.pf-band {
    padding-block: var(--pf-space-2xl);
}

.pf-band--alt {
    background: var(--pf-color-bg-alt);
}

.pf-band--primary {
    background: var(--pf-color-primary);
    color: var(--pf-color-primary-contrast);
}

.pf-eyebrow {
    font-size: var(--pf-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-color-accent);
    margin: 0 0 var(--pf-space-xs);
}

.pf-lede {
    font-size: var(--pf-text-lg);
    color: var(--pf-color-text-muted);
    max-width: var(--pf-measure);
}

.pf-section-head {
    max-width: var(--pf-measure);
    margin-bottom: var(--pf-space-xl);
}

.pf-btn {
    display: inline-block;
    background: var(--pf-color-primary);
    color: var(--pf-color-primary-contrast);
    font-weight: 600;
    text-decoration: none;
    padding: 0.8em 1.5em;
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow-sm);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.pf-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--pf-shadow-md);
}

.pf-btn:focus-visible {
    outline: 3px solid var(--pf-color-accent);
    outline-offset: 2px;
}

.pf-btn--reverse {
    background: var(--pf-color-primary-contrast);
    color: var(--pf-color-primary);
}

.pf-btn--reverse:focus-visible {
    outline-color: var(--pf-color-primary-contrast);
}

/*
 * Signature: the leaf corner. Feature imagery is rounded on three corners
 * with a sharp bottom-left "stem" — the one place the design spends its risk.
 */
.pf-leaf {
    border-radius: var(--pf-radius-lg) var(--pf-radius-lg) var(--pf-radius-lg) 0;
    box-shadow: var(--pf-shadow-md);
}

.pf-skip-link {
    position: absolute;
    left: var(--pf-space-sm);
    top: var(--pf-space-sm);
    z-index: 10;
    background: var(--pf-color-surface);
    color: var(--pf-color-primary);
    padding: var(--pf-space-xs) var(--pf-space-sm);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow-md);
    transform: translateY(-300%);
}

.pf-skip-link:focus-visible {
    transform: translateY(0);
}

/* ---------- site_header ---------- */

.pf-site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--pf-color-bg);
    border-bottom: var(--pf-border-w) solid var(--pf-color-border);
}

.pf-site-header .pf-container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pf-space-sm);
    padding-block: var(--pf-space-sm);
}

.pf-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--pf-space-2xs);
    font-family: var(--pf-font-heading);
    font-size: var(--pf-text-lg);
    font-weight: 600;
    color: var(--pf-color-text);
    text-decoration: none;
}

/* Injected at publish time alongside the brand text; not part of the
   generated-page contract. Height-bound with a width cap so wide wordmarks
   cannot crowd the nav. */
.pf-brand-logo {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 10rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.pf-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-nav a {
    color: var(--pf-color-text);
    text-decoration: none;
    padding-block: var(--pf-space-2xs);
}

.pf-nav a:hover {
    color: var(--pf-color-primary);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.pf-nav a[aria-current="page"] {
    color: var(--pf-color-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--pf-color-accent);
}

/* ---------- hero_split ---------- */

.pf-hero-split .pf-container {
    display: grid;
    gap: var(--pf-space-xl);
    align-items: center;
}

@media (min-width: 55rem) {
    .pf-hero-split .pf-container {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

.pf-hero-split h1 {
    margin-bottom: var(--pf-space-md);
}

.pf-hero-split .pf-lede {
    margin-bottom: var(--pf-space-lg);
}

/* ---------- page_header ---------- */

.pf-page-header {
    padding-block: var(--pf-space-xl) var(--pf-space-2xl);
}

.pf-page-header h1 {
    max-width: 24ch;
}

/* ---------- value_props ---------- */

.pf-value-props {
    display: grid;
    gap: var(--pf-space-lg);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    list-style: none;
    padding: 0;
}

.pf-value-props li {
    border-top: 2px solid var(--pf-color-accent);
    padding-top: var(--pf-space-md);
}

.pf-value-props p {
    color: var(--pf-color-text-muted);
    margin: 0;
}

/* ---------- services_cards ----------
   Six tracks so a card can take a half (span 3) or a third (span 2) of the
   row. The auto layout follows the number of cards: one card sits framed,
   two share the row, four pair up, five run three then two. A picked
   column count (--one/--two/--three/--list) switches the count rules off;
   keep the :not() lists below in step when an option is added. */

.pf-card-grid {
    display: grid;
    gap: var(--pf-space-lg);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.pf-card-grid > * {
    grid-column: span 6;
}

@media (min-width: 40rem) {
    .pf-card-grid > * {
        grid-column: span 3;
    }
}

@media (min-width: 60rem) {
    .pf-card-grid > * {
        grid-column: span 2;
    }

    /* Auto only: 3n+2 cards (2, 5, 8) end with a pair; 3n+1 cards above one
       (4, 7, 10) end with two pairs, so no card is left alone on a row. */
    .pf-card-grid:not(.pf-card-grid--one, .pf-card-grid--two, .pf-card-grid--three, .pf-card-grid--list):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2),
    .pf-card-grid:not(.pf-card-grid--one, .pf-card-grid--two, .pf-card-grid--three, .pf-card-grid--list):has(> :last-child:nth-child(3n + 1):not(:only-child)) > :nth-last-child(-n + 4) {
        grid-column: span 3;
    }
}

/* One card (auto) sits framed and centred rather than stretched. */
.pf-card-grid:not(.pf-card-grid--two, .pf-card-grid--three, .pf-card-grid--list):has(> :only-child) {
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
}

.pf-card-grid:not(.pf-card-grid--two, .pf-card-grid--three, .pf-card-grid--list):has(> :only-child) > * {
    grid-column: auto;
}

.pf-card {
    display: flex;
    flex-direction: column;
    background: var(--pf-color-surface);
    border-radius: var(--pf-radius-md);
    box-shadow: var(--pf-shadow-sm);
    overflow: hidden;
}

.pf-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.pf-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--pf-space-lg);
}

.pf-card-body p {
    color: var(--pf-color-text-muted);
    margin-bottom: var(--pf-space-md);
}

.pf-card-link {
    margin-top: auto;
    font-weight: 600;
    text-decoration: none;
}

.pf-card-link::after {
    content: " \2192";
}

.pf-card-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* ---------- feature_rows ---------- */

.pf-feature-row {
    display: grid;
    gap: var(--pf-space-xl);
    align-items: center;
}

.pf-feature-row + .pf-feature-row {
    margin-top: var(--pf-space-2xl);
}

@media (min-width: 50rem) {
    .pf-feature-row {
        grid-template-columns: 1fr 1fr;
    }

    .pf-feature-row--flip figure {
        order: 2;
    }
}

.pf-feature-row figure {
    margin: 0;
}

.pf-feature-row p {
    max-width: var(--pf-measure);
    color: var(--pf-color-text-muted);
}

.pf-feature-row h2,
.pf-feature-row h3 {
    max-width: 26ch;
}

/* ---------- gallery_grid ----------
   Six tracks so a figure can take a half (span 3) or a third (span 2) of
   the row. The auto layout fits the number of photos (contract §8): one
   photo is framed and centred, two sit side by side, four pair up, five
   run three then two. A picked layout (--one/--two/--three/--carousel)
   switches the count rules off; keep the :not() lists below in step when
   an option is added. */

.pf-gallery {
    display: grid;
    gap: var(--pf-space-md);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
}

.pf-gallery > * {
    grid-column: span 6;
}

@media (min-width: 35rem) {
    .pf-gallery > * {
        grid-column: span 3;
    }
}

@media (min-width: 55rem) {
    .pf-gallery > * {
        grid-column: span 2;
    }

    /* Auto only: 3n+2 photos (2, 5, 8) end with a pair; 3n+1 photos above
       one (4, 7, 10) end with two pairs, so no photo is left alone. */
    .pf-gallery:not(.pf-gallery--one, .pf-gallery--two, .pf-gallery--three, .pf-gallery--carousel, .pf-gallery--wide):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2),
    .pf-gallery:not(.pf-gallery--one, .pf-gallery--two, .pf-gallery--three, .pf-gallery--carousel, .pf-gallery--wide):has(> :last-child:nth-child(3n + 1):not(:only-child)) > :nth-last-child(-n + 4) {
        grid-column: span 3;
    }
}

/* One photo (auto) is framed and centred rather than stretched full width. */
.pf-gallery:not(.pf-gallery--two, .pf-gallery--three, .pf-gallery--carousel, .pf-gallery--wide):has(> :only-child) {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
}

.pf-gallery:not(.pf-gallery--two, .pf-gallery--three, .pf-gallery--carousel, .pf-gallery--wide):has(> :only-child) > * {
    grid-column: auto;
}

.pf-gallery figure {
    margin: 0;
}

.pf-gallery img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    border-radius: var(--pf-radius-md);
}

.pf-gallery figcaption {
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
    padding-top: var(--pf-space-2xs);
}

/* ---------- testimonial_band ---------- */

.pf-testimonials {
    display: grid;
    gap: var(--pf-space-xl);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.pf-quote {
    margin: 0;
}

.pf-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--pf-font-heading);
    font-size: var(--pf-text-3xl);
    line-height: 0.6;
    color: var(--pf-color-accent);
    margin-bottom: var(--pf-space-sm);
}

.pf-quote p {
    font-family: var(--pf-font-heading);
    font-size: var(--pf-text-lg);
    font-style: italic;
    max-width: var(--pf-measure);
}

.pf-quote cite {
    display: block;
    font-family: var(--pf-font-body);
    font-size: var(--pf-text-sm);
    font-style: normal;
    color: var(--pf-color-text-muted);
}

/* ---------- process_steps ---------- */

.pf-steps {
    display: grid;
    gap: var(--pf-space-lg);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    list-style: none;
    counter-reset: pf-step;
    padding: 0;
}

.pf-steps li {
    counter-increment: pf-step;
}

.pf-steps li::before {
    content: counter(pf-step, decimal-leading-zero);
    display: block;
    font-family: var(--pf-font-heading);
    font-size: var(--pf-text-xl);
    color: var(--pf-color-accent);
    margin-bottom: var(--pf-space-xs);
}

.pf-steps p {
    color: var(--pf-color-text-muted);
    margin: 0;
}

/* ---------- faq_accordion ---------- */

.pf-faq {
    max-width: var(--pf-measure);
}

.pf-faq-item {
    border-bottom: var(--pf-border-w) solid var(--pf-color-border);
}

.pf-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pf-space-md);
    cursor: pointer;
    font-weight: 700;
    padding-block: var(--pf-space-md);
    list-style: none;
}

.pf-faq-item summary::-webkit-details-marker {
    display: none;
}

.pf-faq-item summary::after {
    content: "+";
    font-family: var(--pf-font-heading);
    font-size: var(--pf-text-lg);
    line-height: 1;
    color: var(--pf-color-accent);
}

.pf-faq-item[open] summary::after {
    content: "\2013";
}

.pf-faq-item p {
    color: var(--pf-color-text-muted);
    padding-bottom: var(--pf-space-md);
    margin: 0;
}

/* ---------- cta_band ---------- */

.pf-cta-band h2 {
    max-width: 26ch;
}

.pf-cta-band p {
    max-width: var(--pf-measure);
    margin-bottom: var(--pf-space-lg);
}

/* ---------- contact_details ---------- */

.pf-contact-grid {
    display: grid;
    gap: var(--pf-space-xl);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-bottom: var(--pf-space-2xl);
}

.pf-contact-grid h2 {
    font-size: var(--pf-text-lg);
}

.pf-contact-grid address {
    font-style: normal;
}

.pf-contact-grid p,
.pf-contact-grid li {
    color: var(--pf-color-text-muted);
}

.pf-contact-grid ul {
    list-style: none;
    padding: 0;
}

.pf-contact-grid li {
    padding-block: var(--pf-space-2xs);
}

.pf-hours {
    border-collapse: collapse;
    width: 100%;
}

.pf-hours th,
.pf-hours td {
    text-align: left;
    font-weight: 400;
    color: var(--pf-color-text-muted);
    padding-block: var(--pf-space-2xs);
    border-bottom: var(--pf-border-w) solid var(--pf-color-border);
}

/* ---------- site_footer ---------- */

.pf-site-footer {
    background: var(--pf-color-bg-alt);
    border-top: var(--pf-border-w) solid var(--pf-color-border);
    padding-block: var(--pf-space-xl);
    margin-top: var(--pf-space-2xl);
}

.pf-site-footer .pf-container {
    display: grid;
    gap: var(--pf-space-lg);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pf-site-footer h2 {
    font-size: var(--pf-text-md);
    font-family: var(--pf-font-body);
    font-weight: 600;
}

.pf-site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-site-footer li {
    padding-block: var(--pf-space-2xs);
}

.pf-site-footer a {
    color: var(--pf-color-text);
}

.pf-site-footer address {
    font-style: normal;
    color: var(--pf-color-text-muted);
}

.pf-site-footer small {
    display: block;
    color: var(--pf-color-text-muted);
    margin-top: var(--pf-space-md);
}

/* ---------- site credit ----------
   The "Powered by Minnirva" line the publisher adds under the footer on
   every page. It sits outside the footer, so the footer's band tone never
   reaches it: always the page surface, muted text, one hairline above. */

.pf-site-credit {
    background: var(--pf-color-bg);
    border-top: var(--pf-border-w) solid var(--pf-color-border);
    padding-block: var(--pf-space-sm);
    text-align: center;
}

.pf-site-credit small {
    display: block;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-site-credit a {
    color: inherit;
}

.pf-site-credit a:hover,
.pf-site-credit a:focus-visible {
    color: var(--pf-color-text);
}

/* ---------- layout variants ----------
   Modifier classes generation may add beside a base class when the approved
   design direction's layout_preferences asks for them. Each variant keeps
   the pattern's canonical markup; only the geometry changes. */

/* hero_split--flip: media leads, text follows. */
@media (min-width: 55rem) {
    .pf-hero-split--flip .pf-container {
        grid-template-columns: 0.95fr 1.05fr;
    }

    .pf-hero-split--flip .pf-container > img,
    .pf-hero-split--flip .pf-container > figure {
        order: -1;
    }
}

/* hero_split--stacked: centered single column, image full width below. */
.pf-hero-split--stacked .pf-container {
    grid-template-columns: 1fr;
    max-width: 52rem;
    text-align: center;
}

/* services_cards columns: one framed card, or exactly two or three across. */
.pf-card-grid--one {
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
}

.pf-card-grid--one > * {
    grid-column: auto;
}

@media (min-width: 40rem) {
    .pf-card-grid--two > * {
        grid-column: span 3;
    }
}

@media (min-width: 60rem) {
    .pf-card-grid--three > * {
        grid-column: span 2;
    }
}

/* services_cards--list: horizontal rows, thumbnail beside the body. */
.pf-card-grid--list {
    grid-template-columns: 1fr;
    gap: var(--pf-space-md);
}

.pf-card-grid--list > * {
    grid-column: auto;
}

.pf-card-grid--list .pf-card {
    flex-direction: row;
    align-items: stretch;
}

.pf-card-grid--list .pf-card img {
    aspect-ratio: 1;
    width: clamp(7rem, 22vw, 11rem);
    flex-shrink: 0;
}

@media (max-width: 35rem) {
    .pf-card-grid--list .pf-card {
        flex-direction: column;
    }

    .pf-card-grid--list .pf-card img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

/* gallery_grid columns: one framed photo, or exactly two or three across. */
.pf-gallery--one {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
}

.pf-gallery--one > * {
    grid-column: auto;
}

@media (min-width: 35rem) {
    .pf-gallery--two > * {
        grid-column: span 3;
    }
}

@media (min-width: 55rem) {
    .pf-gallery--three > * {
        grid-column: span 2;
    }
}

/* gallery_grid--wide: retired alias of two across with landscape photos,
   kept one release for pages stored before the column picker. */
@media (min-width: 35rem) {
    .pf-gallery--wide > * {
        grid-column: span 3;
    }
}

.pf-gallery--wide img {
    aspect-ratio: 3 / 2;
}

/* gallery_grid--carousel: one horizontal strip. Swipe on a phone, scroll or
   shift and wheel on a desktop; the browser's own scrollbar is the only
   control (no script, contract §1). The strip bleeds into the container's
   padding so a peeking photo shows there is more, and it scrolls inside its
   own box: the page itself never scrolls sideways (contract §9). */
.pf-gallery--carousel {
    display: flex;
    gap: var(--pf-space-md);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pf-space-lg));
    padding-inline: var(--pf-space-lg);
    padding-block-end: var(--pf-space-sm);
    scroll-padding-inline: var(--pf-space-lg);
    scrollbar-width: thin;
    scrollbar-color: var(--pf-color-border) transparent;
}

.pf-gallery--carousel > * {
    flex: 0 0 min(82%, 26rem);
    scroll-snap-align: start;
}

.pf-gallery--carousel img {
    aspect-ratio: 3 / 2;
}

@media (prefers-reduced-motion: no-preference) {
    .pf-gallery--carousel {
        scroll-behavior: smooth;
    }
}

/* Photo shape. Square is the gallery default; landscape is the card default.
   The card list keeps its own square thumbnail. */
.pf-gallery--landscape img {
    aspect-ratio: 3 / 2;
}

.pf-gallery--portrait img {
    aspect-ratio: 4 / 5;
}

.pf-card-grid--square:not(.pf-card-grid--list) .pf-card img {
    aspect-ratio: 1;
}

.pf-card-grid--portrait:not(.pf-card-grid--list) .pf-card img {
    aspect-ratio: 4 / 5;
}

/* ---------- editor layout controls ----------
   Modifier classes the edit page toggles on a section or one of its parts.
   Same rule as the variants above: the markup inside keeps its canonical
   shape, only geometry, alignment, or band tone changes. Grouped by the
   control that sets them; every class is listed in the contract (§8). */

/* ---------- form_section (editor-added, contract §4.3) ---------- */

.pf-form-section .pf-section-head {
    margin-bottom: var(--pf-space-lg);
}

.pf-form-section .pf-form {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pf-form-section .pf-form-title {
    display: none;
}

/* The form follows the heading: centred head, centred form and button. */
.pf-form-section .pf-section-head--center + .pf-form {
    margin-inline: auto;
}

.pf-form-section .pf-section-head--center + .pf-form .pf-form-fields .pf-btn {
    justify-self: center;
}

/* Form width: Narrow / Medium (the default 40rem) / Wide. */
.pf-form-section--narrow .pf-form {
    max-width: 28rem;
}

.pf-form-section--wide .pf-form {
    max-width: 56rem;
}

/* Fields two per line; long text, checkboxes and the button keep the
   full width, and a narrow screen goes back to one per line. */
.pf-form-section--two .pf-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pf-space-lg);
}

.pf-form-section--two .pf-form-fields .pf-form-row:has(textarea),
.pf-form-section--two .pf-form-fields .pf-form-row--check,
.pf-form-section--two .pf-form-fields .pf-btn {
    grid-column: 1 / -1;
}

@media (max-width: 40rem) {
    .pf-form-section--two .pf-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- forms (publisher-expanded, contract §4.3) ---------- */

.pf-form {
    max-width: 40rem;
    margin-top: var(--pf-space-xl);
    padding-top: var(--pf-space-xl);
    border-top: var(--pf-border-w) solid var(--pf-color-border);
}

.pf-form-title {
    font-size: var(--pf-text-lg);
    margin-bottom: var(--pf-space-md);
}

.pf-form-fields {
    display: grid;
    gap: var(--pf-space-md);
}

.pf-form-row {
    display: grid;
    gap: var(--pf-space-2xs);
}

.pf-form-row label {
    font-weight: 600;
    font-size: var(--pf-text-sm);
}

.pf-form-row input,
.pf-form-row textarea {
    width: 100%;
    font: inherit;
    color: var(--pf-color-text);
    background: var(--pf-color-surface);
    border: var(--pf-border-w) solid var(--pf-color-border);
    border-radius: var(--pf-radius-sm);
    padding: 0.7em 0.9em;
}

.pf-form-row textarea {
    resize: vertical;
    min-height: 8em;
}

.pf-form-row select {
    width: 100%;
    font: inherit;
    color: var(--pf-color-text);
    background: var(--pf-color-surface);
    border: var(--pf-border-w) solid var(--pf-color-border);
    border-radius: var(--pf-radius-sm);
    padding: 0.7em 0.9em;
}

.pf-form-row select:focus-visible {
    outline: 3px solid var(--pf-color-accent);
    outline-offset: 2px;
}

.pf-form-row--check {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--pf-space-xs);
}

.pf-form-row--check input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    accent-color: var(--pf-color-primary);
}

.pf-form-row--check label {
    font-weight: 400;
    font-size: var(--pf-text-md);
}

/* "(optional)" takes the label's colour, lighter only in weight: the muted
   token is a dark tone for light bands and vanishes on the brand band. */
.pf-form-optional {
    font-weight: 400;
    color: inherit;
}

.pf-form-row input:focus-visible,
.pf-form-row textarea:focus-visible {
    outline: 3px solid var(--pf-color-accent);
    outline-offset: 2px;
}

.pf-form-fields .pf-btn {
    justify-self: start;
    border: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Only robots see the trap: off the page, out of the tab order. */
.pf-form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The notes stay hidden until the endpoint sends the visitor back to
   their fragment (#pf-sent, #pf-not-sent, #pf-too-many): no script, just
   :target. The fragment is on the landing div around each note, which is
   always in the layout, so the browser can scroll to it at first paint
   (a display:none target has no box and the scroll is skipped or lands
   under the sticky header). The margin lands the note a third of the way
   down the viewport, clear of the header and with the section heading
   still in view. */
.pf-form-landing {
    scroll-margin-top: max(30vh, 8rem);
}

.pf-form-note {
    display: none;
    margin-bottom: var(--pf-space-md);
    padding: var(--pf-space-sm) var(--pf-space-md);
    border-radius: var(--pf-radius-sm);
    border: var(--pf-border-w) solid var(--pf-color-border);
    background: var(--pf-color-surface);
    font-weight: 600;
}

.pf-form-landing:target .pf-form-note {
    display: block;
}

.pf-form-note--sent {
    border-color: var(--pf-color-primary);
}

.pf-form-note--error {
    border-color: var(--pf-color-accent);
}

.pf-band--primary .pf-form {
    border-top-color: var(--pf-color-primary-contrast);
}

.pf-band--primary .pf-form-row input,
.pf-band--primary .pf-form-row textarea,
.pf-band--primary .pf-form-row select,
.pf-band--primary .pf-form-note {
    color: var(--pf-color-text);
    background: var(--pf-color-surface);
}

.pf-band--primary .pf-form-row input:focus-visible,
.pf-band--primary .pf-form-row textarea:focus-visible,
.pf-band--primary .pf-form-row select:focus-visible {
    outline-color: var(--pf-color-primary-contrast);
}

/* Band tone: any section may sit on the brand color. Everything inside
   inherits the contrast color (contract §6 guarantees the pair), buttons
   reverse, and cards keep their own surface. */
/* The form notes keep their own surface and text (above), so they stay
   out of the inherit: with the element type in the list this rule would
   outweigh theirs and paint the note's text in the band's contrast colour
   on its own light box. */
.pf-band--primary :is(p, li, cite, td, th, address, small, figcaption, .pf-lede, .pf-eyebrow):not(.pf-form-note) {
    color: inherit;
}

.pf-band--primary a:not(.pf-btn) {
    color: inherit;
}

.pf-band--primary .pf-btn {
    background: var(--pf-color-primary-contrast);
    color: var(--pf-color-primary);
}

.pf-band--primary .pf-btn:focus-visible {
    outline-color: var(--pf-color-primary-contrast);
}

.pf-band--primary :is(.pf-card, .pf-card p, .pf-card-link) {
    color: var(--pf-color-text);
}

.pf-band--primary .pf-card-link {
    color: var(--pf-color-primary);
}

.pf-band--primary .pf-quote::before,
.pf-band--primary .pf-steps li::before,
.pf-band--primary .pf-faq-item summary::after {
    color: var(--pf-color-primary-contrast);
}

.pf-band--primary :is(.pf-value-props li, .pf-faq-item, .pf-hours th, .pf-hours td) {
    border-color: var(--pf-color-primary-contrast);
}

/* A reverse button only makes sense on the brand band; elsewhere (a CTA band
   switched to Plain or Tinted) it renders as a normal button. */
.pf-band:not(.pf-band--primary) .pf-btn--reverse {
    background: var(--pf-color-primary);
    color: var(--pf-color-primary-contrast);
}

/* Button style: outline. The border eats into the padding so the button
   keeps the filled button's footprint. */
.pf-btn--outline {
    background: none;
    color: var(--pf-color-primary);
    box-shadow: none;
    border: 2px solid currentColor;
    padding: calc(0.8em - 2px) calc(1.5em - 2px);
}

.pf-band--primary .pf-btn--outline {
    background: none;
    color: var(--pf-color-primary-contrast);
}

/* Section heading: centered. */
.pf-section-head--center {
    margin-inline: auto;
    text-align: center;
}

/* hero_split--center: the text column (headline, lede, button) centered. */
.pf-hero-split--center .pf-container > div {
    text-align: center;
}

.pf-hero-split--center .pf-lede {
    margin-inline: auto;
}

/* Hero photo shape (the leaf corner is the default). */
.pf-hero-photo--rounded {
    border-radius: var(--pf-radius-lg);
}

.pf-hero-photo--square {
    border-radius: 0;
}

/* Header and footer tone (the editor's Background control on the chrome).
   The header is plain and the footer tinted by default; each can take the
   other surface or the brand colour. The brand-band support block below
   recolours their links and text. */
.pf-site-header.pf-band--alt {
    background: var(--pf-color-bg-alt);
}

.pf-site-footer.pf-band--plain {
    background: var(--pf-color-bg);
}

.pf-site-header.pf-band--primary,
.pf-site-footer.pf-band--primary {
    background: var(--pf-color-primary);
    color: var(--pf-color-primary-contrast);
    border-color: transparent;
}

.pf-site-header.pf-band--primary .pf-brand,
.pf-site-header.pf-band--primary .pf-nav a,
.pf-site-footer.pf-band--primary h2 {
    color: var(--pf-color-primary-contrast);
}

/* Section background photo (contract §4.2): a tenant-placed
   <img class="pf-band-photo"> as the section's first child sits behind
   the content; a scrim in the band's own tone keeps the copy on its AA
   pair (§6). Plain and Tinted give a light scrim with the normal text
   colours; Brand color gives a dark scrim and the support block above
   does the rest. The positioning is unconditional, so a browser without
   :has() still shows the photo behind the section, only without the scrim. */
.pf-band,
.pf-page-header {
    position: relative;
    isolation: isolate;
}

.pf-band-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    margin: 0;
    border-radius: 0;
}

section:has(> .pf-band-photo)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--pf-color-bg);
    opacity: 0.84;
}

.pf-band--alt:has(> .pf-band-photo)::before {
    background: var(--pf-color-bg-alt);
}

.pf-band--primary:has(> .pf-band-photo)::before {
    background: var(--pf-color-primary);
    opacity: 0.8;
}

/* Photo overlay strength (the editor's scrim control): how much of the
   band's own colour is drawn over the photo. None shows the photo as it
   is; the text then relies on the photo for contrast. */
.pf-scrim--none:has(> .pf-band-photo)::before {
    opacity: 0;
}

.pf-scrim--light:has(> .pf-band-photo)::before {
    opacity: 0.45;
}

.pf-scrim--strong:has(> .pf-band-photo)::before {
    opacity: 0.95;
}

/* page_header--center */
.pf-page-header--center {
    text-align: center;
}

.pf-page-header--center :is(h1, .pf-lede) {
    margin-inline: auto;
}

/* value_props columns */
.pf-value-props--list {
    grid-template-columns: 1fr;
    max-width: var(--pf-measure);
}

@media (min-width: 50rem) {
    .pf-value-props--two {
        grid-template-columns: 1fr 1fr;
    }

    .pf-value-props--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* feature_rows photos: all left or all right instead of alternating. */
@media (min-width: 50rem) {
    .pf-feature-rows--left .pf-feature-row--flip figure {
        order: 0;
    }

    .pf-feature-rows--right .pf-feature-row figure {
        order: 2;
    }
}

/* testimonial_band quotes */
.pf-testimonials--single {
    grid-template-columns: 1fr;
    max-width: var(--pf-measure);
}

.pf-testimonials--single .pf-quote p {
    font-size: var(--pf-text-xl);
    max-width: none;
}

@media (min-width: 50rem) {
    .pf-testimonials--two {
        grid-template-columns: 1fr 1fr;
    }

    .pf-testimonials--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* process_steps--list: one numbered step per row. */
.pf-steps--list {
    grid-template-columns: 1fr;
    max-width: var(--pf-measure);
}

/* Count-aware defaults for the text grids (auto state only): one item reads
   as a paragraph, two and four pair up instead of stretching or leaving one
   alone, and four steps or points run four across once there is room.
   Keep the :not() lists in step with the column options above. */
.pf-value-props:not(.pf-value-props--two, .pf-value-props--three, .pf-value-props--list):has(> :only-child),
.pf-steps:not(.pf-steps--list):has(> :only-child),
.pf-testimonials:not(.pf-testimonials--two, .pf-testimonials--three, .pf-testimonials--single):has(> :only-child) {
    grid-template-columns: 1fr;
    max-width: var(--pf-measure);
}

.pf-testimonials:not(.pf-testimonials--two, .pf-testimonials--three, .pf-testimonials--single):has(> :only-child) .pf-quote p {
    font-size: var(--pf-text-xl);
    max-width: none;
}

@media (min-width: 50rem) {
    .pf-value-props:not(.pf-value-props--two, .pf-value-props--three, .pf-value-props--list):has(> :last-child:nth-child(2)),
    .pf-value-props:not(.pf-value-props--two, .pf-value-props--three, .pf-value-props--list):has(> :last-child:nth-child(4)),
    .pf-steps:not(.pf-steps--list):has(> :last-child:nth-child(2)),
    .pf-steps:not(.pf-steps--list):has(> :last-child:nth-child(4)),
    .pf-testimonials:not(.pf-testimonials--two, .pf-testimonials--three, .pf-testimonials--single):has(> :last-child:nth-child(2)),
    .pf-testimonials:not(.pf-testimonials--two, .pf-testimonials--three, .pf-testimonials--single):has(> :last-child:nth-child(4)) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 64rem) {
    .pf-value-props:not(.pf-value-props--two, .pf-value-props--three, .pf-value-props--list):has(> :last-child:nth-child(4)),
    .pf-steps:not(.pf-steps--list):has(> :last-child:nth-child(4)) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* faq_accordion--two: two columns of questions. */
@media (min-width: 50rem) {
    .pf-faq--two {
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--pf-space-xl);
        align-items: start;
    }
}

/* cta_band alignment */
.pf-cta-band--center .pf-container {
    text-align: center;
}

.pf-cta-band--center :is(h2, p) {
    margin-inline: auto;
}

.pf-cta-band--right .pf-container {
    text-align: right;
}

.pf-cta-band--right :is(h2, p) {
    margin-left: auto;
}