/* ═══════════════════════════════════════════════════════════════════════
Corrigan Custom Painting — design system
Everything here comes from the logo: its periwinkle blue (#5A80D8), its pale
butter yellow, saturated to a true yellow (#F7DC3E), and its typeface
(Open Sans). The logo files keep the pale original. The deeper blues are
the same hue taken darker, and the light washes are the same hue taken
lighter, so the whole site reads as one family with the sign.
The paint appears in exactly two places — DIVIDERS and BUTTONS — using two
tinted section bands and small accent rules. Nothing is faked as paint.
═══════════════════════════════════════════════════════════════════════ */
:root {
--blue: #5A80D8;
--blue-dp: #3F62B8;
--blue-ink: #35569F;
--deep: #1F3670;
--deep-2: #152650;
--deep-3: #2A4787;
--butter: #F7DC3E;
--butter-dp: #EFC91C;
--white: #FFFFFF;
--wash: #F3F6FC;
--wash-2: #E8EEFA;
--line: #DCE4F3;
--line-soft: #E8EDF7;
--ink: #16223D;
--text: #21304C;
--muted: #4F5871;
--font: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--r-s: 4px;
--r-m: 8px;
--sh-1: 0 1px 2px rgba(22, 34, 61, .05), 0 4px 12px rgba(22, 34, 61, .06);
--sh-2: 0 14px 34px rgba(22, 34, 61, .11);
--sh-3: 0 28px 68px rgba(22, 34, 61, .22);
--wrap: 1220px;
--gutter: clamp(1.15rem, 4.2vw, 2.85rem);
--header-h: 76px;
--pad: clamp(4.25rem, 8vw, 7.25rem);
/* No decorative brush graphics. Ten rounds of them were rejected, and the
painting sites that actually look good (Nolan, Improovy, Hedlund,
Catchlight) use none: they separate sections with tinted bands and shaped
edges, and mark headings with a small crisp accent rule. See README. */
--rule-h: 3px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.7;
color: var(--text); background: var(--white);
/* clip, not hidden: overflow-x:hidden makes a scroll container,
which stops position:sticky descendants (the Why photo) from sticking.
clip prevents the sideways scroll without creating that container. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--deep); }
h1, h2, h3, h4 {
font-family: var(--font); font-weight: 800; line-height: 1.12;
letter-spacing: -.022em; margin: 0 0 .5em; color: var(--deep); text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.32rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1.05em; }
em { font-style: normal; color: var(--blue-ink); }
.hero em, .section--navy em, .cta-band em { color: var(--butter); }
strong { font-weight: 700; color: var(--deep); }
/* on dark surfaces bold text must not fall back to the dark ink colour */
.hero strong, .section--navy strong, .cta-band strong, .site-footer strong,
.step strong, .reel__cap strong, .vcap strong { color: inherit; }
ul, ol { padding-left: 1.15em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Two-tone focus ring. A single blue ring measured 2.35:1 on the ghost button
and 2.77:1 on the yellow one, i.e. invisible where it matters most. With a
dark inner ring and a light outer halo, one of the two always clears 3:1
whatever it lands on: navy shows on white and on yellow, butter shows on
navy. The old rule also forced border-radius:2px, which squared off the pill
buttons while they were focused. */
:focus-visible {
outline: 2px solid var(--deep-2);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--butter);
}
.section--navy :focus-visible, .hero :focus-visible, .site-footer :focus-visible,
.cta-band :focus-visible, .site-header :focus-visible {
outline-color: var(--butter);
box-shadow: 0 0 0 5px var(--deep-2);
}
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--butter); color: var(--deep-2); padding: .7rem 1.3rem; border-radius: 999px; z-index: 1000; font-weight: 700; }
.skip:focus { top: 1rem; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(770px, 100% - 2 * var(--gutter)); margin-inline: auto; }
section { padding-block: var(--pad); position: relative; }
.section--cream { background: var(--wash); }
.section--navy { background: var(--deep); color: #C7D3EE; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: var(--butter); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* ── Shaped section transitions ─────────────────────────────────────
The device the good painting sites use where two colour bands meet: the
darker band cuts into the one above on a shallow diagonal instead of
butting against it in a straight line. Drawn as a triangle in the section's
OWN colour, sitting above its box, so the section above needs no knowledge
of what follows it and no colour has to be threaded through the markup. */
/* Only where two bands actually contrast. The footer follows the navy CTA
band, so a wedge there is navy on navy and reads as a smudge. */
.section--navy, .cta-band { --slant: clamp(16px, 2.4vw, 42px); }
.section--navy::before, .cta-band::before {
content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--slant));
height: var(--slant); pointer-events: none;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.section--navy::before { background: var(--deep); }
.cta-band::before { background: var(--deep); }
/* ══ Section rules and dividers ══════════════════════════════════
Small, crisp, accent-coloured. No fake paint anywhere. */
.divider { display: block; width: 100%; height: var(--rule-h); background: var(--blue); }
.divider--footer { position: absolute; top: 0; left: 0; height: var(--rule-h); background: var(--butter); }
/* the rule under every section label: short, crisp, accent-coloured */
.eyebrow::after {
content: ""; display: block; width: 46px; height: var(--rule-h); margin-top: .55rem;
background: var(--blue); border-radius: 2px;
}
.section--navy .eyebrow::after, .hero .eyebrow::after { background: var(--butter); }
.section-head.center .eyebrow::after { margin-inline: auto; }
/* ── Section label ─────────────────────────────────────────────────── */
.eyebrow {
display: block; font-weight: 700; font-size: .74rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--blue-dp); margin: 0 0 1.15rem; line-height: 1.5;
}
.section--navy .eyebrow, .hero .eyebrow { color: var(--butter); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 3.5vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: .4em; }
.lead { font-size: clamp(1.04rem, 1.3vw, 1.18rem); color: var(--muted); line-height: 1.68; }
.section--navy .lead { color: #C6D2EE; }
/* ══ Buttons — pills ════════════════════════════════════════════════
Deliberately NOT painted. The paint on this site lives on the rules only;
buttons are clean pills. Keep them that way. */
.btn {
position: relative; display: inline-flex; align-items: center;
justify-content: center; gap: .55rem; padding: 1rem 2rem; border: 0;
background: var(--btn-fill, var(--blue)); border-radius: 999px;
font-family: var(--font); font-weight: 700; font-size: .97rem; line-height: 1.15;
text-decoration: none; cursor: pointer; white-space: normal; max-width: 100%; text-align: center;
transition: transform .16s ease, color .16s ease, background .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { --btn-fill: var(--butter); color: var(--deep-2); }
.btn--primary:hover { --btn-fill: var(--butter-dp); color: var(--deep-2); }
.btn--navy { --btn-fill: var(--deep); color: #fff; }
.btn--navy:hover { --btn-fill: var(--deep-3); color: #fff; }
/* the ghost is tinted dark, not light — a pale glass fill put white text at
3.9:1 — and has to be a lighter navy than the hero behind it to read */
.btn--ghost { --btn-fill: var(--deep-3); color: #fff; }
.btn--ghost:hover { --btn-fill: var(--deep); color: var(--butter); }
.btn--outline { --btn-fill: var(--wash-2); color: var(--deep); }
.btn--outline:hover { --btn-fill: var(--blue); color: #fff; }
.btn--lg { padding: 1.15rem 2.3rem; font-size: 1.02rem; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
/* ── Header ────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--deep); color: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* The wordmark is an ![]()
with its pale butter baked in, so hover recolours it
with a filter rather than swapping the file: saturate and darken slightly to
land on the site's brighter yellow. */
.brand img { transition: filter .16s ease; }
.brand:hover img { filter: saturate(3.4) brightness(.96) hue-rotate(-9deg); } /* #F1F5B5 -> #FFEB2A */
.brand__wide { height: 17px; width: auto; display: none; }
.brand__stack { height: 36px; width: auto; }
@media (min-width: 1300px) { .brand__wide { display: block; } .brand__stack { display: none; } }
.nav { display: flex; align-items: center; gap: 1.45rem; }
.nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; padding: .3rem 0; position: relative; white-space: nowrap; transition: color .15s; }
/* links are already white at rest, so hover moves to the accent yellow rather
than brightening — the current page keeps white plus the yellow underline */
.nav a:hover { color: var(--butter); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: var(--butter); }
.nav .btn { padding: .68rem 1.35rem; font-size: .89rem; }
/* Contact and Call sit together at the end of the nav as a pair */
.nav__cta { margin-left: .1rem; }
.nav a.btn--outline { --btn-fill: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42); }
.nav a.btn--outline:hover { --btn-fill: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.nav a.btn--outline[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--butter); color: var(--butter); }
.nav a.btn--outline::after { display: none; }
/* .nav a would otherwise win over the button colour and hide the label */
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--deep-2); }
.nav a.btn--navy, .nav a.btn--ghost { color: #fff; }
.nav .btn::after { display: none; }
.nav-toggle { display: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 999px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; }
.header-call { display: none; }
/* The desktop nav needs ~1075px before brand + links + phone button fit;
switching to it at 1001px made every page scroll sideways between
1001 and ~1075. The burger stays until 1099. */
@media (max-width: 1099px) {
.nav { position: fixed; top: var(--header-h); bottom: 0; left: 100%; width: 100%; visibility: hidden; background: var(--deep); flex-direction: column; align-items: stretch; gap: 0; padding: 1.25rem var(--gutter) 2.5rem; overflow-y: auto; transition: left .28s cubic-bezier(.4, 0, .2, 1); }
.nav.is-open { left: 0; visibility: visible; }
.nav a { font-size: 1.15rem; font-weight: 600; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.nav a[aria-current="page"]::after { display: none; }
.nav a[aria-current="page"] { color: var(--butter); }
.nav .btn { margin-top: 1.3rem; justify-content: center; font-size: 1.02rem; padding: 1.05rem 1.5rem; }
.nav-toggle { display: inline-flex; }
.header-call { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--butter); color: var(--deep-2); border-radius: 999px; margin-left: auto; }
.header-call svg { width: 21px; height: 21px; }
}
@media (max-width: 400px) { .brand__stack { height: 31px; } }
body.nav-open { overflow: hidden; }
/* ── Hero ──────────────────────────────────────────────────────────── */
/* Top padding is deliberately much tighter than the bottom so the headline
starts close under the header; .hero--page below resets both for inner pages. */
.hero { position: relative; background: var(--deep-2); color: #fff; overflow: hidden; padding-top: clamp(1.6rem, 2.8vw, 2.5rem); padding-bottom: clamp(3.25rem, 6vw, 5.25rem); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(96deg, rgba(21, 38, 80, .97) 0%, rgba(21, 38, 80, .94) 42%, rgba(21, 38, 80, .74) 72%, rgba(21, 38, 80, .42) 100%); }
.hero__grid { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1.14fr .86fr; }
/* Let grid columns shrink below their contents' intrinsic width on phones. */
.hero__grid > *, .split > *, .form-grid > * { min-width: 0; }
.hero h1 { color: #fff; margin-bottom: .55em; font-size: clamp(1.95rem, 3.4vw, 2.85rem); }
/* The headline is one question and its answer. Break between them, never
mid-clause — reading "Faded roof? Tired / stucco? We paint" is the bug this
fixes. Each half may still wrap on its own on a narrow screen. */
.hero h1 > span, .hero h1 > em { display: block; }
.hero .lead { color: #fff; max-width: 49ch; }
/* Four proof points, laid out 2x2 rather than left to wrap 3+1: a fixed
two-column grid keeps the block balanced at every hero width. */
.hero__proof { display: grid; grid-template-columns: repeat(2, max-content); gap: .6rem 2rem; margin-top: 1.9rem; font-size: .9rem; color: #fff; }
.hero__proof span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__proof svg { width: 16px; height: 16px; color: var(--butter); }
@media (max-width: 560px) { .hero__proof { grid-template-columns: 1fr; } }
.hero--page { padding-block: clamp(3rem, 5.6vw, 5rem); }
/* the service's own icon, above the label on its page hero */
.hero__badge { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 999px; background: rgba(247, 220, 62, .15); border: 1px solid rgba(247, 220, 62, .45); color: var(--butter); }
.hero__badge svg { width: 26px; height: 26px; }
.hero--page .hero__shade { background: linear-gradient(96deg, rgba(21, 38, 80, .97) 0%, rgba(21, 38, 80, .92) 52%, rgba(21, 38, 80, .7) 84%, rgba(21, 38, 80, .42) 100%); }
/* Wide enough that the headline uses the hero instead of stacking in a narrow
column against the left edge, still short enough to keep the photo readable. */
.hero--page h1 { max-width: 32ch; }
.hero--page .lead { max-width: 60ch; }
@media (max-width: 1000px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__shade { background: linear-gradient(180deg, rgba(21, 38, 80, .94) 0%, rgba(21, 38, 80, .91) 100%); }
}
/* ── Estimate form ─────────────────────────────────────────────────── */
.form-card { background: var(--white); color: var(--text); border-radius: var(--r-m); box-shadow: var(--sh-3); overflow: hidden; }
.form-card__head { background: var(--deep); color: #fff; padding: 1.3rem 1.5rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }
.form-card__head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule-h); background: var(--butter);
}
.form-card__head h2, .form-card__head h3 { color: #fff; margin: 0; font-size: 1.24rem; display: flex; align-items: center; gap: .55rem; }
.form-card__brush { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 999px; background: rgba(247, 220, 62, .16); color: var(--butter); }
.form-card__brush svg { width: 17px; height: 17px; }
.form-card__head small { color: var(--butter); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; text-align: right; line-height: 1.45; }
.form-card__body { padding: 1.6rem 1.5rem 1.5rem; }
.form-grid { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-weight: 700; font-size: .8rem; margin-bottom: .35rem; color: var(--deep); }
input, select, textarea {
width: 100%; font: inherit; font-size: 16px; padding: .78rem .9rem; color: var(--text);
border: 1px solid var(--line); border-radius: var(--r-s); background: #fff;
transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #9AA3BA; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
/* ...but a keyboard user still gets the full ring: outline:none above would
otherwise leave them with only a 1px border change. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--deep-2); outline-offset: 2px; box-shadow: 0 0 0 5px var(--butter);
}
textarea { min-height: 106px; resize: vertical; }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }
.form-status { margin-top: .85rem; padding: .72rem .95rem; border-radius: var(--r-s); font-weight: 600; font-size: .93rem; }
.form-status.is-error { background: #FDECEA; color: #B42318; }
.form-status.is-info { background: var(--wash-2); color: var(--deep); }
.form-done { padding: 2.25rem 1.5rem; text-align: center; }
.form-done h3 { color: #1E7F4F; }
.form-fine { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; line-height: 1.55; }
altcha-widget { --altcha-border-width: 0; --altcha-color-base: transparent; --altcha-color-text: var(--muted); display: block; font-size: .84rem; }
altcha-widget .altcha { border: 0; padding: 0; }
/* ── Trust strip ───────────────────────────────────────────────────── */
.trust { background: var(--white); border-bottom: 1px solid var(--line-soft); padding: 1.15rem 0; position: relative; }
.trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 2.5rem; font-size: .87rem; font-weight: 600; color: var(--text); }
/* Credential strip: the device every strong painting site puts directly under
the hero. Hairline separators between items read as one continuous strip
rather than a loose row of ticks. */
.trust li { display: inline-flex; align-items: center; gap: .45rem; position: relative; }
.trust li + li::before {
content: ""; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%);
width: 1px; height: 1.05em; background: var(--line);
}
@media (max-width: 780px) { .trust li + li::before { display: none; } }
.trust svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
/* ── Cards ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(1.1rem, 1.8vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; } }
.card {
--btn: 44px; /* the resting circle */
--more-w: 154px; /* the pill once it has opened */
position: relative; display: flex; flex-direction: column;
border-radius: var(--r-m); transition: transform .22s ease;
}
.card:hover { transform: translateY(-3px); }
.card__inner {
flex: 1; display: flex; flex-direction: column; overflow: hidden;
background: var(--wash); border-radius: var(--r-m);
transition: background .22s ease;
}
.section--cream .card__inner { background: var(--white); }
.card:hover .card__inner { background: var(--wash-2); }
.section--cream .card:hover .card__inner { background: var(--wash); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.card:hover .card__media img { transform: scale(1.045); }
/* the body leaves room for the pill, which is inset from the card's corner */
.card__body { padding: 1.35rem 1.4rem calc(var(--btn) + 2.3rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__kicker { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--blue-dp); display: flex; align-items: center; gap: .5rem; }
.card__icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--wash-2); color: var(--blue-ink); }
.section--cream .card__icon { background: var(--wash); }
.card__icon svg { width: 17px; height: 17px; }
.card:hover .card__icon { background: var(--blue); color: #fff; }
.card__icon, .card__icon svg { transition: background .18s ease, color .18s ease; }
.card h3 { margin: 0; }
.card h3 a { text-decoration: none; color: var(--deep); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card p { color: var(--muted); margin: 0; font-size: .94rem; line-height: 1.62; }
/* The pill sits INSIDE the card, inset from the bottom-left corner. At rest it
is a circle just big enough for the arrow; on hover the pill itself grows and
the label is revealed on the pill's own background, so the text is never
floating loose over the card. The arrow is pinned to the pill's right edge,
so widening the pill carries the arrow rightward.
An earlier version hung a bigger circle in a mask-cut notch on the card
corner: it overflowed the card and the label sat on the card, not on a
surface of its own. */
.card__more {
position: absolute; left: 1.3rem; bottom: 1.3rem; z-index: 2;
width: var(--btn); height: var(--btn); overflow: hidden; pointer-events: none;
border-radius: 999px; background: var(--white); border: 1px solid var(--line);
transition: width .34s cubic-bezier(.4, 0, .2, 1), background .26s ease, border-color .26s ease;
}
.section--cream .card__more { background: var(--wash); }
/* Both children are pinned, not laid out by flex. With flex, the label and the
arrow together overflow the 44px resting pill, and Chrome's "safe" alignment
spills the overflow off the END — which pushed the arrow out of view and left
an empty circle. Anchoring the arrow to the pill's right edge instead means
widening the pill carries the arrow along, and the label stays clipped
outside until there is room for it. */
.card__arrow {
position: absolute; right: 0; top: 0;
width: var(--btn); height: var(--btn);
display: grid; place-items: center; color: var(--deep);
transition: color .26s ease;
}
.card__more-txt {
position: absolute; right: var(--btn); top: 50%; transform: translateY(-50%);
padding-left: 1.05rem; font-weight: 700; font-size: .88rem; line-height: 1;
color: var(--blue-ink); white-space: nowrap; opacity: 0;
transition: opacity .16s ease, color .26s ease;
}
.card__arrow svg { width: 17px; height: 17px; }
.card:hover .card__more, .card:focus-within .card__more {
width: var(--more-w); background: var(--blue); border-color: var(--blue);
transition: width .42s cubic-bezier(.22, .8, .3, 1), background .26s ease, border-color .26s ease;
}
.card:hover .card__more-txt, .card:focus-within .card__more-txt {
opacity: 1; color: #fff; transition: opacity .26s ease .12s, color .26s ease;
}
.card:hover .card__arrow, .card:focus-within .card__arrow { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.card__more { width: var(--more-w); }
.card__more-txt { opacity: 1; }
.card, .card__inner, .card__more, .card__more-txt, .card__arrow, .card__media img { transition: none; }
}
/* ── Lists ─────────────────────────────────────────────────────────── */
.sign-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.sign-list li { position: relative; padding-left: 1.45rem; }
.sign-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 9px; background: var(--blue); border-radius: 2px; }
/* ── Split feature ─────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(2.25rem, 5vw, 4.25rem); align-items: center; grid-template-columns: 1fr 1fr; }
.split--wide-media { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 940px) { .split, .split--wide-media { grid-template-columns: 1fr; } }
.frame { position: relative; }
/* The Why section's photo tracks the reading column on desktop.
A sticky element can only travel inside its containing block, so the photo
cannot be the grid item itself: .split centres its items, and align-self
start shrinks the item to the photo's own height, leaving zero travel. The
wrapper stretches to the full row height and the photo sticks inside it. */
@media (min-width: 941px) {
#why .why__media { align-self: stretch; }
#why .why__media .frame { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.frame img, .frame video { border-radius: var(--r-m); box-shadow: var(--sh-2); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame::before { content: ""; position: absolute; left: -13px; top: 24px; bottom: 24px; width: 7px; background: var(--blue); border-radius: 4px; }
.frame--navy::before { background: var(--butter-dp); }
.stat-badge { position: absolute; left: -.9rem; bottom: -.9rem; background: var(--deep); color: #fff; padding: 1rem 1.3rem; border-radius: var(--r-m); box-shadow: var(--sh-2); display: flex; align-items: baseline; gap: .6rem; }
.stat-badge strong { font-size: 1.8rem; font-weight: 800; color: var(--butter); line-height: 1; }
.stat-badge span { font-size: .8rem; color: #B4C2E2; max-width: 12ch; line-height: 1.35; }
@media (max-width: 620px) { .stat-badge { left: 0; bottom: -.5rem; } .frame::before { display: none; } }
/* ── Why grid ──────────────────────────────────────────────────────── */
.why { display: grid; gap: 1.7rem 2.1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .why { grid-template-columns: 1fr; } }
.why__item { display: grid; grid-template-columns: 40px 1fr; gap: .95rem; align-items: start; }
.why__icon { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--wash); border: 1px solid var(--line); color: var(--blue-dp); display: grid; place-items: center; }
.why__icon svg { width: 20px; height: 20px; }
.why__item h3 { font-size: 1.04rem; margin-bottom: .2rem; }
.why__item p { color: var(--muted); margin: 0; font-size: .92rem; line-height: 1.62; }
/* ── Process ───────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1.15rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 1.8rem 1.55rem 1.9rem; border-radius: var(--r-m); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; }
.step__n { font-size: 1.85rem; font-weight: 800; color: var(--butter); line-height: 1; margin-bottom: .3rem; }
.step__n::after {
content: ""; display: block; width: 34px; height: var(--rule-h); margin-top: .6rem;
background: var(--butter); border-radius: 2px;
}
.step h3 { color: #fff; font-size: 1.08rem; margin-bottom: .4rem; }
.step p { color: #C6D2EE; margin: 0; font-size: .92rem; line-height: 1.62; }
.step__icon { position: absolute; right: 1.15rem; top: 1.2rem; width: 24px; height: 24px; color: #fff; opacity: .2; pointer-events: none; }
.step__icon svg { width: 100%; height: 100%; }
/* ── Before / after ────────────────────────────────────────────────── */
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-m); background: var(--deep-2); box-shadow: var(--sh-1); --pos: 50%; user-select: none; }
.ba--portrait { aspect-ratio: 3 / 4; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--butter); transform: translateX(-50%); pointer-events: none; }
.ba__handle::after {
content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%;
background: var(--butter); transform: translate(-50%, -50%); box-shadow: 0 4px 16px rgba(21, 38, 80, .4);
background-image: url("data:image/svg+xml;utf8,");
background-size: 21px; background-repeat: no-repeat; background-position: center;
}
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ba__label { position: absolute; top: .75rem; padding: .28rem .62rem; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 3px; pointer-events: none; background: rgba(21, 38, 80, .78); color: #fff; backdrop-filter: blur(6px); }
.ba__label--before { left: .75rem; }
.ba__label--after { right: .75rem; background: var(--butter); color: var(--deep-2); }
.ba-item { margin: 0; }
.ba-item figcaption { margin-top: .8rem; font-weight: 700; font-size: .94rem; color: var(--deep); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ba-item figcaption span { font-weight: 400; font-size: .8rem; color: var(--muted); }
.ba-grid { display: grid; gap: clamp(1.1rem, 1.8vw, 1.75rem); grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 1000px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ba-grid { grid-template-columns: 1fr; } }
/* ── Video ─────────────────────────────────────────────────────────── */
.reel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem var(--gutter) 1.35rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.reel::-webkit-scrollbar { height: 6px; }
.reel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* The reel is a flex row, so every card stretches to the tallest one. Sizing
the landscape clips by aspect-ratio therefore left the bottom half of their
card as empty navy. Fix the card HEIGHT for the whole row and let each video
cover it: portrait clips fill it natively, landscape ones just get a wider
card and a modest horizontal crop. */
.reel { --card-w: min(250px, 68vw); --card-h: calc(var(--card-w) * 16 / 9); }
.reel__item { flex: 0 0 auto; width: var(--card-w); height: var(--card-h); scroll-snap-align: start; position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--deep-2); box-shadow: var(--sh-1); }
.reel__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__item--wide { width: min(calc(var(--card-h) * 1.26), 84vw); }
.reel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .85rem; background: linear-gradient(180deg, transparent, rgba(21, 38, 80, .93)); color: #fff; font-size: .81rem; font-weight: 600; line-height: 1.4; pointer-events: none; }
.video-block { position: relative; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-1); background: var(--deep-2); }
.video-block video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-block--portrait video { aspect-ratio: 9 / 16; max-height: 620px; }
.video-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
.video-grid .video-block video { aspect-ratio: 9 / 16; }
.video-grid .video-block--wide { grid-column: span 2; }
.video-grid .video-block--wide video { aspect-ratio: 16 / 9; height: 100%; }
.video-block .vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.1rem .9rem .8rem; background: linear-gradient(180deg, transparent, rgba(21, 38, 80, .9)); color: #fff; font-size: .81rem; font-weight: 600; line-height: 1.4; pointer-events: none; }
.play-hint { position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .3rem; background: rgba(21, 38, 80, .7); color: var(--butter); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .5rem; border-radius: 3px; pointer-events: none; backdrop-filter: blur(6px); }
.play-hint svg { width: 10px; height: 10px; }
/* ── Reviews ───────────────────────────────────────────────────────── */
.rv-aggregate { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.3rem; }
.rv-source { display: flex; align-items: center; gap: .85rem; background: var(--white); color: var(--text); padding: 1rem 1.25rem; border-radius: var(--r-m); text-decoration: none; border: 1px solid var(--line-soft); box-shadow: var(--sh-1); flex: 1 1 250px; transition: border-color .18s, box-shadow .18s, transform .18s; }
.rv-source:hover { border-color: var(--line); box-shadow: var(--sh-2); transform: translateY(-2px); color: var(--text); }
.rv-source__logo { width: 36px; height: 36px; border-radius: var(--r-s); background: var(--wash); border: 1px solid var(--line-soft); display: grid; place-items: center; flex: none; }
.rv-source__logo svg { width: 20px; height: 20px; }
.rv-source strong { font-size: 1.45rem; font-weight: 800; color: var(--deep); line-height: 1; }
.rv-source .stars { color: var(--blue-ink); letter-spacing: .04em; font-size: .8rem; margin-left: .3rem; }
.rv-source small { display: block; color: var(--muted); font-size: .79rem; margin-top: .2rem; }
.rv-grid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rv-grid { grid-template-columns: 1fr; } }
.grid--2 .rv-grid, .sidebar .rv-grid { grid-template-columns: 1fr; }
.grid--2 .rv-aggregate { display: none; }
.rv-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 1.4rem 1.4rem 1.3rem; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: .65rem; }
.rv-card[hidden] { display: none; }
.rv-head { display: flex; align-items: center; gap: .75rem; }
.rv-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--deep); color: var(--butter); display: grid; place-items: center; font-weight: 700; font-size: .9rem; overflow: hidden; }
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-author { font-weight: 700; color: var(--deep); line-height: 1.25; font-size: .95rem; }
.rv-date { font-size: .79rem; color: var(--muted); }
.rv-stars { color: var(--blue-ink); letter-spacing: .06em; font-size: .95rem; }
.rv-rec { display: inline-flex; align-items: center; gap: .35rem; color: #1E7F4F; font-weight: 700; font-size: .87rem; }
.rv-text { margin: 0; color: var(--text); font-size: .94rem; line-height: 1.66; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; }
.rv-more { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--blue-ink); cursor: pointer; font: inherit; font-size: .87rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rv-more[hidden] { display: none; }
.rv-src { margin-top: auto; padding-top: .7rem; font-size: .79rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; border-top: 1px solid var(--line-soft); }
.rv-src svg { width: 14px; height: 14px; }
.rv-src:hover { color: var(--deep); }
.rv-pg { display: flex; justify-content: center; gap: .4rem; margin-top: 2.1rem; flex-wrap: wrap; }
.rv-pg button { font: inherit; font-size: .89rem; font-weight: 700; padding: .55rem .95rem; border: 1px solid var(--line); background: var(--white); color: var(--deep); border-radius: 999px; cursor: pointer; min-width: 42px; transition: background .15s, color .15s, border-color .15s; }
.rv-pg button:hover:not(:disabled) { border-color: var(--blue); }
.rv-pg button[aria-current="page"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.rv-pg button:disabled { opacity: .35; cursor: default; }
noscript .rv-card .rv-text { display: block; -webkit-line-clamp: unset; }
/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 3rem 1.3rem 0; font-weight: 700; font-size: 1.05rem; color: var(--deep); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-dp); }
/* The +/- was two swapped background images, so it changed in one frame. Two real
bars instead: the upright one rotates down onto the flat one. */
.faq summary::after {
content: ""; position: absolute; right: .35rem; top: 50%; width: 26px; height: 26px; margin-top: -13px;
border: 1px solid var(--line); border-radius: 50%;
background-image: linear-gradient(var(--deep-2), var(--deep-2));
background-size: 13px 2px; background-position: center; background-repeat: no-repeat;
transition: background-color .26s ease, border-color .26s ease;
}
.faq summary::before {
content: ""; position: absolute; right: calc(.35rem + 12px); top: 50%; z-index: 1;
width: 2px; height: 13px; margin-top: -6.5px; border-radius: 2px; background: var(--deep-2);
transition: transform .34s cubic-bezier(.22, .8, .3, 1);
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details[open] summary::after { background-color: var(--butter); border-color: var(--butter); }
/* Animate the native disclosure box. interpolate-size makes the 0 -> auto height
animatable and allow-discrete keeps the panel painted while it closes. Browsers
without ::details-content skip all of this and open instantly, as before. */
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.faq details::details-content {
block-size: 0; overflow: hidden;
transition: block-size .36s cubic-bezier(.22, .8, .3, 1), content-visibility .36s;
transition-behavior: allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq .faq__a { padding: 0 3rem 1.4rem 0; color: var(--muted); max-width: 68ch; }
.faq .faq__a p { margin: 0; }
.faq h3 { margin: 2.5rem 0 .4rem; font-size: 1.22rem; }
/* ── Service areas ─────────────────────────────────────────────────── */
.area-search { position: relative; max-width: 470px; margin: 0 0 1.5rem; }
.area-search input { padding-left: 2.75rem; }
.area-search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.area-count { font-size: .86rem; color: var(--muted); margin: -.9rem 0 1.8rem; }
.county { margin-bottom: 2.1rem; }
.county h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--blue-dp); margin-bottom: .35rem; }
.county h3::after {
content: ""; display: block; width: 100%; max-width: 340px; height: 1px; margin-top: .55rem;
background: linear-gradient(90deg, var(--blue) 0 46px, var(--line) 46px 100%);
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: .85rem 0 0; }
.chips a { display: inline-block; padding: .45rem .95rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--deep); font-weight: 600; font-size: .88rem; transition: background .15s, border-color .15s, color .15s; }
.chips a:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.chips li[hidden], .county[hidden] { display: none; }
/* ── Gallery ───────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.9rem; }
.filters button { font: inherit; font-size: .87rem; font-weight: 700; padding: .52rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--deep); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.filters button:hover { border-color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.photo-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
.photo-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-s); background: var(--wash-2); position: relative; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.photo-grid a:hover img { transform: scale(1.06); }
.photo-grid [hidden] { display: none; }
.lightbox { position: fixed; inset: 0; background: rgba(15, 26, 56, .95); z-index: 200; display: grid; place-items: center; padding: 1.25rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 84vh; max-width: 94vw; width: auto; border-radius: var(--r-s); box-shadow: var(--sh-3); }
.lightbox figcaption { color: rgba(255, 255, 255, .82); text-align: center; margin-top: 1rem; font-size: .89rem; }
.lightbox button { position: absolute; top: 1.25rem; right: 1.25rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.4rem; cursor: pointer; backdrop-filter: blur(8px); }
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); left: 1.25rem; right: auto; }
.lightbox .lb-next { left: auto; right: 1.25rem; }
/* ── Call to action ────────────────────────────────────────────────── */
.cta-band { background: var(--deep); color: #C7D3EE; padding-block: clamp(3.1rem, 5.5vw, 4.75rem); position: relative; }
.cta-band .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.9rem; }
.cta-band h2 { color: #fff; margin: 0 0 .35rem; }
.cta-band p { margin: 0; font-size: 1rem; max-width: 46ch; color: #A9B8DD; }
.cta-band .splat { display: none; }
.phone-big { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.phone-big:hover { color: var(--butter); }
.phone-big svg { width: .78em; height: .78em; color: var(--butter); }
/* ── Long-form content ─────────────────────────────────────────────── */
.prose { max-width: 68ch; font-size: 1.02rem; }
.prose > p { color: var(--text); }
.prose h2 { margin-top: 2.75rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.prose h3 { margin-top: 1.8rem; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.prose ul li { position: relative; padding-left: 1.45rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 9px; background: var(--blue); border-radius: 2px; }
.prose img { border-radius: var(--r-m); }
/* The sidebar held a 348px card with 1.5rem of padding each side, so the paired
Name/Phone fields rendered ~143px wide and the card heading wrapped, while the
column gap grew to 64px beside it. Give the width to the form instead. */
.service-layout { display: grid; gap: clamp(2rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 1fr) 392px; align-items: start; }
.service-layout .form-card__head, .service-layout .form-card__body { padding-inline: 1.25rem; }
@media (max-width: 1000px) { .service-layout { grid-template-columns: 1fr; } }
.sidebar { position: sticky; top: calc(var(--header-h) + 1.25rem); display: grid; gap: 1.1rem; }
.side-box { background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 1.4rem; }
.side-box h3 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--blue-dp); margin-bottom: .9rem; }
.side-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.side-box a { display: inline-block; padding: .2rem 0; min-height: 24px; text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--deep); }
.side-box a:hover { color: var(--blue); }
.side-box a[aria-current="page"] { color: var(--blue-dp); }
.mini-gallery { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); margin: 2rem 0; }
.mini-gallery img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); width: 100%; }
.breadcrumb { font-size: .83rem; color: rgba(255, 255, 255, .6); margin-bottom: 1.3rem; }
.breadcrumb a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .45; }
.breadcrumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.badge-row, .prose .badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.badge-row li { background: var(--wash); border: 1px solid var(--line); color: var(--deep); padding: .45rem 1rem; border-radius: 999px; font-size: .83rem; font-weight: 600; }
.prose .badge-row li { padding: .45rem .95rem; }
.prose .badge-row li::before { display: none; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.35rem; }
.info-list li { display: grid; grid-template-columns: 38px 1fr; gap: .9rem; align-items: start; }
.info-list a { display: inline-block; padding: .15rem 0; min-height: 24px; }
.info-list svg { width: 38px; height: 38px; padding: 9px; background: var(--wash); border: 1px solid var(--line); color: var(--blue-dp); border-radius: var(--r-s); }
.info-list strong { display: block; color: var(--deep); font-size: .94rem; margin-bottom: .1rem; }
.info-list a { text-decoration: none; font-weight: 600; }
.map-embed { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line-soft); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }
.nearby { columns: 3; column-gap: 2.25rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 720px) { .nearby { columns: 2; } }
.nearby li { break-inside: avoid; padding: .3rem 0; }
.nearby a { text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--deep); display: inline-block; padding: .2rem 0; min-height: 24px; }
.nearby a:hover { color: var(--blue); }
/* ── Reveal ────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--deep-2); color: #BAC6E2; padding: clamp(3.5rem, 5vw, 4.75rem) 0 0; position: relative; }
.site-footer a { color: rgba(255, 255, 255, .93); text-decoration: none; }
.site-footer a:hover { color: var(--butter); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3 { color: var(--butter); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .93rem; }
/* links in these lists are navigation, not inline prose, so they need to meet
the 24px minimum target size */
.site-footer ul a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.footer-bottom a { display: inline-block; padding: .2rem 0; min-height: 24px; }
.brand { min-height: 28px; }
.site-footer p { margin: 0 0 .75rem; font-size: .93rem; line-height: 1.65; }
.footer-brand .brand { margin-bottom: 1.35rem; }
.footer-brand .brand__stack { height: 38px; display: block; }
.footer-brand .brand__wide { display: none; }
.social { display: flex; gap: .5rem; margin-top: 1.3rem; }
.social a { width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s, color .15s; }
.social a:hover { background: var(--butter); border-color: var(--butter); color: var(--deep-2); }
.social svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 3rem; padding: 1.35rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .83rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; color: #8496C1; }
.footer-bottom a { color: #98A8CE; }
.footer-note { font-size: .83rem; color: #A6B4D8; }
/* ── Mobile call bar ───────────────────────────────────────────────── */
/* ── 404 ───────────────────────────────────────────────────────────── */
.notfound { min-height: 58vh; display: grid; place-items: center; text-align: center; }
.notfound h1 { font-size: clamp(3.5rem, 9vw, 5.5rem); color: var(--blue); margin: 0 0 .15em; }
.notfound h2 { font-size: clamp(1.3rem, 2.4vw, 1.95rem); }