/* ============================================================
   Otter Lodge Skye — Marcliffe-inspired design
   Palette:  blue #455A6E · brown #897763 · beige #D2CDC1
             ochre #C49E5E · cream #EDE4D3
   Type:     Playfair Display (display) · EB Garamond (body)
             Jost (eyebrows / nav / buttons / labels)
   ============================================================ */

:root{
  --blue:#455A6E;
  --blue-deep:#3a4c5b;
  --brown:#897763;
  --beige:#D2CDC1;
  --ochre:#C49E5E;
  --ochre-deep:#b08842;
  --cream:#EDE4D3;
  --cream-pale:#F7F2E9;
  --ink:#3b4651;
  --line:rgba(137,119,99,.28);
  --serif:'Playfair Display',Georgia,serif;
  --body:'EB Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wide:.22em;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:#fff;
  font-size:19px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .25s ease}

h1,h2,h3,h4{font-family:var(--serif);color:var(--blue);font-weight:600;line-height:1.12}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:700;letter-spacing:.005em}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.7rem}
p{margin-bottom:1.15rem}

.container{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.section{padding:clamp(64px,9vw,120px) 0}
.bg-cream{background:var(--cream-pale)}
.bg-beige{background:var(--beige)}
.center{text-align:center}

/* eyebrow / overline */
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:var(--wide);
  text-transform:uppercase;color:var(--brown);display:block;margin-bottom:20px;
}
.eyebrow--light{color:var(--cream)}
.lead{font-family:var(--body);font-size:1.32rem;line-height:1.7;color:#54616d}

/* divider mark */
.rule{width:54px;height:1px;background:var(--ochre);margin:24px auto;border:0}
.rule--left{margin-left:0}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.76rem;
  letter-spacing:var(--wide);text-transform:uppercase;padding:17px 38px;cursor:pointer;
  border:1px solid transparent;transition:all .3s ease;
}
.btn--solid{background:var(--ochre);color:#fff;border-color:var(--ochre)}
.btn--solid:hover{background:var(--ochre-deep);border-color:var(--ochre-deep);color:#fff}
.btn--dark{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn--dark:hover{background:var(--blue);color:#fff}
.btn--light{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.btn--light:hover{background:#fff;color:var(--blue)}

.tlink{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  border-bottom:1px solid var(--ochre);padding-bottom:5px;
}
.tlink:hover{color:var(--ochre)}

/* ============================================================
   HEADER  (light — logo in corner + horizontal menu)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:300;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{max-width:1360px;margin:0 auto;padding:12px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:66px;width:auto;display:block}
.brand .tag{font-family:var(--sans);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brown);padding-left:16px;border-left:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);padding:10px 14px}
.nav a:hover,.nav a.active{color:var(--ochre)}
.nav .btn{margin-left:14px;padding:13px 26px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:1.5px;background:var(--blue);margin:6px 0;transition:.3s}

/* ============================================================
   HERO — full-bleed slideshow + booking bar
   ============================================================ */
.hero{position:relative;height:90vh;min-height:600px;overflow:hidden;background:var(--blue)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);transition:opacity 1.6s ease,transform 7s ease}
.slide.is-active{opacity:1;transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(41,53,64,.30) 0%,rgba(41,53,64,.30) 45%,rgba(41,53,64,.62) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px 120px}
.hero-content h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero-content .eyebrow{color:#f0dcb4}
.hero-content p{font-size:1.3rem;color:#f4ede1;max-width:600px;margin:6px auto 0;
  text-shadow:0 1px 16px rgba(0,0,0,.4)}
.slide-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:138px;z-index:4;display:flex;gap:11px}
.slide-dots button{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;cursor:pointer;padding:0;transition:.3s}
.slide-dots button.is-active{background:#fff}

/* booking bar (decorative, links to booking widget) */
.bookbar{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:5;width:100%;max-width:1040px;padding:0 24px}
.bookbar-inner{display:grid;grid-template-columns:1fr 1fr 1fr auto;background:var(--blue);
  box-shadow:0 24px 60px rgba(41,53,64,.35)}
.bookbar .cell{padding:22px 26px;border-right:1px solid rgba(255,255,255,.16)}
.bookbar .cell .lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:var(--wide);
  text-transform:uppercase;color:#aeb9c3;display:block;margin-bottom:6px}
.bookbar .cell .val{font-family:var(--body);font-size:1.15rem;color:#fff}
.bookbar .go{background:var(--cream);display:flex;align-items:center;justify-content:center;
  padding:0 40px;font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);transition:.3s}
.bookbar .go:hover{background:#fff;color:var(--ochre-deep)}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero{position:relative;height:52vh;min-height:380px;overflow:hidden;background:var(--blue)}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,53,64,.36),rgba(41,53,64,.58))}
.page-hero .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px}
.page-hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.page-hero .eyebrow{color:#f0dcb4}
.page-hero p{color:#f4ede1;max-width:640px;font-size:1.2rem}

/* ============================================================
   SECTION INTRO (centered, Marcliffe-style)
   ============================================================ */
.intro{text-align:center}
.intro .mark{height:78px;margin:0 auto 26px;opacity:.9}
.intro h2{margin-bottom:6px}
.intro .lead{margin:18px auto 0}

/* ============================================================
   FEATURE — staggered duo image + text
   ============================================================ */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.feature + .feature{margin-top:clamp(60px,8vw,110px)}
.feature.reverse .media{order:2}
.media{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.media img{width:100%;height:440px;object-fit:cover}
.media img:nth-child(2){margin-top:56px}
.media.single{grid-template-columns:1fr}
.media.single img{height:520px}
.feature .copy h2{margin-bottom:6px}
.feature .copy p{color:#54616d}
.feature .copy .btn,.feature .copy .tlink{margin-top:10px}

/* ============================================================
   ROOMS (accommodation rows) — large image + copy
   ============================================================ */
.room{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.room + .room{margin-top:clamp(64px,9vw,120px)}
.room.reverse .room-media{order:2}
.room-media img{width:100%;height:540px;object-fit:cover}
.room .copy .eyebrow{margin-bottom:14px}
.room .copy h2{margin-bottom:14px}
.room .copy p{color:#54616d}
.room .copy .tlink{margin-top:8px}

/* ============================================================
   EDITORIAL CARDS (rooms summary / activities / area)
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ecard .ph{height:300px;background-size:cover;background-position:center;margin-bottom:26px}
.ecard h3{margin-bottom:10px}
.ecard p{color:#54616d;font-size:1.05rem;margin-bottom:14px}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.titem{padding:40px 34px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.titem:nth-child(3n){border-right:0}
.titem .no{font-family:var(--serif);font-size:1rem;color:var(--ochre);letter-spacing:.1em}
.titem h3{font-size:1.45rem;margin:8px 0 10px}
.titem p{color:#54616d;font-size:1.02rem;margin:0}

/* ============================================================
   HIGHLIGHTS strip (property highlights along the bottom)
   ============================================================ */
.highlights{background:var(--blue);color:#fff}
.highlights .container{padding-top:64px;padding-bottom:64px}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hcol{text-align:center;padding:6px 26px;border-right:1px solid rgba(255,255,255,.15)}
.hcol:last-child{border-right:0}
.hcol h3{color:#fff;font-size:1.35rem;margin-bottom:10px}
.hcol .hr{width:34px;height:1px;background:var(--ochre);margin:0 auto 14px}
.hcol p{color:#cdd5db;font-size:1rem;margin:0;font-family:var(--body)}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery img{height:230px;width:100%;object-fit:cover;transition:.4s}
.gallery img:hover{opacity:.9}

/* ============================================================
   CTA band
   ============================================================ */
.cta{position:relative;background-size:cover;background-position:center;text-align:center;color:#fff}
.cta::after{content:"";position:absolute;inset:0;background:rgba(41,53,64,.6)}
.cta .container{position:relative;z-index:1;padding-top:clamp(70px,10vw,120px);padding-bottom:clamp(70px,10vw,120px)}
.cta h2{color:#fff;margin-bottom:14px}
.cta .eyebrow{color:#f0dcb4}
.cta p{color:#f1eadd;max-width:560px;margin:0 auto 30px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-grid .c{padding:46px 30px;text-align:center;border-right:1px solid var(--line)}
.contact-grid .c:last-child{border-right:0}
.contact-grid .c .eyebrow{margin-bottom:12px}
.contact-grid .c a,.contact-grid .c span{font-family:var(--serif);font-size:1.4rem;color:var(--blue)}
.contact-grid .c a:hover{color:var(--ochre)}

/* map */
.map-wrap{line-height:0;box-shadow:0 20px 50px rgba(41,53,64,.16)}
.map-wrap iframe{width:100%;height:460px;border:0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--blue-deep);color:#c4cdd4;padding:76px 0 0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:56px;padding-bottom:54px}
.footer-brand img{height:74px;background:#fff;padding:8px;margin-bottom:20px}
.site-footer h4{font-family:var(--sans);color:#fff;font-size:.74rem;letter-spacing:var(--wide);
  text-transform:uppercase;font-weight:500;margin-bottom:20px}
.site-footer p{font-size:1.02rem;color:#b6c0c8;line-height:1.7}
.site-footer a{color:#c4cdd4}
.site-footer a:hover{color:var(--ochre)}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.footer-contact{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;line-height:2}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:24px 0;text-align:center}
.footer-bottom p{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8c98a2;margin:0}
.footer-bottom a{color:#8c98a2}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .nav a{padding:10px 10px;font-size:.7rem;letter-spacing:.1em}
  .feature,.room{gap:40px}
}
@media(max-width:880px){
  .grid-3{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr 1fr}
  .titem:nth-child(3n){border-right:1px solid var(--line)}
  .titem:nth-child(2n){border-right:0}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .hgrid{grid-template-columns:1fr 1fr;gap:30px 0}
  .hcol:nth-child(2){border-right:0}
}
@media(max-width:760px){
  body{font-size:18px}
  .nav{position:fixed;inset:91px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0 16px;box-shadow:0 24px 50px rgba(41,53,64,.16);transform:translateY(-140%);
    transition:transform .38s ease;border-bottom:1px solid var(--line)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:15px 32px;font-size:.78rem;border-bottom:1px solid rgba(137,119,99,.12)}
  .nav .btn{margin:14px 32px 0;text-align:center}
  .nav-toggle{display:block}
  .hero{height:84vh}
  .hero-content{padding-bottom:200px}
  .bookbar-inner{grid-template-columns:1fr 1fr}
  .bookbar .cell:nth-child(2){border-right:0}
  .bookbar .go{grid-column:1/3;padding:20px}
  .slide-dots{display:none}
  .feature,.room{grid-template-columns:1fr;gap:30px}
  .feature.reverse .media,.room.reverse .room-media{order:0}
  .media img{height:300px}
  .media img:nth-child(2){margin-top:0}
  .media.single img,.room-media img{height:360px}
  .grid-3{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .titem{border-right:0!important}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .gallery img{height:180px}
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .c{border-right:0;border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .brand .tag{display:none}
  .brand img{height:56px}
}