/* ASCON LIVING premium theme – navy / teal / warm gold (matches asconliving.com) */
@font-face{font-family:Inter;src:url(fonts/Inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Playfair;src:url(fonts/Playfair.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{--n:#14233f;--n2:#1d3257;--teal:#0f7b74;--g:#0f7b74;--gd:#0b5f5a;--gold:#c9a35a;--gold2:#e7cf9c;--o:#c9a35a;--bg:#f7f4ee;--card:#fff;--tx:#1d2430;--mut:#667085;--line:#ebe6dc;--r:20px;
 --sh:0 1px 2px rgba(20,35,63,.05),0 8px 24px rgba(20,35,63,.07);--serif:Playfair,Georgia,"Times New Roman",serif}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans CJK SC","Apple SD Gothic Neo","Hiragino Sans",sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--teal)}
main{max-width:1080px;padding:16px 16px 28px}
header{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);box-shadow:none}
header .logo img{height:36px}
.hbtn{border:1px solid var(--line);background:#fff;border-radius:999px;font-weight:600;font-size:14px;color:var(--n);box-shadow:none}
.hbtn.sos{background:#fff1f0;border-color:#ffd6d1;color:#b42318}
.hbtn.lang{border-color:var(--line)}
h1,h2.sec,.hello h1,.ch-h h1,.contact h2,.modal h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--n)}
h2.sec{font-size:22px;margin:28px 2px 12px}
.hello h1{font-size:30px}
.hello .tl,.hero .tl{color:var(--n)} .hello .tl b,.hero .tl b{color:var(--gold)}
.search{border-radius:16px;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
.search button{background:var(--n);border-radius:12px}
.chip{border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:none;font-weight:500}
.chip[aria-pressed=true]{background:var(--n);border-color:var(--n);color:#fff}
.tile{border-radius:var(--r);background:#fff;box-shadow:var(--sh);border:0;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.tile .ph{border-radius:0}
.tile .lb{font-weight:600;color:var(--n)}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(20,35,63,.12)}
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
.btn{border-radius:12px}
.btn.route{background:var(--n);border-color:var(--n)}
.back{color:var(--n);font-weight:600}
footer{background:transparent;border-top:1px solid var(--line)}
.tagline{font-family:var(--serif);font-weight:600}
/* tab bar */
#tabbar{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(20,35,63,.06)}
.tab{color:#8a93a3;font-weight:600;transition:color .2s}
.tab.on{color:var(--n)} .tab.on .ti{background:rgba(201,163,90,.18);border-radius:999px}
.tab .ti{padding:2px 14px;transition:background .2s}
.tab.sos .ti{background:#fff1f0} .tab.sos{color:#b42318}
/* welcome */
#welcome{background:var(--bg)}
.wl{padding:0;max-width:560px}
.whero{background:radial-gradient(120% 80% at 50% 0%,#24406e 0%,var(--n) 60%,#0d1830 100%);color:#fff;padding:calc(34px + env(safe-area-inset-top)) 24px 30px;border-radius:0 0 32px 32px;text-align:center}
.wl .wlogo{width:120px;height:auto;background:#fff;border-radius:28px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wl .motto{font-family:var(--serif);color:#fff;font-size:22px;line-height:1.3;margin:18px 0 0}
.wl .motto span{color:#fff;display:block} .wl .motto span:nth-child(2n){color:var(--gold2)}
.wbody{padding:22px 18px 28px}
.wl h2{font-family:var(--serif);color:var(--n);font-size:22px}
.lopt{border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.lopt[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,90,.25);background:#fffaf0}
.cta{background:var(--n);border-radius:16px;font-weight:600;box-shadow:0 10px 24px rgba(20,35,63,.25)}
.modal .sheet{border-radius:24px 24px 0 0}
/* stay view */
.shero{position:relative;margin:-16px -16px 0;min-height:400px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(13,24,48,.15) 0%,rgba(13,24,48,.55) 55%,rgba(13,24,48,.92) 100%),var(--img) center/cover no-repeat;color:#fff;border-radius:0 0 28px 28px;overflow:hidden}
.shero-in{padding:28px 22px 26px;max-width:720px}
.slogo{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:16px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--gold2);margin:16px 0 4px}
.shero h1{color:#fff;font-size:36px;line-height:1.1;margin:0 0 8px}
.ssub{margin:0 0 12px;font-size:16px;color:rgba(255,255,255,.9)}
.motto2{margin:0;font-family:var(--serif);font-size:15px;color:#fff} .motto2 b{color:var(--gold2);font-weight:600}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qc{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.qi svg,.si svg,.cbtn svg,.sbtn svg,.explore svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qi{color:var(--teal)} .qk{font-size:12px;color:var(--mut);font-weight:500} .qv{font-size:19px;font-weight:700;color:var(--n)}
.scards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
@media(min-width:720px){.scards{grid-template-columns:1fr 1fr}.shero{margin:0;border-radius:28px;min-height:440px}.qgrid{max-width:640px}}
@media(min-width:1024px){.scards{grid-template-columns:1fr 1fr 1fr}}
.sc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;overflow:hidden;animation:rise .45s ease both}
.sc.photo{padding-top:0} .sc.photo img{display:block;width:calc(100% + 36px);margin:0 -18px 14px;aspect-ratio:16/9;object-fit:cover}
.sch{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.si{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(15,123,116,.12),rgba(201,163,90,.18));color:var(--teal)}
.sc h3{margin:0;font-size:17px;font-weight:650;color:var(--n)}
.sc p{margin:6px 0;color:#3d4655;line-height:1.55}
.ul{margin:6px 0 0;padding:0;list-style:none}
.ul li{padding:8px 0 8px 24px;border-top:1px solid var(--line);position:relative;color:#3d4655}
.ul li:first-child{border-top:0}
.ul li:before{content:"";position:absolute;inset-inline-start:4px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.srow{display:flex;gap:8px;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:14px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--n);margin-top:8px}
.sbtn svg{width:18px;height:18px}
.contact{margin-top:22px;background:linear-gradient(140deg,var(--n) 0%,var(--n2) 100%);color:#fff;border-radius:24px;padding:22px 18px}
.contact h2{color:#fff;margin:0 0 4px;font-size:24px} .contact p{color:rgba(255,255,255,.8);margin:0 0 14px} .contact .small{margin:12px 0 0;color:rgba(255,255,255,.7)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-weight:600;font-size:13px;transition:background .2s,transform .15s}
.cbtn svg{width:24px;height:24px} .cbtn.wa{background:#25d366;color:#06301a} .cbtn.zl{background:#0068ff}
.cbtn:active{transform:scale(.97)}
.explore{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:18px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);text-decoration:none;color:var(--n)}
.explore b{font-family:var(--serif);font-size:19px} .explore .small{color:var(--mut)} .explore svg{color:var(--gold)}
[dir=rtl] .explore svg{transform:scaleX(-1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sc{animation:none}}
main{animation:fade .25s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}
/* dark mode */
@media(prefers-color-scheme:dark){
 :root{--bg:#0d1526;--card:#16213a;--tx:#e6e9f0;--mut:#9aa4b5;--line:#25314d;--n:#e8ecf5;--teal:#4fc1b8;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}
 header,#tabbar{background:rgba(13,21,38,.88)} .hbtn,.chip,.search,.tile,.lopt,.qc,.explore,.sbtn,.card{background:var(--card);color:var(--tx)}
 .search input{background:transparent;color:var(--tx)} .search button,.btn.route,.cta{background:#c9a35a;color:#14233f}
 .tab.on{color:#fff} .sc p,.ul li{color:#c5cbd8} .lopt[aria-checked=true]{background:#1d2a47}
 .contact{background:linear-gradient(140deg,#1a2a4a,#22365e)} .whero{background:radial-gradient(120% 80% at 50% 0%,#24406e 0%,#14233f 60%,#0a1224 100%)}
 header .logo img,footer img{background:#fff;border-radius:10px;padding:3px}
 .hbtn.sos,.tab.sos .ti{background:#3a1d22;color:#ffb4ab}
 .modal .sheet,details.box{background:var(--card);color:var(--tx)}
}
#welcome{padding:0 0 calc(24px + env(safe-area-inset-bottom))}
.wl{margin:0 auto}
.wl .wlogo{width:120px;max-width:40vw;height:auto;aspect-ratio:509/640;object-fit:contain;padding:12px 14px;margin:0 auto;border-radius:26px}
@media(min-width:600px){.whero{border-radius:0 0 32px 32px}}
.tab.sos .ti{background:#d93025;color:#fff} .tab.sos{color:#b42318}
.ch-h h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
#tabbar{padding-inline:max(0px,calc(50% - 320px))}
.sc.photo img{max-width:none}
/* ---- Discover: premium ---- */
.dhero{position:relative;border-radius:var(--r);overflow:hidden;padding:56px 22px 26px;margin:0 0 14px;background:linear-gradient(180deg,rgba(20,35,63,.15),rgba(20,35,63,.82)),var(--img) center/cover;color:#fff;box-shadow:var(--sh)}
.dhero h1{color:#fff;font-size:32px;margin:0 0 6px}
.dhero .loc{color:rgba(255,255,255,.88);margin:0}
.dhero .tl{color:#fff!important;margin:6px 0 0}.dhero .tl b{color:var(--gold2)!important}
.tiles{gap:14px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;display:block;aspect-ratio:4/5;padding:0;background:var(--n)}
.tile .ph{position:absolute;inset:0;aspect-ratio:auto;margin:0;box-shadow:none;background:var(--n2)}
.tile .ph img{transition:transform .5s ease}
.tile:hover .ph img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,35,63,0) 40%,rgba(20,35,63,.88));pointer-events:none}
.tile .ph .ic{top:10px;bottom:auto;inset-inline-start:10px;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.92)}
.tile .lb,.tile .ct{position:absolute;z-index:1;inset-inline:12px;color:#fff}
.tile .lb{bottom:30px;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.15;color:#fff}
.tile .ct{bottom:10px;font-size:12.5px;color:var(--gold2);letter-spacing:.02em}
.ch-h{border-radius:var(--r);box-shadow:var(--sh);margin:4px 0 14px}
.ch-h .bn{height:220px}
@media(min-width:900px){.ch-h .bn{height:300px}}
.ch-h .cap{padding:48px 18px 16px;background:linear-gradient(transparent,rgba(20,35,63,.88))}
.ch-h .cap h1{color:#fff;font-size:28px}
.ch-h .cap .ic{background:rgba(255,255,255,.92);border-radius:12px;width:40px;height:40px;display:grid;place-items:center}
.sub{color:var(--mut)}
h2.sec{position:relative;padding-bottom:8px}h2.sec::after{content:"";position:absolute;left:2px;bottom:0;width:36px;height:2px;background:var(--gold)}
.card{background:#fff}

/* facade title photo (portrait): show whole house, keep baked-in logo visible */
.shero.shf{min-height:calc(min(100vw,720px)*1.333);background-position:center top}
.shero.shf .slogo{display:none}

/* house flyers (9:16), swipe gallery */
.flyers{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;-webkit-overflow-scrolling:touch}
.flyers img{flex:0 0 72%;max-width:300px;aspect-ratio:9/16;height:auto;border-radius:14px;scroll-snap-align:start;box-shadow:0 4px 14px rgba(0,0,0,.18)}