/* ==========================================================================
   1. VARIABLES (colors, shadow, radius used across the whole site)
   ========================================================================== */
:root {
  --navy: #0b2340;
  --navy-2: #123556;
  --blue: #1c5d91;
  --gold: #c6a15b;
  --gold-soft: #f3ead8;
  --ink: #172330;
  --muted: #657384;
  --line: #e3e8ed;
  --soft: #f6f8fa;
  --white: #fff;
  --green: #178a55;
  --shadow: 0 18px 45px rgba(11, 35, 64, .09);
  --radius: 14px;
}


/* ==========================================================================
   2. BASE / RESET STYLES
   ========================================================================== */

/* Include padding and border in element width */
* {
  box-sizing: border-box;
}

/* Smooth scrolling, with space left for the sticky header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* Default text style for the whole page */
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Links look like normal text (no color, no underline) */
a {
  color: inherit;
  text-decoration: none;
}

/* Buttons and inputs use the page font */
button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Centered content wrapper */
.container {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

/* "Skip to content" link: hidden off-screen until focused with keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 15px;
  top: 15px;
  background: #fff;
  padding: 10px 14px;
  z-index: 200;
}


/* ==========================================================================
   3. TOP BAR (thin dark strip above the header)
   ========================================================================== */
.topbar {
  background: #071b31;
  color: #c8d1da;
  font-size: 13px;
}

.topbar-inner {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-links {
  display: flex;
  gap: 12px;
}

.top-links a:hover {
  color: #fff;
}


/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */

/* Sticky header that stays at the top while scrolling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(11, 35, 64, .08);
  backdrop-filter: blur(12px);
  transition: box-shadow .2s;
}

/* Shadow added (by JavaScript) after the page is scrolled */
.site-header.scrolled {
  box-shadow: 0 8px 25px rgba(11, 35, 64, .08);
}

/* Row holding the logo and the menu */
.nav-wrap {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* --- Brand / logo --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  display: block;
  width: 132px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name strong {
  font-size: 18px;
  color: var(--navy);
  letter-spacing: -.02em;
}

.brand-name small {
  margin-top: 4px;
  color: #8b7040;
  font-size: 8px;
  letter-spacing: .24em;
  font-weight: 700;
}

/* --- Main menu (desktop) --- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 600;
  color: #455364;
}

.main-nav > a:not(.nav-whatsapp):hover {
  color: var(--navy);
}

/* WhatsApp button inside the menu */
.nav-whatsapp {
  padding: 10px 17px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
}

.nav-whatsapp:hover {
  background: var(--navy-2);
}

/* Hamburger button (hidden on desktop, shown on mobile) */
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px;
}


/* ==========================================================================
   5. HERO SECTION (big banner at the top)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #06233d 0%, #0b3152 48%, #1b5378 100%);
  border-bottom: 1px solid #0b2942;
}

/* Decorative circles in the background */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg span {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
}

.hero-bg span:first-child {
  width: 520px;
  height: 520px;
  right: -220px;
  top: -240px;
}

.hero-bg span:last-child {
  width: 330px;
  height: 330px;
  right: -70px;
  bottom: -190px;
}

/* Two-column layout: text on left, panel on right */
.hero-inner {
  min-height: 580px;
  padding: 78px 0 70px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 80px;
}

/* Small label text above headings */
.eyebrow {
  display: inline-block;
  color: #b98d38;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
}

.hero .eyebrow {
  padding-left: 20px;
  border-left: 2px solid #c99b3b;
  color: #e2bf75;
}

.hero h1 {
  max-width: 760px;
  margin: 15px 0 17px;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.hero h1 em {
  font-style: normal;
  color: #fff;
}

.hero-lead {
  max-width: 650px;
  margin: 0;
  color: #dbe7f0;
  font-size: 19px;
}

.hero-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 19px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  transition: transform .2s, background .2s, border-color .2s;
}

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

/* Gold button */
.btn-primary {
  background: #c99b3b;
  color: #fff;
  border-color: #c99b3b;
}

.btn-primary:hover {
  background: #b8892d;
  border-color: #b8892d;
}

/* White button */
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* White button with grey border */
.btn-outline {
  background: #fff;
  border-color: #ccd6df;
  color: var(--navy);
}

/* --- Quick facts row (numbers under the hero text) --- */
.quick-facts {
  display: flex;
  gap: 0;
  margin-top: 42px;
}

.quick-facts div {
  min-width: 145px;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.quick-facts div:last-child {
  border-right: 0;
}

.quick-facts strong {
  display: block;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  line-height: 1;
}

.quick-facts span {
  display: block;
  margin-top: 5px;
  color: #c7d6e2;
  font-size: 12px;
}


/* ==========================================================================
   6. HERO PANEL (white card on the right side of the hero)
   ========================================================================== */
.hero-panel {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--radius);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .18);
  overflow: hidden;
}

/* Panel title area with a small gold line on top */
.panel-heading {
  position: relative;
  padding: 25px 25px 17px;
  border-bottom: 1px solid var(--line);
}

.panel-heading:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 44px;
  height: 3px;
  background: #c99b3b;
}

.panel-heading span {
  display: block;
  color: #9a7b43;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
}

.panel-heading strong {
  display: block;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-size: 26px;
  margin-top: 6px;
}

/* Each clickable row inside the panel */
.quick-service {
  display: grid;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 17px 24px;
  border-bottom: 1px solid #edf0f2;
  transition: background .2s, padding .2s;
}

.quick-service:last-child {
  border-bottom: 0;
}

.quick-service:hover {
  background: #f7f9fb;
  padding-left: 28px;
}

.quick-service > b {
  color: var(--gold);
  font-size: 11px;
}

.quick-service span {
  display: block;
}

.quick-service strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
}

.quick-service small {
  display: block;
  margin-top: 2px;
  color: #788594;
  font-size: 12px;
}

.quick-service i {
  font-style: normal;
  color: #8d9aa7;
  font-size: 18px;
}


/* ==========================================================================
   7. SERVICE FINDER (search box + filter chips below the hero)
   ========================================================================== */
.service-finder-section {
  position: relative;
  z-index: 5;
  background: #fff;
  margin-top: -1px;
}

.finder-box {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 35px;
  align-items: center;
  padding: 25px 28px;
  border: 1px solid #dfe5ea;
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 10px 30px rgba(11, 35, 64, .06);
}

/* Small gold line on top of the box */
.finder-box:before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  width: 42px;
  height: 3px;
  background: #c99b3b;
}

.finder-copy h2 {
  margin: 4px 0 2px;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-size: 25px;
  line-height: 1.2;
}

.finder-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.finder-control {
  position: relative;
}

/* --- Search input --- */
.search-wrap {
  height: 48px;
  display: flex;
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #d5dee6;
  border-radius: 9px;
}

.search-icon {
  padding-left: 15px;
  color: #81909f;
  font-size: 22px;
  line-height: 1;
}

.search-wrap input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 11px;
  color: var(--ink);
  font-size: 15px;
}

.search-wrap input::placeholder {
  color: #93a0ac;
}

.clear-search {
  border: 0;
  background: transparent;
  color: #7c8995;
  font-size: 22px;
  padding: 0 14px;
}

/* --- Dropdown list of search results --- */
.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  background: #fff;
  border: 1px solid #dfe5ea;
  border-radius: 9px;
  box-shadow: 0 15px 30px rgba(11, 35, 64, .13);
  overflow: hidden;
  display: none;
  z-index: 30;
}

/* Shown by JavaScript when there are results */
.search-results.visible {
  display: block;
}

.search-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: #fff;
  padding: 12px 15px;
  text-align: left;
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result:hover {
  background: #f5f8fa;
}

.search-result strong {
  color: var(--navy);
  font-size: 14px;
}

.search-result small {
  color: #8895a2;
  font-size: 11px;
}

/* --- Filter chips (small rounded buttons) --- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.filter-chip {
  border: 1px solid #d8e0e6;
  border-radius: 999px;
  background: #fff;
  color: #536272;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
}

/* Hovered or selected chip */
.filter-chip:hover,
.filter-chip.active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* --- Result summary below the chips --- */
.finder-results {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: #f7f9fb;
  border-radius: 8px;
  color: #596878;
  font-size: 12px;
}

.finder-results.has-results {
  display: block;
}

.finder-results button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  padding: 4px 0;
  margin-right: 14px;
}

.finder-results button:hover {
  text-decoration: underline;
}


/* ==========================================================================
   8. SERVICES SECTION (categories and service cards)
   ========================================================================== */

/* Common spacing for all main sections */
.section {
  padding: 86px 0;
}

.services {
  background: #fff;
}

/* Section title row */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 28px;
}

/* Big headings used in several sections */
.section-head h2,
.about h2,
.contact h2 {
  margin: 7px 0 0;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.section-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.section-link span {
  color: var(--gold);
}

/* --- Category tabs --- */
.category-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.category-tab {
  border: 1px solid #d8e0e6;
  background: #fff;
  color: #5b6978;
  padding: 11px 17px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.category-tab:hover,
.category-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --- One category block (heading + cards) --- */
.service-category {
  scroll-margin-top: 100px;
  padding: 30px 0 38px;
  border-top: 1px solid var(--line);
}

.category-heading {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

/* Round number badge */
.category-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d9c49a;
  border-radius: 50%;
  color: #9a7b43;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}

.category-heading h3 {
  margin: 0;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-size: 29px;
  line-height: 1.15;
}

.category-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* --- Service cards grid (4 columns on desktop) --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 19px;
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 11px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

.service-card:hover {
  border-color: #c8d4df;
  box-shadow: 0 12px 28px rgba(11, 35, 64, .08);
  transform: translateY(-2px);
}

.service-card h4 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.4;
}

.service-card p {
  margin: 9px 0 18px;
  color: #73808e;
  font-size: 14px;
  line-height: 1.6;
}

/* "Enquire" style link at the bottom of each card */
.service-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #174f7d;
  font-size: 12px;
  font-weight: 800;
}

.service-cta span {
  color: var(--gold);
}

/* --- "View more" behaviour: extra cards are hidden until expanded --- */
.extra-service {
  display: none;
}

.service-category.expanded .extra-service {
  display: flex;
}

/* --- Search behaviour: show only matching cards --- */
.service-category.search-focus .service-card {
  display: none;
}

.service-category.search-focus .service-card.search-match {
  display: flex;
}

.service-category.search-focus .extra-service.search-match {
  display: flex;
}

.service-category.search-focus .view-more {
  display: none;
}

/* Fade categories that don't match */
.service-category.dimmed {
  opacity: .38;
}

/* Highlight a card (gold border and glow) */
.service-card.service-highlight {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, .15);
}

.view-more {
  display: block;
  margin: 17px auto 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.view-more:hover {
  text-decoration: underline;
}


/* ==========================================================================
   9. ABOUT SECTION
   ========================================================================== */
.about {
  background: #f6f8fa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Two columns: text on left, key points on right */
.about-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: center;
}

.about p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #657383;
  font-size: 17px;
}

.about-points {
  border-left: 1px solid #d7dfe6;
}

.about-points div {
  padding: 17px 0 17px 28px;
  border-bottom: 1px solid #e1e6ea;
}

.about-points div:last-child {
  border-bottom: 0;
}

.about-points strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
}

.about-points span {
  display: block;
  margin-top: 3px;
  color: #778594;
  font-size: 14px;
}


/* ==========================================================================
   10. REVIEWS SECTION (Google rating card)
   ========================================================================== */
.reviews {
  background: #f6f8fa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Three columns: text | rating | buttons */
.reviews-card {
  display: grid;
  grid-template-columns: 1.2fr auto auto;
  align-items: center;
  gap: 38px;
  padding: 34px 38px;
  background: #fff;
  border: 1px solid #dfe5ea;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.reviews-copy h2 {
  margin: 7px 0 0;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.reviews-copy p {
  margin: 10px 0 0;
  color: #657383;
  font-size: 16px;
  max-width: 520px;
}

/* Rating number + stars */
.google-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 205px;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.rating-score {
  font-family: "Playfair Display", serif;
  font-size: 42px;
  line-height: 1;
  color: var(--navy);
}

.rating-details strong,
.rating-details span {
  display: block;
}

.rating-details strong {
  margin-top: 2px;
  color: var(--navy);
  font-size: 14px;
}

.rating-details span {
  margin-top: 2px;
  color: #778594;
  font-size: 13px;
}

.stars {
  color: #c99b3b;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}

/* Buttons stacked vertically */
.reviews-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 205px;
}

.reviews-actions .btn {
  width: 100%;
  font-size: 14px;
  min-height: 44px;
}


/* ==========================================================================
   11. CONTACT SECTION (details + map)
   ========================================================================== */
.contact {
  background: #fff;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.contact-copy p {
  max-width: 610px;
  color: #657383;
  font-size: 17px;
  margin: 18px 0 0;
}

.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.contact-details {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.contact-details a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.contact-details small {
  display: block;
  color: #9a7b43;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 800;
}

.contact-details strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.55;
}

/* Google map box */
.map-wrap {
  min-height: 430px;
  border: 1px solid #dfe5ea;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f6f8;
  box-shadow: var(--shadow);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* "Open in Google Maps" link under the map */
.map-wrap > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.map-wrap > a span {
  color: var(--gold);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
footer {
  background: #071b31;
  color: #aebbc7;
  padding-top: 55px;
}

/* Four columns: brand + 3 link groups */
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 45px;
  padding-bottom: 40px;
}

.footer-brand p {
  max-width: 300px;
  margin: 16px 0 0;
  color: #91a0ae;
  font-size: 13px;
}

.footer-main h4 {
  margin: 5px 0 14px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.footer-main a {
  display: block;
  margin: 10px 0;
  color: #aebbc7;
  font-size: 13px;
}

.footer-main a:hover {
  color: #fff;
}

/* Brand colors adjusted for the dark footer */
.footer-main .brand-name strong {
  color: #fff;
}

.footer-main .brand-name small {
  color: #d0ae6c;
}

.footer-main .brand-mark {
  border-color: #b7965c;
  color: #fff;
}

/* Bottom copyright row */
.footer-bottom {
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
}


/* ==========================================================================
   13. FLOATING WHATSAPP BUTTON (fixed at bottom-right corner)
   ========================================================================== */
.floating-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #178a55;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
  transition: transform .2s, box-shadow .2s;
}

.floating-wa svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
  display: block;
}

.floating-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(0, 0, 0, .25);
}


/* ==========================================================================
   14. LOGO SIZES (header and footer)
   ========================================================================== */
.footer-brand-logo {
  display: inline-flex;
}

.footer-brand-logo .brand-logo {
  width: 155px;
}

.site-header .brand-logo {
  width: 132px;
}


/* ==========================================================================
   15. RESPONSIVE: TABLETS (screen width up to 1050px)
   ========================================================================== */
@media (max-width: 1050px) {
  .hero-inner {
    gap: 45px;
  }

  /* Service cards: 4 columns -> 2 columns */
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-layout {
    gap: 45px;
  }

  .contact-layout {
    gap: 40px;
  }
}


/* ==========================================================================
   16. RESPONSIVE: MOBILE (screen width up to 760px)
   ========================================================================== */
@media (max-width: 760px) {

  /* --- Reviews: stack everything in one column --- */
  .reviews-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 22px;
  }

  .google-rating {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }

  .reviews-actions {
    min-width: 0;
  }

  /* --- General layout --- */
  .container {
    width: min(100% - 28px, 640px);
  }

  .topbar {
    display: none;
  }

  /* --- Header and mobile menu --- */
  .nav-wrap {
    min-height: 68px;
  }

  /* Show the hamburger button */
  .menu-toggle {
    display: block;
  }

  /* Menu becomes a dropdown panel, hidden above the screen until opened */
  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    background: #fff;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 14px 18px;
    transform: translateY(-120%);
    transition: transform .22s;
    box-shadow: 0 18px 30px rgba(11, 35, 64, .12);
  }

  /* Slides the menu into view when opened */
  .main-nav.open {
    transform: none;
  }

  .main-nav > a {
    padding: 13px 9px;
    border-bottom: 1px solid #edf0f2;
  }

  .main-nav .nav-whatsapp {
    text-align: center;
    margin-top: 10px;
    border-bottom: 0;
  }

  /* --- Hero --- */
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 54px 0 46px;
    gap: 35px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-lead {
    font-size: 17px;
  }

  .quick-facts {
    margin-top: 30px;
  }

  .quick-facts div {
    min-width: 0;
    flex: 1;
    padding-right: 12px;
    margin-right: 12px;
  }

  .quick-facts strong {
    font-size: 21px;
  }

  .quick-facts span {
    font-size: 11px;
  }

  .hero-panel {
    box-shadow: none;
  }

  /* --- Service finder --- */
  .finder-box {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 21px 18px;
  }

  /* --- Sections and headings --- */
  .section {
    padding: 65px 0;
  }

  .section-head {
    display: block;
    margin-bottom: 22px;
  }

  .section-head h2,
  .about h2,
  .contact h2 {
    font-size: 35px;
  }

  .section-link {
    display: inline-block;
    margin-top: 13px;
  }

  /* Category tabs scroll sideways instead of wrapping */
  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }

  .category-tab {
    white-space: nowrap;
  }

  /* Service cards: 1 column */
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 165px;
  }

  .service-category {
    padding: 27px 0 31px;
  }

  .category-heading h3 {
    font-size: 26px;
  }

  /* --- About and Contact: 1 column --- */
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .about-points {
    border-left: 0;
    border-top: 1px solid #d7dfe6;
  }

  .about-points div {
    padding: 14px 0;
  }

  .map-wrap {
    min-height: 350px;
  }

  .map-wrap iframe {
    height: 300px;
  }

  /* --- Footer --- */
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .site-header .brand-logo {
    width: 116px;
  }

  .footer-brand-logo .brand-logo {
    width: 145px;
  }

  /* Brand column takes the full width */
  .footer-main > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 14px 0;
  }

  /* --- Floating WhatsApp button and search dropdown --- */
  .floating-wa {
    right: 14px;
    bottom: 14px;
  }

  .search-results {
    top: 52px;
  }
}


/* ==========================================================================
   17. RESPONSIVE: SMALL PHONES (screen width up to 430px)
   ========================================================================== */
@media (max-width: 430px) {
  .hero h1 {
    font-size: 36px;
  }

  /* Hero buttons stack full-width */
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .quick-facts {
    gap: 6px;
  }

  .quick-facts div {
    padding-right: 7px;
    margin-right: 7px;
  }

  .quick-facts strong {
    font-size: 19px;
  }

  .quick-facts span {
    font-size: 9px;
  }

  .finder-box {
    border-radius: 0;
  }

  .section-head h2,
  .about h2,
  .contact h2 {
    font-size: 32px;
  }

  /* Footer: single column */
  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-main > div:first-child {
    grid-column: auto;
  }
}


/* ==========================================================================
   18. LARGE-SCREEN READABILITY (screen width 761px and above)
   Slightly bigger text and a wider container for desktops
   ========================================================================== */
@media (min-width: 761px) {
  .container {
    width: min(1320px, calc(100% - 56px));
  }

  body {
    font-size: 18px;
  }

  .topbar {
    font-size: 14px;
  }

  .main-nav {
    font-size: 16px;
  }

  /* --- Hero --- */
  .hero-inner {
    gap: 88px;
  }

  .hero h1 {
    font-size: 62px;
  }

  .hero-lead {
    font-size: 20px;
  }

  .btn {
    font-size: 16px;
  }

  .quick-facts span {
    font-size: 13px;
  }

  /* --- Hero panel --- */
  .panel-heading span,
  .eyebrow {
    font-size: 11px;
  }

  .panel-heading strong {
    font-size: 28px;
  }

  .quick-service strong {
    font-size: 16px;
  }

  .quick-service small {
    font-size: 13px;
  }

  /* --- Service finder --- */
  .finder-copy h2 {
    font-size: 27px;
  }

  .finder-copy p {
    font-size: 15px;
  }

  .search-wrap input {
    font-size: 16px;
  }

  .search-result strong {
    font-size: 15px;
  }

  .search-result small {
    font-size: 12px;
  }

  .filter-chip {
    font-size: 13px;
  }

  .finder-results {
    font-size: 13px;
  }

  /* --- Services --- */
  .section-head h2,
  .about h2,
  .contact h2 {
    font-size: 44px;
  }

  .section-link {
    font-size: 15px;
  }

  .category-heading h3 {
    font-size: 31px;
  }

  .category-heading p {
    font-size: 15px;
  }

  .service-card h4 {
    font-size: 17px;
  }

  .service-card p {
    font-size: 15px;
  }

  .service-cta {
    font-size: 13px;
  }

  .view-more {
    font-size: 14px;
  }

  /* --- About and Contact --- */
  .about p,
  .contact-copy p {
    font-size: 18px;
  }

  .about-points strong {
    font-size: 17px;
  }

  .about-points span {
    font-size: 15px;
  }

  /* --- Reviews --- */
  .reviews-copy h2 {
    font-size: 40px;
  }

  .reviews-copy p {
    font-size: 17px;
  }

  .rating-details strong {
    font-size: 15px;
  }

  .rating-details span {
    font-size: 14px;
  }

  .reviews-actions .btn {
    font-size: 15px;
  }

  /* --- Contact and map --- */
  .contact-details strong {
    font-size: 16px;
  }

  .map-wrap > a {
    font-size: 14px;
  }

  /* --- Footer --- */
  .footer-brand p {
    font-size: 14px;
  }

  .footer-main h4 {
    font-size: 12px;
  }

  .footer-main a {
    font-size: 14px;
  }

  .footer-bottom {
    font-size: 13px;
  }
}


/* ==========================================================================
   19. ACCESSIBILITY: turn off animations for people who prefer reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .btn,
  .quick-service,
  .service-card,
  .floating-wa {
    transition: none;
  }
}


/* ==========================================================================
   20. RESPONSIVE FIXES (NEW - added at the end, existing code is untouched)
   These rules come last, so they override the earlier sizes only where needed
   ========================================================================== */

/* --- Laptops and desktops (1051px and above) ---------------------------
   Heading size now scales with the screen width, so it doesn't break into
   too many lines on smaller laptops. The hero also gets less empty space
   on short screens so more of it fits without scrolling. */
@media (min-width: 1051px) {
  .hero h1 {
    font-size: clamp(44px, 3.6vw, 62px);
  }

  .hero-inner {
    padding: clamp(40px, 7vh, 78px) 0 clamp(36px, 6vh, 70px);
  }
}

/* --- Tablets (761px to 1050px) -----------------------------------------
   The old layout kept 2 columns here, which made the text very narrow.
   Now the hero stacks into 1 column, and the reviews card is re-arranged. */
@media (min-width: 761px) and (max-width: 1050px) {

  /* Hero: text on top, panel below */
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 60px 0 54px;
    gap: 40px;
  }

  .hero h1 {
    font-size: clamp(40px, 6vw, 52px);
  }

  /* Reviews: text on the first row, rating and buttons share the second row */
  .reviews-card {
    grid-template-columns: 1fr 1fr;
    gap: 26px 30px;
  }

  .reviews-copy {
    grid-column: 1 / -1;
  }

  .google-rating {
    padding-left: 0;
    border-left: 0;
  }

  .reviews-actions {
    min-width: 0;
  }
}


/* ==========================================================================
   21. LARGE PC MONITORS (NEW - fixes the empty gap on the left and right)
   The container was stopping at 1320px, so wide screens showed big side gaps.
   These rules let the content grow wider as the screen gets bigger.
   ========================================================================== */

/* Big monitors (1400px and above): wider content area */
@media (min-width: 1400px) {
  .container {
    width: min(1500px, calc(100% - 96px));
  }
}

/* Very big monitors, e.g. Full HD and above (1700px and above) */
@media (min-width: 1700px) {
  .container {
    width: min(1720px, calc(100% - 120px));
  }

  /* Slightly larger main text so it doesn't look small in the wider space */
  .hero h1 {
    font-size: 68px;
  }

  .hero-lead {
    font-size: 21px;
  }

  .section-head h2,
  .about h2,
  .contact h2 {
    font-size: 48px;
  }
}


/* ==========================================================================
   22. BIGGER LOGO (NEW - header and footer logo made larger and clearer)
   The logo was limited to 132px wide and 64px tall, so its small text was
   hard to read. Height is now set directly so the logo can grow.
   ========================================================================== */

/* --- Desktop and tablet (761px and above) --- */
@media (min-width: 761px) {

  /* Taller header row so the bigger logo fits comfortably */
  .nav-wrap {
    min-height: 92px;
  }

  .site-header .brand-logo {
    width: auto;
    height: 80px;
    max-height: none;
  }

  /* Header is taller now, so anchor links need more space at the top */
  html {
    scroll-padding-top: 106px;
  }

  /* Footer logo */
  .footer-brand-logo .brand-logo {
    width: 190px;
    max-height: none;
  }
}

/* --- Mobile (760px and below) --- */
@media (max-width: 760px) {

  .nav-wrap {
    min-height: 76px;
  }

  .site-header .brand-logo {
    width: auto;
    height: 60px;
    max-height: none;
  }

  /* Mobile menu must start below the taller header (was 68px) */
  .main-nav {
    top: 76px;
  }

  /* Footer logo */
  .footer-brand-logo .brand-logo {
    width: 170px;
    max-height: none;
  }
}


/* Consultation form — added without changing existing site sections */
.consultation{background:#fff;}
.consultation-layout{display:block;}
.consultation-copy h2{margin:7px 0 0;color:var(--navy);font-family:"Playfair Display",serif;font-size:42px;line-height:1.12;letter-spacing:-.025em;}
.consultation-copy p{max-width:620px;color:#657383;font-size:17px;line-height:1.65;margin:18px 0 0;}
.consultation-form{padding:2px 0 0;margin-top:46px;}
.consultation-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
.consultation-form label{display:block;}
.consultation-form label>span{display:block;margin:0 0 8px;color:var(--navy);font-size:14px;font-weight:700;}
.consultation-form input,.consultation-form select,.consultation-form textarea{width:100%;border:1px solid #d5dee6;background:#fff;color:var(--ink);border-radius:0;padding:12px 14px;font:inherit;font-size:15px;outline:none;box-sizing:border-box;}
.consultation-form input,.consultation-form select{height:44px;}
.consultation-form textarea{min-height:110px;resize:vertical;line-height:1.55;}
.consultation-form input:focus,.consultation-form select:focus,.consultation-form textarea:focus{border-color:#9a7b43;box-shadow:0 0 0 2px rgba(154,123,67,.12);}
.consultation-form input::placeholder,.consultation-form textarea::placeholder{color:#89939d;}
.consultation-full{grid-column:1/-1;}
.consultation-submit{width:100%;margin-top:22px;border:0;background:#124a75;color:#fff;padding:13px 18px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s;}
.consultation-submit:hover{background:#0d3d61;transform:translateY(-1px);}
.consultation-note{margin:11px 0 0;color:#657383;font-size:13px;line-height:1.55;}
@media (max-width:900px){
  .consultation-layout{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:760px){
  .consultation-copy h2{font-size:35px;}
  .consultation-copy p{font-size:16px;}
  .consultation-fields{grid-template-columns:1fr;gap:16px;}
  .consultation-full{grid-column:auto;}
}