/* The Keys look, "Caribe" (Dan picked it 2026-11-03). Loaded after app.css on Brazil Keys only. Gloock + Schibsted Grotesk, self-hosted. */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(/fsbo-assets/fonts/gloock-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(/fsbo-assets/fonts/gloock-latin.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:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fsbo-assets/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fsbo-assets/fonts/schibsted-grotesk-latin.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}
:root{--cream:#F6F1E7;--cream-2:#EBE4D6;--line:#DFD7C8;--text:#10211F;--muted:#4C5C59;--font-d:"Gloock",Georgia,"Times New Roman",serif;--font-b:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--leaf:#18A188;--on-accent:#063B3E;--nav-h:84px}
@media (max-width:1000px){:root{--nav-h:70px}.nav__right{margin-left:auto}}
body{font-synthesis:none}
h1,h2,h3{font-weight:400;letter-spacing:-.012em}

/* logo */
.nav{box-shadow:none}
.nav__brand{gap:10px;margin-right:14px;color:#fff}
.nav__brand:hover{color:#fff}
.kmark{display:block;height:54px;width:auto;flex:none}
.nav__wordmark{font-weight:400;font-size:2.42rem;line-height:1;white-space:nowrap}
.foot__brand,.lang-overlay__brand{display:flex;align-items:center;gap:10px;font-weight:400}
.foot__brand{font-size:2rem;margin-bottom:14px}.foot__brand .kmark{height:48px}
.lang-overlay__brand{justify-content:center;font-size:1.9rem;margin-bottom:12px}.lang-overlay__brand .kmark{height:48px}
@media (max-width:1000px){.nav .kmark{height:46px}.nav__wordmark{font-size:1.875rem}.nav__brand{gap:8px;margin-right:0}}
@media (max-width:350px){.nav .kmark{height:40px}.nav__wordmark{font-size:1.625rem}}

/* leaves: --ax/--ay say where the stem sits on its section, in vw from the left and from the top (.t) or bottom (.b) */
.lf{position:absolute;pointer-events:none;user-select:none;will-change:transform;max-width:none;height:auto;z-index:2;width:calc(var(--w)*1vw);left:calc((var(--ax) - var(--w)*var(--ox)/100)*1vw)}
.lf.t{top:calc((var(--ay) - var(--w)*var(--asp)*var(--oy)/100)*1vw)}
.lf.b{bottom:calc((var(--ay) - var(--w)*var(--asp)*(100 - var(--oy))/100)*1vw)}

/* home hero: a live map seen through the leaves, the words on an arch */
.khero{position:relative;overflow:hidden;overflow:clip;min-height:min(calc(100vh - var(--nav-h)),58vw);background:var(--ink);color:#fff;display:flex;flex-direction:column}
.kmap{position:absolute;inset:0;overflow:hidden;z-index:0;background:#0B565A}
.kmap__g{--t:13.2vw;--fx:var(--dx);--fy:var(--dy);position:absolute;width:calc(8*var(--t));height:calc(6*var(--t));left:calc(76% - var(--fx)*8*var(--t));top:calc(50% - var(--fy)*6*var(--t));transform-origin:calc(var(--fx)*100%) calc(var(--fy)*100%);animation:kmapz 46s ease-in-out infinite alternate}
.kmap__g img{width:100%;height:100%;display:block}
.kpins{z-index:4;pointer-events:none}.kpin{pointer-events:auto}
@keyframes kmapz{to{transform:scale(1.07)}}
.kpin{position:absolute;z-index:1;transform:translate(-50%,calc(-100% - 7px));background:var(--accent);color:var(--ink);font-weight:800;font-size:clamp(13px,1.1vw,17px);line-height:1;padding:9px 13px;border-radius:99px;white-space:nowrap;animation:kpin .7s cubic-bezier(.2,1.5,.4,1) backwards}
.kpin::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:var(--accent);border-bottom:0}
.kpin:hover,.kpin:focus-visible{background:#fff;color:var(--ink)}.kpin:hover::after,.kpin:focus-visible::after{border-top-color:#fff}
@keyframes kpin{from{opacity:0;transform:translate(-50%,-40%) scale(.5)}}
.calm .kmap__g,.calm .kpin{animation:none}
.khero__in{position:relative;z-index:5;margin:auto 0 0 clamp(14px,3vw,48px);padding:clamp(60px,8vw,130px) clamp(22px,2.8vw,46px) clamp(22px,2.8vw,46px);max-width:min(52vw,780px);background:var(--ink);border-radius:999px 999px 0 0}
.khero h1{font-size:clamp(50px,6.7vw,118px);line-height:.98;color:#fff;margin:0 0 clamp(14px,1.7vw,28px)}
.khero h1 .w{color:var(--accent)}
.khero__sub{font-size:clamp(17px,1.5vw,23px);line-height:1.35;max-width:620px;margin:0 0 clamp(16px,1.8vw,28px);font-weight:500}
.ksearch{position:relative;display:flex;align-items:center;gap:10px;height:72px;max-width:720px;padding:0 9px 0 24px;background:#fff;color:var(--ink);border-radius:99px}
.ksearch .sbar__place{flex:1;background:transparent;padding:0;min-width:0;align-self:stretch}
.ksearch .sbar__place .ic{color:var(--ink)}
.sbar__place input,.sbar__place input:focus{border:0!important;background:transparent!important;box-shadow:none!important;outline:none}
.ksearch .sbar__place input{font-size:clamp(16px,1.3vw,20px);color:var(--ink);padding:10px 0;font-weight:600;min-height:0}
.ksearch .sbar__place input::placeholder{color:var(--ink);opacity:.9}
.ksearch .btn{background:var(--accent);border-color:var(--accent);color:var(--ink);height:54px;padding:0 clamp(18px,2.2vw,34px);font-size:clamp(15px,1.2vw,18px)}
.ksearch .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ksearch .ac{top:auto;bottom:calc(100% + 14px)}
.kmap__by{position:absolute;z-index:6;right:clamp(66px,5.4vw,84px);bottom:clamp(20px,2.2vw,32px);margin:0;padding:2px 8px;font-size:11px;line-height:1.4;background:rgba(6,59,62,.86);color:#fff;border-radius:4px}
.kmap__by a{text-decoration:underline;text-underline-offset:2px}.kmap__by a:hover{color:#fff}
.kmotion{position:absolute;z-index:6;right:clamp(12px,1.5vw,24px);bottom:clamp(12px,1.5vw,24px);width:40px;height:40px;padding:0;border-radius:50%;background:rgba(6,59,62,.92);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.kmotion::before{content:"\275A\275A"}.calm .kmotion::before{content:"\25B6"}
.kmotion:hover{background:var(--accent);color:var(--ink)}
.lf--mon{--w:33;--ax:95;--ay:7;--ox:50;--oy:50;--asp:1.1996;z-index:2}
.lf--palm{--w:26;--ax:92;--ay:-1.8;--ox:2;--oy:100;--asp:1.5235;z-index:2}
.lf--ban{--w:36;--ax:19;--ay:-.8;--ox:50;--oy:100;--asp:.5955;z-index:2}
.lf--pop{--w:16;--ax:76;--ay:-1;--ox:2;--oy:100;--asp:1.5235;z-index:3}

/* coral band: the one colour that pops */
.kband{position:relative;overflow:hidden;overflow:clip;background:var(--accent);color:var(--ink);padding:clamp(52px,7vw,120px) var(--gut)}
.kband h2{position:relative;z-index:3;font-size:clamp(46px,7.4vw,128px);line-height:.96;margin:0 0 14px;max-width:13em;color:var(--ink)}
.kband p{position:relative;z-index:3;font-size:clamp(18px,1.6vw,25px);font-weight:700;margin:0 0 24px;max-width:30em}
.kband p a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.kband p a:hover{color:#fff}
.kband__go{position:relative;z-index:3;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:18px 30px;border-radius:99px;font-weight:800;font-size:19px}
.kband__go:hover{background:#fff;color:var(--ink)}
.lf--pair{--w:23;--ax:101;--ay:15;--ox:100;--oy:45;--asp:1.8487}

/* sections */
.hero{background:var(--ink)}.hero::after{display:none}
.hero .btn,.map__gate .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hero .btn:hover,.map__gate .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero__inner{z-index:3}
.lf--s1{--w:20;--ax:96;--ay:-1;--ox:2;--oy:100;--asp:1.5235}
.lf--s2{--w:11;--ax:80;--ay:-1;--ox:2;--oy:100;--asp:1.5235}
.p-home .band h2{font-size:clamp(2.3rem,4.6vw,4.75rem);line-height:1}
.band--cream{background:var(--cream)}
.more{border-bottom-color:var(--accent)}
@media (min-width:1100px){.p-home .grid--cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid--cards .card{background:transparent;border:0;border-radius:0;overflow:visible}
.grid--cards .card:hover{transform:none;box-shadow:none}
.grid--cards .card__media{border-radius:999px 999px 0 0;aspect-ratio:4/4.3}
.grid--cards .card__media img{transition:transform .5s}
.grid--cards .card:hover .card__media img{transform:scale(1.035)}
.grid--cards .card__badges{left:50%;top:auto;bottom:12px;transform:translateX(-50%);white-space:nowrap}
.grid--cards .card__body{padding:14px 2px 6px}
.card__price{font-weight:400;line-height:1.05}
.grid--cards .card__price{font-size:clamp(1.55rem,2.2vw,2.2rem)}
.place{border-radius:16px}
.place--live{background:var(--ink);border-color:var(--ink);color:#fff}.place--live span{color:#fff;opacity:.88}
.place--live:hover{color:#fff;border-color:var(--accent)}
.how__step{border-radius:999px 999px 0 0;padding:clamp(60px,6vw,96px) clamp(22px,2.4vw,36px) 28px}
.how__n{font-weight:400}
.guide{border-radius:14px}
.btn--outline:hover{background:var(--ink)}

/* first visit chooser */
.lang-overlay{backdrop-filter:none;background:rgba(6,59,62,.94)}
.lang-overlay__box{border-radius:999px 999px 20px 20px;padding-top:clamp(64px,9vw,96px)}

/* footer */
.foot{position:relative;overflow:hidden;overflow:clip;margin-top:0;padding-right:max(var(--gut),clamp(130px,19vw,330px))}
.foot__grid,.foot__bottom{position:relative;z-index:3}
.lf--f1{--w:15;--ax:101;--ay:12;--ox:100;--oy:45;--asp:1.8487}
.lf--f2{--w:11;--ax:86;--ay:-1;--ox:2;--oy:100;--asp:1.5235}
.foot .kmotion{right:clamp(12px,1.5vw,24px);bottom:clamp(12px,1.5vw,24px)}

@media (max-width:1100px){.nav__links,.nav__lang span,.nav__right .nav__link span{display:none}.nav__burger{display:inline-flex;align-items:center;justify-content:center}.nav__right{margin-left:auto}}
@media (max-width:820px){
 .khero{min-height:0}
 .kmap__g{--t:32vw;--fx:var(--mx);--fy:var(--my);left:calc(50% - var(--fx)*8*var(--t));top:calc(30vw - var(--fy)*6*var(--t))}
 .khero__in{margin:clamp(200px,60vw,400px) 10px 0;max-width:none;padding:60px 22px 46px}
 .khero h1{font-size:clamp(38px,12.6vw,90px)}
 .ksearch{height:60px;padding-left:16px}.ksearch .btn{height:46px;padding:0 16px}
 .kpin{font-size:13px;padding:8px 11px}
 .lf--mon{display:none}
 .lf--palm{--w:44;--ax:103;--ay:-2}
 .lf--ban{--w:66;--ax:24;--ay:-2}
 .lf--pop{--w:30;--ax:70;--ay:0;bottom:auto;top:26vw}
 .kmap__by{left:18px;right:18px;bottom:6px;padding:0;background:none;font-size:10px;line-height:1.3;opacity:.85}
 .kmotion{right:auto;left:10px;bottom:auto;top:10px;width:34px;height:34px;font-size:11px}
 .lf--pair{--w:30;--ax:103;--ay:12}
 .kband h2{max-width:9em}
 .kband p{max-width:78%}
 .lf--s1{--w:34;--ax:104;--ay:-2}.lf--s2{display:none}
 .hero--sell{padding-top:clamp(120px,34vw,220px)}
 .foot{padding-top:clamp(120px,36vw,240px);padding-right:var(--gut)}
 .lf--f1{--w:30;--ax:102;--ay:17}
 .lf--f2{--w:20;--ax:6;--ay:-1;bottom:auto;top:-6vw;display:none}
 .foot .kmotion{right:auto;left:var(--gut);top:clamp(44px,12vw,80px);bottom:auto}
}
@media (max-width:480px){.kmap__g{--t:38vw}.kpin{font-size:12px;padding:7px 9px}}