/* ==========================================================================
   C Drew Bookkeeping Solutions
   Flat Design + Accessible, on a Trust & Authority layout.

   Direction sourced from ui-ux-pro-max: closest product match is Home
   Services (plumber/electrician) — Flat Design + Accessible & Ethical,
   Conversion-Optimized + Trust, "Trust colour + Safety Orange".
   Brand green is the client's; orange is the action colour, used only on
   CTAs and rating stars so it never competes with the brand.
   ========================================================================== */

:root {
  /* Brand — sky blue.
     A pale baby blue can't carry white text (about 2.5:1), so the scale runs
     light for surfaces and tints, and deep for anything text sits on. */
  --brand:      #0369a1;   /* buttons, links, icons  — 5.9:1 with white  */
  --brand-700:  #075985;   /* hover                                      */
  --brand-900:  #0b2a3d;   /* deep bands and footer                      */
  --brand-50:   #f0f9ff;   /* icon tiles                                 */
  --brand-100:  #d8eefb;   /* tint borders                               */
  --sky-200:    #bae6fd;   /* hero wash                                  */
  --sky-300:    #7dd3fc;

  /* Action colour. orange-700, not orange-600 — 600 fails 4.5:1 with white. */
  --accent:     #c2410c;
  --accent-600: #ea580c;
  --accent-50:  #fff3ea;

  /* Neutrals: genuinely neutral, so the green reads as a decision */
  --ink:        #111827;
  --ink-2:      #374151;
  --muted:      #4b5563;
  --line:       #e2e8ee;
  --line-2:     #eef2f6;
  --bg:         #f5f8fb;
  --card:       #ffffff;

  --star:       #bf7500;  /* darker than a typical gold: #e8930c was 2.44:1 on white */

  --nav-h:      4.5rem;

  --shadow-sm:  0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .05);
  --shadow-md:  0 2px 4px rgba(17, 24, 39, .05), 0 6px 16px -6px rgba(17, 24, 39, .12);
  --shadow-lg:  0 4px 8px rgba(17, 24, 39, .05), 0 18px 36px -14px rgba(17, 24, 39, .18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-head {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

@media (max-width: 767px) { body { padding-bottom: 4.5rem; } }

::selection { background: var(--brand); color: #fff; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.t-h1      { font-size: clamp(1.95rem, 3.9vw, 2.85rem); line-height: 1.14; letter-spacing: -0.022em; }
.t-h2      { font-size: clamp(1.6rem, 2.9vw, 2.25rem);  line-height: 1.22; letter-spacing: -0.018em; }
.t-h3      { font-size: 1.1875rem; line-height: 1.35; }
.t-lead    { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; }
.t-body    { font-size: 1rem; line-height: 1.68; }
.t-small   { font-size: .9375rem; line-height: 1.6; }
.t-xs      { font-size: .8125rem; line-height: 1.5; }

.measure   { max-width: 42rem; }
.measure-s { max-width: 34rem; }

/* Short accent bar under a section heading. Conventional for this sector,
   and it earns its place by marking where a new topic starts. */
.head-bar::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-600);
  margin-bottom: 1.125rem;
}
.head-bar.on-dark::before { background: var(--sky-300); }

/* --------------------------------------------------------------------------
   Buttons — 44px minimum touch target
   -------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--accent-600); outline-offset: 2px; border-radius: 6px; }
.on-brand :focus-visible { outline-color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.875rem;          /* 46px */
  padding: .6875rem 1.375rem;
  border-radius: .5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9688rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: 0 0 auto; }

.btn-primary   { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); box-shadow: var(--shadow-md); }

.btn-accent    { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: #9f350a; border-color: #9f350a; box-shadow: var(--shadow-md); }

.btn-outline   { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-50); }

.btn-white     { background: #fff; color: var(--brand-900); border-color: #fff; box-shadow: var(--shadow-md); }
.btn-white:hover { background: var(--brand-50); border-color: var(--brand-50); }

.btn-ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-white:hover { border-color: #fff; background: rgba(255,255,255,.12); }

.link-brand {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .18s ease;
}
.link-brand:hover { color: var(--accent); }

/* An inline phone link inside a sentence. WCAG's inline exception applies,
   but vertical padding on an inline box grows the tap area without
   disturbing the line, so there's no reason not to. */
.link-brand.link-tap { padding-block: .75rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

/* Logo. The SVG is outlined lettering (no font dependency) with a
   transparent background, sized by height so it keeps its proportions. */
.site-logo {
  display: flex;
  align-items: center;
  min-height: 2.75rem;          /* 44px tap target */
}
.site-logo img {
  display: block;
  width: auto;
  height: 2.5rem;               /* 40px tall → about 210px wide */
}
/* Between 1024 and 1099px the full nav, logo and both buttons don't fit on
   one row. Drop the phone button there — the hero's Call button carries the
   number. Declared here, after .btn, so it beats .btn's display. */
.header-phone { display: none; }
@media (min-width: 1100px) { .header-phone { display: inline-flex; } }

.footer-logo {
  display: block;
  width: auto;
  height: 3rem;
  max-width: 100%;
}

.nav-link {
  font-size: .9688rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--ink-2);
  padding: .5rem .125rem;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-link:hover { color: var(--brand); border-bottom-color: var(--brand-100); }
.nav-link[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

.menu-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .5rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease;
}
.menu-btn:hover { background: var(--line-2); }

/* styles.css loads after tailwind.css, so `display:grid` above outranks the
   `lg:hidden` utility. Restate the breakpoint here rather than fight it. */
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.mobile-menu.is-open { grid-template-rows: 1fr; }
.mobile-menu > div { overflow: hidden; }
.mobile-menu a {
  display: block;
  padding: .875rem .25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Hero — a solid brand block. Nothing about it reads as paper.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--sky-200);
  background-image: linear-gradient(158deg, #eaf7ff 0%, #cbe9fb 48%, #b3ddf7 100%);
  color: var(--ink-2);
  border-bottom: 1px solid #a8d7f3;
}
.hero h1 { color: var(--ink); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.75rem;
  align-items: center;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9063rem;
  color: var(--muted);
}
.hero-trust svg { flex: 0 0 auto; color: var(--brand); }

/* Month-end card: flat, white, no paper texture. */
.checklist-card {
  background: var(--card);
  border: 1px solid #c2e2f7;
  border-radius: .875rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.0625rem 1.375rem;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
}
.checklist-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.checklist-badge {
  font-size: .75rem;
  font-weight: 700;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: .1875rem .625rem;
  opacity: 0;
  transition: opacity .45s ease;
}
.checklist-badge.is-on { opacity: 1; }

.checklist-row {
  display: flex;
  align-items: center;
  gap: .8125rem;
  padding: .8125rem 1.375rem;
  border-bottom: 1px solid var(--line-2);
  font-size: .9688rem;
  color: var(--muted);
  transition: color .35s ease;
}
.checklist-row:last-child { border-bottom: 0; }
.checklist-row.is-done { color: var(--ink); }

.check-dot {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--line-2);
  display: grid;
  place-items: center;
  transition: background-color .3s ease;
}
.checklist-row.is-done .check-dot { background: var(--brand); }
.check-dot svg { width: .8125rem; height: .8125rem; stroke: #fff; stroke-width: 3; fill: none;
                 stroke-linecap: round; stroke-linejoin: round;
                 stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset .3s ease .05s; }
/* The tick path is ~23 user units long. stroke-dasharray was 16, so the last
   7 units of the long upward arm fell in the dash gap and never drew — which
   left both arms the same length and made every tick read as a "v". 32 covers
   the whole path with headroom if the path is ever adjusted. */
.checklist-row.is-done .check-dot svg { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   Trust bar — third-party certification badges.

   Sits directly under the hero. Logos are normalised by HEIGHT, not width,
   so the tall QuickBooks shield and the wide Xero lockup sit on a shared
   optical baseline instead of one dwarfing the other. Explicit width/height
   attributes in the markup reserve the space so nothing shifts as they load.
   -------------------------------------------------------------------------- */

.trust-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.trust-bar-label {
  font-family: 'Poppins', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 2.75rem;
}

@media (min-width: 900px) {
  .trust-logos { justify-content: flex-start; gap: 2rem 4rem; }
}

.trust-logo {
  display: block;
  flex: 0 0 auto;
}

/* Wide lockups (Xero, AAT) */
.trust-logo img {
  display: block;
  width: auto;
  height: 3.875rem;        /* 62px */
  max-width: 100%;
}

/* The ProAdvisor badge is portrait, so matching heights would leave it
   visually tiny. A little extra height evens it up. */
.trust-logo.is-portrait img { height: 4.875rem; }

/* A bare wordmark carries no internal detail, so matched to a badge's height
   it reads as oversized. Pulling it back evens out the optical weight. */
.trust-logo.is-wordmark img { height: 3rem; }

@media (max-width: 480px) {
  .trust-logo img { height: 2.875rem; }
  .trust-logo.is-portrait img { height: 3.75rem; }
  .trust-logo.is-wordmark img { height: 2.25rem; }
}

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */

.proof {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.proof-item { display: flex; align-items: flex-start; gap: .875rem; }
.proof-icon {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  border-radius: .625rem;
  background: var(--brand-50);
  color: var(--brand);
  display: grid; place-items: center;
}
.proof-title { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ink); font-size: 1rem; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .75rem;
  box-shadow: var(--shadow-sm);
}

.svc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.625rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.svc-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-100); transform: translateY(-2px); }

.svc-icon {
  width: 3rem; height: 3rem;
  border-radius: .625rem;
  background: var(--brand-50);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: 1.125rem;
}
.svc-card h3 { margin-bottom: .5rem; }

/* Service tile grid. Flex rather than CSS grid so a part-filled last row
   centres instead of hugging the left edge — with five tiles that's one
   orphan at two columns and two at three. Same breakpoints and gap as the
   grid it replaces (sm:2 / lg:3, gap-5). */
.svc-grid {
  --svc-gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--svc-gap);
}
.svc-grid > * { flex: 0 0 100%; }
@media (min-width: 640px) {
  .svc-grid > * { flex-basis: calc((100% - var(--svc-gap)) / 2); }
}
@media (min-width: 1024px) {
  .svc-grid > * { flex-basis: calc((100% - 2 * var(--svc-gap)) / 3); }
}

/* Steps — numbered because it genuinely is a sequence */
.step-card { position: relative; padding-left: 4.25rem; }
.step-badge {
  position: absolute;
  left: 0; top: 0;
  width: 3rem; height: 3rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Reviews — visible by default. Hiding them is the flagged anti-pattern
   for local-service sites.
   -------------------------------------------------------------------------- */

.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.stars { display: flex; gap: .1875rem; color: var(--star); }
.stars svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }

.review-who { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .25rem; }
.review-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .875rem;
}

/* Content the client still has to supply. Loud on purpose. */
.needs-content {
  border: 2px dashed var(--accent-600);
  background: var(--accent-50);
  border-radius: .75rem;
  padding: 1.25rem 1.375rem;
}
.needs-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .75rem;
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  padding: 1.125rem 1.375rem;
  min-height: 3.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.0313rem;
  color: var(--ink);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.faq-q:hover { color: var(--brand); background: var(--brand-50); }

.faq-chevron {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  color: var(--brand);
  transition: transform .28s ease;
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-a.is-open { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.375rem 1.25rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Brand band
   -------------------------------------------------------------------------- */

.band {
  background: var(--brand-900);
  background-image: linear-gradient(150deg, #10415f 0%, #0b2a3d 100%);
  color: rgba(255,255,255,.85);
}
.band h2, .band h3 { color: #fff; }

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.map-frame {
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--brand-50);
  min-height: 20rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .9063rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4375rem;
}
.field-hint { font-size: .8125rem; color: var(--muted); font-weight: 400; }

.field {
  width: 100%;
  min-height: 2.875rem;
  background: #fff;
  border: 1px solid #cbd6e0;
  border-radius: .5rem;
  padding: .6875rem .875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder { color: #94a2b0; }
.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, .18);
}
.field[aria-invalid="true"] { border-color: #b91c1c; }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .14); }

.field-error {
  display: none;
  align-items: center;
  gap: .375rem;
  font-size: .8438rem;
  font-weight: 600;
  color: #b91c1c;
  margin-top: .375rem;
}
.field-error.is-shown { display: flex; }

/* Form sending state, failure alert and spam trap */
.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }

.form-alert {
  border: 1px solid #f5c2c0;
  border-left: 4px solid #b91c1c;
  background: #fef2f2;
  border-radius: .625rem;
  padding: 1rem 1.25rem;
}

/* Off-screen rather than display:none — some bots skip hidden fields. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer + mobile action bar
   -------------------------------------------------------------------------- */

.site-footer { background: #0b2a3d; color: rgba(255,255,255,.68); }
.site-footer h3 { color: #fff; font-size: .9375rem; }
/* Footer links were 20px tall — below the 44px touch minimum. Give them a
   real target rather than relying on the text box. */
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgba(255,255,255,.82);
  transition: color .18s ease;
}
.site-footer li { display: flex; align-items: center; min-height: 2.25rem; }

/* The credit link sits inside a sentence, so the 44px block target above
   would break the line. Vertical padding grows the tap area instead. */
.site-footer .credit-link {
  display: inline;
  min-height: 0;
  padding-block: .625rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Footer badges. The footer is dark navy and the Xero lockup carries its own
   dark teal, which would sink into it — so each sits on a light chip. That
   keeps the brand colours untouched, which the usage terms require. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: .5rem;
  padding: .4375rem .625rem;
  min-height: 2.75rem;
}

.footer-badge img {
  display: block;
  width: auto;
  height: 1.625rem;          /* 26px */
}
.footer-badge.is-portrait img { height: 2.125rem; }
.footer-badge.is-wordmark img { height: 1.25rem; }

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(17,24,39,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9688rem;
}
.action-bar .ab-call  { background: var(--brand); color: #fff; }
.action-bar .ab-quote { background: #fff; color: var(--brand); }

@media (min-width: 768px) { .action-bar { display: none; } }

/* --------------------------------------------------------------------------
   Legal pages — long-form prose
   -------------------------------------------------------------------------- */

.prose-legal { max-width: 46rem; }
.prose-legal h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.prose-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose-legal h3 { font-size: 1.0625rem; margin-top: 1.5rem; margin-bottom: .375rem; }
.prose-legal p,
.prose-legal li { font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.prose-legal p + p { margin-top: .875rem; }
.prose-legal ul { list-style: disc; padding-left: 1.25rem; margin-top: .625rem; }
.prose-legal li + li { margin-top: .375rem; }
.prose-legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose-legal a:hover { color: var(--accent); }
.prose-legal strong { color: var(--ink); }

/* Key/value table for the business disclosures and the cookie list. */
.legal-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9688rem; }
.legal-table th,
.legal-table td { text-align: left; vertical-align: top; padding: .75rem .875rem; border-bottom: 1px solid var(--line); }
.legal-table th { width: 38%; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ink); }
.legal-table thead th { background: var(--brand-50); width: auto; font-size: .875rem; }
.legal-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: .625rem; background: #fff; }
.legal-scroll .legal-table { margin-top: 0; }
.legal-scroll tr:last-child th,
.legal-scroll tr:last-child td { border-bottom: 0; }

/* Footer legal row */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-top: 1rem;
}
.footer-legal a,
.footer-legal button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.82);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.footer-legal a:hover,
.footer-legal button:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Cookie consent

   ICO / PECR rules this is built to:
   - nothing non-essential runs until the visitor opts in
   - "Reject" is exactly as easy and as prominent as "Accept" — same size,
     same style, same number of clicks
   - no cookie wall: the banner never blocks the page
   - the choice can be changed at any time from "Cookie settings" in the footer
   -------------------------------------------------------------------------- */

.cc-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  max-width: 44rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .875rem;
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.375rem;
}
/* Clear the fixed mobile Call / Quote bar rather than sit on top of it. */
@media (max-width: 767px) {
  .cc-banner { left: .75rem; right: .75rem; bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}
.cc-banner h2 { font-size: 1.0625rem; }
.cc-banner p { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); margin-top: .375rem; }
.cc-banner a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.cc-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1rem; }
.cc-actions .btn { flex: 1 1 9rem; }

/* Accept and Reject deliberately share one style so neither is nudged. */
.cc-choice { background: var(--brand); color: #fff; border-color: var(--brand); }
.cc-choice:hover { background: var(--brand-700); border-color: var(--brand-700); }

.cc-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  border: 0;
  border-radius: .875rem;
  padding: 0;
  box-shadow: var(--shadow-lg);
  color: var(--ink-2);
}
.cc-dialog::backdrop { background: rgba(11, 42, 61, .45); }
.cc-dialog-inner { padding: 1.5rem; }
.cc-dialog h2 { font-size: 1.25rem; }

.cc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.cc-row:first-of-type { margin-top: 1rem; }
.cc-row h3 { font-size: 1rem; }
.cc-row p { font-size: .875rem; line-height: 1.55; color: var(--muted); margin-top: .25rem; }

/* Toggle switch built on a real checkbox, so it stays keyboard and
   screen-reader operable. */
.cc-switch { position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.625rem; margin-top: .125rem; }
.cc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-switch span {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color .2s ease;
  pointer-events: none;
}
.cc-switch span::after {
  content: '';
  position: absolute; top: .1875rem; left: .1875rem;
  width: 1.25rem; height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.cc-switch input:checked + span { background: var(--brand); }
.cc-switch input:checked + span::after { transform: translateX(1.125rem); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + span { opacity: .55; }
.cc-switch input:focus-visible + span { outline: 3px solid var(--accent-600); outline-offset: 2px; }

.cc-always { font-size: .8125rem; font-weight: 600; color: var(--brand); white-space: nowrap; margin-top: .25rem; }

.cc-status {
  font-size: .875rem;
  color: var(--brand);
  font-weight: 600;
  min-height: 1.25rem;
  margin-top: .75rem;
}

/* --------------------------------------------------------------------------
   Motion — Subtle tier. One reveal, nothing choreographed.
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .38s ease-out, transform .38s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .action-bar, .mobile-menu { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}