:root{--navy:#0B3366;--gold:#C4993A;--ink:#1d2433;--bg:#f5f7fb}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.6}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,h3{color:var(--navy);line-height:1.2}h2{font-size:2.2rem;text-align:center;margin:0}
.sub{text-align:center;color:#5b6475;margin:.4rem 0 2.5rem}
section{padding:80px 0}.alt{background:var(--bg)}
.btn{display:inline-block;background:var(--gold);color:#fff;padding:14px 28px;border-radius:6px;text-decoration:none;font-weight:600;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:#a9802c}.btn.sm{padding:9px 18px}.btn.ghost{background:transparent;border:2px solid var(--navy);color:var(--navy)}
.nav{position:sticky;top:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);z-index:10}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.25rem}
.brand img{height:52px}.brand small{display:block;font-size:.7rem;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}
nav{display:flex;gap:24px;align-items:center}nav a{color:var(--navy);text-decoration:none;font-weight:500}nav a.btn{color:#fff}
.burger{display:none;background:none;border:0;font-size:1.8rem;color:var(--navy)}
.hero{background:linear-gradient(135deg,#fff 55%,#eef2f9);padding:90px 0}
.hero-in{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:3.2rem;margin:.3rem 0 1rem}.hero h1 span{color:var(--gold)}
.eyebrow{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin:0}
.lead{font-size:1.15rem;color:#4a5263}.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.5rem}
.hero-logo{width:100%;max-width:400px;justify-self:center}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid #e5e9f0;border-top:4px solid var(--gold);border-radius:10px;padding:28px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(11,51,102,.12)}
.card h3{margin:.6rem 0 .4rem}.card p{margin:0;color:#5b6475}.ic{font-size:2rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ph{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#0B3366,#3c5f8f);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;border:2px dashed rgba(196,153,58,.8)}
.ph small{color:var(--gold);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.step b{display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;font-size:1.4rem;border:3px solid var(--gold)}
.step p{color:#5b6475;margin:0}
.navy{background:var(--navy);color:#dfe6f2}.navy h2{color:#fff;text-align:left}
.area{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.map{border:2px dashed var(--gold);border-radius:10px;padding:60px 20px;text-align:center;font-size:1.3rem;color:#fff;display:flex;flex-direction:column}
.map small{font-size:.85rem;color:var(--gold)}
.quote{display:grid;grid-template-columns:1fr 1.4fr;gap:50px}.quote h2{text-align:left}
.contact{list-style:none;padding:0;font-size:1.05rem}.contact li{margin:.5rem 0}
form{background:var(--bg);padding:30px;border-radius:12px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;color:var(--navy)}
input,textarea{margin-top:4px;padding:11px;border:1px solid #cfd6e2;border-radius:6px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--gold)}
fieldset{border:1px solid #cfd6e2;border-radius:6px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
fieldset label{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--ink)}fieldset input{margin:0}
legend{font-weight:600;color:var(--navy);font-size:.9rem}
footer{background:#071f3f;color:#b8c3d6;padding:40px 0;text-align:center}
.foot{display:flex;flex-direction:column;align-items:center}.foot .brand{color:#fff}.foot .brand img{border-radius:50%}
.foot p{margin:.3rem 0;font-size:.9rem}
@media(max-width:900px){.grid,.gallery{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
.burger{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
.open nav{display:flex}
.hero{padding:50px 0}.hero-in,.area,.quote{grid-template-columns:1fr}.hero h1{font-size:2.2rem}.hero-logo{max-width:220px;order:-1}
.grid,.gallery,.row,fieldset{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}
section{padding:56px 0}h2{font-size:1.8rem}}
/* photo hero */
.hero{background:linear-gradient(90deg,rgba(11,51,102,.92) 0%,rgba(11,51,102,.75) 55%,rgba(11,51,102,.35) 100%),url(img/twilight-exterior.jpg) center/cover;color:#fff;padding:110px 0}
.hero h1{color:#fff}.hero .lead{color:#e3e9f3}.hero .btn.ghost{border-color:#fff;color:#fff}
.hero-logo{max-width:260px;border-radius:50%;box-shadow:0 10px 40px rgba(0,0,0,.35);border:4px solid var(--gold)}
.shot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover;transition:.4s;display:block}.shot:hover img{transform:scale(1.06)}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;color:#fff;font-weight:600;font-size:.9rem;background:linear-gradient(transparent,rgba(11,51,102,.9))}
.lb{position:fixed;inset:0;background:rgba(5,15,35,.94);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:100;padding:20px}
.lb.on{display:flex}.lb img{max-width:100%;max-height:85vh;border-radius:6px}.lb p{color:#fff;margin:.8rem 0 0}
.lb button{position:absolute;top:12px;right:20px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer}
@media(max-width:760px){.hero{background:linear-gradient(rgba(11,51,102,.85),rgba(11,51,102,.8)),url(img/twilight-exterior-sm.jpg) center/cover;padding:50px 0}.hero-logo{max-width:150px}.gallery{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-1rem 0 2rem}
.filters button{border:2px solid var(--navy);background:#fff;color:var(--navy);padding:8px 18px;border-radius:30px;font:inherit;font-weight:600;cursor:pointer}
.filters button.on,.filters button:hover{background:var(--navy);color:#fff}
.shot[hidden]{display:none}
.shot.plan{grid-column:1/-1;aspect-ratio:auto;background:#fff;border:1px solid #e5e9f0}
.shot.plan img{height:auto;object-fit:contain;padding:16px}
.shot.plan span{background:linear-gradient(transparent,rgba(11,51,102,.9))}
.lb img{background:#fff}
.cimg{width:calc(100% + 56px);margin:-28px -28px 16px;height:170px;object-fit:cover;display:block;border-radius:6px 6px 0 0}
.cimg.plan{object-fit:contain;background:#fff;padding:8px;border-bottom:1px solid #e5e9f0}
.card{overflow:hidden}
/* v3 */
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#fff;padding:8px 14px;z-index:200}.skip:focus{left:10px}
.left{text-align:left!important}.gold{color:var(--gold)}.sub.light{color:#c9d4e6}
.hero{position:relative;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:-10% 0 0;background:url(img/twilight-exterior.jpg) center/cover;background-image:image-set(url(img/twilight-exterior.webp) type("image/webp"),url(img/twilight-exterior.jpg) type("image/jpeg"));transform:scale(1.1);will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,51,102,.93),rgba(11,51,102,.78) 55%,rgba(11,51,102,.4))}
.hero-in{position:relative}.hero h1{font-size:2.9rem}
.badge{position:relative;width:300px;height:300px;justify-self:center}
.badge img{position:absolute;inset:50px;width:200px;height:200px;border-radius:50%;border:4px solid var(--gold);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.ring{width:100%;height:100%;animation:spin 22s linear infinite}.ring text{fill:var(--gold);font-size:13.5px;font-weight:700;letter-spacing:2.6px}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-logo{display:none}
.card{display:flex;flex-direction:column}.card p{flex:1}
.more{margin-top:14px;color:var(--gold);font-weight:600;text-decoration:none;font-size:.9rem}.more:hover{text-decoration:underline}
.card.chosen{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,153,58,.45)}
.cimg{height:170px}picture{display:contents}
.ba-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}
.ba{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 14px 40px rgba(11,51,102,.2)}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-before img{filter:saturate(.35) brightness(.72) contrast(.85)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:3px solid #fff}
.ba input:focus-visible~.handle::after{outline:3px solid var(--navy)}
.tag{position:absolute;top:12px;background:rgba(11,51,102,.85);color:#fff;font-size:.78rem;padding:4px 10px;border-radius:20px;pointer-events:none}.tag.l{left:12px}.tag.r{right:12px;background:var(--gold)}
.shot img{width:100%;height:100%}
.shot.plan img{height:auto}
.pano-sec{padding-bottom:60px}.pano-sec h2{text-align:center}
.pano{overflow-x:auto;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;user-select:none}
.pano.drag{cursor:grabbing}.pano-track{display:flex;width:max-content}
.pano img{height:340px;width:auto;display:block;pointer-events:none}
.steps{list-style:none;padding:0;margin:0}
.chips{grid-template-columns:1fr 1fr;border:0;padding:0;gap:10px}
.chip{position:relative;flex-direction:row;align-items:center;gap:8px;border:2px solid #cfd6e2;background:#fff;border-radius:8px;padding:10px 12px;cursor:pointer;transition:.2s;font-weight:500}
.chip input{position:absolute;opacity:0}.chip:has(input:checked){border-color:var(--gold);background:#fff7e6;color:var(--navy);font-weight:700}
.chip:has(input:checked)::after{content:"✓";margin-left:auto;color:var(--gold)}.chip:has(input:focus-visible){outline:2px solid var(--navy)}
.picked{background:var(--bg);border-left:4px solid var(--gold);padding:10px 14px;border-radius:6px;font-size:.95rem}
.fab{position:fixed;right:20px;bottom:20px;z-index:50;background:var(--gold);color:#fff;font-weight:700;text-decoration:none;padding:14px 22px;border-radius:40px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.lb[hidden]{display:none}.lb:not([hidden]){display:flex}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media(max-width:760px){.hero-bg{background-image:url(img/twilight-exterior-sm.jpg);background-image:image-set(url(img/twilight-exterior-sm.webp) type("image/webp"),url(img/twilight-exterior-sm.jpg) type("image/jpeg"))}
.hero-bg::after{background:rgba(11,51,102,.84)}.hero h1{font-size:2rem}.badge{width:180px;height:180px;order:-1}.badge img{inset:30px;width:120px;height:120px}
.ba-wrap{grid-template-columns:1fr}.pano img{height:220px}.chips{grid-template-columns:1fr}.fab{right:12px;bottom:12px}}
.contact a,footer a{color:inherit}
.shot.plan img{max-width:900px;margin:0 auto}
.shot.wide{grid-column:span 2;aspect-ratio:auto}@media(max-width:760px){.shot.wide{grid-column:auto;aspect-ratio:4/3}}
.shot.wide img{position:absolute;inset:0}.shot.wide{min-height:200px}h2.left{margin-bottom:.6rem}
.hp{display:none!important}
#area .map{padding:16px;margin:0;border-style:solid;border-color:rgba(196,153,58,.5);font-size:1rem}
.map svg{width:100%;max-width:400px;margin:0 auto;display:block}
.map .r1{fill:rgba(196,153,58,.14);stroke:#C4993A;stroke-width:2;stroke-dasharray:6 5}.map .r2{fill:none;stroke:rgba(255,255,255,.18)}
.map .rad{stroke:#C4993A;stroke-width:1.5}.map .km{fill:#C4993A;font-size:13px;font-weight:700}
.map .t{fill:#fff}.map text{fill:#dfe6f2;font-size:12px}.map .c{fill:#C4993A;stroke:#fff;stroke-width:3}.map .city{fill:#fff;font-weight:700;font-size:15px}.map .n{fill:#C4993A;font-weight:700}
.map figcaption{font-size:.8rem;color:#c9d4e6;margin-top:6px}
.map .r1{transform-origin:180px 180px;animation:pulse 4s ease-in-out infinite}@keyframes pulse{50%{opacity:.6}}