@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/bricolage-grotesque-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}/* Layout concept: a bone studio stage for one levitating brass thali, ringed by a teal and gold measuring tape that threads through the page. Proof, problem and results sit in deep night teal; process and voices return to bone. */
:root{
  --bone:#F4F0E8; --bone-2:#EAE3D4; --paper:#FBF9F4;
  --ink:#13201E; --ink-2:#465754; --ink-3:#7B8884; --line:rgba(19,32,30,.12);
  --teal:#004B49; --teal-2:#0B605C; --night:#071715; --night-2:#0F2624;
  --gold:#D4AF37; --gold-hi:#F0D67A; --gold-lo:#8F6E1E;
  --clay:#A25B44; --clay-hi:#C8755A; --leaf:#69C747;
  --on-night:#EEE8DB; --on-night-2:rgba(238,232,219,.68); --line-night:rgba(238,232,219,.14);
  --f-display:'Instrument Serif','Times New Roman',Georgia,serif;
  --f-body:'Bricolage Grotesque','Segoe UI',Roboto,system-ui,sans-serif;
  --f-tape:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,4vw,56px);
  /* "only light": phone browsers with a forced dark mode (Samsung Internet, Chrome) leave the design alone */
  color-scheme:only light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1280px,100% - 2*var(--gutter));margin-inline:auto}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.ic{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-family:var(--f-tape);font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:28px;height:8px;background:repeating-linear-gradient(90deg,var(--gold) 0 1.5px,transparent 1.5px 5px)}
.night .eyebrow{color:var(--gold-hi)}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--teal)}
.night{background:var(--night);color:var(--on-night)}
.night .h2 em{color:var(--gold-hi)}

/* buttons */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--night);text-decoration:none;font-weight:600;font-size:.95rem;padding:7px 20px 7px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(143,110,30,.75),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.cta:hover{transform:translateY(-2px);background:#DDBA48;box-shadow:0 16px 30px -12px rgba(143,110,30,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.cta .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(240,214,122,.6)}
.cta .av svg{width:17px;height:17px}
.cta .arr{transition:transform .4s var(--ease)}
.cta:hover .arr{transform:translateX(3px)}
.cta.sm{padding:5px 14px 5px 5px;font-size:.86rem;gap:9px}
.cta.sm .av{width:28px;height:28px}
.cta.sm .av svg{width:14px;height:14px}
.ulink{font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.ulink:hover{background-size:0 1px;background-position:100% 100%}

/* header */
/* no backdrop blur: the header is re-blurred on every scrolled frame, which costs phones far more than it shows */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bone);border-bottom:1px solid transparent;transition:background .45s,color .45s,border-color .45s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr.on-night{background:var(--night);color:var(--on-night);border-bottom-color:var(--line-night)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.logo .mk{flex:none;width:34px;height:34px;border-radius:10px;background:var(--teal);display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.6)}
.logo .mk svg{width:18px;height:18px}
.logo .w1{color:var(--teal)} .logo .w2{color:var(--gold-lo)}
.hdr.on-night .logo .w1{color:var(--on-night)} .hdr.on-night .logo .w2{color:var(--gold)}
.nav{display:none;align-items:center;gap:30px;font-size:.92rem}
.nav a{text-decoration:none;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 1.5px,transparent 1.5px 5px);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-r{display:flex;align-items:center;gap:10px}
/* menu (below 980px): a dark sheet under the header with numbered pages, booking and WhatsApp */
.menu{position:static}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-tape);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;padding:11px 15px 11px 13px;border-radius:999px;border:1px solid var(--line);transition:background .3s,color .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.menu summary:hover{border-color:var(--gold)}
.menu summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hdr.on-night .menu summary{border-color:var(--line-night)}
.menu summary::-webkit-details-marker{display:none}
.mb-ic{position:relative;width:16px;height:10px;flex:none}
.mb-ic i{position:absolute;left:0;top:0;width:100%;height:1.7px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),width .4s var(--ease)}
.mb-ic i+i{top:auto;bottom:0;width:66%}
.menu[open] summary{background:var(--night);color:var(--gold-hi);border-color:var(--night)}
.menu[open] .mb-ic i{width:100%;transform:translateY(4.15px) rotate(45deg)}
.menu[open] .mb-ic i+i{transform:translateY(-4.15px) rotate(-45deg)}
.menu[open]::before{content:"";position:fixed;left:0;right:0;bottom:0;top:calc(68px + env(safe-area-inset-top,0px));z-index:-1;background:rgba(7,23,21,.42);animation:mpfade .35s ease both}
.menu.closing::before{animation:mpfade .22s ease reverse both}
.menu-panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;color:var(--on-night);border-radius:0 0 26px 26px;
  background:radial-gradient(110% 60% at 100% 100%,rgba(212,175,55,.16),transparent 62%),radial-gradient(80% 55% at 0 0,rgba(11,96,92,.55),transparent 70%),var(--night);
  box-shadow:0 44px 70px -34px rgba(7,23,21,.75),inset 0 -1px 0 rgba(212,175,55,.3);animation:mpin .45s var(--ease) both}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;opacity:.6;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--gold) 0 1.4px,transparent 1.4px 8px) 0 0/100% 5px no-repeat,repeating-linear-gradient(90deg,var(--gold) 0 1.6px,transparent 1.6px 40px) 0 0/100% 10px no-repeat}
.menu.closing .menu-panel{animation:mpout .22s var(--ease) both}
.mp-in{max-width:620px;margin-inline:auto;padding:30px var(--gutter) 24px}
.mp-k{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-tape);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--gold-hi);padding-bottom:12px}
.mp-k span+span{color:var(--on-night-2)}
.mp-nav{display:block;border-top:1px solid var(--line-night)}
.mp-nav a{display:flex;align-items:center;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line-night);text-decoration:none;color:var(--on-night);animation:mprow .5s var(--ease) both}
.mp-nav a:nth-child(2){animation-delay:.04s}.mp-nav a:nth-child(3){animation-delay:.08s}.mp-nav a:nth-child(4){animation-delay:.12s}.mp-nav a:nth-child(5){animation-delay:.16s}.mp-nav a:nth-child(6){animation-delay:.2s}
.mp-n{min-width:24px;font-family:var(--f-tape);font-weight:600;font-size:.76rem;letter-spacing:.12em;color:var(--gold)}
.mp-l{flex:1;font-family:var(--f-display);font-size:clamp(1.6rem,6.6vw,2.05rem);line-height:1.05;letter-spacing:-.01em;transition:color .25s}
.mp-nav .arr{flex:none;color:var(--gold);opacity:.75;transition:transform .35s var(--ease),opacity .25s}
.mp-nav a:hover .mp-l,.mp-nav a:focus-visible .mp-l{color:var(--gold-hi)}
.mp-nav a:hover .arr,.mp-nav a:focus-visible .arr{transform:translateX(5px);opacity:1}
.mp-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}
.mp-nav a[aria-current="page"] .mp-l{color:var(--gold-hi);font-style:italic}
.mp-nav a[aria-current="page"] .mp-n{color:var(--leaf)}
.mp-foot{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:22px;animation:mprow .5s .22s var(--ease) both}
.mp-foot .cta{justify-content:center}
.mp-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(240,214,122,.45);transition:background .3s,color .3s}
.mp-wa svg{width:19px;height:19px;color:#3DDC84}
.mp-wa:hover{background:rgba(240,214,122,.12)}
.mp-soc{display:flex;align-items:center;gap:8px;margin-top:20px;animation:mprow .5s .26s var(--ease) both}
.mp-soc>span{margin-right:auto;font-family:var(--f-tape);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--on-night-2)}
.mp-soc .soc{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(240,214,122,.4);transition:background .3s,color .3s}
.mp-soc .soc svg{width:18px;height:18px}
.mp-soc .soc:hover{background:var(--gold);color:var(--night)}
@keyframes mpin{from{opacity:0;transform:translateY(-14px)}}
@keyframes mpout{to{opacity:0;transform:translateY(-10px)}}
@keyframes mprow{from{opacity:0;transform:translateY(12px)}}
@keyframes mpfade{from{opacity:0}}
@media(max-width:399px){.mp-foot{grid-template-columns:1fr}}
@media(min-width:600px){.menu-panel{left:auto;right:var(--gutter);width:440px;border-radius:0 0 26px 26px}.mp-in{padding-inline:28px}}
@media(min-width:980px){.nav{display:flex}.menu{display:none}}
@media(max-width:420px){.cta.sm .lbl-long{display:none}}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--night);display:grid;place-items:center;align-content:center;pointer-events:none;animation:liftoff 1s 1.15s cubic-bezier(.76,0,.24,1) forwards}
.loader svg{width:64px;height:64px;justify-self:center}
.loader .d1,.loader .d2{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.loader .d1{animation:draw .9s .1s var(--ease) forwards}
.loader .d2{animation:draw .5s .65s var(--ease) forwards}
.loader .wm{font-family:var(--f-display);font-size:1.7rem;color:var(--on-night);opacity:0;animation:fadeup .6s .5s var(--ease) forwards;margin-top:12px;text-align:center}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes liftoff{0%{transform:translateY(0);border-radius:0}100%{transform:translateY(-118%);border-radius:0 0 50% 50%/0 0 26vh 26vh;visibility:hidden}}
