/*
Theme Name: Hydrologic Theme
Theme URI: https://example.com/
Author: Campbell Web Works
Author URI: https://campbellwebworks.com/
Description: Custom WordPress theme for Hydrologic Consulting.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hydrologic
Tags: custom-theme, responsive, consulting
*/

/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */

/* =========================
   Former: @layer properties
   ========================= */
/* assets/css/theme.css (normal CSS) */

/* ✅ Theme tokens (replaces Tailwind @theme) */
:root {
  /* Colors */
  --color-blue-200: oklch(88.2% .059 254.128);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-black: #000;
  --color-white: #fff;
  --color-water-deep: #003156;
  --color-water-mid: #005f8e;
  --color-water-light: #4a90e2;
  --color-water-pale: #b3d9ff;
  --color-water-foam: #e6f3ff;
  --color-charcoal: #2c2c2c;
  --color-charcoal-light: #4a4a4a;
  --color-warm-gray: #f5f9ff;
	/* Map Industry Colours */

   --industry-default: #999999;
  --industry-agriculture: #00fa43;
  --industry-mining: #ffa500;
  --industry-other: #f53f50;
  --industry-power: #f6ff00;
  --industry-renewables: #00e6ff;
  --industry-urban-water-management: #f900ce;

  /* Fonts */
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-serif: "Barlow", system-ui, sans-serif;
  --font-mono: "Barlow", system-ui, sans-serif;
}

/* ✅ Global font (same behavior as your :root/body lines) */
html, body {
  font-family: var(--font-sans);
}


@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
  *,
  :before,
  :after,
  ::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-rotate-x: initial;
    --tw-rotate-y: initial;
    --tw-rotate-z: initial;
    --tw-skew-x: initial;
    --tw-skew-y: initial;
    --tw-space-y-reverse: 0;
    --tw-space-x-reverse: 0;
    --tw-border-style: solid;
    --tw-leading: initial;
    --tw-font-weight: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-blur: initial;
    --tw-brightness: initial;
    --tw-contrast: initial;
    --tw-grayscale: initial;
    --tw-hue-rotate: initial;
    --tw-invert: initial;
    --tw-opacity: initial;
    --tw-saturate: initial;
    --tw-sepia: initial;
    --tw-drop-shadow: initial;
    --tw-drop-shadow-color: initial;
    --tw-drop-shadow-alpha: 100%;
    --tw-drop-shadow-size: initial;
    --tw-duration: initial;
  }
}

/* =====================
   Former: @layer theme
   ===================== */
:root,
:host {
  --spacing: .25rem;

  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;

  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25/.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5/1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75/1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75/1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2/1.5);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;

  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.25;
  --leading-relaxed: 1.625;

  --radius-lg: .5rem;

  --animate-bounce: bounce 1s infinite;

  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

/* ====================
   Former: @layer base
   ==================== */
*,
:after,
:before,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

::file-selector-button {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html,
:host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}

small { font-size: 80%; }

sub,
sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:-moz-focusring { outline: auto; }
progress { vertical-align: baseline; }
summary { display: list-item; }

ol,
ul,
menu { list-style: none; }

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  vertical-align: middle;
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
optgroup,
textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
}

::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
}

:where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }

::file-selector-button { margin-inline-end: 4px; }

::placeholder { opacity: 1; }

@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
  ::placeholder { color: currentColor; }

  @supports (color:color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }
}

textarea { resize: vertical; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }

::-webkit-datetime-edit { display: inline-flex; padding-block: 0; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }

::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator { line-height: 1; }
:-moz-ui-invalid { box-shadow: none; }

button,
input:where([type=button], [type=reset], [type=submit]) { appearance: button; }
::file-selector-button { appearance: button; }

::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }

[hidden]:where(:not([hidden=until-found])) { display: none !important; }

/* ========================
   Former: @layer utilities
   ======================== */
.visible { visibility: visible; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.relative { position: relative; }

.inset-0 { inset: calc(var(--spacing)*0); }
.top-0 { top: calc(var(--spacing)*0); }
.right-0 { right: calc(var(--spacing)*0); }
.bottom-8 { bottom: calc(var(--spacing)*8); }
.left-0 { left: calc(var(--spacing)*0); }
.left-1\/2 { left: 50%; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

.col-span-1 { grid-column: span 1/span 1; }

.container { width: 100%; }
@media (min-width:40rem) { .container { max-width: 40rem; } }
@media (min-width:48rem) { .container { max-width: 48rem; } }
@media (min-width:64rem) { .container { max-width: 64rem; } }
@media (min-width:80rem) { .container { max-width: 80rem; } }
@media (min-width:96rem) { .container { max-width: 96rem; } }

.mx-auto { margin-inline: auto; }

.mt-2 { margin-top: calc(var(--spacing)*2); }
.mt-12 { margin-top: calc(var(--spacing)*12); }
.mt-auto { margin-top: auto; }

.mr-2 { margin-right: calc(var(--spacing)*2); }
.mr-3 { margin-right: calc(var(--spacing)*3); }

.mb-2 { margin-bottom: calc(var(--spacing)*2); }
.mb-3 { margin-bottom: calc(var(--spacing)*3); }
.mb-4 { margin-bottom: calc(var(--spacing)*4); }
.mb-6 { margin-bottom: calc(var(--spacing)*6); }
.mb-8 { margin-bottom: calc(var(--spacing)*8); }
.mb-12 { margin-bottom: calc(var(--spacing)*12); }

.ml-auto { margin-left: auto; }

.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.inline { display: inline; }

.h-5 { height: calc(var(--spacing)*5); }
.h-6 { height: calc(var(--spacing)*6); }
.h-8 { height: calc(var(--spacing)*8); }
.h-10 { height: calc(var(--spacing)*10); }
.h-12 { height: calc(var(--spacing)*12); }
.h-16 { height: calc(var(--spacing)*16); }
.h-32 { height: calc(var(--spacing)*32); }
.h-48 { height: calc(var(--spacing)*48); }
.h-full { height: 100%; }
.min-h-\[85vh\] { min-height: 85vh; }

.w-5 { width: calc(var(--spacing)*5); }
.w-6 { width: calc(var(--spacing)*6); }
.w-8 { width: calc(var(--spacing)*8); }
.w-10 { width: calc(var(--spacing)*10); }
.w-12 { width: calc(var(--spacing)*12); }
.w-32 { width: calc(var(--spacing)*32); }
.w-80 { width: calc(var(--spacing)*80); }
.w-full { width: 100%; }

.max-w-3xl { max-width: var(--container-3xl); }
.max-w-4xl { max-width: var(--container-4xl); }
.max-w-6xl { max-width: var(--container-6xl); }
.max-w-none { max-width: none; }

.flex-grow { flex-grow: 1; }

.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1/2*100%)*-1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.animate-bounce { animation: var(--animate-bounce); }
.cursor-pointer { cursor: pointer; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-2 { gap: calc(var(--spacing)*2); }
.gap-6 { gap: calc(var(--spacing)*6); }
.gap-8 { gap: calc(var(--spacing)*8); }

:where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)));
}

:where(.space-y-6 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)));
}

:where(.space-y-8 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)));
}

:where(.space-x-2 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)));
}

:where(.space-x-3 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)));
}

:where(.space-x-8 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing)*8)*var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-x-reverse)));
}

.overflow-hidden { overflow: hidden; }
.scroll-smooth { scroll-behavior: smooth; }

.rounded-full { border-radius: 3.40282e38px; }
.rounded-lg { border-radius: var(--radius-lg); }

.border { border-style: var(--tw-border-style); border-width: 1px; }
.border-4 { border-style: var(--tw-border-style); border-width: 4px; }
.border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }

.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-water-foam { border-color: var(--color-water-foam); }

.bg-black { background-color: var(--color-black); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-warm-gray { background-color: var(--color-warm-gray); }
.bg-water-deep { background-color: var(--color-water-deep); }
.bg-water-foam { background-color: var(--color-water-foam); }
.bg-water-mid { background-color: var(--color-water-mid); }
.bg-white { background-color: var(--color-white); }

.bg-white\/90 { background-color: #ffffffe6; }
@supports (color:color-mix(in lab, red, red)) {
  .bg-white\/90 { background-color: color-mix(in oklab, var(--color-white)90%, transparent); }
}

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

.p-2 { padding: calc(var(--spacing)*2); }
.p-6 { padding: calc(var(--spacing)*6); }
.p-8 { padding: calc(var(--spacing)*8); }

.px-2 { padding-inline: calc(var(--spacing)*2); }
.px-4 { padding-inline: calc(var(--spacing)*4); }
.px-6 { padding-inline: calc(var(--spacing)*6); }
.px-8 { padding-inline: calc(var(--spacing)*8); }

.py-1 { padding-block: calc(var(--spacing)*1); }
.py-2 { padding-block: calc(var(--spacing)*2); }
.py-3 { padding-block: calc(var(--spacing)*3); }
.py-4 { padding-block: calc(var(--spacing)*4); }
.py-12 { padding-block: calc(var(--spacing)*12); }
.py-16 { padding-block: calc(var(--spacing)*16); }
.py-20 { padding-block: calc(var(--spacing)*20); }
.py-30 { padding-block: calc(var(--spacing)*30); }

.pt-4 { padding-top: calc(var(--spacing)*4); }
.pt-8 { padding-top: calc(var(--spacing)*8); }

.text-center { text-align: center; }
.text-left { text-align: left; }

.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }

.text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }
.text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }
.text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); }
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
.text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
.text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); }

.leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }
.leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }

.font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); }
.font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); }
.font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }
.font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }

.text-charcoal { color: var(--color-charcoal); }
.text-charcoal-light { color: var(--color-charcoal-light); }
.text-water-deep { color: var(--color-water-deep); }
.text-water-mid { color: var(--color-water-mid); }
.text-white { color: var(--color-white); }

.italic { font-style: italic; }
.not-italic { font-style: normal; }

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-300 { --tw-duration: .3s; transition-duration: .3s; }

@media (hover:hover) {
  .hover\:-translate-y-2:hover {
    --tw-translate-y: calc(var(--spacing)*-2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .hover\:bg-water-deep:hover { background-color: var(--color-water-deep); }
  .hover\:text-water-deep:hover { color: var(--color-water-deep); }
  .hover\:text-water-mid:hover { color: var(--color-water-mid); }
  .hover\:text-water-pale:hover { color: var(--color-water-pale); }
  .hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

@media (min-width:40rem) {
  .sm\:col-span-2 { grid-column: span 2/span 2; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:px-8 { padding-inline: calc(var(--spacing)*8); }
}

@media (min-width:48rem) {
  .md\:col-span-2 { grid-column: span 2/span 2; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
  .md\:text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); }
}

@media (min-width:64rem) {
  .lg\:col-span-3 { grid-column: span 3/span 3; }
  .lg\:col-span-4 { grid-column: span 4/span 4; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
  .lg\:text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); }
}

@media (min-width:80rem) {
  .xl\:col-span-4 { grid-column: span 4/span 4; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* extra font rule you had */
:root,
body { font-family: Barlow, system-ui, sans-serif; }

/* keep @property + keyframes (these are plain CSS and harmless) */
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }

@keyframes bounce {
  0%, to {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}


/* ====== GLOBAL STYLES ====== */
.hero-gradient {
	background: linear-gradient(135deg, #E6F3FF 0%, #B3D9FF 50%, #005F8E 100%);
}

.w-40 {
	width: calc(var(--spacing) * 41);	
}

.media-modal {
    backdrop-filter: blur(8px);
	background-color: rgba(0, 0, 0, 0.9) !important;
}

#media-modal-close {
	z-index: 9999;
}

.media-modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain !important;
}

.bg-opacity-90 {
    --tw-bg-opacity: 0.9;
}

.media-modal-wrapper {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 85vw;
    max-height: 90vh;
}

#media-modal {
  display: none;
}

.top-4 {
    top: 1rem;
}

.right-4 {
    right: 1rem;
}

/* When open */
#media-modal.is-open {
  display: flex;
}

#media-modal.is-open { display: flex !important; }

#media-modal-content video,
#media-modal-content img {
	width: 100%;
  height: 100%;
}

#media-modal-content {
  max-height: calc(90vh - 113px);
}

.h-40 {
    height: calc(var(--spacing) * 40);
}

html, body {
	max-width: 100vw;
	overflow-x: clip;
	font-family: "Barlow", Inter, system-ui, sans-serif !important;
}

.text-shadow {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.backdrop-blur-subtle {
	backdrop-filter: blur(8px);
}

/* ====== NAVIGATION STYLES ====== */
.nav-header {
	transition: all 0.3s ease;
}

.nav-header.scrolled {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.95);
}

.nav-header.menu-open {
	background-color: #ffffff !important;
	backdrop-filter: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-header.scrolled .logo-container {
	transform: scale(0.7);
}

.w-20 {
	width: calc(var(--spacing) * 20);	
}

.h-20 {
	width: calc(var(--spacing) * 20);	
}

.nav-header.scrolled .logo-text {
	opacity: 0;
	transform: translateX(-20px);
}

.nav-header.scrolled .nav-content {
	justify-content: center;
}

.logo-container {
	transition: all 0.3s ease;
	transform-origin: center;
	z-index: 10;
}

.logo-text {
	transition: all 0.3s ease;
}

.nav-content {
	transition: all 0.3s ease;
}

.nav-link {
	position: relative;
	transition: color 0.3s ease;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 50%;
	background-color: #005F8E;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

/* ====== MOBILE MENU STYLES - FIXED ====== */
.mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease;
	background-color: #ffffff !important;
	backdrop-filter: none;
	z-index: 100;
	/* keep above header */
}

.mobile-menu.open {
	transform: translateX(0);
	background-color: #ffffff !important;
}

@media (max-width: 1024px) {
	.nav-header {
		background-color: #ffffff !important;
		/* solid bg on mobile to avoid transparency bug */
		backdrop-filter: none !important;
	}
}

@media (max-width: 1132px) {
  #media-modal-content {
    max-height: calc(90vh - 137px);
}
}

/* ====== ANIMATION STYLES ====== */
.fade-in-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.active {
	opacity: 1;
	transform: translateY(0);
}

/* ====== INFINITE SCROLL SLIDER STYLES ====== */
.client-slider-container {
	position: relative;
	overflow: hidden;
	padding: 2rem 30px;
}

#services article {
	text-align: center;
}

#client-slider {
	display: flex;
	overflow: hidden;
	gap: 2rem;
	padding-top: 10px;
	padding-bottom: 10px;
}

#client-track {
	display: flex;
	gap: 2rem;
	transition: transform 0.1s linear;
	will-change: transform;
}

.client-card {
	flex: 0 0 280px;
	background: white;
	padding: 1.5rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: default;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.blog-text blockquote {
  background-color: rgb(0 95 142 / var(--tw-bg-opacity, 1));
  color: #fff;
  border-radius: 0.5rem;
  padding: 50px;
  text-align: center;
}

.blog-text blockquote h2 {
  margin-top: 0 !important;
}

.blog-text blockquote p,
.blog-text blockquote ol,
.blog-text blockquote ul {
  color: #fff !important;
}

.wp-element-caption {
  text-align: center;
}

.blog-text .wp-block-verse {
  color: rgb(0 95 142 / var(--tw-bg-opacity, 1));
  font-size: 1.6rem;
  font-weight: 700;
  width: 80%;
  margin: auto;
  text-align: center;
}

.client-card:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

.client-card img {
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

/* ====== SLIDER BUTTONS - JUST ICONS ====== */
.slider-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
	color: rgba(0, 49, 86, 0.7);
}

.slider-button:hover {
	color: rgba(0, 49, 86, 1);
	transform: translateY(-50%) scale(1.2);

}

.slider-button.prev {
	left: 20px;
}

.slider-button.next {
	right: 20px;
}

#media-modal-prev {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	/* 40% transparent (60% opacity) */
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 30;
	transition: all 0.3s ease;
	box-shadow: none;
  left: 20px;
}

#media-modal-next {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	/* 40% transparent (60% opacity) */
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 30;
	transition: all 0.3s ease;
	box-shadow: none;
  right: 20px;
}

/* ====== SLIDESHOW CONTROLS - 40% TRANSPARENT BORDER ====== */
.slideshow-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	/* 40% transparent (60% opacity) */
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 30;
	transition: all 0.3s ease;
	box-shadow: none;
}

.slideshow-control:hover {
	border-color: rgba(255, 255, 255, 0.9);
	transform: translateY(-50%) scale(1.1);
}

.slideshow-control.prev {
	left: 20px;
}

.slideshow-control.next {
	right: 20px;
}

/* ====== MAP STYLES ====== */
.leaflet-container {
	border-radius: 0rem;
	background-color: #f0f7ff;
}

.map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 999;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.map-overlay.active {
	z-index: -1;
	pointer-events: none;
}

.map-overlay-text {
	background: rgba(0, 49, 86, 0.8);
	color: white;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	position: absolute;
	inset: 0;
	/* top:0; right:0; bottom:0; left:0 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1500;
	cursor: pointer;
}

.map-overlay-text.hidden {
	display: none;
}

.map-reset-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	padding: 8px 12px;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	font-size: 12px;
	font-weight: 600;
	color: #003156;
	z-index: 1000;
	transition: all 0.3s ease;
	border: none;
}

.map-reset-button:hover {
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ====== CAPTCHA STYLES ====== */
.captcha-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid #e5e7eb;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	margin: 0 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.captcha-circle:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.captcha-circle.selected {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
	border-color: #2C2C2C;
	transform: scale(1.05);
}

/* ====== PAGE STYLES ====== */
.page-section {
	display: none;
}

.page-section.active {
	display: block;
}

/* ====== TAG STYLES ====== */
.tag-pill {
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.3s;
	user-select: none;
}

.tag-pill:hover {
	transform: scale(1.05);
}

.tag-pill.active {
	box-shadow: 0 0 0 3px rgba(0, 95, 142, 0.3);
}

/* ====== HONEYPOT STYLES ====== */
.honeypot {
	position: absolute;
	left: -9999px;
	height: 0;
	width: 0;
}

/* ====== SLIDESHOW STYLES ====== */
.slideshow-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	border-radius: 0rem;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.slide.active {
	opacity: 1;
}

.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slideshow-nav {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	z-index: 40;
	/* Increased z-index to ensure clickability */
}

.slideshow-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	z-index: 40;
	/* Ensure dots are clickable */
}

.slideshow-dot:hover {
	transform: scale(1.15);
	background-color: rgba(255, 255, 255, 0.7);
}

.slideshow-dot.active {
	background-color: rgba(255, 255, 255, 0.9);
}

.slideshow-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 49, 86, 0.3) 0%, transparent 50%);
	border-radius: 0rem;
	z-index: 5;
}

/* ====== CONTACT BUTTON SHINE EFFECT ====== */
.btn-shine {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-shine::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.6s ease;
}

.btn-shine:hover::before {
	left: 100%;
}

.btn-shine:active {
	transform: translateY(-1px) scale(0.98);
}

.btn-shine:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 49, 86, 0.3);
}

/* ====== BUTTON STYLES ====== */
.btn-water {
	transition: all 0.3s ease;
}

.btn-water:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 49, 86, 0.2);
}

/* ====== SKIP LINK ====== */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #003156;
	color: white;
	padding: 8px;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.skip-link:focus {
	top: 0;
}

/* Right-side section dots */
.section-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.section-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
  opacity: 0.75;
}

.section-dot:hover {
  transform: scale(1.15);
  opacity: 1;
}

.section-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  opacity: 1;
}

@media (max-width: 768px) {
  .section-dots { display: none; } /* hide on mobile by default */
  #media-modal-content {
    min-height: 0;
    padding-bottom: 20px;
  }
}


#page-section-dots {
	background: #ffffffcc;
}

/* ====== MEDIA MODAL STYLES ====== */
.media-modal {
	backdrop-filter: blur(8px);
}

.media-modal-wrapper {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 85vw;
	max-height: 90vh;
}

.media-modal-header {
	background: #f8f9fa;
	padding: 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.media-modal-content {
	padding: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}



/* ====== PROJECT OVERVIEW FULL WIDTH ====== */
#project-overview .w-full {
	margin: 0;
	padding: 0;
}

#project-overview .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ====== SLIDESHOW SECTION HEIGHT ====== */
#slideshow {
	height: 100vh;
}

/* ====== VIDEO THUMBNAIL STYLES ====== */
.video-thumbnail {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	background-color: #000;
}

.video-thumbnail video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.video-thumbnail .play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: all 0.3s ease;
}

.blog-text p,
.blog-text ol,
.blog-text ul {
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1.625em;
}

.blog-text h2,
.blog-text h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 24px;
}

.blog-text h3 {
	font-size: 1.9rem;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 24px;
}

.blog-text h4 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 24px;
}

.blog-text h5 {
	font-size: 18px;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 24px;
}

.blog-text h6 {
	font-size: 16px;
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 24px;
}

.blog-text p:not(:first-child) {
	margin-top: 24px;
}

.blog-text p:not(:last-child) {
	margin-bottom: 24px;
}

.blog-text ol,
.blog-text ul {
	margin-top: 24px;
	margin-bottom: 24px;
	padding-left: 20px;
}

.blog-text img {
	display: block;
	margin: 24px auto;
}

.slider-button.prev {
	left: 10px;
}

#services-grid a {
	color: rgb(0 95 142 / var(--tw-bg-opacity, 1));
}

.video-thumbnail:hover .play-icon {
	background-color: rgba(0, 0, 0, 0.8);
	transform: translate(-50%, -50%) scale(1.1);
}

.video-thumbnail .play-icon i {
	color: white;
	width: 30px;
	height: 30px;
}

.bg-water-mid {
	--tw-bg-opacity: 1;
	background-color: rgb(0 95 142 / var(--tw-bg-opacity, 1));
}

#project-overview {
	width: 100vw;
	overflow: hidden;
}

.py-30 {
	padding-block: calc(var(--spacing)*30)
}

.py-40 {
	padding-block: calc(var(--spacing)*40)
}

.p-4 {
	padding: 0.5rem;
}

.border-water-light {
	--tw-border-opacity: 1;
	border-color: rgb(74 144 226 / var(--tw-border-opacity, 1));
}

.bg-opacity-10 {
	opacity: 0.1;
}



/* ====== RESPONSIVE STYLES ====== */
@media (max-width: 1024px) {
	.client-slider-container {
		padding: 1.5rem 0;
	}

	.client-card {
		flex: 0 0 240px;
		height: 180px;
	}

	.client-card img {
		max-height: 56px;
	}

	.slider-button {
		width: 36px;
		height: 36px;
	}

	.slider-button.prev {
		left: 12px;
	}

	.slider-button.next {
		right: 12px;
	}
}

@media (max-width: 768px) {
	.slideshow-container {
		height: 100vh;
	}

  .blog-text blockquote {
    padding: 30px;
  }

	.slideshow-nav {
		bottom: 0.5rem;
		z-index: 40;
		/* Maintain high z-index on mobile */
	}

	.slideshow-dot {
		width: 10px;
		height: 10px;
		z-index: 40;
		/* Maintain high z-index on mobile */
	}

	.media-modal-wrapper {
		max-width: 95vw;
		max-height: 95vh;
	}

	.slideshow-control {
		width: 40px;
		height: 40px;
	}

	.slideshow-control.prev {
		left: 10px;
	}

	.slideshow-control.next {
		right: 10px;
	}

	.nav-header.scrolled .logo-container {
		left: 0rem;
		transform: translateY(0%) scale(1);
	}

	.client-slider-container {
		padding: 1rem 0;
	}

	.client-card {
		flex: 0 0 200px;
		height: 160px;
		padding: 1rem;
	}

	.client-card img {
		max-height: 48px;
	}

	.slider-button {
		width: 32px;
		height: 32px;
	}

	.slider-button.prev {
		left: 8px;
	}

	.slider-button.next {
		right: 8px;
	}

	.video-thumbnail .play-icon {
		width: 50px;
		height: 50px;
	}

	.video-thumbnail .play-icon i {
		width: 24px;
		height: 24px;
	}
}

@media (max-width: 480px) {
	.client-card {
		flex: 0 0 180px;
		height: 140px;
		padding: 0.75rem;
	}

  .blog-text blockquote {
    padding: 20px;
  }

	.client-card img {
		max-height: 40px;
	}
}


    #map {  
		width: 100%; 
		height: calc(100vh - 120px);
		position: relative;
		font-family: var(--font-sans) !important;
	}

  .map-gesture-hint__text {
    font-size: 20px;
  }

    /* Optional overlay to force “click to activate” (matches your earlier code idea) */
    #mapOverlay {
      position: absolute;
      inset: 0;
      z-index: 1200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(11, 14, 20, 0.55);
      backdrop-filter: blur(2px);
      cursor: pointer;
    }
    #mapOverlay.hidden { display: none; }
    #mapOverlay .overlay-card {
      background: rgba(31, 41, 55, 0.95);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 14px 16px;
      color: #f9fafb;
      font-family: var(--font-sans) !important;
      box-shadow: 0 10px 25px rgba(0,0,0,0.55);
      max-width: 340px;
      text-align: center;
      line-height: 1.35;
    }
    #mapOverlay .overlay-card b { color: #fbbf24; }

    /* Panel */
    #panel {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1100;
      background: rgba(31, 41, 55, 0.95);
      backdrop-filter: blur(8px);
      color: #f9fafb;
      padding: 16px;
      border-radius: 12px;
      font-size: 13px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
      width: 300px;
      font-family: var(--font-sans) !important;
      border: 1px solid rgba(255,255,255,0.1);
	  transform: translateX(110%);
  	  transition: transform 0.25s ease;
    }
	#panel.open {
		transform: translateX(0);
	}

	/* Toggle button */
.panel-toggle-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1100;
  background: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
}

.panel-toggle-btn:hover {
  background: #374151;
}

/* Close button inside panel */
.panel-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
}

.panel-close-btn:hover {
  color: #ffffff;
}

    #panel h3 {
      margin-top: 0;
      margin-bottom: 12px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #9ca3af;
      border-bottom: 1px solid #374151;
      padding-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .filter-title {
      font-weight: 700;
      color: #f3f4f6;
      font-size: 14px;
    }
    .filter-controls { display: flex; gap: 6px; }
    .filter-controls button {
      background: #374151;
      color: #fff;
      border: 1px solid #4b5563;
      border-radius: 6px;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 11px;
      transition: all 0.2s;
    }
    .filter-controls button:hover { background: #4b5563; }

    #tagFilters label {
      display: flex;
      align-items: center;
      margin: 4px 0;
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 8px;
      transition: background-color 0.2s;
      gap: 10px;
    }
    #tagFilters label:hover { background: #374151; }
    #tagFilters input { margin: 0; }

    .count {
      margin-left: auto;
      font-weight: 800;
      color: #fbbf24;
      background: rgba(69, 26, 3, 0.5);
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
    }

    .tag-swatch {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.2);
      flex: 0 0 auto;
    }
    .tag-icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }

    #privacyMsg {
      position: absolute;
      z-index: 1150;
      left: 50%;
      transform: translateX(-50%);
      top: 12px;
      background: #1f2937;
      color: #fbbf24;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      box-shadow: 0 4px 15px rgba(0,0,0,.4);
      border: 1px solid #374151;
      display: none;
      font-family: var(--font-sans) !important;
    }

    .notification {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #1f2937;
      color: #fbbf24;
      padding: 12px 18px;
      border-radius: 10px;
      z-index: 1300;
      opacity: 0;
      transition: opacity 0.25s;
      border: 1px solid #374151;
      font-family: var(--font-sans) !important;
      max-width: min(560px, calc(100vw - 32px));
      text-align: center;
    }
    .notification.show { opacity: 1; }

    /* Cluster styling */
    .custom-cluster { border: none !important; background: transparent !important; }
    .cluster-inner {
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      border: 3px solid rgba(255,255,255,0.9);
      box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
      user-select: none;
    }

    /* Simple mobile tweak */
    @media (max-width: 720px) {
      #panel { width: 260px; padding: 12px; }
      #mapOverlay .overlay-card { max-width: 280px; }
    }

	@media (max-width: 768px) {
		#media-modal-close svg {
			width: 16px;
			height: 16px;
			top: 24px;
		}

    #mapGestureHint {
      width: calc(100% - 40px);
    }
     .map-gesture-hint__text {
      font-size: 16px;
      text-align: center;
    }
	}