/**
 * FILE: assets/css/components.css
 * PURPOSE: Every reusable piece in components/ gets its rules here, in the
 *          same order the folder lists them, plus the buttons and form fields
 *          they share.
 *
 *          Mobile-first. Multi-column arrangements live in responsive.css.
 *          Page-specific rules live in pages.css.
 */

/* ===========================================================================
 * BUTTONS
 * ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-m);
    border: var(--border-w) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn--flame {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-coal);
}

.btn--flame:hover,
.btn--flame:focus-visible {
    background: var(--color-flame-bright);
    border-color: var(--color-flame-bright);
    color: var(--color-coal);
    box-shadow: var(--shadow-flame);
}

.btn--ghost {
    border-color: var(--border-strong);
    color: var(--text-base);
    background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.btn--lg { padding: var(--space-s) var(--space-l); font-size: var(--step-0); }
.btn--sm { padding: var(--space-3xs) var(--space-xs); font-size: var(--step--2); }

/* ===========================================================================
 * SECTION HEADING  (components/section-hed.php)
 * ========================================================================= */

.section-hed { margin-bottom: var(--space-l); }

.section-hed__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: var(--space-s);
}

.section-hed__num {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.section-hed__kicker { color: var(--accent); }

.section-hed__title {
    font-size: var(--step-4);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    max-width: 34ch;
}

/* A plain sub-heading inside a page that is already using .section-hed. */
.section-hed__title--plain {
    font-size: var(--step-2);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-s);
    max-width: none;
}

.section-hed__intro {
    margin-top: var(--space-s);
    color: var(--text-muted);
    max-width: 58ch;
}

/* ===========================================================================
 * PAGE HERO  (components/page-hero.php)
 * ========================================================================= */

.page-hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-3xl);
    background: var(--bg-well);
    overflow: hidden;
}

.page-hero--image { background: var(--color-coal-deep); }

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Two stacked gradients: one darkens the whole frame so the text always
 * clears contrast, one deepens the bottom edge into the page. */
.page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgb(7 9 11 / 0.92) 0%, rgb(7 9 11 / 0.72) 45%, rgb(7 9 11 / 0.45) 100%),
        linear-gradient(to top, var(--color-coal) 0%, rgb(7 9 11 / 0.2) 55%);
}

/* The inner element is also the .wrap, which centres itself. Constraining its
 * max-width here would centre the whole text block instead of aligning it to
 * the page gutter, so the measure is set on the children. */
.page-hero__inner { position: relative; }
.page-hero__kicker,
.page-hero__hed,
.page-hero__lead,
.page-hero__actions { max-width: 46rem; }

.page-hero__kicker { margin-bottom: var(--space-s); }

.page-hero__hed { font-size: var(--step-5); }

.page-hero__lead {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    max-width: 48ch;
}

.page-hero__actions {
    margin-top: var(--space-l);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* ===========================================================================
 * ROTATING HOME HERO  (pages/home.php)
 * ========================================================================= */

.hero {
    position: relative;
    isolation: isolate;
    min-height: min(42rem, 86svh);
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-3xl);
    background: var(--color-coal-deep);
    overflow: hidden;
}

.hero__frames { position: absolute; inset: 0; z-index: -2; }

/* The frames are the <img> elements themselves, stacked and crossfaded. */
.hero__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity var(--dur-hero) var(--ease-in-out);
}

.hero__frame.is-active { opacity: 1; }

/* Without JavaScript nothing toggles .is-active, so the first frame is shown
 * on its own and the rest stay hidden. */
.no-js .hero__frame { opacity: 0; }
.no-js .hero__frame:first-child { opacity: 1; }

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, var(--color-coal) 2%, rgb(7 9 11 / 0.55) 48%, rgb(7 9 11 / 0.35) 100%),
        linear-gradient(to right, rgb(7 9 11 / 0.8) 0%, rgb(7 9 11 / 0.1) 70%);
}

.hero__inner { position: relative; }
.hero__kicker,
.hero__hed,
.hero__lead,
.hero__actions,
.hero__note { max-width: 50rem; }

.hero__kicker { margin-bottom: var(--space-s); }

.hero__hed {
    font-size: var(--step-6);
    font-weight: var(--weight-medium);
    line-height: 0.98;
    letter-spacing: var(--tracking-tight);
}

.hero__lead {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    max-width: 46ch;
}

.hero__actions {
    margin-top: var(--space-l);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.hero__note {
    margin-top: var(--space-m);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ===========================================================================
 * MARQUEE  (components/marquee.php)
 * ========================================================================= */

.marquee {
    border-block: var(--border-w) solid var(--border);
    background: var(--bg-well);
    padding-block: var(--space-xs);
    overflow: hidden;
    /* Fade both ends instead of cutting the words off square. */
    mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    width: max-content;
    animation: marquee var(--dur-marquee) linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee__item {
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.marquee__dot {
    color: var(--accent);
    flex: none;
    font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .marquee { mask-image: none; }
}

/* ===========================================================================
 * SERVICE CARD  (components/service-card.php)
 * ========================================================================= */

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.svc-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.svc-card__media { overflow: hidden; background: var(--bg-well); }

.svc-card__media img {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.svc-card:hover .svc-card__media img { transform: scale(1.03); }

.svc-card__body {
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}

.svc-card__group {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
}

.svc-card__hed {
    font-size: var(--step-1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
}

.svc-card__lead {
    font-size: var(--step--1);
    color: var(--text-muted);
    flex: 1;
}

.svc-card__more {
    margin-top: var(--space-2xs);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

/* The whole card is clickable, but only the heading link is in the tab order. */
.svc-card__link { text-decoration: none; color: inherit; }

.svc-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.svc-card:focus-within {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.svc-card__link:focus-visible { outline: none; }

/* ===========================================================================
 * PROJECT CARD  (components/project-card.php)
 * ========================================================================= */

.proj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.proj-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.proj-card__media { overflow: hidden; background: var(--bg-well); }

.proj-card__media img {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.proj-card:hover .proj-card__media img { transform: scale(1.03); }

.proj-card--large .proj-card__media img { aspect-ratio: var(--ratio-hero); }

.proj-card__body {
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}

.proj-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-xs);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.proj-card__where { color: var(--accent); }
.proj-card__year  { color: var(--text-faint); }

.proj-card__hed {
    font-size: var(--step-1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
}

.proj-card--large .proj-card__hed { font-size: var(--step-2); }

.proj-card__sum {
    font-size: var(--step--1);
    color: var(--text-muted);
    flex: 1;
}

.proj-card__link { text-decoration: none; color: inherit; }
.proj-card__link::after { content: ""; position: absolute; inset: 0; }

.proj-card:focus-within {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.proj-card__link:focus-visible { outline: none; }

/* ===========================================================================
 * TESTIMONIAL  (components/testimonial.php)
 * ========================================================================= */

.quote {
    position: relative;
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--space-l) var(--space-m) var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    height: 100%;
}

.quote__mark {
    position: absolute;
    top: var(--space-2xs);
    left: var(--space-s);
    font-size: 4rem;
    line-height: 1;
    color: color-mix(in srgb, var(--accent) 28%, transparent);
    font-weight: var(--weight-semibold);
    pointer-events: none;
    user-select: none;
}

.quote__body {
    position: relative;
    font-size: var(--step-0);
    line-height: var(--leading-relaxed);
    color: var(--text-base);
    flex: 1;
}

.quote--featured .quote__body {
    font-size: var(--step-2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.quote__by { font-style: normal; }

.quote__name {
    display: block;
    font-weight: var(--weight-semibold);
    color: var(--text-base);
    font-size: var(--step--1);
}

.quote__meta {
    display: block;
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: var(--space-3xs);
}

.quote--featured {
    padding: var(--space-xl) var(--space-l) var(--space-l);
    background: var(--bg-well);
}

/* ===========================================================================
 * ACCORDION  (components/accordion.php) — native <details>
 * ========================================================================= */

.accordion {
    border-top: var(--border-w) solid var(--border);
}

.accordion__item {
    border-bottom: var(--border-w) solid var(--border);
}

.accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-m);
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast) var(--ease-out);
}

/* Remove the native disclosure triangle in every engine. */
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }

.accordion__summary:hover { color: var(--accent); }

.accordion__summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.accordion__num {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
    flex: none;
    width: 2em;
}

.accordion__title {
    font-size: var(--step-1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    flex: 1;
}

/* A plus that becomes a minus when the panel opens. */
.accordion__icon {
    position: relative;
    flex: none;
    width: 1rem;
    height: 1rem;
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--border-w);
    background: var(--accent);
    transition: transform var(--dur-base) var(--ease-out);
}

.accordion__icon::after { transform: rotate(90deg); }

.accordion__item[open] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
    display: grid;
    gap: var(--space-m);
    padding-bottom: var(--space-m);
    padding-left: calc(2em + var(--space-s));
}

.accordion__panel-inner > * + * { margin-top: var(--space-s); }

.accordion__body {
    color: var(--text-muted);
    max-width: var(--measure);
}

.accordion__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
}

.accordion__links a {
    font-size: var(--step--1);
    color: var(--text-base);
    text-decoration: none;
    border-bottom: var(--border-w) solid var(--border-strong);
    padding-bottom: 1px;
}

.accordion__links a:hover { color: var(--accent); border-color: var(--accent); }

.accordion__media img {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.accordion__item[open] .accordion__panel {
    animation: acc-open var(--dur-base) var(--ease-out);
}

@keyframes acc-open {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: none; }
}

/* ===========================================================================
 * BEFORE / AFTER  (components/before-after.php)
 * The range input is the control that matters: it works with a keyboard, with
 * a screen reader, and without JavaScript. The handle is decoration over it.
 * ========================================================================= */

.ba { margin: 0; }

.ba__frame {
    position: relative;
    overflow: hidden;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-well);
    /* --ba-pos is written by the script; 50% is the no-JS resting state. */
    --ba-pos: 50%;
}

.ba__img {
    width: 100%;
    aspect-ratio: var(--ratio-hero);
    object-fit: cover;
    display: block;
}

/* The "before" layer sits at full frame width and is cut back with a
 * clip-path, so the two photographs stay in register at every position —
 * sizing the layer itself would squash the image instead of revealing it. */
.ba__clip {
    position: absolute;
    inset: 0;
    width: 100%;
    clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba__clip .ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos);
    width: 2px;
    background: var(--accent);
    transform: translateX(-1px);
    pointer-events: none;
}

.ba__handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    box-shadow: var(--shadow-md);
}

.ba__handle-grip::before,
.ba__handle-grip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--color-coal);
    border-right: 2px solid var(--color-coal);
}

.ba__handle-grip::before { left: 0.6rem; transform: translateY(-50%) rotate(-135deg); }
.ba__handle-grip::after  { right: 0.6rem; transform: translateY(-50%) rotate(45deg); }

.ba__tag {
    position: absolute;
    top: var(--space-xs);
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: color-mix(in srgb, var(--color-coal-deep) 82%, transparent);
    color: var(--text-base);
    border-radius: var(--radius-sm);
}

.ba__tag--before { left: var(--space-xs); }
.ba__tag--after  { right: var(--space-xs); }

/* assets/js/main.js adds dragging on top of the range input. */
.has-js .ba__frame { cursor: ew-resize; }
.ba.is-dragging { user-select: none; }
.ba.is-dragging .ba__handle-grip { transform: translate(-50%, -50%) scale(1.08); }

.ba__control { margin-top: var(--space-s); }

.ba__label {
    display: block;
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-2xs);
}

.ba__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}

.ba__range::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

.ba__range::-moz-range-track {
    height: 2px;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

.ba__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.6rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    border: 2px solid var(--color-coal);
    box-shadow: var(--shadow-sm);
}

.ba__range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    border: 2px solid var(--color-coal);
}

.ba__caption {
    margin-top: var(--space-s);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-s);
}

.ba__hed {
    font-size: var(--step-1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--text-base);
}

.ba__where {
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

/* ===========================================================================
 * STAT TILES  (components/stat-tiles.php)
 * ========================================================================= */

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--border-w);
    background: var(--border);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--space-xl);
}

.stat-tile {
    background: var(--bg-page);
    padding: var(--space-m) var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.stat-tile__figure {
    font-size: var(--step-3);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--accent);
}

.stat-tile__label {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-base);
}

.stat-tile__note {
    font-size: var(--step--2);
    color: var(--text-faint);
}

/* ===========================================================================
 * AREAS LIST  (components/areas-list.php)
 * ========================================================================= */

.areas-list { margin-top: var(--space-l); }

.areas-list__towns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: var(--border-w) solid var(--border);
}

.areas-list__town {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    border-bottom: var(--border-w) solid var(--border);
}

.areas-list__num {
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
    flex: none;
    width: 2em;
}

.areas-list__name {
    font-size: var(--step-0);
    color: var(--text-base);
}

.areas-list--compact .areas-list__town { padding-block: var(--space-3xs); }
.areas-list--compact .areas-list__name { font-size: var(--step--1); color: var(--text-muted); }

/* The three city hub links below the town list. */
.areas-list__hubs-hed {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-s);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
}

.areas-list__hub-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xs);
}

.areas-list__hub-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-s);
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.areas-list__hub-link:hover {
    border-color: var(--accent);
    background: var(--bg-raised-hover);
}

.areas-list__hub-name {
    font-size: var(--step-1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--text-base);
}

.areas-list__hub-link:hover .areas-list__hub-name { color: var(--accent); }

.areas-list__hub-county {
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

.areas-list__hub-count { font-size: var(--step--1); color: var(--text-muted); }

/* ===========================================================================
 * CITY LINKS  (components/city-links.php)
 * This component brings its own <section>, so it needs its own padding.
 * ========================================================================= */

.city-links {
    padding-block: var(--section-y-tight);
    background: var(--bg-well);
    border-top: var(--border-w) solid var(--border);
}

.city-links__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: var(--border-w) solid var(--border);
}

.city-links__item { border-bottom: var(--border-w) solid var(--border); }

.city-links__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    text-decoration: none;
    color: var(--text-base);
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-base) var(--ease-out);
}

.city-links__link:hover,
.city-links__link:focus-visible {
    color: var(--accent);
    padding-left: var(--space-2xs);
}

.city-links__num {
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
    flex: none;
    width: 2.5em;
}

.city-links__label { flex: 1; font-size: var(--step-0); }

.city-links__arrow { color: var(--accent); flex: none; }

/* ===========================================================================
 * CREDENTIALS  (components/credentials.php)
 * ========================================================================= */

.credentials { margin-top: var(--space-xl); }

.credentials__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

.credentials__item {
    padding: var(--space-m);
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.credentials__figure {
    font-size: var(--step-2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--text-base);
    line-height: 1.15;
}

.credentials__label {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

.credentials__note { font-size: var(--step--1); color: var(--text-muted); }

/* ===========================================================================
 * SHOWCASE GRID  (components/showcase-grid.php)
 * ========================================================================= */

.showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    margin-top: var(--space-xl);
}

.showcase__item { position: relative; }

.showcase__figure { margin: 0; }

.showcase__img {
    width: 100%;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: var(--border-w) solid var(--border);
}

.showcase__caption {
    margin-top: var(--space-2xs);
    font-size: var(--step--2);
    color: var(--text-faint);
}

/* ===========================================================================
 * CTA BAND  (components/cta-band.php)
 * ========================================================================= */

.cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-coal-deep);
    padding-block: var(--space-3xl);
}

.cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-band__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgb(7 9 11 / 0.94) 0%, rgb(7 9 11 / 0.78) 50%, rgb(7 9 11 / 0.6) 100%);
}

.cta-band__inner { position: relative; }
.cta-band__kicker,
.cta-band__hed,
.cta-band__body,
.cta-band__actions,
.cta-band__meta { max-width: 44rem; }

.cta-band__kicker { margin-bottom: var(--space-s); }

.cta-band__hed {
    font-size: var(--step-4);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

.cta-band__body {
    margin-top: var(--space-s);
    color: var(--text-muted);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    max-width: 48ch;
}

.cta-band__actions {
    margin-top: var(--space-l);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.cta-band__meta {
    margin-top: var(--space-m);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ===========================================================================
 * MAP EMBED  (components/map-embed.php)
 * ========================================================================= */

.map-embed { margin-top: var(--space-xl); }

.map-embed__frame {
    width: 100%;
    height: clamp(15rem, 44vw, 32rem);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    /* Warm the Google tiles so the map sits inside the palette. */
    filter: sepia(0.25) saturate(0.85) brightness(0.92) contrast(1.05);
}

.map-embed__fallback {
    margin-top: var(--space-s);
    font-size: var(--step--1);
    color: var(--text-muted);
}

/* ===========================================================================
 * RELATED SERVICES  (components/related-services.php)
 * ========================================================================= */

.related { margin-top: var(--space-2xl); }

/* ===========================================================================
 * JUMP NAV  (pages/services.php)
 * ========================================================================= */

.jump {
    margin-top: var(--space-l);
    padding-block: var(--space-s);
    border-block: var(--border-w) solid var(--border);
}

.jump__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-m);
}

.jump__item { display: flex; align-items: baseline; gap: var(--space-3xs); }

.jump__num {
    font-size: var(--step--2);
    color: var(--text-faint);
    letter-spacing: var(--tracking-wide);
}

.jump__link {
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}

.jump__link:hover { color: var(--accent); }

/* ===========================================================================
 * SIDE CARD  (service, area, contact and thank-you rails)
 * ========================================================================= */

.side-card {
    padding: var(--space-m);
    background: var(--bg-raised);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
}

.side-card--wide { margin-top: var(--space-xl); }

.side-card--flame {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-raised));
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.side-card__hed {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-s);
}

.side-card__body { font-size: var(--step--1); color: var(--text-muted); }
.side-card__body + .side-card__body { margin-top: var(--space-s); }

.side-card__phone {
    margin-block: var(--space-2xs) var(--space-s);
    font-size: var(--step-2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
}

.side-card__phone a { text-decoration: none; color: var(--text-base); }
.side-card__phone a:hover { color: var(--accent); }

.side-card__note { font-size: var(--step--1); color: var(--text-muted); }

.side-card__dl { display: grid; }

.side-card__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
    border-bottom: var(--border-w) solid var(--border);
    font-size: var(--step--1);
}

.side-card__row:last-child { border-bottom: 0; }
.side-card__row dt { color: var(--text-muted); }
.side-card__row dd { color: var(--text-base); text-align: right; font-weight: var(--weight-medium); }

.side-card__links,
.side-card__list { display: grid; gap: var(--space-2xs); font-size: var(--step--1); }

.side-card__links a { color: var(--text-muted); text-decoration: none; }
.side-card__links a:hover { color: var(--accent); }

.side-card__list li {
    position: relative;
    padding-left: 1.2em;
    color: var(--text-muted);
}

.side-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5em;
    height: var(--border-w);
    background: var(--accent);
}

.side-card__steps {
    display: grid;
    gap: var(--space-s);
    counter-reset: step;
    font-size: var(--step--1);
    color: var(--text-muted);
}

.side-card__steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2em;
}

.side-card__steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
}

.side-card__scope { display: grid; gap: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); }

.side-card__actions { margin-top: var(--space-s); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

/* ===========================================================================
 * INLINE CTA  (inside a long service or local page)
 * ========================================================================= */

.inline-cta {
    margin-block: var(--space-2xl);
    padding: var(--space-l) var(--space-m);
    background: var(--bg-well);
    border: var(--border-w) solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
}

.inline-cta__hed {
    font-size: var(--step-2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
}

.inline-cta__body {
    margin-top: var(--space-2xs);
    color: var(--text-muted);
    max-width: 52ch;
}

.inline-cta__actions {
    margin-top: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* ===========================================================================
 * FORM  (components/contact-form.php)
 * ========================================================================= */

.estimate-form { margin-top: var(--space-l); }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }

.field__label {
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-base);
}

.field__req { color: var(--accent); margin-left: 0.15em; }

.field__opt {
    color: var(--text-faint);
    font-weight: var(--weight-regular);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
    margin-left: 0.3em;
}

.field__input {
    padding: var(--space-xs) var(--space-s);
    font-size: var(--step-0);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.field__input:hover { border-color: var(--text-faint); }

.field__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                      linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: var(--space-xl);
}

.field__textarea { min-height: 9rem; }

.field__hint { font-size: var(--step--2); color: var(--text-faint); }

.field__error {
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    color: var(--color-error);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, var(--bg-raised-hover));
}

/* assets/js/forms.js marks the wrapper too, so the label turns with the
 * control rather than the control changing colour on its own. */
.field.has-error .field__label { color: var(--color-error); }
.field__error[hidden] { display: none; }

/* The honeypot. Hidden from people, reachable by a bot filling every input. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.form-alert {
    padding: var(--space-s) var(--space-m);
    margin-bottom: var(--space-m);
    border-radius: var(--radius-sm);
    border: var(--border-w) solid var(--border-strong);
    font-size: var(--step--1);
}

.form-alert--error {
    background: var(--color-error-bg);
    border-color: color-mix(in srgb, var(--color-error) 55%, transparent);
    color: var(--text-base);
}

.estimate-form__foot {
    margin-top: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
}

.estimate-form__note {
    font-size: var(--step--2);
    color: var(--text-faint);
    max-width: 52ch;
}

/* While the script is posting the form. */
.estimate-form.is-sending { opacity: 0.6; pointer-events: none; }

/* ===========================================================================
 * SMALL SHARED PIECES
 * ========================================================================= */

/* A list of onward links at the foot of a page. */
.next-links {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-l);
    font-size: var(--step-0);
    color: var(--text-muted);
}

.next-links > li {
    position: relative;
    padding-left: 1.4em;
}

.next-links > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 0.7em;
    height: var(--border-w);
    background: var(--accent);
}

/* When a data list is empty — news with no announcements, for instance. */
.empty-note {
    padding: var(--space-l);
    border: var(--border-w) dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--step--1);
    text-align: center;
}

/* ===========================================================================
 * SCROLL REVEALS
 * Applied by assets/js/main.js. Without the script the content is visible —
 * see base.css section 10.
 * ========================================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}