/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter: stable; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ===== TOKENS ===== */
:root {
  --ink:      #1a1a1a;
  --ink2:     #3a3a3a;
  --ink-soft: #5a5a5a;
  --gold:     #C8A96E;
  --cream:    #F5F2ED;
  --petrol:   #1A4F58;
  --white:    #FFFFFF;
  --booking:  #003580;
  --airbnb:   #FF5A5F;
  --line:     rgba(26,26,26,0.1);
  --linedark: rgba(26,26,26,0.1);
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { line-height:1.25; }

.wrap { max-width:1000px; margin:0 auto; padding:0 36px; }

  /* ===== HEADER ===== */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 36px;
    background: rgba(26,26,26,0.97);
    backdrop-filter: blur(8px);
  }

  .header-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .menu-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    min-width: 60px;
    flex-shrink: 0;
  }
  .menu-btn-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
  .menu-btn-bars span { display: block; width: 24px; height: 1px; background: #fff; }
  .menu-btn-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; font-weight: 400; }

  .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .logo img { height: 48px; width: auto; object-fit: contain; }

  .header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

  /* ===== MENU PANEL ===== */
.menu-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:400; opacity:0; pointer-events:none; transition:opacity 0.35s; }
.menu-backdrop.open { opacity:1; pointer-events:all; }

.menu-overlay { position:fixed; top:0; left:0; bottom:0; width:340px; max-width:88vw; background:var(--ink); z-index:500; display:flex; flex-direction:column; padding:80px 48px 48px; transform:translateX(-100%); transition:transform 0.38s cubic-bezier(0.4,0,0.2,1); }
.menu-overlay.open { transform:translateX(0); }

.menu-close { position:absolute; top:24px; right:24px; background:none; border:none; color:rgba(255,255,255,0.55); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:color 0.2s; }
.menu-close:hover { color:var(--white); }
.close-icon { width:22px; height:22px; position:relative; display:block; }
.close-icon::before, .close-icon::after { content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:currentColor; }
.close-icon::before { transform:rotate(45deg); }
.close-icon::after { transform:rotate(-45deg); }

.overlay-nav { display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1; }
.overlay-nav a { font-family:'Lato',sans-serif; font-size:1rem; font-weight:300; letter-spacing:0.06em; color:rgba(255,255,255,0.75); transition:color 0.2s, padding-left 0.2s; line-height:1.6; padding:4px 0; }
.overlay-nav a:hover { color:var(--gold); padding-left:6px; }

.overlay-divider { width:32px; height:1px; background:rgba(255,255,255,0.18); margin:24px 0; }

.overlay-contact { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.overlay-contact-label { font-family:'Lato',sans-serif; font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.overlay-contact a, .overlay-contact span { font-family:'Lato',sans-serif; font-size:0.8rem; font-weight:300; color:rgba(255,255,255,0.55); letter-spacing:0.02em; transition:color 0.2s; }
.overlay-contact a:hover { color:var(--gold); }
.overlay-contact-block { display:flex; flex-direction:column; gap:3px; }

.overlay-ctas { display:flex; flex-direction:column; gap:10px; }
.overlay-ctas a { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); padding:12px 20px; text-align:center; transition:opacity 0.15s; }
.overlay-ctas a:hover { opacity:0.85; }
.overlay-ctas .oc-booking { background:var(--booking); }
.overlay-ctas .oc-airbnb  { background:var(--airbnb); }

/* ===== CTA BAND ===== */
.cta-band { background:var(--ink); padding:80px 0; text-align:center; }
.cta-band h2 { font-size:clamp(1.8rem,3vw,2.4rem); color:var(--white); margin-bottom:12px; }
.cta-band p { font-size:0.95rem; color:rgba(255,255,255,0.6); font-weight:300; max-width:440px; margin:0 auto 32px; }
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.cta-btn { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); padding:14px 32px; transition:opacity 0.15s; }
.cta-btn:hover { opacity:0.85; }
.cta-btn.booking { background:var(--booking); }
.cta-btn.airbnb  { background:var(--airbnb); }

/* ===== FOOTER ===== */
footer { background:var(--ink); color:rgba(255,255,255,0.6); padding:56px 0 24px; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-logo { display: inline-block; margin-bottom: 14px; }
.footer-logo img { height:55px; filter: brightness(0) invert(1); width:auto; object-fit:contain; opacity:0.7; margin-bottom:14px; }
.footer-top p, .footer-top a { display:block; font-size:0.85rem; font-weight:300; color:rgba(255,255,255,0.6); margin-bottom:8px; }
.footer-top a:hover { color:var(--gold); }
.footer-top h4 { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:700; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:0.74rem; color:rgba(255,255,255,0.3); }

@media (max-width:700px) { .footer-top { grid-template-columns:1fr; gap:24px; } }

a:focus-visible, button:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }