@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Nautical Premium Palette */
  --color-primary: #0A192F; /* Deep Sea Blue */
  --color-primary-light: #172A45;
  --color-accent: #D4AF37; /* Premium Gold / Sand */
  --color-accent-hover: #F9DB79;
  --color-background: #F8F9FA; /* Off white */
  --color-surface: #FFFFFF;
  --color-text: #2D3748;
  --color-text-muted: #718096;
  
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
  
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-sans);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* Base Components */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: none;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-surface);
  color: var(--color-surface);
}

.btn-outline:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn-outline-accent {
  background-color: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-outline-accent:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* Header & Navbar */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  color: var(--color-surface);
}
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a:hover {
  color: var(--color-accent);
}

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-primary);
  overflow: hidden;
  color: var(--color-surface);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 2rem;
}

.hero-title {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 300;
  margin-bottom: 2.5rem;
  color: #E2E8F0;
}

.ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections */
.section {
  padding: 8rem 0;
  background-color: var(--color-background);
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 4rem;
  color: var(--color-primary);
}

/* Grid & Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
}

.card {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.card-img-wrapper {
  position: relative;
  height: 250px;
  width: 100%;
}

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

.card-content {
  padding: 2rem;
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.card-desc {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* Footer */
.footer {
  background-color: var(--color-primary-light);
  color: var(--color-surface);
  padding: 4rem 0 2rem;
  text-align: center;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--color-primary);
  }
  
  .logo {
    order: 1;
  }
  
  /* Language Switcher */
  .navbar > div:last-child {
    order: 2;
    margin-left: auto;
  }
  
  .nav-links {
    order: 3;
    width: 100%;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    font-size: 0.95rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .section {
    padding: 4rem 0;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .btn {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .ctas {
    flex-direction: column;
    width: 100%;
    padding: 0 1rem;
  }
  
  /* For the contact page flex container */
  .container[style*="display: flex"] {
    flex-direction: column;
    gap: 2rem !important;
  }
}


/* ============================================================
   INTERACTIVE LAYER
   Additions only — the palette, type and layout above are
   unchanged. Everything here is motion, state and chrome.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 88px;
}

body.is-loading { overflow: hidden; }
body.menu-open { overflow: hidden; }

::selection { background: var(--color-accent); color: var(--color-primary); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 1rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   1. Loading screen
   ------------------------------------------------------------ */

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
#loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212, 175, 55, 0.10), transparent 70%);
}
#loader.done { opacity: 0; visibility: hidden; }

.loader-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2.25rem;
  width: min(420px, 78vw);
  padding: 1rem;
}

.loader-logo { position: relative; width: 100%; }
.loader-logo img {
  width: 100%;
  height: auto;
  clip-path: inset(0 100% 0 0);
  animation: logo-reveal 1.2s var(--ease-out) 0.15s forwards;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.28));
}
@keyframes logo-reveal { to { clip-path: inset(0 0 0 0); } }

/* the light that runs ahead of the reveal */
.loader-logo::after {
  content: '';
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--color-accent-hover) 20%, var(--color-accent-hover) 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(249, 219, 121, 0.75);
  animation: logo-scan 1.2s var(--ease-out) 0.15s forwards;
}
@keyframes logo-scan {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.loader-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  animation: loader-fade 0.7s var(--ease-out) 0.45s forwards;
}
.loader-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.9);
}

.loader-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  animation: loader-fade 0.7s var(--ease-out) 0.6s forwards;
}
.loader-meta b { color: var(--color-accent); font-weight: 600; }

@keyframes loader-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* shorter handoff once the visitor has seen it in this session */
#loader.quick .loader-logo img,
#loader.quick .loader-logo::after { animation-duration: 0.5s; animation-delay: 0s; }
#loader.quick .loader-track,
#loader.quick .loader-meta { animation-delay: 0s; }

/* ------------------------------------------------------------
   2. Scroll progress
   ------------------------------------------------------------ */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  z-index: 60;
  will-change: transform;
}

/* ------------------------------------------------------------
   3. Custom cursor (fine pointers only)
   ------------------------------------------------------------ */

.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  transition: opacity 0.3s, width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              margin 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--color-accent);
}
.cursor-ring.is-active {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  background: rgba(212, 175, 55, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .cursor-ring.is-ready, .cursor-dot.is-ready { opacity: 1; }
}

/* ------------------------------------------------------------
   4. Navbar — sticky glass on scroll
   ------------------------------------------------------------ */

.navbar {
  /* above the drawer, so the close button stays reachable */
  z-index: 58;
  transition: background-color 0.45s var(--ease-out), padding 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out), backdrop-filter 0.45s,
              transform 0.45s var(--ease-out);
}
/* while the drawer is open the bar is transparent — the drawer is the background */
body.menu-open .navbar { background: transparent; backdrop-filter: none; box-shadow: none; }
.navbar.scrolled {
  position: fixed;
  top: 0;
  padding: 0.85rem 2rem;
  background: rgba(10, 25, 47, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.9);
}
.navbar.hidden { transform: translateY(-105%); }

.logo { display: flex; align-items: center; }
.logo img {
  height: 48px;
  width: auto;
  transition: height 0.45s var(--ease-out);
}
.navbar.scrolled .logo img { height: 38px; }

.nav-links a {
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.lang-switch { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.lang-switch .is-current { color: var(--color-accent); }
.lang-switch a { color: #fff; }
.lang-switch a:hover { color: var(--color-accent); }
.lang-switch .sep { opacity: 0.35; }

/* burger + drawer */
.burger {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  cursor: pointer;
}
.burger i {
  position: absolute;
  left: 13px;
  width: 18px; height: 1.5px;
  background: #fff;
  transition: transform 0.4s var(--ease-out), opacity 0.25s;
}
.burger i:nth-child(1) { top: 17px; }
.burger i:nth-child(2) { top: 22px; }
.burger i:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--color-primary);
  padding: calc(var(--nav-h) + 2rem) 2rem 2rem;
  display: flex;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s var(--ease-out);
  overflow-y: auto;
}
.drawer.open { clip-path: inset(0 0 0 0); }
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  color: var(--color-surface);
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(14px);
}
.drawer.open nav a { animation: loader-fade 0.55s var(--ease-out) forwards; }
.drawer nav a[aria-current="page"] { color: var(--color-accent); }
.drawer-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.drawer-foot a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------
   5. Hero — inner pages
   The navbar sits on top of the hero, so short inner heroes need
   to reserve room for it; otherwise a title that wraps to two
   lines rides up into the navigation.
   ------------------------------------------------------------ */

.hero-inner {
  height: auto;
  min-height: 340px;
  padding-top: calc(var(--nav-h) + 1.5rem);
  padding-bottom: 3rem;
}
.hero-inner--tall { min-height: 420px; }

.hero-inner .hero-content { padding-block: 1rem; }
.hero-inner .hero-title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }

@media (max-width: 900px) {
  .hero-inner {
    min-height: 260px;
    padding-top: calc(var(--nav-h) + 0.5rem);
    padding-bottom: 2rem;
  }
  .hero-inner--tall { min-height: 300px; }
}

/* ------------------------------------------------------------
   5b. Hero motion
   ------------------------------------------------------------ */

img.hero-background {
  animation: ken-burns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

.hero-title, .hero-subtitle, .ctas {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.ready .hero-title,
body.ready .hero-subtitle,
body.ready .ctas { opacity: 1; transform: none; }
body.ready .hero-subtitle { transition-delay: 0.14s; }
body.ready .ctas { transition-delay: 0.28s; }

.hero-title { position: relative; }
.hero-title::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin: 1.25rem auto 0;
  background: var(--color-accent);
  transition: width 1.1s var(--ease-out) 0.5s;
}
body.ready .hero-title::after { width: 120px; }

/* The RIB in the hero photo sits right where the buttons land, so drop
   the calls to action clear of it. The extra top padding on the hero
   offsets the shift, keeping the headline where it was. */
.hero:not(.hero-inner) { padding-top: 5.5rem; }
.hero:not(.hero-inner) .hero-subtitle { margin-bottom: 8rem; }

/* scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.scroll-cue i {
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  animation: cue-run 2.4s ease-in-out infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------ */

.btn, .btn-outline-accent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn > span, .btn-outline-accent > span { position: relative; z-index: 1; }

/* a sheet of colour rises from below on hover */
.btn::before, .btn-outline-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary::before { background: var(--color-accent-hover); }
.btn-outline::before { background: var(--color-surface); }
.btn-outline-accent::before { background: var(--color-accent); }
.btn:hover::before, .btn:focus-visible::before,
.btn-outline-accent:hover::before, .btn-outline-accent:focus-visible::before {
  transform: translateY(0);
}
.btn-outline:hover { background-color: transparent; }
.btn-outline-accent:hover { background-color: transparent; }
.btn:active, .btn-outline-accent:active { transform: scale(0.98); }

/* ------------------------------------------------------------
   7. Cards — tilt, glare, image zoom
   ------------------------------------------------------------ */

.card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(212, 175, 55, 0.16), transparent 60%);
  transition: opacity 0.5s var(--ease-out);
}
.card:hover::after { opacity: 1; }

.card-img-wrapper { overflow: hidden; }
.card-img { transition: transform 1.1s var(--ease-out); }
.card:hover .card-img { transform: scale(1.07); }

.card-title { transition: color 0.35s var(--ease-out); }
.card:hover .card-title { color: var(--color-accent); }

/* ------------------------------------------------------------
   8. Reveal on scroll
   ------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------ */

input, select, textarea {
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

/* Booking form feedback — empty until the script has something to say */
.form-status {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  transition: padding 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.form-status:empty { display: none; }
.form-status.is-busy  { color: var(--color-text-muted); }
.form-status.is-ok {
  color: #1B6E4A;
  background: rgba(27, 110, 74, 0.08);
  border: 1px solid rgba(27, 110, 74, 0.22);
  padding: 0.85rem 1rem;
}
.form-status.is-error {
  color: #A3352B;
  background: rgba(163, 53, 43, 0.07);
  border: 1px solid rgba(163, 53, 43, 0.22);
  padding: 0.85rem 1rem;
}

button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }

/* the browser's own invalid styling is too loud for this form */
.form-status ~ * :invalid, #booking-form :invalid { box-shadow: none; }

/* ------------------------------------------------------------
   9b. Social links in the footer
   ------------------------------------------------------------ */

.socials {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}
.socials a:hover {
  transform: translateY(-3px);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--color-surface);
  transition: color 0.35s var(--ease-out);
}
/* the Instagram glyph is drawn with strokes, the Facebook one is solid */
.socials svg rect, .socials svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.socials svg circle.dot { fill: currentColor; stroke: none; }
.socials a:hover svg { color: var(--color-primary); }

/* Studio credit — quieter than the copyright line above it */
.credit {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.34);
}
.credit a {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.35s var(--ease-out);
}
.credit a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------
   10. Floating contact dock
   ------------------------------------------------------------ */

.dock {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transform: translateY(160%);
  transition: transform 0.6s var(--ease-out);
}
.dock.show { transform: none; }
.dock a, .dock button {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--color-primary-light);
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.85);
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.dock a:hover, .dock button:hover { transform: translateY(-4px); }
.dock a.wa:hover { background: #25D366; }
.dock a.tel:hover { background: var(--color-accent); }
.dock a.tel:hover svg { stroke: var(--color-primary); }
.dock button:hover { background: var(--color-accent); }
.dock button:hover svg { stroke: var(--color-primary); }
.dock svg {
  width: 21px; height: 21px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s;
}
#to-top { display: none; }
.dock.show #to-top { display: grid; }

/* ------------------------------------------------------------
   11. Responsive additions
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  /* the original mobile rules assumed a text logo and no burger;
     re-order for the real lockup + menu button */
  .navbar {
    flex-wrap: nowrap;
    padding: 1rem 1.15rem;
    gap: 0.75rem;
    background-color: transparent;
  }
  .navbar.scrolled { background: rgba(10, 25, 47, 0.92); padding: 0.7rem 1.15rem; }
  .navbar .logo { order: 0; margin-right: auto; min-width: 0; }
  .navbar .nav-links { display: none; }
  .navbar .lang-switch { order: 1; margin: 0; flex: none; }
  .navbar .burger { order: 2; display: block; flex: none; }
  .logo img { height: 36px; }
  .navbar.scrolled .logo img { height: 32px; }
  .dock { right: 1rem; bottom: 1rem; }
  .scroll-cue { display: none; }
  .drawer { padding: 6rem 1.5rem 2rem; }
}

/* ------------------------------------------------------------
   12. Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-title, .hero-subtitle, .ctas { opacity: 1; transform: none; }
  .hero-background { animation: none; }
  .cursor-ring, .cursor-dot { display: none; }
}