/* Marina K — site styles */
body{margin:0;background:#fff9fa}
a{color:#785d28;text-decoration:none}a:hover{color:#5a431a}
.mk{font-family:'Jost',sans-serif;color:#342b2f;background:#fff9fa}
.serif{font-family:'Cormorant Garamond',serif}

/* ---------- small diamonds ---------- */
.dia{display:block;width:9px;height:9px;transform:rotate(45deg);background:#b8924a;flex:none}
.dia.sm{width:6px;height:6px}.dia.lg{width:14px;height:14px}
.dia.hollow{background:transparent;border:1px solid #b8924a}

/* ---------- Art Deco frame: a square-cornered outline crossed by a wider octagon (cut corners) ----------
   .oct.a = square outline (narrower), .oct.b = octagon (full width, big corner cuts).
   --c = octagon corner cut size, --o = how far the square sits in from the octagon (same on all four sides)
   Images/videos fill the shape where the two overlap: the square with its corners cut by the octagon. */
.deco{--g:#b8924a;--bg:#f7e6eb;--c:40px;--o:14px;position:relative;padding:var(--o)}
.deco.sm{--c:30px;--o:11px;padding:var(--o)}
.deco::before{content:"";position:absolute;inset:0;background:var(--bg);clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.deco>*{position:relative}
.deco>.oct{position:absolute;pointer-events:none;z-index:2;background:
 linear-gradient(var(--g),var(--g)) 50% 0/calc(100% - 2*var(--c)) 1px no-repeat,
 linear-gradient(var(--g),var(--g)) 50% 100%/calc(100% - 2*var(--c)) 1px no-repeat,
 linear-gradient(var(--g),var(--g)) 0 50%/1px calc(100% - 2*var(--c)) no-repeat,
 linear-gradient(var(--g),var(--g)) 100% 50%/1px calc(100% - 2*var(--c)) no-repeat,
 linear-gradient(to bottom right,transparent calc(50% - .6px),var(--g) calc(50% - .6px),var(--g) calc(50% + .6px),transparent calc(50% + .6px)) 0 0/var(--c) var(--c) no-repeat,
 linear-gradient(to bottom left,transparent calc(50% - .6px),var(--g) calc(50% - .6px),var(--g) calc(50% + .6px),transparent calc(50% + .6px)) 100% 0/var(--c) var(--c) no-repeat,
 linear-gradient(to top right,transparent calc(50% - .6px),var(--g) calc(50% - .6px),var(--g) calc(50% + .6px),transparent calc(50% + .6px)) 0 100%/var(--c) var(--c) no-repeat,
 linear-gradient(to bottom right,transparent calc(50% - .6px),var(--g) calc(50% - .6px),var(--g) calc(50% + .6px),transparent calc(50% + .6px)) 100% 100%/var(--c) var(--c) no-repeat}
.deco>.oct.a{inset:var(--o);background:
 linear-gradient(var(--g),var(--g)) 0 0/100% 1px no-repeat,
 linear-gradient(var(--g),var(--g)) 100% 0/1px 100% no-repeat,
 linear-gradient(var(--g),var(--g)) 100% 100%/100% 1px no-repeat,
 linear-gradient(var(--g),var(--g)) 0 100%/1px 100% no-repeat}
.deco>.oct.b{inset:0}
.deco .rv-img{--k:calc(var(--c) - 2 * var(--o));clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)),0 var(--k))}
/* hover: image frames grow a little */
.deco.hov{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}
.deco.hov:hover{transform:scale(1.035);filter:drop-shadow(0 14px 24px rgba(120,93,40,.16))}

/* ---------- watery shimmering "creative technology." ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ct{display:block;width:clamp(270px,38vw,520px);max-width:100%;height:auto;overflow:visible;margin-top:4px}
.ctt{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:118px;letter-spacing:-2px}
.cto{fill:none;stroke:#6e521f;stroke-width:.9;opacity:.6}

.ctclip{clip-path:url(#mkClip)}
.cf{color-interpolation-filters:sRGB}
@keyframes drift1{from{transform:translate(0,0)}to{transform:translate(-150px,34px)}}
@keyframes drift2{from{transform:translate(-120px,20px)}to{transform:translate(0,-10px)}}
.drift1{animation:drift1 24s ease-in-out infinite alternate}
.drift2{animation:drift2 17s ease-in-out infinite alternate}

/* ---------- divider ---------- */
.rule{display:flex;align-items:center;gap:14px}
.rule .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,#c9a96a 30%,#c9a96a 70%,transparent)}

/* ---------- nav / buttons ---------- */
.nav a{font-size:14px;color:#73666b;padding:12px 2px;border-bottom:1px solid transparent;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;transition:color .3s,border-color .3s}
.nav a:hover,.nav a.on{color:#785d28;border-color:#b8924a}
.menu{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 26px;background:#785d28;color:#fffaf0;font-size:14px;letter-spacing:.04em;border:1px solid #785d28;box-shadow:inset 0 0 0 3px #785d28,inset 0 0 0 4px #d8bd84;transition:background .3s,transform .3s}
.btn:hover{background:#5a431a;color:#fffaf0;transform:translateY(-2px)}
.ghost{display:inline-flex;align-items:center;min-height:46px;padding:0 4px;font-size:14px;color:#785d28;border-bottom:1px solid #b8924a}
.card .zoom{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .zoom{transform:scale(1.04)}
.card h3{transition:color .3s}.card:hover h3{color:#785d28}
.disc a{color:#342b2f;transition:color .3s,padding-left .4s}
.disc a:hover{color:#785d28;padding-left:8px}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;color:#8a6e3a;font-size:12px;letter-spacing:.08em;background-color:#f2dde4;background-image:linear-gradient(45deg,#f6e7ec 25%,transparent 25%,transparent 75%,#f6e7ec 75%),linear-gradient(45deg,#f6e7ec 25%,transparent 25%,transparent 75%,#f6e7ec 75%);background-size:28px 28px;background-position:0 0,14px 14px}

/* ---------- reveal: pure CSS, plays as soon as the page renders ----------
   .rv      = rise up + fade in       .grp = container whose children (.st) stagger in
   .rv-img  = image unveils upward and settles from a slight zoom
   .scroll  = waits until the block scrolls into view (Chrome, Edge, Safari 26+; elsewhere it plays on load) */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes unveil{from{opacity:0}to{opacity:1}}
@keyframes settle{from{transform:scale(1.14)}to{transform:none}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gem{from{opacity:0;transform:rotate(45deg) scale(.2)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.rv{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.rv.grp{animation-name:fade;animation-duration:.6s}
.rv .st{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.rv .st:nth-child(1){animation-delay:.1s}
.rv .st:nth-child(2){animation-delay:.25s}
.rv .st:nth-child(3){animation-delay:.4s}
.rv .st:nth-child(4){animation-delay:.55s}
.rv .st:nth-child(5){animation-delay:.7s}
.rv-img{animation:unveil 1.2s ease 1.1s both}
.rv-img>*{animation:settle 1.9s cubic-bezier(.2,.7,.2,1) 1.1s both}
/* frame draw-in: the square traces itself clockwise like a pen, the octagon's sides open out from their centres, then its corners snap in */
@keyframes traceSq{
 0%{background-size:0 1px,1px 0,0 1px,1px 0}
 25%{background-size:100% 1px,1px 0,0 1px,1px 0}
 50%{background-size:100% 1px,1px 100%,0 1px,1px 0}
 75%{background-size:100% 1px,1px 100%,100% 1px,1px 0}
 100%{background-size:100% 1px,1px 100%,100% 1px,1px 100%}}
@keyframes openOct{
 0%{opacity:0;background-size:0 1px,0 1px,1px 0,1px 0,0 0,0 0,0 0,0 0}
 10%{opacity:1}
 70%{background-size:calc(100% - 2*var(--c)) 1px,calc(100% - 2*var(--c)) 1px,1px calc(100% - 2*var(--c)),1px calc(100% - 2*var(--c)),0 0,0 0,0 0,0 0}
 100%{opacity:1;background-size:calc(100% - 2*var(--c)) 1px,calc(100% - 2*var(--c)) 1px,1px calc(100% - 2*var(--c)),1px calc(100% - 2*var(--c)),var(--c) var(--c),var(--c) var(--c),var(--c) var(--c),var(--c) var(--c)}}
.rv .deco>.oct.a{animation:traceSq 1.6s linear .15s both}
.rv .deco>.oct.b{animation:openOct 1.3s cubic-bezier(.4,0,.2,1) .55s both}
.rv .rule .ln{animation:drawX 1.3s cubic-bezier(.7,0,.2,1) .15s both}
.rv.d1{animation-delay:.3s}
@supports (animation-timeline: view()){
 .scroll,.scroll .st,.scroll .rv-img,.scroll .rv-img>*,.scroll .deco>.oct,.scroll .rule .ln{animation-timeline:view();animation-duration:auto;animation-delay:0s}
 .scroll{animation-range:entry 0% cover 28%}
 .scroll .st:nth-child(1){animation-delay:0s;animation-range:entry 0% cover 22%}
 .scroll .st:nth-child(2){animation-delay:0s;animation-range:entry 10% cover 28%}
 .scroll .st:nth-child(3){animation-delay:0s;animation-range:entry 20% cover 34%}
 .scroll .st:nth-child(4){animation-delay:0s;animation-range:entry 30% cover 40%}
 .scroll .st:nth-child(5){animation-delay:0s;animation-range:entry 40% cover 46%}
 .card.scroll:nth-child(2){animation-range:entry 12% cover 34%}
 .card.scroll:nth-child(3){animation-range:entry 24% cover 40%}
 .scroll .rv-img,.scroll .rv-img>*{animation-range:entry 15% cover 45%}
 .scroll .deco>.oct.a{animation-timeline:view();animation-duration:auto;animation-delay:0s;animation-timing-function:linear;animation-range:entry 10% cover 45%}
 .scroll .deco>.oct.b{animation-timeline:view();animation-duration:auto;animation-delay:0s;animation-range:entry 25% cover 50%}
 .scroll .rv-img,.scroll .rv-img>*{animation-range:entry 35% cover 55%}
 .scroll .rule .ln{animation-range:entry 0% cover 30%}
}

@media (max-width:760px){
 .menu{display:inline-flex}
 .nav{display:none !important;width:100%;flex-direction:column;gap:0 !important}
 .nav.open{display:flex !important}
 .hdr{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
 .rv,.rv *,.rv-img,.rv-img>*{animation:none !important}
}

/* ---------- inner pages ---------- */
.zoom{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.deco.hov:hover .zoom{transform:scale(1.04)}
.eb{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#785d28}
.lead{max-width:640px;font-size:18px;line-height:1.7;color:#6d5f65;margin:22px 0 0}
.body{font-size:16px;line-height:1.75;color:#6d5f65;margin:16px 0 0;max-width:720px}
.h2{margin:0;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(38px,4.6vw,60px);line-height:1.05;letter-spacing:-.03em}
.h3{margin:0;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.02em}
.h2 em,.h3 em,.h1 em{font-weight:400;color:#785d28}
.h1{margin:0;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(50px,7vw,96px);line-height:1;letter-spacing:-.03em}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #d8bd84;background:#fff9fa;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#785d28}
.jump{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px}
.jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:#785d28;border-bottom:1px solid #c9a96a}
.cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#785d28;text-align:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(28px,3vw,44px)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,3vw,44px)}
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(44%,170px),1fr));gap:clamp(18px,2.4vw,34px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px);align-items:center}
.facts{display:grid;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid #e3c9a0;font-size:15px;color:#342b2f}
.facts span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#785d28;margin-bottom:2px}
.band{padding:clamp(56px,7vw,96px) 0}
.panel{padding:clamp(28px,4vw,52px);margin-top:44px}
.vid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.vid svg{width:44px;height:44px;fill:none;stroke:#8a6e3a;stroke-width:1}

/* ---------- real images & videos inside the frames ---------- */
.media{display:block;width:100%;object-fit:cover;background:#f2dde4}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:#fff9fa;color:#785d28;padding:10px 16px;border:1px solid #c9a96a}
.skip:focus{top:12px}