/* Spark Property Services — layout, rhythm, type scale and the utility classes
   the views use. Colour, type family and radius tokens all come from
   application.scss, which configures Bootstrap from the same Sass palette. This
   file only ever *consumes* tokens: no :root block, no --bs-* redeclarations,
   no literal colours. */

html, body { overflow-x: hidden; }
/* The footer is pinned to the bottom of the viewport on pages too short to fill
   it — /service-areas is two sections and would otherwise leave page background
   below the footer. The page layouts do not agree on a single content wrapper
   (about and services render the CTA band outside <main>), so the number of body
   children varies by page. Hence `margin-top: auto` on the footer, which claims
   whatever is left over without anything above it needing to know it exists. */
body {
  margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
.spark-footer { margin-top: auto; }

/* Nothing in the content should be able to push the page sideways on small screens. */
img, svg, iframe, table { max-width: 100%; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.012em; }

.container.spark-container { max-width: 1180px; --bs-gutter-x: 3rem; }

/* Bootstrap component overrides */
.btn { font-weight: 600; }
.btn-spark {
  --bs-btn-bg: var(--spark); --bs-btn-border-color: var(--spark); --bs-btn-color: var(--color-accent-900);
  --bs-btn-hover-bg: var(--spark-hover); --bs-btn-hover-border-color: var(--spark-hover);
  --bs-btn-hover-color: var(--color-accent-900);
}
.nav-underline .nav-link { color: var(--color-text); --bs-nav-underline-link-active-color: var(--color-text); }
.nav-underline .nav-link.active,
.nav-underline .nav-link:hover { border-bottom-color: var(--spark); }
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--color-accent-800);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-font-weight: 600;
}
/* Chrome */
.spark-header { background: rgba(var(--color-bg-rgb), 0.92); backdrop-filter: blur(8px); border-color: var(--color-divider) !important; }
.spark-header .navbar { min-height: 76px; }
/* Icon itself (colour and stroke weight) is generated by Bootstrap. */
.spark-header .navbar-toggler-icon { width: 1.35em; height: 1.35em; }
.spark-nav-inner { display: flex; align-items: center; gap: 1.5rem; }
.spark-nav-actions { display: flex; align-items: center; gap: 1rem; }
.spark-wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; color: var(--color-text); }
/* Intrinsic size is on the <img> for CLS; height here, width auto to keep the
   ratio. The file is the full horizontal lockup, mark and wordmark together. */
.spark-logo { height: 36px; width: auto; }
.spark-phone { color: var(--color-text); }
.spark-footer { background: var(--color-surface); }
.spark-footer-link { color: var(--color-neutral-700); text-decoration: none; }
.spark-footer-link:hover { color: var(--color-accent-800); }
.spark-social { font-size: 18px; line-height: 1; }

/* Editorial accent — use sparingly. */
.spark-editorial { font-family: var(--font-editorial); font-weight: 400; }

/* Rhythm */
.spark-hero { padding-top: 88px; padding-bottom: 72px; }
.spark-page { padding-top: 72px; padding-bottom: 96px; }
.spark-section { padding-top: 96px; padding-bottom: 96px; }
.spark-section-top { padding-top: 96px; }
/* Sections carry top padding only, so stacking them never doubles the gap. That
   leaves whichever one lands last sitting flush against the footer, so it has
   to close the page off itself — pages ending on .spark-section already do. */
main > .spark-section-top:last-child { padding-bottom: 96px; }
/* A section that continues the one above rather than starting a new subject —
   a prose block under a page intro, say. Half the gap, so the page still reads
   as one thought. */
.spark-section-tight { padding-top: 48px; }
main > .spark-section-tight:last-child { padding-bottom: 96px; }
.spark-band { background: var(--color-surface); }
.spark-rule { border-top: 3px solid var(--spark); }

/* Type scale */
.spark-h1 { font-size: 60px; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.spark-h1-sm { font-size: 52px; line-height: 1.06; letter-spacing: -0.015em; }
.spark-h2 { font-size: 40px; line-height: 1.1; }
.spark-h2-sm { font-size: 36px; line-height: 1.1; }
.spark-h3-lg { font-size: 22px; }
.spark-h3 { font-size: 20px; }
.spark-h3-sm { font-size: 19px; }
.spark-lede { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); text-wrap: pretty; }
.spark-body { font-size: 15px; line-height: 1.65; }
.spark-body-sm { line-height: 1.6; }
.spark-quote { font-family: var(--font-editorial); font-size: 19px; line-height: 1.45; }
.spark-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 0.75rem;
}
.spark-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 0.25rem; }
.spark-detail-value { font-size: 18px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.spark-detail-plain { font-size: 16px; line-height: 1.5; }
.spark-fineprint { font-size: 12px; color: var(--color-neutral-600); }
.spark-muted { color: var(--color-neutral-700); }
.spark-muted-2 { color: var(--color-neutral-600); }
.spark-ink { color: var(--color-text); }
.spark-link { color: var(--color-accent-700); text-decoration: none; }
/* A service-table row or service card whose headline points at that service's
   own page. The anchor wraps the heading, so it carries the colour itself. */
.spark-title-link { display: inline-block; color: inherit; text-decoration: none; }
.spark-title-link:hover,
.spark-title-link:focus-visible { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 4px; }
.spark-measure { max-width: 46ch; }
.spark-measure-tight { max-width: 18ch; }
.spark-measure-wide { max-width: 60ch; }
.spark-measure-narrow { max-width: 34ch; }

/* Long-form documents — policies, terms, anything that is mostly prose. The
   body copy is a size up from .spark-body and looser: these are read, not
   scanned. Richtext arrives as bare <p>/<ul>, so the rules target elements. */
.spark-prose { font-size: 16px; line-height: 1.7; color: var(--color-neutral-800); }
.spark-prose > :last-child { margin-bottom: 0; }
.spark-prose p { margin-bottom: 1rem; }
.spark-prose ul, .spark-prose ol { margin-bottom: 1rem; padding-left: 1.25rem; }
.spark-prose li { margin-bottom: 0.4rem; }
.spark-prose a { color: var(--color-accent-700); }
/* Sections are separated by their own rule rather than by whitespace alone, so
   a long policy still has visible joints when you scroll it. */
.spark-doc-section { scroll-margin-top: 96px; }
.spark-doc-section + .spark-doc-section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--color-divider); }
/* Contents rail. Sticky below the fixed header; hidden on narrow screens,
   where the sections themselves are the only navigation worth having. */
.spark-toc { position: sticky; top: 96px; }
.spark-toc-link {
  display: block; padding: 0.35rem 0 0.35rem 0.9rem; border-left: 2px solid var(--color-divider);
  font-size: 14px; line-height: 1.4; color: var(--color-neutral-700); text-decoration: none;
}
.spark-toc-link:hover, .spark-toc-link:focus-visible { color: var(--color-accent-800); border-left-color: var(--spark); }

/* The "how to reach us" block at the foot of a document page. Same detail
   pattern as the contact page, lifted onto a surface so it reads as the one
   actionable thing on a page of prose. */
.spark-contact-card { background: var(--color-surface); border-radius: var(--radius-lg); }

/* Cards and numerals */
.spark-card { background: var(--color-neutral-100); }
.spark-card-plain { background: var(--color-bg); }
.spark-card-dark { background: var(--color-accent-900); }
.spark-card-num { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; color: var(--color-accent); }
.spark-step { padding: 1.5rem 1.5rem 1.5rem 0; }
.spark-step + .spark-step { border-left: 1px solid var(--color-divider); padding-left: 1.5rem; }
.spark-step-num {
  font-family: var(--font-heading); font-weight: 800; font-size: 44px; letter-spacing: -0.015em;
  color: var(--spark); -webkit-text-stroke: 1px var(--color-accent-800);
}
.spark-stat { font-family: var(--font-heading); font-weight: 800; font-size: 38px; letter-spacing: -0.012em; }
.spark-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; }
.spark-client-list { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-neutral-600); }
.spark-cta { background: var(--color-accent-900); border-radius: var(--radius-lg); }
.spark-cta-body { font-size: 16px; color: var(--color-accent-200); }

/* Media */
.spark-hero-img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-lg); }
.spark-about-img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-lg); }
.spark-portrait { width: 100%; height: 240px; object-fit: cover; border-radius: 10px; }
.spark-avatar { width: 40px; height: 40px; object-fit: cover; }
.spark-map { height: 420px; }
.spark-map-full { position: absolute; inset: 0; }

@media (max-width: 991.98px) {
  .container.spark-container { --bs-gutter-x: 1.5rem; }

  /* Collapsed nav stacks; links get room to be tapped. */
  .spark-header .navbar-collapse { border-top: 1px solid var(--color-divider); margin-top: 0; }
  .spark-nav-inner { display: block; padding: 0.5rem 0 1.25rem; }
  .spark-nav-inner .navbar-nav { display: block; }
  .spark-nav-inner .nav-link { padding: 0.7rem 0; border-bottom: 0; font-size: 16px; }
  .spark-nav-inner .nav-link.active { color: var(--color-accent-700); }
  .spark-nav-actions { flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
  .spark-nav-actions .btn { flex: 1 1 auto; }

  .spark-h1 { font-size: 40px; }
  .spark-h1-sm { font-size: 36px; }
  .spark-h2 { font-size: 30px; }
  .spark-h2-sm { font-size: 28px; }
  .spark-hero-img, .spark-about-img { height: 320px; }
  .spark-step, .spark-step + .spark-step { padding: 1.25rem 0; border-left: 0; }
  .spark-step + .spark-step { border-top: 1px solid var(--color-divider); }
}

@media (max-width: 575.98px) {
  .spark-hero { padding-top: 48px; padding-bottom: 48px; }
  .spark-section, .spark-page { padding-top: 56px; padding-bottom: 56px; }
  .spark-section-top { padding-top: 56px; }
  main > .spark-section-top:last-child { padding-bottom: 56px; }
  .spark-section-tight { padding-top: 36px; }
  main > .spark-section-tight:last-child { padding-bottom: 56px; }
  .spark-h1 { font-size: 34px; }
  .spark-h1-sm { font-size: 30px; }
  .spark-h2 { font-size: 26px; }
  .spark-h2-sm { font-size: 24px; }
  .spark-hero-img, .spark-about-img { height: 240px; }
  .spark-step-num { font-size: 36px; }
  .spark-stat { font-size: 30px; }
  .spark-map { height: 300px; }
  .spark-measure-tight, .spark-measure-narrow { max-width: none; }
  .spark-cta { padding: 1.75rem !important; }
}