/* The light edition for pages that keep their older layout (2026-11-05, Dan: "all pages should
   look like that and have that flow"): the blog, services, towns, areas, clinics, legal and contact
   pages, and the route page. Loaded last, after their own stylesheets and nt-chrome.css, so their
   structure (guide cards, town lists, prose) stays and only the look changes: a centred wash head,
   the italic accent word, rimmed cards, dotted grounds, and an ink close under the footer sheet. */

body { background: var(--paper); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); letter-spacing: -.03em; }
h1 { letter-spacing: -.045em; line-height: 1.04; }
a { text-underline-offset: 3px; }

/* The accent word */
.sw, em.sw { font-family: var(--serif) !important; font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--ember-big) !important; background: none !important; -webkit-text-fill-color: currentColor; white-space: normal; }
.sw::after, .sw::before { display: none !important; content: none !important; }
:is(.ink, .final, .bp-final) .sw { color: var(--amber) !important; }

/* Eyebrows become the pill */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 14px 7px 11px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .62); font: 500 .72rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 0, .16); }
:is(.ink, .final) .eyebrow { background: rgba(255, 255, 255, .06); border-color: var(--on-ink-hair); color: var(--on-ink-2); }

/* Heads: the wash, centred, room for the floating header */
.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero { position: relative; overflow: hidden; padding: clamp(128px, 15vw, 168px) 0 clamp(48px, 6vw, 76px); text-align: center; color: var(--text); background: radial-gradient(50% 90% at 92% 10%, rgba(255, 90, 0, .3), transparent 72%), radial-gradient(44% 70% at 8% 100%, rgba(255, 178, 107, .22), transparent 72%), linear-gradient(180deg, #fff7f0, var(--paper)); background-image: radial-gradient(50% 90% at 92% 10%, rgba(255, 90, 0, .3), transparent 72%), radial-gradient(44% 70% at 8% 100%, rgba(255, 178, 107, .22), transparent 72%), linear-gradient(180deg, #fff7f0, var(--paper)); }
:is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero)::before, :is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero)::after { display: none; }
:is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero) h1 { max-width: 19em; margin-inline: auto; color: var(--ink); font-size: clamp(2.4rem, 4.8vw, 4rem); font-weight: 700; text-wrap: balance; }
:is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero) .lede { max-width: 38em; margin: 20px auto 26px; color: var(--text); font-size: clamp(1.03rem, 1.3vw, 1.16rem); }
:is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero) :is(.eyebrow) { color: var(--muted); background: rgba(255, 255, 255, .62); border-color: var(--hair); }
:is(.page-head, .hero) .btn-ghost { background: rgba(255, 255, 255, .86); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--hair), 0 10px 22px -16px rgba(16, 24, 32, .4); }
.page-head .actions, .hero .actions, .btn-row, .hero-ctas { justify-content: center; }
.page-head .meta { justify-content: center; border-top-color: var(--hair); color: var(--muted); }
.page-head .meta a { color: var(--ember-text); }
.crumbs { justify-content: center; margin-bottom: 16px; font-size: .84rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.page-head .fine, .hero .fine, .hero-note { color: var(--muted); }

/* Sections */
.section { padding-block: clamp(60px, 7vw, 100px); }
.section.ground, .section.alt { background-color: var(--paper-2); background-image: radial-gradient(rgba(16, 24, 32, .1) 1px, transparent 1.2px); background-size: 22px 22px; }
.section.ink:not(.final) { background: radial-gradient(70% 100% at 90% 0, rgba(255, 90, 0, .2), transparent 72%), var(--ink); }
.section.ink:not(.final) :is(h2, h3) { color: var(--on-ink); }
.head h2, .section-head h2, .guides-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; }
.prose, .eng-body, .reading { color: var(--text); }
.prose h2, .eng-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.prose a, .eng-body a { color: var(--ember-text); }
.textlink { color: var(--ember-text); }
blockquote { border-left-color: var(--ember); }

/* Cards get the rim */
:is(.card, .post-card, .tile, .vs-card, .panel, .panel-copy, .pillar-link, .answer-first, .area-glance, .eng-offer, .svc-item, .proof-list, .pbox, .ref-card, .sites-offer) { border: 0; border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 0 0 7px rgba(255, 255, 255, .55), 0 0 0 8px var(--hair), 0 30px 60px -36px rgba(16, 24, 32, .34); }
:is(.card, .post-card, .tile, .vs-card, .pillar-link) { transition: transform .3s var(--ease); }
a:is(.card, .post-card, .tile, .vs-card, .pillar-link):hover { transform: translateY(-3px); }
.topic-chip { background: var(--wash); color: var(--ember-text); border-radius: 999px; }
.answer-first { background: linear-gradient(160deg, #fff5ec, #fff); }
.card-form { border: 0; border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -36px rgba(16, 24, 32, .34); }
.hero .card-form { border: 0; }
.steps-dots i.on { background: var(--ember); }
.field input, .field select, .field textarea { border-radius: 12px; border: 1px solid var(--hair-2); }

/* Buttons on the older pages */
.btn-primary, .btn-gold { background: var(--ember); color: var(--ink); border: 0; }
.btn-ghost { border-radius: var(--r); }
:is(.ink, .final) .btn-ghost { background: rgba(255, 255, 255, .1); color: var(--on-ink); border: 0; box-shadow: inset 0 0 0 1px var(--on-ink-hair); }

/* Questions */
.faq details, .faq-list details { border: 0; border-top: 1px solid var(--hair-2); border-radius: 0; background: none; box-shadow: none; }
.faq summary, .faq-list summary { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

/* The close: ink, with the footer sheet rising over it */
.section.final, .bp-final { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 140px) 0 clamp(130px, 15vw, 190px); text-align: center; background: radial-gradient(70% 80% at 50% 110%, rgba(255, 90, 0, .4), transparent 72%), var(--ink); color: var(--on-ink); }
.section.final::before { display: none; }
.section.final h2 { color: var(--on-ink); font-size: clamp(2.2rem, 4.8vw, 3.9rem); line-height: 1.05; }
.section.final p { max-width: 32em; margin-inline: auto; color: var(--on-ink-2); }
.section.final .actions { justify-content: center; }
body:not(:has(main > .section.final:last-of-type)) .foot { margin-top: 0; }


/* site.css paints its heads dark; these outweigh it */
body :is(.hero, .pillar-hero, .blog-hero, .article-head, .bp-hero, .intake-hero, .page-head) :is(h1, h2, h3) { color: var(--ink); }
body :is(.hero, .pillar-hero, .blog-hero, .article-head, .bp-hero, .intake-hero, .page-head) :is(p, li, .lead, .lede, .standfirst, .hero-note, .crumbs, .meta) { color: var(--text); }
body :is(.hero, .pillar-hero, .blog-hero, .article-head, .bp-hero, .intake-hero, .page-head) :is(b, strong) { color: var(--ink); }
body :is(.hero, .pillar-hero, .blog-hero, .article-head, .bp-hero, .intake-hero, .page-head) :is(.crumbs a, .meta a, .link, .textlink) { color: var(--ember-text); text-decoration-color: rgba(184, 63, 0, .3); }
body :is(.hero, .pillar-hero, .bp-hero) .answer-box { border: 0; border-radius: var(--r-card); background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--hair); }
body :is(.hero, .pillar-hero, .bp-hero) .answer-box p { color: var(--text); }
.bp-hero .face { border: 0; box-shadow: 0 0 0 1px var(--hair), 0 0 0 6px rgba(255, 255, 255, .6), 0 0 0 7px var(--hair); }
body .prose :is(.card, .faq-list), body :is(.card, .post-card, .tile, .vs-card, .panel, .pillar-link, .answer-first, .eng-offer, .svc-item, .proof-list, .pbox, .ref-card, .sites-offer, .legal, .agenda) { border: 0; border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 0 0 7px rgba(255, 255, 255, .55), 0 0 0 8px var(--hair), 0 30px 60px -36px rgba(16, 24, 32, .34); }
body .prose .faq-list { border-top: 0; }
body .prose ul > li::before { outline: 0; background: var(--ember); }
body .meta .byline a, body .pillar-link a { text-decoration-color: var(--ember); }
.section.alt .section-head p, .promise { color: var(--muted); }

/* The legal and contact pages */
.bp-nav, .bp-foot { display: none; }
.section-head { text-align: center; }

@media (max-width: 720px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 52px; }
  :is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero) { padding-top: 112px; }
  :is(.page-head, .hero, .vx-hero, .bp-hero, .pillar-hero) h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
}

/* The route page keeps a dark head, as its sales-page copy was written for one */
body .r-hero { --ink: #f7f4ef; --text: rgba(247, 244, 239, .68); --muted: rgba(247, 244, 239, .68); color: var(--on-ink); background: radial-gradient(56% 92% at 88% 18%, rgba(255, 90, 0, .42), transparent 72%), #101820; }
body .r-hero h1 { color: #f7f4ef; }
body .r-hero .lede { color: rgba(247, 244, 239, .68); }
body .r-hero .sw { color: #ffb26b !important; }

/* site.css's outline buttons: on the light pages they read as the soft button */
body :is(.btn-ghost, .btn-outline, .btn-secondary, .btn-line, .btn-light) { background: rgba(255, 255, 255, .86); color: var(--ink); border: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--hair), 0 10px 22px -16px rgba(16, 24, 32, .4); }
body :is(.btn-ghost, .btn-outline, .btn-secondary, .btn-line, .btn-light):hover { background: #fff; color: var(--ember-text); }
body :is(.ink, .final, .close, .bp-final) :is(.btn-ghost, .btn-outline) { background: rgba(255, 255, 255, .1); color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--on-ink-hair); }
body :is(.hero-cta, .hero-ctas, .pillar-cta, .cta-buttons, .mobile-cta, .btn-row):has(.btn-gold, .btn-primary) .btn:not(.btn-gold):not(.btn-primary):not(.btn-dark):not(.btn-ink) { background: rgba(255, 255, 255, .86); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--hair), 0 10px 22px -16px rgba(16, 24, 32, .4); }