/* OHHOUSE · Concept 04 · Light editorial synthesis
   Paper and photographs lead. Fine ink lines for the architecture, filled brand shapes as moments.
   Colour arrives in blocks, one at a time: olive (the trees), butter (the day), blue (Tamarindo), brick (the footer only). */

:root {
  --paper: #F4F2EC; --white: #FFFFFF; --ink: #141413; --olive: #978603; --brick: #703428; --butter: #FBDB8A; --blue: #6699FF;
  --mute: #57554F;               /* 6.6:1 on paper */
  --rule: rgba(20, 20, 19, .18);
  --rule2: rgba(20, 20, 19, .08);
  --m: 56px; --g: 24px; --bar: 60px;
  --ff: "azo-sans-web", "Inter Tight", sans-serif;
  --out: cubic-bezier(.22, 1, .36, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  --t-mega: clamp(56px, 8.6vw, 136px);
  --t-xl: clamp(40px, 5.4vw, 86px);
  --t-l: clamp(32px, 3.6vw, 56px);
  --t-lead: clamp(19px, 1.5vw, 23px);
}
@media (max-width: 1100px) { :root { --m: 32px; --g: 18px; } }
@media (max-width: 720px) { :root { --m: 16px; --g: 12px; --bar: 54px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ff); font-weight: 400; font-size: 16px; line-height: 1.5;
  font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-feature-settings: "tnum" 0;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
section[tabindex="-1"]:focus { outline: none; }

/* ---------- grid + type ---------- */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.cap { font-size: 11.5px; line-height: 1.35; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.xl { font-size: var(--t-xl); line-height: .98; letter-spacing: -.035em; font-weight: 400; }
.l { font-size: var(--t-l); line-height: 1.02; letter-spacing: -.03em; font-weight: 400; }
.lead { font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.01em; }
.body { font-size: 16px; color: var(--mute); max-width: 36em; }
.fn { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .6em; }
.nb { white-space: nowrap; }
figcaption { font-size: 12.5px; line-height: 1.4; color: var(--mute); padding-top: 10px; display: flex; gap: 0; }
figcaption .fn { color: var(--ink); }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brick); border: 1px solid var(--brick); border-radius: 999px; padding: 4px 10px 3px; line-height: 1.2; white-space: nowrap; }
.tag-s { color: var(--mute); border-color: var(--rule); }

.btn { display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; padding: 15px 22px; border-radius: 999px; transition: background .3s var(--out); }
.btn:hover { background: #2b2a27; }
.btn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--olive); transition: transform .45s var(--out); }
.btn:hover .dot, .btn:focus-visible .dot { transform: scale(1.6); }
.btn-l { font-size: 18px; padding: 20px 28px; }

/* sheet header: the strip each section starts with */
.sheet { align-items: baseline; border-top: 1px solid var(--ink); padding-top: 12px; padding-bottom: 12px; margin-inline: var(--m); padding-inline: 0; }
.sheet .sh-n { grid-column: 1 / 2; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.sheet .sh-t { grid-column: 2 / 8; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sheet .sh-r { grid-column: 8 / 13; text-align: right; font-size: 12.5px; color: var(--mute); }
@media (max-width: 720px) {
  .sheet .sh-n { grid-column: 1 / 3; } .sheet .sh-t { grid-column: 3 / 13; }
  .sheet .sh-r { grid-column: 1 / -1; text-align: left; padding-top: 2px; }
}

/* frames and masks (always show most of the photograph) */
.frame { position: relative; overflow: hidden; background: #e6e3da; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.crop::before, .crop::after { content: ""; position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none; }
.crop::before { left: 8px; top: 8px; border-left: 1px solid var(--white); border-top: 1px solid var(--white); }
.crop::after { right: 8px; bottom: 8px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); }
.mask-arch { border-radius: 999px 999px 0 0; }
.mask-pill { border-radius: 999px; }
.mask-circle { border-radius: 50%; aspect-ratio: 1; }

/* reveals */
.js [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js [data-rv].in { opacity: 1; transform: none; }
.js .plate[data-rv] .frame img, .js figure[data-rv] .frame img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1.1s var(--out), transform 1.6s var(--out); }
.js .plate[data-rv].in .frame img, .js figure[data-rv].in .frame img { clip-path: inset(0); transform: none; }

/* ---------- top bar: transparent over the photograph, paper after it ---------- */
.bar { position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--m); background: rgba(244, 242, 236, .94); border-bottom: 1px solid var(--rule); color: var(--ink);
  transition: background .5s var(--out), color .5s var(--out), border-color .5s var(--out); }
.bar.on-photo { background: transparent; color: var(--white); border-bottom-color: transparent; }
.bar-logo { display: block; width: 104px; color: inherit; }
.bar-logo svg { display: block; width: 100%; height: auto; }
.bar-sheet { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: opacity .4s var(--out); }
.bar.on-photo .bar-sheet { opacity: 0; }
.bar-sheet .bs-t { display: inline-block; transition: opacity .3s var(--out), transform .3s var(--out); }
.bar-sheet .bs-t.sw { opacity: 0; transform: translateY(6px); }
.bar-r { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.bar-clock { font-size: 13px; font-variant-numeric: tabular-nums; }
.bar-clock .lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.bar-book { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--butter); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; transition: transform .4s var(--out); }
.bar-book:hover { transform: translateY(-1px); }
.bar-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bar-menu .mi { position: relative; width: 26px; height: 18px; }
.bar-menu .mi i { position: absolute; top: 0; width: 10px; height: 18px; border: 1.25px solid currentColor; border-radius: 6px; transition: transform .5s var(--out); }
.bar-menu .mi i:first-child { left: 2px; } .bar-menu .mi i:last-child { right: 2px; }
.bar-menu:hover .mi i:first-child { transform: translateX(-2px); } .bar-menu:hover .mi i:last-child { transform: translateX(2px); }
.bar-menu[aria-expanded="true"] .mi i:first-child { transform: translateX(6px) rotate(45deg); }
.bar-menu[aria-expanded="true"] .mi i:last-child { transform: translateX(-6px) rotate(-45deg); }
.bar.on-photo :focus-visible { outline-color: var(--white); }
@media (max-width: 900px) { .bar-clock, .bar-sheet { display: none; } .bar { grid-template-columns: 1fr auto; } }
@media (max-width: 720px) { .bar-logo { width: 88px; } .bar-r { gap: 14px; } .bar-menu .lbl { display: none; } .bar-book { min-height: 34px; padding: 0 14px; } }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 35; background: var(--paper); padding-top: calc(var(--bar) + 28px); overflow-y: auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--out); }
.menu.open { clip-path: inset(0); }
.menu-in { align-items: start; padding-bottom: 40px; }
.menu-k { grid-column: 1 / -1; color: var(--mute); border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 8px; }
.menu-nav { grid-column: 1 / 8; }
.menu-nav li { border-bottom: 1px solid var(--rule); }
.menu-nav a { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; text-decoration: none; padding: 8px 0 7px; font-size: clamp(26px, 3.1vw, 44px); letter-spacing: -.03em; line-height: 1.1; }
.menu-nav a .n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--mute); }
.menu-nav a::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--olive); transform: scale(0); transition: transform .4s var(--out); align-self: center; }
.menu-nav a:hover::after, .menu-nav a:focus-visible::after, .menu-nav a[aria-current]::after { transform: scale(1); }
.menu-nav a .t { transition: transform .45s var(--out); }
.menu-nav a:hover .t { transform: translateX(10px); }
.js .menu li { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--out), transform .6s var(--out); }
.menu.open li { opacity: 1; transform: none; }
.menu-side { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 10px; }
.menu-plan { width: 100%; border: 1px solid var(--rule); background: var(--white); padding: 14px; margin-bottom: 6px; }
.menu-plan svg { width: 100%; height: auto; display: block; }
.menu-stay { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) {
  .menu-nav, .menu-side { grid-column: 1 / -1; }
  .menu-nav a { grid-template-columns: 44px 1fr auto; font-size: 27px; padding: 9px 0; }
  .menu-side { padding-top: 24px; }
  .menu-plan { display: none; }
}

/* ---------- 01 hero: full-bleed photograph above, paper below, one fine circle across both ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; }
.hero-photo { position: relative; flex: 0 0 72%; overflow: hidden; background: #cfd6c4; will-change: clip-path; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-photo img.ld { transform: scale(1.07); }
.hero-photo img.go { transform: none; transition: transform 2600ms cubic-bezier(.22,1,.36,1); }
.hero-photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(rgba(20,20,19,.28), rgba(20,20,19,0)); pointer-events: none; } /* keeps the white bar readable; the photograph itself is untouched */
.hero-o { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.ho-g { transition: none; }
.ho-line { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ho-w .ho-line { stroke: var(--white); }
.ho-k .ho-line { stroke: var(--ink); }
.ho-dot { fill: var(--butter); }
.hero-paper { position: relative; flex: 1; align-items: end; padding-bottom: 30px; padding-top: 22px; z-index: 3; }
.hero-paper h1 { grid-column: 1 / 7; font-size: clamp(54px, 6.4vw, 104px); white-space: nowrap; font-weight: 400; letter-spacing: -.045em; line-height: .9; }
.hero-side { grid-column: 1 / 5; grid-row: 1; align-self: start; display: none; }
.hero-paper .hero-side { display: flex; flex-direction: column; gap: 12px; grid-column: 1 / 6; grid-row: 1; align-self: start; padding-top: 2px; }
.hero-paper h1 { grid-row: 2; padding-top: 14px; }
.hero-side .lead { font-size: 17px; max-width: 26em; }
.seq { display: flex; align-items: center; font-size: 13px; width: min(100%, 340px); }
.seq li { display: flex; align-items: center; flex: 1; gap: 10px; color: var(--mute); }
.seq li::after { content: ""; flex: 1; height: 1px; background: var(--rule); margin-right: 10px; }
.seq li.oh { flex: 0 0 auto; color: var(--ink); font-weight: 700; }
.seq li.oh::after { display: none; }
.hero-clock { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hero-clock time { font-size: clamp(30px, 3.2vw, 50px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-clock .cap, .hero-clock .o-line { color: var(--mute); }
.hero-clock .o-line { font-size: 13.5px; }
.hero-place { position: absolute; left: var(--m); top: calc(72% - 34px); color: var(--white); z-index: 3; }
.js .hero-paper > *, .js .hero-place { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--out), transform 1s var(--out); }
.hero-in .hero-paper > *, .hero-in .hero-place { opacity: 1; transform: none; }
.hero-in .hero-paper h1 { transition-delay: .9s; } .hero-in .hero-side { transition-delay: 1.15s; } .hero-in .hero-clock { transition-delay: 2.1s; } .hero-in .hero-place { transition-delay: 1.4s; }
@media (max-width: 720px) {
  .hero { height: auto; min-height: 0; }
  .hero-photo { flex: none; height: 64svh; }
  .hero-photo img { object-position: 50% 50%; }
  .hero-paper { padding-top: 20px; padding-bottom: 28px; }
  .hero-paper h1 { grid-column: 1 / -1; grid-row: 1; font-size: 58px; white-space: normal; padding-top: 0; }
  .hero-paper .hero-side { grid-column: 1 / -1; grid-row: 2; padding-top: 18px; }
  .hero-clock { position: static; grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: baseline; gap: 10px; padding-top: 16px; text-align: left; }
  .hero-clock time { font-size: 22px; }
  .hero-place { top: calc(64svh - 30px); }
}

/* ---------- 02 intro ---------- */
.intro { padding-top: 120px; }
.intro-a { padding-top: 36px; }
.intro-a h2 { grid-column: 1 / 11; }
.intro-b { padding-top: 72px; align-items: start; }
.schedule { grid-column: 1 / 5; border-top: 1px solid var(--ink); }
.schedule div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 13px 0 12px; border-bottom: 1px solid var(--rule); }
.schedule dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.schedule dd { font-size: 16px; line-height: 1.4; }
.intro-plate { grid-column: 6 / 13; }
.intro-plate .frame { aspect-ratio: 2400 / 1749; }
.ideas { padding-top: 96px; }
.ideas-k { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 0; }
.ideas-l { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
.ideas-l li { display: grid; grid-template-rows: 150px auto auto; padding: 22px 22px 22px 0; border-right: 1px solid var(--rule); }
.ideas-l li + li { padding-left: 22px; }
.ideas-l li:last-child { border-right: 0; }
.ideas-l .mk { display: flex; align-items: center; color: var(--ink); }
.ideas-l .mk svg { height: 96px; width: auto; overflow: visible; }
.ideas-l b { font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.ideas-l li > span:last-child { font-size: 14px; color: var(--mute); padding-top: 4px; }
@media (max-width: 1100px) { .schedule { grid-column: 1 / 7; } .intro-plate { grid-column: 7 / 13; } }
@media (max-width: 720px) {
  .intro { padding-top: 72px; }
  .intro-a h2, .schedule, .intro-plate { grid-column: 1 / -1; }
  .intro-b { padding-top: 40px; row-gap: 40px; }
  .ideas { padding-top: 64px; }
  .ideas-l { grid-template-columns: 1fr 1fr; }
  .ideas-l li { grid-template-rows: 110px auto auto; padding: 18px 14px 18px 0; border-bottom: 1px solid var(--rule); }
  .ideas-l li:nth-child(2n) { border-right: 0; padding-left: 14px; }
  .ideas-l li:nth-child(3) { padding-left: 0; }
  .ideas-l .mk svg { height: 72px; }
  .ideas-l b { font-size: 22px; }
}

/* icons */
.ico { fill: none; stroke: currentColor; stroke-width: 1.25px; stroke-linecap: butt; }
.ico * { vector-effect: non-scaling-stroke; }
.ico .f { fill: currentColor; stroke: none; }

/* mark styles */
.mk-s { fill: none; stroke: currentColor; stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.mk-f { fill: var(--olive); }
.mk-r { stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---------- 03 section (scroll-scrubbed elevation) ---------- */
.section { padding-top: 140px; }
.scrub { height: 380vh; position: relative; }
.stick { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 18px; }
.sec-head { align-items: end; padding-top: 18px; }
.sec-head h2 { grid-column: 1 / 9; }
.sec-read { grid-column: 9 / 13; text-align: right; color: var(--mute); }
.sec-read b { color: var(--ink); font-size: 30px; letter-spacing: -.02em; font-weight: 400; font-variant-numeric: tabular-nums; text-transform: none; margin-left: 10px; display: inline-block; min-width: 4.3em; text-align: right; }
.sec-draw { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-inline: var(--m); padding-block: 10px; }
.sd-box { position: relative; width: 100%; }
.sd-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sd-lbls { position: absolute; inset: 0; pointer-events: none; }
.lb { position: absolute; font-size: 12px; line-height: 1.2; white-space: nowrap; transform: translate(-50%, -100%); padding-bottom: 6px; transition: opacity .4s var(--out); }
.lb.l { transform: translate(-100%, -50%); padding: 0 8px 0 0; }
.lb.r { transform: translate(0, -50%); padding: 0 0 0 8px; }
.lb.sc { font-size: 10.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lb.cap { font-size: 10.5px; }
.lb.off { opacity: 0; }
.sec-steps { padding-top: 10px; }
.sec-steps li { grid-column: span 3; border-top: 1px solid var(--rule); padding-top: 10px; display: grid; grid-template-columns: 36px 1fr; column-gap: 4px; color: var(--mute); transition: color .4s var(--out), border-color .4s var(--out); }
.sec-steps li .n { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; padding-top: 6px; }
.sec-steps li b { font-weight: 400; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; color: inherit; }
.sec-steps li > span:last-child { grid-column: 2; font-size: 14px; line-height: 1.4; padding-top: 4px; }
.sec-steps li.on { color: var(--ink); border-top-color: var(--ink); }
.sec-steps li.on .n { color: var(--olive); }
/* drawing styles (side view). --u = one screen pixel in metres, set by JS */
#side, #bb-side { --u: .03; }
.d-s { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.2px); stroke-linejoin: round; }
#side .k-earth, #bb-side .k-earth { fill: url(#hatch); stroke: none; }
#side .k-ground, #bb-side .k-ground { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.4px); }
#side .k-col, #bb-side .k-col { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.6px); }
#side .k-slab, #bb-side .k-slab { fill: var(--white); stroke: var(--ink); stroke-width: calc(var(--u) * 1.1px); }
#side .k-back, #bb-side .k-back { fill: var(--paper); stroke: none; }
#side .k-room, #bb-side .k-room { fill: rgba(255,255,255,.7); stroke: var(--ink); stroke-width: calc(var(--u) * 1.3px); }
#side .k-roof, #bb-side .k-roof { fill: var(--ink); stroke: var(--ink); stroke-width: calc(var(--u) * .8px); }
#side .k-brickf, #bb-side .k-brickf { fill: var(--brick); stroke: var(--brick); stroke-width: calc(var(--u) * 1px); }
#side .k-water, #bb-side .k-water { fill: rgba(102, 153, 255, .32); stroke: var(--ink); stroke-width: calc(var(--u) * 1.1px); }
#side .k-stair, #bb-side .k-stair { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.1px); stroke-dasharray: calc(var(--u) * 5px) calc(var(--u) * 3px); }
#side .k-palm, #bb-side .k-palm { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1px); }
#side .k-crown, #bb-side .k-crown { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 2px) calc(var(--u) * 3px); }
#side .scale { stroke: var(--ink); stroke-width: calc(var(--u) * 1px); fill: none; }
#side .lvl { stroke: var(--olive); stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 6px) calc(var(--u) * 4px); }
#side .lvl-dot { fill: var(--olive); }
#side .dimx, #bb-side .dimx { stroke: var(--ink); stroke-width: calc(var(--u) * 1px); fill: none; }
#side .plot { stroke-dasharray: 1 1; }
#side .fillin { transition: fill-opacity .5s var(--out); }
#side.hl-stairs .k-stair { stroke: var(--olive); stroke-width: calc(var(--u) * 2.2px); stroke-dasharray: none; }
#side.hl-rooms .k-room { fill: rgba(151,134,3,.14); }
#side.hl-pool .k-water { fill: rgba(102, 153, 255, .6); }
@media (max-width: 720px) {
  .section { padding-top: 80px; }
  .scrub { height: 320vh; }
  .sec-head h2 { grid-column: 1 / -1; }
  .sec-read { grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .sec-read b { font-size: 22px; text-align: left; margin-left: 6px; }
  .sec-draw { flex: 0 0 auto; padding-block: 28px; }
  .sec-steps li { grid-column: 1 / -1; display: none; }
  .sec-steps li.on { display: grid; }
  .lb { font-size: 9.5px; } .lb.hide-s { display: none; }
}

/* ---------- 04 plates ---------- */
.plates { padding-top: 140px; }
.sp1 { padding-top: 36px; row-gap: 0; }
.dim { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.dim i { flex: 1; height: 1px; background: var(--ink); position: relative; opacity: .5; }
.dim i:first-child::before, .dim i:last-child::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--ink); }
.dim i:first-child::before { left: 0; } .dim i:last-child::after { right: 0; }
.dim-h { grid-column: 1 / -1; padding-bottom: 12px; }
.pl-swim { grid-column: 1 / -1; }
.pl-swim .frame { aspect-ratio: 2200 / 854; }
.sp1-h { grid-column: 1 / 7; padding-top: 40px; }
.sp1-p { grid-column: 8 / 12; padding-top: 52px; }
.sp1-c { grid-column: 8 / 12; padding-top: 18px; color: var(--mute); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.sp1-c .fn { color: var(--ink); }
.sp2 { padding-top: 120px; align-items: start; }
.pl-shadow { grid-column: 1 / 6; }
.pl-shadow .frame { aspect-ratio: 1477 / 1800; }
.pl-living { grid-column: 7 / 13; margin-top: 180px; }
.pl-living .frame { aspect-ratio: 2055 / 2200; }
.sp2-q { grid-column: 7 / 11; grid-row: 1; font-size: var(--t-lead); line-height: 1.35; display: flex; flex-direction: column; gap: 10px; }
.sp2-q .cap { color: var(--mute); }
.sp3 { padding-top: 120px; align-items: end; }
.pl-window { grid-column: 2 / 5; }
.pl-window .frame { aspect-ratio: 1207 / 1303; }
.pl-curtain { grid-column: 6 / 13; }
.pl-curtain .frame { aspect-ratio: 1448 / 1086; }
@media (max-width: 720px) {
  .plates { padding-top: 88px; }
  .sp1-h, .sp1-p, .sp1-c { grid-column: 1 / -1; }
  .sp1-h { padding-top: 24px; } .sp1-p { padding-top: 16px; }
  .sp2, .sp3 { padding-top: 64px; row-gap: 32px; }
  .pl-shadow { grid-column: 1 / 10; } .pl-living { grid-column: 3 / -1; margin-top: 0; }
  .sp2-q { grid-column: 1 / -1; grid-row: auto; order: -1; }
  .pl-window { grid-column: 1 / 8; } .pl-curtain { grid-column: 1 / -1; }
}

/* ---------- 05 openings ---------- */
.nature { padding-top: 140px; }
.na-a { padding-top: 36px; align-items: start; row-gap: 0; }
.na-palm { grid-column: 1 / 6; grid-row: 1 / 3; }
.na-palm .frame { aspect-ratio: 899 / 1155; }
.na-text { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 22px; padding-top: 20px; }
.details { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); padding-top: 64px; align-self: end; }
.details li { border-top: 1px solid var(--ink); padding-top: 12px; }
.det { width: 100%; aspect-ratio: 1; display: block; background: var(--white); border: 1px solid var(--rule); }
.details p { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.details p b { font-size: 22px; color: var(--ink); font-weight: 400; }
.band { height: 120px; margin-top: 120px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; }
.band svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .nature { padding-top: 88px; }
  .na-palm { grid-column: 1 / 10; grid-row: auto; }
  .na-text, .details { grid-column: 1 / -1; }
  .na-text { padding-top: 32px; }
  .details { padding-top: 40px; gap: 10px; }
  .details p b { font-size: 18px; } .details p { font-size: 11px; flex-direction: column; }
  .band { height: 80px; margin-top: 72px; }
}
/* plan drawing styles (shared by plan, details, footer, menu) */
.pd { --u: .04; }
.pd .ghost { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 3px) calc(var(--u) * 3px); }
.pd .k-deck { fill: var(--white); stroke: var(--ink); stroke-width: calc(var(--u) * 1.2px); }
.pd .k-room { fill: var(--white); stroke: var(--ink); stroke-width: calc(var(--u) * 1.4px); transition: fill .4s var(--out), stroke .4s var(--out); }
.pd .k-back { fill: var(--white); stroke: none; }
.pd .k-bench { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: calc(var(--u) * .8px); }
.pd .k-poolin { fill: rgba(102, 153, 255, .28); stroke: var(--ink); stroke-width: calc(var(--u) * 1.2px); transition: fill .4s var(--out); }
.pd .k-thin, .pd .k-tread { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: calc(var(--u) * .8px); }
.pd .k-open { fill: var(--paper); stroke: var(--ink); stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 3px) calc(var(--u) * 2px); transition: fill .4s var(--out); }
.pd .k-plant { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1px); }
.pd .k-brick { fill: none; stroke: var(--brick); stroke-width: calc(var(--u) * 4px); }
.pd .k-concw { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 4px); stroke-opacity: .45; }
.pd .hl.k-room, .pd .hl .k-room, .pd .pv.k-room, .pd .pv .k-room { fill: rgba(151, 134, 3, .22); stroke: var(--olive); stroke-width: calc(var(--u) * 2.2px); }
.pd .hl.k-deck, .pd .pv.k-deck { fill: rgba(151, 134, 3, .16); stroke: var(--olive); stroke-width: calc(var(--u) * 2px); }
.pd .hl .k-open, .pd .pv .k-open { fill: rgba(151, 134, 3, .3); stroke: var(--olive); stroke-dasharray: none; }
.pd .hl .k-poolin, .pd .pv .k-poolin { fill: rgba(102, 153, 255, .62); stroke: var(--ink); }
.pd .hl .k-thin, .pd .hl .k-tread, .pd .pv .k-thin, .pd .pv .k-tread { stroke: var(--olive); stroke-opacity: 1; stroke-width: calc(var(--u) * 1.6px); }
.pd .det-hl { fill: none; stroke: var(--olive); stroke-width: calc(var(--u) * 2.2px); }
.pd .dimx { stroke: var(--ink); stroke-width: calc(var(--u) * 1px); fill: none; }

/* ---------- 06 plan ---------- */
.plan { padding-top: 140px; position: relative; }
.plan-head { padding-top: 36px; align-items: end; }
.plan-head h2 { grid-column: 1 / 8; }
.plan-head .lead { grid-column: 9 / 13; color: var(--ink); }
.plan-body { padding-top: 56px; align-items: start; row-gap: 28px; }
.plan-draw { grid-column: 1 / 9; position: relative; }
.plan-draw svg { width: 100%; height: auto; display: block; overflow: visible; }
.plan-draw svg .tap { cursor: pointer; }
.scalebar { display: grid; grid-template-columns: repeat(5, 1fr); width: calc(5 / 27.5 * 100%); margin-top: 8px; position: relative; padding-bottom: 16px; }
.scalebar i { height: 5px; border: 1px solid var(--ink); }
.scalebar i:nth-child(odd) { background: var(--ink); }
.scalebar span { position: absolute; bottom: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.scalebar span:first-of-type { left: 0; } .scalebar span:last-of-type { right: 0; transform: translateX(50%); }
.plan-fig { grid-column: 10 / 13; grid-row: 1 / 3; }
.pf-frame { aspect-ratio: 4 / 5; background: var(--white); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.pf-frame img, .pf-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-frame img { animation: pfin .7s var(--out); }
.pf-frame svg { padding: 10%; }
@keyframes pfin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.plan-fig figcaption { flex-direction: column; gap: 4px; }
.plan-fig figcaption b { color: var(--ink); font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.plan-legend { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--g); border-top: 1px solid var(--ink); }
.plan-legend button { width: 100%; text-align: left; display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; transition: color .3s var(--out); }
.plan-legend .n { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--mute); width: 22px; }
.plan-legend button:hover { color: var(--olive); }
.plan-legend button[aria-pressed="true"] { font-weight: 700; }
.plan-legend button[aria-pressed="true"] .n { color: var(--ink); }
.plan-legend button[aria-pressed="true"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--olive); margin-left: auto; align-self: center; }
.leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leader path { fill: none; stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.leader path.go { transition: stroke-dashoffset .8s var(--out); }
.leader circle { fill: var(--olive); }
@media (max-width: 720px) {
  .plan { padding-top: 88px; }
  .plan-head h2, .plan-head .lead { grid-column: 1 / -1; }
  .plan-head .lead { padding-top: 16px; }
  .plan-body { padding-top: 32px; }
  .plan-draw, .plan-legend { grid-column: 1 / -1; }
  .plan-fig { grid-column: 2 / 12; grid-row: auto; margin-top: 18px; }
  .plan-legend { grid-template-columns: 1fr 1fr; }
  .plan-legend button { font-size: 14px; }
}

/* ---------- 07 a day ---------- */
.day { padding-top: 140px; }
.day-scrub { position: relative; }
.day-stick { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); overflow: hidden; display: flex; flex-direction: column; padding-top: 18px; }
.day-head { align-items: end; padding-top: 18px; }
.day-head h2 { grid-column: 1 / 7; }
.sun { grid-column: 7 / 13; width: 100%; height: 96px; overflow: visible; }
.sun-arc { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; opacity: .5; }
.sun-hz { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sun-dot { fill: var(--butter); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.day-track { flex: 1; display: flex; gap: calc(var(--g) * 2.5); padding: 28px var(--m) 24px; align-items: stretch; will-change: transform; }
.mo { flex: 0 0 auto; width: clamp(280px, 27vw, 400px); display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 12px; min-height: 0; }
.mo .n { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; }
.mo .frame { flex: 1; min-height: 0; max-height: 52vh; }
.mo .mask-circle { flex: 0 0 auto; width: 100%; max-height: none; max-width: 46vh; }
.mo .mask-pill { width: 66%; flex: 1; }
.mo:nth-child(even) { padding-top: 64px; }
.mo p { font-size: 28px; letter-spacing: -.02em; line-height: 1.1; }
.mo p .km { display: block; color: var(--mute); padding-top: 8px; font-size: 11px; letter-spacing: .12em; }
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .day-stick { position: static; height: auto; overflow: visible; }
  .day-track { flex-direction: column; gap: 48px; transform: none !important; padding-top: 36px; }
  .mo { width: auto; }
  .mo:nth-child(even) { padding-top: 12px; padding-left: 18%; }
  .mo .frame { flex: none; max-height: none; aspect-ratio: 4 / 5; }
  .mo .mask-circle { aspect-ratio: 1; max-width: none; }
  .mo .mask-pill { aspect-ratio: 3 / 4.6; width: 70%; }
  .sun { display: none; }
  .day-head h2 { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .day { padding-top: 88px; } .mo p { font-size: 24px; } }

/* ---------- 08 before you book ---------- */
.before { padding: 140px var(--m) 0; }
.sheetframe { border: 1px solid var(--ink); padding: 8px; background: var(--white); }
.sf-in { border: 1px solid var(--rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 36px 32px 0; position: relative;
  background-image: linear-gradient(var(--rule2) 1px, transparent 1px), linear-gradient(90deg, var(--rule2) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.bb-head { grid-column: 1 / 7; }
.bb-head .lead { padding-top: 14px; }
.bb-draw { grid-column: 1 / 9; position: relative; margin-top: 30px; }
.bb-draw svg { width: 100%; height: auto; display: block; overflow: visible; }
.bb-calls { position: absolute; inset: 0; pointer-events: none; }
.call { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); background: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .04em; transition: background .3s var(--out), color .3s var(--out), transform .4s var(--out); }
.bb-calls .call { position: absolute; transform: translate(-50%, -50%); }
.call.on { background: var(--ink); color: var(--white); }
.bb-calls .call.on { transform: translate(-50%, -50%) scale(1.15); }
.bb-road { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; }
.bb-road .frame { aspect-ratio: 1179 / 1259; }
.bb-road figcaption { align-items: center; gap: 10px; }
.bb-road figcaption .call { width: 26px; height: 26px; }
.bb-legend { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--g); margin-top: 40px; border-top: 1px solid var(--ink); }
.bb-legend li { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 18px 18px 26px 0; border-right: 1px solid var(--rule); outline-offset: -2px; }
.bb-legend li + li { padding-left: 18px; }
.bb-legend li:last-child { border-right: 0; }
.bb-legend .ic { grid-row: 1 / 3; width: 44px; height: 44px; color: var(--ink); }
.bb-legend .ic svg { width: 44px; height: 44px; }
.bb-legend .call { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.bb-legend h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; align-self: end; }
.bb-legend h3 { grid-column: 2; grid-row: 1; align-self: center; }
.bb-legend .t { grid-column: 2; font-size: 22px; letter-spacing: -.015em; line-height: 1.2; padding-top: 4px; }
.bb-legend p:not(.t) { grid-column: 2; font-size: 14.5px; color: var(--mute); padding-top: 10px; }
.bb-legend .ph { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bb-legend li.on { background: rgba(151, 134, 3, .07); }
.titleblock { grid-column: 1 / 13; display: grid; grid-template-columns: 1.3fr .8fr 1.3fr 1.6fr 1fr; border-top: 1px solid var(--ink); margin-inline: -32px; }
.titleblock div { padding: 10px 14px 12px; border-right: 1px solid var(--rule); }
.titleblock div:last-child { border-right: 0; }
.titleblock dt { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.titleblock dd { font-size: 15px; padding-top: 2px; }
@media (max-width: 1100px) { .bb-legend { grid-template-columns: 1fr; } .bb-legend li { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; } }
@media (max-width: 720px) {
  .before { padding-top: 88px; }
  .sheetframe { padding: 5px; }
  .sf-in { padding: 22px 14px 0; grid-template-columns: 1fr; background-size: 24px 24px; }
  .bb-head, .bb-draw, .bb-road, .bb-legend, .titleblock { grid-column: 1 / -1; grid-row: auto; }
  .bb-road { width: 70%; margin-top: 28px; }
  .bb-legend .t { font-size: 19px; }
  .call { width: 24px; height: 24px; font-size: 10px; }
  .titleblock { grid-template-columns: 1fr 1fr; margin-inline: -14px; }
  .titleblock div { border-bottom: 1px solid var(--rule); }
}

/* ---------- 09 location ---------- */
.location { padding-top: 140px; }
.lo-a { padding-top: 36px; align-items: end; }
.lo-a h2 { grid-column: 1 / 8; }
.lo-clock { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 6px; }
.lo-clock .cap { color: var(--mute); }
.lo-clock .big { font-size: var(--t-mega); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.lo-diff { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }
.dist { position: relative; margin: 88px var(--m) 0; height: 150px; }
.dist-svg { position: absolute; left: 0; top: 30px; width: 100%; height: 120px; overflow: visible; }
.d-line { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--io) .2s; }
.dist.in .d-line, html:not(.js) .d-line { stroke-dashoffset: 0; }
.d-tick { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.d-sea { stroke: var(--blue); stroke-width: 5px; vector-effect: non-scaling-stroke; }
.d-dot { position: absolute; left: 2%; top: 100px; width: 34px; height: 34px; border-radius: 50%; background: var(--olive); transform: translate(-50%, -50%); }
.d-l, .d-m, .d-r { position: absolute; }
.d-l { left: 0; top: 0; } .d-r { right: 0; top: 0; text-align: right; }
.d-l span, .d-r span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--mute); }
.d-m { left: 50%; top: 66px; transform: translateX(-50%); background: var(--paper); padding: 0 16px; }
.d-m .cap { font-size: 13px; }
@media (max-width: 720px) {
  .location { padding-top: 88px; }
  .lo-a h2, .lo-clock { grid-column: 1 / -1; }
  .lo-clock { padding-top: 32px; }
  .dist { margin-top: 56px; }
  .d-dot { width: 22px; height: 22px; left: 3%; }
  .d-m .cap { font-size: 11px; }
}

/* ---------- 10 book ---------- */
.book { padding-top: 140px; padding-bottom: 120px; }
.bk-a { padding-top: 36px; align-items: center; }
.bk-text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.bk-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bk-guests { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.bk-guests b { font-weight: 700; }
.g4 { display: inline-flex; gap: 6px; }
.g4 i { width: 12px; height: 26px; border: 1.25px solid var(--ink); border-radius: 6px; }
.bk-stay { font-size: 15px; color: var(--mute); max-width: 34em; }
.bk-stay .u { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bk-stay .tag { margin-left: 6px; vertical-align: 1px; }
.bk-fig { grid-column: 8 / 13; position: relative; }
.bk-fig .frame { outline: 1px solid var(--ink); outline-offset: 14px; }
.bk-fig figcaption { padding-top: 28px; }
@media (max-width: 720px) {
  .book { padding-top: 88px; padding-bottom: 80px; }
  .bk-text, .bk-fig { grid-column: 1 / -1; }
  .bk-fig { padding: 48px 20px 0; }
  .btn-l { font-size: 16px; padding: 17px 22px; }
}

/* ---------- footer ---------- */
.foot { background: var(--paper); padding-bottom: 32px; }
.band-datum { height: 150px; margin-top: 0; border-color: var(--ink); }
.band-datum .pc { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill .5s var(--out); }
.band-datum .pc.on { fill: var(--olive); stroke: var(--olive); }
.band-datum .pp { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ft-a { padding-top: 64px; align-items: end; }
.ft-logo { grid-column: 1 / 9; color: var(--ink); }
.ft-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.fl-s { fill: none; stroke: var(--ink); stroke-width: calc(var(--u, .1) * 1.4px); }
.fl-w { fill: var(--ink); transition: opacity 1s var(--out) 1.2s; }
.fl-d { fill: var(--olive); transform-box: fill-box; transform-origin: center; transition: transform .9s var(--out) .9s; }
.ft-plan { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 8px; }
.ft-plan svg { width: 100%; height: auto; display: block; overflow: visible; }
.ft-plan .cap { color: var(--mute); }
.ft-b { padding-top: 48px; align-items: baseline; row-gap: 16px; border-top: 1px solid var(--ink); margin: 56px var(--m) 0; padding-inline: 0; padding-top: 16px; }
.ft-name { grid-column: 1 / 4; font-weight: 700; font-size: 14px; }
.ft-nav { grid-column: 4 / 9; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.ft-nav a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.ft-nav a:hover { border-color: var(--ink); }
.ft-time { grid-column: 9 / 11; color: var(--mute); text-align: right; }
.ft-top { grid-column: 11 / 13; text-align: right; text-decoration: none; }
@media (max-width: 720px) {
  .band-datum { height: 96px; }
  .ft-a { padding-top: 40px; row-gap: 32px; }
  .ft-logo, .ft-plan, .ft-name, .ft-nav { grid-column: 1 / -1; }
  .ft-time { grid-column: 1 / 7; } .ft-top { grid-column: 7 / 13; }
}

/* plotted lines (stroke-dashoffset); pathLength=1 is set by JS */
.plot { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.plot.drawn { stroke-dashoffset: 0; transition: stroke-dashoffset var(--pd, 1.4s) var(--io) var(--pdl, 0s); }

/* grid overlay */
.gridov { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .4s var(--out); }
.gridov .g12 { height: 100%; }
.gridov i { background: rgba(151, 134, 3, .07); border-inline: 1px solid rgba(151, 134, 3, .35); }
.grid-on .gridov { opacity: 1; }

/* ---------- reduced motion: everything visible and still ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; transition-delay: 0s !important; }
  .js [data-rv] { opacity: 1; transform: none; }
  .js .plate[data-rv] .frame img, .js figure[data-rv] .frame img { clip-path: none; transform: none; }
  .plot { stroke-dashoffset: 0 !important; }
  .scrub { height: auto; }
  .stick { position: static; height: auto; }
  .sec-draw { min-height: 0; }
  .sec-steps li { color: var(--ink); }
  .d-line { stroke-dashoffset: 0; }
  .menu { transition: none; }
}


/* ===================== CONCEPT 04 ===================== */
/* Colour arrives as whole blocks, one per section, with paper between them. Brick is the footer only. */
.blk-olive { background: var(--olive); color: var(--ink); }
.blk-butter { background: var(--butter); color: var(--ink); }
.blk-blue { background: var(--blue); color: var(--ink); }
.blk-olive, .blk-butter, .blk-blue { --rule: rgba(20,20,19,.26); --rule2: rgba(20,20,19,.1); --mute: rgba(20,20,19,.72); }
.blk-olive { color: var(--paper); --mute: rgba(244,242,236,.82); --rule: rgba(244,242,236,.34); }
.blk-olive .tag { color: var(--paper); border-color: rgba(244,242,236,.5); }
.blk-olive .det { background: rgba(244,242,236,.08); border-color: rgba(244,242,236,.3); }
.blk-olive .pd .k-deck, .blk-olive .pd .k-room, .blk-olive .pd .k-back { fill: none; stroke: var(--paper); }
.blk-olive .pd .k-open, .blk-olive .pd .k-plant, .blk-olive .pd .k-thin, .blk-olive .pd .k-tread, .blk-olive .pd .k-bench { stroke: var(--paper); }
.blk-olive .pd .det-hl { stroke: var(--butter); }
.blk-olive .pd .k-brick, .blk-olive .pd .k-concw { stroke: rgba(244,242,236,.45); }
section + section.blk-olive, section + section.blk-butter, section + section.blk-blue { margin-top: 0; }

/* section 03: the drawing keeps the left, a photograph of the same moment sits at the right */
.sec-draw { gap: var(--g); align-items: stretch; }
.sd-box { align-self: center; }
.sec-ph { flex: 0 0 clamp(200px, 21vw, 320px); display: flex; align-items: center; }
.sec-ph .frame { width: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; position: relative; background: #e6e3da; }
.sec-ph .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--out), transform 1.4s var(--out); }
.sec-ph .frame img.on { opacity: 1; transform: none; }
.sec-steps li.on .n { color: var(--brick); }
@media (max-width: 1100px) { .sec-ph { flex-basis: 180px; } }
@media (max-width: 720px) { .sec-ph { display: none; } }

/* interlude: one full-bleed photograph, text on paper under it */
.bleed { padding-top: 120px; }
.bleed-ph { position: relative; overflow: hidden; }
.bleed-ph img { width: 100%; height: clamp(320px, 62svh, 720px); object-fit: cover; }
.bleed-t { padding-top: 34px; align-items: end; }
.bleed-t h2 { grid-column: 1 / 7; }
.bleed-t .lead { grid-column: 8 / 12; }
@media (max-width: 720px) { .bleed { padding-top: 72px; } .bleed-t h2, .bleed-t .lead { grid-column: 1 / -1; } .bleed-t .lead { padding-top: 14px; } }

/* 02 intro */
.intro { padding-top: 110px; }
.ideas-l li { border-right-color: var(--rule); }
.ideas-l .mk .mk-f { fill: var(--brick); }

/* 04 openings on olive */
.nature { padding-top: 110px; padding-bottom: 110px; }
.na-a { padding-top: 0; }
@media (max-width: 720px) { .nature { padding-top: 64px; padding-bottom: 64px; } }

/* 06 plates: two filled brand shapes drift behind the photographs */
.plates { padding-top: 130px; }
.sp0 h2 { grid-column: 1 / 8; }
.sp2 { padding-top: 56px; position: relative; }
.sp3 { position: relative; }
.sh { position: absolute; z-index: -1; pointer-events: none; will-change: transform; }
.sh-butter { background: var(--butter); width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; border-radius: 50%; right: 4%; top: -6%; }
.sh-blue { background: var(--blue); width: 16vw; max-width: 190px; aspect-ratio: 1 / 2.1; border-radius: 999px; left: 36%; top: 6%; }
.pl-living { margin-top: 120px; }
.sp2-q { grid-column: 7 / 11; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.pl-window { grid-column: 1 / 5; }
.pl-window .frame { aspect-ratio: 3 / 4.4; }
@media (max-width: 720px) {
  .plates { padding-top: 80px; }
  .sp0 h2 { grid-column: 1 / -1; }
  .sh-butter { width: 62vw; height: 62vw; right: -10%; top: -4%; }
  .sh-blue { width: 34vw; left: 62%; top: 2%; }
  .pl-window { grid-column: 1 / 9; }
}

/* 07 a day, on butter */
.day { padding-top: 120px; padding-bottom: 40px; }
.day-head h2 { grid-column: 1 / 7; }
.sun-arc { stroke: var(--ink); opacity: .35; }
.sun-dot { fill: var(--paper); stroke: var(--ink); }
.mo { border-top-color: var(--ink); }
.mo .n { color: rgba(20,20,19,.66); font-size: 11px; }
.day-track { padding-bottom: 40px; }
@media (max-width: 720px) { .day { padding-top: 72px; padding-bottom: 56px; } }

/* 08 before you book: on paper, the sheet keeps its frame */
.before { padding-top: 130px; }
.sf-in { background-color: var(--white); }
.bb-legend li.on { background: rgba(251, 219, 138, .4); }
.call.on { background: var(--brick); border-color: var(--brick); color: var(--white); }
#bb-side .k-water { fill: rgba(102,153,255,.4); }
@media (max-width: 720px) { .before { padding-top: 80px; } }

/* 09 Tamarindo, on blue */
.location { padding-top: 110px; padding-bottom: 110px; }
.lo-a { padding-top: 0; }
.d-line, .d-tick { stroke: var(--ink); }
.d-dot { background: var(--brick); }
.d-m { background: var(--blue); }
.dist { margin-top: 64px; }
@media (max-width: 720px) { .location { padding-top: 64px; padding-bottom: 72px; } }

/* 10 book: the hand O traced around a butter circle, with the ! beside it */
.book { padding: 130px var(--m) 110px; }
.bk-stage { position: relative; display: grid; place-items: center; min-height: min(78svh, 680px); }
.bk-o { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(62vw, 560px); height: auto; aspect-ratio: 61 / 72; overflow: visible; pointer-events: none; }
.bk-line { fill: none; stroke: var(--ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.bk-disc { position: relative; width: min(52vw, 440px); aspect-ratio: 1; border-radius: 50%; background: var(--butter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 8%;
  transform: scale(.84); opacity: 0; transition: transform 1.1s var(--out) .5s, opacity .9s var(--out) .5s; }
.bk-stage.in .bk-disc, html:not(.js) .bk-disc { transform: none; opacity: 1; }
.bk-disc h2 { font-size: clamp(24px, 2.6vw, 40px); }
.bk-guests { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.g4 i { border-color: var(--ink); }
.bk-bang { position: absolute; right: 6%; top: 16%; display: flex; flex-direction: column; align-items: center; gap: 9%; width: clamp(34px, 4vw, 56px); aspect-ratio: 1 / 3.1; min-height: 44px; }
.bk-bang .bg-pill { flex: 1; width: 100%; border-radius: 999px; background: var(--brick); }
.bk-bang .bg-dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--brick); }
.bk-bang.hop { animation: hop .9s var(--out); }
@keyframes hop { 0% { transform: none; } 30% { transform: translateY(-16px) rotate(-6deg); } 60% { transform: translateY(0) rotate(2deg); } 100% { transform: none; } }
.bk-stay { max-width: 42em; margin: 44px auto 0; text-align: center; font-size: 15px; color: var(--mute); }
.bk-stay .u { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .book { padding-top: 80px; padding-bottom: 72px; }
  .bk-stage { min-height: 0; padding: 40px 0 20px; }
  .bk-o { width: 92vw; }
  .bk-disc { width: 82vw; gap: 16px; }
  .bk-disc h2 { font-size: 24px; }
  .bk-bang { right: 0; top: 2%; width: 34px; }
  .btn-l { font-size: 15px; padding: 15px 20px; }
}

/* footer: the one brick surface */
.foot { background: var(--brick); color: var(--paper); --mute: rgba(244,242,236,.78); --rule: rgba(244,242,236,.3); padding-bottom: 36px; }
.foot .ft-logo { color: var(--paper); }
.fl-s { stroke: var(--paper); }
.fl-w { fill: var(--paper); }
.fl-d { fill: var(--butter); }
.band-datum { border-color: rgba(244,242,236,.3); height: 120px; }
.band-datum .pc { stroke: rgba(244,242,236,.55); }
.band-datum .pc.on { fill: var(--butter); stroke: var(--butter); }
.band-datum .pp { stroke: rgba(244,242,236,.4); }
.ft-plan .pd .k-deck, .ft-plan .pd .k-open, .ft-plan .pd .k-poolin, .ft-plan .pd .ghost { stroke: var(--paper); fill: none; }
.ft-b { border-top-color: rgba(244,242,236,.4); }
.ft-nav a { border-bottom-color: rgba(244,242,236,.35); }
.ft-nav a:hover { border-color: var(--paper); }

/* reduced motion additions */
@media (prefers-reduced-motion: reduce) {
  .js .hero-paper > *, .js .hero-place { opacity: 1; transform: none; }
  .hero-photo img.ld { transform: none; }
  .sec-ph .frame img { transition: none; }
  .bk-disc { opacity: 1; transform: none; }
  .sh { display: none; }
}


/* --- review pass --- */
.plates, .book, .hero { overflow-x: clip; }
/* 03 section: head, drawing and steps all fit one screen */
.stick { padding-bottom: 24px; }
.sec-draw { padding-block: 6px; }
.sec-steps { padding-top: 14px; flex: 0 0 auto; }
.sec-steps li { padding-top: 9px; }
.sec-steps li b { font-size: 22px; }
.sec-steps li > span:last-child { font-size: 13px; }
/* 06 plates: the butter circle sits behind the photographs, not behind the heading */
.sh-butter { right: 2%; top: 14%; width: 26vw; height: 26vw; }
.sh-blue { left: 30%; top: 14%; width: 13vw; }
@media (max-width: 720px) { .sh-butter { width: 54vw; height: 54vw; right: -6%; top: 10%; } .sh-blue { width: 30vw; left: 58%; top: 6%; } }
/* 10 book: the ! stands beside the circle, the aside sits under it */
.bk-bang { right: 10%; top: 24%; }
.bk-stay { margin-top: 36px; }
@media (max-width: 720px) { .bk-bang { right: 2%; top: 8%; } }


/* --- review pass 2 --- */
/* the butter circle belongs to the photographs, half behind the living room plate */
.sh-butter { right: 6%; top: 30%; width: 22vw; height: 22vw; }
.sp2-q { grid-column: 7 / 11; padding-top: 6px; }
.sh-blue { left: 26%; top: 20%; width: 12vw; }
@media (max-width: 720px) {
  .sh-butter { width: 46vw; height: 46vw; right: -4%; top: 26%; }
  .sh-blue { width: 26vw; left: 60%; top: 10%; }
  .sp2-q { padding-top: 0; }
}
/* the "!" keeps the logo's own proportions: a tall pill and a dot */
.bk-bang { right: 13%; top: 21%; width: clamp(30px, 3.4vw, 48px); aspect-ratio: 1 / 3.6; gap: 11%; }
@media (max-width: 720px) { .bk-bang { right: 1%; top: 6%; width: 30px; } }


/* --- review pass 3: the photography section is a composition, not a scatter --- */
.sp2 { padding-top: 48px; align-items: start; }
.pl-shadow { grid-column: 1 / 6; }
.sp2-q { grid-column: 7 / 12; grid-row: 1; font-size: clamp(21px, 1.8vw, 28px); padding-top: 0; }
.pl-living { grid-column: 7 / 13; grid-row: 1; margin-top: 150px; }
.sh-butter { left: 52%; top: 26%; width: 20vw; height: 20vw; right: auto; }
.sp3 { padding-top: 72px; align-items: start; }
.pl-window { grid-column: 1 / 5; margin-top: 60px; }
.pl-curtain { grid-column: 6 / 13; }
.sh-blue { left: 31%; top: 36%; width: 11vw; }
@media (max-width: 720px) {
  .sp2 { padding-top: 36px; row-gap: 28px; }
  .pl-shadow { grid-column: 1 / 10; }
  .pl-living { grid-column: 3 / -1; grid-row: auto; margin-top: 0; }
  .sp2-q { grid-column: 1 / -1; grid-row: auto; order: -1; }
  .sp3 { padding-top: 48px; row-gap: 28px; }
  .pl-window { grid-column: 1 / 8; margin-top: 0; }
  .sh-butter { left: auto; right: -6%; top: 24%; width: 44vw; height: 44vw; }
  .sh-blue { left: 58%; top: 8%; width: 26vw; }
}

/* ================= BRAND SHEET (brand.html) ================= */
.bs { padding-bottom: 80px; }
.bs-top { padding-top: 28px; padding-bottom: 24px; align-items: end; border-bottom: 1px solid var(--ink); margin-inline: var(--m); padding-inline: 0; }
.bs-top h1 { grid-column: 1 / 8; font-size: 64px; font-weight: 400; letter-spacing: -.04em; line-height: .95; }
.bs-top p { grid-column: 8 / 13; color: var(--mute); }
.bs-sec { padding-top: 56px; }
.bs-sec > .sheet { margin-bottom: 24px; }
.bs-row { align-items: start; row-gap: 24px; }
.tile { background: var(--white); border: 1px solid var(--rule); padding: 24px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; min-height: 220px; }
.tile .cap { color: var(--mute); }
.tile.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile.ink .cap { color: #bdbab1; }
.tile.olive { background: var(--olive); color: var(--ink); border-color: var(--olive); }
.tile.olive .cap { color: var(--ink); }
.tile.paper { background: var(--paper); }
.tile svg { overflow: visible; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; } .s2 { grid-column: span 2; }
.tile .big-logo { width: 100%; height: auto; }
.mkt svg { height: 120px; width: auto; }
.mkt p { font-size: 14px; color: var(--mute); }
.mkt b { font-size: 22px; font-weight: 400; letter-spacing: -.02em; display: block; color: var(--ink); }
.shapes svg { width: 100%; height: auto; }
.pat { height: 260px; padding: 0; overflow: hidden; }
.pat svg { width: 100%; height: 100%; display: block; }
.icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.icons li { padding: 22px 0 18px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.icons li:last-child { border-right: 0; }
.icons .i48 svg { width: 48px; height: 48px; }
.icons .i24 { display: flex; gap: 12px; align-items: center; }
.icons .i24 svg { width: 24px; height: 24px; }
.icons .i24 .on-olive { background: var(--olive); padding: 4px; display: inline-flex; }
.icons .cap { color: var(--mute); }
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--rule); }
.sw { min-height: 180px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; }
.sw b { font-weight: 700; font-size: 14px; }
.prop { display: flex; height: 40px; margin-top: 16px; border: 1px solid var(--rule); }
.prop span { display: block; height: 100%; }
.prop-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); padding-top: 8px; }
.tscale li { display: grid; grid-template-columns: 180px 1fr; align-items: baseline; border-bottom: 1px solid var(--rule); padding: 14px 0; gap: 20px; }
.tscale .cap { color: var(--mute); }
.masks { display: grid; grid-template-columns: 1fr 1fr .8fr 1.3fr; gap: var(--g); align-items: end; }
.masks figure .frame { width: 100%; }
.motion li { display: grid; grid-template-columns: 200px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); gap: 20px; font-size: 15px; }
.motion li b { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.contrast td, .contrast th { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.contrast { border-collapse: collapse; width: 100%; }

/* review pass: no widows or orphans in headings and copy */
h1,h2,h3,h4{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
.pf-frame [hidden] { display: none; }
[hidden] { display: none !important; }

.sh-butter { left: 43%; }
@media (max-width: 720px) { .sh-butter { left: auto; } }

.bleed { padding-bottom: 96px; }
@media (max-width: 720px) { .bleed { padding-bottom: 64px; } }