:root {
  --radius: 0.5rem;
  --background: oklch(0.985 0.005 80);
  --foreground: oklch(0.18 0.01 60);
  --surface: oklch(1 0 0);
  --gold: oklch(0.75 0.14 80);
  --gold-soft: oklch(0.88 0.08 85);
  --primary-foreground: oklch(0.15 0.01 60);
  --muted-foreground: oklch(0.45 0.01 60);
  --border: oklch(0.9 0.005 80);
  --input: oklch(0.9 0.005 80);
  --secondary: oklch(0.95 0.01 80);
}
.dark {
  --background: oklch(0.14 0.005 60);
  --foreground: oklch(0.96 0.005 80);
  --surface: oklch(0.18 0.005 60);
  --gold: oklch(0.78 0.15 80);
  --gold-soft: oklch(0.6 0.12 80);
  --primary-foreground: oklch(0.14 0.005 60);
  --muted-foreground: oklch(0.68 0.01 60);
  --border: oklch(0.28 0.008 60);
  --input: oklch(0.28 0.008 60);
  --secondary: oklch(0.24 0.008 60);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  margin: 0;
}
#content,
body > .flex {
  min-width: 0;
}
h1,h2,h3,h4 { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; }

.container-tight { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
@media (max-width: 639.98px) {
  .container-tight { padding-inline: 1rem; }
}
.bg-background { background-color: var(--background); }
.bg-surface    { background-color: var(--surface); }
.bg-secondary  { background-color: var(--secondary); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }
.border-input  { border-color: var(--input); }

.text-gold   { color: var(--gold); }
.bg-gold     { background-color: var(--gold); }
.border-gold { border-color: var(--gold); }
.text-primary-foreground { color: var(--primary-foreground); }
.bg-gold\/15 { background-color: color-mix(in oklab, var(--gold) 15%, transparent); }
.bg-gold\/10 { background-color: color-mix(in oklab, var(--gold) 10%, transparent); }
.border-gold\/30 { border-color: color-mix(in oklab, var(--gold) 30%, transparent); }
.border-gold\/60 { border-color: color-mix(in oklab, var(--gold) 60%, transparent); }

.bg-gradient-gold {
  background-image: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
}
.text-gradient-gold {
  background-image: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shadow-gold {
  box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--gold) 40%, transparent);
}
.grid-lines {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.font-display { font-family: "Space Grotesk", system-ui, sans-serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Mega menu – full header width, not nav-item width */
header.sticky,
header[class*="sticky"] {
  position: sticky;
}

.sr-has-mega {
  position: static !important;
}

.sr-mega {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100%;
  top: 100%;
  display: none;
  z-index: 40;
}

/* Invisible hover bridge so the menu doesn't close in the gap between the
   nav item and the panel when moving the cursor down. */
.sr-mega::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 1.75rem;
}

.sr-mega--light,
.sr-mega.sr-mega--light {
  background: #ffffff !important;
  backdrop-filter: none;
}

.dark .sr-mega--light,
.dark .sr-mega.sr-mega--light {
  background: #ffffff !important;
  color: #1a1a1a;
}

.dark .sr-mega--light .text-foreground,
.dark .sr-mega--light .font-display,
.dark .sr-mega--light h3 {
  color: #1a1a1a;
}

.dark .sr-mega--light .text-muted-foreground,
.dark .sr-mega--light p {
  color: #555;
}

.dark .sr-mega--light .bg-surface,
.dark .sr-mega--light .sr-mega-intro {
  background: #f8f8f8 !important;
}

.dark .sr-mega--light a:hover .font-display {
  color: var(--gold);
}

.sr-mega-inner {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem;
}

.sr-mega-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}

@media (min-width: 1024px) {
  .sr-mega-inner {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 2.5rem;
  }
}

.sr-has-mega:hover .sr-mega,
.sr-mega:hover,
.sr-has-mega.open .sr-mega {
  display: block;
}

/* Mobile menu */
.sr-mobile { display: none; }
.sr-mobile.open { display: block; }
.sr-submenu { display: none; }
.sr-submenu.open { display: block; }

/* Details marker fix */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .sr-plus { transform: rotate(45deg); }

/* Remix Icon */
.sr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* ============================================================
   Responsive media (site-wide)
   ============================================================ */

/* Logos – fixed size, never stretched by content-image rules */
.sr-brand-logo {
  display: block;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain;
}
header .sr-brand-logo {
  height: 2.25rem !important;
  max-height: 2.25rem !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}
@media (min-width: 640px) {
  header .sr-brand-logo {
    height: 3rem !important;
    max-height: 3rem !important;
  }
}
footer .sr-brand-logo { height: 4rem !important; max-height: 4rem !important; }

/* ── Homepage: image frames (native CSS – no Tailwind aspect dependency) ── */

.sr-hero__media {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.sr-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.sr-card__media {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.sr-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease;
}

.sr-card:hover .sr-card__media img {
  transform: scale(1.05);
}

@media (min-width: 1024px) {
  .sr-hero__media {
    aspect-ratio: 4 / 5;
  }

  .sr-hero__media img {
    object-position: center;
  }
}

/* Content image frames (hero, cards, service pages) */
.sr-media {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sr-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Aspect-ratio boxes used without .sr-media wrapper */
[class*="aspect-"] > img,
.relative.overflow-hidden > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Standalone responsive images (no cover crop) */
#content img:not(.sr-brand-logo):not([class*="object-cover"]):not([class*="h-full"]) {
  max-width: 100%;
  height: auto;
}

video, iframe {
  max-width: 100%;
  display: block;
}

/* ============================================================
   Mobile responsiveness & overflow fixes
   ============================================================ */

.sr-hero,
.sr-builder-row.sr-hero {
  max-width: 100%;
}

h1, h2, h3, h4,
p, li, blockquote, figcaption, dt, dd, summary, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1, h2, h3, h4 { hyphens: auto; }

@media (max-width: 639.98px) {
  .sr-hero,
  .sr-builder-row.sr-hero {
    overflow-x: clip;
  }

  h1, h2, h3, h4,
  p, li, blockquote, figcaption, dt, dd, summary, a {
    overflow-wrap: anywhere;
  }
  .container-tight {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
  }

  header .container-tight {
    gap: 0.5rem;
  }

  #content .grid,
  #content .flex,
  .sr-builder-page .grid,
  .sr-builder-page .flex {
    min-width: 0;
    max-width: 100%;
  }

  #content .grid > *,
  #content .flex > *,
  .sr-builder-page .grid > *,
  .sr-builder-page .flex > * {
    min-width: 0;
    max-width: 100%;
  }

  .sr-hero-glow {
    inset: -0.5rem !important;
  }

  .sr-hero h1.font-display {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .sr-hero__media {
    aspect-ratio: 16 / 10;
    max-height: 13rem;
  }

  .sr-card__media {
    aspect-ratio: 16 / 10;
  }

  article .relative[class*="aspect-"] {
    width: 100%;
    max-width: 100%;
  }

  /* Grid / flex children must shrink on narrow viewports. */
  #content .grid > *,
  #content .flex > .flex-1,
  #content [class*="flex-1"],
  .container-tight .grid > *,
  .container-tight .flex > *,
  footer .grid > *,
  .sr-builder-row__grid > * {
    min-width: 0;
  }

  /* Display headings */
  h1.font-display { font-size: 2.125rem; line-height: 1.15; }
  h2.font-display { font-size: 1.875rem; line-height: 1.2; }
  h3.font-display { font-size: 1.25rem; line-height: 1.3; }
  .sr-builder-counter { font-size: 2.25rem; }

  /* Section spacing – slightly tighter on phones */
  #content > section.py-24,
  #content section.border-b.py-24,
  #content section.py-24:not(.sr-hero) {
    padding-block: 3.5rem;
  }

  .sr-builder-row.py-24 { padding-block: 3.5rem; }

  /* Gold CTA boxes */
  .container-tight .rounded-3xl.bg-gradient-gold,
  .sr-builder-row .rounded-3xl.bg-gradient-gold {
    padding: 2.5rem 1.25rem;
  }

  /* Stats rows (hero + builder) */
  .sr-hero-stats,
  dl.grid.grid-cols-3,
  dl.sr-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem;
  }
  .sr-hero-stats dt,
  dl.grid.grid-cols-3 dt {
    font-size: 1.5rem;
  }
  .sr-hero-stats dd,
  dl.grid.grid-cols-3 dd {
    font-size: 0.625rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  /* FAQ / accordion summaries */
  details > summary {
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  /* Footer opening hours */
  footer li.flex.justify-between {
    flex-wrap: wrap;
    gap: 0.125rem 0.75rem;
  }

  /* Service cards with side-by-side icon + text */
  a.rounded-2xl .flex.items-start > .flex-1 {
    min-width: 0;
  }

  /* Card headings */
  article h3.font-display.text-2xl,
  article h3.font-display.text-xl {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  /* Page intro paragraphs */
  #content section .text-lg {
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 400px) {
  h1.font-display { font-size: 1.875rem; }
  h2.font-display { font-size: 1.625rem; }
  .sr-hero-stats dt,
  dl.grid.grid-cols-3 dt { font-size: 1.375rem; }
}