:root {
  --brand: #17557d;
  --ink: #14304a;
  --accent: #c2703d;
  --body: #45586b;
  --mist: #cfdce8;
  --surface: #fafaf8;
  --white: #ffffff;
}

html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface); font-family: 'Montserrat', sans-serif; color: var(--body); -webkit-font-smoothing: antialiased; }
    a { color: var(--brand); text-decoration: none; }
    a:hover { color: var(--accent); }

/* hover states lifted out of style-hover attributes */
.hv1:hover { color: #17557d !important; }
.hv2:hover { color: #17557d !important; }
.hv3:hover { color: #17557d !important; }
.hv4:hover { color: #17557d !important; }
.hv5:hover { background: #14304a !important; color: #ffffff !important; transform: translateY(-1px) !important; }
.hv6:hover { background: #14304a !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 16px 30px -12px rgba(20,48,74,0.55) !important; }
.hv7:hover { border-color: #17557d !important; background: rgba(23,85,125,0.05) !important; color: #14304a !important; }
.hv8:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv9:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv10:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv11:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv12:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv13:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 34px -14px rgba(20,48,74,0.28) !important; }
.hv14:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.4) !important; color: #14304a !important; }
.hv15:hover { color: #ffffff !important; }
.hv16:hover { color: #ffffff !important; }
.hv17:hover { color: #ffffff !important; }
.hv18:hover { color: #ffffff !important; }
.hv19:hover { color: #ffffff !important; }
.hv20:hover { color: #ffffff !important; }
.hv21:hover { background: #a85d30 !important; color: #ffffff !important; transform: translateY(-2px) !important; }

/* floating call-to-action, revealed after scrolling past the hero */
.float-cta {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}
.float-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.float-cta:hover { background: #a85f31 !important; }

/* scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Off-canvas navigation

   Appears below 900px, where the full nav (logo + four links + button, about
   789px of content) can no longer sit on one line. Unlike the rest of the
   page these are hand-written components, not exported inline styles, so
   they use ordinary class selectors and need no !important.
   --------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(20,48,74,0.16);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(78vw, 300px);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 28px;
  background: var(--surface);
  box-shadow: -20px 0 44px -24px rgba(20,48,74,0.55);
  transform: translateX(100%);
  visibility: hidden;
  /* visibility flips instantly on open but waits out the slide on close.
     A plain `visibility .32s` leaves the panel hidden for the first frame,
     which silently swallows the focus() call that moves focus into it. */
  transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

.mobile-menu a {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  padding: 13px 4px;
  border-bottom: 1px solid rgba(20,48,74,0.08);
}
.mobile-menu a:hover { color: var(--accent); }

.mobile-menu-close {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.mobile-menu-close:hover { color: var(--accent); }

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(20,48,74,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility 0s linear 0s;
}

body.menu-open { overflow: hidden; }

/* above the breakpoint the panel must not reachable by keyboard or screen
   reader, even if a resize caught it open */
@media (min-width: 901px) {
  .mobile-menu,
  .mobile-menu-backdrop { display: none; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* the four section links live in the panel now; the booking button stays */
  nav > div > div > a[href^="#"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .float-cta { transition: none; }
  .mobile-menu,
  .mobile-menu-backdrop { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Responsive breakpoints

   The markup uses inline styles, so every override below carries !important
   for the same reason the .hvN:hover rules do — inline styles otherwise win.

   Selectors hang off the section ids already in index.html rather than new
   classes, so a rebrand never has to touch the markup. If you reorder the
   children of a section, re-check the :first-child / :last-child selectors.
   --------------------------------------------------------------------------- */

/* --- tablet: two-column grids collapse ----------------------------------- */
@media (max-width: 900px) {
  /* hero and about are the two side-by-side grids */
  #top,
  #about {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  #top { padding-top: 56px !important; padding-bottom: 68px !important; }
  #about { padding-top: 68px !important; padding-bottom: 68px !important; }

  #top img { height: 420px !important; }
  #about img { height: 380px !important; }

  /* the two badges are absolutely positioned with negative offsets, which
     is what pushes the document wider than the viewport. Put them back in
     flow beneath their image. */
  #top > div:last-child > div,
  #about > div:first-child > div {
    position: static !important;
    margin-top: 14px !important;
  }

  /* footer: four columns -> two */
  #contact > div > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }

  #services, #reviews { padding-top: 76px !important; padding-bottom: 76px !important; }

  #top h1 { font-size: 44px !important; }
  h2 { font-size: 32px !important; }
}

/* --- phone: everything to a single column --------------------------------- */
@media (max-width: 600px) {
  /* narrower gutters across every top-level band */
  header, section, footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #top { padding-top: 44px !important; padding-bottom: 56px !important; }
  #about, #services, #reviews { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* announcement bar: wrap instead of running off the edge */
  body > div:first-child {
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
  }
  /* once it wraps, the "·" is left dangling at the end of the first line */
  body > div:first-child > span:nth-child(2) { display: none !important; }

  /* nav: logo, booking button and hamburger all on one row */
  nav > div {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  nav > div > div {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .nav-toggle { width: 34px; height: 34px; }
  /* business.name length varies per client, so the logo shrinks and
     ellipsises rather than pushing the button off the row */
  nav > div > a[href="#top"] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    gap: 8px !important;
  }
  nav > div > a[href="#top"] > span:first-child {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }
  nav > div > a[href="#top"] > span:last-child {
    font-size: 15px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  nav > div > div > a[target="_blank"] {
    font-size: 12px !important;
    padding: 8px 11px !important;
    white-space: nowrap;
  }

  #top h1 { font-size: 33px !important; }
  h2 { font-size: 26px !important; }

  #top img { height: 300px !important; }
  #about img { height: 280px !important; }

  /* hero buttons go full width — easier tap targets than side-by-side */
  #top > div:first-child > div:nth-last-child(2) a {
    flex: 1 1 100%;
    text-align: center;
  }

  /* hero stats row */
  #top > div:first-child > div:last-child {
    gap: 22px !important;
    margin-top: 32px !important;
  }

  /* service and review card grids */
  #services > div > div:last-child,
  #reviews > div > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* service-area chips — the only data-reveal div whose children are spans */
  div[data-reveal] > span {
    padding: 7px 13px !important;
    font-size: 13px !important;
  }

  /* booking call-to-action band */
  section[data-reveal] > div { padding: 40px 24px !important; }

  /* footer: two columns -> one */
  #contact > div > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  #contact { padding-top: 56px !important; }

  .float-cta {
    right: 12px !important;
    bottom: 12px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }

  /* --- centred layout on phones -------------------------------------------
     text-align cascades from body and covers most of the page. The rules
     below re-centre what inheritance cannot reach: flex rows, which need
     justify-content, and blocks carrying their own max-width, which need
     auto side margins or they stay pinned left. */
  body { text-align: center; }

  /* hero — intro paragraph (max-width: 460px), button row, stats row */
  #top > div:first-child > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #top > div:first-child > div,
  #top > div:last-child > div {
    justify-content: center !important;
  }

  /* section intros carry max-width: 560px */
  #services > div > div:first-child,
  #reviews > div > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* about — numbered rows put their badge above the text instead of beside */
  #about > div:last-child > div > div[data-reveal] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* booking band — inner block carries max-width: 520px */
  section[data-reveal] > div { justify-content: center !important; }
  section[data-reveal] > div > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* footer — logo row, and the blurb carrying max-width: 280px */
  #contact > div > div > div:first-child > div {
    justify-content: center !important;
  }
  #contact > div > div > div:first-child > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}