@font-face{font-family:Playfair;src:url('/assets/playfair-normal-compact.woff');font-weight:400;font-display:swap}
:root{--paper:#f8f5ef;--ink:#30291f;--muted:#706557;--accent:#806548;--line:#dfd3c1;--glass:linear-gradient(120deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.25) 22%,rgba(255,255,255,.04) 42%,rgba(255,255,255,.65) 43%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.38) 100%),linear-gradient(180deg,rgba(255,237,217,.45) 0%,rgba(145,127,107,.12) 48%,rgba(93,75,55,.22) 51%,rgba(248,230,210,.36) 100%);--shadow:inset 0 2px 2px #fffffff2,inset 2px 0 3px #ffffffcc,inset 0 -2px 3px #8876627a,0 0 0 1px #7e6c5847,0 0 12px #917f6b3d,0 5px 15px #4f3d2924}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}h1,h2,p{margin:0}.wrap{width:min(980px,calc(100% - 48px));margin-inline:auto}.head{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:700;letter-spacing:-1px}.brand span,.dot{color:var(--accent)}.contact-link{font-size:14px;padding:12px 0}.contact-link:hover,.phone:hover{text-decoration:underline;text-underline-offset:5px}.intro{text-align:center;padding:52px 0 44px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:650;color:var(--accent);margin-bottom:17px}h1,h2{font-family:Playfair,Georgia,serif;font-weight:400}h1{font-size:clamp(38px,5vw,58px);line-height:1.15;letter-spacing:-1.7px}.lead{font-size:18px;line-height:1.65;color:var(--muted);margin:21px auto 29px}.btn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:15px 20px;border:1px solid #b6a38b;border-top-color:white;border-radius:12px;background:var(--glass);box-shadow:var(--shadow);color:#46382b;font-size:15px;font-weight:500;text-align:center;line-height:1.5;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow),0 8px 20px #4f3d2912}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:820px;margin:auto}.example{flex-direction:column;padding:23px 18px 19px;min-height:112px;background-color:#fffaf4}.apartment{font-size:32px;letter-spacing:-1.4px;font-weight:700;line-height:1.2}.place{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.5px}.extras{text-align:center;border-top:1px solid var(--line);padding:33px 0 34px}h2{font-size:32px;line-height:1.25;letter-spacing:-.7px}.section-note{margin:10px 0 22px;color:var(--muted);font-size:14px}.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:auto}.services .btn{min-height:58px}.languages{font-size:13px;color:var(--muted);margin-top:23px}.offer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:29px 32px;background:#eee5d8;border:1px solid var(--line);border-radius:16px;margin-top:3px;margin-bottom:24px}.offer h2{font-size:29px}.offer p{font-size:14px;margin-top:7px;color:var(--muted)}.contact-actions{display:flex;align-items:center;gap:22px}.primary{background-color:#fffaf3;min-width:185px}.phone{font-size:14px;white-space:nowrap}footer{text-align:center;font-size:12px;color:var(--muted);padding:0 0 24px}.skip{position:fixed;top:-100px;left:20px;z-index:20;background:white;padding:12px}.skip:focus{top:12px}
@media(max-width:760px){.offer{flex-direction:column;text-align:center}.contact-actions{justify-content:center}.examples{gap:15px}}
@media(max-width:520px){.wrap{width:calc(100% - 36px)}.head{height:65px}.brand{font-size:23px}.intro{padding:35px 0 32px}.eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:15px}h1{font-size:38px;letter-spacing:-1px}.lead{font-size:16px;margin:19px 0 24px}.lead br{display:none}.examples{gap:11px}.example{min-height:100px;padding:19px 7px 16px}.apartment{font-size:23px;letter-spacing:-1px}.place{font-size:11px}.extras{padding:29px 0}h2{font-size:29px}.section-note{font-size:13px;margin-bottom:20px}.services{grid-template-columns:1fr;gap:13px;max-width:380px}.services .btn{font-size:16px;min-height:55px}.languages{font-size:12px;max-width:270px;margin:20px auto 0}.offer{padding:26px 18px;gap:22px}.offer h2{font-size:29px}.contact-actions{flex-direction:column;width:100%;gap:15px}.primary{width:100%;max-width:300px}footer{font-size:11px}}
@media(max-width:360px){h1{font-size:34px}.examples{gap:8px}.apartment{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Each example uses the primary glass button styling from its live apartment site. */
.example-mokka{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(255,237,217,.45) 0%, rgba(145,127,107,.12) 48%, rgba(93,75,55,.22) 51%, rgba(248,230,210,.36) 100%);
	color: #46382b;
	border: 1px solid rgba(142,124,104,.72);
	border-top-color: rgba(255,255,255,.98);
	border-radius: 12px;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.95), inset 2px 0 3px rgba(255,255,255,.8), inset 0 -2px 3px rgba(136,118,98,.48), 0 0 0 1px rgba(126,108,88,.28), 0 0 12px rgba(145,127,107,.24), 0 5px 15px rgba(79,61,41,.14);
	text-shadow: 0 1px 0 rgba(255,255,255,.9);
	transition: box-shadow .2s ease, border-color .2s ease;}
.example-mokka:hover{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(255,237,217,.45) 0%, rgba(145,127,107,.12) 48%, rgba(93,75,55,.22) 51%, rgba(248,230,210,.36) 100%);
	color: #46382b;
	border-color: rgba(148,130,110,.85);
	box-shadow: inset 0 2px 3px rgba(255,255,255,1), inset 0 -2px 4px rgba(149,131,111,.6), 0 0 0 1px rgba(140,122,102,.35), 0 0 18px rgba(145,127,107,.38), 0 6px 18px rgba(79,61,41,.16);}
.example-mirax{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(233,242,236,.45) 0%, rgba(112,145,124,.12) 48%, rgba(62,91,73,.22) 51%, rgba(223,238,228,.36) 100%);
	color: #293e31;
	border: 1px solid rgba(103,150,120,.72);
	border-top-color: rgba(255,255,255,.98);
	border-radius: 12px;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.95), inset 2px 0 3px rgba(255,255,255,.8), inset 0 -2px 3px rgba(92,150,111,.48), 0 0 0 1px rgba(88,133,104,.28), 0 0 12px rgba(92,170,118,.24), 0 5px 15px rgba(47,77,58,.14);
	text-shadow: 0 1px 0 rgba(255,255,255,.9);
	transition: box-shadow .2s ease, border-color .2s ease;}
.example-mirax:hover{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(233,242,236,.45) 0%, rgba(112,145,124,.12) 48%, rgba(62,91,73,.22) 51%, rgba(223,238,228,.36) 100%);
	color: #293e31;
	border-color: rgba(102,165,123,.85);
	box-shadow: inset 0 2px 3px rgba(255,255,255,1), inset 0 -2px 4px rgba(98,174,121,.6), 0 0 0 1px rgba(98,151,116,.35), 0 0 18px rgba(92,170,118,.38), 0 6px 18px rgba(47,77,58,.16);}
.example-mila{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(237,237,237,.45) 0%, rgba(127,127,127,.12) 48%, rgba(75,75,75,.22) 51%, rgba(230,230,230,.36) 100%);
	color: #303030;
	border: 1px solid rgba(124,124,124,.72);
	border-top-color: rgba(255,255,255,.98);
	border-radius: 12px;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.95), inset 2px 0 3px rgba(255,255,255,.8), inset 0 -2px 3px rgba(118,118,118,.48), 0 0 0 1px rgba(108,108,108,.28), 0 0 12px rgba(127,127,127,.24), 0 5px 15px rgba(61,61,61,.14);
	text-shadow: 0 1px 0 rgba(255,255,255,.9);
	transition: box-shadow .2s ease, border-color .2s ease;}
.example-mila:hover{background: linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.65) 43%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.38) 100%), linear-gradient(180deg, rgba(237,237,237,.45) 0%, rgba(127,127,127,.12) 48%, rgba(75,75,75,.22) 51%, rgba(230,230,230,.36) 100%);
	color: #303030;
	border-color: rgba(130,130,130,.85);
	box-shadow: inset 0 2px 3px rgba(255,255,255,1), inset 0 -2px 4px rgba(131,131,131,.6), 0 0 0 1px rgba(122,122,122,.35), 0 0 18px rgba(127,127,127,.38), 0 6px 18px rgba(61,61,61,.16);}

.example-mokka{background-color:#f8f5ef}
.example-mirax{background-color:#f3f6f2;--accent:#417155;--muted:#52665a}
.example-mila{background-color:#f5f5f5;--accent:#303030;--muted:#626262}
.site-features{font-size:14px;color:var(--muted);margin:23px auto 0;max-width:600px}
.languages{max-width:640px;margin:23px auto 0;line-height:1.7}
.languages strong{color:var(--ink);font-size:15px;font-weight:600}
@media(max-width:520px){.site-features{font-size:13px;margin-top:20px;max-width:300px}.languages{font-size:13px;max-width:330px}.languages strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.example{transition:none}.example:hover{transform:none}}

.lead{margin-bottom:10px}
.lead strong,.multimedia strong{font-weight:600;color:var(--ink)}
.multimedia{max-width:650px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.7;text-wrap:pretty}
.example-language{margin:25px auto 23px}
.example-language>p:first-child{font-size:13px;color:var(--muted);margin-bottom:10px}
.language-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid #c7b8a5;border-radius:30px;background:#eee7dc}
.language-switch button{min-width:102px;min-height:44px;padding:8px 22px;border:1px solid transparent;border-radius:24px;font:600 14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#655647;background:transparent;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:#806548;color:#fff;border-color:#806548;box-shadow:0 2px 5px #4f3d2920}
.language-switch button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.language-switch button:hover{border-color:#806548}
.language-status{margin-top:10px;color:var(--muted);font-size:12px}
.example{position:relative}
.example-language-badge{position:absolute;top:7px;right:9px;font-size:10px;line-height:1.4;font-weight:700;letter-spacing:.5px;color:var(--accent)}
.service-language-badge{flex:none;padding:2px 7px;border:1px solid #c7b8a5;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.5px;background:#f8f5ef;color:#655647}
.services .btn{gap:12px}
.section-note #services-language{display:block;font-size:12px;margin-top:3px}
[hidden]{display:none!important}
@media(max-width:520px){.multimedia{font-size:14px;max-width:350px}.example-language{margin:23px auto 20px}.example-language>p:first-child{font-size:12px}.language-status{font-size:11px}.example-language-badge{top:5px;right:7px;font-size:9px}}

.host-explanation{max-width:680px;margin:30px auto 0;color:#b3261e;font-size:17px;font-weight:600;line-height:1.75;text-wrap:pretty}
@media(max-width:520px){.host-explanation{font-size:16px;margin-top:26px}}

.rules-note,.service-note{margin:7px 6px 0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}
.package-demo{margin-top:23px;padding-top:21px;border-top:1px solid #c7b8a5}
.package-demo p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.65}

.price-link{display:inline-flex;min-width:170px;margin-top:16px}
.pricing-page{text-align:center;padding:42px 0 30px}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px;text-align:left}.price-card{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fffaf3}.price-card.advanced{background:#eee5d8;border-color:#b6a38b}.package-price{font-size:46px;font-weight:700;line-height:1.2;margin:16px 0;color:var(--ink)}.package-price span{font-size:28px;font-weight:500}.package-intro{color:var(--muted);font-size:15px}.price-card ul{padding-left:20px;margin:20px 0 0;font-size:14px;line-height:1.65}.price-card li{margin:9px 0}.domain-note{max-width:680px;margin:26px auto;color:var(--muted);font-size:14px;line-height:1.8}.domain-note strong{color:var(--ink)}.pricing-contact{display:flex;align-items:center;justify-content:center;gap:24px;margin:26px 0}
@media(max-width:600px){.pricing-grid{grid-template-columns:1fr;gap:18px}.price-card{padding:24px}.pricing-page{padding-top:30px}.pricing-contact{flex-direction:column;gap:16px}.domain-note{font-size:13px}}

.service-demo{grid-column:1/-1;margin-top:12px;padding-top:22px;border-top:1px solid var(--line)}
.service-demo .btn{max-width:402px;margin-inline:auto}

.extras-description{max-width:650px;margin:14px auto 18px;color:var(--ink);font-size:17px;line-height:1.7;text-wrap:pretty}@media(max-width:520px){.extras-description{font-size:15px;margin:12px auto 18px}}

/* The guide's play control follows the MOKKA entry guide's glass disc and pulse. */
.head-with-audio{display:grid;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);height:auto;min-height:164px;padding-block:20px 16px;gap:12px}
.head-with-audio .brand{justify-self:start}
.head-with-audio .contact-link{justify-self:end;text-align:right}
.host-audio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0}
.host-audio-button{display:flex;flex-direction:column;align-items:center;gap:13px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Keep an opaque brown face while Safari restores the decorative gradients. */
.host-play-disc{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;border:1px solid #b6a38b;border-top-color:#fff;background-color:#806548;background-image:linear-gradient(130deg,#ffffff94,transparent 40%,#ffffff66 43%,transparent 54%),linear-gradient(180deg,#a68a6a,#59432f);box-shadow:inset 0 2px 3px #ffffffb0,inset 0 -3px 7px #0005,0 9px 23px #59432f30}
.host-play-disc:before,.host-play-disc:after{content:'';position:absolute;border:1px solid #80654855;border-radius:50%;pointer-events:none}
.host-play-disc:before{inset:-7px;animation:host-play-pulse 2.2s ease-out infinite}
.host-play-disc:after{inset:-14px;border-color:#80654820}
.host-play-disc svg{width:39px;height:39px;fill:#fff;filter:drop-shadow(0 2px 2px #0004)}
.host-play-icon{transform:translateX(-3px)}
/* Touch navigation must not restore a retained hover transform on the disc. */
@media(hover:hover) and (pointer:fine){.host-play-disc{transition:transform .2s ease}.host-audio-button:hover .host-play-disc{transform:scale(1.04)}.host-audio-button:active .host-play-disc{transform:scale(.97)}}
.host-audio-button:focus-visible{outline:none}
.host-audio-button:focus-visible .host-play-disc{outline:3px solid var(--accent);outline-offset:5px}
.host-audio-label{font-size:11px;line-height:1.35;font-weight:600;white-space:nowrap}
.host-audio-time{font-size:10px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.host-audio-status{font-size:10px;line-height:1.4;color:var(--muted);margin-top:5px}
.host-audio-status:empty{display:none}
.host-audio audio{width:100%;max-width:116px}
.host-audio[data-state="playing"] .host-play-disc:before,.host-audio[data-state="loading"] .host-play-disc:before{animation:none;opacity:0}
@keyframes host-play-pulse{0%{transform:scale(.96);opacity:.85}75%,100%{transform:scale(1.2);opacity:0}}
@media(max-width:520px){.head-with-audio{grid-template-columns:minmax(0,1fr) 102px minmax(0,1fr);gap:4px;min-height:158px;padding-block:22px 14px}.head-with-audio .brand{font-size:21px;white-space:nowrap}.head-with-audio .contact-link{font-size:13px;white-space:nowrap}.host-play-disc{width:84px;height:84px}}
@media(max-width:380px){.head-with-audio{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)}.head-with-audio .brand{font-size:18px;letter-spacing:-.7px}.head-with-audio .contact-link{font-size:11px}.host-play-disc{width:78px;height:78px}.host-audio-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.host-play-disc:before{animation:none}.host-play-disc{transition:none}}

/* Align side links with the disc, independently of its caption and timer. */
.head-with-audio{--host-disc-size:88px;align-items:start}
.head-with-audio>.brand,.head-with-audio>.contact-link{display:flex;align-items:center;min-height:var(--host-disc-size);padding-block:0}
.host-play-disc{width:var(--host-disc-size);height:var(--host-disc-size)}
@media(max-width:520px){.head-with-audio{--host-disc-size:84px}}
@media(max-width:380px){.head-with-audio{--host-disc-size:78px}}

/* A quiet reminder of the recurring domain cost; only the frame pulses. */
.domain-note{position:relative;padding:22px 24px;border:1px solid #a13d354f;border-radius:14px;background:#fff8f3}
.domain-note strong{color:#9b302b}
.domain-note::after{content:'';position:absolute;inset:-1px;border:1px solid #a13d35;border-radius:inherit;box-shadow:0 0 0 4px #a13d3512;pointer-events:none;animation:domain-reminder-pulse 3s ease-in-out infinite}
@keyframes domain-reminder-pulse{0%,100%{opacity:.2}50%{opacity:.65}}
@media(max-width:600px){.domain-note{padding:19px 17px}}
@media(prefers-reduced-motion:reduce){.domain-note::after{animation:none;opacity:.35}}

.video-invite{margin:24px auto 28px;max-width:550px;font-size:14px;color:var(--muted)}.video-invite strong{color:var(--ink)}.video-open{margin:14px auto 0;gap:12px;cursor:pointer;font-family:inherit;min-width:240px}.video-open span{font-size:12px;color:var(--muted)}.video-open:focus-visible,#video-close:focus-visible{outline:3px solid var(--accent);outline-offset:4px}#guide-video-dialog{padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--paper);width:min(460px,calc(100% - 24px));max-height:94dvh;overflow:auto}#guide-video-dialog::backdrop{background:rgba(25,20,15,.8)}#video-close{display:block;margin:0 0 10px auto;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}#guide-video{display:block;width:100%;max-height:78dvh;background:#171410;border-radius:10px}body.video-modal-open{overflow:hidden}

.video-screen-icon{flex-shrink:0;display:block;color:inherit}

.intro-pending .head>.brand,.intro-pending .head>.contact-link,.intro-pending .intro>:not(.video-invite),.intro-pending .video-invite>p,.intro-pending main>section:not(.intro),.intro-pending body>footer{animation:content-arrive 1.5s 1.8s both}.intro-pending .head{animation:header-line-arrive 1.5s 1.8s both}@keyframes content-arrive{from{opacity:0}to{opacity:1}}@keyframes header-line-arrive{from{border-bottom-color:transparent}to{border-bottom-color:var(--line)}}@media(prefers-reduced-motion:reduce){.intro-pending .head,.intro-pending .head>.brand,.intro-pending .head>.contact-link,.intro-pending .intro>:not(.video-invite),.intro-pending .video-invite>p,.intro-pending main>section:not(.intro),.intro-pending body>footer{animation:none}}