/* =============================================================================
   Mind Map Creative — style.css
   One stylesheet for the whole site. Mobile-first where it matters; no frameworks.

   CONTENTS
    1. Variables (:root)
    2. Font
    3. Base and reset
    4. Utilities
    5. Buttons
    6. Header and navigation
    7. Hero
    8. Info strip
    9. Sections and headings
   10. Summary box ("The short answer")
   11. Service cards
   12. Lists (checks, chips, numbered)
   13. Process steps and timeline
   14. Bundle phases
   15. Tables
   16. Recent work and Clients page
   17. Service area towns
   18. About quote
   19. Related services
   20. FAQ
   21. Contact
   22. Call-to-action band
   23. Footer
   24. Back-to-top button
   25. Reduced motion
   ============================================================================= */


/* ===== 1. VARIABLES ======================================================== */
:root {
  /* Brand colors (from the Mind Map Creative logo) */
  --navy: #123f6e;          /* headings, dark accents */
  --blue: #18599f;          /* logo dark blue */
  --sky: #0a96e0;           /* logo light blue (decorative only; too light for small text) */
  --link: #0b72b3;          /* links and labels (meets AA contrast on white) */
  --sky-pale: #e7f3fb;      /* icon backgrounds, tags */
  --dark: #0d2a4a;          /* hero overlay, strip */
  --footer: #0a2240;        /* footer background */
  --amber: #f6a623;         /* call buttons */
  --amber-dark: #e08f0b;    /* call button hover */

  /* Neutrals */
  --ink: #17232e;           /* body text */
  --muted: #516170;         /* secondary text */
  --line: #dde3e7;          /* borders */
  --tint: #f4f7fa;          /* alternate section background */
  --white: #fff;

  /* Type */
  --font-head: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape and spacing */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16, 42, 64, 0.08);
  --gutter: 24px;           /* page side padding */
  --section: 88px;          /* section top/bottom padding */
  --hdr: 76px;              /* header height (used for sticky offsets) */
}


/* ===== 2. FONT ============================================================= */
/* Sora (SIL Open Font License, see assets/OFL.txt). Latin subset, weights 600–800, ~19 KB. */
@font-face {
  font-family: "Sora";
  src: url("heading.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}


/* ===== 3. BASE AND RESET =================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 12px);   /* keeps #anchors clear of the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 17px/1.65 var(--font-body);
  color: var(--ink);
  background: var(--white);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--navy);
}

/* Visible keyboard focus everywhere (WCAG 2.2) */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

h3 {
  font-size: 1.18rem;
}

p {
  margin: 0 0 1em;
}


/* ===== 4. UTILITIES ======================================================== */
/* .wrap only sets side padding — never shorthand padding (it would wipe top/bottom on shared elements) */
.wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.narrow {
  max-width: 860px;
}

.center {
  text-align: center;
}

/* Visually hidden but read by screen readers and search engines */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
}

.skip:focus {
  left: 8px;
}

.ico {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.rounded {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Transparent graphics (PNG sources): no frame or shadow */
img.art {
  border-radius: 0;
  box-shadow: none;
}


/* ===== 5. BUTTONS ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.35em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1 var(--font-head);
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1.05em 1.55em;
  font-size: 1.05rem;
}

.btn-call {                     /* amber: phone and booking actions */
  background: var(--amber);
  color: var(--navy);
}

.btn-call:hover {
  background: var(--amber-dark);
  color: var(--navy);
}

.btn-light {                    /* white button on dark or colored backgrounds */
  background: var(--white);
  border-color: var(--line);
  color: var(--navy);
}

.btn-light:hover {
  border-color: var(--link);
  color: var(--navy);
}

.btn-ghost {                    /* outlined blue button on light backgrounds */
  background: transparent;
  border-color: var(--link);
  color: var(--link);
}

.btn-ghost:hover {
  background: var(--link);
  color: var(--white);
}

.btn-outline {                  /* outlined white button on the photo hero */
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--navy);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.4em;
}


/* ===== 6. HEADER AND NAVIGATION ============================================ */
/* Sticky; main.js hides it on scroll down and shows it on scroll up */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.25s;
}

.hdr.hide {
  transform: translateY(-100%);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--hdr);
}

.logo {
  display: flex;
  flex: none;
}

.logo img {
  width: auto;
  height: 54px;
}

.nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li {
  position: relative;
}

.nav-list a {
  display: block;
  padding: 10px 11px;
  white-space: nowrap;          /* keep "Service Areas" on one line */
  border-radius: 8px;
  font: 600 0.96rem/1.2 var(--font-head);
  color: var(--ink);
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a[aria-current],
.nav-list a.in {
  color: var(--link);
}

/* Small chevron after "Services" */
.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Services dropdown: opens on hover and on keyboard focus */
.sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.15s;
}

.has-sub:hover .sub,
.has-sub:focus-within .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sub a:hover {
  background: var(--sky-pale);
}

/* Key info line (hours) — only on wide screens where it fits on one line */
.hdr-info {
  display: none;
  margin: 0;
  font: 700 0.8rem/1 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hdr-call {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--navy);
  font: 700 0.98rem/1 var(--font-head);
  text-decoration: none;
  white-space: nowrap;      /* the only nowrap button: the number must stay on one line */
}

.hdr-call:hover {
  background: var(--amber-dark);
  color: var(--navy);
}

/* Menu button: 3 bars that turn into an X (shown below 1140px) */
.menu-btn {
  position: relative;
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.menu-btn span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2.4px;
  border-radius: 2px;
  background: var(--navy);
  transition: 0.2s;
}

.menu-btn span:nth-child(1) { top: 15px; }
.menu-btn span:nth-child(2) { top: 21.8px; }
.menu-btn span:nth-child(3) { top: 28.6px; }

.menu-btn[aria-expanded="true"] span:nth-child(1) {
  top: 21.8px;
  transform: rotate(45deg);
}

.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] span:nth-child(3) {
  top: 21.8px;
  transform: rotate(-45deg);
}

@media (min-width: 1500px) {
  .hdr-info {
    display: block;
  }
}

@media (max-width: 1140px) {
  .menu-btn {
    display: block;
  }

  .hdr-call {
    margin-left: auto;
  }

  /* Full-screen menu panel under the header */
  .nav {
    position: fixed;
    top: var(--hdr);
    left: 0;
    right: 0;
    display: none;
    height: calc(100vh - var(--hdr));
    height: calc(100dvh - var(--hdr));
    margin: 0;
    padding: 14px var(--gutter) 40px;
    overflow-y: auto;
    background: var(--white);
  }

  .nav.open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list a {
    padding: 14px 6px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.08rem;
  }

  .has-sub > a::after {
    display: none;
  }

  .sub {
    position: static;
    min-width: 0;
    padding: 0 0 0 16px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sub a {
    font-size: 1rem;
    font-weight: 500;
  }

  body.menu-open {
    overflow: hidden;           /* stop the page scrolling behind the open menu */
  }
}

@media (max-width: 600px) {
  :root {
    --hdr: 64px;
  }

  .hdr-in {
    gap: 10px;
  }

  .logo img {
    height: 42px;
  }

  /* Phones: round icon-only call button (the number stays for screen readers) */
  .hdr-call {
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
  }

  .hdr-call .ico {
    width: 20px;
    height: 20px;
  }

  .hdr-call-t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Landscape phones: thinner header */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --hdr: 58px;
  }

  .logo img {
    height: 40px;
  }
}


/* ===== 7. HERO ============================================================= */
/* Full-width photo with a brand-blue overlay so white text stays readable */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 380px;
  padding-top: 72px;
  padding-bottom: 72px;           /* equal top and bottom */
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
}

.hero-home {
  min-height: min(640px, 82vh);
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fills the hero; the source file itself is never cropped */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(9, 30, 56, 0.94) 0%, rgba(13, 52, 94, 0.84) 48%, rgba(13, 52, 94, 0.45) 100%);
}

.hero-in {
  width: 100%;
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  color: var(--white);
}

.kicker {
  margin-bottom: 0.9em;
  font: 700 0.82rem/1.3 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fd3fb;
}

.lede {
  max-width: 660px;
  font-size: 1.18rem;
  color: #dbe7f2;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: #b9cde0;
}

.crumbs a {
  color: #b9cde0;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: #7f9bb6;
}

@media (max-width: 700px) {
  .hero {
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .hero-home {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(9, 30, 56, 0.9), rgba(13, 52, 94, 0.86));
  }
}


/* ===== 8. INFO STRIP ======================================================= */
/* Three key facts under the home hero: icon + small label + value */
.strip {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.strip-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.strip-i {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
}

/* Thin dividers between the three facts */
.strip-i + .strip-i {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.strip-i:first-child {
  padding-left: 0;
}

.strip-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 150, 224, 0.16);
  color: #8fd3fb;
}

.strip-ico .ico {
  width: 20px;
  height: 20px;
}

.strip p {
  margin: 0;
  font: 700 1rem/1.35 var(--font-head);
}

.strip-l {
  display: block;
  margin-bottom: 3px;
  font: 700 0.72rem/1.2 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb4c8;
}

.strip a {
  color: var(--amber);
  text-decoration: none;
}

.strip a:hover {
  color: #ffd27a;
}

/* Tablets and phones: one fact per row, dividers become horizontal */
@media (max-width: 960px) {
  .strip-in {
    grid-template-columns: 1fr;
  }

  .strip-i {
    padding: 14px 0;
  }

  .strip-i + .strip-i {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ===== 9. SECTIONS AND HEADINGS ============================================ */
.sec {
  padding-top: var(--section);
  padding-bottom: var(--section);
}

/* Two WHITE sections in a row share one gap instead of doubling it.
   (A white section after a gray one keeps its full top padding.) */
.sec:not(.sec-alt) + .sec:not(.sec-alt) {
  padding-top: 0;
}

.sec-alt {
  background: var(--tint);
}

.sec-lede {
  max-width: 760px;
  margin-bottom: 2em;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Section heading = small descriptive label + slogan, in one <h2> */
.h-label {
  display: block;
  margin-bottom: 0.6em;
  font: 700 0.8rem/1.3 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

.h-sm {
  font-size: 1.35rem;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  :root {
    --section: 56px;
  }

  .split,
  .cols3 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ===== 10. SUMMARY BOX ===================================================== */
/* "The short answer": a plain-language summary that AI assistants and featured snippets can quote */
.quick {
  padding: 22px 26px;
  border-left: 4px solid var(--sky);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #f4f9fd;
}

.quick-t {
  margin-bottom: 0.7em;
  font: 700 0.82rem/1 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

.quick p:last-child {
  margin: 0;
  font-size: 1.08rem;
}


/* ===== 11. SERVICE CARDS =================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card > div {
  flex: 1;
}

.card h3 a {
  color: var(--navy);
  text-decoration: none;
}

/* The title link covers the whole card, so the card has one clear link */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card p {
  color: var(--muted);
}

.card-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 12px;
  background: var(--sky-pale);
  color: var(--link);
}

.card-go {
  font-weight: 700;
  color: var(--link);
}

/* The bundle card spans the full row */
.card-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 22px;
  align-items: center;
  background: var(--navy);
  border-color: var(--navy);
}

.card-feature .card-ico {
  margin: 0;
  background: rgba(246, 166, 35, 0.16);
  color: var(--amber);
}

.card-feature > div {
  min-width: 0;
}

.card-feature h3 {
  margin: 0 0 0.2em;
}

.card-feature h3 a {
  color: var(--white);
}

.card-feature p {
  margin: 0;
  color: #c9d6df;
}

.card-feature .card-go {
  color: var(--amber);
}

@media (max-width: 1060px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .card-feature {
    display: flex;
  }

  .card-feature .card-ico {
    margin-bottom: 16px;
  }

  .card-feature p {
    margin-bottom: 1em;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}


/* ===== 12. LISTS =========================================================== */
/* Checkmark list */
.checks {
  display: grid;
  gap: 10px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 32px;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--link) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.3 3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Pill-shaped tags */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1em 0 1.4em;
  padding: 0;
  list-style: none;
}

.center .chips {
  justify-content: center;
}

.chips li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.93rem;
}

/* Numbered list with blue numbers */
.numbered {
  display: grid;
  gap: 14px;
  max-width: 900px;
  padding-left: 1.4em;
}

.numbered li::marker {
  font: 700 1rem var(--font-head);
  color: var(--link);
}


/* ===== 13. PROCESS STEPS AND TIMELINE ====================================== */
/* Home page: 6 numbered step boxes */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--white);
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font: 800 1.9rem/1 var(--font-head);
  color: var(--link);
}

.steps p {
  margin: 0;
  color: var(--muted);
}

/* Process page: numbered timeline */
.timeline {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  padding: 22px 24px 20px 84px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  counter-increment: step;
}

.timeline li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font: 800 1.05rem/1 var(--font-head);
}

.timeline p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 960px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}


/* ===== 14. BUNDLE PHASES =================================================== */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.phases article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.phase-n {
  font: 700 0.8rem/1 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a86206;               /* darker amber for readable small text */
}

@media (max-width: 960px) {
  .phases {
    grid-template-columns: 1fr;
  }
}


/* ===== 15. TABLES ========================================================== */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.tbl {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.tbl caption {
  padding: 16px 20px;
  caption-side: top;
  text-align: left;
  font-size: 0.92rem;
  color: var(--muted);
}

.tbl th,
.tbl td {
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tbl thead th {
  border-top: 0;
  background: var(--navy);
  color: var(--white);
  font: 700 0.92rem/1.3 var(--font-head);
}

.tbl tbody th {
  font-weight: 700;
  color: var(--navy);
}

.tbl tbody tr:nth-child(even) {
  background: #fafbfb;
}

/* Phones: each row becomes a stacked block (no sideways scrolling) */
@media (max-width: 640px) {
  .tbl {
    min-width: 0;
  }

  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tbl tr {
    display: block;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  .tbl th,
  .tbl td {
    display: block;
    padding: 4px 18px;
    border: 0;
  }

  .tbl tbody th {
    font-size: 1.04rem;
  }
}


/* ===== 16. RECENT WORK AND CLIENTS PAGE ===================================================== */
.work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.work-i img,
.tile {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Branded tile shown until a screenshot is added */
.tile {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  background: linear-gradient(135deg, var(--blue), var(--sky));
}

.work-i:nth-child(2) .tile { background: linear-gradient(135deg, var(--navy), var(--blue)); }
.work-i:nth-child(3) .tile { background: linear-gradient(135deg, var(--link), var(--navy)); }
.work-i:nth-child(4) .tile { background: linear-gradient(135deg, var(--dark), var(--link)); }
.work-i:nth-child(5) .tile { background: linear-gradient(135deg, var(--sky), var(--navy)); }
.work-i:nth-child(6) .tile { background: linear-gradient(135deg, var(--blue), var(--dark)); }

.tile span {
  font: 800 1.25rem/1.25 var(--font-head);
  letter-spacing: -0.01em;
  color: var(--white);
}

.work-i h3 {
  margin: 16px 0 4px;
  font-size: 1.08rem;
}

.work-i h3 a {
  color: var(--navy);
  text-decoration: none;
}

.work-i h3 a:hover {
  color: var(--link);
}

.work-i p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Services done for the client (from PORTFOLIO_SERVICES in site_data.py) */
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.work-tags li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sky-pale);
  font-size: 0.8rem;
  color: var(--navy);
}

/* Home page cards link to the client's entry on the Clients page */
.work-i {
  position: relative;
}

.work-i h3 a::after {
  content: "";
  position: absolute;
  inset: 0;                     /* the whole card is one link */
}

.work-i img,
.work-i .tile {
  transition: transform 0.2s, box-shadow 0.2s;
}

.work-i:hover img,
.work-i:hover .tile {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(16, 42, 64, 0.16);
}

.work-more {
  margin: 36px 0 0;
  text-align: center;
}

/* Clients page: one card per client */
.clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.client {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  scroll-margin-top: calc(var(--hdr) + 16px);
}

.client img,
.client .tile {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.client-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 26px;
}

.client h3 {
  margin-bottom: 4px;
  font-size: 1.25rem;
}

.client-kind {
  margin: 0;
  color: var(--muted);
}

.client-svc {
  margin: 18px 0 6px;
  font: 700 0.75rem/1.2 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

.client .btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.75em 1.2em;
  font-size: 0.95rem;
}

.client-body > .client-kind + .btn,
.client .work-tags + .btn {
  margin-top: 22px;
}

/* Highlight the client a visitor jumped to from the home page */
.client:target {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(10, 150, 224, 0.25);
}

@media (max-width: 900px) {
  .work {
    grid-template-columns: 1fr 1fr;
  }

  .clients {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .work {
    grid-template-columns: 1fr;
  }
}


/* ===== 17. SERVICE AREA TOWNS ============================================== */
.town-group {
  margin-top: 34px;
}

.group-h {
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.town {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.town p {
  margin: 0;
  color: var(--muted);
}


/* ===== 18. ABOUT QUOTE ===================================================== */
.pull {
  margin: 0 0 1.6em;
  padding: 26px 30px;
  border-left: 5px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
  box-shadow: var(--shadow);
}

.pull p {
  margin: 0 0 0.6em;
  font: 600 1.22rem/1.55 var(--font-head);
  color: var(--navy);
}

.pull footer {
  font-weight: 700;
  color: var(--link);
}


/* ===== 19. RELATED SERVICES ================================================ */
.related {
  padding-top: 0;
  padding-bottom: 72px;
}

.sec-alt + .related {
  padding-top: var(--section);
}

.related-t {
  font: 700 0.8rem/1 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related a {
  display: block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.related a:hover {
  border-color: var(--link);
}


/* ===== 20. FAQ ============================================================= */
/* All answers visible (no accordions) so people, Google and AI assistants can read them */
.faq-i {
  padding: 22px 0 8px;
  border-top: 1px solid var(--line);
}

.faq-i h3 {
  margin-bottom: 0.45em;
  font-size: 1.12rem;
}

.faq-i p {
  color: var(--muted);
}

.related + .faq {
  padding-top: 0;
}


/* ===== 21. CONTACT ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-card {
  padding: 34px;
  border-radius: var(--radius);
  background: var(--tint);
}

.contact-card h3 {
  margin: 1.4em 0 0.4em;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

.contact-book {
  border: 1px solid var(--line);
  background: var(--white);
}

.contact-book .btn {
  margin: 6px 0 10px;
}

.big {
  margin: 0.2em 0 0.3em;
  font: 800 clamp(1.6rem, 3.4vw, 2.2rem)/1.2 var(--font-head);
}

.big a {
  color: var(--navy);
  text-decoration: none;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== 22. CALL-TO-ACTION BAND ============================================= */
.band {
  background: linear-gradient(120deg, var(--blue) 0%, var(--link) 100%);
  color: #eaf5fd;
}

.band-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.band-h {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  color: var(--white);
}

.band p {
  max-width: 640px;
  margin: 0;
}

.band-btns {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .band-in {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== 23. FOOTER ========================================================== */
.ftr {
  background: var(--footer);
  color: var(--white);
  font-size: 0.96rem;
}

.ftr a {
  color: var(--white);
  text-decoration: none;
}

.ftr a:hover {
  color: var(--amber);
}

.ftr-top {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.9fr 1fr;
  gap: 36px;
  padding-top: 60px;
  padding-bottom: 40px;
}

.ftr-top ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftr-h {
  margin-bottom: 1em;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.ftr-brand p {
  max-width: 340px;
  margin-top: 16px;
}

/* Same full-color logo as the header, on a white card so it reads on the dark footer */
.logo-ftr {
  display: inline-flex;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--white);
}

.logo-ftr img {
  height: 56px;
}

/* Round social icon buttons */
.ftr .soc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.soc-a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.15s;
}

.ftr .soc-a:hover {
  background: var(--sky);
  color: var(--white);
}

.soc-a .ico {
  width: 19px;
  height: 19px;
}

.ftr-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ftr-bot p {
  margin: 0;
  font-size: 0.88rem;
}

/* Designer credit: lower right, smaller and muted — visible but not prominent */
.ftr-bot .credit {
  margin-left: auto;
  font-size: 0.78rem;
}

.ftr .credit a {
  color: #8193a3;
}

.ftr .credit a:hover {
  color: #b8c6d1;
}

@media (max-width: 960px) {
  .ftr-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Phones: credit sits directly under the copyright, left-aligned */
@media (max-width: 560px) {
  .ftr-top {
    grid-template-columns: 1fr;
  }

  .ftr-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ftr-bot .credit {
    margin-left: 0;
  }
}


/* ===== 24. BACK-TO-TOP BUTTON ============================================== */
/* main.js adds .show after the visitor scrolls down */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s;
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--link);
  color: var(--white);
}

.to-top .ico {
  width: 22px;
  height: 22px;
}


/* ===== 25. REDUCED MOTION ================================================== */
/* Respect the visitor's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}