/* ===========================================================================
   Quinn Plumbing & Gasfitting — quinnplumbing.co.nz

   The design brief (1 November 2026): plain and simple, black and white, the
   client's own photos only, simple, sleek and modern, clean lines, NO ICONS.
   Red is reserved for one thing — the 24/7 emergency service — and appears
   nowhere else except an error message, where it has to.

   NO HORIZONTAL LINES (client, 2 November 2026): sections are separated by
   the alternating white / light-grey bands and by space, not by rules.
   Buttons have rounded corners (--radius); everything else is square.

   One page. SITE_HEADER is off (the hero opens with the full logo and its
   service links are the navigation), so there are no site-header, nav-toggle,
   site-nav or skip-link rules here. /privacy and the 404 page carry the logo
   through includes/page-brand.php instead.

   Mobile first: base styles are the narrow viewport; widen with min-width
   only. The first phone screen must hold, in the client's order: logo, the
   promise, the photo of Quinn, Plumbing, Gasfitting, 24 Hour Emergency
   Service (red), and Call Us Now. Check that on a real phone after any change
   to the hero.

   Bump ASSET_VERSION in includes/site.php after editing this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts — Poppins (client, 2 November 2026; replaced Barlow), SIL OFL
   (assets/fonts/OFL-Poppins.txt), self-hosted from the files Google Fonts
   serves — never linked from Google, which would send every visitor's address
   there. The latin-ext files carry the macrons (Whangārei, Ōrewa) and load
   only when a page uses one.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
    --ink:          #000000;   /* text, rules, buttons — the logo's black */
    --ink-soft:     #4d4d4d;   /* secondary text; 8.4:1 on white */
    --paper:        #ffffff;
    --paper-alt:    #f3f3f3;   /* alternate sections */
    --rule:         #000000;   /* clean lines are black, not grey */
    --rule-soft:    #cfcfcf;   /* dividers inside a block */
    --accent:       #000000;   /* links and buttons */
    --accent-ink:   #ffffff;   /* text on --accent */
    --alert:        #c8102e;   /* 24/7 emergency ONLY; white on it is 5.9:1 */
    --alert-ink:    #ffffff;
    --alert-on-dark: #ff5c6c;  /* the same red where the ground is black; 6.6:1 */
    --ok:           #000000;
    --ok-bg:        #f3f3f3;
    --error:        #a50d25;
    --error-bg:     #fdeef0;

    --font-display: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:    'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 1rem;
    --s4: 1.5rem;
    --s5: 2rem;
    --s6: 3rem;
    --s7: 4.5rem;

    --measure: 36rem;
    --gutter:  1rem;
    --max:     72rem;

    /* Buttons only (2 November 2026). Fields, photos and rules stay square. */
    --radius:  0.5rem;
}

@media (min-width: 40em) {
    :root { --gutter: 2rem; }
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 var(--s3);
}

h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1rem; letter-spacing: 0.08em; }

@media (min-width: 56em) {
    h2 { font-size: 2.75rem; }
}

p, ul, ol, dl { margin: 0 0 var(--s3); }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* Visible focus, always. */
:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

/* Anchored sections land clear of the top edge. */
[id] { scroll-margin-top: var(--s3); }

@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;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Shared layout
   --------------------------------------------------------------------------- */

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

.section__inner,
.site-footer__inner,
.page-head__inner,
.band__inner,
.page-brand,
.prose {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--s6); }
.section--alt { background: var(--paper-alt); }

@media (min-width: 56em) {
    .section { padding-block: var(--s7); }
}

.band { padding-block: var(--s5); }
.band--lift { background: var(--paper-alt); }

.eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s2);
}

.section__head { margin-bottom: var(--s5); }

.section__lede {
    max-width: var(--measure);
    font-size: 1.1875rem;
    line-height: 1.5;
}

.section__more {
    margin: var(--s5) 0 0;
    font-weight: 600;
}
.section__more a { margin-left: var(--s2); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 52px;
    padding: var(--s2) var(--s5);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.05em;   /* Poppins is wide; Barlow took 0.1em */
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--paper); color: var(--ink); }

.btn__sub { font-weight: 600; letter-spacing: 0.04em; }

.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }

.btn--outline { background: var(--paper); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* Red is for the 24/7 emergency service and nothing else. */
.btn--urgent { background: var(--alert); color: var(--alert-ink); border-color: var(--alert); }
.btn--urgent:hover { background: var(--paper); color: var(--alert); }

/* ---------------------------------------------------------------------------
   Hero — the first phone screen. Centred on a phone, two columns on a desk.
   --------------------------------------------------------------------------- */

.hero { padding: var(--s4) 0 var(--s5); }

.hero__inner {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--s3);
    text-align: center;
}

.hero__brand { margin: 0; }
.hero__brand img { width: min(100%, 20rem); margin-inline: auto; }

.hero__promise {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero__photo { margin: 0; }
.hero__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* The three services as buttons: Plumbing and Gasfitting side by side, the
   emergency service full width in red underneath. No dividing rules. */
.hero__services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}
.hero__services li:nth-child(3) { grid-column: 1 / -1; }

.hero__services .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: var(--s2);
    letter-spacing: 0.04em;
}

/* The hero's buttons stay on one line down to a 360px phone. */
.hero__services .btn,
.hero__call { white-space: nowrap; }

.hero__call { width: 100%; padding-inline: var(--s3); }

@media (min-width: 56em) {
    .hero { padding-block: var(--s6) var(--s7); }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-areas:
            "brand    photo"
            "promise  photo"
            "services photo"
            "call     photo";
        grid-template-rows: auto auto auto 1fr;
        column-gap: var(--s6);
        row-gap: var(--s4);
        text-align: left;
        align-items: start;
    }

    .hero__brand    { grid-area: brand; }
    .hero__promise  { grid-area: promise; font-size: 1.125rem; }
    .hero__photo    { grid-area: photo; align-self: stretch; }
    .hero__services { grid-area: services; }
    .hero__call     { grid-area: call; justify-self: start; width: auto; }

    .hero__brand img { width: 100%; max-width: 28rem; margin-inline: 0; }
    .hero__photo img { height: 100%; }
}

/* ---------------------------------------------------------------------------
   Plumbing and gasfitting — the brief's maintenance / new builds / renovations
   --------------------------------------------------------------------------- */

.scope { display: grid; gap: 0; margin: 0; }

.scope__item { padding-block: var(--s3); }

.scope dt {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.scope dd { margin: var(--s1) 0 0; color: var(--ink-soft); }

@media (min-width: 48em) {
    .scope { grid-template-columns: repeat(3, 1fr); column-gap: var(--s5); }
}

/* The detailed list of jobs (client, 5 November 2026), folded into a native
   <details> so it is one row on a phone. The summary is an outline button —
   a control, so it gets the rounded corners; the open list is plain text.
   The marker is a typed + / − rather than an icon. */
.jobs { margin-top: var(--s4); }

.jobs__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: 52px;
    padding: var(--s2) var(--s3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.jobs__toggle::-webkit-details-marker { display: none; }
.jobs__toggle::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}
.jobs[open] .jobs__toggle::after { content: "\2212"; }
.jobs__toggle:hover { background: var(--ink); color: var(--paper); }

.jobs__list {
    margin: var(--s3) 0 0;
    padding-left: 1.25em;
    line-height: 1.4;
}
.jobs__list li { padding-block: 0.125rem; break-inside: avoid; }

.jobs__ask { margin: var(--s3) 0 0; color: var(--ink-soft); }

@media (min-width: 48em) {
    .jobs__toggle { display: inline-flex; padding-inline: var(--s4); }
    .jobs__list { columns: 2; column-gap: var(--s6); }
}

@media (min-width: 64em) {
    .jobs__list { columns: 3; }
}

/* ---------------------------------------------------------------------------
   24/7 emergency — the one red band
   --------------------------------------------------------------------------- */

.emergency {
    background: var(--alert);
    color: var(--alert-ink);
    padding-block: var(--s6);
}

.emergency .eyebrow { color: var(--alert-ink); }
.emergency h2 { font-size: 2.25rem; }

.emergency__lede {
    max-width: var(--measure);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--s4);
}

.emergency .btn { width: 100%; }

@media (min-width: 40em) {
    .emergency .btn { width: auto; }
}

@media (min-width: 56em) {
    .emergency { padding-block: var(--s7); }
    .emergency h2 { font-size: 3.5rem; }
}

/* ---------------------------------------------------------------------------
   About — the brief, with the family photo
   --------------------------------------------------------------------------- */

.about { display: grid; gap: var(--s5); }

.about__text p { max-width: var(--measure); }

.ticks {
    list-style: none;
    margin: var(--s4) 0;
    padding: 0;
    max-width: var(--measure);
}
.ticks li {
    padding-block: var(--s1);
    font-weight: 600;
}

.about__sign {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about__photo { margin: 0; }
.about__photo img { width: 100%; }
.about__photo figcaption {
    margin-top: var(--s2);
    font-size: 0.875rem;
    color: var(--ink-soft);
}

@media (min-width: 56em) {
    .about { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
}

/* ---------------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------------- */

/* Static by default: a plain list, which is what a visitor with no script or
   with reduced motion sees, and what a crawler reads. */
.reviews__track { display: grid; gap: var(--s5); }

.review {
    margin: 0;
    padding-left: var(--s4);
    border-left: 4px solid var(--ink);
}
.review blockquote { margin: 0 0 var(--s3); }
.review blockquote p {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
}
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after  { content: "\201D"; }
.review figcaption {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (min-width: 48em) {
    .reviews__track { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s6); }
}

/* The carousel, once reviews.js has added .is-moving and the copies. The
   track holds every review twice; moving it left by exactly half brings the
   copy into the original's place, so the loop has no seam. Each card carries
   its own right margin (not a flex gap) so both halves are the same width. */
.reviews.is-moving { overflow: hidden; }

.reviews.is-moving .reviews__track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: max-content;
    animation: reviews-left var(--reviews-duration, 60s) linear infinite;
}

.reviews.is-moving .review {
    flex: none;
    width: min(78vw, 24rem);
    margin-right: var(--s6);
}

/* Paused while a pointer is on it, while anything in it has focus, and when
   the visitor presses Pause. */
.reviews.is-moving:hover .reviews__track,
.reviews.is-moving:focus-within .reviews__track,
.reviews.is-paused .reviews__track { animation-play-state: paused; }

@keyframes reviews-left {
    to { transform: translateX(-50%); }
}

.reviews__toggle {
    margin-top: var(--s4);
    min-height: 44px;
    padding: var(--s1) var(--s4);
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Work examples
   --------------------------------------------------------------------------- */

.work { display: grid; gap: var(--s3); }
.work__item { margin: 0; }
.work__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work__item figcaption { margin-top: var(--s2); font-size: 0.9375rem; color: var(--ink-soft); }

@media (min-width: 40em) {
    .work { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}


/* ---------------------------------------------------------------------------
   Qualifications and partners — kept quiet (client, 2 November 2026: the big
   capitals and the stacked logos read as clunky on a phone)
   --------------------------------------------------------------------------- */

.qualified__list,
.partners {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Three short facts in the body face, sentence case. The section heading
   already shouts; these just answer it. */
.qualified__list { display: grid; gap: var(--s2); }
.qualified__list li {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
}

@media (min-width: 56em) {
    .qualified__list li { font-size: 1.25rem; }
}

/* The partners' own logos, in their own colours: stacked on a phone (client,
   2 November 2026), in a row from tablet width. Sized by height so the three
   read as equals; the alt text is the link's name. */
.partners {
    display: grid;
    justify-items: start;
    gap: var(--s4);
}
.partners a {
    display: flex;
    align-items: center;
    min-height: 48px;
}
.partners img { height: 2.5rem; width: auto; }
.partners a:hover img { opacity: 0.7; }

@media (min-width: 48em) {
    .partners {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 44rem;
    }
    .partners img { height: 3rem; }
}

/* ---------------------------------------------------------------------------
   Areas we cover — every suburb, as plain readable text
   --------------------------------------------------------------------------- */

.areas {
    display: grid;
    gap: var(--s4) var(--s5);
}

@media (min-width: 40em) {
    .areas { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
}

.areas__group h3 { margin-bottom: var(--s2); }

.areas__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}
.areas__list li { display: inline; }
.areas__list li:not(:last-child)::after { content: " · "; }

/* ---------------------------------------------------------------------------
   Contact and the quote form
   --------------------------------------------------------------------------- */

.contact__inner { display: grid; gap: var(--s5); }

.contact__phone {
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.02em;
    margin-bottom: var(--s2);
}
.contact__phone a { text-decoration: none; }
.contact__phone a:hover { text-decoration: underline; }

@media (min-width: 56em) {
    .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s7); }
    .contact__phone { font-size: 2.5rem; }
    .contact__form { padding-top: var(--s4); }
}

/* HONEYPOT — LOAD-BEARING. DO NOT DELETE THIS RULE.
 *
 * spam_trap_fields() in includes/security.php emits a decoy field wrapped in
 * .hp. If this rule goes missing the field becomes visible, a visitor who
 * fills in every field is treated as a bot, is told their message was sent,
 * and the enquiry is silently discarded. Off-screen rather than display:none,
 * which some bots detect and skip. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

label {
    display: block;
    margin-bottom: var(--s1);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s4);
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}
input:focus-visible,
textarea:focus-visible { outline-offset: 0; }

textarea { min-height: 9rem; resize: vertical; }

.hint, .privacy { font-size: 0.875rem; color: var(--ink-soft); }
label .hint { font-weight: 400; letter-spacing: 0; text-transform: none; }
.hint--field { margin: calc(var(--s3) * -1) 0 var(--s4); }

.contact__form .btn { width: 100%; margin-bottom: var(--s3); }

@media (min-width: 40em) {
    .contact__form .btn { width: auto; }
}

.notice {
    padding: var(--s3);
    margin-bottom: var(--s4);
    border-left: 4px solid;
}
.notice--ok    { border-color: var(--ok);    background: var(--ok-bg);    color: var(--ok); font-weight: 600; }
.notice--error { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice ul { margin: 0; padding-left: var(--s4); }
.notice a { color: inherit; }

/* ---------------------------------------------------------------------------
   Inner pages (/privacy, 404) — logo home, page head, prose
   --------------------------------------------------------------------------- */

.page-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding-block: var(--s3);
}
.page-brand__link img { width: 11rem; }
.page-brand__phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.page-head { padding-block: var(--s5) var(--s4); }
.page-head__lede { max-width: var(--measure); color: var(--ink-soft); margin-bottom: 0; }

/* Same left edge as the page head above it; the measure applies to the text. */
.prose { padding-block: var(--s4) var(--s6); }
.prose > * { max-width: var(--measure); }
.prose h2 { font-size: 1.375rem; margin-top: var(--s5); }

.detail-list { display: grid; gap: 0; }
.detail-list dt { font-weight: 700; margin-top: var(--s3); }
.detail-list dd { margin: 0; }

.quicklinks {
    list-style: none;
    margin: 0 auto var(--s5);
    padding-inline: var(--gutter);
    max-width: var(--max);
    display: grid;
}
.quicklinks__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}
.quicklinks__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Footer — black, with the white logo. includes/site-footer.php supplies the
   blocks; the legal line, credit and staff link come from footer.php.
   --------------------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: var(--paper);
    padding-block: var(--s6) var(--s3);
}
.site-footer a { color: var(--paper); }

.site-footer__inner { display: grid; gap: var(--s5); }

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

.site-footer .eyebrow { color: #bdbdbd; }
.site-footer__block p { margin-bottom: var(--s2); }

.site-footer__brand img { width: 15rem; }
.site-footer__tagline {
    margin-top: var(--s3);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer__phone { font-weight: 700; font-size: 1.5rem; }
.site-footer__hours--wide { display: none; }
.site-footer__phone a { text-decoration: none; }

.site-footer__urgent {
    color: var(--alert-on-dark);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__bank {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s1) var(--s3);
    margin: 0;
}
.site-footer__bank dt { color: #bdbdbd; }
.site-footer__bank dd { margin: 0; }

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list a,
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.site-footer__social { display: flex; gap: var(--s3); }
.site-footer__social a { min-width: 44px; justify-content: center; }
.site-footer__social img { width: 2rem; height: 2rem; }

/* DESKTOP ONLY (client, 2 November 2026; phone and tablet unchanged): the
   logo top left, then Contact as one row under it, then Paying an invoice as
   one row under that, with Explore in its own column on the right. Each row's
   heading sits inline at a fixed width, so the two rows' contents line up. */
@media (min-width: 64em) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand   explore"
            "contact explore"
            "pay     explore";
        column-gap: var(--s5);
        row-gap: var(--s4);
        align-items: start;
    }
    .site-footer__brand   { grid-area: brand; }
    .site-footer__contact { grid-area: contact; }
    .site-footer__pay     { grid-area: pay; }
    .site-footer__explore { grid-area: explore; }

    .site-footer__contact,
    .site-footer__pay {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--s3);
        row-gap: var(--s1);
    }
    .site-footer__social { gap: var(--s2); }
    .site-footer__social img { width: 1.75rem; height: 1.75rem; }
    .site-footer__contact > *,
    .site-footer__pay > * { margin: 0; }
    .site-footer__contact .eyebrow,
    .site-footer__pay .eyebrow { margin-right: var(--s1); }

    .site-footer__phone { font-size: 1.125rem; }
    .site-footer__urgent { font-size: 0.9375rem; letter-spacing: 0.04em; }

    .site-footer__hours--narrow { display: none; }
    .site-footer__hours--wide { display: block; margin-top: var(--s2); color: #bdbdbd; }

    /* Bank, account, name on one line: the dt labels are hidden visually but
       still read out, and a middot separates the values. */
    .site-footer__bank { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
    .site-footer__bank dt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .site-footer__bank dd + dt + dd::before { content: "·"; margin-right: var(--s2); color: #bdbdbd; }
}

/* A small laptop (1024px) is a few pixels short for the Contact row at the
   normal spacing, so it closes up a little there. */
@media (min-width: 64em) and (max-width: 71.99em) {
    .site-footer__contact { column-gap: var(--s2); }
}

/* The closing three, in descending loudness: what the business owes the
   public, who built it, and the staff door. Ranked by size AND colour — the
   staff link must stay the quietest thing on the page. */

.site-footer__legal {
    max-width: var(--max);
    margin: var(--s6) auto 0;
    padding: var(--s3) var(--gutter) 0;
    font-size: 0.875rem;
    color: #bdbdbd;
}
.site-footer__legal a { color: #e6e6e6; }

.site-footer__credit {
    max-width: var(--max);
    margin: var(--s3) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.8125rem;
    color: #a6a6a6;
}
.site-footer__credit a { color: #bdbdbd; }

/* Margin --s1, not --s3: the 44px target already adds ~12px of visible space
   above the text. See the template's note on .site-footer__staff before
   "tidying" this into padding. */
.site-footer__staff {
    max-width: var(--max);
    margin: var(--s1) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.75rem;
}
.site-footer__staff a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #8a8a8a;
    text-decoration: none;
}
.site-footer__staff a:hover { text-decoration: underline; }