/* Public site — Demo 1 "The Classic", Navy & Terra Cotta (Sarah's pick, 2026-10-06).
   Self-hosted fonts, no framework, no script: nothing is fetched from another host.
   Readability first (her brief): 19px body, large links, nothing hidden behind a menu or tab. */

@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-serif-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/dm-serif-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/libre-franklin-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/libre-franklin-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/libre-franklin-latin-600-normal.woff2') format('woff2'); }

:root {
    --navy: #1F3A5F;        /* logo, headings, nav, footer */
    --ivory: #FAF6EF;       /* page background */
    --sand: #EFE4D2;        /* alternate sections */
    --terra: #B4532F;       /* buttons (white text 5.0:1) */
    --terra-deep: #9C4526;  /* text links / labels (5.9:1 on ivory) */
    --ink: #1B2536;         /* body text */
    --slate: #44506A;       /* secondary text (7.5:1) */
    --warm-white: #FFFDF9;
    --rule: #E3D8C6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
html, body { margin: 0; max-width: 100%; overflow-x: clip; }
body { font-family: 'Libre Franklin', Arial, sans-serif; font-size: 19px; line-height: 1.7; color: var(--ink); background: var(--ivory); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.2; color: var(--navy); margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--terra-deep); }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.skip-link { position: absolute; left: 1rem; top: -100px; background: var(--ink); color: var(--ivory); padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { top: .5rem; color: var(--ivory); }

/* ---- Header: big logo; links in a row on wide screens, behind a Menu button on phones ---- */
.site-header { background: var(--ivory); border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.site-header .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
/* Edge to edge: the header ignores the 1180px column and runs the full width, with a gutter. */
.site-header .container { max-width: none; padding: 0 clamp(20px, 4vw - 28px, 48px); }
.site-nav ul { justify-content: center; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; min-width: 0; }
/* Sized by height, as Demo 1 does: 84px, 72px at 992–1199px, 60px on phones. */
.brand img { height: 84px; width: auto; max-width: 100%; }
@media (min-width: 992px) and (max-width: 1199px) { .brand img { height: 72px; } }
.brand__place { font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border-left: 1px solid var(--rule); padding-left: 1rem; white-space: nowrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.site-nav a { display: block; padding: .6rem .9rem; font-size: 1.1rem; font-weight: 600; color: var(--navy); text-decoration: none; border-radius: 4px; }
.site-nav a:hover { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 4px; }
.site-nav a[aria-current="page"], .site-nav a[aria-current="true"] { color: var(--terra-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav .site-nav__cta { background: var(--terra); color: #fff; margin-left: .5rem; }
.site-nav .site-nav__cta:hover { background: var(--navy); color: #fff; text-decoration: none; }
/* Wide screens: logo left, links right, one row — Demo 1's header. Six links leave ~16px spare at
   1180px, so the row may wrap (nav drops below) rather than overflow if a font renders wider.
   The header is full width now, so in practice there is far more room than that. */
@media (min-width: 1200px) {
    .site-header .container { flex-direction: row; flex-wrap: wrap; justify-content: space-between; column-gap: 0; }
    .brand { gap: .75rem; }
    .brand__place { padding-left: .75rem; }
    .site-nav ul { gap: 0; }
    .site-nav a { padding: .5rem .55rem; font-size: 1.05rem; white-space: nowrap; }
    .site-nav .site-nav__cta { margin-left: .4rem; padding: .5rem .9rem; }
}
/* Seven items (once "Our Work" appears): a little tighter until there is room, so the row still fits at 1200. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .site-nav ul:has(> li:nth-child(7)) a { padding-inline: .35rem; font-size: .97rem; }
    .site-nav ul:has(> li:nth-child(7)) .site-nav__cta { padding-inline: .8rem; }
    .site-header:has(.site-nav li:nth-child(7)) .brand { gap: .5rem; }
    .site-header:has(.site-nav li:nth-child(7)) .brand__place { padding-left: .5rem; }
}

/* ---- Sections ---- */
.section { padding: 5.5rem 0; }
.section--sand { background: var(--sand); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.label { font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-deep); margin-bottom: .75rem; }
.heading { font-size: 2.7rem; }
.lede { font-size: 1.15rem; color: var(--slate); max-width: 46rem; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: center; }
.split--even { grid-template-columns: 1fr 1fr; align-items: start; }
.split--middle { align-items: center; }

/* ---- Buttons ---- */
.btn { display: inline-block; font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; text-decoration: none; padding: .95rem 2rem; border-radius: 3px; border: 2px solid var(--terra); text-align: center; }
.btn--solid { background: var(--terra); color: var(--warm-white); }
.btn--solid:hover { background: var(--navy); border-color: var(--navy); color: var(--warm-white); }
.btn--line { background: transparent; color: var(--terra-deep); border-color: var(--terra-deep); }
.btn--line:hover { background: var(--terra); border-color: var(--terra); color: var(--warm-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---- Hero ---- */
.hero { padding: 4.5rem 0 5rem; }
.hero h1 { font-size: 3.4rem; line-height: 1.1; }
.hero p { font-size: 1.2rem; color: var(--slate); max-width: 28rem; margin-bottom: 2rem; }
.hero__img { width: 100%; height: 520px; object-fit: cover; border-radius: 2px; }
.hero__call { margin-top: 1.25rem; font-size: 1.1rem; }
.hero__call a { font-weight: 600; color: var(--navy); }

/* ---- About ---- */
.about__img { width: 100%; height: 460px; object-fit: cover; border-radius: 2px; }
.quote { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 1.6rem; line-height: 1.45; color: var(--navy); border-left: 2px solid var(--terra); padding-left: 1.5rem; margin: 2.25rem 0 0; }
.quote cite { display: block; font-family: 'Libre Franklin', Arial, sans-serif; font-style: normal; font-size: .9rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-top: .75rem; }

/* ---- Services ---- */
.featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; }
.featured img { width: 100%; height: 220px; object-fit: cover; border-radius: 2px; margin-bottom: 1.25rem; }
.card { background: var(--warm-white); border: 1px solid var(--rule); border-radius: 3px; padding: 1.5rem; }
.card h3, .featured h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.card p, .featured p { color: var(--slate); margin: 0; }
.card h2 { font-size: 1.45rem; margin-bottom: .5rem; }

/* ---- Process (from Demo 2, in Demo 1's dress) ---- */
.process { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; counter-reset: step; }
.process li { counter-increment: step; border-top: 2px solid var(--terra); padding-top: 1.25rem; }
.process li::before { content: counter(step, decimal-leading-zero); display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 2.4rem; line-height: 1; color: var(--terra-deep); margin-bottom: .75rem; }
.process h3, .process h2 { font-family: 'Libre Franklin', Arial, sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .5rem; }
.process p { color: var(--slate); margin: 0; }
.process-cta { margin-top: 3rem; }
.process-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; }
.process-intro .lede { margin: 0; }
.process-intro__img { width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; border-radius: 2px; }

/* "Read more →" links from Home to each page */
.more { margin: 2rem 0 0; font-size: 1.15rem; font-weight: 600; }
.more a { color: var(--terra-deep); text-underline-offset: 4px; }

/* ---- FAQ: native disclosure, no script ---- */
/* FAQ (2026-10-07): each question is a card with a round +/− toggle — a big, obvious target. */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--warm-white); border: 1px solid var(--rule); border-radius: 4px; transition: border-color .15s ease, box-shadow .15s ease; }
.faq details:hover { border-color: #CFC3AF; }
.faq details[open] { border-color: var(--rule); border-left: 3px solid var(--terra); box-shadow: 0 2px 10px rgba(31, 58, 95, .06); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-size: 1.15rem; font-weight: 600; color: var(--navy); border-radius: 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--terra); color: var(--terra-deep);
    /* Plus drawn as two bars (a text '+' sits off-centre in the circle); open hides the vertical bar. */
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
                linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    transition: background-color .15s ease, color .15s ease, background-size .25s cubic-bezier(.2, .8, .2, 1); }
.faq summary:hover::after { background-color: var(--terra); color: #fff; }
.faq details[open] summary { color: var(--terra-deep); }
.faq details[open] summary::after { background-size: 12px 2px, 2px 0; background-color: var(--terra); color: #fff; }
/* The answer fades up as its card opens (the height itself is animated by site.js). */
.faq details[open] > :not(summary) { animation: faq-reveal .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .faq details, .faq summary::after { transition: none; }
    .faq details[open] > :not(summary) { animation: none; }
}
.faq details p { color: var(--slate); padding: 0 1.25rem; margin: 0 0 1.1rem; max-width: 42rem; }
.faq details p:first-of-type { padding-top: .1rem; }

/* Three topic groups: heading on the left, its questions on the right (stacks on tablets/phones). */
.faq-groups { padding-bottom: 5.5rem; }
.faq-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 3rem; align-items: start; padding: 2.5rem 0; border-top: 1px solid var(--rule); }
.faq-group:first-child { border-top: 0; padding-top: .5rem; }
.faq-group h2 { font-size: 1.8rem; margin: .6rem 0 0; }
@media (max-width: 991px) {
    .faq-group { grid-template-columns: minmax(0, 1fr); }
    .faq-group h2 { margin-top: 0; }
}
@media (max-width: 640px) {
    .faq-groups { padding-bottom: 4rem; }
    .faq summary { padding: 1rem; font-size: 1.05rem; }
    .faq details p { padding: 0 1rem; }
}

/* ---- Contact ---- */
.detail { margin-bottom: 1.6rem; }
.detail__label { font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-deep); margin-bottom: .25rem; }
.detail p { margin: 0; font-size: 1.15rem; }
.detail a { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.contact-actions { display: grid; gap: 1rem; margin-top: 2rem; max-width: 26rem; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: #E9DFCD; padding: 3rem 0; font-size: 1rem; }
.site-footer a { color: #E9DFCD; }
.site-footer a:hover { color: #fff; }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
/* The logo carries its own blue panel — no plate needed on navy. */
.footer-logo { width: 260px; max-width: 100%; height: auto; }
.footer-links { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-credit { width: 100%; font-size: .9rem; color: #B9C4D6; margin: 0; }
.footer-credit a { color: #B9C4D6; }
.footer-credit__by { display: block; margin-top: .35rem; }

/* ---- Home "Our story": text only, heading beside the story; quieter than the hero ---- */
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }
.story__grid .heading { margin: 0; }
.story__text > p:first-child { font-size: 1.15rem; line-height: 1.7; color: var(--ink); max-width: 36rem; }
.story__text { padding-top: 2.6rem; }                   /* first line level with the heading, not the label */
.story__text .quote { margin-top: 1.75rem; }
@media (max-width: 991px) {
    .story__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .story__text { padding-top: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .split, .split--even { grid-template-columns: 1fr; gap: 2rem; }
    .process-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .hero { padding: 3rem 0 4rem; }
    .hero h1 { font-size: 2.6rem; }
    .hero__img { height: 360px; }
    .about__img { height: 320px; }
    .heading { font-size: 2.1rem; }
    .featured { grid-template-columns: 1fr; }
    .featured img { height: 260px; }
    .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    body { font-size: 18px; }
    .section { padding: 4rem 0; }
    .hero h1 { font-size: 2.2rem; }
    .hero__img { height: 260px; }
    .heading { font-size: 1.85rem; }
    .quote { font-size: 1.25rem; }
    .process { grid-template-columns: 1fr; }
    .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
.nowrap { white-space: nowrap; }

/* ---- Services page (2026-10-07): one row per service, customer groups (facts use `.figures`) ---- */
.section--tight { padding-bottom: 2.5rem; }


.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3rem 0; border-top: 1px solid var(--rule); }
.service-row:first-child { border-top: 0; padding-top: 0; }
.service-row:last-child { padding-bottom: 0; }
.service-row:nth-child(even) img { order: 2; }
.service-row img { width: 100%; aspect-ratio: 7 / 4; object-fit: cover; border-radius: 2px; }
.service-row h2 { font-size: 2rem; scroll-margin-top: 1.5rem; }
.service-row p { color: var(--slate); font-size: 1.1rem; max-width: 30rem; margin-bottom: 1.5rem; }

.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.groups > div { background: var(--warm-white); border: 1px solid var(--rule); border-left: 3px solid var(--terra); padding: 1.4rem 1.5rem; }
.groups h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.groups p { color: var(--slate); margin: 0; }
.groups .groups__feature { background: var(--navy); border-left-color: var(--terra); }
.groups .groups__feature h3 { color: #fff; }
.groups .groups__feature p { color: #E9DFCD; margin-bottom: 1.25rem; }

@media (max-width: 991px) {
    .service-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
    .service-row:nth-child(even) img { order: 0; }
    .groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .groups { grid-template-columns: 1fr; }
    .service-row h2 { font-size: 1.6rem; }
}

/* ---- Contact page (2026-10-07): forms left, shop details right ---- */

.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3.5rem; align-items: start; padding-bottom: 5.5rem; }
.contact-forms > section { scroll-margin-top: 1.5rem; }
.contact-forms > section + section { margin-top: 3.5rem; }
.contact-forms h2 { font-size: 2rem; margin-bottom: .4rem; }
.contact-forms .lede { margin-bottom: 1.5rem; }

.contact-forms .card { background: var(--warm-white); border: 1px solid var(--rule); border-radius: 4px; padding: 2rem; }
.contact-forms label { display: block; font-weight: 600; color: var(--navy); margin: 1.25rem 0 .4rem; }
.contact-forms .card > label:first-of-type { margin-top: 0; }
.contact-forms label .opt, .contact-forms legend .opt { font-weight: 400; color: var(--slate); }
.contact-forms label .req { font-weight: 400; color: var(--terra-deep); }
.contact-forms input, .contact-forms textarea, .contact-forms select { display: block; width: 100%; font: inherit; color: var(--ink); background: #fff; padding: .75rem .9rem; border: 2px solid #CFC3AF; border-radius: 4px; }
.contact-forms input:focus, .contact-forms textarea:focus, .contact-forms select:focus { outline: 3px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
.contact-forms textarea { min-height: 9rem; resize: vertical; }
.contact-forms input[type=file] { padding: .6rem; }
.contact-forms fieldset { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.contact-forms legend { font-weight: 600; color: var(--navy); padding: 0; margin-bottom: .4rem; }
.contact-forms .choice { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; color: var(--ink); margin: .5rem 0; }
.contact-forms .choice input { width: 1.3rem; height: 1.3rem; margin: .25rem 0 0; flex: none; padding: 0; }
.contact-forms .hint { margin: .4rem 0 0; color: var(--slate); font-size: 1rem; }
.contact-forms .error { color: #A32A2A; margin: .4rem 0 0; font-size: 1rem; }
.contact-forms [aria-invalid="true"] { border-color: #A32A2A; }
.contact-forms button { margin-top: 1.75rem; width: 100%; font: inherit; font-weight: 600; font-size: 1.15rem; padding: 1rem 1.25rem; cursor: pointer; color: #fff; background: var(--terra); border: 0; border-radius: 4px; }
.contact-forms button:hover, .contact-forms button:focus-visible { background: var(--navy); }
.notice { padding: 1rem 1.15rem; border-radius: 4px; margin: 0 0 1.25rem; font-weight: 600; }
.notice--ok { background: #DDEEE3; color: #2F6B4A; }
.notice--bad { background: #F6DEDE; color: #A32A2A; }
/* The honeypot: off-screen, not `display:none`, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-aside { position: sticky; top: 1.5rem; display: grid; gap: 1.5rem; }
.aside-card { background: var(--warm-white); border: 1px solid var(--rule); border-top: 3px solid var(--navy); border-radius: 4px; padding: 1.75rem; }
.aside-card--sand { background: var(--sand); border-top-color: var(--terra); }
.aside-card h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.aside-card .detail:last-child { margin-bottom: 0; }
.aside-card .detail p + p { margin-top: .35rem; }
.next-steps { margin: 0 0 1.25rem; padding-left: 1.4rem; color: var(--slate); }
.next-steps li { margin-bottom: .6rem; padding-left: .25rem; }
.next-steps li::marker { color: var(--terra-deep); font-weight: 600; }
.aside-card--sand p:last-child { margin: 0; font-weight: 600; }

@media (max-width: 991px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-bottom: 4rem; }
    .contact-aside { position: static; }
}
@media (max-width: 640px) {
    .contact-forms .card, .aside-card { padding: 1.25rem; }
    .contact-forms h2 { font-size: 1.65rem; }
}

/* ---- Phone menu (2026-10-07): logo left, Menu button right, links drop down full width ----
   The button only shows once site.js has run (it removes `hidden`), and the links are only
   collapsed under `.js`, so a failed script leaves a plain visible list, never a dead button. */
.menu-toggle { display: none; }
@media (max-width: 767px) {
    .site-header { padding: .75rem 0; }
    /* No row gap: the closed menu is a zero-height row and must not leave a gap under the logo. */
    .site-header .container { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .75rem; }
    .brand { flex: 1 1 0; min-width: 0; }
    .brand img { height: auto; width: 85%; max-width: 221px; }   /* 15% smaller than the full row (Vince, 2026-10-07) */
    .brand__place { display: none; }
    .menu-toggle:not([hidden]) { display: flex; align-items: center; justify-content: center; flex: none;
        width: 48px; height: 48px; margin-right: -12px; padding: 0; color: var(--navy);
        background: none; border: 0; border-radius: 4px; cursor: pointer; transition: color .15s ease; }
    .menu-toggle:hover { color: var(--terra-deep); }
    .menu-toggle:active .menu-toggle__bars { transform: scale(.92); }

    /* Hamburger → ✕: the outer bars slide to the middle, then turn; the middle bar fades. */
    .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 28px; height: 3px; background: currentColor; border-radius: 2px; }
    .menu-toggle__bars { position: relative; transition: background-color .15s ease, transform .1s ease; }
    .menu-toggle__bars::before, .menu-toggle__bars::after { content: ''; position: absolute; left: 0; transition: top .15s ease .15s, transform .2s cubic-bezier(.2, .8, .2, 1); }
    .menu-toggle__bars::before { top: -9px; }
    .menu-toggle__bars::after { top: 9px; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background-color: transparent; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before,
    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 0; transition: top .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1) .15s; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: rotate(-45deg); }

    .site-nav { flex: 1 1 100%; }
    .site-nav ul { display: block; }
    .site-nav li { border-bottom: 1px solid var(--rule); }
    /* Space above the list sits on the first item, inside the clipped list, so a closed menu is truly 0px. */
    .site-nav li:first-child { border-top: 1px solid var(--rule); margin-top: .75rem; }
    .site-nav a { padding: 1rem .25rem; font-size: 1.2rem; border-radius: 0; }
    .site-nav a[aria-current="page"], .site-nav a[aria-current="true"] { text-decoration: none; box-shadow: inset 4px 0 0 var(--terra); padding-left: 1rem; }
    .site-nav li:last-child { border-bottom: 0; padding: 1rem 0 .25rem; }
    .site-nav .site-nav__cta { margin-left: 0; text-align: center; border-radius: 4px; padding: 1rem; }

    /* Open/close (only once site.js has run). The panel grows from 0fr to 1fr so it slides to its
       real height; links fade down in a short stagger. Closing is quicker than opening, and the
       links become `visibility: hidden` only after the panel has shut, so they leave the tab order. */
    .js .site-nav { display: grid; grid-template-rows: 1fr; visibility: visible;
        transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
    .js .site-nav > ul { min-height: 0; overflow: hidden; }
    .js .site-nav li { opacity: 1; transform: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
    .js .site-nav li:nth-child(2) { transition-delay: .03s; }
    .js .site-nav li:nth-child(3) { transition-delay: .06s; }
    .js .site-nav li:nth-child(4) { transition-delay: .09s; }
    .js .site-nav li:nth-child(5) { transition-delay: .12s; }
    .js .site-nav li:nth-child(6) { transition-delay: .15s; }
    .js .site-nav li:nth-child(7) { transition-delay: .18s; }
    .js .menu-toggle[aria-expanded="false"] + .site-nav { grid-template-rows: 0fr; visibility: hidden;
        transition: grid-template-rows .2s cubic-bezier(.4, 0, 1, 1), visibility 0s .2s; }
    .js .menu-toggle[aria-expanded="false"] + .site-nav li { opacity: 0; transform: translateY(-6px); transition: opacity .12s ease, transform .2s ease; transition-delay: 0s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after,
    .js .site-nav, .js .site-nav li, .js .menu-toggle[aria-expanded] + .site-nav, .js .menu-toggle[aria-expanded] + .site-nav li { transition: none !important; }
}

/* Tablet (768–1199px, centred stacked header): "Novato, CA" sits under the logo, not beside it. */
@media (min-width: 768px) and (max-width: 1199px) {
    .brand { flex-direction: column; gap: .35rem; }
    .brand__place { border-left: 0; padding-left: 0; }
}

/* ---- About page (2026-10-07): intro + photo, full-width quote, story beside figures ----
   `.figures` is shared: About's four numbers and Services' four job facts use the same grid. */
.about-intro { padding-bottom: 4rem; }
.about-intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; }
.about-intro__text .lede { font-size: 1.3rem; line-height: 1.6; max-width: 32rem; margin: 0; }
.about-intro__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

/* Quote band: warm sand with navy type (2026-10-07 — the navy version read too heavy). A large terra
   quotation mark sits above; hairlines top and bottom set it off from the ivory sections either side. */
.about-quote { background: var(--sand); color: var(--navy); padding: 4.5rem 0; text-align: center; border-block: 1px solid var(--rule); }
.about-quote blockquote::before { content: '\201C'; content: '\201C' / ''; display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 5rem; line-height: .6; color: var(--terra); margin-bottom: .75rem; }
.about-quote blockquote { margin: 0 auto; max-width: 52rem; }
.about-quote p { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 2.6rem; line-height: 1.25; margin: 0; }
.about-quote cite { display: inline-block; margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--terra); font-style: normal; font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-deep); }

.about-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
.about-story__text p { font-size: 1.1rem; max-width: 38rem; }
.about-story__links { margin-top: 2rem; }

.figures { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.figures > div { background: var(--warm-white); padding: 1.5rem 1.25rem; }
.figures dt { font-family: 'DM Serif Display', Georgia, serif; font-size: 2.4rem; line-height: 1.1; color: var(--terra-deep); margin-bottom: .4rem; }
.figures dd { margin: 0; color: var(--slate); font-size: 1rem; line-height: 1.45; }
/* Four across (Services): word headlines rather than numbers, so a smaller size. */
.figures--four { grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem; }
.figures--four dt { font-size: 1.55rem; line-height: 1.2; }
@media (max-width: 991px) { .figures--four { grid-template-columns: 1fr 1fr; } }

@media (max-width: 991px) {
    .about-intro__grid, .about-story { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .about-quote p { font-size: 2rem; }
}
@media (max-width: 640px) {
    .about-quote { padding: 3.5rem 0; }
    .about-quote p { font-size: 1.6rem; }
    .figures dt { font-size: 1.9rem; }
    .figures--four dt { font-size: 1.4rem; }
    .figures > div { padding: 1.25rem 1rem; }
}
@media (max-width: 420px) {
    .figures { grid-template-columns: 1fr; }
}

/* ---- Phone icon on every phone-number link (2026-10-07) ----
   Global: any <a href="tel:…"> gets a handset before the number, in the link's own colour
   (mask + currentColor), so it works on ivory text, navy footer and terra buttons alike.
   Inline SVG (Bootstrap Icons "telephone-fill", MIT) — nothing is fetched. */
a[href^="tel:"]::before {
    content: '';
    display: inline-block;
    width: .95em;
    height: .95em;
    margin-right: .4em;
    vertical-align: -.12em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A number inside a sentence shouldn't break between icon and digits; a full-width button may wrap
   ("Call" / number) on the narrowest phones rather than push its box off-screen. */
a[href^="tel:"] { white-space: nowrap; text-decoration: none; }   /* the handset icon marks it as a link */
a[href^="tel:"]:not(.btn):hover, a[href^="tel:"]:not(.btn):focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.btn[href^="tel:"] { white-space: normal; }
/* Email links match: no underline at rest, underline on hover/focus (Vince, 2026-10-07). */
a[href^="mailto:"] { text-decoration: none; }
a[href^="mailto:"]:not(.btn):hover, a[href^="mailto:"]:not(.btn):focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ==== Motion, site-wide (2026-10-07) ======================================================
   1. Hover/focus: colours ease instead of snapping; buttons lift a pixel.
   2. Page load: the first section's blocks rise in, staggered. Pure CSS — no script to wait on.
   3. Scroll: blocks further down fade up as they arrive (site.js adds `.reveal`, and only to
      blocks that start below the fold, so nothing on screen ever blinks out and back).
   4. Between pages: a short cross-fade (View Transitions; browsers without it just navigate).
   All of it is off under prefers-reduced-motion, and without script the content simply shows. */
a, .site-nav a, .footer-links a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, text-decoration-color .15s ease; }
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 58, 95, .12); }
.btn:active { transform: translateY(0); box-shadow: none; }
.contact-forms input, .contact-forms textarea, .contact-forms select, .contact-forms button { transition: border-color .15s ease, background-color .15s ease, outline-color .15s ease; }

@keyframes page-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
main > section:first-of-type .container > *,
.contact-layout > * { animation: page-enter .6s cubic-bezier(.2, .8, .2, 1) both; }
main > section:first-of-type .container > :nth-child(2) { animation-delay: .06s; }
main > section:first-of-type .container > :nth-child(3) { animation-delay: .12s; }
main > section:first-of-type .container > :nth-child(4) { animation-delay: .18s; }
main > section:first-of-type .container > :nth-child(n+5) { animation-delay: .24s; }
.contact-layout > * { animation-delay: .22s; }
.contact-layout > :nth-child(2) { animation-delay: .3s; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@view-transition { navigation: auto; }
/* Keep the scrollbar's space reserved: if the incoming page lays out without one for a frame, the
   viewport width changes and Chrome aborts the cross-fade ("Viewport size changed"). */
html { scrollbar-gutter: stable; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

@media (prefers-reduced-motion: reduce) {
    a, .site-nav a, .footer-links a, .btn, .contact-forms input, .contact-forms textarea, .contact-forms select, .contact-forms button { transition: none; }
    .btn:hover { transform: none; }
    main > section:first-of-type .container > *, .contact-layout > * { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    @view-transition { navigation: none; }
}

/* ---- Cookie notice (2026-10-07): server-rendered bar, fixed to the bottom until OK ---- */
.cookie-notice { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--navy); color: #F3ECDF; box-shadow: 0 -4px 18px rgba(27, 37, 54, .18); padding: 1rem 0; animation: page-enter .4s cubic-bezier(.2, .8, .2, 1) .4s both; }
.cookie-notice__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cookie-notice p { margin: 0; font-size: 1rem; line-height: 1.5; }
.cookie-notice a { color: #fff; text-underline-offset: 3px; }
.cookie-notice form { flex: none; }
.cookie-notice .btn { padding: .7rem 2.25rem; }
/* Room at the bottom so the notice never covers the footer's last line. */
body:has(.cookie-notice) { padding-bottom: 5.5rem; }
@media (max-width: 640px) {
    .cookie-notice__inner { flex-direction: column; align-items: stretch; text-align: left; }
    body:has(.cookie-notice) { padding-bottom: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }

/* ---- Legal pages: readable prose column ---- */
.legal { padding-bottom: 5.5rem; }
/* Same left edge as the page heading; only the reading line is narrowed. */
.legal > * { max-width: 46rem; }
.legal__updated { color: var(--slate); font-size: .95rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.7rem; margin: 2.5rem 0 .75rem; }
.legal p { color: var(--ink); }
.legal a { overflow-wrap: anywhere; }

.form-privacy { margin: 1.5rem 0 0; font-size: .95rem; color: var(--slate); }

/* ---- Home hero layout (2026-10-07). Desktop and phones: .hero__text is flattened so its label, headline and
   actions are placed by grid areas around the lead, in reading order headline → lead → button. ---- */
.hero__text { display: contents; }
.hero__text > .label { grid-area: label; }
.hero__text > h1 { grid-area: h1; }
.hero__actions { grid-area: actions; }
.hero__lead { grid-area: lead; }
.hero__media { grid-area: media; }
.hero__grid { grid-template-areas: ". media" "label media" "h1 media" "lead media" "actions media" ". media";
    grid-template-rows: 1fr auto auto auto auto 1fr; row-gap: 0; }
.hero .hero__call { margin-bottom: 0; }      /* the last line of the block: no trailing margin to throw off alignment */
main > section:first-of-type .hero__text > * { animation: page-enter .6s cubic-bezier(.2, .8, .2, 1) both; }
/* Phones: the photo comes straight after the "Custom upholstery · Novato, CA" label, ahead of the headline. */
@media (max-width: 599px) {
    /* The reverse of tablets: the headline is a warm-white card that starts above the photo and overlaps its
       top edge, with just 1.25rem of it above the photo; the photo runs edge to edge. Explicit rows/columns (no named areas), so nothing
       inherited from the desktop areas can scramble the grid. */
    .hero__grid { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; }
    .hero__text > .label { grid-area: 1 / 1 / 2 / 2; }
    .hero__text > h1 { grid-area: 2 / 1 / 3 / 2; align-self: end; justify-self: start; position: relative; z-index: 1; margin: 0;
        padding: clamp(.8rem, 3vw, 1.1rem) clamp(1rem, 4vw, 1.4rem); background: var(--warm-white); border-radius: 2px; color: var(--navy);
        border: 1px solid var(--rule); box-shadow: 0 8px 28px -10px rgba(31, 58, 95, .35);   /* visible above the photo too */
        font-size: clamp(1.5rem, 5.7vw + .3rem, 2.2rem); }   /* ~25px at 360 up to 35px at 540: shrinks with the screen */
    .hero__media { grid-area: 2 / 1 / 3 / 2; margin: .25rem -20px 1.25rem; }   /* the box hangs 1.25rem below the photo */
    .hero__media .hero__img { height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
    .hero__actions { grid-area: 4 / 1 / 5 / 2; margin-top: 1.75rem; }        /* button and phone straight under the photo */
    .hero .hero__lead { grid-area: 5 / 1 / 6 / 2; margin: 1.75rem 0 0; }
    /* "Custom upholstery · Novato, CA" sized to fit one line (never below 12px). If enlarged text forces a
       wrap, the markup only lets it break at the "·", so "Novato, CA" always stays together. */
    .hero .label { font-size: clamp(.75rem, 4.2vw - .1rem, 1.2rem); letter-spacing: .1em; margin-bottom: .75rem; }
}

/* ---- Home hero on tablets (600–991px): photo edge to edge across the top; headline + button + phone are ONE
   warm-white card that straddles the photo's bottom edge (its top 10rem over the photo, the rest below), with
   the lead beside it. Placed by overlapping grid rows, so the card is anchored to the photo's bottom whatever
   its height. Text never sits straight on the photo, so contrast never depends on the image. ---- */
@media (min-width: 600px) and (max-width: 991px) {
    .hero { padding: 2rem 0; }                         /* same 2rem above the photo and below the card */
    .hero__grid { display: grid; grid-template-areas: none; grid-template-columns: max-content minmax(0, 1fr);  /* card as wide as its content */
        grid-template-rows: auto 10rem auto; gap: 0; align-items: start; }
    .hero__media { grid-column: 1 / -1; grid-row: 1 / 3; margin: 0 -20px; }   /* edge to edge through the 20px gutters */
    .hero__media .hero__img { height: auto; aspect-ratio: 7 / 4; border-radius: 0; }  /* the whole frame, no side crop */
    .hero__text { display: block; grid-column: 1; grid-row: 2 / 4; position: relative; z-index: 1;
        padding: 2rem; background: var(--warm-white); border-radius: 2px;    /* even on all four sides */
        box-shadow: 0 18px 40px -24px rgba(31, 58, 95, .45); }
    .hero__text h1 { font-size: 2.25rem; }          /* "Crafted by hand." stays on one line in a half-width card */
    .hero__text .label { font-size: .8rem; letter-spacing: .14em; margin-bottom: 1.25rem; }
    .hero__actions { margin-top: 1.5rem; }
    .hero .hero__call { margin: 1rem 0 0; }          /* drops the hero's 2rem paragraph margin inside the card */
    .hero .hero__lead { grid-column: 2; grid-row: 3; align-self: center; margin: 0; padding: 0 0 0 2.25rem; max-width: none;
        font-size: 1.1rem; line-height: 1.65; }  /* centred against the part of the card below the photo */
}
/* 600–767px: half the width is too narrow for the card, so it widens and the lead goes underneath. */
@media (min-width: 600px) and (max-width: 767px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 10rem auto auto; }
    .hero__text { width: auto; justify-self: start; }
    .hero .hero__lead { grid-column: 1; grid-row: 4; padding: 2rem 0 0; }
}
/* 768–810px: the lead wraps to more lines beside the card, so the card (and the lead with it) sits 2rem lower,
   giving the lead the same breathing room above and below it as at 834px. */
@media (min-width: 768px) and (max-width: 810px) {
    .hero__grid { grid-template-rows: auto 8rem auto; }
}

/* ---- Home hero, small desktops (992–1199px, 2026-10-07): equal columns, headline sized to stay on two lines,
   and the photo stretched to the text block so the label lines up with the photo's top edge and the phone line
   with its bottom edge. ---- */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem;
        grid-template-areas: "label media" "h1 media" "lead media" "actions media"; grid-template-rows: auto; align-items: start; }
    .hero h1 { font-size: 2.9rem; }
    .hero__media { align-self: stretch; padding-top: 4px; }   /* to the label's capitals, not its line box */
    .hero__media .hero__img { height: 100%; }
}

/* ---- Our Work + testimonials (2026-10-07) — shown only once Sarah adds real ones in the admin ---- */
.section--flush-top { padding-top: 0; }
.work-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.work-cards--three { margin-top: 2.5rem; }
.work-card { display: block; color: inherit; text-decoration: none; }
.work-card img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 2px; transition: opacity .15s ease; }
.work-card:hover img, .work-card:focus-visible img { opacity: .88; }
.work-card__title { font-size: 1.1rem; line-height: 1.3; color: var(--navy); margin: .7rem 0 .25rem; }
.work-card:hover .work-card__title, .work-card:focus-visible .work-card__title { text-decoration: underline; text-underline-offset: 3px; }
.work-card__meta { color: var(--terra-deep); font-size: .85rem; font-weight: 600; margin: 0; }
@media (min-width: 768px) { .work-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 1200px) { .work-cards:not(.work-cards--three) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* One project's page (2026-10-12). */
.label__link { color: inherit; text-decoration: none; }
.label__link:hover, .label__link:focus-visible { text-decoration: underline; }
.label__link::before { content: "← "; }
.project-page__meta { color: var(--terra-deep); font-weight: 600; margin: 0; }
.project-page__about { max-width: 44rem; margin-top: 2rem; }
.project-page__story { margin-top: .75rem; }
.project-page__story p { color: var(--slate); }
.project-page__set { margin-top: 1rem; }
.project-page__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 72rem; }
@media (min-width: 768px) { .project-page__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-page__gallery--one { grid-template-columns: minmax(0, 45rem) !important; }
/* Large screens: Before and After side by side, one column each (Vince, 2026-10-12). */
@media (min-width: 992px) {
    .project-page__sets--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; max-width: 72rem; }
    .project-page__sets--pair .project-page__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-page__sets--pair .project-page__gallery--one { grid-template-columns: minmax(0, 1fr) !important; }
}
.project-page__gallery figure { margin: 0; position: relative; }
/* "Before" / "After" on the photo itself (2026-10-12), like the Our Work cards used to. */
.photo-label { position: absolute; left: .6rem; bottom: .6rem; background: var(--warm-white); color: var(--navy);
    font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 2px; }
.project-page__gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 2px; }
.project-page__cta { margin-top: 2.5rem; }
.testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.testimonial { margin: 0; background: var(--warm-white); border: 1px solid var(--rule); border-left: 3px solid var(--terra); padding: 1.5rem; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--navy); margin: 0; }
.testimonial__stars { color: var(--terra); letter-spacing: .15em; margin: 0 0 .5rem; }
.testimonial figcaption { margin-top: 1rem; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.testimonial figcaption span { display: block; font-weight: 400; letter-spacing: .04em; text-transform: none; margin-top: .15rem; }

/* Touch targets (WCAG 2.5.8, 24px): links that stand on their own line get a little height. */
.more a, .detail p > a, .aside-card > p > a, .footer-links a { display: inline-block; padding-block: .15rem; }

/* Quote form addresses (2026-10-12): street full width, then city / state / ZIP in a row from 600px. */
.contact-forms .address__fields { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; }
.contact-forms .address__field label { margin-top: .9rem; }
.contact-forms .address .choice + .address__fields .address__field:first-child label { margin-top: .6rem; }
@media (min-width: 600px) {
    .contact-forms .address__fields { grid-template-columns: minmax(0, 1fr) 5rem 8rem; }
    .contact-forms .address__field--address_line { grid-column: 1 / -1; }
}
.contact-forms .address--ship:has(input[name="ship_same"]:checked) .address__fields { display: none; }

/* Read by screen readers, not shown (2026-10-12). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Areas we serve (2026-10-12): the hub's region cards, and one page per region or town ---- */
.area-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.area-card { border-top: 3px solid var(--terra); display: flex; flex-direction: column; }
.area-card h2 { font-size: 1.7rem; }
.area-card h2 a { color: var(--navy); text-decoration: none; }
.area-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.area-card p + p { margin-top: .75rem; }
.area-card .area-card__places { font-size: 1rem; }
.area-card__towns { margin: .75rem 0 0; padding-left: 1.2rem; }
.area-card .more { margin-top: auto; padding-top: 1.25rem; }
.areas__cta { margin-top: 2rem; }

.area-page { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem; align-items: start; }
.area-page__body { font-size: 1.1rem; max-width: 46rem; }
.area-page__body h2 { font-size: 1.6rem; margin-top: 2rem; }
.area-page__body ul { padding-left: 1.4rem; }
.area-page__body li { margin-bottom: .4rem; }
.area-page__places { background: var(--warm-white); border: 1px solid var(--rule); border-top: 3px solid var(--navy); border-radius: 4px; padding: 1.75rem; }
.area-page__places h2 { font-size: 1.5rem; }
.area-page__list, .area-page__towns { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.area-page__list li, .area-page__towns li { padding: .2rem 0; break-inside: avoid; }
.area-page__towns { margin-bottom: 1rem; font-weight: 600; }
.area-page__note { margin: 1rem 0 0; color: var(--slate); font-size: 1rem; }
.area-page__cta { margin-top: 2.5rem; }
.area-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.area-links a { display: inline-block; padding: .6rem 1.1rem; border: 1px solid var(--terra-deep); border-radius: 3px; font-weight: 600; text-decoration: none; }
.area-links a:hover { background: var(--terra-deep); color: var(--warm-white); }

@media (max-width: 991px) {
    .area-page { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 640px) {
    .area-cards { grid-template-columns: minmax(0, 1fr); }
    .area-page__places { padding: 1.25rem; }
}