/* =================================================================
   DSTNCT WERKS — Shared site layout
   Builds on variables.css (the demo design system). Same fonts,
   colours, grain, cursor, buttons, reveals — extended for a real
   multi-page site.
   ================================================================= */

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

/* Scroll lock while the menu is open — position:fixed holds on iOS where
   overflow:hidden alone leaks. The top offset is set inline by site.js. */
body.no-scroll { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* word spacing for split-reveal headings */
.word-spacer { display: inline-block; width: 0.28em; }

a { color: inherit; }

p { margin: 0 0 1rem; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4vw;
}

.section {
  position: relative;
  z-index: 2;
  padding: 7rem 0;
  border-top: 1px solid var(--border-line);
}

.section--flush { border-top: none; }

.eyebrow { margin-bottom: 1.25rem; }

.lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.85;
  color: var(--text-sub);
  max-width: 60ch;
}

.muted { color: var(--text-sub); }

/* -----------------------------------------------------------------
   Header / navigation
   ----------------------------------------------------------------- */
.menu-toggle {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.menu-toggle .bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle .bars span {
  width: 24px;
  height: 1px;
  background-color: #111111;
  transition: var(--transition-default);
}

.site-header.is-scrolled .menu-toggle .bars span,
.site-header.header-dark .menu-toggle .bars span { background-color: #FFFFFF; }

.menu-toggle.is-active .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .bars span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-primary);
  transition: var(--transition-default);
}
.site-header.is-scrolled .menu-label,
.site-header.header-dark .menu-label { color: #FFFFFF; }

.header-cta {
  justify-self: end;
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: var(--transition-default);
}
.header-cta:hover { color: #111111; border-bottom-color: currentColor; }
.site-header.is-scrolled .header-cta,
.site-header.header-dark .header-cta { color: #FFFFFF; }
.site-header.is-scrolled .header-cta:hover,
.site-header.header-dark .header-cta:hover { color: #FFFFFF; }

/* Overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: var(--bg-dark-grey);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* tracks the mobile browser toolbar */
  overflow-y: auto;       /* if links exceed the screen, scroll inside the menu */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6rem 8vw 4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25,1,0.5,1), visibility 0.5s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-overlay ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nav;
}
.nav-overlay li { counter-increment: nav; overflow: hidden; }
.nav-overlay a {
  display: inline-flex;
  align-items: baseline;
  gap: 1.2rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  line-height: 1.25;
  color: rgba(255,255,255,0.55);
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.25,1,0.5,1);
}
.nav-overlay a::before {
  content: "0" counter(nav);
  font-family: var(--font-technical);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
  transform: translateY(-0.6em);
}
.nav-overlay a:hover { color: #fff; transform: translateX(12px); }
.nav-overlay a[aria-current="page"] { color: #fff; }

.nav-overlay .nav-meta {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.nav-overlay .nav-meta a { font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); }
.nav-overlay .nav-meta a::before { content: none; }
.nav-overlay .nav-meta a:hover { color: #fff; transform: none; }

/* -----------------------------------------------------------------
   Home hero (with 3D knot)
   ----------------------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 9vh;
  overflow: hidden;
  text-align: center;
}
.hero-glow-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Soft white pool behind the headline so dark text stays legible over the
     green knot; invisible on the plain white areas of the hero. */
  background: radial-gradient(ellipse 75% 55% at 50% 80%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0) 72%);
}
#sio2-canvas-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero-section.theme-dark-grey .hero-glow-overlay {
  background: radial-gradient(ellipse 75% 55% at 50% 80%, rgba(14, 66, 47, 0.45) 0%, rgba(14, 66, 47, 0.1) 42%, rgba(0, 0, 0, 0) 80%);
}
.hero-content { position: relative; z-index: 2; max-width: 860px; padding: 0 4vw; }
.hero-content h1 {
  margin-bottom: 1.5rem;
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: 0.04em;
}
.hero-content .subcopy {
  font-size: 14px; color: var(--text-sub); max-width: 600px;
  margin: 1rem auto 2.5rem; line-height: 1.85; letter-spacing: 0.02em;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; font-family: var(--font-technical); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-lbl);
}

/* -----------------------------------------------------------------
   Inner-page hero
   ----------------------------------------------------------------- */
.page-hero {
  position: relative;
  z-index: 2;
  padding: 13rem 0 5rem;
  border-bottom: 1px solid var(--border-line);
}
.page-hero h1 {
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
}
.page-hero .lead { margin-top: 1.75rem; }

/* -----------------------------------------------------------------
   Two-column program block (reused from demo)
   ----------------------------------------------------------------- */
.program-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5rem;
  align-items: center;
}
.program-layout.reverse { grid-template-columns: 1.15fr 1fr; }
.program-layout.reverse .program-info-column { order: 2; }
.program-layout.reverse .program-media-column { order: 1; }

.program-info-column h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 1.75rem;
}
.program-info-column p { font-size: 15px; line-height: 1.85; color: var(--text-sub); margin-bottom: 2.25rem; }

.program-specs-table { margin-bottom: 2.5rem; border-top: 1px solid var(--border-line); }
.program-spec-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-line);
}

/* Media plate with tilt + image support */
.program-media-column {
  position: relative; width: 100%; aspect-ratio: 16 / 11;
  background-color: var(--bg-light-gray);
  border: none;
  border-radius: 3px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1000px);
}
.theme-dark-grey .program-media-column { background-color: var(--bg-dark-card); }
.program-media-column img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(0.72) contrast(1.02);
  transition: filter 0.8s ease, transform 0.8s ease;
}
.program-media-column:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.02); }
.media-depth-element {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transform: translateZ(40px) scale(0.9); transition: transform 0.4s ease;
  pointer-events: none; text-align: center;
}
.media-depth-element .plate-num {
  font-size: 48px; color: var(--text-main); margin-bottom: 10px;
  font-family: var(--font-primary); font-weight: 300;
}
.media-depth-element .plate-label {
  font-family: var(--font-technical); font-size: 12px; letter-spacing: 0.18em;
  color: var(--text-lbl); text-transform: uppercase;
}
.chrome-glow-container {
  position: absolute; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 70%);
  filter: blur(20px); z-index: 0; pointer-events: none;
}

/* -----------------------------------------------------------------
   Big highlight banner
   ----------------------------------------------------------------- */
.highlight-banner-section { padding: 11rem 0; }
.big-display-title {
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 300; letter-spacing: -0.01em; line-height: 0.92;
}
.big-display-title span { font-weight: 700; text-decoration: underline; text-underline-offset: 8px; }

/* -----------------------------------------------------------------
   Service / feature cards grid
   ----------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background-color: var(--border-line);
  border: 1px solid var(--border-line);
}
.feature-card {
  background-color: var(--bg-white);
  padding: 2.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition: background-color 0.5s ease, transform 0.5s ease;
}
.theme-dark-grey .feature-card { background-color: var(--bg-dark-grey); }
.theme-light-gray .feature-card { background-color: var(--bg-light-gray); }
.feature-card .card-index {
  font-family: var(--font-technical); font-size: 12px; letter-spacing: 0.2em;
  color: var(--text-lbl); margin-bottom: 2.5rem;
}
.feature-card h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400; margin-bottom: 1rem; }
.feature-card p { font-size: 14px; line-height: 1.8; color: var(--text-sub); margin-bottom: 1.5rem; flex-grow: 1; }
.feature-card:hover { transform: translateY(-4px); }

/* -----------------------------------------------------------------
   Process / journey steps
   ----------------------------------------------------------------- */
.process-step-container {
  position: relative;
  margin-top: 4rem;
  padding-left: 2rem;
}
.process-step-container::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0%, var(--accent-mono) 50%, rgba(255, 255, 255, 0.04) 100%);
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 3rem;
  padding: 3rem 0 3rem 4rem;
  border-top: none;
  align-items: start;
}
.process-step::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 3.5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--bg-white);
  border: 1px solid var(--border-line);
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: all 0.4s ease;
}
.process-step:hover::before {
  border-color: var(--accent-mono);
  background-color: var(--accent-mono);
  box-shadow: 0 0 10px var(--accent-mono);
}
.process-step .step-num {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--accent-mono);
  font-family: var(--font-technical);
}
.process-step h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; margin-bottom: 1.25rem; }
.process-step ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.process-step li {
  font-family: var(--font-technical); font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-sub); padding: 0.7rem 0; border-top: 1px solid var(--border-line);
  transition: color 0.3s ease;
}
.process-step li:hover {
  color: var(--text-main);
}

/* -----------------------------------------------------------------
   Work / gallery grid
   ----------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-dark-card);
  border: none;
  border-radius: 3px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  cursor: pointer;
}
.gallery-item.wide { grid-column: span 2; aspect-ratio: 21 / 9; }
.gallery-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(0.72); transition: filter 0.8s ease, transform 0.9s ease;
}
.gallery-item:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.02); }
.gallery-caption {
  position: absolute; left: 0; bottom: 0; right: 0; z-index: 2;
  padding: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  color: #fff;
}
.gallery-caption .title { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.04em; }
.gallery-caption .tag { font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.7); }
.gallery-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1b1b19 0%, #0c0c0b 100%);
  position: relative;
}
.gallery-item.placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(14, 66, 47, 0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(14, 66, 47, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.gallery-item.placeholder .media-depth-element {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(40px) scale(0.9);
  transition: transform 0.4s ease;
}

/* -----------------------------------------------------------------
   Partner / certification strip
   ----------------------------------------------------------------- */
.partner-strip { padding: 4rem 0; border-top: 1px solid var(--border-line); }
.partner-strip .partners {
  display: flex; flex-wrap: wrap; gap: 2rem 4rem; align-items: center; justify-content: center;
}
.partner-strip .partners span {
  font-family: var(--font-technical); font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-sub);
}

/* Stat row */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem; margin-top: 3rem;
}
.stat { border-top: 1px solid var(--border-line); padding-top: 1.5rem; }
.stat .num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 300; line-height: 1; }
.stat .label { font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lbl); margin-top: 0.75rem; }

/* Pull quote */
.pull-quote {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 300; line-height: 1.25; letter-spacing: 0.01em;
  max-width: 22ch;
}
.pull-quote .greek { display: block; font-size: 0.5em; color: var(--text-sub); margin-top: 1.5rem; letter-spacing: 0.02em; }

/* -----------------------------------------------------------------
   Contact form
   ----------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.75rem; }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field label {
  font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-lbl);
}
.field input, .field select, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-line);
  padding: 0.75rem 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--text-main);
  border-radius: 0;
  transition: border-color 0.4s ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent-color); }
.field select { appearance: none; cursor: pointer; }
.field select option { background-color: #FFFFFF; color: #111111; }
.form-status {
  font-family: var(--font-technical); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-sub); opacity: 0; transition: opacity 0.4s ease;
}
.form-status.is-visible { opacity: 1; }

.contact-aside .contact-line { padding: 1.4rem 0; border-top: 1px solid var(--border-line); }
.contact-aside .contact-line:last-child { border-bottom: 1px solid var(--border-line); }
.contact-aside .contact-line .k {
  font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-lbl); display: block; margin-bottom: 0.4rem;
}
.contact-aside .contact-line a, .contact-aside .contact-line .v { font-size: 1.05rem; text-decoration: none; color: var(--text-main); }
.contact-aside .contact-line a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -----------------------------------------------------------------
   CTA band
   ----------------------------------------------------------------- */
.cta-band { padding: 9rem 0; text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; margin-bottom: 2.5rem; }

/* -----------------------------------------------------------------
   Footer
   ----------------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 2;
  padding: 4rem 0;
}
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-logo { height: 1.25rem; color: rgba(255,255,255,0.5); }
.footer-logo svg { height: 100%; width: auto; display: block; }
.footer-copy { font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a {
  font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,0.6);
}
.footer-links a:hover { color: #fff; }

/* -----------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
  .program-layout, .program-layout.reverse { grid-template-columns: 1fr; gap: 3rem; }
  .program-layout.reverse .program-info-column { order: 1; }
  .program-layout.reverse .program-media-column { order: 2; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  /* Logo dead-centre regardless of side widths (header stays position:fixed) */
  .site-header { grid-template-columns: auto 1fr auto; }
  .header-logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 768px) {
  .section { padding: 5rem 0; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.wide { grid-column: span 1; aspect-ratio: 4/3; }
  .process-step { grid-template-columns: 1fr; gap: 1rem; }
  .menu-label { display: none; }
  /* Shorten "Book Appointment" -> "Book" so the centred logo has room */
  .header-cta { font-size: 0; }
  .header-cta::after { content: "Book"; font-size: 11px; letter-spacing: 0.18em; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

/* ── 3D Scroll-Driven Outro Section ── */
.outro-wrapper {
  perspective: 1200px;
  background-color: #FFFFFF;
  padding: 0 4vw 6rem 4vw;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.refinery-outro {
  position: relative;
  padding: 8rem 4vw;
  background-color: var(--accent-mono); /* Deep Detailing Green #0E422F */
  border-radius: 32px;
  transform-origin: bottom center;
  transform: rotateX(15deg) translate3d(0, 100px, -50px) scale(0.94);
  opacity: 0.6;
  transition: transform 0.05s ease-out, border-radius 0.05s ease-out, opacity 0.05s ease-out;
  transform-style: preserve-3d;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.outro-content-column {
  transform: translate3d(0, 0, 60px); /* 3D layer lift for content */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.outro-text {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 2.5rem;
  opacity: 1;
  transform: none;
  transition: none;
}

.outro-btn {
  align-self: center;
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 992px) {
  .refinery-outro {
    padding: 6rem 4vw;
  }
}

/* -----------------------------------------------------------------
   Lenis Smooth Scrolling Overrides
   ----------------------------------------------------------------- */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* -----------------------------------------------------------------
   Before / After Paint correction Slider
   ----------------------------------------------------------------- */
.refinery-slider-container {
  margin-top: 2.2rem;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-line);
  overflow: hidden;
  position: relative;
  background-color: var(--bg-dark-grey);
}

.ba-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  border-radius: 8px;
}

.ba-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ba-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ba-img.before-img {
  z-index: 2;
  clip-path: inset(0 50% 0 0); /* Initial split */
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.ba-img.after-img {
  z-index: 1;
}

.ba-label {
  position: absolute;
  bottom: 0.9rem;
  font-family: var(--font-technical);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background-color: rgba(0, 0, 0, 0.65);
  color: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}

.before-img .ba-label {
  left: 0.9rem;
}

.after-img .ba-label {
  right: 0.9rem;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  z-index: 4;
  pointer-events: none;
}

.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.ba-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--accent-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  cursor: ew-resize;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.ba-slider:hover .ba-handle-button {
  transform: translate(-50%, -50%) scale(1.12);
  background-color: #FFFFFF;
}

/* -----------------------------------------------------------------
   Card Glare Reflection Overlay
   ----------------------------------------------------------------- */
.feature-card,
.program-media-column {
  position: relative;
  overflow: hidden;
}

.card-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 65%);
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.45s ease;
  will-change: background, opacity;
}

.feature-card:hover .card-glare,
.program-media-column:hover .card-glare {
  opacity: 1;
}

/* -----------------------------------------------------------------
   Home Page Header Logo Fade-in
   ----------------------------------------------------------------- */
body.has-hero .site-header .header-logo-container {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

body.has-hero .site-header .header-logo-container.logo-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   Viewport Metadata Frame (Option B)
   ----------------------------------------------------------------- */
.hero-metadata-frame {
  position: absolute;
  inset: 0;
  padding: 4vw;
  z-index: 3;
  pointer-events: none;
  will-change: opacity, transform;
}

.meta-item {
  position: absolute;
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.meta-top-left {
  top: 7rem;
  left: 4vw;
}

.meta-top-right {
  top: 7rem;
  right: 4vw;
}

.meta-bottom-left {
  bottom: 6.2rem;
  left: 4vw;
}

.meta-bottom-right {
  bottom: 6.2rem;
  right: 4vw;
}

@media (max-width: 768px) {
  .meta-item {
    font-size: 7.5px;
    letter-spacing: 0.12em;
  }
  .meta-top-left, .meta-top-right {
    top: 6.2rem;
  }
  .meta-bottom-left, .meta-bottom-right {
    bottom: 5.2rem;
  }
}

/* -----------------------------------------------------------------
   Holographic Dot-Grid Overlay
   ----------------------------------------------------------------- */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 107, 77, 0.045) 1.1px, transparent 1.1px);
  background-size: 28px 28px;
  background-position: center;
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform;
}

/* -----------------------------------------------------------------
   NEON FOCUS — scroll-driven signature (end of services)
   The word is SHARP when the section locks, then smears VERTICALLY as you
   scroll (15 copies stacked downward, spacing opening up — reads as motion
   downward without moving), peaks dead centre, then closes back to sharp.
   Custom properties set in js/site.js:
     --p  raw progress through the section (0 -> 1)  · drives the 3D tilt
     --s  spread (0 = sharp, 1 = fully smeared)      · drives everything else
   ----------------------------------------------------------------- */
.neon-focus {
  --p: 0;
  --s: 0;
  --sp: 0px;   /* gap between copies — set in px by js/site.js */
  --lift: 0px; /* pins the top edge while the smear collapses */
  position: relative;
  height: 100vh;
  background-color: #080908;
}
.neon-focus::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 38% at 50% 50%, rgba(23, 107, 77, 0.20), rgba(0, 0, 0, 0) 72%);
  opacity: calc(0.30 + (1 - var(--s)) * 0.70);
  pointer-events: none;
}
.neon-stage {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.neon-wrap {
  position: relative;
  transform: translateY(var(--lift, 0px));
  will-change: transform;
}
.neon-layer {
  display: block;
  font-family: 'Montserrat', var(--font-primary), sans-serif;
  font-weight: 900;
  font-size: clamp(3.8rem, 21.5vw, 23rem);
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
  color: #1B8A62;
}
/* the sharp, glowing core — fades out as the copies take over */
.nl-main {
  position: relative;
  opacity: calc(1 - var(--s));
  text-shadow:
    0 0 2px rgba(120, 255, 200, 0.35),
    0 0 10px rgba(34, 163, 116, 0.55),
    0 0 34px rgba(23, 107, 77, 0.55);
  will-change: opacity;
}
/* the smear — identical copies, spacing driven by --sp (JS sets --i per copy) */
.nl-echo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  opacity: calc(var(--s) * 0.24);
  transform: translateY(calc(var(--i) * var(--sp, 0px)));
  will-change: transform, opacity;
}
/* faint signal banding, only while smeared */
.neon-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0 2px,
    rgba(0, 0, 0, 0) 2px 5px
  );
  opacity: calc(var(--s) * 0.3);
}

@media (max-width: 768px) {
  .neon-focus { height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .neon-focus { height: 100vh; --s: 0; }
  .neon-wrap { transform: none; }
  .nl-echo, .neon-scan { display: none; }
}

/* -----------------------------------------------------------------
   Touch targets — phones. The visual design stays identical; the
   tappable area is expanded with padding + negative margin so nothing
   shifts. Aiming for the ~44px Apple/Google minimum.
   ----------------------------------------------------------------- */
@media (max-width: 900px), (hover: none) {
  .menu-toggle {
    padding: 0.85rem 0.7rem;
    margin: -0.85rem -0.7rem;
  }
  .header-cta {
    padding: 0.8rem 0.2rem;
    margin: -0.8rem -0.2rem;
  }
  .footer-links a,
  .nav-meta a {
    display: inline-block;
    padding: 0.95rem 0;
  }
  .header-logo-container {
    box-sizing: content-box;   /* height is fixed at 1.8rem — let padding extend past it */
    padding: 0.55rem 0.5rem;
    margin: -0.55rem -0.5rem;
  }
  .contact-line a {
    display: inline-block;
    padding: 0.6rem 0;
  }
  .footer-links {
    gap: 1.4rem;
  }
}

/* -----------------------------------------------------------------
   Hero droplet — large, centred, sitting BEHIND the headline.
   The clip is white-on-black, so `screen` blending drops the black out
   completely and leaves only the droplet floating over the hero.
   ----------------------------------------------------------------- */
.hero-video {
  /* Hidden until it is actually playing (see initHeroVideo). On a slow
     connection or in Low Power Mode iOS refuses to autoplay and paints its
     own play button over the hero — starting at zero means nothing shows
     unless the clip is really running. */
  opacity: 0;
  transition: opacity 0.9s ease;
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(128vh, 116vw);
  height: min(128vh, 116vw);
  transform: translate(-50%, -50%);
  object-fit: contain;
  mix-blend-mode: screen;
  filter: saturate(0) contrast(1.14);
  pointer-events: none;
  z-index: 0;
  /* The clip is never pure black, so `screen` lifts the whole video box a
     shade above the section behind it — which draws a hard grey rectangle
     edge across the hero (most visible on a phone, right by the buttons).
     Feathering the box away at the rim kills the edge without touching the
     droplet itself. */
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 72%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 72%, transparent 92%);
}
@media (max-width: 768px) {
  .hero-video { top: 46%; width: 150vw; height: 150vw; }
}
.hero-video.is-playing { opacity: 0.5; }
@media (max-width: 768px) {
  .hero-video.is-playing { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}


/* Hero copy sits over the droplet video — a soft shadow keeps it crisp
   without changing the look of the type itself. */
.hero-content .technical-label,
.hero-content h1,
.hero-content .subcopy {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.4);
}


/* -----------------------------------------------------------------
   THE SYSTEM — top-down car diagram (landing)
   Car sits on the white floor; dark-green markers and leader lines
   point to where each service is applied. Coordinates are % of the
   diagram box, so the whole thing scales as one piece.
   ----------------------------------------------------------------- */
.car-diagram {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 2.5rem auto 0;
  padding: 15% 0;
}
.car-diagram .cd-car {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;      /* melts the white plate into the section */
}
.car-diagram .cd-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.car-diagram .cd-lines line {
  stroke: var(--accent-mono);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.cd-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent-mono);
  box-shadow: 0 0 0 4px rgba(14, 66, 47, 0.14);
  pointer-events: none;
}
/* Callout text. Each label is centred on its leader-line endpoint and carries a
   1px accent rule on the edge the line arrives at, so line and words read as one
   object — no letter keys needed. */
.cd-label {
  position: absolute;
  width: 17rem;
  max-width: 30vw;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  text-align: center;
  pointer-events: none;
}
.cd-label::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 1px;
  margin: 0.7rem auto 0;
  background: var(--accent-mono);
  opacity: 0.55;
}
/* Labels above the car connect downwards; the rule sits under the text. */
.cd-label.is-top { transform: translate(-50%, -100%); }
/* Labels below the car connect upwards; flip the rule above the text. */
.cd-label.is-bottom { transform: translate(-50%, 0); display: flex; flex-direction: column-reverse; }
.cd-label.is-bottom::after { margin: 0 auto 0.7rem; }

/* legend — the phone version of the diagram */
.cd-legend {
  display: none;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.cd-legend li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-line);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-main);
}
.cd-legend li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-mono);
}

/* ---- upright (phone) variant of the same diagram ----
   The car stands nose-up in the middle and the callouts take the columns
   either side, so it stays a diagram on a phone instead of degrading into
   a list. Percentages are of the whole block; the padding reserves the two
   label columns. */
.car-diagram--v { display: none; }
.car-diagram--v .cd-car { mix-blend-mode: multiply; }
.car-diagram--v .cd-label {
  width: auto;
  max-width: none;
  font-size: 0.68rem;
  line-height: 1.32;
  letter-spacing: 0.05em;
  transform: translateY(-50%);
}
.car-diagram--v .cd-label::after { display: none; }
.car-diagram--v .cd-label.is-left { text-align: right; padding-right: 0.5rem; }
.car-diagram--v .cd-label.is-right { text-align: left; padding-left: 0.5rem; }
.car-diagram--v .cd-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 3px rgba(14, 66, 47, 0.14); }

@media (max-width: 860px) {
  .car-diagram { display: none; }
  .car-diagram--v {
    display: block;
    padding: 0 27%;
    margin-top: 1.8rem;
  }
  .cd-legend { display: none; }
}


/* -----------------------------------------------------------------
   MARINE ZONE — the one part of the site that changes colour.
   Same layouts, same type, same rhythm as everywhere else; only the
   accent swaps from Detailing Green to the Mykonos turquoise
   (#5FC6C3, sampled from the reference). A deeper tone is used on
   white backgrounds so small text still passes contrast.
   ----------------------------------------------------------------- */
.marine-zone {
  --marine: #5FC6C3;        /* the reference turquoise — dark backgrounds */
  --marine-ink: #147C79;    /* deeper tone — legible on white */
  --marine-deep: #0B3A38;   /* near-black teal — text on turquoise */
}

/* Light marine sections: turquoise reads as the deeper ink */
.marine-zone.theme-light,
.marine-zone .theme-light,
.marine-zone.theme-light-gray,
.marine-zone .theme-light-gray {
  --btn-stroke: var(--marine-ink);
  --btn-hover-bg: var(--marine-ink);
  --btn-hover-text: #FFFFFF;
  --accent-color: var(--marine-ink);
}

/* Dark marine sections: the full turquoise */
.marine-zone.theme-dark-grey,
.marine-zone .theme-dark-grey {
  --btn-stroke: var(--marine);
  --btn-hover-bg: var(--marine);
  --btn-hover-text: #0B3A38;
  --accent-color: var(--marine);
}

/* Solid turquoise band that opens the marine chapter */
.marine-banner {
  background-color: #5FC6C3;
  color: var(--marine-deep);
  --text-main: var(--marine-deep);
  --text-sub: rgba(11, 58, 56, 0.78);
  --text-lbl: rgba(11, 58, 56, 0.65);
  --border-line: rgba(11, 58, 56, 0.16);
  --btn-stroke: var(--marine-deep);
  --btn-hover-bg: var(--marine-deep);
  --btn-hover-text: #FFFFFF;
  --accent-color: var(--marine-deep);
  padding: 7rem 0;
}
.marine-banner h2, .marine-banner h1 { color: var(--marine-deep); }
.page-hero.marine-banner { padding: 13rem 0 6rem; border-bottom: none; }
.marine-banner .lead { color: rgba(11, 58, 56, 0.8); }

/* Marine spec rows pick up the turquoise hairline */
.marine-zone .program-spec-row .spec-value { color: var(--text-main); }

/* -----------------------------------------------------------------
   Empty media plate — a black frame held for photography that is
   still to be shot. Keeps the layout honest until the images land.
   ----------------------------------------------------------------- */
.program-media-column.is-empty {
  background-color: #0B0B0B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-media-column.is-empty::after {
  content: attr(data-empty);
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

/* -----------------------------------------------------------------
   Outro card CTA — the card itself is Detailing Green, so a green
   button on it disappears. White plate, green words.
   ----------------------------------------------------------------- */
.refinery-outro .outro-btn { color: var(--accent-mono); }
.refinery-outro .outro-btn .cta-stroke rect { stroke: #FFFFFF; fill: #FFFFFF; }
.refinery-outro .outro-btn:hover { color: #FFFFFF; }
.refinery-outro .outro-btn:hover .cta-stroke rect { stroke: #FFFFFF; fill: transparent; }


/* -----------------------------------------------------------------
   INFINITE GALLERY (work.html)
   The whole viewport is the gallery. One tile of frames is repeated
   3x3 and the plane wraps by exactly one tile, so it never ends in
   any direction. The header floats over it.
   ----------------------------------------------------------------- */
body.is-gallery { overflow: hidden; height: 100%; }

.gstage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: #0C0C0C;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}
.gstage:active { cursor: grabbing; }

.gstage-plane {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  will-change: transform;
}
.gstage-cell {
  overflow: hidden;
  background-color: #141414;
  border-radius: 3px;
}
.gstage-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  filter: grayscale(0.72) contrast(1.02);
  transition: filter 0.8s ease, transform 0.8s ease;
}
.gstage-cell:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.03); }

/* the mark — the only thing over the plane */
.gstage-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
  color: #FFFFFF;
}
.gstage-mark svg {
  width: clamp(88px, 9vw, 150px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}

/* lightbox */
.g-lb {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgba(10, 10, 10, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.g-lb.is-open { opacity: 1; pointer-events: auto; }
body.lb-open .site-header { opacity: 0; pointer-events: none; }
.g-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.g-lb-close, .g-lb-prev, .g-lb-next {
  position: absolute;
  background: none;
  border: 0;
  cursor: pointer;
  color: #FFFFFF;
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.g-lb-close { top: 14px; right: 16px; }
.g-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
.g-lb-next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
.g-lb-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}

/* Turquoise hand-over: the curtain wears the colour of the page it opens on.
   The turquoise is a separate always-present layer that is faded in, NOT a
   background-color swap on the curtain itself. Recolouring a full-screen
   composited layer costs a raster pass, and iOS Safari will show a frame or
   two of the old green before the new colour lands. `will-change: opacity`
   gets this layer rasterised up front, so the switch is compositor-only and
   the marine curtain is turquoise from its very first painted frame. */
/* -----------------------------------------------------------------
   PAGE-TRANSITION CURTAINS — two of them, and neither ever changes colour.
   Earlier versions recoloured one shared curtain (background swap, then a
   fading layer). Both worked in Chrome and both flashed green on iOS,
   because repainting or first-rasterising a full-screen composited layer
   costs a frame or two and the old paint stays on screen meanwhile.
   So: the green curtain and the turquoise curtain are separate elements,
   each with a hardcoded colour, both parked off-screen from first paint.
   Navigation only decides WHICH ONE slides in — a transform, which the
   compositor can never get wrong. Nothing is recoloured at any point.
   ----------------------------------------------------------------- */
.curtain--marine { background-color: #5FC6C3; }
.curtain--marine .curtain-logo-container { color: #0B3A38; }
.curtain-logo-container { position: relative; z-index: 1; }

/* Arriving: marine.html sets .marine-page in its <head>, before first paint. */
html.dw-loading:not(.marine-page) .curtain--base,
html.dw-loading.marine-page .curtain--marine {
  transform: skewX(-8deg) translate3d(0, 0, 0);
}
html.dw-revealing:not(.marine-page) .curtain--base,
html.dw-revealing.marine-page .curtain--marine {
  animation: dw-curtain-reveal 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
/* Leaving: .to-marine is set on <html> at click time. */
html.dw-leaving:not(.to-marine) .curtain--base,
html.dw-leaving.to-marine .curtain--marine {
  animation: dw-curtain-cover 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
  pointer-events: auto;
}
/* Logo shows on whichever curtain is the active one. */
html.dw-loading:not(.marine-page) .curtain--base .curtain-logo-container,
html.dw-loading.marine-page .curtain--marine .curtain-logo-container,
html.dw-leaving:not(.to-marine) .curtain--base .curtain-logo-container,
html.dw-leaving.to-marine .curtain--marine .curtain-logo-container { opacity: 1; }

/* Marine page: the outro card takes the chapter colour too. */
.marine-zone .refinery-outro { background-color: #5FC6C3; }
.marine-zone .refinery-outro .outro-text { color: #0B3A38; }
.marine-zone .refinery-outro .technical-label { color: rgba(11, 58, 56, 0.7) !important; }
.marine-zone .refinery-outro .outro-btn { color: #0B3A38; }
.marine-zone .refinery-outro .outro-btn:hover { color: #FFFFFF; }
.marine-zone .refinery-outro .outro-btn:hover .cta-stroke rect { stroke: #0B3A38; fill: #0B3A38; }


/* -----------------------------------------------------------------
   Overlay menu — phone sizing.
   The links were sitting at the bottom of their clamp on a phone, which
   made the menu read smaller than the page behind it. Bigger type, a
   hairline between each row, and real tap height per row.
   ----------------------------------------------------------------- */
.nav-overlay a { font-size: clamp(2.55rem, 9.5vw, 4.5rem); }
.nav-overlay li + li { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.nav-overlay li a { padding: 0.42rem 0; }
.nav-overlay a::before { font-size: 13px; }

@media (max-width: 900px) {
  .nav-overlay { padding: 5.5rem 7vw 3rem; }
  .nav-overlay a { gap: 0.9rem; letter-spacing: 0.02em; }
  .nav-overlay .nav-meta {
    margin-top: 2.6rem;
    gap: 1.1rem 1.6rem;
    font-size: 12px;
  }
  .nav-overlay .nav-meta a { font-size: 12px; }
  .menu-toggle .bars span { width: 26px; }
}

/* "Book Appointment" was clipping to "BOOK" in the header on a narrow
   phone — the centred-logo grid leaves each side column ~130px. */
@media (max-width: 560px) {
  .header-logo-container { height: 1.55rem; }
}
/* The eyebrow green was failing contrast on the near-black sections at
   11px — same colour family, enough lift to actually read. */
:root { --accent-on-dark: #23906A; }

/* The header is a 1fr/auto/1fr grid, and the middle column sizes to the logo's
   max-content — which is the SVG's intrinsic 581px width, not its rendered
   size. Once space got tight (i.e. on a phone) that column ballooned to 330px,
   the CTA column collapsed to 0 and "Book Appointment" ran over the logo.
   Pinning the container's aspect ratio gives it a definite width from its
   definite height, so the column asks for ~92px instead of 581px. */
.site-header > * { min-width: 0; }
.header-logo-container {
  aspect-ratio: 581.51 / 182.98;
  max-width: 40vw;
}
.header-logo-container svg { width: 100%; height: 100%; }

/* Visible to search engines and screen readers, not to the eye — the gallery
   page is deliberately just the plane and the mark. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}



/* Neutralise the original blanket rules — the scoped pairs above decide
   which curtain moves. Without this both would slide in together. */
html.dw-loading .page-transition-curtain,
html.dw-revealing .page-transition-curtain,
html.dw-leaving .page-transition-curtain {
  animation: none;
  transform: skewX(-8deg) translate3d(120%, 0, 0);
}
html.dw-loading:not(.marine-page) .curtain--base,
html.dw-loading.marine-page .curtain--marine {
  animation: none;
  transform: skewX(-8deg) translate3d(0, 0, 0);
}
html.dw-revealing:not(.marine-page) .curtain--base,
html.dw-revealing.marine-page .curtain--marine {
  animation: dw-curtain-reveal 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
html.dw-leaving:not(.to-marine) .curtain--base,
html.dw-leaving.to-marine .curtain--marine {
  animation: dw-curtain-cover 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
html.dw-loading .curtain-logo-container,
html.dw-leaving .curtain-logo-container { opacity: 0; }
html.dw-loading:not(.marine-page) .curtain--base .curtain-logo-container,
html.dw-loading.marine-page .curtain--marine .curtain-logo-container,
html.dw-leaving:not(.to-marine) .curtain--base .curtain-logo-container,
html.dw-leaving.to-marine .curtain--marine .curtain-logo-container { opacity: 1; }



/* -----------------------------------------------------------------
   Header alignment on phones
   The logo sat ~9px above the burger and the CTA because its touch-target
   padding is applied with content-box sizing, which makes the box taller
   than the grid row expects. Pin all three to the same centre line.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header { align-items: center; }
  .header-logo-container {
    box-sizing: border-box;
    height: 100%;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
    align-self: stretch;
  }
  .header-logo-container svg { height: 1.7rem; width: auto; }
}

/* -----------------------------------------------------------------
   Menu footer meta
   As one wrapping flex row, "Mykonos, GR" and "By appointment only"
   collided and wrapped into a staircase. Give each its own line under
   the contact links.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav-overlay .nav-meta {
    gap: 0.85rem 1.5rem;
    margin-top: 2.5rem;
    line-height: 1.5;
  }
  .nav-overlay .nav-meta a[data-link="maps"] { flex: 1 0 100%; }
  .nav-overlay .nav-meta > span { flex: 1 0 100%; opacity: 0.75; }
}