/* ЖК «Радужный» — презентация. Основной цвет текста #8F8880 */
:root{
  --ink:#8F8880;
  --ink-d:#6F6861;          /* только для мелких подписей и кнопок */
  --line:#E4E0DA;
  --tint:#F4F1ED;
  --bg:#fff;
  --pad:clamp(20px,5vw,72px);
  --max:1440px;
  --hdr:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --f:"Noto Sans","DejaVu Sans",Verdana,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(1.0625rem,1.1vw + .8rem,1.25rem)/1.6 var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:700;line-height:1.05;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--ink-d);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
section[id]{scroll-margin-top:calc(var(--hdr) + 8px)}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d)}
.h2{font-size:clamp(2.5rem,7vw,6.75rem);text-align:center}
.h3{font-size:clamp(1.6rem,2.6vw,2.5rem)}
.lead{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.5}
.small{font-size:.95rem;color:var(--ink-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border:2px solid var(--ink-d);border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;color:var(--ink-d);background:#fff;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--ink-d);color:#fff}
.btn.fill{background:var(--ink-d);color:#fff}
.btn.fill:hover{background:#544e48;border-color:#544e48}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:50;background:#fff;border-bottom:1px solid var(--line);transition:transform .45s var(--ease);opacity:0}
.js-ready .hdr{opacity:1;transition:transform .45s var(--ease),opacity .8s .9s}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:700;font-size:1.15rem;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.nav{display:none;gap:clamp(14px,1.6vw,28px);align-items:center}
.nav a{position:relative;text-decoration:none;font-weight:500;font-size:.95rem;padding:8px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ink-d);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ink-d);font-weight:700}
.hdr-cta{display:none}
.burger{width:48px;height:48px;display:grid;place-items:center;margin-right:-10px}
.burger i,.burger i::before{display:block;width:26px;height:2px;background:var(--ink-d);position:relative;transition:transform .3s}
.burger i::before{content:"";position:absolute;left:0;top:8px}
.menu-open .burger i{transform:translateY(4px) rotate(45deg)}
.menu-open .burger i::before{transform:translateY(-8px) rotate(-90deg);top:8px}
@media(min-width:1200px){.nav{display:flex}.hdr-cta{display:inline-flex;min-height:42px;padding:0 1.1em;font-size:.9rem}.burger{display:none}}
.mmenu{position:fixed;inset:var(--hdr) 0 0 0;background:#fff;z-index:49;padding:24px var(--pad) 40px;overflow:auto;display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s}
.menu-open .mmenu{opacity:1;transform:none;visibility:visible}
.mmenu a.l{font-size:clamp(1.8rem,7vw,2.6rem);font-weight:700;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.mmenu a.l.on{color:var(--ink-d)}
.mmenu .btns{margin-top:26px}
.menu-open{overflow:hidden}
@media(min-width:1200px){.mmenu{display:none}}

/* ---------- pin engine ---------- */
.pin{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ---------- hero ---------- */
.hero{height:230vh;--e:0;--p:0;background:#fff}
.hero .stage{display:flex;flex-direction:column;align-items:center}
.hero-title{position:relative;z-index:3;margin-top:calc(var(--hdr) + clamp(8px,4svh,44px));font-size:clamp(3.4rem,12.4vw,13rem);line-height:.98;letter-spacing:-.035em;text-align:center;white-space:nowrap;display:flex;gap:.28em;justify-content:center;pointer-events:none}
.hero-title .w{display:block;will-change:transform}
.hero-title .w1{transform:translate3d(calc(var(--e) * -26vw),calc(var(--e) * -3vh),0);opacity:calc(1 - var(--e) * 1.15)}
.hero-title .w2{transform:translate3d(calc(var(--e) * 26vw),calc(var(--e) * -3vh),0);opacity:calc(1 - var(--e) * 1.15)}
.hero-title .m{display:inline-block;overflow:hidden;padding:.02em .03em .16em;margin:-.02em -.03em -.16em;vertical-align:top}
.hero-title .ch{display:inline-block;transform:translateY(0)}
.js .hero-title .ch{transform:translateY(112%);animation:chIn 1.1s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .06s)}
@keyframes chIn{to{transform:none}}
.hero-bld{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 84%;transform:translate3d(0,calc(var(--e) * -2svh),0) scale(calc(1 + var(--e) * .62));will-change:transform}
.hero-bld img{width:min(118svh,96vw);max-width:none;height:auto;mix-blend-mode:multiply;margin-bottom:clamp(0px,3svh,32px)}
.js .hero-bld img{opacity:0;transform:translateY(7svh) scale(1.07);animation:bldIn 1.9s .35s var(--ease) forwards}
@keyframes bldIn{to{opacity:1;transform:none}}
.hero-hint{position:absolute;left:50%;bottom:clamp(14px,3svh,30px);z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d);opacity:calc(1 - var(--e) * 4)}
.hero-hint i{display:block;width:2px;height:38px;background:var(--line);position:relative;overflow:hidden}
.hero-hint i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--ink-d);animation:hint 1.8s infinite var(--ease)}
@keyframes hint{to{top:100%}}
.js .hero-hint{animation:fadeIn 1s 2s both}
@keyframes fadeIn{from{opacity:0}}
@media(max-width:767px),(orientation:portrait) and (max-width:1100px){
  .hero{height:210vh}
  .hero-title{font-size:12.2vw;gap:.22em;margin-top:calc(var(--hdr) + 4svh)}
  .hero-bld{align-items:center;padding-top:calc(var(--hdr) + 14svh);transform-origin:50% 56%;transform:translate3d(0,calc(var(--e) * -3svh),0) scale(calc(1 + var(--e) * .5))}
  .hero-bld img{width:max(168vw,64svh);margin-bottom:0}
}

/* ---------- reveals ---------- */
[data-r]{will-change:opacity,transform}
.js [data-r="rise"]{opacity:0;transform:translate3d(0,44px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-r="fade"]{opacity:0;transition:opacity 1.2s ease;transition-delay:var(--d,0s)}
.js [data-r="rise"].in,.js [data-r="fade"].in{opacity:1;transform:none}
.js [data-r="line"]{transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.js [data-r="line"].in{transform:none}
.js [data-r^="wipe"]{overflow:hidden}
.js [data-r^="wipe"] img{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease);transition-delay:var(--d,0s)}
.js [data-r="wipe-l"] img{clip-path:inset(0 100% 0 0)}
.js [data-r="wipe-r"] img{clip-path:inset(0 0 0 100%)}
.js [data-r^="wipe"] img:not(.par){transform:scale(1.22);transition:clip-path 1.25s var(--ease),transform 1.9s var(--ease);transition-delay:var(--d,0s)}
.js [data-r^="wipe"].in img{clip-path:inset(0)}
.js [data-r^="wipe"].in img:not(.par){transform:none}
.ttl .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .04em .17em;margin:-.02em -.04em -.17em}
.ttl .wd>span{display:inline-block}
.js .ttl .wd>span{transform:translateY(112%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i) * .07s)}
.js .ttl.in .wd>span{transform:none}

/* ---------- about ---------- */
.about{padding:clamp(72px,11vw,170px) 0 clamp(64px,9vw,140px);background:#fff;position:relative;z-index:2}
.about-top{display:grid;gap:28px;margin-top:clamp(36px,5vw,70px);align-items:start}
.about-top p{max-width:34em}
.about-addr{font-weight:700;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--ink-d)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px) 24px;margin-top:clamp(48px,7vw,100px)}
.fact{border-top:2px solid var(--line);padding-top:16px;position:relative}
.fact::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--ink);transform:scaleX(var(--w,0));transform-origin:left;transition:transform 1.4s var(--ease)}
.fact b{display:block;font-size:clamp(3.2rem,9.2vw,9.5rem);line-height:1;letter-spacing:-.04em;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact b small{font-size:.36em;letter-spacing:0;margin-left:.12em}
.fact>span{display:block;margin-top:8px;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:500}
.about-cta{margin-top:clamp(36px,5vw,64px)}
@media(min-width:900px){
  .about-top{grid-template-columns:5fr 6fr;column-gap:8vw}
  .facts{grid-template-columns:repeat(4,1fr)}
  .fact b{font-size:clamp(3.4rem,6.4vw,7.2rem)}
}

/* ---------- architecture (pinned) ---------- */
.arch{height:430vh;--a:0;--b:0;--c:0;background:#fff;z-index:1}
.arch .stage{background:#fff}
.arch-title{position:absolute;left:0;right:0;top:calc(var(--hdr) + clamp(14px,5svh,56px));z-index:3;padding-inline:var(--pad);opacity:calc(1 - var(--a) * 2.2);transform:translate3d(0,calc(var(--a) * -60px),0);pointer-events:none}
.arch-clip{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(calc(32svh - var(--a) * 32svh) calc(16vw - var(--a) * 16vw) calc(6svh - var(--a) * 6svh) calc(16vw - var(--a) * 16vw));will-change:clip-path}
.arch-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch-clip .i1{transform:scale(calc(1.14 - var(--a) * .14));object-position:38% 50%}
.arch-clip .i2{clip-path:inset(calc((1 - var(--c)) * 100%) 0 0 0);transform:scale(calc(1.12 - var(--c) * .12));object-position:50% 50%}
.cap{position:absolute;z-index:4;left:var(--pad);bottom:clamp(20px,8svh,80px);width:min(480px,calc(100vw - var(--pad)*2));background:#fff;padding:clamp(20px,2.4vw,34px);pointer-events:none}
.cap h3{font-size:clamp(1.5rem,2.4vw,2.2rem);margin-bottom:10px}
.cap.c1{opacity:calc(var(--b) * (1 - var(--c) * 4));transform:translate3d(0,calc((1 - var(--b)) * 46px - var(--c) * 30px),0)}
.cap.c2{opacity:calc((var(--c) - .45) * 2);transform:translate3d(0,calc((1 - var(--c)) * 46px),0)}
@media(max-width:767px){
  .arch{height:380vh}
  .arch-clip{clip-path:inset(calc(20svh - var(--a) * 20svh) calc(6vw - var(--a) * 6vw) calc(20svh - var(--a) * 20svh) calc(6vw - var(--a) * 6vw))}
  .cap{left:0;right:0;bottom:0;width:auto;padding:20px var(--pad) 26px}
}

.arch-more{padding:clamp(72px,10vw,150px) 0 clamp(72px,10vw,150px);background:#fff;position:relative;z-index:2}
.split{display:grid;gap:36px}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,24px);margin-top:34px}
.sw i{display:block;height:clamp(52px,7vw,96px);background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.in .sw i,.sw.in i{transform:none}
.js .palette:not(.in) .sw i{transform:scaleY(0)}
.sw span{display:block;margin-top:10px;font-size:.95rem;font-weight:500}
.frame{overflow:hidden;background:var(--tint)}
.frame img{width:100%;height:100%;object-fit:cover}
.par{will-change:transform;transform:translate3d(0,calc((var(--q,.5) - .5) * -9%),0) scale(1.16)}
.arch-wide{margin-top:clamp(40px,6vw,90px)}
.arch-wide .frame{aspect-ratio:16/8}
.arch-wide p{margin-top:16px}
@media(min-width:900px){
  .split{grid-template-columns:5fr 7fr;align-items:end;gap:6vw}
  .split.rev{grid-template-columns:7fr 5fr}
}
@media(max-width:767px){.arch-wide .frame{aspect-ratio:4/3}}

/* ---------- infra ---------- */
.infra{padding:clamp(56px,8vw,130px) 0 clamp(56px,8vw,120px);background:#fff;position:relative;z-index:2}
.zoombtn{position:relative;display:block;width:100%;text-align:left;cursor:zoom-in}
.zoombtn .hint{position:absolute;right:14px;bottom:14px;background:#fff;color:var(--ink-d);font-weight:700;font-size:.9rem;padding:10px 16px;border-radius:999px;display:flex;align-items:center;gap:8px;box-shadow:0 0 0 1px var(--line)}
.zoombtn .hint svg{width:18px;height:18px}
.map{margin-top:clamp(28px,4vw,56px)}
.map .frame{aspect-ratio:1.65/1;background:#FAFAF8}
.map .frame img{object-fit:cover;object-position:50% 34%}
@media(max-width:767px){.map .frame{aspect-ratio:4/5}.map .frame img{object-position:47% 33%}}
.credit{margin-top:10px;font-size:.85rem;color:var(--ink-d)}
.poi{display:grid;gap:26px;margin-top:clamp(32px,5vw,64px)}
.poi h3{font-size:1.15rem;margin-bottom:8px;color:var(--ink-d)}
.poi ul{list-style:none;margin:0;padding:0;font-size:1.1rem}
.poi li{padding:8px 0;border-top:1px solid var(--line)}
@media(min-width:768px){.poi{grid-template-columns:repeat(3,1fr);gap:32px}}

/* ---------- yard ---------- */
.yard{padding:clamp(56px,8vw,130px) 0;background:#fff;position:relative;z-index:2}
.yard-grid{display:grid;gap:32px;margin-top:clamp(28px,4vw,56px)}
.yard .frame{background:#fff}
.legend{display:grid;gap:22px;align-content:start}
.legend h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.lg{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.lg .n{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:1.25rem;color:var(--ink-d);background:var(--bg-c)}
.lg b{display:block;font-size:1.1rem;color:var(--ink-d)}
.lg span{font-size:1rem}
.lg.g .n{border-radius:6px;height:24px;width:52px}
@media(min-width:900px){
  .yard-grid{grid-template-columns:8fr 4fr;gap:5vw;align-items:start}
  .legend{position:sticky;top:calc(var(--hdr) + 32px)}
}

/* ---------- entrances ---------- */
.ent{padding:clamp(56px,8vw,130px) 0;background:#fff;position:relative;z-index:2}
.ent-sub{margin-top:clamp(56px,8vw,130px)}
.ent-sub:first-of-type{margin-top:clamp(36px,5vw,72px)}
.ent-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(20px,3vw,40px)}
.ent-head .h3{font-size:clamp(2rem,4.6vw,4.4rem);letter-spacing:-.025em}
.gal{display:grid;gap:clamp(12px,1.6vw,22px)}
.gal .ph{display:block;width:100%;overflow:hidden;background:var(--tint);cursor:zoom-in;position:relative}
.gal .ph img{width:100%;height:100%;object-fit:cover}
.copy p+p{margin-top:1em}
.copy h4{font-size:clamp(1.3rem,1.8vw,1.7rem);margin-bottom:10px;color:var(--ink-d)}
.copy .blk+.blk{margin-top:clamp(20px,3vw,34px)}
.note{display:inline-block;margin-top:12px;font-weight:700;color:var(--ink-d);border-left:4px solid var(--ink);padding-left:14px}
/* 1 lobby */
.g1 .ph.a{aspect-ratio:16/10}
.g1 .ph.b{aspect-ratio:16/10}
@media(min-width:900px){
  .g1{grid-template-columns:7fr 5fr;grid-template-areas:"a t" "b t";align-items:start}
  .g1 .a{grid-area:a}.g1 .b{grid-area:b;width:66%;justify-self:end;margin-top:-4vw}.g1 .copy{grid-area:t;padding-top:clamp(0px,3vw,48px)}
}
/* 2 lifts */
.g2 .wide{aspect-ratio:2061/763}
.g2 .row{display:grid;gap:clamp(12px,1.6vw,22px)}
.g2 .row .ph{aspect-ratio:16/10}
.g2 figcaption{margin-top:12px}
.g2 figcaption b{display:block;font-size:1.2rem;color:var(--ink-d)}
@media(min-width:768px){.g2 .row{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.g2 .wide{aspect-ratio:16/9}.g2 .wide img{object-position:32% 50%}}
figure{margin:0}
/* 3 corridors */
.g3 .tall{aspect-ratio:9/16}
.g3 .r1,.g3 .r2{aspect-ratio:16/10}
@media(min-width:900px){
  .g3{grid-template-columns:4fr 6fr 4fr;grid-template-areas:"t r1 c" "t r2 c";align-items:start}
  .g3 .tall{grid-area:t;aspect-ratio:auto;height:100%;min-height:100%}
  .g3 .r1{grid-area:r1}.g3 .r2{grid-area:r2}.g3 .copy{grid-area:c;padding-top:clamp(0px,2vw,30px)}
  .g3 .tallw{grid-area:t;height:100%}
  .g3 .tallw .ph{height:100%}
}
@media(max-width:899px){.g3 .tall{aspect-ratio:4/5}}

/* ---------- apartments ---------- */
.apt{padding:clamp(56px,8vw,130px) 0;background:var(--tint);position:relative;z-index:2}
.apt .sub{max-width:38em;margin:22px auto 0;text-align:center}
.filters{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(28px,4vw,56px);justify-content:center}
.fg{display:flex;flex-direction:column;gap:8px;align-items:center}
.fg>span{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{min-height:46px;padding:0 1.3em;border-radius:999px;border:2px solid var(--ink-d);font-weight:700;color:var(--ink-d);background:transparent;transition:background .2s,color .2s}
.chip:hover{background:#fff}
.chip[aria-pressed="true"]{background:var(--ink-d);color:#fff}
.units{margin-top:clamp(28px,4vw,56px)}
.unit{display:grid;gap:22px;padding:clamp(28px,4vw,56px) 0;border-top:2px solid var(--line)}
.unit[hidden],.plan[hidden]{display:none}
.u-info .kicker{display:block;margin-bottom:8px}
.u-info h3{font-size:clamp(2.2rem,4vw,3.6rem)}
.u-info .area{display:block;font-size:clamp(2.6rem,5vw,4.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.u-info p{margin-top:12px;font-size:1rem}
.u-info .btn{margin-top:20px}
.u-plans{display:grid;gap:24px}
.plan .pb{display:block;width:100%;background:#fff;aspect-ratio:1/.92;padding:clamp(8px,1.5vw,20px);cursor:zoom-in;position:relative}
.plan .pb img{width:100%;height:100%;object-fit:contain}
.plan .pb .hint{position:absolute;right:10px;bottom:10px;background:var(--tint);color:var(--ink-d);font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px}
.plan .cp{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-weight:700;color:var(--ink-d);font-size:1.15rem}
.plan .dg{display:block;width:100%;max-width:340px;margin-top:8px;background:#fff}
@media(min-width:900px){
  .unit{grid-template-columns:3fr 9fr;gap:4vw}
  .u-plans{grid-template-columns:1fr 1fr;gap:2vw;align-items:start}
  .units.one .u-plans{grid-template-columns:1fr}
  .units.one .plan .pb{aspect-ratio:1/.6}
  .u-info{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}
}
@media(max-width:899px){
  .u-plans{grid-auto-flow:column;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(var(--pad) * -1);padding-right:var(--pad);padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .units.one .u-plans{grid-auto-columns:100%}
  .plan{scroll-snap-align:start}
}
.empty{padding:40px 0;text-align:center}

/* ---------- commerce ---------- */
.com{padding:clamp(56px,8vw,130px) 0;background:#fff;position:relative;z-index:2}
.com .sub{max-width:38em;margin:22px auto 0;text-align:center}
.com-sum{margin-top:clamp(28px,4vw,56px)}
.hs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hs .zoombtn{min-width:820px}
@media(min-width:900px){.hs .zoombtn{min-width:0}}
.com-cap{margin-top:12px;font-size:.95rem;color:var(--ink-d)}
.com-grid{display:grid;gap:clamp(28px,4vw,56px) 4vw;margin-top:clamp(40px,6vw,90px)}
.ci .pb{display:block;width:100%;aspect-ratio:1.1/1;background:var(--tint);padding:clamp(8px,1.5vw,20px);cursor:zoom-in;position:relative}
.ci .pb img{width:100%;height:100%;object-fit:contain}
.ci .pb .hint{position:absolute;right:10px;bottom:10px;background:#fff;color:var(--ink-d);font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px}
.ci h3{font-size:clamp(1.4rem,2vw,1.9rem);margin-top:16px}
.ci .area{display:block;font-size:clamp(1.7rem,6.4vw,3.4rem);font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.ci p{font-size:1rem;margin-top:8px}
.ci .dg{max-width:300px;margin-top:12px;width:100%}
.ci .btn{margin-top:14px}
@media(min-width:768px){.com-grid{grid-template-columns:1fr 1fr}}

/* ---------- contacts ---------- */
.ct{padding:clamp(56px,8vw,130px) 0 clamp(72px,9vw,140px);background:#fff;position:relative;z-index:2}
.ct-grid{display:grid;gap:clamp(20px,4vw,60px);align-items:center;margin-top:clamp(28px,4vw,56px)}
.ct-img{overflow:hidden}
.ct-img img{mix-blend-mode:multiply;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:52% 55%}
.ct-info h3{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.ct-tel{display:block;margin-top:14px;font-size:clamp(2.2rem,5.2vw,4.4rem);font-weight:700;letter-spacing:-.03em;text-decoration:none;line-height:1.05;white-space:nowrap}
.ct-info dl{margin:26px 0 30px;display:grid;gap:18px}
.ct-info dt{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d)}
.ct-info dd{margin:4px 0 0;font-size:clamp(1.2rem,1.7vw,1.5rem)}
@media(min-width:900px){.ct-grid{grid-template-columns:6fr 5fr}}
.foot{border-top:1px solid var(--line);padding:26px 0 calc(26px + env(safe-area-inset-bottom));font-size:.95rem;color:var(--ink-d);background:#fff;position:relative;z-index:2}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- mobile call bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.bar.show{transform:none}
.bar .btn{flex:1;min-height:48px;padding:0 1em}
@media(max-width:899px){.bar{display:flex}.foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
.lb-open .bar,.menu-open .bar{transform:translateY(110%)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;-webkit-user-select:none;user-select:none}
.lb.on{opacity:1;visibility:visible}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad);min-height:64px;border-bottom:1px solid var(--line)}
.lb-title{font-weight:700;font-size:1.1rem;color:var(--ink-d);min-width:0}
.lb-title small{display:block;font-weight:400;font-size:.9rem}
.lb-x{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink-d);color:var(--ink-d);flex:none}
.lb-x svg{width:24px;height:24px}
.lb-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:#fff}
.lb-stage.drag{cursor:grabbing}
.lb-img{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:center;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.lb-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:#fff;border:2px solid var(--ink-d);color:var(--ink-d);display:grid;place-items:center;z-index:2}
.lb-nav svg{width:24px;height:24px}
.lb-nav.p{left:12px}.lb-nav.n{right:12px}
.lb-nav[hidden]{display:none}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.zc{display:flex;align-items:center;gap:6px}
.zc button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink-d);color:var(--ink-d);display:grid;place-items:center;font-weight:700;font-size:1.5rem;line-height:1}
.zc button svg{width:22px;height:22px}
.zc output{min-width:56px;text-align:center;font-weight:700;color:var(--ink-d);font-variant-numeric:tabular-nums}
.lb-hintt{font-size:.85rem;color:var(--ink-d);flex:1 1 200px;text-align:center}
.lb-wa{min-height:48px}
.lb-wa[hidden]{display:none}
@media(max-width:600px){.lb-nav{top:auto;bottom:14px;margin-top:0;width:46px;height:46px}.lb-hintt{display:none}.lb-bar{justify-content:center}.lb-wa{flex:1 1 100%;order:-1}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
  .pin{height:auto!important}
  .stage{position:relative;height:auto;overflow:visible}
  .hero .stage{height:100svh;min-height:520px;overflow:hidden}
  .arch .stage{overflow:hidden}
  .hero-title .w1,.hero-title .w2,.hero-bld{transform:none!important;opacity:1!important}
  .hero-hint{display:none}
  .arch .stage{display:grid;gap:20px;padding:calc(var(--hdr) + 16px) 0 0}
  .arch-title{position:static;opacity:1;transform:none}
  .arch-clip{position:relative;inset:auto;clip-path:none;aspect-ratio:16/9;order:2}
  .arch-clip .i1{transform:none}.arch-clip .i2{display:none}
  .cap{position:static;opacity:1!important;transform:none!important;width:auto;padding:0 var(--pad);order:3}
  .cap.c2{order:4}
  .par{transform:none}
  .js [data-r]{opacity:1;transform:none;clip-path:none}
  .js [data-r^="wipe"] img{clip-path:none!important;transform:none!important}
  .fact::before{transform:none}
  .js .ttl .wd>span{transform:none}
  .js .hero-title .ch,.js .hero-bld img{opacity:1;transform:none}
}