/* sitemgr base stylesheet — layout, rhythm and shared components.
   Consumes CSS custom properties; themes and palettes set the variables.
   Derived colors use color-mix() at point of use so every palette gets
   tints/shades for free. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --btn-radius: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 8px 24px -12px rgba(15, 23, 32, 0.12);
  --shadow-lg: 0 2px 4px rgba(15, 23, 32, 0.05), 0 24px 48px -16px rgba(15, 23, 32, 0.22);
  --section-pad: clamp(4rem, 9vw, 7rem);
  --container: 1140px;
  --heading-weight: 700;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--color-primary) 24%, transparent); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.5vw, 3.7rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.22rem; line-height: 1.35; }

p { margin: 0 0 1em; }
a { color: var(--color-primary); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

[id] { scroll-margin-top: 90px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85em 1.9em;
  border-radius: var(--btn-radius);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.btn:active { transform: translateY(0); }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 8px 30px -12px rgba(10, 14, 20, 0.18); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 1rem;
}

.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
}
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 180px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-actions { display: flex; align-items: center; gap: 0.9rem; }

.site-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  padding: 0.3rem 0;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left calc(100% - 1px);
  transition: color 0.18s ease, background-size 0.25s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--color-text);
  background-size: 100% 2px;
}

.nav-cta {
  padding: 0.55em 1.2em;
  font-size: 0.95rem;
  white-space: nowrap;
}
.nav-cta:hover { transform: none; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-cta { font-size: 0.9rem; padding: 0.5em 1em; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .site-nav a { display: block; padding: 0.85rem clamp(1.25rem, 4vw, 2rem); background-image: none; }
}
@media (max-width: 480px) {
  .nav-cta { display: none; }
}

/* ---------- Sections ---------- */

.section { padding: var(--section-pad) 0; }
.section.alt { background: var(--color-surface-alt); }
.section-heading { text-align: center; max-width: 46rem; margin-inline: auto; }
.section-heading + * { margin-top: 2.75rem; }
.section-intro {
  color: var(--color-text-muted);
  text-align: center;
  max-width: 42rem;
  margin: 0.9rem auto 2.75rem;
  font-size: 1.1rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  padding: var(--section-pad) 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  overflow: hidden;
}
.hero.has-image { min-height: clamp(520px, 68vh, 680px); }
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 22, 0.28);
  opacity: 0;
}
.hero.has-image::after { opacity: 1; background: linear-gradient(rgba(12,14,18,0.55), rgba(12,14,18,0.35)); }
/* Bright hero photos need a heavier scrim so the white heading stays legible. */
.hero.has-image.hero-bright::after { background: linear-gradient(rgba(10,12,16,0.68), rgba(10,12,16,0.52)); }
/* min-width: 0 — .hero is a flex row, and a flex item's default min-width:auto lets
   a long unbreakable heading word push the container past the viewport (the hero's
   overflow:hidden then clips it, eating the right margin on narrow phones). */
.hero .container { position: relative; z-index: 1; min-width: 0; }
.hero-content { max-width: 48rem; }
/* Over a photo, sit the text on a frosted panel: the background image is blurred
   and dimmed only behind the words, so the heading stays crisp and legible on any
   image without hiding the photo elsewhere. Progressive enhancement — where
   backdrop-filter is unsupported the semi-transparent panel alone still works. */
.hero.has-image .hero-content {
  padding: 2rem 2.2rem;
  border-radius: var(--radius-lg);
  background: rgba(15, 18, 22, 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
}
.hero h1, .hero h2 { font-size: clamp(2.4rem, 6vw, 4rem); overflow-wrap: break-word; }
.hero h1, .hero h2, .hero .hero-sub { color: #ffffff; text-shadow: 0 1px 8px rgba(0,0,0,0.25); }
.hero .hero-sub {
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  max-width: 40rem;
  margin-bottom: 2rem;
  opacity: 0.94;
}
.hero .btn { background: #ffffff; color: #1d2430; }
.hero.has-image .btn { background: var(--color-primary); color: var(--color-primary-contrast); }

/* On narrow phones the fixed panel padding plus the container gutter leaves the
   hero heading a column too narrow for its 2.4rem floor — display faces (uppercase
   Archivo Black especially) overflow the panel's right padding. Tighten the panel
   and let the heading track the viewport. The heading selector carries extra
   specificity so it beats per-theme h1 sizes, which load after base.css. */
@media (max-width: 480px) {
  .hero.has-image .hero-content { padding: 1.5rem 1.2rem; }
  .hero .hero-content h1,
  .hero .hero-content h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
}

/* Gentle entrance for above-the-fold hero copy (JS-enabled browsers only). */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-content { animation: hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html.js .hero-img { animation: hero-zoom 8s ease-out both; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* ---------- Reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Card grids (services, team) ---------- */

.card-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.section:not(.alt) .card { background: var(--color-surface-alt); }
.card img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover img { transform: scale(1.045); }
.card-body { padding: 1.6rem; flex: 1; }
.card-body h3 { margin-bottom: 0.45em; }
.card-body p { color: var(--color-text-muted); margin: 0; }
.card .role { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.5em; }
.avatar-fallback {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary-contrast);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* ---------- Stats ---------- */

.stats-grid {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  text-align: center;
}
.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.stat-label {
  margin-top: 0.55rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-grid.has-image { grid-template-columns: 6fr 5fr; }
}
.about-grid img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}
.gallery-grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, filter 0.4s ease;
}
.gallery-grid img:hover {
  transform: scale(1.025);
  box-shadow: var(--shadow-lg);
}

/* ---------- Lightbox (gallery zoom) ---------- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
}
.lightbox::backdrop { background: rgba(8, 10, 14, 0.88); backdrop-filter: blur(4px); }
.lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  margin: 0 auto;
}
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  margin: 0;
}
.section:not(.alt) .testimonial { background: var(--color-surface-alt); }
.testimonial blockquote { margin: 0 0 1.1rem; font-style: italic; font-size: 1.05rem; }
.testimonial figcaption { font-weight: 600; color: var(--color-primary); }
.testimonial figcaption::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* ---------- FAQ ---------- */

.faq-list { max-width: 46rem; margin: 0 auto; }
.faq-list details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  background: var(--color-surface);
  transition: border-color 0.2s ease;
}
.section:not(.alt) .faq-list details { background: var(--color-surface-alt); }
.faq-list details[open] { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.faq-list summary {
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  transition: transform 0.25s ease;
}
.faq-list details[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); }
.faq-list details p { padding: 0 1.4rem 1.2rem; margin: 0; color: var(--color-text-muted); }

/* ---------- Hours ---------- */

.hours-table { max-width: 34rem; margin: 0 auto; border-collapse: collapse; width: 100%; }
.hours-table td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.hours-note { text-align: center; color: var(--color-text-muted); margin-top: 1.3rem; font-size: 0.95rem; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid.has-form { grid-template-columns: 5fr 6fr; }
}
.contact-details { list-style: none; padding: 0; margin: 0; }
.contact-details li { margin-bottom: 1rem; padding-left: 1.7rem; position: relative; }
.contact-details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.contact-form { display: grid; gap: 1.1rem; }
.contact-form label { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 0.35rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.7);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ---------- CTA banner ---------- */

.cta-banner {
  position: relative;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  color: var(--color-primary-contrast);
  text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  overflow: hidden;
}
.cta-banner h2, .cta-banner p { color: var(--color-primary-contrast); }
.cta-banner h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.cta-banner p { opacity: 0.92; max-width: 40rem; margin: 0 auto 1.8rem; font-size: 1.08rem; }
.cta-banner .btn { background: var(--color-surface); color: var(--color-text); }
.cta-banner .container { position: relative; z-index: 1; }

/* ---------- Rich text ---------- */

.prose { max-width: 46rem; margin: 0 auto; }
.prose p { color: var(--color-text); }
.prose h2 { margin-top: 0; }

/* ---------- Map ---------- */

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.map-wrap iframe { display: block; width: 100%; height: 440px; border: 0; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-bottom: 2.5rem;
}
.footer-name {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
  color: var(--color-text);
}
.site-footer h4 {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--color-text-muted); text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--color-primary); }
.footer-tagline { color: var(--color-text-muted); max-width: 26rem; }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}