/* ==========================================================================
   Deveaux's Cleaning
   Main stylesheet
   --------------------------------------------------------------------------
   Table of contents
   01. Design tokens
   02. Reset and base
   03. Typography
   04. Layout helpers
   05. Buttons
   06. Header and navigation
   07. Floating contact buttons
   08. Wave dividers
   09. Home hero
   10. Page hero (inner pages)
   11. Cards and service grid
   12. Why choose us
   13. How it works
   14. Before and after slider
   16. Call to action band
   17. Services page
   18. About page
   19. Gallery page and lightbox
   20. Forms (quote and contact)
   21. Contact page details
   23. Footer
   24. Motion and scroll reveals
   25. Responsive breakpoints
   26. Accessibility and reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   All colours are written in HSL. The brand hex values they map to are noted
   beside each token so they are easy to match against brand material.
   ========================================================================== */
:root {
  /* --- Fonts --- */
  --font-display: 'Raleway', 'Trebuchet MS', sans-serif;
  --font-body: 'Lato', 'Segoe UI', sans-serif;

  /* --- Type scale (never use em for the scale, it compounds) --- */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-5xl: 3.5rem;     /* 56px */

  /* --- Line heights, inversely proportional to size --- */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  /* --- Weights --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.14em;

  /* --- Navy scale (base 700 maps to #123047) --- */
  --navy-900: hsl(205 62% 11%);
  --navy-800: hsl(205 61% 14%);
  --navy-700: hsl(205 60% 17%);   /* #123047 */
  --navy-600: hsl(205 52% 24%);
  --navy-500: hsl(205 44% 33%);
  --navy-400: hsl(205 33% 47%);
  --navy-300: hsl(205 28% 62%);
  --navy-200: hsl(205 30% 80%);
  --navy-100: hsl(205 38% 92%);

  /* --- Teal scale (base 500 maps to #1FA7A0) --- */
  --teal-900: hsl(177 74% 17%);
  --teal-800: hsl(177 72% 23%);
  --teal-700: hsl(177 71% 29%);
  --teal-600: hsl(177 70% 34%);
  --teal-500: hsl(177 69% 39%);   /* #1FA7A0 */
  --teal-400: hsl(177 55% 52%);
  --teal-300: hsl(177 50% 66%);
  --teal-200: hsl(176 50% 82%);
  --teal-100: hsl(176 50% 95%);   /* #EAF8F7 light aqua */

  /* --- Neutrals, slightly saturated so they never look dead --- */
  --gray-50: hsl(200 20% 98%);
  --gray-100: hsl(200 13% 96%);   /* #F5F7F8 soft gray */
  --gray-200: hsl(200 14% 91%);
  --gray-300: hsl(200 12% 82%);
  --gray-400: hsl(202 10% 64%);
  --gray-500: hsl(204 10% 48%);
  --gray-600: hsl(206 14% 36%);
  --gray-700: hsl(207 20% 26%);
  --gray-800: hsl(207 28% 16%);   /* #1D2933 dark text */
  --gray-900: hsl(207 32% 10%);

  --white: hsl(0 0% 100%);

  /* --- Semantic colours --- */
  --text-primary: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-on-dark: hsl(190 30% 96%);
  --text-on-dark-2: hsl(186 24% 82%);
  --text-on-dark-3: hsl(190 16% 68%);

  --surface: var(--white);
  --surface-alt: var(--gray-100);
  --surface-tint: var(--teal-100);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --danger-500: hsl(4 72% 51%);
  --danger-100: hsl(4 80% 96%);
  --success-500: hsl(150 62% 36%);

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radii, consistent throughout --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Five level shadow system, assigned by height off the page --- */
  --shadow-xs: 0 1px 2px hsl(205 40% 20% / 0.07);
  --shadow-sm: 0 2px 8px hsl(205 40% 20% / 0.08);
  --shadow-md: 0 8px 22px hsl(205 40% 20% / 0.10);
  --shadow-lg: 0 18px 44px hsl(205 40% 20% / 0.14);
  --shadow-xl: 0 30px 70px hsl(205 40% 20% / 0.18);
  --shadow-teal: 0 12px 30px hsl(177 69% 30% / 0.30);

  /* --- Layout --- */
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --header-h: 78px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
}


/* ==========================================================================
   02. RESET AND BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Offsets anchor jumps so the fixed header never covers a heading */
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-700);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--weight-semibold);
}
.skip-link:focus {
  left: 0;
}

/* Visible focus ring everywhere, required for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--navy-700);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  color: var(--navy-700);
  line-height: var(--leading-snug);
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }

p {
  max-width: 65ch;
  color: var(--text-secondary);
}

strong { font-weight: var(--weight-bold); color: var(--text-primary); }

/* Small uppercase label used above section headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: var(--space-3);
}

.text-teal { color: var(--teal-500); }


/* ==========================================================================
   04. LAYOUT HELPERS
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-24);
}

.section--tight { padding-block: var(--space-16); }

.section--tint { background: var(--surface-tint); }
.section--gray { background: var(--gray-100); }
.section--navy { background: var(--navy-700); }

.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy p { color: var(--text-on-dark-2); }
.section--navy .eyebrow { color: var(--teal-300); }

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}

.section-head--center p { margin-inline: auto; }

/* Generic two column split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}


/* ==========================================================================
   05. BUTTONS
   Three levels of hierarchy: primary, secondary, ghost.
   Every button has hover, focus, and active states.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn svg { width: 18px; height: 18px; flex: none; }

/* Primary: the single strongest action on a screen */
.btn--primary {
  background: var(--teal-500);
  color: var(--white);
  box-shadow: var(--shadow-teal);
}
.btn--primary:hover {
  background: var(--teal-600);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px hsl(177 69% 28% / 0.38);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Secondary: supporting action */
.btn--secondary {
  background: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn--secondary:hover {
  background: var(--navy-600);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.btn--secondary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Ghost: lowest emphasis */
.btn--ghost {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--teal-500);
  color: var(--teal-600);
  transform: translateY(-3px);
}
.btn--ghost:active { transform: translateY(0); }

/* Ghost on a dark background */
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: hsl(0 0% 100% / 0.45);
}
.btn--ghost-light:hover {
  background: var(--white);
  color: var(--navy-700);
  border-color: var(--white);
  transform: translateY(-3px);
}

.btn--block { width: 100%; }
.btn--sm { padding: 11px 22px; font-size: var(--text-xs); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.btn-row--center { justify-content: center; }


/* ==========================================================================
   06. HEADER AND NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: hsl(0 0% 100% / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
}

/* --- Logo (text based, with a small mark) --- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--navy-700);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__mark svg { width: 24px; height: 24px; }

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy-700);
  letter-spacing: var(--tracking-tight);
}
.brand__tagline {
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--teal-600);
}

/* --- Nav links --- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  padding-block: var(--space-2);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--navy-700); }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-500);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__link.is-active { color: var(--navy-700); }

/* --- Hamburger --- */
.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  position: relative;
  flex: none;
}

.nav__toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-700);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }

.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* Backdrop shown behind the mobile menu */
.nav__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: hsl(205 40% 12% / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 98;
}
.nav__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Pushes page content below the fixed header */
.page-body { padding-top: var(--header-h); }


/* ==========================================================================
   07. FLOATING CONTACT BUTTONS
   Always visible so a visitor can reach the business from any page.
   ========================================================================== */
.floating {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.floating__btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.floating__btn svg { width: 27px; height: 27px; }
.floating__btn:hover { transform: scale(1.09) translateY(-2px); box-shadow: var(--shadow-xl); }
.floating__btn:active { transform: scale(1.02); }

.floating__btn--whatsapp { background: hsl(142 70% 40%); color: var(--white); }
.floating__btn--phone { background: var(--navy-700); color: var(--white); }

/* Tooltip label that slides out on hover */
.floating__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: var(--navy-800);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.floating__btn:hover .floating__label,
.floating__btn:focus-visible .floating__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* ==========================================================================
   08. WAVE DIVIDERS
   Signature detail. Reads as water and as the sea around the islands.
   ========================================================================== */
.wave {
  display: block;
  width: 100%;
  height: 70px;
  line-height: 0;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave--flip svg { transform: scaleY(-1); }


/* ==========================================================================
   09. HOME HERO
   Layered: animated gradient wash, floating blobs, then content and art.
   Blobs and art move at different speeds on scroll for parallax depth.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24) var(--space-20);
  background: linear-gradient(135deg,
              var(--teal-100) 0%,
              var(--white) 42%,
              hsl(180 46% 93%) 100%);
  background-size: 300% 300%;
  animation: gradientShift 16s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Decorative shapes, parallax layer 1 */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  z-index: 0;
}
.hero__blob--a {
  width: 420px; height: 420px;
  background: hsl(177 69% 55% / 0.26);
  top: -120px; right: -60px;
}
.hero__blob--b {
  width: 340px; height: 340px;
  background: hsl(205 60% 45% / 0.14);
  bottom: -140px; left: -80px;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.hero h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  max-width: 14ch;
  margin-bottom: var(--space-5);
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}

/* Trust indicators under the hero buttons */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: hsl(0 0% 100% / 0.85);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-700);
  box-shadow: var(--shadow-xs);
}
.trust__item svg { width: 17px; height: 17px; color: var(--teal-500); flex: none; }

/* Hero artwork, parallax layer 2 */
.hero__art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hero__art img { width: 100%; height: auto; }

/* Small floating stat card overlapping the artwork */
.hero__card {
  position: absolute;
  left: -26px;
  bottom: 34px;
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 250px;
}
.hero__card svg { width: 30px; height: 30px; color: var(--teal-500); flex: none; }
.hero__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--navy-700);
  line-height: 1.25;
}
.hero__card span {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}


/* ==========================================================================
   10. PAGE HERO (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-600) 58%, var(--teal-800));
  color: var(--white);
  padding-block: var(--space-20) var(--space-16);
  overflow: hidden;
}

.page-hero::after {
  /* soft glow in the corner for depth */
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: hsl(177 69% 45% / 0.24);
  top: -180px;
  right: -110px;
  filter: blur(40px);
  pointer-events: none;
}

.page-hero__inner { position: relative; z-index: 1; max-width: 66ch; }
.page-hero h1 { color: var(--white); font-size: var(--text-4xl); }
.page-hero p {
  color: var(--text-on-dark-2);
  font-size: var(--text-lg);
  margin-top: var(--space-4);
}
.page-hero .eyebrow { color: var(--teal-300); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-on-dark-3);
  margin-top: var(--space-6);
}
.crumbs a { color: var(--text-on-dark-2); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--white); }
.crumbs span[aria-hidden='true'] { opacity: 0.5; }


/* ==========================================================================
   11. CARDS AND SERVICE GRID
   Each service card is self contained so an unconfirmed service can be
   deleted by removing a single <article> block.
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Accent bar that grows across the top on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-500), var(--navy-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}
.card:hover::before { transform: scaleX(1); }

.card__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--teal-100);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.card__icon svg { width: 28px; height: 28px; color: var(--teal-600); }
.card:hover .card__icon { transform: rotate(-7deg) scale(1.07); background: var(--teal-200); }

.card h3 {
  font-size: var(--text-xl);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.card p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* "Learn More" link with an arrow that slides on hover */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--teal-600);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__link svg { width: 15px; height: 15px; }
.card__link:hover { gap: var(--space-3); color: var(--navy-700); }


/* ==========================================================================
   12. WHY CHOOSE US
   ========================================================================== */
.reason {
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-left: 3px solid var(--teal-400);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reason:hover { border-left-color: var(--navy-600); transform: translateX(4px); }
.reason h3 {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.reason p { font-size: var(--text-sm); }

.section--navy .reason { border-left-color: var(--teal-400); }
.section--navy .reason h3 { color: var(--white); }
.section--navy .reason p { color: var(--text-on-dark-2); }


/* ==========================================================================
   13. HOW IT WORKS
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  position: relative;
}

/* Dashed connector running behind the step numbers on desktop */
.steps::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 12%;
  width: 76%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--teal-300) 55%, transparent 55%);
  background-size: 14px 2px;
  z-index: 0;
}

.step { position: relative; z-index: 1; text-align: center; }

.step__num {
  width: 68px;
  height: 68px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal-300);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--teal-600);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.step:hover .step__num {
  transform: translateY(-5px);
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--white);
}

.step h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.step p { font-size: var(--text-sm); margin-inline: auto; max-width: 30ch; }


/* ==========================================================================
   14. BEFORE AND AFTER SLIDER
   Drag the handle to wipe between the two images.
   ========================================================================== */
.ba {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  user-select: none;
  background: var(--gray-100);
  touch-action: pan-y;
}

.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The "after" image is clipped, revealing more as the handle moves right */
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__tag {
  position: absolute;
  top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: var(--white);
  z-index: 2;
}
.ba__tag--before { left: var(--space-4); background: hsl(205 40% 15% / 0.72); }
.ba__tag--after { right: var(--space-4); background: var(--teal-600); }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 3;
  box-shadow: 0 0 16px hsl(205 40% 15% / 0.4);
}

.ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-600);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.ba__handle:hover .ba__knob { transform: translate(-50%, -50%) scale(1.1); }
.ba__knob svg { width: 22px; height: 22px; }

.ba-caption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}


/* ==========================================================================
   16. CALL TO ACTION BAND
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--navy-700), var(--teal-800));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-band::before {
  width: 340px; height: 340px;
  background: hsl(0 0% 100% / 0.07);
  top: -150px; right: -80px;
}
.cta-band::after {
  width: 260px; height: 260px;
  background: hsl(177 69% 50% / 0.16);
  bottom: -130px; left: -60px;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); }
.cta-band p {
  color: var(--text-on-dark-2);
  font-size: var(--text-lg);
  margin: var(--space-4) auto var(--space-8);
}
.cta-band .btn-row { justify-content: center; }

/* Slimmer inline CTA used between service sections */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--teal-100);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.cta-inline h3 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: var(--weight-bold); }
.cta-inline p { font-size: var(--text-sm); margin-top: var(--space-1); }


/* ==========================================================================
   17. SERVICES PAGE
   ========================================================================== */
.service-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--border);
}
.service-block:last-of-type { border-bottom: none; }

/* Alternate the image side so the page does not feel repetitive */
.service-block--flip .service-block__media { order: 2; }

.service-block__media {
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.service-block__media img { width: 100%; height: 100%; object-fit: cover; }

.service-block h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.service-block > div > p { margin-bottom: var(--space-5); }

/* Task list with tick marks */
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ticks svg { width: 19px; height: 19px; color: var(--teal-500); flex: none; margin-top: 2px; }

/* Note explaining that scope is not yet confirmed */
.note {
  display: flex;
  gap: var(--space-3);
  background: var(--gray-100);
  border-left: 3px solid var(--navy-400);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.note svg { width: 20px; height: 20px; color: var(--navy-400); flex: none; margin-top: 2px; }
.note p { font-size: var(--text-sm); max-width: none; }


/* ==========================================================================
   18. ABOUT PAGE
   ========================================================================== */
.about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-media img {
  width: 100%;
  height: auto;
  display: block;
}

.mission {
  background: var(--white);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-sm);
}
.mission .eyebrow { margin-bottom: 0; }
.mission blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--navy-700);
  max-width: 38ch;
}

.value {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value__icon {
  width: 54px; height: 54px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--teal-100);
  display: grid;
  place-items: center;
}
.value__icon svg { width: 26px; height: 26px; color: var(--teal-600); }
.value h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.value p { font-size: var(--text-sm); margin-inline: auto; }

/* Dashed area marking content the owner still needs to supply */


/* ==========================================================================
   19. GALLERY PAGE AND LIGHTBOX
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.filter {
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--teal-400); color: var(--teal-700); transform: translateY(-2px); }
.filter.is-active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--gray-100);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.gallery-item:hover img { transform: scale(1.07); }

.gallery-item__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, hsl(205 45% 12% / 0.85), transparent);
  color: var(--white);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__meta,
.gallery-item:focus-visible .gallery-item__meta { opacity: 1; transform: translateY(0); }

.gallery-item__cat {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--teal-300);
}
.gallery-item__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.gallery-item.is-hidden { display: none; }

/* Empty state if a filter matches nothing */
.gallery-empty {
  display: none;
  text-align: center;
  padding: var(--space-16) 0;
  color: var(--text-tertiary);
}
.gallery-empty.is-shown { display: block; }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: hsl(205 45% 8% / 0.92);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__figure {
  max-width: 980px;
  width: 100%;
  transform: scale(0.96);
  transition: transform var(--dur) var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__figure img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--white);
}
.lightbox__cap {
  color: var(--text-on-dark-2);
  font-size: var(--text-sm);
  text-align: center;
  margin-top: var(--space-4);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: hsl(0 0% 100% / 0.12);
  border: 1px solid hsl(0 0% 100% / 0.25);
  color: var(--white);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: hsl(0 0% 100% / 0.26); transform: scale(1.06); }
.lightbox__close { top: var(--space-6); right: var(--space-6); }
.lightbox__nav--prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__close svg,
.lightbox__nav svg { width: 22px; height: 22px; }


/* ==========================================================================
   20. CONTACT ACTIONS (WhatsApp first)
   There are no forms on this site. Every enquiry route is a WhatsApp chat
   or a phone call, each carrying its own prefilled message.
   ========================================================================== */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.action:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.action:active { transform: translateY(-1px); }

.action__icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--white);
  transition: transform var(--dur) var(--ease);
}
.action__icon svg { width: 27px; height: 27px; }
.action:hover .action__icon { transform: rotate(-6deg) scale(1.06); }

.action--wa .action__icon { background: hsl(142 70% 40%); }
.action--wa:hover { border-color: hsl(142 60% 62%); }
.action--call .action__icon { background: var(--navy-700); }
.action--call:hover { border-color: var(--navy-300); }

.action__body { flex: 1; min-width: 0; }
.action__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy-700);
  line-height: 1.25;
}
.action__body span {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.action__go {
  flex: none;
  color: var(--teal-500);
  transition: transform var(--dur) var(--ease);
}
.action__go svg { width: 22px; height: 22px; }
.action:hover .action__go { transform: translateX(5px); }


/* --- Service quick-start list, each opens a prefilled WhatsApp chat --- */
.starters { display: grid; gap: var(--space-3); }

.starter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.starter:hover {
  transform: translateX(5px);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-sm);
}

.starter__icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--teal-100);
  display: grid;
  place-items: center;
}
.starter__icon svg { width: 21px; height: 21px; color: var(--teal-600); }

.starter__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.starter__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy-700);
}
.starter__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--teal-600);
  transition: gap var(--dur) var(--ease);
}
.starter__go svg { width: 13px; height: 13px; }
.starter:hover .starter__go { gap: 10px; }


/* --- "What to include" checklist --- */
.checklist { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.checklist svg { width: 19px; height: 19px; color: var(--teal-500); flex: none; margin-top: 2px; }


/* --- Informational notice --- */
.form-notice {
  display: flex;
  gap: var(--space-3);
  background: var(--teal-100);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--navy-600);
}
.form-notice svg { width: 19px; height: 19px; color: var(--teal-600); flex: none; margin-top: 2px; }
.form-notice p { font-size: var(--text-sm); max-width: none; }


/* ==========================================================================
   21. CONTACT PAGE DETAILS
   ========================================================================== */
.contact-list { display: grid; gap: var(--space-2); }

.contact-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }

.contact-row__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--teal-100);
  display: grid;
  place-items: center;
}
.contact-row__icon svg { width: 22px; height: 22px; color: var(--teal-600); }

.contact-row__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.contact-row__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--navy-700);
  transition: color var(--dur) var(--ease);
}
a.contact-row__value:hover { color: var(--teal-600); }

.socials { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.social {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--navy-700);
  transition: all var(--dur) var(--ease);
}
.social svg { width: 20px; height: 20px; }
.social:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
  transform: translateY(-3px);
}



/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy-800);
  color: var(--text-on-dark-2);
  padding-block: var(--space-20) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

.footer-brand .brand__name { color: var(--white); }
.footer-brand .brand__mark { background: var(--teal-600); }
.footer-brand p {
  font-size: var(--text-sm);
  color: var(--text-on-dark-3);
  margin-top: var(--space-4);
  max-width: 34ch;
}

.footer-col h3 {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--teal-300);
  margin-bottom: var(--space-4);
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-on-dark-3);
  padding-block: 6px;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
  max-width: none;
}
.footer-col a:hover { color: var(--white); transform: translateX(3px); }

.footer-socials { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-socials .social {
  background: hsl(0 0% 100% / 0.07);
  border-color: hsl(0 0% 100% / 0.16);
  color: var(--white);
  width: 40px;
  height: 40px;
}
.footer-socials .social:hover { background: var(--teal-600); border-color: var(--teal-600); }
.footer-socials .social svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid hsl(0 0% 100% / 0.12);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-on-dark-3);
}
.footer-bottom a { color: var(--teal-300); font-weight: var(--weight-bold); }
.footer-bottom a:hover { color: var(--white); }


/* ==========================================================================
   24. MOTION AND SCROLL REVEALS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a grid so they cascade in */
.reveal-group > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group > .reveal:nth-child(6) { transition-delay: 0.40s; }


/* ==========================================================================
   25. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --text-5xl: 2.9rem; --text-4xl: 2.3rem; --text-3xl: 1.8rem; }

  .hero__inner { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero h1 { max-width: 18ch; }
  .hero__art { max-width: 560px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .service-block { grid-template-columns: 1fr; gap: var(--space-8); }
  .service-block--flip .service-block__media { order: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* --- Mobile navigation ---
     The panel slides in from the right and never overlaps page content
     because the body scroll is locked while it is open. */
  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 340px);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-8);
    box-shadow: var(--shadow-xl);
    transform: translateX(105%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    z-index: 99;
  }
  .nav__links.is-open { transform: translateX(0); }

  .nav__link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--teal-600); }

  .nav__links .btn { margin-top: var(--space-5); }

  .nav__backdrop { display: block; }

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

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--space-10); }
  .steps::before { display: none; }
  .ticks { grid-template-columns: 1fr; }
  .cta-inline { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  :root { --text-5xl: 2.3rem; --text-4xl: 1.9rem; --text-3xl: 1.6rem; }

  .section { padding-block: var(--space-16); }
  .wrap { padding-inline: var(--space-5); }

  .grid--4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }

  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero__card { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }

  .action { padding: var(--space-5); }
  .cta-band { padding: var(--space-12) var(--space-5); }
  .mission { padding: var(--space-6); }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav__links .btn { width: 100%; }

  .floating { right: var(--space-4); bottom: var(--space-4); }
  .floating__btn { width: 52px; height: 52px; }
  /* Tooltips are pointless on touch, hide them */
  .floating__label { display: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .lightbox__nav { display: none; }
}


/* ==========================================================================
   26. ACCESSIBILITY AND REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Make sure revealed content is never left invisible */
  .reveal,
  .reveal-left,
  .reveal-right { opacity: 1 !important; transform: none !important; }
  .hero { animation: none; }
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .site-header, .floating, .nav__backdrop, .lightbox { display: none !important; }
  body { color: #000; }
}