:root{
  --ink:#1f2937; 
  --brand:#004274; 
  --brand-dark:#022c52;
  --brand-2:#2fa1c6;
  --muted:#6b7280; 
  --accent:#36aa71;
  --card:#fff; 
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Base */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Helpers */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bg--subtle{background:#f8fafc}

/* Focus styles for keyboard users */
:focus-visible{outline:3px solid #86b7ff; outline-offset:3px}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:#111827; color:#fff; border-radius:8px; z-index:2000;
}

/* Containers */
.container{max-width:1200px;margin:auto;padding:0 20px}
.container--fluid{max-width:100%;width:100%;padding-inline:32px}

/* Logo */
.logo{height:40px;width:auto;display:block}

/* ===== Header & Navigation (NON-STICKY) ===== */
.header{
  position:relative;                 /* no sticky */
  z-index:5;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #eef2f7;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:800; font-size:18px; color:#0f172a;
}
.brand .logo{height:40px}

/* Desktop menu */
.menu{display:flex; align-items:center; gap:16px}
.menu__link, .btn-signin{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px; border-radius:12px; font-weight:700; font-size:15px;
  min-width:110px; text-align:center;
  background:var(--brand); color:#fff; border:1.5px solid var(--brand);
  transition:all .25s ease; cursor:pointer;
}
.menu__link:hover, .btn-signin:hover{
  background:var(--brand-dark); border-color:var(--brand-dark);
  box-shadow:0 4px 12px rgba(0,66,116,.2)
}
.menu__link--active{
  background:var(--brand-dark); border-color:var(--brand-dark)
}

/* Ensure mobile menu hidden by default on large screens */
.mobile-menu{display:none}

/* Hamburger (mobile) */
.nav-toggle{display:none}

@media (max-width:768px){
  .menu{display:none}
  .brand .logo{height:34px}
  .brand span{font-size:16px; line-height:1}

  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; border:1px solid #e5ecf6; border-radius:10px;
    background:#fff; cursor:pointer;
  }
  .nav-toggle__bar{
    width:22px; height:2px; background:#0f172a; display:block; margin:0 auto;
    transition:transform .25s ease, opacity .25s ease
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-menu{
    display:grid; grid-template-columns:1fr; gap:10px;
    padding:12px 20px 18px; background:#fff; border-top:1px solid #eef2f7;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
  }
  .mobile-menu.is-open{transform:scaleY(1); opacity:1; pointer-events:auto}
  .mobile-menu__link{
    display:block; width:100%; text-align:center; padding:12px 16px;
    border:1.5px solid var(--brand); color:#fff; background:var(--brand);
    border-radius:12px; font-weight:700;
  }
  .mobile-menu__link--cta{background:var(--brand-dark); border-color:var(--brand-dark)}
}

/* ===== Hero with YouTube bg ===== */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;color:#fff;overflow:hidden;z-index:0}
.yt-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#yt-player,.yt-fallback-iframe{
  position:absolute;top:50%;left:50%;
  width:120vw;height:120vh;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}
.yt-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,66,116,.6),rgba(0,66,116,.25) 50%,rgba(255,255,255,0))}
.hero-inner{position:relative;z-index:2;padding:80px 0 30px;text-align:left}
.eyebrow{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:6px 12px;border-radius:999px;font-weight:700}
.hero-title{font-size:clamp(28px,5vw,56px);margin:.6rem 0}
.hero-subtitle{max-width:740px;color:#e5eef7;font-weight:500}

/* Sections */
.section{padding:64px 0;position:relative;z-index:3}
.section-title{margin:0 0 24px;font-size:clamp(22px,3.2vw,36px)}

/* ===== Cards Grid ===== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.grid--4{grid-template-columns:repeat(4,minmax(260px,1fr))}
@media (max-width:1024px){.grid--4{grid-template-columns:repeat(2,minmax(260px,1fr))}}
@media (max-width:640px){.container--fluid{padding-inline:16px}.grid--4{grid-template-columns:1fr}.hero-inner{padding:60px 0 24px}}

/* Card */
.card{
  background:var(--card);border:1px solid #eee;border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;transition:.2s;display:flex;flex-direction:column
}
.card:hover{transform:translateY(-4px)}
.card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#f3f4f6}
.card__media img{width:100%;height:100%;object-fit:contain;object-position:center;cursor:zoom-in}
.tags{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.tag{font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px}
.tag--dark{background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.2)}
.tag--green{background:#22c55e;color:#fff}
.card__body{display:flex;flex-direction:column;gap:10px;padding:16px;flex:1}
.card__eyebrow{margin:0;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.card__title{margin:2px 0 6px;font-size:1rem}
.price{font-size:20px;font-weight:800;color:var(--brand)}
.card__location{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:14px}
.card__meta{display:flex;gap:16px;color:#6b7280;font-weight:700;font-size:14px}
.meta-item{display:inline-flex;align-items:center;gap:6px}
.card__footer{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:40px;
  padding:0 14px;border-radius:10px;font-weight:700;border:1px solid #e5e7eb;
  background:#fff;color:var(--ink);cursor:pointer
}
.btn:hover{border-color:#cbd5e1}
.btn-whatsapp{border-color:#22c55e;color:#16a34a}
.btn-whatsapp:hover{border-color:#16a34a}
.load-more-wrap{display:flex;justify-content:center;margin-top:24px}
.btn-load-more{padding:0 24px;border-color:#16a34a;color:#15803d;background:#fff}
.btn-load-more:hover{border-color:#15803d}

/* Icons (SVG masks) */
.ico{width:16px;height:16px;display:inline-block;background:currentColor;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ico-pin{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24"><path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24"><path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>')}
.ico-area{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6z"/></svg>')}

/* ===== Lightbox ===== */
.lightbox[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.lightbox__figure{position:relative;max-width:min(96vw,1400px);max-height:90vh;margin:0;display:grid;gap:8px;z-index:1}
.lightbox__figure img{max-width:100%;max-height:90vh;width:auto;height:auto;display:block;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);background:#000;object-fit:contain}
.lightbox__close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;font-size:22px;line-height:1;background:#fff;color:#111827;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.lightbox__close:hover{background:#f3f4f6}
.lightbox__figure figcaption{color:#e5e7eb;text-align:center;font-size:14px}

/* ===== Footer (4-column layout) ===== */
.footer{background:#0b1220;color:#cbd5e1;padding:48px 0 0;position:relative;z-index:4}
.footer a{color:#dbeafe}
.footer a:hover{text-decoration:underline}
.footer .brand{color:#fff}

.footer__grid{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.footer__col{flex:1;min-width:240px}
.footer__col .logo{height:44px}
.footer__about{margin:12px 0 0;max-width:28ch;line-height:1.6;color:#b7c3d4}

.footer__title{margin:0 0 12px;color:#e5e7eb;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:800}
.footer__meta{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer__meta li{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start}
.footer__label{color:#9ca3af;font-weight:800}
.footer__links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__links a{display:inline-block;padding:4px 0}

.footer__bottom{margin-top:28px;border-top:1px solid rgba(255,255,255,.08);background:#0a1020}
.footer__bottom-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:14px}
.footer__note{color:#9ca3af}

/* Responsive footer tweaks */
@media (max-width:1024px){.footer__grid{gap:32px}}
@media (max-width:640px){
  .footer{padding-top:36px}
  .footer__grid{flex-direction:column;gap:22px}
  .footer__meta li{grid-template-columns:90px 1fr}
  .footer__bottom-inner{flex-direction:column;gap:6px;text-align:center}
}

/* ===================================================================== */
/*                 CONTACT PAGE — SCOPED POLISH                          */
/*   Requires: <body class="contact-page"> in contact.html               */
/* ===================================================================== */

.contact-page .section{padding:clamp(48px,6vw,80px) 0}
.contact-page .section--tight{padding:clamp(28px,4vw,48px) 0}

.contact-page .eyebrow{
  display:inline-block; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; opacity:.7; margin-bottom:.5rem; background:transparent; border:none; padding:0;
}
.contact-page .section-title{margin:0 0 .75rem; line-height:1.15}
.contact-page .section-subtitle{margin:0; opacity:.8; max-width:60ch}

/* Responsive, even-height card grid */
.contact-page .grid--cards{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,2vw,20px);
}
@media (min-width:1024px){ .contact-page .grid--cards > *{ grid-column: span 3; } }
@media (min-width:640px) and (max-width:1023.98px){ .contact-page .grid--cards > *{ grid-column: span 6; } }
@media (max-width:639.98px){ .contact-page .grid--cards > *{ grid-column: 1 / -1; } }

/* Contact cards */
.contact-page .card--contact{
  height:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-page .card--contact:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08) }
.contact-page .card--contact .card__body{ display:flex; flex-direction:column; gap:.5rem; padding:20px 22px }
.contact-page .card--contact .card__eyebrow{ margin:0; font-size:.8rem; text-transform:uppercase; opacity:.6 }
.contact-page .card--contact .card__title{ margin:.1rem 0 .25rem }
.contact-page .card--contact p{ margin:0 0 .75rem }
.contact-page .card--contact .card__footer{ margin-top:auto }

/* Form layout */
.contact-page .form{ display:flex; flex-direction:column; gap:16px }
.contact-page .form__row{ display:flex; flex-direction:column; gap:8px }
.contact-page .grid--2{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:720px){ .contact-page .grid--2{ grid-template-columns:1fr 1fr } }

.contact-page .form__label{ font-weight:700 }
.contact-page .input,
.contact-page .textarea{
  width:100%; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; padding:12px 14px; font:inherit; background:#fff; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-page .input:focus,
.contact-page .textarea:focus{
  border-color:#0b4a6f;
  box-shadow:0 0 0 3px rgba(11,74,111,.12);
}

.contact-page .form__row--consent{ margin-top:.25rem }
.contact-page .checkbox{ display:flex; align-items:flex-start; gap:.6rem }
.contact-page .checkbox input{ margin-top:.2rem }

.contact-page .form__error{ color:#a11; font-size:.85rem }
.contact-page .form__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:.25rem }
.contact-page .form__note{ opacity:.7; font-size:.9rem }
.contact-page .form__status{ margin-top:.5rem; font-weight:700 }

/* ===== Contact Page Map (percentage-based responsive) ===== */
.contact-page .map-embed {
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  background: #f6f8fa;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 25%; /* map takes 25% of viewport height */
  max-height: 320px; /* optional safety limit */
  min-height: 150px; /* optional minimum for small screens */
  margin-inline: auto;
}

.contact-page .map-embed iframe {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* Fine-tune for different screens using % */
@media (max-width: 1024px) {
  .contact-page .map-embed { height: 30%; }
}
@media (max-width: 640px) {
  .contact-page .map-embed { height: 35%; }
}


/* Header button spacing on this page */
.contact-page .menu .menu__link,
.contact-page .menu .btn-signin{ margin-left:6px }