/* Amina Boutique Hotel
   Skin: their house (powder blue, broekie yellow), their rooms (yellow+green, pistachio+vanilla, orange, blue, natural).
   17 Oct (Gal's notes via Zman): Gal's own type from the old site. Titles = Fino (TypeTogether, paid; until it is licensed
   its free twin Noto Serif Display condensed stands in: swap the src below and nothing else changes), in capitals, with
   words played in Gal's blue and each room's own colour. Every line that is read = Spectral, Gal's body font.
   One light ground walks the colours from the top of every page to white at the bottom: no dark bands, no hard cuts,
   every photograph melts into the ground. */

@font-face{font-family:"Amina Display";src:url("../fonts/NotoSerifDisplay-var-latin.woff2?v=1") format("woff2");font-weight:100 900;font-stretch:62.5% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-400-latin.woff2?v=1") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-400i-latin.woff2?v=1") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-500-latin.woff2?v=1") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-600-latin.woff2?v=1") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-700-latin.woff2?v=1") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#16213a; --ink-2:#22304f; --ink-soft:#4f5873;
  --cream:#fbf5ea; --cream-2:#f4ead6; --paper:#fdfbf7;
  /* Gal's blue off the old site (#4ba1a8, a shade deeper so it reads on the pastels), the same for small labels, his bright aqua (photographs only) */
  --blue:#3a8f97; --blue-k:#2f8189; --aqua:#53f0ec;
  /* each room's own colour, deep enough to read as a word on its own ground */
  --w1:#6a8f2e; --w2:#5a9236; --w3:#dd5410; --w4:#3f6fb8; --w5:#94703a; --wp:#c93a6b;
  --powder:#b9dbed; --broekie:#f0c24b; --logo:#76c1d6; --pink:#dc477a;
  --glow:#ffd38a;
  --r1:#fbeaa5; --r1a:#8fae4f; --r1b:#f5cf4a;
  --r2:#e0efcb; --r2a:#9ccb6d; --r2b:#f6eed5;
  --r3:#fbd6b8; --r3a:#ff7a30; --r3b:#f2c6ac;
  --r4:#d5e3f5; --r4a:#7fa3d6; --r4b:#c4d9f1;
  --r5:#eee2c8; --r5a:#c9a874; --r5b:#e6d4b4;
  --ground:251 241 220; --lamp:255 211 138; --lamp-x:72%; --lamp-y:30%; --lamp-a:.0;
  --display:"Amina Display",Georgia,"Times New Roman",serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
  --gutter:clamp(20px,4.4vw,64px);
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
html.lenis,html.lenis body{height:auto}
body{margin:0;font-family:var(--text);font-size:18px;line-height:1.62;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:350;font-stretch:62.5%;text-transform:uppercase;letter-spacing:.008em;line-height:1.02;margin:0;text-wrap:balance}
h1.display{font-size:clamp(46px,6.6vw,104px)}
h2.display{font-size:clamp(42px,5.6vw,84px)}
h3.display{font-size:clamp(34px,3.6vw,54px);line-height:1.02}
/* Gal's colour play: words in his blue, or in the room's own colour */
.display em{font-style:normal;color:var(--blue)}
.blue{color:var(--blue)} .w1{color:var(--w1)} .w2{color:var(--w2)} .w3{color:var(--w3)} .w4{color:var(--w4)} .w5{color:var(--w5)} .wp{color:var(--wp)}
.display em.w1,.display em.w2,.display em.w3,.display em.w4,.display em.w5,.display em.wp{color:var(--wc)} .w1{--wc:var(--w1)} .w2{--wc:var(--w2)} .w3{--wc:var(--w3)} .w4{--wc:var(--w4)} .w5{--wc:var(--w5)} .wp{--wc:var(--wp)}
/* everything else set in the display face takes the same capitals */
.three li > b,.menu a:not(.btn),.space figcaption b,.award p b,.press blockquote,.name blockquote,.guide__title,.post__body h2,.pin__label{font-stretch:62.5%;font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.kicker{font-family:var(--text);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px;color:var(--blue-k)}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.55;font-weight:400;margin:0;max-width:34em}
.copy p{margin:0 0 1em;max-width:36em}
.copy p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--cream);font-family:var(--text);font-weight:600;font-size:16px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(22,33,58,.55)}
.btn svg{flex:none}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--glow{background:var(--broekie);color:var(--ink)}
.btn--glow:hover{background:#f6cf62}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--sm{min-height:42px;padding:0 20px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:900;display:flex;align-items:center;gap:28px;padding:18px var(--gutter);color:var(--ink);transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease)}
/* round 4: no veil behind the menu, the photo/film shows clean (Zman 17 Oct) */
.nav::before{content:none}
.nav.is-solid{background:rgb(var(--ground) / .95);color:var(--ink);padding-top:12px;padding-bottom:12px;box-shadow:0 12px 30px -24px rgba(22,33,58,.4)}
.nav.is-solid::before{opacity:0}
.nav__brand{display:block;flex:none;line-height:0}
.nav__brand img{height:40px;width:auto;transition:height .45s var(--ease)}
.nav.is-solid .nav__brand img{height:34px}
.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{font-weight:500;font-size:17px;text-decoration:none;opacity:.94;transition:opacity .3s,color .3s}
.nav__links a:hover,.nav__links a[aria-current]{opacity:1;color:var(--blue)}
.nav__cta{margin-left:6px}
.nav__burger{display:none;margin-left:auto;width:48px;height:48px;border:0;background:transparent;position:relative;z-index:2}
.nav__burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.nav__burger span:nth-child(1){top:17px}.nav__burger span:nth-child(2){top:23px}.nav__burger span:nth-child(3){top:29px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:880;background:rgb(var(--ground));color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:100px var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
body.menu-open .menu{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
body.menu-open .nav{z-index:950;background:transparent;box-shadow:none;color:var(--ink)}
.menu a[aria-current]:not(.btn){color:var(--blue)}
body.menu-open .nav::before{opacity:0}
.menu a:not(.btn){font-family:var(--display);font-size:clamp(34px,9vw,52px);line-height:1.2;text-decoration:none}
.menu .btn{align-self:flex-start;margin-top:26px}
.menu__contact{margin-top:28px;font-size:16px;color:var(--ink-soft)}

/* ---------- hero: their own house tour, full screen ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--paper);color:var(--ink);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;transform-origin:50% 46%}
.hero__still,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__video{opacity:0;transition:opacity 1s var(--ease)}
.hero__video.is-on{opacity:1}
/* round 4: the film shows clean, no shade under the words; only its last 40px melts into the page's own ground (no cut) */
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(0deg,rgb(var(--ground)) 0,rgb(var(--ground) / .55) 14px,rgb(var(--ground) / 0) 40px)}
.hero__content{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 var(--gutter) calc(11svh + 8px)}
.hero__inner{max-width:var(--max);margin:0 auto}
.hero__eyebrow{font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-k);margin:0 0 18px}
.hero h1{font-size:clamp(50px,5.6vw,92px);max-width:9.6em}
.hero__copy{max-width:min(640px,46vw)}
.hero__sub{font-size:clamp(18px,1.45vw,21px);font-weight:500;line-height:1.5;max-width:31em;margin:20px 0 0;color:var(--ink-soft)}
.hero .bookbar{margin-top:34px;width:min(600px,calc(100vw - 2 * var(--gutter)));max-width:none}
.hero__walk{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(14px,3vh,30px);display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:15px;letter-spacing:.06em;padding:10px 0}
.hero__walk svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* "Welcome to Amina": the first visit opens on a light card (decided inline in <head>), then it melts into the film */
.welcome{position:fixed;inset:0;z-index:960;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);
  background:radial-gradient(70vmax 52vmax at 50% 46%,#fff4dc 0%,#fdf8ee 46%,var(--paper) 100%);color:var(--ink);opacity:0;visibility:hidden;pointer-events:none}
.welcome__words{margin:0;font-family:var(--display);font-weight:350;font-stretch:62.5%;text-transform:uppercase;letter-spacing:.01em;line-height:.98;font-size:clamp(58px,9.4vw,150px)}
.welcome__words em{font-style:normal;color:var(--blue)}
.welcome__line{margin:26px 0 0;font-size:clamp(14px,1.1vw,16px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-k)}
.hero__eyebrow span::before,.welcome__line span::before{content:"·";margin:0 .7em 0 .42em}
.hero__eyebrow span,.welcome__line span{white-space:nowrap}
.welcome__words,.welcome__line{opacity:0;transform:translateY(18px)}
.intro-on .welcome{opacity:1;visibility:visible;pointer-events:auto;animation:welcomeSafety .9s 7s forwards}
.intro-on .welcome__words{animation:welcomeIn 1.5s .2s var(--ease) forwards}
.intro-on .welcome__line{animation:welcomeIn 1.5s .75s var(--ease) forwards}
@keyframes welcomeIn{to{opacity:1;transform:none}}
@keyframes welcomeSafety{to{opacity:0;visibility:hidden}}
.welcome.is-out{opacity:0!important;visibility:hidden!important;pointer-events:none;transition:opacity 1.2s var(--ease),visibility 0s 1.2s}
.welcome.is-out.is-fast{transition:opacity .5s var(--ease),visibility 0s .5s}
/* while the card is up the welcome copy waits, then it rises as the card melts away */
.intro-on .hero [data-stage]{opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.intro-on .hero [data-stage]:not(.is-in){animation:stageSafety 1s 7.2s forwards}
.intro-on .hero [data-stage].is-in{opacity:1;transform:none}
@keyframes stageSafety{to{opacity:1;transform:none}}
.intro-on .hero__walk{opacity:0;pointer-events:none}

/* walk-in: the light blooms and you are inside */
.bloom{position:fixed;inset:0;z-index:850;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--bx,50%) var(--by,50%),#fff4dc 0%,#ffe9bd 14%,#fbf1dc 46%,#fbf1dc 100%)}

/* ---------- booking bar ---------- */
.bookbar{display:flex;align-items:stretch;gap:0;background:rgba(255,255,255,.97);color:var(--ink);border-radius:18px;padding:8px;max-width:600px;box-shadow:0 24px 56px -30px rgba(22,33,58,.55),inset 0 0 0 1px rgba(22,33,58,.06)}
.bookbar__field{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:6px 16px;border-radius:12px;position:relative;cursor:pointer}
.bookbar__field+.bookbar__field::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgba(22,33,58,.14)}
.bookbar__field:hover{background:rgba(22,33,58,.05)}
.bookbar label{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.bookbar input[type=date]{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-family:var(--text);font-size:17px;font-weight:600;color:var(--ink);padding:2px 0 0;margin:0;width:100%;min-height:28px;cursor:pointer}
.bookbar input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.bookbar input[type=date]::-webkit-date-and-time-value{text-align:left}
.bookbar__go{flex:none;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding-left:8px}
.bookbar__go .btn{min-height:56px;border-radius:12px;padding:0 22px}
.bookbar__note{font-size:14.5px;font-weight:500;margin:12px 0 0;color:var(--ink-soft)}
.bookbar__note b{color:var(--ink)}
.on-light .bookbar__note{color:var(--ink-soft);text-shadow:none}
.on-light .bookbar__note b{color:var(--ink)}
.bookbar__nights{font-size:13px;font-weight:500;color:var(--ink-soft);text-align:center}

/* ---------- painted sections (the room colour walk) ---------- */
.paint{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(90vmax 70vmax at var(--lamp-x) var(--lamp-y),rgb(var(--lamp) / var(--lamp-a)) 0%,rgb(var(--lamp) / 0) 62%),
  rgb(var(--ground))}
html.paint-on{background:rgb(var(--ground))}
html.paint-on body{background:transparent}
.paint-on [data-ground]{background:transparent!important}
[data-ground]{position:relative}

.band{padding:clamp(60px,8.5vh,96px) 0}

/* the name */
.name{background:#fbf1dc;padding:clamp(96px,13vh,140px) 0 clamp(56px,8vh,90px)}
.name__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.name h2{font-size:clamp(52px,8.2vw,124px);line-height:.98}
.name h2 em{font-style:normal;display:block;color:var(--blue)}
.name__words{display:flex;flex-wrap:wrap;gap:14px 34px;margin:34px 0 30px}
.name__word{display:flex;flex-direction:column;gap:2px}
.name__word b{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1.15;color:var(--ink);text-transform:none}
.name__word span{font-size:15px;font-weight:500;color:var(--ink-soft)}
.name__photo{position:relative;border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 80px -50px rgba(22,33,58,.55)}
.name__photo img{width:100%;height:100%;object-fit:cover}
.name blockquote{margin:28px 0 0;padding:0;font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.3;max-width:24em}
.name blockquote cite{display:block;margin-top:10px;font-family:var(--text);font-style:normal;font-size:15px;font-weight:500;color:var(--ink-soft)}

/* the house in three lines */
.house{background:#f7efe0}
.house__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.three{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:30px}
.three li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline}
.three li > b{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.2vw,46px);line-height:1.05;grid-column:2}
.three li > i{font-style:normal;font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--blue-k);grid-row:1;grid-column:1;transform:translateY(-6px)}
.three li > span{grid-column:2;margin-top:8px;font-size:17px;color:var(--ink-soft);max-width:30em}
/* round 4: three photos of the house itself, one wide on top, two below */
.house__photos{position:relative;aspect-ratio:1/1.02;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr;gap:14px}
.house__photos figure{position:relative;margin:0;overflow:hidden;border-radius:16px;box-shadow:0 40px 70px -46px rgba(22,33,58,.6);min-width:0;min-height:0}
.house__photos figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.house__photos .p1{grid-column:1 / -1}
.house__photos .p1 img{object-position:50% 12%}
.house__photos .p2 img{object-position:50% 42%}
.house__photos .p3 img{object-position:72% 50%}

/* rooms walk */
.walk-head{padding:clamp(60px,8.5vh,96px) 0 0}
.walk-head .lede{margin-top:20px}
.room{padding:clamp(56px,8vh,96px) 0}
.room__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,5vw,84px);align-items:center}
.room:nth-child(even) .room__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.room:nth-child(even) .room__media{order:2}
.room__media{position:relative}
.room__main{border-radius:18px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 50px 90px -56px rgba(22,33,58,.65)}
.room__main img{width:100%;height:100%;object-fit:cover}
.room__second{position:absolute;width:31%;aspect-ratio:3/4;right:-7%;bottom:-16%;border-radius:14px;overflow:hidden;border:7px solid rgba(255,255,255,.75);box-shadow:0 30px 60px -36px rgba(22,33,58,.6)}
.room:nth-child(even) .room__second{right:auto;left:-7%}
.room__second img{width:100%;height:100%;object-fit:cover}
.room__num{font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-k);margin:0 0 14px}
.swatches{display:flex;gap:10px;align-items:center;margin:20px 0 22px;font-size:15px;font-weight:600;color:var(--ink-soft)}
.swatches i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,33,58,.15)}
.swatches span{margin-left:6px}
.room__story{font-size:clamp(19px,1.45vw,21px);font-weight:400;line-height:1.55;margin:0 0 18px;max-width:28em}
.facts{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.facts li{font-size:15px;font-weight:500;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(22,33,58,.1)}
.room__ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

/* evenings: the pastel sunset ground, their photograph framed beside the words */
.evening{position:relative;padding:clamp(64px,9vh,104px) 0;background:#f8e2de}
.evening__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(36px,6vw,100px);align-items:center}
.evening .lede{margin-top:20px}
.evening__frame{margin:0;justify-self:center;width:100%;max-width:520px;aspect-ratio:1439/1919;border-radius:220px 220px 20px 20px;overflow:hidden;box-shadow:0 50px 100px -56px rgba(120,60,70,.6)}
.evening__frame img{width:100%;height:100%;object-fit:cover}

/* around the house, proof, Bo-Kaap, the door: light grounds of their own (the old dark run) */
.spaces{padding:clamp(64px,9vh,100px) 0 clamp(36px,5vh,60px)}
.spaces__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.space{margin:0}
.space__img{border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.space__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.space:hover .space__img img{transform:scale(1.04)}
.space figcaption{margin-top:16px}
.space figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05}
.space figcaption span{font-size:16px;color:var(--ink-soft)}

.proof{padding:clamp(36px,5vh,60px) 0}
.proof__top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.award{display:flex;gap:24px;align-items:center}
.award__score{flex:none;width:132px;height:132px;border-radius:22px 22px 22px 6px;background:#0f3d8f;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.award__score b{font-family:var(--text);font-weight:700;font-size:54px;line-height:1}
.award__score span{font-size:13px;font-weight:700;margin-top:6px}
.award p{margin:0;font-size:17px;line-height:1.45;color:var(--ink-soft)}
.award p b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,2.8vw,40px);line-height:1.04;color:var(--ink);margin-bottom:6px}
.press{display:grid;gap:26px}
.press blockquote{margin:0;font-family:var(--display);font-size:clamp(28px,2.7vw,40px);line-height:1.08;color:var(--blue)}
.press cite{display:block;margin-top:10px;font-family:var(--text);font-style:normal;font-weight:500;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(50px,8vh,80px)}
.review{margin:0;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(22,33,58,.07);border-radius:18px;padding:28px 28px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.review p{margin:0;font-size:18px;line-height:1.55;color:var(--ink)}
.review footer{font-size:14.5px;color:var(--ink-soft)}
.review footer b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.stars{color:#e0a91a;letter-spacing:.14em;font-size:15px}

.bokaap{padding:clamp(36px,5vh,60px) 0 clamp(64px,9vh,100px)}
.bokaap__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,5vw,84px);align-items:center}
.bokaap__photo{border-radius:18px;overflow:hidden;aspect-ratio:3/2}
.bokaap__photo img{width:100%;height:100%;object-fit:cover}
.near{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.near li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:18px;color:var(--ink)}
.near li svg{margin-top:5px;color:var(--blue)}

.night{position:relative;padding:clamp(70px,10vh,120px) 0;background:#fff3de;overflow:hidden}
.night__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,6vw,100px);align-items:center}
.night__door{position:relative;margin:0;justify-self:center;width:100%;max-width:440px;aspect-ratio:1439/1799;border-radius:220px 220px 20px 20px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(120,80,30,.65)}
.night__door img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.night__content{position:relative;z-index:1}
.night h2{max-width:13em}
.night h2 span{display:block}
.night .lede{margin:20px 0 0;color:var(--ink-soft)}
.night .bookbar{margin-top:34px}
.night .bookbar__note,.on-light .bookbar__note{color:var(--ink-soft);text-shadow:none}
.night .bookbar__note b,.on-light .bookbar__note b{color:var(--ink)}
.night .bookbar__note a{color:var(--blue-k)}

/* ---------- footer ---------- */
.foot{background:#fff;color:var(--ink-soft);padding:clamp(56px,7.5vh,84px) 0 40px;font-size:17px}
.foot__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.foot__logo img{height:46px;width:auto}
.foot h4,.foot__h{font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-k);margin:0 0 16px}
.foot p{margin:0 0 10px}
.foot a{text-decoration:none;color:var(--ink)}
.foot a:hover{color:var(--blue)}
.foot__social{display:flex;gap:12px;margin-top:22px}
.foot__social a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(22,33,58,.06);transition:background .3s}
.foot__social a:hover{background:rgba(58,143,151,.16)}
.foot__base{margin-top:60px;padding-top:24px;border-top:1px solid rgba(22,33,58,.1);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-size:15px;color:var(--ink-soft)}

/* ---------- phone sticky book ---------- */
.stickybook{position:fixed;z-index:800;left:12px;right:12px;bottom:12px;display:none;transform:translateY(130%);transition:transform .5s var(--ease)}
.stickybook.is-on{transform:none}
.stickybook .btn{width:100%;min-height:56px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}

/* ---------- rooms page ---------- */
.page-hero{position:relative;min-height:82vh;min-height:82svh;display:flex;align-items:flex-end;color:var(--ink);background:var(--paper);overflow:hidden}
.page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(0deg,rgb(var(--ground)) 0,rgb(var(--ground) / .55) 14px,rgb(var(--ground) / 0) 40px)}
.page-hero__content{position:relative;z-index:1;width:100%;padding-top:140px;padding-bottom:calc(11svh + 8px)}
.page-hero__content:has(.room-index){padding-bottom:clamp(20px,3vh,32px)}
.page-hero .hero__eyebrow{color:var(--blue-k)}
.page-hero h1{max-width:7.4em}
.page-hero .lede{margin-top:18px;color:var(--ink-soft)}
.page-hero .bookbar{margin-top:30px}
.room-index{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.room-index{margin-top:clamp(40px,7vh,72px)!important}
.room-index a{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 10px 26px -18px rgba(22,33,58,.6);font-weight:500;font-size:15px;text-decoration:none;color:var(--ink);transition:background .3s}
.room-index a:hover{background:#fff}
.room-index a i{width:20px;height:20px;border-radius:50%}
.suite{padding:clamp(56px,8vh,96px) 0;scroll-margin-top:70px}
.suite__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:40px}
.suite__gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;aspect-ratio:2.1/1}
.suite__gallery button{border:0;padding:0;margin:0;border-radius:14px;overflow:hidden;background:rgba(22,33,58,.08);min-width:0;min-height:0}
.suite__gallery button img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.suite__gallery button:hover img{transform:scale(1.04)}
.suite__gallery button:first-child{grid-row:1/3}
.suite__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);margin-top:40px;align-items:start}
.inroom{padding:clamp(60px,8.5vh,96px) 0}
.inroom ul{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 30px}
.inroom li{display:flex;gap:12px;align-items:center;font-size:18px;color:var(--ink)}
.inroom li svg{flex:none;color:var(--blue)}


/* rooms page hero: the five rooms side by side */
.strips{position:absolute;inset:0;display:flex}
.strips figure{flex:1 1 0;margin:0;position:relative;overflow:hidden;transition:flex-grow .9s var(--ease)}
.strips figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strips figure:hover{flex-grow:1.6}
.strips figure+figure{box-shadow:-1px 0 0 rgba(255,255,255,.18)}


/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,12,22,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.lightbox.is-on{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.lightbox img{max-width:min(92vw,1600px);max-height:86vh;border-radius:8px;object-fit:contain}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lightbox__close{top:20px;right:20px}
.lightbox__prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:20px;top:50%;transform:translateY(-50%)}

/* 404 */
.lost{min-height:100vh;display:flex;align-items:center;background:#fbf1dc;color:var(--ink)}

/* ---------- reveals (JS only) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav__links{gap:22px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero__copy{max-width:none}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .name__grid,.house__grid,.room__grid,.room:nth-child(even) .room__grid,.bokaap__grid,.proof__top,.suite__head,.suite__body{grid-template-columns:1fr}
  .room:nth-child(even) .room__media{order:0}
  .room__second,.room:nth-child(even) .room__second{right:3%;left:auto;bottom:-9%}
  .name__photo{max-width:420px;aspect-ratio:4/4.4}
  .house__photos{max-width:560px;width:100%}
  .room__second{width:34%;bottom:-10%}
  .spaces__grid{grid-template-columns:1fr;gap:34px}
  .evening__grid,.night__grid{grid-template-columns:1fr}
  .evening__frame{max-width:380px;justify-self:start}
  .night__door{max-width:320px;justify-self:start}
  .night::before{left:30%!important;top:34%!important}
  .space__img{aspect-ratio:4/3}
  .reviews{grid-template-columns:1fr}
  .inroom ul{grid-template-columns:1fr 1fr}
  .stickybook{display:block}
  .foot{padding-bottom:110px}
  .hero__walk{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{padding-top:12px;padding-bottom:12px}
  .nav__brand img{height:32px}
  .nav.is-solid .nav__brand img{height:30px}
  .hero__scrim,.page-hero::after{background:none}
  .hero__content,.page-hero__content,.page-hero__content:has(.room-index){padding-top:62px;padding-bottom:22px;background:linear-gradient(0deg,rgb(var(--ground)) 0%,rgb(var(--ground)) calc(100% - 62px),rgb(var(--ground) / .55) calc(100% - 36px),rgb(var(--ground) / 0) calc(100% - 22px))}

  .hero h1{font-size:clamp(40px,11.4vw,52px)}
  .hero__sub{font-size:16px;margin-top:14px}
  .hero .bookbar{margin-top:22px}
  .bookbar,.hero .bookbar{flex-wrap:wrap;max-width:none;width:auto;border-radius:16px;padding:6px}
  .bookbar__field{flex:1 1 40%;padding:8px 12px}
  .bookbar__go{flex:1 1 100%;padding:6px 0 0}
  .bookbar__go .btn{width:100%;min-height:52px}
  .bookbar__note{font-size:12.5px;margin-top:10px}
  .three li > b{font-size:30px}
  .room__second{display:none}
  .suite__gallery{grid-template-columns:1fr 1fr;grid-template-rows:none;aspect-ratio:auto}
  .suite__gallery button{aspect-ratio:4/3}
  .suite__gallery button:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:3/2}
  .inroom ul{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .award{flex-direction:column;align-items:flex-start}
  .page-hero{min-height:88svh}
  .welcome__words{font-size:clamp(54px,17vw,86px)}
  .welcome__line{font-size:13px;letter-spacing:.18em;line-height:1.9}
  .hero__eyebrow,.page-hero .hero__eyebrow{font-size:12.5px;letter-spacing:.16em}
  .hero__eyebrow span,.welcome__line span{display:block}
  .hero__eyebrow span::before,.welcome__line span::before{content:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__walk svg{animation:none}
  .js [data-reveal]{opacity:1;transform:none}
  .space__img img,.suite__gallery button img{transition:none}
}

/* =====================================================================
   PHASE 2 · The House, Bo-Kaap, the guides, Gallery, Contact
   ===================================================================== */
.skip{position:fixed;left:12px;top:-60px;z-index:2000;background:var(--broekie);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.foot__h{margin:0 0 16px}

/* inner-page hero: one real photograph (the rooms page keeps its five strips) */
.page-hero__img{transform-origin:50% 60%}

/* the story: text beside a photograph */
.story__grid,.duo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5.5vw,90px);align-items:center}
.story .copy,.duo .copy{margin-top:22px}
.story__photo,.duo__photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 40px 80px -50px rgba(22,33,58,.55)}
.story__photo img,.duo__photo img{width:100%;height:100%;object-fit:cover}
.duo__photo--tall{aspect-ratio:4/5;max-width:460px;justify-self:center;width:100%}
.duo--flip .duo__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* the five shared spaces: the same colour walk as the rooms, two photos each */
.sp{padding:clamp(56px,8vh,96px) 0}
.sp__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,84px);align-items:center}
.sp:nth-child(even) .sp__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sp:nth-child(even) .sp__media{order:2}
.sp__media{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:16px;align-items:start}
.sp__media figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(22,33,58,.6)}
.sp__a{aspect-ratio:4/5}
.sp__b{aspect-ratio:3/4;margin-top:22%!important;border:7px solid rgba(255,255,255,.7)!important}
.sp__media img{width:100%;height:100%;object-fit:cover}

/* amina means safe */
.safe{padding:clamp(64px,9vh,104px) 0 clamp(20px,3vh,36px)}
.safe__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(36px,5.5vw,90px);align-items:center}
.safe__photo{margin:0;border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:4/5;max-width:400px}
.safe__photo img{width:100%;height:100%;object-fit:cover}
.safe .lede{margin-top:20px}
.near a{color:var(--blue-k);text-decoration:none;font-weight:600}
.safe + .inroom{padding-top:clamp(36px,5vh,60px)}

/* compact page header (guides, gallery) */
.page-head{padding:clamp(120px,17vh,170px) 0 clamp(28px,4vh,44px)}
.page-head .lede{margin-top:18px}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:15px;font-weight:500;color:var(--ink-soft);margin:0 0 22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* near the house: the distance list */
.dist{padding:clamp(64px,9vh,104px) 0 clamp(20px,3vh,36px)}
.dist .lede{margin-top:18px}
.dist__list{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:d}
.dist__list li{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline;padding:16px 0;box-shadow:inset 0 -1px 0 rgba(22,33,58,.1)}
.dist__list b{font-weight:500;font-size:18px;color:var(--ink)}
.dist__list span{font-weight:600;font-size:16px;color:var(--blue-k);white-space:nowrap}
.dist__list small{grid-column:1/-1;font-size:15px;color:var(--ink-soft)}
.dist__note{margin:26px 0 0;font-size:16px;color:var(--ink-soft)}

/* guide cards */
.guides{padding:clamp(40px,6vh,72px) 0 clamp(64px,9vh,104px)}
.guides--near{padding-top:clamp(56px,8vh,96px)}
.guides__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px;margin-bottom:34px}
.guides__head h2{font-size:clamp(32px,4vw,56px)}
.guides__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
.guide a{display:block;text-decoration:none;color:inherit}
.guide__img{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:rgba(22,33,58,.08)}
.guide__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.guide a:hover .guide__img img{transform:scale(1.04)}
.guide__meta{margin:16px 0 8px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--blue-k)}
.guide__title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(27px,2.3vw,33px);line-height:1.04;text-wrap:balance}
.guide__ex{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.guides__grid--all .guide--big{grid-column:1/-1;display:block}
.guides__grid--all .guide--big a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:center}
.guides__grid--all .guide--big .guide__title{font-size:clamp(36px,3.8vw,56px)}
.guides--more{padding-top:clamp(56px,8vh,96px)}

/* a guide (their post) */
.post__head{padding:clamp(120px,17vh,170px) 0 0}
.post__wrap{max-width:calc(760px + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.post__head h1{font-size:clamp(36px,4.6vw,64px);line-height:1.06}
.post__meta{margin:20px 0 0;font-size:16px;font-weight:500;color:var(--ink-soft)}
.post__lead{margin:clamp(30px,5vh,48px) auto 0;max-width:calc(1040px + 2*var(--gutter));padding:0 var(--gutter)}
.post__lead img{width:100%;border-radius:18px;aspect-ratio:16/9;object-fit:cover}
.post__body{max-width:calc(720px + 2*var(--gutter));margin:0 auto;padding:clamp(36px,5vh,56px) var(--gutter) clamp(40px,6vh,72px);font-size:18px;line-height:1.7}
.post__body p,.post__body ul,.post__body ol{margin:0 0 1.05em}
.post__body h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.04;margin:1.6em 0 .55em;text-wrap:balance;color:var(--blue)}
.post__body h3,.post__body h4{font-size:19px;line-height:1.35;font-weight:700;margin:1.5em 0 .45em}
.post__body ul,.post__body ol{padding-left:1.2em}
.post__body li{margin:0 0 .45em}
.post__body li p{margin:0}
.post__body a:not(.btn){color:var(--blue-k);text-decoration-thickness:1.5px;text-underline-offset:3px}
.post__body strong{font-weight:700}
.post__fig{margin:1.6em 0}
.post__fig img{width:100%;height:auto;border-radius:14px}
.post__back{margin-top:2.4em!important}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.filter{border:0;background:rgba(22,33,58,.07);color:var(--ink);border-radius:999px;padding:11px 18px;font-weight:600;font-size:15px;transition:background .3s,color .3s}
.filter:hover{background:rgba(22,33,58,.13)}
.filter.is-on{background:var(--blue);color:#fff}
.gallery-wrap{padding:clamp(20px,3vh,36px) 0 clamp(64px,9vh,104px)}
.gallery{columns:4 240px;column-gap:14px}
.gitem{display:block;width:100%;border:0;padding:0;margin:0 0 14px;border-radius:14px;overflow:hidden;background:rgba(22,33,58,.08);break-inside:avoid;cursor:zoom-in}
.gitem img{width:100%;height:auto;transition:transform 1s var(--ease),opacity .5s}
.gitem:hover img{transform:scale(1.04)}
.gitem[hidden]{display:none}
.lightbox__cap{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;width:min(90vw,760px);text-align:center;color:#dfe4ee;font-size:16px;line-height:1.45}
.lightbox img{touch-action:pan-y}

/* contact */
.contact{padding:clamp(120px,17vh,170px) 0 clamp(56px,8vh,96px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,5.5vw,90px);align-items:center}
.contact .lede{margin-top:18px}
.contact__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px}
.btn--wa{background:#1f7a52;color:#fff;min-height:58px;font-size:16px;padding:0 26px}
.btn--wa:hover{background:#1a6a47}
.contact__list{margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}
.contact__list dt{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.contact__list dd{margin:6px 0 0;font-size:18px;font-weight:400}
.contact__list a{text-decoration:none;border-bottom:1.5px solid rgba(22,33,58,.25)}
.contact__photo{margin:0;border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:4/5;max-width:420px;justify-self:end;width:100%;box-shadow:0 40px 80px -50px rgba(22,33,58,.55)}
.contact__photo img{width:100%;height:100%;object-fit:cover}
.findus{padding:clamp(56px,8vh,96px) 0 clamp(64px,9vh,104px)}
.findus__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px;margin-bottom:28px}
.map{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/8;background:#e3ebee;box-shadow:0 40px 80px -50px rgba(22,33,58,.6)}
.map__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map__live{position:absolute;inset:0;background:transparent}
.map .leaflet-container{background:transparent;font-family:var(--text)}
.map__note{margin:18px 0 0;font-size:16px;font-weight:500;color:var(--ink-soft)}
.pin{position:relative;width:0;height:0}
.pin__dot{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:#3d6f8c;box-shadow:0 0 0 5px var(--cream),0 0 40px 14px rgba(255,211,138,.75)}
.pin__label{position:absolute;left:20px;top:-17px;white-space:nowrap;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:24px;line-height:1;padding:7px 12px 6px;border-radius:10px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.leaflet-control-attribution{font-size:11px!important;background:rgba(251,245,234,.85)!important}

/* =====================================================================
   ALIVE · the light is on (one idea: the house's own lamp light lives quietly behind every page)
   ===================================================================== */
/* the lamp drifts and breathes on its own (compositor only), and on a desktop a second, softer lamp follows your hand */
.paint::before{content:"";position:absolute;inset:-12%;pointer-events:none;
  background:radial-gradient(60vmax 46vmax at var(--lamp-x) var(--lamp-y),rgb(var(--lamp) / calc(var(--lamp-a) * .45)) 0%,rgb(var(--lamp) / calc(var(--lamp-a) * .18)) 36%,rgb(var(--lamp) / 0) 66%);
  animation:lampDrift 46s ease-in-out infinite alternate,lampBreath 13s ease-in-out infinite;will-change:transform,opacity}
@keyframes lampDrift{0%{transform:translate3d(-2.6%,-1.6%,0)}33%{transform:translate3d(2.1%,1.9%,0)}66%{transform:translate3d(-1.2%,2.7%,0)}100%{transform:translate3d(2.9%,-2.1%,0)}}
@keyframes lampBreath{0%,100%{opacity:.7}50%{opacity:1}}
.hand-lamp{position:fixed;left:0;top:0;z-index:-1;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgb(var(--lamp) / calc(var(--lamp-a) * .42)) 0%,rgb(var(--lamp) / calc(var(--lamp-a) * .16)) 34%,rgb(var(--lamp) / 0) 68%);opacity:0;transition:opacity 1.6s var(--ease);will-change:transform}
html.hand-on .hand-lamp{opacity:1}
/* photographs breathe: a slow sub-pixel push while they are on screen */
[data-breathe]{overflow:hidden}
[data-breathe] img{transform:scale(1.001);transition:transform 14s cubic-bezier(.37,0,.63,1);will-change:transform}
[data-breathe].is-breathing img{transform:scale(1.045)}
/* the door light at night glows softly, waiting */
.night::before{content:"";position:absolute;z-index:0;left:23%;top:50%;width:min(64vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,190,90,.42) 0%,rgba(255,200,110,.16) 36%,rgba(255,206,120,0) 66%);opacity:.55;animation:doorGlow 7s ease-in-out infinite}
@keyframes doorGlow{0%,100%{opacity:.45}50%{opacity:.9}}

/* ---------- phase 2 responsive ---------- */
@media (max-width:1080px){
  .guides__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__list{grid-template-columns:1fr}
}
@media (max-width:900px){
  .story__grid,.duo__grid,.duo--flip .duo__grid,.sp__grid,.sp:nth-child(even) .sp__grid,.safe__grid,.contact__grid{grid-template-columns:1fr}
  .sp:nth-child(even) .sp__media{order:0}
  .duo--flip .duo__photo{order:2}
  .safe__photo{max-width:320px}
  .contact__photo{justify-self:start;max-width:340px}
  .guides__grid--all .guide--big a{grid-template-columns:1fr;gap:0}
  .dist__list{grid-template-columns:1fr}
  .map{aspect-ratio:4/3.4}
}
@media (max-width:640px){
  /* air between groups, tight between sections: one section pad on a phone */
  .band,.room,.suite,.sp,.inroom,.walk-head,.spaces,.safe,.dist,.findus,.guides--more{padding-top:38px;padding-bottom:38px}
  .walk-head{padding-bottom:0}
  .name{padding:72px 0 44px}
  .proof,.bokaap{padding-top:24px;padding-bottom:24px}
  .bokaap{padding-bottom:56px}
  .guides{padding:24px 0 56px}
  .gallery-wrap{padding:16px 0 56px}
  .page-head,.post__head{padding-top:104px}
  .contact{padding:104px 0 44px}
  .night--short{padding:72px 0}
  .room-index{display:none}
  .guides__grid{grid-template-columns:1fr;gap:30px}
  .gallery{columns:2 140px;column-gap:10px}
  .gitem{margin-bottom:10px;border-radius:10px}
  .sp__media{gap:10px}
  .post__body{font-size:17px}
  .lightbox__cap{bottom:84px;font-size:14px}
  .lightbox__prev,.lightbox__next{top:auto!important;bottom:18px;transform:none!important}
  .btn--wa{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .paint::before{animation:none}
  .hand-lamp{display:none}
  [data-breathe] img,[data-breathe].is-breathing img{transform:none;transition:none}
  .night::before{animation:none;opacity:.6}
  .guide__img img,.gitem img{transition:none}
}
.more-link{margin:28px 0 0}
.spaces .guides__head{margin-bottom:0}
/* pages that open on paper, not a photograph: the nav is solid ink from the top */
.nav-solid .nav{background:rgb(var(--ground) / .95);color:var(--ink);padding-top:12px;padding-bottom:12px;box-shadow:0 12px 30px -24px rgba(22,33,58,.4)}
.nav-solid .nav__links a:hover,.nav-solid .nav__links a[aria-current]{color:var(--blue)}
.nav-solid .nav::before{opacity:0}
.nav-solid .nav__brand img{height:34px}
@media (max-width:640px){.nav-solid .nav__brand img{height:30px}}
/* inner-page heroes settle with the same slow push as the welcome frame */
.page-hero > .page-hero__img{animation:heroPush 20s cubic-bezier(.2,.55,.3,1) both}
@media (prefers-reduced-motion:reduce){.page-hero > .page-hero__img{animation:none}}
/* the gallery fills row by row once JS sizes each tile (columns fill top to bottom, so the first screen would show photos from the middle) */
.gallery.is-grid{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:4px;column-gap:14px;row-gap:0}
.gallery.is-grid .gitem{margin:0;align-self:start}
@media (max-width:1080px){.gallery.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.gallery.is-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}}

/* ---------- round 4 (17 Oct): clean heroes, the words on a solid card, the logo and menu on pills.
   18 Oct (round 5) Zman: the card blocked the photo and the logo "in a bubble" read weak: both replaced by the round 5 block below. */

/* round 4: their Instagram, after the five rooms. Their own posts only, static tiles we host, each opens its post */
.insta{position:relative}
.insta__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,44px)}
.insta__head .display{margin:0}
.insta__follow{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:16px;color:var(--ink)}
.insta__icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--blue-k);box-shadow:0 14px 30px -20px rgba(22,33,58,.55);transition:background .3s,color .3s}
.insta__follow:hover .insta__icon{background:var(--blue);color:#fff}
.insta__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.insta__grid a{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:14px;box-shadow:0 26px 50px -36px rgba(22,33,58,.6)}
.insta__grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.insta__grid a:hover img,.insta__grid a:focus-visible img{transform:scale(1.05)}
@media (max-width:1100px){.insta__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.insta__grid{gap:6px}.insta__grid a{border-radius:10px}.insta__follow{font-size:15px}}
@media (prefers-reduced-motion:reduce){.insta__grid img{transition:none}.insta__grid a:hover img{transform:none}}
/* round 4 spacing: Instagram hands straight on to Evenings */
.insta.band{padding-bottom:clamp(18px,2.6vh,30px)}
@media (max-width:640px){.insta.band{padding-bottom:12px}}

/* =====================================================================
   ROUND 5 (18 Oct, Zman's notes on round 4)
   1 the photo or film is never covered: no card on it. The words sit on the page's own colour UNDER the picture, like a caption.
   3 their logo out of its bubble: one solid bar in the page's colour holds their mark (one solid colour, bigger) and the menu.
   2 the jump buttons under a hero look and feel like buttons (a label that says the action, a frame, an arrow, hover + press).
   5 every word a little bolder (body 400 to 500, titles 350 to 420, no thinning on a Mac).
   6 one edge language from the house: the arch of its fanlight for single photographs, a small crisp corner on everything else.
   7 the house itself, straight after the name (the arch opens as you scroll, never pinned).
   ===================================================================== */
:root{--bar:84px;--bar-s:68px;--r-s:4px;--r-m:6px}

/* 5 · a little bolder */
body{font-weight:500;-webkit-font-smoothing:auto}
.display,.welcome__words{font-weight:420}
.three li > b,.menu a:not(.btn),.space figcaption b,.award p b,.press blockquote,.name blockquote,.guide__title,.post__body h2,.pin__label,.name__word b{font-weight:470}
.lede,.room__story,.contact__list dd{font-weight:500}

/* 3 · the bar: their mark, one colour, bigger, on the page's own ground; the menu as plain words. It never goes see-through. */
.nav,.nav-solid .nav{height:var(--bar);padding-top:0;padding-bottom:0;background:rgb(var(--ground));box-shadow:none;transition:height .45s var(--ease),box-shadow .45s var(--ease),background-color .3s linear}
.nav.is-solid,.nav-solid .nav.is-solid{height:var(--bar-s);padding-top:0;padding-bottom:0;background:rgb(var(--ground));box-shadow:0 12px 30px -24px rgba(22,33,58,.4)}
.nav__brand img,.nav-solid .nav__brand img{height:46px}
.nav.is-solid .nav__brand img,.nav-solid .nav.is-solid .nav__brand img{height:38px}
.nav__burger{background:none;box-shadow:none}
.nav__cta{border-radius:var(--r-s)}

/* 1 · home: the film in a clean frame under the bar, the words on the ground below it */
.hero{height:auto;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--bar) minmax(46svh,1fr) auto;background:transparent;overflow:hidden}
.hero__media{position:relative;inset:auto;grid-area:2/1;min-height:0}
.hero__scrim{position:relative;inset:auto;grid-area:2/1}
.hero__content{position:relative;grid-area:3/1;left:auto;right:auto;bottom:auto;padding:clamp(20px,3.2vh,36px) var(--gutter) clamp(24px,3.8vh,42px)}
.hero__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4.5vw,80px);row-gap:12px;align-items:start;max-width:var(--max);margin:0 auto}
.hero__eyebrow{grid-area:1/1;margin:0;align-self:center}
.hero__walk{position:static;grid-area:1/2;justify-self:end;align-self:center;background:none;box-shadow:none;border-radius:0;padding:4px 0;color:var(--ink);transition:color .3s}
.hero__walk:hover{color:var(--blue-k)}
.hero__copy,.page-hero .hero__copy{grid-area:2/1;background:none;box-shadow:none;border-radius:0;padding:0;width:auto;max-width:none}
.hero__aside{grid-area:2/2;width:min(560px,40vw)}
.hero h1{font-size:clamp(40px,3.5vw,66px);line-height:1;max-width:none}
.hero__sub{margin:0 0 18px;font-size:clamp(17px,1.15vw,19px);max-width:none}
.hero .bookbar,.page-hero .bookbar{margin-top:0;width:100%;max-width:none}
.hero .bookbar__note,.page-hero .bookbar__note{margin-bottom:0}

/* 1 · inner pages: the same caption under a clean photograph */
.page-hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--bar) minmax(44svh,1fr) auto;align-items:stretch;background:transparent}
/* an absolutely placed grid child takes its grid AREA as the box: the photo fills row 2 and never sizes it
   (its end lines must be named: for an absolute child an open end means "to the container's edge") */
.page-hero > .page-hero__img,.page-hero > .strips,.page-hero::after{position:absolute;grid-area:2/1/3/2;inset:0;width:100%;height:100%}
.page-hero > .page-hero__img{animation:none}
.page-hero::after{z-index:1}
.page-hero > .page-hero__content{grid-area:3/1;z-index:2;padding-top:clamp(20px,3.2vh,36px);padding-bottom:clamp(24px,3.8vh,42px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4.5vw,80px);row-gap:12px;align-items:start}
.page-hero .hero__eyebrow{grid-area:1/1/2/-1;margin:0}
.page-hero .hero__aside{grid-area:2/2}
.page-hero h1{font-size:clamp(40px,3.6vw,68px);line-height:1;max-width:none}
.page-hero .lede{margin-top:10px}
/* the colour word on the blue room's ground takes Gal's deeper blue so it still reads (3.5:1) */
.rooms-page .page-hero h1 em{color:var(--blue-k)}

/* 2 · the jump buttons: say the action, look like buttons */
.room-index{align-items:center;gap:10px}
.page-hero .room-index{grid-column:1/-1;margin-top:clamp(8px,1.4vh,14px)!important}
.room-index__label{flex-basis:100%;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-k)}
.room-index a{gap:10px;min-height:46px;padding:0 14px 0 13px;border-radius:var(--r-s);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(22,33,58,.18),0 12px 26px -20px rgba(22,33,58,.55);font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.room-index a i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(22,33,58,.14)}
.room-index a svg{flex:none;color:var(--blue-k);transition:transform .3s var(--ease)}
.room-index a:hover{background:color-mix(in srgb,var(--c) 24%,#fff);box-shadow:inset 0 0 0 1.5px var(--ink),0 16px 30px -20px rgba(22,33,58,.6);transform:translateY(-2px)}
.room-index a:hover svg{transform:translateY(3px)}
.room-index a:active{transform:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.room-index a:focus-visible{outline:2px solid var(--blue-k);outline-offset:3px}

/* 6 · edges: the fanlight arch for single photographs, a small crisp corner on everything else */
.btn,.bookbar__field,.bookbar__go .btn,.facts li,.filter,.skip,.pin__label{border-radius:var(--r-s)}
.bookbar,.house__photos figure,.room__main,.room__second,.space__img,.bokaap__photo,.suite__gallery button,.story__photo,.duo__photo,.sp__media figure,.guide__img,.post__lead img,.post__fig img,.gitem,.insta__grid a,.map,.review,.award__score,.lightbox img{border-radius:var(--r-m)}
.name__photo,.safe__photo,.contact__photo{border-radius:200px 200px var(--r-m) var(--r-m)}
.evening__frame,.night__door{border-radius:220px 220px var(--r-m) var(--r-m)}

/* 7 · the house itself: step back from the plaque and see it whole */
.arrive{position:relative;padding:clamp(8px,2vh,24px) 0 clamp(56px,8vh,96px)}
.arrive__head{text-align:center;margin-bottom:clamp(26px,4vh,44px)}
.arrive__head .display{font-size:clamp(40px,5vw,78px)}
.arrive__head .display em{display:block}
.arrive__stage{padding:0 var(--gutter)}
.arrive__arch{position:relative;margin:0 auto;height:min(86vh,calc((100vw - 2 * var(--gutter)) / 1.5));height:min(86svh,calc((100vw - 2 * var(--gutter)) / 1.5));overflow:hidden;
  clip-path:inset(0 round 50% 50% var(--r-m) var(--r-m) / 34% 34% var(--r-m) var(--r-m))}
.arrive__arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 42%;transform-origin:56% 62%;will-change:transform}

/* Small on purpose: the door and the pool (the garden front moved up into the arch, so no photo shows twice) */
.house .house__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.house__photos{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:16px;align-items:start}
.house__photos figure{aspect-ratio:3/4}
.house__photos .p3{margin-top:22%}
.house__photos .p2 img{object-position:50% 50%}
.house__photos .p3 img{object-position:44% 50%}

@media (max-width:1100px){
  .hero__inner,.page-hero > .page-hero__content{grid-template-columns:minmax(0,1fr)}
  .hero__walk{grid-area:1/1;justify-self:end}
  .hero__aside,.page-hero .hero__aside{grid-area:3/1;width:min(600px,100%);margin-top:10px}
  .page-hero .hero__eyebrow{grid-area:1/1}
}
@media (max-width:900px){.house .house__grid{grid-template-columns:1fr}}
@media (max-width:640px){
  :root{--bar:64px;--bar-s:60px}
  .nav__brand img,.nav-solid .nav__brand img{height:34px}
  .nav.is-solid .nav__brand img,.nav-solid .nav.is-solid .nav__brand img{height:30px}
  .hero{grid-template-rows:var(--bar) minmax(38svh,1fr) auto}
  .page-hero{min-height:88svh;grid-template-rows:var(--bar) minmax(40svh,1fr) auto}
  .hero__scrim,.page-hero::after{background:linear-gradient(0deg,rgb(var(--ground)) 0,rgb(var(--ground) / .55) 14px,rgb(var(--ground) / 0) 40px)}
  .hero__content,.page-hero > .page-hero__content{background:none;padding-top:18px;padding-bottom:24px}
  .hero h1,.page-hero h1{font-size:clamp(38px,10.4vw,48px)}
  .hero__sub{font-size:16px;margin-bottom:14px}
  .arrive__arch{height:auto;aspect-ratio:4/5}
  .arrive{padding-bottom:44px}
  .house__photos{gap:10px}
}
@media (prefers-reduced-motion:reduce){.room-index a,.room-index a svg{transition:none}.arrive__arch img{will-change:auto}}

/* =====================================================================
   ROUND 6 (18 Oct, Zman's notes on round 5)
   1 home only: the film fills the screen again; the words and the booking box stack in ONE column at the side, on a soft blur
     that hugs them (his pick over thin strips). No card, no tint over the rest of the film. Phone: the words on the film, the box
     just under it. The inner pages keep their words under the photo.
   2 Instagram stands out: the rest of the page fades a little while you are on it, a tile grows to its whole picture, and every
     own post drifts past slowly (phones: it just keeps drifting).
   3 "Socials" in the bar opens the four icons. 4 Reviews: a page of its own + a louder home block. 5 the bar holds every word.
   ===================================================================== */
.hero{height:100vh;height:100svh;min-height:640px;grid-template-rows:var(--bar) minmax(0,1fr)}
.hero__media,.hero__scrim{grid-area:2/1}
.hero__content{grid-area:2/1;align-self:end;z-index:3;padding:0 var(--gutter) var(--hero-pb)}
.hero{--hero-pb:clamp(24px,4.4vh,48px)}
.hero__inner{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:clamp(16px,2.2vh,22px);width:min(540px,100%);max-width:none;margin:0}
/* the blur: hugs the column, runs to the screen's left edge and the film's foot, melts away to the right and the top */
.hero__inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-64px;right:-150px;bottom:calc(-1 * var(--hero-pb));left:calc(-1 * var(--gutter));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgb(var(--ground) / .5);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 170px),transparent),linear-gradient(0deg,#000 calc(100% - 64px),transparent);
  -webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 calc(100% - 170px),transparent),linear-gradient(0deg,#000 calc(100% - 64px),transparent);mask-composite:intersect}
.hero__words{position:relative}
.hero__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px}
.hero__eyebrow{margin:0}
.hero__walk{position:static;grid-area:auto;justify-self:auto;align-self:auto;flex:none;padding:4px 0}
.hero__copy,.hero__copy h1{max-width:none}
.hero h1{font-size:clamp(40px,3.2vw,60px);line-height:1}
.hero__sub{margin:16px 0 0;font-size:clamp(17px,1.1vw,19px);max-width:none;color:var(--ink)}
/* on the moving film Gal's teal takes its deepest shade, so the colour word and the small line read on every frame */
.hero .hero__eyebrow,.hero h1 em{color:#1f5f66;text-shadow:0 0 3px rgb(var(--ground) / .75),0 0 16px rgb(var(--ground) / .9)}
.hero__aside{grid-area:auto;width:100%;margin:0;background:#fff;border-radius:var(--r-m);padding:8px 8px 12px;box-shadow:0 24px 56px -30px rgba(22,33,58,.55)}
.hero .hero__aside .bookbar{width:100%;max-width:none;margin:0;padding:0;background:none;box-shadow:none}
.hero .hero__aside .bookbar__note{margin:10px 8px 0;font-size:14px}
@media (max-width:640px){
  .hero{height:auto;min-height:0;grid-template-rows:var(--bar) calc(100svh - var(--bar)) auto}
  .hero__content,.hero__inner{display:contents}
  .hero__inner::before{content:none}
  .hero__words{grid-area:2/1;align-self:end;z-index:3;isolation:isolate;padding:0 var(--gutter) 26px}
  /* the phone's blur sits behind the words only and melts upward into the film */
  .hero__words::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-72px 0 0 0;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgb(var(--ground) / .5);
    -webkit-mask:linear-gradient(0deg,#000 calc(100% - 72px),transparent);mask:linear-gradient(0deg,#000 calc(100% - 72px),transparent)}
  .hero__top{margin-bottom:12px}
  .hero h1{font-size:clamp(36px,10vw,44px)}
  .hero__sub{font-size:16px;margin-top:12px}
  .hero__aside{grid-area:3/1;z-index:3;margin:16px var(--gutter) 26px;width:auto;background:none;box-shadow:none;padding:0}
  .hero .hero__aside .bookbar{background:#fff;padding:6px;box-shadow:0 18px 40px -26px rgba(22,33,58,.5)}
  .hero .hero__aside .bookbar__note{margin:10px 2px 0;font-size:12.5px}
}

/* 2 · Instagram: a belt of every own post, drifting slowly; a tile under the mouse grows a little and opens to its whole picture;
   while the mouse is on the section, the rest of the page steps back a little */
.insta__belt{--s:clamp(150px,15vw,280px);--gap:14px;--pad:calc(var(--s) * .17);position:relative;margin:calc(clamp(26px,3.4vh,38px) - var(--pad)) 0 calc(-1 * var(--pad));padding:var(--pad) 0;overflow-x:clip;overflow-y:visible}
.insta__track{display:flex;gap:var(--gap);width:max-content;margin:0;padding:0 var(--gutter);list-style:none;will-change:transform}
.insta__track li{position:relative;flex:none;width:var(--s);height:var(--s);transition:filter .6s var(--ease)}
.insta__track a{position:absolute;left:50%;top:50%;width:calc(var(--s) * var(--fw));height:calc(var(--s) * var(--fh));translate:-50% -50%;
  clip-path:inset(var(--cy) var(--cx) round var(--r-m));transition:clip-path .6s var(--ease),scale .6s var(--ease);background:rgba(22,33,58,.06)}
.insta__track img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  .insta__track li:hover{z-index:2;filter:drop-shadow(0 22px 26px rgba(22,33,58,.26))}
  .insta__track li:hover a{clip-path:inset(0 round var(--r-m));scale:1.05}
}
.insta__track a:focus-visible{clip-path:inset(0 round var(--r-m));outline:none}
.insta__track li:has(a:focus-visible){z-index:2;filter:drop-shadow(0 0 0 var(--blue-k)) drop-shadow(0 0 2px var(--blue-k))}
main > *,.foot{transition:opacity .7s var(--ease)}
.ig-focus main > :not(#instagram),.ig-focus .foot{opacity:.58}
@media (max-width:640px){.insta__belt{--gap:8px}}
/* reduced motion: no drift, no pop; the row scrolls by hand instead */
@media (prefers-reduced-motion:reduce){
  .insta__belt{overflow-x:auto;padding-block:0;margin:clamp(26px,3.4vh,38px) 0 0}
  .insta__track a,.insta__track li{transition:none}
  .insta__track li:hover a{scale:none}
  main > *,.foot{transition:none}
}

/* 3 · "Socials" in the bar (and the phone menu) opens the four icons, the footer's own set */
.nav__soc,.menu__soc{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.nav__soc{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:17px;opacity:.94;transition:opacity .3s,color .3s}
.nav__soc svg{transition:transform .3s var(--ease)}
.nav__soc:hover,.nav__soc[aria-expanded="true"]{opacity:1;color:var(--blue)}
.nav__soc[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu__soc{align-self:flex-start;font-family:var(--display);font-size:clamp(34px,9vw,52px);line-height:1.2;font-stretch:62.5%;font-weight:470;text-transform:uppercase;letter-spacing:.01em;text-align:left}
.menu__soc[aria-expanded="true"]{color:var(--blue)}
.soc-pop{position:absolute;z-index:3;top:calc(100% + 10px);left:var(--soc-x,auto);right:auto;translate:-50% 0;background:#fff;color:var(--ink);border-radius:var(--r-m);padding:14px 16px 16px;
  box-shadow:0 26px 60px -28px rgba(22,33,58,.55),inset 0 0 0 1px rgba(22,33,58,.07)}
.soc-pop.is-open{animation:socIn .25s var(--ease)}
@keyframes socIn{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.soc-pop.is-open{animation:none}}
.soc-pop[hidden]{display:none}
.soc-pop__h{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-k);text-align:center}
.soc-pop__icons{display:flex;gap:10px}
.soc-pop__icons a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgb(var(--ground));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(22,33,58,.1);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.soc-pop__icons a:hover{background:var(--blue-k);color:#fff;transform:translateY(-2px)}
.soc-pop__icons a:focus-visible{outline:2px solid var(--blue-k);outline-offset:3px}
.soc-pop__icons svg{width:22px;height:22px}
/* the phone menu: the pop opens right under the word "Socials" */
@media (max-width:900px){.soc-pop{left:var(--gutter);translate:none;top:var(--soc-y,calc(100% + 12px))}}

/* 5 · the bar holds every word (Rooms to Socials): the gap and the words step down a little before anything could wrap */
@media (max-width:1180px){.nav__links{gap:22px}}
@media (max-width:1040px){.nav{gap:20px}.nav__links{gap:16px}.nav__links a,.nav__soc{font-size:16px}.nav__brand img,.nav-solid .nav__brand img{height:40px}}
@media (max-width:960px){.nav__links{gap:13px}.nav__links a,.nav__soc{font-size:15.5px}.nav__cta{padding-left:14px;padding-right:14px}}

/* 4 · reviews: the home block gets a title you can see and the way to every review; /reviews holds them all */
.proof__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,56px)}
.proof__head .display{margin:0}
.proof__all{display:inline-flex;align-items:center;gap:12px;border-radius:var(--r-s)}
.proof__all svg{transition:transform .3s var(--ease)}
.proof__all:hover svg{transform:translateX(4px)}
.rv-proof{padding-top:clamp(48px,7vh,80px);padding-bottom:clamp(48px,7vh,80px)}
.rv-all .display{margin-bottom:clamp(30px,4.5vh,50px)}
.rv-wall{columns:3 300px;column-gap:20px}
.rv-wall .review{display:flex;break-inside:avoid;margin:0 0 20px}
.rv-wall .review p{font-size:17.5px}
@media (max-width:640px){.rv-wall{columns:1}.proof__head{align-items:flex-start}}

/* =====================================================================
   ROUND 7 · THE PHONE (18 Oct, Zman: "Too much spacing and a lot of text with weird spacing. Images crop weird...
   make mobile amazing for customers to scroll, see and book.")
   One thumb, one house: the film fills the first screen with the name on it and the door ("Check availability") under
   the thumb; every part of the house is about one screen; the rooms, the shared spaces and the reviews are rows you swipe,
   and swiping the rooms walks the page through each room's own colour (the desktop walk, moved from the scroll to the thumb).
   One phone rhythm: 64px between sections, 12 kicker to title, 16-22 title to words, 20 words to action, 12 photo to caption.
   Nothing under 14px. Every photograph framed on its subject. All of it inside max-width:640px, except the hero line's
   one-step move below (it sits in exactly the same place on desktop).
   ===================================================================== */
.hero__sub{margin-top:calc(16px - clamp(16px,2.2vh,22px))}
.swipe-nav{display:none}

@media (max-width:640px){
  :root{--ph-pad:32px}
  body{font-size:17px;line-height:1.55}
  .kicker{margin-bottom:12px}
  .lede{font-size:18px;line-height:1.5}
  .bookbar label{font-size:14px;letter-spacing:.1em}
  .bookbar__nights,.bookbar__note,.hero .hero__aside .bookbar__note{font-size:14px}

  /* 1 · the first screen: the film, the name on its blur, the door under the thumb (the sticky bar shows from the start) */
  .hero{grid-template-rows:var(--bar) calc(100svh - var(--bar)) auto auto}
  .hero .hero__eyebrow,.page-hero .hero__eyebrow{font-size:14px;letter-spacing:.12em}
  .hero .hero__eyebrow span{display:inline}
  .hero .hero__eyebrow span::before{content:"·";margin:0 .45em 0 .3em}
  html.js .hero__words{padding-bottom:92px}
  .hero__words::before{inset:-64px 0 0 0;-webkit-mask:linear-gradient(0deg,#000 calc(100% - 64px),transparent);mask:linear-gradient(0deg,#000 calc(100% - 64px),transparent)}
  .hero__sub{grid-area:3/1;z-index:3;margin:22px var(--gutter) 0;font-size:17px;line-height:1.5;color:var(--ink)}
  .hero__aside{grid-area:4/1;margin:16px var(--gutter) 0}

  /* 2 · the name: the two words side by side with the plaque, read left to right, no loose gaps */
  .name{padding:calc(var(--ph-pad) + 32px) 0 var(--ph-pad)}
  .name__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:22px;row-gap:0;align-items:center}
  .name__grid > div:first-child{display:contents}
  .name .kicker{grid-area:1/1/2/3}
  .name h2{grid-area:2/1/3/3;font-size:clamp(46px,13.4vw,58px);margin-bottom:22px}
  .name__words{grid-area:3/1/4/2;margin:0;display:flex;flex-direction:column;gap:18px}
  .name__word b{text-align:left;font-size:34px;line-height:1.1}
  .name__word span{font-size:15px;line-height:1.35}
  .name__photo{grid-area:3/2/4/3;margin:0;max-width:none;width:100%;aspect-ratio:4/5}
  .name .copy{grid-area:4/1/5/3;margin-top:24px}
  .name blockquote{grid-area:5/1/6/3;margin-top:14px;font-size:22px}

  /* 3 · the house itself (the arch that opens): framed on the gable and the door */
  .arrive{padding:var(--ph-pad) 0}
  .arrive__head{margin-bottom:22px}
  .arrive__head .display{font-size:clamp(36px,10vw,44px)}
  .arrive__arch img{object-position:58% 46%}

  /* 4 · small on purpose: the two photographs side by side straight under the title, then the three lines */
  .house.band{padding:var(--ph-pad) 0}
  .house .house__grid{gap:0}
  .house__grid > div:first-child{display:contents}
  .house .kicker{order:1}
  .house h2{order:2}
  .house__photos{order:3;margin-top:20px;max-width:none;gap:10px}
  .house .three{order:4}
  .house .more-link{order:5;margin-top:22px}
  .house__photos figure{aspect-ratio:1/1}
  .house__photos .p3{margin-top:0}
  .house__photos .p2 img{object-position:50% 62%}
  .house__photos .p3 img{object-position:62% 50%}
  .three{margin-top:26px;gap:20px}
  .three li{column-gap:14px}
  .three li > b{font-size:26px}
  .three li > span{font-size:17px;margin-top:4px}

  /* 5 · the five rooms: a row you swipe; the page takes each room's colour as it slides in */
  #rooms{padding-bottom:var(--ph-pad)}
  #rooms .walk-head{padding:var(--ph-pad) 0 0}
  #rooms .walk-head .lede{margin-top:14px}
  .rooms-list{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    padding:24px var(--gutter) 2px;scrollbar-width:none;overscroll-behavior-x:contain;position:relative}
  .rooms-list::-webkit-scrollbar{display:none}
  .rooms-list > .room{flex:0 0 calc(100% - 30px);padding:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex}
  .rooms-list .wrap{padding:0;max-width:none;display:flex}
  .rooms-list .room__grid{display:flex;flex-direction:column;gap:0;width:100%}
  .rooms-list .room__grid > div:last-child{display:flex;flex-direction:column;flex:1}
  .rooms-list .room__main{aspect-ratio:4/3;box-shadow:0 26px 40px -30px rgba(22,33,58,.55)}
  .rooms-list .room__num{margin:16px 0 4px}
  .rooms-list h3.display{font-size:30px}
  .rooms-list .swatches{margin:10px 0}
  .rooms-list .swatches i{width:22px;height:22px}
  .rooms-list .room__story{font-size:17px;line-height:1.5;margin:0 0 16px}
  .rooms-list .room__ctas{margin-top:auto;gap:12px 18px}
  .rooms-list .btn{min-height:48px;padding:0 20px}
  .rooms-list [data-reveal],.spaces__grid [data-reveal],#reviews .reviews [data-reveal]{opacity:1;transform:none}
  #deluxe-orange-suite .room__main img{object-position:58% 50%}

  /* the swipe hint + the dots (the rooms' dots are the rooms' own colours); each dot jumps to its card */
  .swipe-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter) 0}
  .spaces .swipe-nav,#reviews .swipe-nav{padding-left:0;padding-right:0}
  .swipe-nav__hint{margin:0;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft)}
  .swipe-nav__hint svg{flex:none;color:var(--blue-k);animation:swipeHint 2.4s ease-in-out infinite}
  @keyframes swipeHint{0%,100%{transform:none}50%{transform:translateX(5px)}}
  .swipe-nav__dots{display:flex}
  .swipe-nav__dots button{width:24px;height:36px;border:0;padding:0;background:none;display:grid;place-items:center}
  .swipe-nav__dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,rgba(22,33,58,.26));box-shadow:inset 0 0 0 1px rgba(22,33,58,.2);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .swipe-nav__dots button[aria-current="true"]::before{transform:scale(1.5);box-shadow:inset 0 0 0 1px rgba(22,33,58,.3),0 0 0 2px #fff}
  .swipe-nav__dots button:focus-visible{outline:2px solid var(--blue-k);outline-offset:-4px;border-radius:6px}

  /* 6 · Instagram keeps drifting; 7 · evenings: the sunset arch a size smaller */
  .insta.band{padding-top:var(--ph-pad);padding-bottom:51px}
  .evening{padding:var(--ph-pad) 0}
  .evening__grid{gap:22px}
  .evening .lede{margin-top:14px}
  .evening__frame{max-width:300px}

  /* 8 · rooms you share: a row you swipe, each photograph framed on its subject */
  .spaces{padding:var(--ph-pad) 0}
  .spaces__grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin:20px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;position:relative}
  .spaces__grid::-webkit-scrollbar{display:none}
  .spaces__grid > .space{flex:0 0 64%;scroll-snap-align:start}
  .spaces__grid .space__img{aspect-ratio:4/5}
  .spaces__grid .space:nth-child(1) img{object-position:70% 50%}
  .spaces__grid .space:nth-child(2) img{object-position:62% 50%}
  .space figcaption{margin-top:12px}
  .space figcaption b{font-size:26px}
  .space figcaption span{display:block;font-size:16px;line-height:1.45}

  /* 9 · reviews: the score beside its award, the press, then the reviews as a row you swipe and the way to all of them */
  #reviews{padding:var(--ph-pad) 0}
  #reviews > .wrap{display:flex;flex-direction:column}
  #reviews .proof__head{display:contents}
  #reviews .proof__head > div{order:1}
  #reviews .proof__top{order:2;margin-top:22px;gap:20px}
  #reviews .reviews{order:3}
  #reviews .swipe-nav{order:4}
  #reviews .proof__all{order:5;align-self:flex-start;margin-top:20px}
  #reviews .award{flex-direction:row;align-items:center;gap:16px}
  #reviews .award__score{width:84px;height:84px}
  #reviews .award__score b{font-size:36px}
  #reviews .award__score span{font-size:14px;margin-top:2px}
  #reviews .award p{font-size:16px}
  #reviews .award p b{font-size:26px}
  #reviews .press{gap:16px}
  #reviews .press blockquote{font-size:24px}
  #reviews .press cite{font-size:14px;margin-top:6px}
  #reviews .reviews{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin:26px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;position:relative}
  #reviews .reviews::-webkit-scrollbar{display:none}
  #reviews .reviews > .review{flex:0 0 82%;scroll-snap-align:start;padding:22px 20px 20px;gap:16px}
  #reviews .review p{font-size:17px}

  /* 10 · Bo-Kaap */
  .bokaap,.proof + .bokaap{padding:var(--ph-pad) 0}
  .bokaap__grid{gap:20px}
  .near{margin-top:18px;gap:10px}
  .near li{font-size:17px}

  /* 11 · book direct: the door at night beside the line, the dates right under (every page ends on this) */
  .night,.night--short{padding:var(--ph-pad) 0}
  .night__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:18px;row-gap:0;align-items:center}
  .night__content{display:contents}
  .night .kicker{grid-area:1/1/2/3;position:relative;z-index:1}
  .night h2{grid-area:2/1/3/3;position:relative;z-index:1}
  .night__door{grid-area:3/1/4/2;max-width:none;width:100%;justify-self:stretch;margin-top:20px}
  .night .lede{grid-area:3/2/4/3;margin:20px 0 0;font-size:17px;position:relative;z-index:1}
  .night__content > div{grid-area:4/1/5/3;margin-top:22px;position:relative;z-index:1}
  .night .bookbar{margin-top:0}

  /* 12 · the footer: two columns where the words fit, the emails get the full width */
  .foot{padding:var(--ph-pad) 0 104px;font-size:16px}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 18px}
  .foot__grid > div:nth-child(1){grid-area:1/1/2/3}
  .foot__grid > div:nth-child(2){grid-area:2/1/3/2}
  .foot__grid > div:nth-child(4){grid-area:2/2/3/3}
  .foot__grid > div:nth-child(3){grid-area:3/1/4/3}
  .foot p{margin-bottom:8px}
  .foot__logo img{height:40px}
  .foot__social{margin-top:16px}
  .foot__base{margin-top:26px;padding-top:18px;font-size:14px;gap:4px 20px}
  .stickybook .btn{font-size:16px}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.swipe-nav__hint svg{animation:none}}

/* =====================================================================
   ROUND 8 · THE OWNERS' NOTES + "LESS TEXT" (19 Oct 2026)
   1 The phone's first screen = the film + ONE strip (name + Check dates). The title, the line and the dates sit under the film.
   ===================================================================== */
.hero__tag{display:none}
@media (max-width:640px){
  .hero{grid-template-rows:var(--bar) calc(100svh - var(--bar)) auto auto auto}
  .hero__tag{grid-area:2/1;align-self:end;z-index:4;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 10px 12px;padding:12px 12px 12px 16px;border-radius:8px;isolation:isolate;overflow:hidden}
  .hero__tag::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    background:rgb(var(--ground) / .76)}
  .hero__tag-name{margin:0;min-width:0}
  .hero__tag-name .display{display:block;font-size:clamp(18px,5.3vw,22px);line-height:1;color:var(--ink);white-space:nowrap}
  .hero__tag-sub{display:block;margin-top:5px;font:600 14px/1.2 var(--text);color:#1a525a}
  .hero__tag-go{flex:none;min-height:48px;padding:0 14px;font-size:15px;border-radius:6px}
  .hero__words{grid-area:3/1;align-self:start;padding:26px var(--gutter) 0;z-index:auto}
  html.js .hero__words{padding-bottom:0}
  .hero__words::before{display:none}
  .hero__top{display:none}
  .hero .hero__eyebrow,.hero h1 em{text-shadow:none;color:var(--blue-k)}
  .hero__sub{grid-area:4/1;margin:14px var(--gutter) 0}
  .hero .hero__aside{grid-area:5/1}
}

/* 3 · The Rooms dates box: ONE box on the words' own left edge wherever it sits under them (it borrowed the home hero's white
   panel, so the dates sat in a box inside a box, and on a phone the home's gutter margin pushed it off the right edge).
   Full width of the words on a phone, the home's 600px cap on a tablet; the desktop (box in the right column) is untouched. */
@media (max-width:1100px){
  .page-hero .hero__aside{grid-area:3/1;margin:10px 0 0;padding:0;width:100%;max-width:600px;background:none;box-shadow:none;border-radius:0}
  .page-hero .hero__aside .bookbar{margin:0;width:100%}
  .page-hero .hero__aside .bookbar__note{margin:10px 0 0}
}

/* 4 · LESS TEXT (Z, 19 Oct: "the text everywhere just looks like it's taking up so much space... declutter it, phone and desktop").
   Desktop = LIGHT: section titles a step smaller (two lines, not three), bullets become chips, long guest reviews show their first
   lines. Phone = FIRM: titles and chips carry each section; the second-level sentences fold behind ONE "Read more" (still in the
   page, so Google reads them) or already live on the page the section links to. */
h2.display{font-size:clamp(40px,4.4vw,64px)}
/* ...one step down, not a flattening: the name stays the page's big statement, the guide heads keep their own smaller scale */
.name h2{font-size:clamp(52px,6.4vw,100px)}
.guides__head h2{font-size:clamp(32px,3.6vw,52px)}
.three li > b{font-size:clamp(26px,2.5vw,36px)}
.near--chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.near--chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:4px;background:rgb(255 255 255 / .72);
  box-shadow:inset 0 0 0 1px rgba(22,33,58,.06);font-size:15px;line-height:1.25;font-weight:600;color:var(--ink)}
.near--chips li svg{width:9px;height:9px;flex:none;margin:0}
.near--chips + .more-link{margin-top:20px}
.reviews .review p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review.is-open p{display:block;-webkit-line-clamp:unset;overflow:visible}
.review__more,.fold-more{background:none;border:0;border-bottom:1.5px solid currentColor;border-radius:0;padding:0 0 2px;font:inherit;
  font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
.review__more{align-self:flex-start;margin:12px 0 0}
.fold-more{display:none}
@media (max-width:640px){
  h2.display{font-size:34px}
  .name h2{font-size:clamp(42px,12vw,50px)}
  .guides__head h2{font-size:30px}
  .three li > b{font-size:22px}
  .lede,.copy p,.room__story{font-size:16px;line-height:1.5}
  html.js [data-fold]:not(.is-open){display:none}
  .fold-more{display:inline-flex;margin-top:14px}
  .fold-more[hidden],.ph-hide{display:none}
  /* home: what each title already says, or what the page it links to says in full */
  .three li > span,#rooms .walk-head .lede,.rooms-list .room__story,.evening .lede,#bo-kaap .copy,.safe .lede{display:none}
  .three li{margin-bottom:2px}
  #reviews .press,.award p span{display:none}
  .award p b{margin-bottom:0}
  .reviews .review p{-webkit-line-clamp:4}
  .rv-wall .review p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  .rv-wall .review.is-open p{display:block;overflow:visible}
  .guide:not(.guide--big) .guide__ex{display:none}
}

/* 5 · FINISH THE PHONE (round 7's inner-page list): The House spaces sit closer and their two photos share one height; the
   in-room list is two columns; the gallery filters are one swipe rail; nothing under 14px; one 64px rhythm on /reviews. */
@media (max-width:640px){
  .sp{padding:32px 0}
  .sp__grid{gap:20px}
  .sp__media{align-items:stretch}
  .sp__b{margin-top:0!important;aspect-ratio:auto;border-width:5px!important}
  .inroom ul{grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:22px}
  .inroom li{font-size:15px;align-items:flex-start;gap:8px;line-height:1.35}
  .inroom li svg{width:15px;height:15px;margin-top:2px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:22px calc(-1 * var(--gutter)) 0;
    padding:0 var(--gutter) 4px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .award__score span,.contact__list dt{font-size:14px}
  .rv-proof{padding-top:40px;padding-bottom:32px}
  .gallery-wrap{padding-bottom:18px}
}

/* =====================================================================
   ROUND 9 (19 Oct 2026, Z) · the home film on DESKTOP (the phone keeps round 8's film + one strip)
   "we still don't like that the text is left-orientated and it's cutting off a part of the video": the booking box sits at
   the top in the middle, the title and the line sit centred and wide along the film's foot on a low soft blur (his round 6
   taste), so the middle of the film stays clear.
   ===================================================================== */
@media (min-width:641px){
  .hero__content{align-self:stretch;padding:clamp(14px,2.4vh,28px) var(--gutter) var(--hero-pb)}
  .hero__inner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;align-items:end;gap:0;width:100%;height:100%;text-align:center}
  .hero__aside{grid-row:1;align-self:start;width:min(560px,100%);text-align:left}
  .hero__words{grid-row:3;width:100%}
  .hero__top{justify-content:center;gap:clamp(24px,2.4vw,40px);margin:0 0 clamp(10px,1.4vh,14px)}
  .hero h1{font-size:clamp(40px,3.6vw,72px);line-height:1.02;text-wrap:balance}
  .hero__sub{grid-row:4;margin:clamp(10px,1.6vh,16px) auto 0;max-width:62em;text-wrap:balance}
  /* the blur: one low band behind the title + the line, edge to edge, melting away upwards */
  .hero__inner::before{grid-row:3/5;grid-column:1;top:-80px;right:calc(-1 * var(--gutter));bottom:calc(-1 * var(--hero-pb));left:calc(-1 * var(--gutter));
    -webkit-mask:linear-gradient(0deg,#000 calc(100% - 80px),transparent);mask:linear-gradient(0deg,#000 calc(100% - 80px),transparent);
    background:rgb(var(--ground) / .6)}   /* round 9c: their brighter original film needs a touch more cream for the title to read at every moment */
  /* round 9d (Z: "just a little bit less blur", then "even less blur"; he picked D): 14px -> 2px, so the room shows through; cream unchanged */
  .hero__inner::before{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}

/* 2 · The colours of Bo-Kaap (the Bo-Kaap page, Z: "more pictures showing how colourful Bo-Kaap actually is"):
   desktop = a mosaic (the sign wall 2x2, two street rows 2x1), a tablet = 2 columns, a phone = one row you swipe */
.bk-colours{padding:clamp(56px,7vw,112px) 0}
.bk-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(180px,17vw,290px);grid-auto-flow:dense;gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,48px)}
.bk-tile{margin:0;position:relative;overflow:hidden;border-radius:var(--r-m);background:rgb(var(--ground) / .6)}
.bk-tile--big{grid-column:span 2;grid-row:span 2}
.bk-tile--wide{grid-column:span 2}
.bk-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover) and (pointer:fine){.bk-tile:hover img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.bk-tile img{transition:none}}
@media (max-width:900px) and (min-width:641px){.bk-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(180px,30vw,260px)}}
@media (max-width:640px){
  .bk-colours{padding:var(--ph-pad) 0}
  .bk-mosaic{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin:20px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .bk-mosaic::-webkit-scrollbar{display:none}
  .bk-mosaic > .bk-tile{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start}
  .bk-mosaic [data-reveal]{opacity:1;transform:none}
  .bk-colours .swipe-nav{padding-left:0;padding-right:0}
}
/* 3 · the Bo-Kaap page's new street photo keeps the mountain's top in the frame */
.page-hero__img.bk-hero-img{object-position:50% 32%}

/* 4 · round 9b (Z: "I like A... the colour to match the header, so it looks seamless... Option A is the pick"): the white box
   at the top becomes option A, ONE slim floating line just under the menu bar, in the bar's own colour, the dates, the nights,
   the button and "12% off" in a row. The phone keeps round 8. */
@media (min-width:641px){
  .hero__content{padding-top:18px}
  .hero .hero__aside{display:flex;align-items:center;gap:4px;width:auto;max-width:100%;margin:0;padding:6px 8px 6px 12px;
    background:rgb(var(--ground));border-radius:999px;box-shadow:0 18px 34px -26px rgba(22,33,58,.5)}
  .hero .hero__aside .bookbar{background:none;box-shadow:none;padding:0;width:auto;max-width:none;margin:0}
  .hero .hero__aside .bookbar__field{flex:0 0 auto;padding:4px 18px}
  .hero .hero__aside .bookbar input[type=date]{width:150px;font-size:16px}
  .hero .hero__aside .bookbar__go{flex-direction:row;align-items:center;gap:12px;padding-left:4px}
  .hero .hero__aside .bookbar__go .btn{min-height:48px;border-radius:999px;padding:0 26px}
  .hero .hero__aside .bookbar__nights{order:-1;white-space:nowrap}
  .hero .hero__aside .bookbar__note{margin:0 14px 0 10px;white-space:nowrap;font-size:13.5px}
  .hero .hero__aside .bookbar__more{display:none}
}
/* a narrower screen: the "12% off" line steps under the dates, still inside the same piece */
@media (min-width:641px) and (max-width:1099px){
  .hero .hero__aside{flex-wrap:wrap;justify-content:center;border-radius:28px;padding-bottom:10px}
  .hero .hero__aside .bookbar__note{flex-basis:100%;text-align:center;margin:2px 0 0}
}

/* =====================================================================
   ROUND 10 (21 Oct, Z's notes)
   1 the first-visit card takes 1 second in total ("nice and quick")
   2 home order: film, the name, the blue house, Instagram, reviews, small on purpose, Bo-Kaap, then the rest (build/pages)
   3 small on purpose: the words in the centre, three of their own photos either side
   5-7 Instagram: a little quicker (main.js), newest posts first with people, the words centred, a soft palette wash behind
   8 the header's Socials: the four real brand icons in their own colours
   ===================================================================== */

/* 1 · the card: up at once, "Welcome to Amina" in, then gone 1 s after the page opens (CSS keeps the same clock if the
   script is late; a scroll or click still skips it) */
.intro-on .welcome{animation:welcomeSafety .42s .58s var(--ease) forwards}
.intro-on .welcome__words{animation:welcomeIn .4s 0s var(--ease) forwards}
.intro-on .welcome__line{animation:welcomeIn .4s .1s var(--ease) forwards}
.welcome.is-out{transition:opacity .42s var(--ease),visibility 0s .42s}
.intro-on .hero [data-stage]:not(.is-in){animation:stageSafety 1s 1.4s forwards}

/* 3 · small on purpose: words in the middle column, a room, the sauna and the rose mural on the left, the coffee tray,
   the wishing well and the pool on the right, the two sides set a step apart */
.house .wrap.house__grid--r10{max-width:calc(1520px + 2 * var(--gutter));grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
  grid-template-areas:"l w r";gap:clamp(28px,3.4vw,60px);align-items:center}
.house__words{grid-area:w;min-width:0}
.house__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1vw,16px);min-width:0}
.house__side--l{grid-area:l;margin-bottom:clamp(30px,5vw,96px)}
.house__side--r{grid-area:r;margin-top:clamp(30px,5vw,96px)}
.hs{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-m);background:rgba(22,33,58,.06);box-shadow:0 40px 70px -46px rgba(22,33,58,.6);min-width:0}
.hs--wide{grid-column:1 / -1;aspect-ratio:3/2}
.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.house__side--r .hs:first-child img{object-position:24% 50%}
@media (min-width:641px){
  .house__words{display:flex;flex-direction:column;align-items:center;text-align:center}
  .house__words .three{align-items:center;margin-top:clamp(22px,2.6vw,34px);gap:clamp(20px,2.2vw,28px)}
  .house__words .three li{grid-template-columns:minmax(0,1fr);justify-items:center}
  .house__words .three li > i{grid-column:1;grid-row:1;transform:none;margin-bottom:8px}
  .house__words .three li > b{grid-column:1;grid-row:2;font-size:clamp(26px,2.3vw,40px)}
  .house__words .three li > span{grid-column:1;grid-row:3;max-width:24em}
}
/* a tablet: the words on top, the two sides of photos side by side under them */
@media (max-width:1024px) and (min-width:641px){
  .house .wrap.house__grid--r10{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"w w" "l r";row-gap:40px}
  .house__words{max-width:620px;margin:0 auto}
}
/* the phone keeps round 7's reading order: title, the photos (two rows of three), then the three lines */
@media (max-width:640px){
  .house .wrap.house__grid--r10{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:0}
  .house__side{order:3;grid-area:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
  .house__side--l{margin-top:20px}
  .house__side--r{margin-top:8px}
  .hs,.hs--wide{grid-column:auto;aspect-ratio:1/1;box-shadow:0 18px 30px -24px rgba(22,33,58,.55)}
  .house__side--l .hs--wide img{object-position:46% 50%}
  .house__side--r .hs--wide img{object-position:30% 50%}
}

/* 7 · Instagram: the words centred in Z's order (label, title, handle), the real Instagram glyph */
.insta__head.insta__head--c{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0}
.insta__head--c .kicker{margin-bottom:14px}
.insta__head--c .insta__follow{margin-top:clamp(16px,2vw,24px)}
.ig-glyph{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff}
.insta__icon.ig-glyph{width:44px;height:44px;border-radius:13px;box-shadow:0 14px 26px -18px rgba(214,36,159,.7);transition:transform .3s var(--ease)}
.insta__follow:hover .insta__icon.ig-glyph{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff;transform:translateY(-2px)}
/* behind the posts: a soft wash that slowly walks the house's own colours (the rooms' pale grounds, the street's pink, the
   powder blue), one full turn a minute, faded at the top and the bottom so it never makes an edge */
@property --igw1{syntax:"<color>";inherits:false;initial-value:#fbeaa5}
@property --igw2{syntax:"<color>";inherits:false;initial-value:#d5e3f5}
.insta__stage{position:relative;isolation:isolate}
.insta__stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background:linear-gradient(100deg,var(--igw1) 0%,var(--igw2) 50%,var(--igw1) 100%);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
  animation:igWashA 60s linear infinite,igWashB 60s linear -20s infinite}
@keyframes igWashA{0%,100%{--igw1:#fbeaa5}17%{--igw1:#e0efcb}33%{--igw1:#d5e3f5}50%{--igw1:#f8dce6}67%{--igw1:#fbd6b8}83%{--igw1:#cfe6f2}}
@keyframes igWashB{0%,100%{--igw2:#fbeaa5}17%{--igw2:#e0efcb}33%{--igw2:#d5e3f5}50%{--igw2:#f8dce6}67%{--igw2:#fbd6b8}83%{--igw2:#cfe6f2}}
@media (prefers-reduced-motion:reduce){.insta__stage::before{animation:none}}

/* 8 · Socials: each brand in its own colours and shape (Instagram and TikTok rounded squares, Facebook and WhatsApp rounds) */
.soc-pop__icons .soc{color:#fff;box-shadow:none;overflow:hidden}
.soc-pop__icons .soc--ig,.soc-pop__icons .soc--tt{border-radius:14px}
.soc-pop__icons .soc--ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc-pop__icons .soc--tt{background:#000}
.soc-pop__icons .soc--tt svg{width:22px;height:22px;filter:drop-shadow(-1.4px -1.1px 0 #25f4ee) drop-shadow(1.4px 1.1px 0 #fe2c55)}
.soc-pop__icons .soc--fb{background:#fff}
.soc-pop__icons .soc--fb svg{width:48px;height:48px}
.soc-pop__icons .soc--wa{background:#25d366}
.soc-pop__icons .soc--ig svg{width:26px;height:26px}
.soc-pop__icons .soc--wa svg{width:27px;height:27px}
.soc-pop__icons .soc:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.06)}
.soc-pop__icons .soc--ig:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc-pop__icons .soc--tt:hover{background:#000}
.soc-pop__icons .soc--fb:hover{background:#fff}
.soc-pop__icons .soc--wa:hover{background:#25d366}
/* 6 · a reel wears a small play mark in its corner (the tile opens the reel on Instagram) */
.insta__reel{position:absolute;top:8px;right:8px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(22,33,58,.5);color:#fff;pointer-events:none}
.insta__reel svg{margin-left:2px}
@media (max-width:640px){.insta__reel{top:6px;right:6px;width:24px;height:24px}.insta__reel svg{width:12px;height:12px}}
/* ---------- ROUND 10c (Z, 21 Oct): the bar says "The Neighbourhood" (was Bo-Kaap). The longer word leaves no room for the
   whole bar below 1181px, so from 901 to 1180 the header shows the logo, Book direct and the menu button (header rules only,
   the page layout keeps its own breakpoints); 1181 to 1240 closes the gaps between the words a little ---------- */
@media (min-width:1181px) and (max-width:1240px){.nav__links{gap:26px}}
@media (min-width:901px) and (max-width:1180px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .nav__burger{display:block;margin-left:0}
  .soc-pop{left:var(--gutter);translate:none;top:var(--soc-y,calc(100% + 12px))}
  /* the menu opens on laptop screens too here, some only ~520px tall (1366x768 at 125%): the words size to the height */
  .menu{justify-content:center;justify-content:safe center}
  .menu a:not(.btn),.menu__soc{font-size:clamp(22px,calc((100vh - 330px) / 9.6),52px)}
}
/* round 10c · on phones under 360px "The Neighbourhood" kept the menu words from fitting: let them follow the width */
@media (max-width:359px){.menu a:not(.btn),.menu__soc{font-size:9vw}}

/* ===================== ROUND 11 · 22 Oct 2026 (Z: five small changes, everything else stays) ===================== */
/* 1 · Instagram: "Our Instagram", the glyph and the handle on ONE line, a little less room above it,
   and "Follow the colours." close to the posts */
.insta.band{padding-top:clamp(24px,3.5vh,40px)}
.insta__head.insta__head--c{margin-bottom:clamp(8px,1vw,14px)}
.insta__head--c .insta__line{margin:0 0 16px}
.insta__head--c .insta__line .insta__follow{margin-top:0;gap:12px;flex-wrap:nowrap;white-space:nowrap}
.insta__line .kicker{margin:0;line-height:1}
.insta__line .insta__icon.ig-glyph{width:40px;height:40px;border-radius:12px}
/* 2 · the local line under "Small on purpose.", and the shared spaces line under its title */
.house__words .house__lede{margin-top:clamp(14px,1.4vw,20px);max-width:26em}
.spaces .spaces__lede{margin:16px 0 clamp(24px,2.6vw,34px)}
@media (max-width:640px){
  .insta.band{padding-top:16px}
  .insta__head.insta__head--c{margin-bottom:4px}
  .insta__head--c .insta__line{margin-bottom:12px}
  .insta__line .kicker{font-size:13px;letter-spacing:.16em}
  .insta__line .insta__icon.ig-glyph{width:36px;height:36px;border-radius:11px}
  .house .house__lede{order:2;margin-top:12px}
  .spaces .spaces__lede{margin:12px 0 18px}
}
/* 3 · the phone strip's "Bo-Kaap · Best rate guaranteed" is longer than the old "12% off direct": a step smaller under 375px
   so it stays on one line at 360 (Android) */
@media (max-width:374px){.hero__tag-sub{font-size:13px}}