:root{
  --bg:#fff;
  --fg:#0a0a0a;
  --muted:#9a9a9a;
  --accent:#000;
  --border:#e5e5e5;
  --price-col: 110px; 
  --caption-w: 680px; 
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
/* Prevent page scroll when the mobile menu is open */
html.no-scroll, body.no-scroll { overflow: hidden; }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

a{color:inherit;text-decoration:none}

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

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}
.btn{background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:999px;cursor:pointer;transition:transform .2s ease,opacity .2s}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn:hover{transform:translateY(-1px)}
.link{border-bottom:1px solid var(--fg);padding-bottom:2px}



.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.carousel{position:relative}
.carousel-track{display:flex;transition:transform .7s ease;will-change:transform}
.slide{min-width:100%;height:62vh;display:grid;place-items:center;background:#000;color:#fff;position:relative}
.slide .caption{position:absolute;bottom:24px;left:24px;background:rgba(0,0,0,.5);padding:10px 14px;border-radius:10px}
.carousel .controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.carousel .controls button{pointer-events:auto;background:rgba(0,0,0,.6);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:18px}
.carousel .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center}
.carousel .dot{width:8px;height:8px;border-radius:50%;background:#d9d9d9;opacity:.7}
.carousel .dot.active{background:#fff;opacity:1}

.section{padding:64px 0}
.section h2{font-size:32px;margin:0 0 10px}
.section p.lead{color:#333;max-width:60ch}

.cards{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--border);border-radius:16px;padding:18px}
.card h3{margin:6px 0 8px}
.card p{color:#444}

@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
}

.gallery{grid-template-columns:repeat(3,1fr)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid var(--border)}
@media (max-width: 900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}

.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{background:#f8f8f8}

.kv{display:grid;grid-template-columns:160px 1fr;gap:8px}
.kv div{padding:6px 0;border-bottom:1px dashed var(--border)}
.kv strong{font-weight:600}
@media (max-width: 640px){
  .kv{grid-template-columns:1fr}
}

.badge{display:inline-block;border:1px solid var(--fg);padding:6px 10px;border-radius:999px;font-size:12px}
/* ===============================
   NAVBAR (Topbar + Header)
   =============================== */

:root{
  --nav-h: 72px;                 /* header height */
  --nav-bg: #000;                /* header background */
  --nav-fg: #fff;                /* header text/icons */
  --nav-border: #111;            /* subtle border */
}

/* ---------- Topbar ---------- */
.topbar{
  background:#0b0b0b; color:#fff; border-bottom:1px solid #111;
  font-size:13px; line-height:1; padding:9px 0;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:0 16px;
}
.topbar a{ color:#fff; text-decoration:none; opacity:.95; }
.topbar a:hover{ opacity:1; text-decoration:underline; }
.topbar i{ margin-right:8px; }
/* Container on the right */
/* Tighter spacing on the right cluster */
.topbar-right{ display:flex; align-items:center; gap:8px; }
.topbar-social{ display:flex; align-items:center; gap:8px; }

/* Dropdown pill */
.lang-switch--dropdown{ position:relative; }
.lang-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:28px; padding:4px 28px 4px 10px;
  border-radius:999px; border:1px solid #1a1a1a;
  background:#0f0f0f; color:#fff;
  font-size:12px; line-height:1; letter-spacing:.04em;
  cursor:pointer;
}

/* Chevron */
.lang-switch--dropdown::after{
  content:""; position:absolute; right:10px; top:50%;
  width:0; height:0; transform:translateY(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid #aaa; pointer-events:none;
}

.lang-select:hover{ background:#151515; border-color:#232323; }
.lang-select:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Mobile tweaks */
@media (max-width:520px){
  .topbar-inner{ flex-wrap:wrap; gap:8px; }
  .topbar-right{ margin-left:auto; gap:8px; }
  .lang-select{ height:26px; padding:2px 26px 2px 8px; font-size:11px; }
}


/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg); color:var(--nav-fg);
  border-bottom:1px solid var(--nav-border);
}
.header .container{
  max-width:1200px; margin:0 auto; padding:0 16px;
}

/* Grid: logo | centered menu | actions */
.nav{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px;
  min-height:var(--nav-h);
  position:relative;           /* anchors the mobile dropdown */
}

/* ---------- Brand (left) ---------- */
.brand-link{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-logo{ height:clamp(44px, 7vw, 68px); width:auto; display:block;
  max-height:calc(var(--nav-h) - 16px); } /* never exceed header */
.brand-text{ font-weight:800; letter-spacing:.04em; white-space:nowrap; }

/* ---------- Menu (center) ---------- */
.menu{
  display:flex; gap:10px; justify-content:center; align-items:center;
}
.menu a{
  color:#fff; text-decoration:none; opacity:.95;
  padding:10px 12px; border-radius:10px;
}
.menu a:hover{ background:#111; opacity:1; }

/* ---------- Actions (right) ---------- */
.actions{ display:flex; align-items:center; gap:12px; justify-self:end; }
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#000; border-radius:999px;
  padding:10px 16px; border:1px solid #eaeaea; text-decoration:none; font-weight:600;
}
.btn-cta i{ font-size:16px; }
.btn-cta:hover{ background:#f5f5f5; }

.burger{
  display:none; color:#fff; background:transparent; border:none; font-size:22px;
}

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .btn-cta{ display:none; }           /* keep header compact on mobile */
  .burger{ display:inline-grid; place-items:center; }

  /* Hidden by default; opens under the header */
  .menu{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:20;
    background:var(--nav-bg); border-bottom:1px solid var(--nav-border);
    box-shadow:0 14px 30px rgba(0,0,0,.3);
    padding:12px 16px; flex-direction:column; gap:6px; justify-content:stretch;
  }
  .menu a{ padding:12px; border-radius:8px; }
  .menu.open{ display:flex; }         /* JS toggles this */
}

/* ---------- Tiny screens: tighter topbar ---------- */
@media (max-width:520px){
  .topbar{ font-size:12px; padding:8px 0; }
}


/* ===== Navbar padding + true center menu ===== */

/* 1) Control vertical padding (top & bottom) */
:root { --nav-pad-y: 14px; }                 /* tweak to taste */

.header .nav{
  /* remove fixed/min height if you had one */
  min-height: 0;                             
  padding-block: var(--nav-pad-y);           /* adds space above/below */
}

/* Keep the logo from overflowing when padding grows */
.brand-logo{
  /* cap logo by available header height (fallbacks if --nav-h not defined) */
  max-height: clamp(40px, 8vw, 68px);
}

/* 2) Make the middle menu truly centered, regardless of left/right widths */
.nav{
  /* logo | menu | actions */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  position: relative; /* anchor for mobile dropdown */
}

/* Place items within the grid columns */
.brand   { justify-self: start; }
.menu    { justify-self: center; display:flex; gap:10px; }
.actions { justify-self: end;   display:flex; gap:12px; align-items:center; }

/* Optional: tighten link line-height so vertical centering feels crisp */
.menu a{ line-height: 1; padding:10px 12px; border-radius:10px; }

/* Mobile: dropdown still opens below header */
@media (max-width: 980px){
  .actions .btn-cta{ display:none; }
  .burger{ display:inline-grid; place-items:center; }

  .menu{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:20;
    background:#000; border-bottom:1px solid #111;
    box-shadow:0 14px 30px rgba(0,0,0,.3);
    padding:12px 16px; flex-direction:column; gap:6px;
    justify-content:stretch;
  }
  .menu.open{ display:flex; }
  .menu a{ padding:12px; border-radius:8px; }
}

/* Topbar socials aligned & spaced */
.topbar-social{
  display:flex; align-items:center; gap:10px;
}
.topbar-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  color:#fff; text-decoration:none; opacity:.95;
  border:1px solid #1a1a1a; background:#0f0f0f;
}
.topbar-social a:hover{ opacity:1; background:#151515; border-color:#232323; }
.topbar-social i{ font-size:14px; line-height:1; padding-left: 8px;}

/* ===== Mobile navbar fixes: burger right, full-screen overlay ===== */
@media (max-width: 980px){
  /* Right-align the burger */
  .nav{
    display:flex; align-items:center; gap:12px;      /* override grid if any */
    position:relative;                                /* anchor nothing; overlay is fixed */
  }
  .brand{ flex:0 0 auto; }
  .actions{
    margin-left:auto; display:flex; align-items:center; gap:12px;
  }
  .nav .burger{
    display:inline-grid; place-items:center;
    margin-left:auto; justify-self:flex-end;
  }

  /* Full-screen overlay menu (break out of any container width) */
  .nav .menu{
    /* reset any previous menu styles */
    display:none;
    position:fixed !important;
    inset:0 !important;
    width:100vw; height:100dvh;          /* cover full viewport */
    max-width:none !important;
    margin:0 !important;
    z-index:1000;

    background:#000; color:#fff;
    /* safe-area padding for iOS bars */
    padding:
      calc(env(safe-area-inset-top) + 16px)
      20px
      calc(env(safe-area-inset-bottom) + 24px);

    overflow:auto;
    padding-top: 8vh;

    /* layout: start at top, not centered */
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:12px;

    /* subtle entrance */
    opacity:0; transform:translateY(6px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav .menu.open{
    display:flex;
    opacity:1; transform:none;
    pointer-events:auto;
    box-shadow:inset 0 0 120px rgba(255,255,255,.04);
  }

  /* Big tap targets fill width */
  .nav .menu a{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    font-size:20px; line-height:1.15;
    color:#fff; text-decoration:none; opacity:.95;
    border:1px solid rgba(255,255,255,.06);
    background:#0b0b0b;
  }
  .nav .menu a:hover{ opacity:1; background:#121212; border-color:#1e1e1e; }

  /* Close (X) button inside overlay, if you added it */
  .nav .menu .menu-close{
    position:absolute; top:12px; right:12px;
    width:42px; height:42px; border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06); color:#fff;
    display:grid; place-items:center; font-size:18px;
  }
}
@media (min-width: 980px){
  .nav .menu .menu-close{ display: none; }
}

/* Prevent parent containers from clipping the overlay */
.header .container{ overflow:visible; }

/***FOOTER****/
.footer{border-top:1px solid var(--border);padding:32px 0;color:#444}

.input, select, textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:#000}
label{font-weight:600}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 760px){
  .form-row{grid-template-columns:1fr}
}
.form-actions{display:flex;gap:10px;align-items:center}
/* Center footer content on mobile */
@media (max-width: 760px){
  .footer,
  .footer-dark{
    text-align: center;
  }

  /* If you use a grid-based footer */
  .footer-grid{
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 18px;
  }

  /* If your footer uses a flex container */
  .footer .container{
    display: grid;                 /* safe to switch on mobile */
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
  }

  /* Lists/info blocks */
  .footer-list{
    align-items: center;
  }
  .footer-list li{
    justify-content: center;
    text-align: center;
  }

  /* Legal + social rows */
  .legal{
    justify-content: center;
  }
  .social{
    justify-content: center;
  }

  /* Logo + brand area */
  .footer-logo{
    margin-left: auto;
    margin-right: auto;
  }

  /* Bottom credits/copyright (if present) */
  .credits-inner,
  .copyright-line{
    text-align: center;
  }
}

.alert{padding:12px 14px;border-radius:10px;border:1px solid var(--border)}
.alert.ok{background:#f6ffef;border-color:#d6f5c4}
.alert.err{background:#fff5f5;border-color:#ffd6d6}

/* Sticky CTA — pulsing silver glow */
.sticky-cta{
  position:fixed; right:16px; bottom:16px; z-index:50;
  border-radius:999px;
  isolation:isolate;                 /* keep pulse behind the button */
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  animation:breathe-silver 3.2s ease-in-out infinite;
  background-color: #000 !important;
  color: #fff !important;
}

/* Soft breathing inner glow */
@keyframes breathe-silver{
  0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 14px rgba(205,205,205,.22); }
  50%    { box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 26px rgba(230,230,230,.40); }
}

/* Expanding silver pulse ring */
.sticky-cta::before{
  content:"";
  position:absolute; inset:-10px; border-radius:inherit;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.95),
    rgba(210,210,210,.55) 40%,
    rgba(180,180,180,.18) 65%,
    transparent 80%);
  transform:scale(.9);
  opacity:0;
  filter:blur(2px);
  z-index:-1;
  animation:pulse-silver 2.2s ease-out infinite;
}

@keyframes pulse-silver{
  0%   { transform:scale(.90); opacity:.65; filter:blur(1px); }
  60%  { transform:scale(1.30); opacity:.20; filter:blur(5px); }
  100% { transform:scale(1.45); opacity:0;   filter:blur(8px); }
}

/* Hover/focus: a little snappier */
.sticky-cta:hover::before{ animation-duration:1.5s; }
.sticky-cta:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:4px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sticky-cta{ animation:none; }
  .sticky-cta::before{ animation:none; opacity:.25; transform:scale(1.05); }
}


.table { table-layout: fixed; }           /* makes column widths predictable */
.table th:last-child,
.table td:last-child {
  width: var(--price-col);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;     /* align digits vertically */
  font-feature-settings: "tnum" 1;
}

@media (max-width: 480px) {
  :root { --price-col: 90px; }            /* a bit narrower on phones */
}

/* Single-column layout helpers */
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 18px; }

.page-header .title { font-size: 34px; margin: 0 0 6px; }
.muted { color: #666; }

/* “Soft” cards for sections */
.card-soft {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}

.section-title {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: .02em;
}

/* Map block */
.map-embed { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }

/* Inputs: slightly larger + consistent radius */
.input, select, textarea {
  border-radius: 12px;
  padding: 12px 14px;
}

/* Form actions spacing */
.form-actions { margin-top: 6px; }

/* Make multi-select friendlier */
select[multiple] {
  min-height: 220px;
  padding: 10px;
}








/* Reveal-on-scroll */
.reveal { opacity:0; transform:translateY(14px); transition:all .65s ease; }
.reveal.show { opacity:1; transform:none }






/* Chips + filters */
.chips { display:flex; gap:8px; flex-wrap:wrap }
.chip { border:1px solid var(--fg); background:#fff; border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer }
.chip.active { background:#000; color:#fff }

/* ---- Mobile-friendly chips ---- */
.chips-wrap{
  position:relative;
  margin:10px 0 18px;
}
.chips{
  display:flex; gap:10px;
  overflow-x:auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding:6px 4px 10px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }

.chip{
  scroll-snap-align: start;
  border:1px solid var(--fg);
  background:#fff; color:#000;
  border-radius:999px;
  padding:10px 14px;
  font-size:14px; line-height:1; font-weight:600;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.chip:active{ transform:scale(.98); }
.chip.active{
  background:#000; color:#fff;
  border-color:#000;
}

/* ---- Gallery responsive grid ---- */
.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
.gallery img{
  width:100%;
  aspect-ratio:1 / 1;                /* perfect squares */
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  transition:transform .2s ease;
}
.gallery img:hover{ transform:translateY(-2px); }

@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .chip{ padding:10px 12px; font-size:13px; }
  .gallery{ gap:10px; }
}

/* Nice “edge fade” hint that the chips row scrolls */
.chips-wrap::after, .chips-wrap::before{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
}
.chips-wrap::before{ left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.chips-wrap::after { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }

/* Section variant */
.section-soft { background:#fafafa; border-top:1px solid #eee; border-bottom:1px solid #eee }

/* Reviews ticker */
/* Scrollable reviews (mobile: 1-up, desktop: 3-up) */
.reviews-rail{ position:relative; }

/* Edge fades (pure CSS overlay so it works everywhere) */
.reviews-rail::before,
.reviews-rail::after{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:2;
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.reviews-rail::after{
  right:0; left:auto;
  transform:scaleX(-1); /* mirror the left gradient */
}

/* Scroller */
.reviews-grid{
  --gap:16px;
  list-style:none; margin:0; padding: 2px 2px 12px;
  display:flex; gap:var(--gap);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
}
.reviews-grid > li{
  flex:0 0 100%;            /* 1 card per viewport on phones */
  scroll-snap-align:start;
}

/* Desktop: 3 cards visible */
@media (min-width: 900px){
  .reviews-grid{ padding-bottom: 14px; }
  .reviews-grid > li{
    /* 3-up: subtract two gaps between 3 items, then divide */
    flex-basis: calc((100% - 2 * var(--gap)) / 3);
  }
}

/* Hide native scrollbar on WebKit (optional) */
.reviews-grid::-webkit-scrollbar{ height:8px; }
.reviews-grid::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }
.reviews-grid:hover::-webkit-scrollbar-thumb{ background:#ccc; }

/* Cards + reveal motion (unchanged) */
.review-card{
  border:1px solid var(--border); border-radius:16px; background:#fff;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  opacity:0; transform: translateY(10px) scale(.98);
  transition: opacity .45s ease, transform .45s ease;
}
.review-card.in{ opacity:1; transform:none; }

.review-header{ display:flex; gap:12px; align-items:center; }
.avatar{ width:44px; height:44px; border-radius:999px; background:#000; color:#fff; display:grid; place-items:center; font-weight:800; }
.meta .name{ font-weight:700; line-height:1.2; }
.rating{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.stars{ display:flex; gap:2px; }
.star{ width:16px; height:16px; fill:#f5c518; display:block; }
.review-text{ margin:6px 0 0; color:#333; line-height:1.55; }

/* Nav arrows (show on all sizes) */
.reviews-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#ffffff0e; color:#000; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:3;
}
.reviews-nav:hover{ background:#f5f5f5; }
.reviews-nav.prev{ left:-30px; }
.reviews-nav.next{ right:-30px; }

@media (max-width:380px){
  .avatar{ width:40px; height:40px; font-size:12px; }
  .star{ width:14px; height:14px; }
}

/* FAQ */
.faq { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:10px 0 }
.faq summary { cursor:pointer; font-weight:600 }
.faq[open] { background:#f9f9f9 }

/* CTA band */
.cta-band { background:#3b3b3b; color:#fff; padding:60px 0; }
.band-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.cta-band h2 { margin:0 }


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kenburns .slide::before, .ticker-track { animation: none }
  .reveal { transition: none; opacity:1; transform:none }
}

/* === Before/After (1:1, images fixed; before "disappears") === */
.compare{
  --cut: 50%;                     /* % of AFTER visible from the left */
  position:relative;
  aspect-ratio:1 / 1;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  user-select:none;
  touch-action:pan-y;             /* allow vertical scroll on touch */
}

.compare-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;            /* don’t steal drag */
}

.compare .after{ z-index:0; }     /* full, never moves */

.compare-overlay{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}
.compare-overlay .before{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Clip from the LEFT by --cut → the more cut, the more AFTER you see */
  clip-path: inset(0 0 0 var(--cut));
  will-change: clip-path;
}

/* Accessible hidden range + GPU handle */
.compare-range{ position:absolute; inset:0; opacity:0; cursor:ew-resize; }
.compare-handle{
  position:absolute; top:0; bottom:0; left:0;
  width:2px; background:#fff;
  transform: translateX(var(--cut));
  will-change: transform;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.compare-handle::after{
  content:"↔"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#000; color:#fff; padding:6px 8px; border-radius:999px; font-size:12px;
}

/* Compact variant */
.compare--sm{
  width: min(100%, 420px);        /* smaller on desktop */
  margin: 10px auto 0;            /* center it */
  border-radius: 12px;            /* slightly tighter corners */
  border-width: 1px;
  aspect-ratio: 1 / 1;            /* keep the square */
}

/* Make the handle/label more delicate */
.compare--sm .compare-handle{ width: 2px; }
.compare--sm .compare-handle::after{
  font-size: 11px;
  padding: 4px 6px;
}

/* Optional: tighten heading/subtext just in this section */
.section .container > h2 + .muted{
  font-size: 13px;
  margin-top: -4px !important;
  color: #777;
}

/* Phone: a touch smaller than full width */
@media (max-width: 520px){
  .compare--sm{ width: 86vw; }
}

/* Dark footer */
/* Dark footer base */
.footer-dark{
  background:#000; color:#fff; border-top:1px solid #0f0f0f; padding:42px 0 0;
}
.footer-dark a{ color:#fff; text-decoration:none; opacity:.95 }
.footer-dark a:hover{ opacity:1; text-decoration:underline }

/* Grid */
.footer-grid{
  display:grid; gap:28px; align-items:start;
  grid-template-columns: 1.2fr 1fr 0.9fr;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; } }

/* Brand block */
.footer-logo{ height:46px; width:auto; margin-bottom:10px; display:block; }
.brand-text{ display:grid; gap:2px }
.brand-name{ font-weight:800; letter-spacing:.04em; font-size:16px }
.brand-tagline{ color:#bdbdbd; font-size:13px }

/* Headings & lists */
.footer-heading{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#bdbdbd }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.footer-list li{ display:flex; gap:10px; align-items:flex-start; color:#eaeaea }
.footer-list i{ width:18px; text-align:center; margin-top:2px; opacity:.9 }
.legal{ color:#dcdcdc; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.sep{ color:#5b5b5b }

/* Social */
.social{ margin-top:10px; display:flex; gap:10px }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid #222; border-radius:999px; background:#0c0c0c;
}
.icon-btn:hover{ background:#121212; border-color:#2a2a2a }
.icon-btn i{ font-size:18px }

/* Bottom band */
.footer-credits{
  margin-top:28px; padding:16px 0; background:#2424245e; border-top:1px solid #0f0f0f;
}
.credits-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center }
.credits-link{ color:#ffd451 !important; text-decoration: none !important;}
.copyright-line{ color:#bdbdbd; font-size:12.5px }

.lang-switch{
  display:flex; align-items:center; gap:10px;
  font-size:14px;
  justify-content: center; text-align: center;
}
.lang-switch .sep{ opacity:.5 }
.lang-switch a{
  padding:6px 10px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; opacity:.9;
}
.lang-switch a:hover{ opacity:1; border-color:#ddd; }
.footer-dark .lang-switch a:hover{ border-color:#2a2a2a; }
.lang-switch a.active{
  font-weight:700; border-color:#000;
}
.footer-dark .lang-switch a.active{ border-color:#fff; }



/* Two cards: 2 columns on desktop, stack on small screens */
.quick-info{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:24px;
  align-items:start;
}
@media (max-width: 760px){
  .quick-info{ grid-template-columns: 1fr; }
}

/* Key–value grid: label then value */
.kv{
  display:grid;
  grid-template-columns: max-content 1fr;  /* label fits; value flexes */
  column-gap:12px;
  row-gap:8px;
  align-items:baseline;

}

/* Remove underline/border from phone & email links */
.kv a[href^="tel"],
.kv a[href^="mailto"]{
  text-decoration: none;
  border: none;
  color: inherit;     /* optional: match surrounding text color */
}

/* Keep a visible focus style for accessibility */
.kv a[href^="tel"]:focus-visible,
.kv a[href^="mailto"]:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Labels (left column) */
.kv > div:nth-child(2n-1){
  color:#111;
  white-space:nowrap;
}

/* Values (right column): RIGHT-JUSTIFY as requested */
.kv > div:nth-child(2n){
  text-align:right;
  overflow-wrap:anywhere;              /* wrap long addresses without overflow */
  font-variant-numeric: tabular-nums;  /* align times nicely */
  font-feature-settings: "tnum" 1;
}

/* Links inside values inherit alignment and remain tappable */
.kv a{ text-decoration:none; border-bottom:1px solid rgba(0,0,0,.12); }
.kv a:hover{ border-color: rgba(0,0,0,.35); }

/* Slight visual polish for the cards */
.card h3{ margin:0 0 10px; font-size:18px; letter-spacing:.02em; }
.card{ display:flex; flex-direction:column; gap:10px; }

/* Optional: on very narrow phones keep two columns but loosen spacing */
@media (max-width: 420px){
  .kv{ column-gap:10px; }
  .kv > div:nth-child(2n){ text-align:right; }
}

/* 3) Guard against stray 1px overflows from parallax/gradients, etc. */
html, body{ overflow-x: hidden; }


/* --- Cookie banner --- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:#000; color:#fff; border:1px solid #222; border-radius:14px;
  padding:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-banner__text{ flex:1 1 260px; font-size:14px; }
.cookie-banner__actions{ display:flex; gap:8px; flex-wrap:wrap; }

.cookie-modal.hidden, .cookie-banner.hidden{ display:none; }

/* --- Modal overlay --- */
.cookie-modal{
  position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.6);
  display:grid; place-items:center; padding:16px;
}
.cookie-modal__card{
  width:min(640px, 100%); background:#000; color:#fff; border:1px solid #222;
  border-radius:16px; padding:18px;
}
.cookie-modal__card h3{ margin:0 0 8px; }
.cookie-modal__card p{ margin:0 0 12px; color:#ddd; }
.cookie-modal__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.cookie-modal__close{
  position:absolute; top:20px; right:24px; background:transparent; border:1px solid #333;
  color:#fff; width:36px; height:36px; border-radius:999px; font-size:20px; line-height:1;
}
.cookie-opt{ margin:10px 0 6px; }
.cookie-opt__row{ display:flex; align-items:center; gap:10px; font-weight:600; }
.muted{ color:#bbb; font-size:12px; }

/* Buttons (inherits your theme) */
.btn{ background:#fff; color:#000; border:1px solid #eaeaea; border-radius:10px; padding:10px 14px; font-weight:600; }
.btn:hover{ background:#f5f5f5; }
.btn-outline{ background:transparent; color:#fff; border:1px solid #444; }
.btn-outline:hover{ background:#111; }

/* Respect reduced motion */
@media (prefers-reduced-motion:no-preference){
  .cookie-banner{ animation:slide-up .25s ease-out; }
  @keyframes slide-up{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }
}



/* ===========================
   Contact page — mobile polish
   =========================== */
.page-contact .page-header {
  text-align: left;
}
@media (max-width: 700px){
  .page-contact .page-header { text-align: center; }
  .page-contact .page-header .title { margin-bottom: 6px; }
  .page-contact .page-header .muted { margin-top: 2px; }
}

/* Card look a bit nicer on dark main bg */
.page-contact .card-soft{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Headings centered on mobile for all sections */
@media (max-width: 700px){
  .page-contact .section-title { text-align: center; }
}

/* ============ Form grid ============ */
/* Two columns on larger screens, single column on phones.
   We keep your existing <form id="booking-form" class="stack"> markup. */
#booking-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Fields that should span full width */
#booking-form > div:has(#service),
#booking-form > div:has(#notes),
#booking-form > .form-actions {
  grid-column: 1 / -1;
}

/* Single column on mobile */
@media (max-width: 780px){
  #booking-form{
    grid-template-columns: 1fr;
  }
}

/* Inputs: full width + comfy tap targets */
#booking-form .input,
#booking-form select,
#booking-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px;            /* prevents iOS zoom */
  line-height: 1.2;
  min-height: 44px;           /* finger-friendly */
}

/* Multi-select: friendlier height, especially on mobile */
#booking-form select[multiple]{
  min-height: 220px;
  padding: 10px;
}
@media (max-width: 700px){
  #booking-form select[multiple]{ min-height: 180px; }
}

/* Date & time — stop overflow on iOS/Safari */
#booking-form .input[type="date"],
#booking-form .input[type="time"]{
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  padding-right: 12px;
  inline-size: 100%;      /* logical width; safer */
  max-width: 100%;
  min-height: 44px;
}

/* Safari/WebKit quirks */
#booking-form .input[type="date"]::-webkit-date-and-time-value { min-height: 1.2em; }
#booking-form .input[type="date"]::-webkit-calendar-picker-indicator{
  padding: 4px;
  margin: 0;
}

/* Labels spacing */
#booking-form label{
  display:block;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Actions row: wrap nicely on small screens */
#booking-form .form-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

/* Nice primary button (uses your global .btn look) */
#booking-form .btn{
  padding: 12px 18px;
  border-radius: 12px;
}

/* Narrow container gets a bit of side breathing on small screens */
@media (max-width: 700px){
  .narrow { padding-inline: 8px; }
}

/* Contact & Hours key–value blocks:
   keep labels tidy and values wrapping naturally */
.kv{
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 8px;
  align-items: baseline;
}
.kv > div { min-width: 0; } /* allow wrapping */
.kv a { text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.2); }
.kv a:hover { border-bottom-color: rgba(0,0,0,.4); }

/* Map iframe: round + border */
.map-embed{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Section spacing tweaks on mobile so it feels airy without overflow */
@media (max-width: 700px){
  .section .container.narrow.stack { gap: 18px; }
}