/* Dark petrol theme */
:root {
  --night: #0c2429;
  --petrol: #102f35;
  --petrol-2: #173a40;
  --surface: #1d4549;
  --surface-hover: #255158;
  --edge: #376064;
  --text: #dce9e1;
  --muted: #a9c0bb;
  --accent: #9bcaa6;
  --accent-dark: #b7dcc0;
  --slate: #a9c0bb;
}

body { background: var(--petrol); color: var(--text); }
::selection { background: #80bda1; color: var(--night); }
:focus-visible { outline-color: var(--accent); }
.skip-link { background: var(--accent); color: var(--night); }

/* Header */
.site-header {
  background: #102b30;
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 8px 25px rgba(5, 22, 25, .13);
}
.brand-symbol { background: #27524f; }
.brand-symbol::after, .brand-symbol span { background: var(--accent); }
.brand-name { color: var(--text); }
.brand-name > span { color: var(--accent); }
.brand-name small { color: #a9c3ba; }
.desktop-nav a { color: #cfdfd8; }
.desktop-nav a:hover, .footer-links a:hover { color: var(--accent); }
.language-picker svg { stroke: var(--muted); }
.language-picker select { color: var(--text); }
.language-picker select option { background: var(--petrol); color: var(--text); }
.header-cta {
  background: #2c5e57;
  color: #e7f3e9;
  border: 1px solid #417b6d;
}
.header-cta:hover { background: #387065; }
.menu-toggle span { background: var(--text); }
.mobile-nav:not([hidden]) { background: #14353a; box-shadow: 0 16px 30px rgba(3, 15, 18, .32); }
.mobile-nav a { color: var(--text); border-top-color: var(--edge); }

/* The photograph stays recognisable; the overlay connects it to the new palette. */
.hero { background: var(--night); color: #e5eee8; }
.hero-image { filter: saturate(.72) contrast(.96); }
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 35, 39, .93) 0%, rgba(10, 43, 46, .82) 31%, rgba(11, 49, 51, .35) 65%, rgba(12, 46, 45, .2) 100%),
    linear-gradient(0deg, rgba(7, 32, 36, .69), transparent 39%);
}
.hero-copy > p, .hero-bottom { color: #c6d9d0; }
.button-accent { background: var(--accent); color: var(--night); }
.button-accent:hover { background: #b7dfbf; }
.button-outline { border-color: #99b8b1; color: #e1eee6; }
.button-outline:hover { background: rgba(143, 196, 166, .12); }

/* Content sections share one family of petrol shades. */
.intro-bar { background: #1b4144; border-bottom: 1px solid var(--edge); }
.intro-lead p, .intro-fact strong { color: #dce9e1; }
.intro-fact { border-left-color: #4a706c; }
.intro-fact span { color: #b6ccc4; }
.services { background: var(--petrol); }
.section-head > p { color: var(--muted); }
.eyebrow { color: var(--accent); }
.eyebrow.light { color: var(--accent); }
.service-card {
  background: #1b3e43;
  border-color: var(--edge);
  color: var(--text);
}
.service-card:hover {
  background: #20484c;
  box-shadow: 0 18px 42px rgba(2, 19, 23, .23);
}
.service-number { color: var(--accent); }
.service-icon { background: #2b5c55; }
.service-icon svg { stroke: #d8eee0; }
.service-card p { color: #b6cac3; }

.about { background: #194047; color: var(--text); }
.about-photo img { filter: saturate(.69) contrast(.94) brightness(.84); }
.about-photo::after { background: linear-gradient(0deg, rgba(7, 31, 34, .8), transparent 39%); }
.photo-label { color: #dce9e1; }
.about-content > p { color: #b6cec7; }
.light-link { color: var(--accent); }

.gallery { background: #0f2b31; }
.gallery-item { background: #21454a; border: 1px solid #33585b; }
.gallery-item img { filter: saturate(.74) brightness(.87); }
.gallery-item:hover img, .gallery-item:focus-visible img { filter: saturate(.88) brightness(.98); }
.gallery-item::after { background: linear-gradient(0deg, rgba(6, 29, 33, .9), transparent); }
.gallery-item-label { color: #e1eee7; }
.gallery-source { border-bottom-color: var(--accent); color: var(--accent); }

/* Contact form is a dark surface instead of a white panel. */
.contact { background: #16383d; color: var(--text); border-top: 1px solid var(--edge); }
.contact-info > p { color: var(--muted); }
.contact-methods strong { color: #e0eee5; }
.facebook-link { color: var(--text); border-bottom-color: #6e9990; }
.contact-form-panel {
  background: #21484b;
  border: 1px solid #426b68;
  color: var(--text);
  box-shadow: 0 20px 60px rgba(2, 21, 25, .16);
}
.form-index { color: #9cb9b2; }
.form-intro, .form-note { color: #b5cbc4; }
.contact-form-panel label { color: #d1e3d9; }
.contact-form-panel input, .contact-form-panel textarea {
  background: #15373b;
  border-color: #4d7771;
  color: #e1eee7;
}
.contact-form-panel input:focus, .contact-form-panel textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(155, 202, 166, .18);
}
.button-dark { background: var(--accent); color: var(--night); }
.button-dark:hover { background: #b8ddbe; }
.form-status { color: #bde4bf; }

.footer { background: #0b262c; color: var(--muted); border-top: 1px solid #2c5155; }
.footer-brand .brand-symbol { background: #27524f; }
.footer-brand .brand-name { color: var(--text); }
.footer-brand .brand-name small, .footer-top p, .footer-bottom { color: #a9c0bb; }
.footer-links a { color: #cfdfd8; }
.footer-bottom { border-top-color: #37595b; }
.lightbox { background: var(--night); color: var(--text); }
.lightbox::backdrop { background: rgba(4, 20, 23, .88); }
.lightbox-close { background: #24514e; color: var(--text); }

@media (max-width: 800px) {
  .hero-overlay {
    background: linear-gradient(90deg, rgba(8, 35, 39, .91), rgba(10, 46, 48, .51)),
      linear-gradient(0deg, rgba(7, 32, 36, .52), transparent 42%);
  }
}

@media (max-width: 560px) {
  .gallery-grid { grid-auto-rows: auto; }
  .gallery-item { height: 190px; }
  .gallery-item-large { grid-column: 1 / -1; grid-row: auto; height: 265px; }
}