:root{--paper:#2c0d03;--surface:#39170b;--cream:#482214;--line:#755242}
/* Continuous deep maroon plaster texture; no framed section panels. */
body{background:#2c0d03 url('/assets/background-reference.jpeg') center / cover fixed no-repeat}
.site-header,.collection,.benefits,.story,.how,.footer{background:transparent;border:0;border-radius:0;box-shadow:none}
.benefit-divider{background:transparent}.steps article,.footer-bottom{border-color:#ad84652b}.card-photo,.hero-image{box-shadow:0 12px 30px #13040055}.search-bar{box-shadow:0 10px 28px #13040055;border-color:#75524250}
.brand-logo-frame{width:111px;height:65px;overflow:visible;background:#fff4e4;mask:url('/assets/sako-wordmark-hd.svg') center / contain no-repeat;-webkit-mask:url('/assets/sako-wordmark-hd.svg') center / contain no-repeat}.brand-logo{visibility:hidden}
@media(max-width:600px){.brand-logo-frame{width:90px;height:52px}}
.villa-card{border-radius:14px;transition:box-shadow .32s ease,translate .32s ease}.villa-card:hover{translate:0 -4px}.card-photo{box-shadow:0 8px 20px #38271525}.button,.card-cta,.filter,.icon-button,.save-button{transition:background .22s ease,color .22s ease,box-shadow .25s ease,scale .22s ease,translate .22s ease}.button:hover,.card-cta:hover{box-shadow:0 7px 16px #56331e30}.button:active,.card-cta:active,.filter:active,.icon-button:active,.save-button:active{scale:.96}.filter.active{box-shadow:0 5px 12px #56331e30,inset 0 1px 0 #ffffff25}.search-field:focus-within{box-shadow:inset 0 -2px 0 #71482c}
dialog[open]{animation:sako-dialog-in .42s cubic-bezier(.22,1,.36,1)}dialog[open]::backdrop{animation:sako-backdrop-in .28s ease}.mobile-nav:not([hidden]){animation:sako-dialog-in .3s cubic-bezier(.22,1,.36,1)}
@keyframes sako-dialog-in{from{opacity:0;translate:0 24px;scale:.985}to{opacity:1;translate:0 0;scale:1}}@keyframes sako-backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.villa-card:hover{translate:none}body{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,.mobile-nav:not([hidden]){animation:none}.villa-card,.button,.card-cta,.filter,.icon-button,.save-button{transition:none}.villa-card:hover,.button:active,.card-cta:active,.filter:active,.icon-button:active,.save-button:active{translate:none;scale:1}}

/* Prices sit directly on the continuous page background. */
.card-bottom>div:first-child{background:transparent;box-shadow:none;border:0}

/* Clear separation between each villa catalog. */
.villa-grid>.villa-card{border:1px solid #ad8465a6;box-shadow:0 8px 22px #13040040}.card-thumbnails{padding-bottom:12px;border-bottom:1px solid #ad846566}.card-thumbnail.active{border-color:#d5b482}

/* Compact map action and breathing room for the mobile partner CTA. */
.card-map-link{padding:9px 12px;background:#b79761;color:#2c0d03;border:1px solid #c7a875;border-radius:7px;text-decoration:none;line-height:1.3;font-weight:500;transition:background .2s ease,box-shadow .2s ease}.card-map-link:hover{background:#c7a875;box-shadow:0 3px 10px #13040020}
@media(max-width:600px){#partner-with-us>.button{margin-top:28px}}

/* Balanced spacing around the catalog map action. */
.villa-card .card-map-link{display:flex;width:fit-content;margin:20px 0}.villa-card .card-map-link+.card-bottom{margin-top:0}

/* Align the About heading with the Partner section heading. */
#tentang .story-copy>h2{margin-inline-start:-46px}
@media(max-width:1150px){#tentang .story-copy>h2{margin-inline-start:-30px}}
@media(max-width:850px){#tentang .story-copy>h2{margin-inline-start:-25px}}

/* Match About body text to the Partner step copy while keeping headings aligned. */
#tentang{--copy-indent:50px}#tentang .story-copy{padding-inline-start:var(--copy-indent)}#tentang .story-copy>h2{margin-inline-start:calc(-1 * var(--copy-indent))}
@media(min-width:601px) and (max-width:1150px){#tentang{--copy-indent:45px}}

/* Consistent monochrome brand icons beside the wordmark. */
.site-header{gap:20px}
.header-social{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-right:auto;color:#fff}
.header-social a{display:grid;place-items:center;width:32px;height:44px;color:inherit;transition:opacity .2s ease}
.header-social svg{display:block;width:18px;height:18px;fill:currentColor;stroke:none}
.header-social a:hover{opacity:.7}
.header-social a:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:4px}
@media(min-width:851px) and (max-width:1200px){.site-header{gap:14px}.header-social{gap:2px}.header-social a{width:28px}.desktop-nav{gap:12px}.header-cta{padding-inline:12px}}
@media(max-width:600px){.site-header{gap:8px}.header-social{gap:2px;margin-right:0;margin-left:auto}.header-social a{width:27px}.header-social svg{width:17px;height:17px}.site-header>.menu-button{margin-left:0}}
@media(max-width:359px){.site-header{gap:4px}.header-social{gap:0}.header-social a{width:24px}.site-header>.menu-button{width:36px}}
@media(prefers-reduced-motion:reduce){.header-social a{transition:none}.header-social a:hover{transform:none}}

@media(min-width:851px) and (max-width:1000px){.header-cta{display:none}}

/* Desktop social links sit immediately before Home, with free space after the brand. */
@media(min-width:851px){.site-header>.header-social{order:0;margin-left:auto;margin-right:0}.site-header>.desktop-nav{margin-left:0}}

/* Use the same balanced action layout on phone and desktop. */
.villa-card .card-info-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px;width:100%;max-width:none;margin:20px 0;justify-self:stretch}
.villa-card .card-info-actions .card-map-link{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:grid;place-items:center;gap:0;width:100%;height:36px;min-height:36px;margin:0;padding:0 8px;border:1px solid #c7a875;border-radius:7px;background:#b79761;color:#2c0d03;font-family:inherit;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;text-align:center;min-width:0;text-decoration:none}
.card-info-actions .card-map-link .icon{display:none}
.villa-card .card-info-actions .card-map-link:hover{background:#c7a875}
.card-info-actions+.card-bottom{margin-top:0}
.villa-info .villa-detail-section:first-of-type{margin-top:22px}

.card-info-actions .card-map-link>span{display:block;line-height:1.25;text-align:center;white-space:nowrap}

/* Keep the booking action aligned after removing the price block. */
.villa-card .card-bottom{justify-content:flex-end}