/* ==================================================================
   MacLeod House
   Palette: cream paper, deep moss, brass. Serif headings.
   ================================================================== */

:root{
  --ink:#202623;
  --ink-soft:#5b6662;
  --ink-faint:#8d968f;
  --paper:#faf8f3;
  --paper-warm:#f3efe5;
  --card:#ffffff;
  --line:#e3ded2;
  --moss:#2d5a4c;
  --moss-dark:#1f4034;
  --moss-tint:#e8f0ec;
  --brass:#a97f3d;
  --brass-soft:#c9a469;
  --amber-bg:#fdf4e3;
  --amber-line:#e0b866;
  --amber-ink:#7a5714;
  --radius:16px;
  --wrap:1140px;
  --shadow-s:0 1px 2px rgba(32,38,35,.05);
  --shadow-m:0 2px 4px rgba(32,38,35,.04), 0 12px 32px rgba(32,38,35,.07);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Helvetica Neue",Inter,Arial,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.7 var(--serif);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.18; margin:0 0 .45em; font-weight:600; letter-spacing:-.012em}
h1{font-size:clamp(2.15rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.1em}
a{color:var(--moss)}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
.narrow{max-width:70ch}
section{padding:84px 0}
.eyebrow{
  font:600 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 16px
}
.ui{font-family:var(--sans)}

/* ---------- bull mark (Clan MacLeod) ---------- */
.mark{width:40px; height:40px; display:block; flex:none}
.divider{display:flex; align-items:center; gap:18px; margin:0; padding:0}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1}
.section-mark{display:flex; justify-content:center; align-items:center; gap:14px; padding:8px 0 0}
.section-mark .mark{width:56px; height:56px}
.section-mark::before,.section-mark::after{content:""; height:1px; width:64px; background:var(--line)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:14px 30px; border-radius:999px;
  font:600 15px/1 var(--sans); text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--moss); color:#fff}
.btn-primary:hover{background:var(--moss-dark)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--card)}
.btn-ghost:hover{border-color:var(--moss); color:var(--moss)}
.btn-sm{padding:10px 20px; font-size:14px}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60; background:rgba(250,248,243,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)
}
header .wrap{display:flex; align-items:center; gap:22px; height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand-txt{font:600 19.5px/1 var(--serif); letter-spacing:-.015em}
.brand-txt span{display:block; font:600 9.5px/1 var(--sans); letter-spacing:.2em; color:var(--brass); margin-top:6px}
nav{margin-left:auto; display:flex; gap:4px; align-items:center}
nav a{
  font:500 14.5px/1 var(--sans); text-decoration:none; color:var(--ink-soft);
  padding:9px 14px; border-radius:999px; transition:.16s
}
nav a:hover{color:var(--moss); background:var(--moss-tint)}
nav a.current{color:var(--moss-dark); background:var(--moss-tint); font-weight:600}
nav a.nav-cta{background:var(--moss); color:#fff; margin-left:8px; padding:11px 20px}
nav a.nav-cta:hover{background:var(--moss-dark); color:#fff}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; font-size:25px; cursor:pointer; color:var(--ink); line-height:1}

/* ---------- hero ---------- */
.hero{
  position:relative; color:#fff; text-align:center;
  padding:120px 0 108px;
  background:linear-gradient(rgba(22,36,30,.58),rgba(22,36,30,.74)),
             image-set(url('assets/img/hero.webp') type('image/webp'),
                       url('assets/img/hero.jpg')  type('image/jpeg')) center/cover no-repeat,
             #23453a;
  background-size:auto, cover, auto
}
.hero h1{color:#fff; max-width:17ch; margin-inline:auto}
.hero .eyebrow{color:var(--brass-soft)}
.hero .lede{font-size:clamp(1.05rem,2vw,1.24rem); max-width:56ch; margin:0 auto 32px; color:#e6ede9}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.13); color:#fff; border-color:#fff}
.hero .mark{margin:0 auto 22px; width:104px; height:104px; opacity:.95}

/* page hero (inner pages) */
.pagehead{background:var(--paper-warm); border-bottom:1px solid var(--line); padding:64px 0 56px; text-align:center}
.pagehead p{max-width:58ch; margin:0 auto; color:var(--ink-soft)}

/* ---------- trust strip ---------- */
.trust{background:var(--card); border-bottom:1px solid var(--line)}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-block:30px; text-align:center}
.trust b{display:block; font:600 22px/1.2 var(--serif); color:var(--moss)}
.trust small{font:400 13px/1.45 var(--sans); color:var(--ink-soft)}
.trust .stars{color:var(--brass); font-size:14px; letter-spacing:2px; display:block; margin-bottom:4px}

/* ---------- unit cards ---------- */
.units{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:28px; margin-top:40px}
.unit{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-m); display:flex; flex-direction:column;
  transition:transform .22s, box-shadow .22s
}
.unit:hover{transform:translateY(-3px); box-shadow:0 4px 8px rgba(32,38,35,.05), 0 18px 42px rgba(32,38,35,.10)}
.unit-img{aspect-ratio:4/3; background:var(--paper-warm) center/cover no-repeat; position:relative}
.unit-img .placeholder{
  position:absolute; inset:0; display:grid; place-content:center; gap:8px; text-align:center;
  font:500 13px/1.5 var(--sans); color:var(--ink-faint); padding:20px
}

.ribbon{
  position:absolute; top:15px; left:15px; background:var(--brass); color:#fff;
  font:600 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px
}
.unit-body{padding:24px; display:flex; flex-direction:column; flex:1}
.unit h3{margin-bottom:3px}
.beds{font:400 13.5px/1.5 var(--sans); color:var(--ink-soft); margin-bottom:13px}
.unit p{font-size:15.5px; color:var(--ink-soft)}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin:15px 0 20px}
.tag{font:500 12px/1 var(--sans); padding:7px 12px; border-radius:999px; background:var(--paper-warm); color:var(--ink-soft)}
.tag.hi{background:var(--moss-tint); color:var(--moss-dark); font-weight:600}
.unit-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:18px; border-top:1px solid var(--line)
}
.price{font:600 19px/1.25 var(--sans)}
.price small{display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:3px}
.price.tbc{font-size:15px; color:var(--ink-faint); font-weight:500}

.thumbs{display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap}
.thumb{
  width:66px; height:50px; border-radius:7px; border:1px solid var(--line);
  background:var(--paper-warm) center/cover no-repeat; padding:0; cursor:pointer;
  opacity:.62; transition:opacity .16s, border-color .16s, transform .16s
}
.thumb:hover{opacity:1; transform:translateY(-1px)}
.thumb.on{opacity:1; border-color:var(--moss); box-shadow:0 0 0 2px var(--moss-tint)}
.thumb:focus-visible{outline:2px solid var(--moss); outline-offset:2px}

/* full-width unit rows, Rooms page */
.unit-row{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-m); margin-bottom:34px
}
.unit-row:nth-child(even) .unit-row-img{order:2}
.unit-row-img{min-height:340px; background:var(--paper-warm) center/cover no-repeat; position:relative}
.unit-row-body{padding:40px}
.unit-row-body h3{font-size:1.6rem}
.unit-row .unit-foot{padding-top:22px}

/* ---------- welcome / touches ---------- */
.welcome{background:var(--paper-warm)}
.touches{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px; margin-top:42px}
.touch h3{font-size:1.08rem; margin-bottom:7px}
.touch p{font-size:15.5px; color:var(--ink-soft); margin:0}


/* ---------- pull quote ---------- */
.pull{
  max-width:64ch; margin:0 auto; text-align:center; padding:12px 0
}
.pull p{font:italic 400 clamp(1.25rem,2.6vw,1.6rem)/1.5 var(--serif); color:var(--ink); margin-bottom:14px}
.pull cite{font:500 13px/1 var(--sans); color:var(--ink-faint); font-style:normal; letter-spacing:.04em}

/* ---------- reviews ---------- */
.reviews{background:var(--card); border-block:1px solid var(--line)}
.review-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:28px; margin-top:38px}
.review{border-left:3px solid var(--brass-soft); padding:2px 0 2px 22px}
.review p{font:italic 400 16.5px/1.6 var(--serif); margin-bottom:9px}
.review cite{font:500 12.5px/1 var(--sans); color:var(--ink-faint); font-style:normal}
.stars{color:var(--brass); letter-spacing:2px}

/* ---------- area ---------- */
.mapwrap{
  margin-top:38px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-m); background:var(--paper-warm)
}
.mapwrap iframe{display:block; width:100%; height:430px; border:0}
.maplegend{
  display:flex; flex-wrap:wrap; gap:10px 22px; padding:16px 22px;
  background:var(--card); border-top:1px solid var(--line);
  font:400 13.5px/1.5 var(--sans); color:var(--ink-soft)
}
.maplegend b{color:var(--ink); font-weight:600}
.nearby{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  margin-top:38px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden
}
.nearby div{background:var(--paper); padding:24px}
.nearby b{display:block; font:600 15.5px/1.3 var(--sans); margin-bottom:4px}
.nearby small{display:block; font:400 13.5px/1.5 var(--sans); color:var(--ink-soft)}
.nearby .mins{color:var(--moss); font-weight:600; margin-top:7px}
.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px; margin-top:42px}
.notes h3{font-size:1.08rem; margin-bottom:6px}
.notes p{font-size:15.5px; color:var(--ink-soft); margin:0}

/* ---------- enquiry ---------- */
.enq-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start}
form{display:grid; gap:16px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{font:600 13px/1 var(--sans); display:block; margin-bottom:8px}
input,select,textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  font:15px/1.45 var(--sans); background:var(--card); color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--moss); outline-offset:-1px; border-color:var(--moss)}
textarea{min-height:120px; resize:vertical}
.contact-line{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px}
.contact-line b{font:600 13.5px/1.6 var(--sans); min-width:82px; color:var(--ink-faint)}
.contact-line a{text-decoration:none}
.contact-line a:hover{text-decoration:underline}
.formnote{font:400 13px/1.6 var(--sans); color:var(--ink-soft); margin:0}
#formStatus{font:500 14.5px/1.55 var(--sans); padding:14px 16px; border-radius:10px; display:none}
#formStatus.ok{display:block; background:var(--moss-tint); color:var(--moss-dark)}
#formStatus.err{display:block; background:#fbeceb; color:#8a3028}
.next-steps{background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-top:30px}
.next-steps h3{font-size:1.05rem}
.next-steps ol{margin:0; padding-left:20px; font:400 15px/1.75 var(--sans); color:var(--ink-soft)}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#a5afaa; padding:56px 0 40px; font:400 14px/1.75 var(--sans)}
footer a{color:var(--brass-soft); text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:36px}
footer b{color:#fff; display:block; margin-bottom:9px; font-weight:600}
footer .mark{width:76px; height:76px; margin-bottom:20px; opacity:.9}
.copyright{margin-top:40px; padding-top:24px; border-top:1px solid #343c39; font-size:13px; color:#7f8a85}
.credit{display:inline-block; margin-top:7px; font-size:12px; color:#68736e}
.credit a{color:#8b968f}

/* ---------- draft notes (hidden in production) ---------- */
.draft-note{display:none}
body.draft .draft-note{
  display:block; background:var(--amber-bg); border:1px dashed var(--amber-line);
  color:var(--amber-ink); border-radius:10px; padding:11px 15px; margin:14px 0;
  font:500 13.5px/1.55 var(--sans)
}
body.draft .draft-note::before{content:"NEEDS FILLING — "; font-weight:700; letter-spacing:.03em}
#draftBar{display:none}
body.draft #draftBar{
  display:block; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--amber-ink); color:#fff; font:500 13px/1.5 var(--sans);
  padding:11px 20px; text-align:center
}
body.draft #draftBar b{color:#ffd98a}
body.draft{padding-bottom:44px}

/* ---------- reveal on scroll ---------- */
html.js-reveal .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
html.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-reveal .reveal{opacity:1; transform:none; transition:none}
  .unit{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .enq-grid{grid-template-columns:1fr; gap:44px}
  .unit-row{grid-template-columns:1fr}
  .unit-row:nth-child(even) .unit-row-img{order:0}
  .unit-row-img{min-height:260px}
  .unit-row-body{padding:30px}
}
@media (max-width:820px){
  .trust .wrap{grid-template-columns:1fr 1fr; gap:26px 10px}
}
@media (max-width:700px){
  section{padding:62px 0}
  .hero{padding:88px 0 76px}
  nav{
    display:none; position:absolute; top:74px; left:0; right:0; background:var(--card);
    flex-direction:column; gap:0; padding:10px 0; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m)
  }
  nav.open{display:flex}
  nav a{padding:14px 26px; width:100%; border-radius:0; text-align:left}
  nav a.nav-cta{margin:8px 26px; width:auto; text-align:center; border-radius:999px}
  .nav-toggle{display:block}
  .row2{grid-template-columns:1fr}
  .mapwrap iframe{height:340px}
}