/* ==========================================================================
   Infinite Accounting Services: design system
   Every later page reuses these values. Change a token here, not on a page.

   Colour roles
   - Page background ............ --white
   - Tinted bands ............... --mist (cool) and --tint (green), dark text
   - Brand band ................. --navy, always white text
   - Footer ..................... --navy-deep, white and --on-dark-muted text
   - Contact button ............. --green fill, white text (4.7:1)
   - Call button ................ --navy fill, white text; on a dark band it is white with navy text
   - Links ...................... --blue on light (6.4:1), white on dark
   - Icons ...................... --green-dark on tints and white cards, white on dark bands
   - The accent green is used for buttons, icon chips and the short heading rule only.
     It is never used for body text.
   Rhythm down a page: white, tinted, white, brand band, white. Never two dark bands in a row.

   Icons: Lucide (ISC licence, see /assets/LICENSE-lucide.txt), 1.75 stroke, currentColor.
   Fonts: League Spartan and Inter (SIL Open Font Licence, see /assets/fonts/).
   ========================================================================== */

@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/league-spartan-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/league-spartan-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --navy: #0b2f57;
  --navy-deep: #082340;
  --blue: #1d5fa8;
  --green: #1e8449;
  --green-dark: #176b3a;
  --green-light: #6fd39a;
  --tint: #e8f5ec;
  --mist: #f4f8fb;
  --white: #ffffff;
  --ink: #10212f;
  --muted: #4a5b6a;
  --line: #dbe5ee;
  --on-dark-muted: #c9d6e3;

  /* type */
  --font-head: "League Spartan", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1: 38px;  --h1-lh: 1.1;
  --h2: 31px;  --h2-lh: 1.15;
  --h3: 21px;  --h3-lh: 1.3;
  --body: 17px; --body-lh: 1.65;
  --lead: 19px; --lead-lh: 1.6;
  --small: 15px;
  --eyebrow: 13px;
  --btn: 17px;

  /* space */
  --content: 1160px;
  --gutter: 20px;
  --section: 72px;
  --gap: 20px;
  --card-pad: 24px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(11, 47, 87, 0.06), 0 12px 32px rgba(11, 47, 87, 0.1);
  --border: 1px solid var(--line);
  --header-h: 64px;
  --mobile-bar: 104px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) {
  :root { --gutter: 32px; --gap: 24px; }
}
@media (min-width: 1024px) {
  :root {
    --h1: 60px;  --h1-lh: 1.06;
    --h2: 42px;  --h2-lh: 1.12;
    --h3: 24px;  --h3-lh: 1.25;
    --body: 18px; --body-lh: 1.7;
    --lead: 21px;
    --gutter: 40px;
    --section: 112px;
    --gap: 32px;
    --card-pad: 32px;
    --header-h: 76px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 899px) { body { padding-bottom: var(--mobile-bar); } }
img { max-width: 100%; height: auto; display: block; }
p, li, dd, address { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); margin: 0; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 700; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 700; }
h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 650; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--white); }
::selection { background: var(--tint); color: var(--navy); }
[hidden] { display: none !important; }
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: var(--radius); box-shadow: none; font-weight: 600; }
.skip-link:focus { top: 12px; box-shadow: var(--shadow); }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--mist { background: var(--mist); }
.section--tint { background: var(--tint); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--tight { padding: calc(var(--section) * 0.6) 0; }
.grid { display: grid; gap: var(--gap); }
.grid > *, .split > * { min-width: 0; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--reverse > :first-child { order: 2; }
  .split--center { align-items: center; }
  .sticky { position: sticky; top: calc(var(--header-h) + 32px); }
}
.split > * + * { margin-top: 40px; }
@media (min-width: 1024px) { .split > * + * { margin-top: 0; } }
.stack > * + * { margin-top: 20px; }

/* ---------- section header ---------- */
.eyebrow { display: block; font-family: var(--font-body); font-size: var(--eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.on-dark .eyebrow { color: var(--green-light); }
.rule::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--green); margin-top: 18px; }
.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 20px; font-size: var(--lead); line-height: var(--lead-lh); color: var(--muted); }
.on-dark .section-head p, .on-dark .lead { color: var(--on-dark-muted); }
.lead { font-size: var(--lead); line-height: var(--lead-lh); color: var(--muted); }
.answer { font-size: var(--lead); line-height: var(--lead-lh); margin-top: 24px; }
.center { text-align: center; }
.center .rule::after { margin-left: auto; margin-right: auto; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: calc(var(--h2) * 0.82); }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.5em; }
.prose ul li::marker { color: var(--green); }
.prose ol li::marker { color: var(--navy); font-weight: 700; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: var(--radius); border: 0;
  font-family: var(--font-body); font-size: var(--btn); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.btn-contact { background: var(--green); color: var(--white); }
.btn-contact:hover { background: var(--green-dark); color: var(--white); }
.btn-call { background: var(--navy); color: var(--white); }
.btn-call:hover { background: var(--navy-deep); color: var(--white); }
.on-dark .btn-call { background: var(--white); color: var(--navy); }
.on-dark .btn-call:hover { background: var(--tint); color: var(--navy); }
.btn-quiet { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn-quiet:hover { background: var(--navy); color: var(--white); }
.btn-pair { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .btn-pair { grid-template-columns: repeat(2, minmax(0, 260px)); } }
.btn-pair .btn { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); text-decoration: none; }
.text-link .icon { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }
.on-dark a:not(.btn) { color: var(--white); }

/* ---------- cards ---------- */
.card { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-pad); display: flex; flex-direction: column; height: 100%; }
.section--mist .card, .section--tint .card { border-color: transparent; }
/* a single card beside text sizes to its content (cards in a row still share one height) */
.split > .card, .split > div > .card:only-child { height: auto; align-self: start; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); }
.card .card-foot { margin-top: auto; padding-top: 22px; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tint); color: var(--green-dark); margin-bottom: 20px; flex: none; }
.chip .icon { width: 24px; height: 24px; }
.chip--navy { background: var(--navy); color: var(--white); border-radius: 50%; }
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .icon { color: var(--green); margin-top: 0.22em; width: 20px; height: 20px; }
.on-dark .ticks .icon { color: var(--green-light); }

/* fact card: one standalone statement, label above */
.fact { background: var(--white); border: var(--border); border-radius: var(--radius); padding: 22px 24px; height: 100%; }
.section--mist .fact, .section--tint .fact { border-color: transparent; box-shadow: var(--shadow); }
.fact-label { display: flex; align-items: center; gap: 8px; font-size: var(--eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 8px; }
.fact-label .icon { width: 18px; height: 18px; }
.fact p { color: var(--ink); }
.on-dark .fact { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.on-dark .fact-label { color: var(--green-light); }
.on-dark .fact p { color: var(--white); }

/* label and value pairs (hours, details) */
.pairs { display: grid; gap: 0; }
.pair { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: var(--border); }
.pair:last-child { border-bottom: 0; }
.pair .label { font-weight: 600; color: var(--navy); }
.on-dark .pair { border-color: rgba(255, 255, 255, 0.14); }
.on-dark .pair .label { color: var(--white); }

/* price card */
.price-card .price { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--navy); margin: 6px 0 14px; }
.price-card .price small { font-family: var(--font-body); font-size: var(--small); font-weight: 500; color: var(--muted); }

/* numbered steps */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--gap); }
@media (min-width: 900px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; position: relative; padding-top: 68px; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--white); font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.steps li::after { content: ""; position: absolute; top: 24px; left: 60px; right: 0; height: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
@media (max-width: 899px) { .steps li::after { display: none; } }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--muted); }
.on-dark .steps p { color: var(--on-dark-muted); }
.on-dark .steps li::after { background: rgba(255, 255, 255, 0.2); }

/* ---------- FAQ accordion ---------- */
.faq { border-top: var(--border); }
.faq details { border-bottom: var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: calc(var(--h3) * 0.92); }
.faq summary .toggle { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--green-dark); display: grid; place-items: center; transition: transform 0.25s var(--ease); }
.faq details[open] summary .toggle { transform: rotate(180deg); }
.faq .faq-a { padding: 0 0 24px; color: var(--ink); }
.faq summary:hover h3 { color: var(--blue); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid transparent; transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px rgba(11, 47, 87, 0.08); }
.header-bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.brand-mark { width: 44px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--navy); }
.brand-sub { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); margin-top: 5px; }
.nav-desktop { display: none; }
.header-actions { display: none; }
@media (min-width: 1100px) {
  .nav-desktop { display: block; }
  .header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
}
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-link, .nav-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .nav-toggle:hover, .nav-link[aria-current="page"] { color: var(--blue); background: var(--mist); }
.nav-toggle .icon { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; }
.dropdown--wide { min-width: 420px; }
.dropdown-panel { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; list-style: none; }
.dropdown--wide .dropdown-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dropdown a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--navy); text-decoration: none; font-weight: 500; font-size: 16px; }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--mist); color: var(--blue); }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); text-decoration: none; padding: 10px 8px; white-space: nowrap; }
.header-phone .icon { width: 18px; height: 18px; color: var(--green); }
.header-phone:hover { color: var(--blue); }
.header-actions .btn { min-height: 46px; padding: 10px 20px; font-size: 16px; }

/* mobile menu, a <details> so it also works without scripts */
.menu-mobile { display: block; }
@media (min-width: 1100px) { .menu-mobile { display: none; } }
.menu-mobile > summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--navy); }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary .icon { width: 28px; height: 28px; }
.menu-mobile > summary .icon-close { display: none; }
.menu-mobile[open] > summary .icon-open { display: none; }
.menu-mobile[open] > summary .icon-close { display: block; }
.menu-panel { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; background: var(--white); overflow-y: auto; border-top: var(--border); padding: 12px var(--gutter) 160px; display: flex; flex-direction: column; }
.menu-panel ul { list-style: none; }
.menu-group > a, .menu-group > p { display: block; padding: 14px 4px; font-size: 19px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: var(--border); margin: 0; font-family: var(--font-head); }
.menu-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 6px 0 12px; border-bottom: var(--border); }
.menu-sub a { display: block; padding: 9px 4px; color: var(--ink); text-decoration: none; font-size: 16px; }
.menu-sub a[aria-current="page"], .menu-group > a[aria-current="page"] { color: var(--green-dark); }
.menu-cta { margin-top: 28px; display: grid; gap: 12px; }
.menu-cta .btn { width: 100%; }

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--white); padding: 36px 0 56px; position: relative; overflow: hidden; }
/* On phones the call and contact buttons show before the direct answer, so both are on screen
   before anybody scrolls. The answer stays directly under the heading in the page source. */
@media (max-width: 639px) {
  .hero .wrap { display: flex; flex-direction: column; }
  .hero .btn-pair { order: 1; margin-top: 22px; }
  .hero .answer { order: 2; font-size: 17px; margin-top: 22px; }
  .hero .hero-proof { order: 3; margin-top: 18px; }
  .hero .hero-meta { order: 0; }
  .hero .eyebrow { margin-bottom: 10px; }
}
@media (min-width: 1024px) { .hero { padding: 104px 0 112px; } }
.hero h1 { color: var(--white); }
.hero .answer { color: var(--on-dark-muted); }
.hero .answer strong { color: var(--white); font-weight: 600; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--on-dark-muted); font-size: var(--small); }
.hero-proof .icon { color: var(--green-light); width: 20px; height: 20px; }
.hero--page { padding: 36px 0 56px; }
@media (min-width: 1024px) { .hero--page { padding: 88px 0 96px; } }
.hero .facts-row { margin-top: 48px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; color: var(--on-dark-muted); font-size: var(--small); list-style: none; }
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta .icon { width: 18px; height: 18px; color: var(--green-light); }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--green); color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- photo placeholder: designed card, never a grey box ---------- */
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 440px; width: 100%; margin: 0 auto; border-radius: var(--radius); background: var(--navy); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; box-shadow: var(--shadow); overflow: hidden; }
.portrait .monogram { width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; font-family: var(--font-head); font-size: 44px; font-weight: 700; letter-spacing: 0.02em; }
.portrait .name { margin-top: 24px; font-family: var(--font-head); font-size: 26px; font-weight: 700; }
.portrait .role { margin-top: 6px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-muted); }
.photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- town chips and link tiles ---------- */
.town-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.town-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white); text-decoration: none; font-weight: 600; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.town-list a:hover { background: var(--white); color: var(--navy); }
.town-list .icon { width: 18px; height: 18px; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--white); border: var(--border); box-shadow: var(--shadow); text-decoration: none; color: var(--navy); font-family: var(--font-head); font-size: 20px; font-weight: 600; transition: transform 0.2s var(--ease); height: 100%; }
.tile:hover { transform: translateY(-2px); color: var(--blue); }
.tile .icon { color: var(--green); }
.card--link { text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.card--link:hover { transform: translateY(-3px); }
.card--link:hover h3 { color: var(--blue); }

/* ---------- blog ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chips button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: var(--border); background: var(--white); color: var(--navy); font: 600 15px var(--font-body); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--small); color: var(--muted); margin-bottom: 12px; }
.callout { display: flex; gap: 14px; background: var(--tint); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 18px 22px; }
.callout .icon { color: var(--green-dark); margin-top: 0.2em; }

/* ---------- contact section and form ---------- */
.contact-section { scroll-margin-top: var(--header-h); }
.form-wrap { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: var(--border); padding: var(--card-pad); scroll-margin-top: calc(var(--header-h) + 16px); scroll-margin-bottom: calc(var(--mobile-bar) + 16px); }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 360px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .full, .form-grid .wide-sm { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .form-grid > .field { grid-column: span 3; }
  .form-grid > .third { grid-column: span 2; }
  .form-grid > .full { grid-column: 1 / -1; }
}
@media (max-width: 639px) { .form-grid { gap: 14px 12px; } .field textarea { min-height: 88px; } .form-wrap { padding: 20px; } }
.field label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 6px; font-size: 16px; }
.field input, .field select, .field textarea { width: 100%; font: 400 17px/1.4 var(--font-body); color: var(--ink); background: var(--white); border: 1px solid #b9c7d4; border-radius: 10px; padding: 12px 14px; min-height: 50px; }
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(29, 95, 168, 0.3); outline-offset: 0; border-color: var(--blue); }
.field [aria-invalid="true"] { border-color: #b42318; }
.field-error { color: #b42318; font-size: 15px; font-weight: 600; margin-top: 6px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--green); flex: none; }
.form-note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; border-radius: 10px; padding: 16px 18px; font-size: 16px; }
.form-status[hidden] { display: none; }
.form-status--ok { background: var(--tint); color: var(--navy); }
.form-status--info { background: var(--mist); color: var(--navy); }
.form-status--error { background: #fef3f2; color: #912018; }
.form-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-ways { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.contact-ways li { min-width: 0; }
.contact-ways a { display: flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.contact-ways .chip { width: 44px; height: 44px; margin: 0; }

/* final call to action band: green tint, so it never sits dark against the dark footer */
.cta-final { background: var(--tint); padding: 64px 0; }
@media (min-width: 1024px) { .cta-final { padding: 88px 0; } }
.cta-final .btn-row { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 720px) { .cta-final .btn-row { grid-template-columns: repeat(3, minmax(0, 240px)); } }
.cta-final .btn { width: 100%; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-muted); font-size: 16px; }
.footer-cols { display: grid; gap: 40px; padding: 72px 0 48px; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-cols { grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr; } }
.site-footer h2 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer a.btn-contact, .site-footer a.btn-contact:hover { color: var(--white); text-decoration: none; }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-sub { color: var(--green-light); }
.footer-nap { margin-top: 20px; display: grid; gap: 10px; font-style: normal; }
.footer-nap p { display: flex; gap: 10px; align-items: flex-start; }
.footer-nap .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--green-light); }
.footer-nap strong { color: var(--white); }
.footer-towns { margin-top: 24px; }
.footer-towns ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.footer-hours .pair { padding: 6px 0; border-color: rgba(255, 255, 255, 0.1); font-size: 15px; }
.footer-hours .pair .label { color: var(--white); font-weight: 600; }
.footer-hours .btn { margin-top: 20px; width: 100%; }
.footer-review { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; }
.footer-review .icon { width: 18px; height: 18px; color: #ffd666; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0 32px; display: grid; gap: 16px; font-size: 14px; }
@media (min-width: 900px) { .footer-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; list-style: none; }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; color: var(--white); }
.social a:hover { background: var(--green); text-decoration: none; }
.social svg { width: 18px; height: 18px; }
.footer-disclaimer { font-size: 13px; line-height: 1.6; color: #9fb2c6; padding-bottom: 36px; }

/* ---------- mobile call, contact and chat buttons ---------- */
.mobile-bar { display: none; }
.menu-open .mobile-bar, .menu-open .chat-launcher, .menu-open .chat-panel { display: none !important; }
@media (max-width: 899px) {
  .mobile-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: var(--mobile-bar); z-index: 60; pointer-events: none; }
  .mobile-bar::before {
    content: ""; position: absolute; inset: 0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  }
  .round-btn { pointer-events: auto; position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--white); box-shadow: 0 6px 18px rgba(11, 47, 87, 0.28); }
  .round-btn .icon { width: 26px; height: 26px; }
  .round-btn--call { left: 24px; background: var(--navy); }
  .round-btn--contact { left: 50%; transform: translateX(-50%); background: var(--green); }
}
/* built-in chat (replace with the CRM chat widget when it is supplied) */
.chat-launcher { position: fixed; z-index: 61; right: 24px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--blue); color: var(--white); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(11, 47, 87, 0.28); }
.chat-launcher .icon { width: 26px; height: 26px; }
@media (min-width: 900px) { .chat-launcher { right: 28px; bottom: 28px; width: 60px; height: 60px; } }
.chat-panel { position: fixed; z-index: 62; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 32px)); background: var(--white); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(11, 47, 87, 0.25); border: var(--border); padding: 22px; }
@media (min-width: 900px) { .chat-panel { right: 28px; bottom: 104px; } }
.chat-panel[hidden] { display: none; }
.chat-panel h2 { font-size: 22px; padding-right: 36px; }
.chat-panel p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.chat-panel .btn { width: 100%; margin-top: 10px; min-height: 48px; font-size: 16px; }
.chat-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--mist); color: var(--navy); display: grid; place-items: center; cursor: pointer; }

/* ---------- scroll movement (off for reduced motion and without scripts) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- 404 ---------- */
.notfound-links { list-style: none; display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 720px) { .notfound-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media print {
  .site-header, .mobile-bar, .chat-launcher, .chat-panel, .cta-final, .contact-section { display: none !important; }
}

/* ---------- photos (AI-generated with Higgsfield, approved by the client before launch) ---------- */
/* The client's logo is stacked (symbol over lettering), so it needs most of the header's height. */
.brand-logo { height: 52px; width: auto; }
@media (min-width: 1024px) { .brand-logo { height: 62px; } }
.site-footer .brand-logo { height: 84px; }
.brand-icon { height: 34px; width: auto; }
/* Split hero: text on the left, photo on the right on wide screens; on phones the photo
   follows the buttons and the answer, so call and contact stay above the fold. */
.hero-media { border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 1023px) {
  .hero--split .wrap { display: flex; flex-direction: column; }
  .hero--split .hero-media { order: 5; margin-top: 32px; }
  .hero--split .hero-media img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .hero--split .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
  .hero--split .wrap > * { grid-column: 1; }
  .hero--split .hero-media { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
}
.photo-card { margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 24px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Home hero with a full-width photo behind it. The photo's left half is a plain navy wall, so the text
   sits on it; a navy wash keeps every line readable wherever the photo is brighter. */
.hero--bg { background: var(--navy); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 100%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 47, 87, 0.94) 0%, rgba(11, 47, 87, 0.88) calc(100% - 240px), rgba(11, 47, 87, 0.2) 100%); }
.hero--bg .wrap { position: relative; z-index: 1; }
@media (max-width: 1023px) { .hero--bg { padding-bottom: 220px; } }
@media (min-width: 1024px) {
  .hero--bg { padding: 128px 0 136px; }
  .hero-bg img { object-position: 70% 50%; }
  .hero-bg::after { background: linear-gradient(90deg, rgba(11, 47, 87, 0.9) 0%, rgba(11, 47, 87, 0.72) 42%, rgba(11, 47, 87, 0.12) 64%, rgba(11, 47, 87, 0) 80%); }
  .hero--bg .wrap > * { max-width: 600px; }
}

/* CRM form and chat widget. The form sizes itself with its own script; the minimum height keeps
   its space reserved before that script runs and when scripts are off. The CRM chat button is
   58px, 20px in from the bottom right corner, so the call and contact buttons match it. */
.form-wrap--embed iframe { display: block; min-height: 540px; }
.form-embed { min-height: 569px; }
.form-loading { margin: 0; padding: 56px 24px; text-align: center; color: var(--muted); font-size: 15px; }
.form-loading p { margin: 0 auto; max-width: 32ch; }
.form-loading .btn { margin-top: 20px; }
.form-wrap--embed .form-note { margin-top: 16px; }
.form-embed { scroll-margin-top: calc(var(--header-h) + 16px); }
/* The CRM form has its own white background and padding, so on a phone the card around it stays thin
   and the whole form fits between the header and the phone buttons. */
@media (max-width: 639px) { .form-wrap--embed { padding: 6px 6px 16px; } .form-wrap--embed .form-note { padding: 0 14px; } }
@media (max-width: 899px) {
  .round-btn { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .round-btn--call { left: 20px; }
  .menu-panel { padding-bottom: 240px; }
}
/* While the phone menu is open it covers the page, so the chat button and its message bubble step aside. */
.menu-open chat-widget { display: none !important; }

/* Contact page: headline, short answer and the form in the first band. */
.contact-top { padding: 36px 0 48px; }
.contact-top h1 { color: var(--white); margin-top: 10px; }
.contact-top .answer { color: var(--on-dark-muted); font-size: 17px; margin-top: 16px; }
.contact-top .answer strong { color: var(--white); font-weight: 600; }
.contact-top .split > * + * { margin-top: 24px; }
.contact-top .form-wrap { border: 0; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }
@media (min-width: 1024px) {
  .contact-top { padding: 80px 0 88px; }
  .contact-top .split { align-items: center; }
  .contact-top .split > * + * { margin-top: 0; }
  .contact-top .answer { font-size: var(--lead); }
}

/* ---------- opening animation and page transitions ----------
   First page of a visit: a navy curtain with the logo, which eases in and then lifts away like a
   curtain. As it lifts, the header drops in, the hero text rises into place
   line by line and the home photo settles from a slight zoom (about 1.4 seconds for the curtain). The page is drawn underneath from the
   start, so speed tests still see it straight away; the headline, paragraph, photo and form slide
   without fading for the same reason. Moving between pages: a soft cross-fade with the header held
   still, where the browser supports it. Nothing moves for visitors who ask for reduced motion, and
   without scripts there is no curtain at all. */
.intro-curtain { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }
  .site-header { view-transition-name: site-header; }

  .intro { --lift: 0.7s; }
  .intro .intro-curtain {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, #12406f 0%, var(--navy) 55%, var(--navy-deep, #082340) 100%);
    animation: curtain-lift 0.7s cubic-bezier(0.76, 0, 0.24, 1) var(--lift) both;
  }
  .intro .intro-curtain img { width: min(260px, 58vw); height: auto; animation: curtain-logo 0.75s var(--ease) 0.05s both; }

  .intro .site-header { animation: intro-drop 0.7s var(--ease) calc(var(--lift) + 0.25s) both; }
  .intro :is(.hero, .contact-top) :is(.eyebrow, .btn-pair, .hero-proof, .hero-meta) { animation: intro-rise 0.8s var(--ease) both; }
  /* The headline, paragraph, photo and form are what speed tests time, so they slide without fading:
     a fade from invisible makes Chrome count them late. The smaller pieces fade as they rise. */
  .intro :is(.hero, .contact-top) :is(h1, .answer, .hero-media, .form-wrap) { animation: intro-lift 0.9s var(--ease) both; }
  .intro :is(.hero, .contact-top) .eyebrow { animation-delay: calc(var(--lift) + 0.3s); }
  .intro :is(.hero, .contact-top) h1 { animation-delay: calc(var(--lift) + 0.35s); }
  .intro :is(.hero, .contact-top) :is(.answer, .hero-media, .form-wrap) { animation-delay: calc(var(--lift) + 0.43s); }
  .intro :is(.hero, .contact-top) :is(.btn-pair, .hero-meta) { animation-delay: calc(var(--lift) + 0.51s); }
  .intro :is(.hero, .contact-top) .hero-proof { animation-delay: calc(var(--lift) + 0.59s); }
  .intro .hero-bg img { animation: intro-settle 2s var(--ease) calc(var(--lift) + 0.1s) both; }
}
/* On phones and tablets the buttons sit above the paragraph, so they arrive first. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .intro .hero .btn-pair { animation-delay: calc(var(--lift) + 0.43s); }
  .intro .hero .answer { animation-delay: calc(var(--lift) + 0.51s); }
}
@keyframes curtain-logo { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes curtain-lift { from { transform: none; } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes intro-lift { from { transform: translateY(26px); } to { transform: none; } }
@keyframes intro-settle { from { transform: scale(1.08); } to { transform: none; } }

/* Review cards: real Google reviews, word for word. */
.review-card { margin: 0; gap: 16px; }
.review-card .stars { display: flex; gap: 2px; color: #c98a00; }
.review-card .stars .icon { width: 20px; height: 20px; fill: currentColor; }
.review-card blockquote { margin: 0; flex: 1 1 auto; }
.review-card blockquote p { font-size: 17px; line-height: 1.6; color: var(--ink); }
.review-card figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: var(--border); }
.review-name { font-weight: 700; color: var(--navy); }
.review-meta { font-size: var(--small); color: var(--muted); }
.review-card--ask { background: var(--tint); border-color: transparent; box-shadow: none; }
.review-card--ask .chip { background: var(--white); margin-bottom: 4px; }
.link-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }

/* Danielle's portrait photo, in the same 4 by 5 frame as the placeholder it replaced. */
.portrait--photo { display: block; padding: 0; overflow: hidden; background: var(--mist); box-shadow: var(--shadow); }
.portrait--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }