/* Φωτογραφείο Πρίσμα — Σχεδιασμός & κατασκευή: DRGPRO Solutions */
:root{
  --bg:#0B0B0C;--bg2:#08080A;--card:#111113;--line:#1f1f23;
  --ink:#EDEAE4;--ink2:#C9C5BD;--mute:#A19D95;--mute2:#8E8A83;
  --spec:linear-gradient(90deg,#ff4d4d,#ffb020,#ffe14d,#45e07a,#2bb8ff,#6a5cff,#b05cff);
  --serif:'Noto Serif Display',Georgia,serif;
  --sans:'Commissioner',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--ink)}a:hover{color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.eyebrow{margin:0 0 14px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-.02em}
.h2 em{font-style:italic;color:var(--ink2)}
.muted{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;opacity:0;animation:fadeTo 1s ease 3.6s forwards;
  background:linear-gradient(180deg,rgba(28,28,32,.55),rgba(14,14,16,.38));
  backdrop-filter:blur(26px) saturate(180%) brightness(1.05);-webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.05);
  border-bottom:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 40px rgba(0,0,0,.35)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,77,77,.5) 20%,rgba(255,225,77,.5) 40%,rgba(69,224,122,.5) 55%,rgba(43,184,255,.5) 70%,rgba(176,92,255,.5) 85%,transparent);pointer-events:none}
.hdr-in{height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hlogo img{height:62px;width:auto;transition:transform .4s,filter .4s}
.hlogo:hover img{transform:scale(1.04);filter:drop-shadow(0 0 12px rgba(255,255,255,.25))}
.nav{display:flex;gap:28px}
.navlink{position:relative;color:var(--ink2);text-decoration:none;font-size:14px;padding:12px 4px}
.navlink:hover{color:#fff}
.navlink::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#ff4d4d,#ffe14d,#45e07a,#2bb8ff,#b05cff);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.navlink:hover::after{transform:scaleX(1)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .3s,background .3s,color .3s;border:0}
.btn.solid{background:var(--ink);color:var(--bg)}.btn.solid:hover{background:#fff;color:var(--bg);transform:translateY(-2px)}
.btn.ghost{border:1px solid rgba(237,234,228,.35);color:var(--ink);background:transparent}.btn.ghost:hover{border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.btn.sm{min-height:44px;padding:0 20px;font-size:14px}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .8s ease;pointer-events:none}
.btn.ghost::after{background:linear-gradient(105deg,transparent,rgba(255,77,77,.25),rgba(43,184,255,.25),transparent)}
.btn:hover::after{left:130%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:820px;margin-top:-92px;padding:150px 24px 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#000}
.hero svg.prism{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:34px;margin-top:150px}
.hero h1{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(30px,4.2vw,54px);line-height:1.15;letter-spacing:-.01em;color:#F4F1EB}
.hero p{margin:0;max-width:560px;font-size:17px;color:var(--mute)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.scroll-cue{position:absolute;bottom:28px;left:50%;margin-left:-14px;width:28px;height:46px;border:1px solid rgba(237,234,228,.4);border-radius:14px;display:flex;justify-content:center;padding-top:8px;z-index:5}
.scroll-cue span{width:3px;height:9px;border-radius:2px;background:var(--ink);display:block;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(18px);opacity:0}}

.shutter{position:absolute;left:0;right:0;height:50%;background:#000;z-index:30;pointer-events:none}
.shutter.top{top:0;animation:shTop 1.1s cubic-bezier(.77,0,.18,1) .35s forwards}
.shutter.bot{bottom:0;animation:shBot 1.1s cubic-bezier(.77,0,.18,1) .35s forwards}
.shutter.top::after,.shutter.bot::before{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.35)}
.shutter.top::after{bottom:0}.shutter.bot::before{top:0}
@keyframes shTop{to{transform:translateY(-101%)}}
@keyframes shBot{to{transform:translateY(101%)}}

.draw{stroke-dasharray:1;stroke-dashoffset:1}
.beam{animation:draw .9s cubic-bezier(.6,0,.3,1) 1.2s forwards}
.prism-edge{animation:draw 1s ease 1s forwards}
.ray{animation:draw 1.3s cubic-bezier(.2,.7,.2,1) forwards}
.ray:nth-child(1){animation-delay:2s}.ray:nth-child(2){animation-delay:2.05s}.ray:nth-child(3){animation-delay:2.1s}
.ray:nth-child(4){animation-delay:2.15s}.ray:nth-child(5){animation-delay:2.2s}.ray:nth-child(6){animation-delay:2.25s}.ray:nth-child(7){animation-delay:2.3s}
@keyframes draw{to{stroke-dashoffset:0}}
.rays{animation:rayPulse 5s ease-in-out 3.6s infinite}
@keyframes rayPulse{0%,100%{opacity:.9}50%{opacity:.5}}
.fan{opacity:0;animation:fanIn 2s ease 2.4s forwards,breathe 6s ease-in-out 4.4s infinite}
@keyframes fanIn{to{opacity:.22}}
@keyframes breathe{0%,100%{opacity:.22}50%{opacity:.34}}
.prism-fill{opacity:0;animation:fadeTo 1s ease 1.6s forwards}
@keyframes fadeTo{to{opacity:1}}
.flash{opacity:0;transform-origin:center;transform-box:fill-box;animation:flash 1.2s ease 1.95s forwards}
@keyframes flash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:.35;transform:scale(1)}}

.logo-wrap{position:relative;width:min(680px,86vw);aspect-ratio:1148/389;opacity:0;filter:blur(16px);transform:scale(.94);animation:logoIn 1.6s cubic-bezier(.2,.7,.2,1) 2.5s forwards}
@keyframes logoIn{to{opacity:1;filter:blur(0);transform:none}}
.logo-wrap img{width:100%;height:100%;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.sheen{position:absolute;inset:0;-webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat;background:linear-gradient(105deg,transparent 38%,#ff4d4d 43%,#ffb020 46%,#ffe14d 48%,#45e07a 50%,#2bb8ff 52%,#6a5cff 54%,#b05cff 57%,transparent 62%);background-size:300% 100%;background-position:100% 0;animation:sheen 7s ease-in-out 4.2s infinite;mix-blend-mode:screen}
@keyframes sheen{0%{background-position:100% 0}35%,100%{background-position:0% 0}}

.up{opacity:0;transform:translateY(24px);animation:up 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.d1{animation-delay:3.3s}.d2{animation-delay:3.5s}.d3{animation-delay:3.7s}.d4{animation-delay:4.2s}

.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;z-index:2;pointer-events:none;box-shadow:0 0 8px currentColor;animation:spark var(--d,12s) linear var(--s,0s) infinite}
@keyframes spark{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.85}60%{opacity:.5}100%{transform:translate(var(--x,30px),-300px) scale(1.2);opacity:0}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid #1d1d21;border-bottom:1px solid #1d1d21;padding:22px 0;overflow:hidden}
.mq{display:flex;width:max-content;animation:mq 38s linear infinite;white-space:nowrap}
.mq span{padding-right:48px}
.mq.big{font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;color:var(--mute2)}
.mq.rev{margin-top:14px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#6b6862;animation-direction:reverse;animation-duration:46s}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:130px 0 110px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.sec-head p.lead{margin:0;max-width:420px;color:var(--mute);font-size:16px}

.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:36px 32px 40px;min-height:280px;display:flex;flex-direction:column;gap:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}
.card h3{margin:0;font-size:22px;font-weight:500}
.card p{margin:0;color:var(--mute);font-size:15px}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spec);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-6px);border-color:rgba(237,234,228,.28)}
.card:hover::after{transform:scaleX(1)}
.card svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover svg{transform:rotate(-10deg) scale(1.18)}

/* ---------- gallery ---------- */
.gal-wrap{padding-top:120px;padding-bottom:120px}
.gallery-sec{background:var(--bg2);border-top:1px solid #18181b;border-bottom:1px solid #18181b}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #2c2c31;background:transparent;color:var(--ink2);font:inherit;font-size:14px;cursor:pointer;transition:all .3s}
.chip:hover{border-color:#6b6862;color:#fff}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:16px}
.tile{position:relative;overflow:hidden;border-radius:6px;background:#151518;border:1px solid #232327;padding:0;cursor:zoom-in;font:inherit;color:inherit}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.tile:hover img{transform:scale(1.06)}
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 44%,rgba(255,77,77,.10) 48%,rgba(43,184,255,.10) 53%,transparent 68%);transform:translateX(-120%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover::before{transform:translateX(120%)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65));opacity:0;transition:opacity .4s;pointer-events:none}
.tile:hover::after{opacity:1}
.tile .cap{position:absolute;left:16px;bottom:14px;z-index:3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:all .4s;text-align:left}
.tile:hover .cap{opacity:1;transform:none}
.tile .zoom{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:rgba(11,11,12,.6);border:1px solid rgba(237,234,228,.2);opacity:0;transform:scale(.7);transition:all .35s}
.tile:hover .zoom{opacity:1;transform:none}
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tile.hide{display:none}
.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}
.empty{grid-column:1/-1;padding:80px 24px;text-align:center;color:var(--mute);border:1px dashed #2a2a2f;border-radius:10px}

/* ---------- βίντεο στο πλέγμα ---------- */
.chip svg{margin-right:7px;vertical-align:-1px}
.tile-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#1d1d22,#121215)}
.tile-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
.tile.previewing .tile-prev{opacity:1}
.tile .play{position:absolute;left:50%;top:50%;z-index:3;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(11,11,12,.42);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .4s,background .4s}
.tile .play svg{margin-left:3px}
.tile .play::after{content:"";position:absolute;inset:-3px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,#ff4d4d,#ffb020,#ffe14d,#45e07a,#2bb8ff,#6a5cff,#b05cff,#ff4d4d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s}
.tile:hover .play,.tile:focus-visible .play{transform:scale(1.1);background:rgba(11,11,12,.6)}
.tile:hover .play::after,.tile:focus-visible .play::after{opacity:1;animation:spin 2.4s linear infinite}
.tile.previewing .play{transform:scale(.8);opacity:.75}
.tile .vtag{position:absolute;top:12px;left:12px;z-index:3;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:999px;background:rgba(11,11,12,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- βίντεο στο lightbox ---------- */
.lb-stage.is-media video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);pointer-events:auto;animation:lbZoom .5s cubic-bezier(.2,.7,.2,1) both;outline:none}
.lb-embed{position:relative;width:min(100%,1200px,calc((100vh - 204px) * 16 / 9));aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);pointer-events:auto;animation:lbZoom .5s cubic-bezier(.2,.7,.2,1) both}
.lb-embed.vertical{width:auto;height:100%;max-width:100%;aspect-ratio:9/16}
.lb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.th{position:relative}
.th-video::after{content:"";position:absolute;left:50%;top:50%;margin:-6px 0 0 -4px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:84px 88px 120px}
.lb.open{display:flex;animation:fadeTo .35s ease both;opacity:0}
.lb-bg{position:absolute;inset:0;border:0;padding:0;margin:0;background:rgba(5,5,6,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:zoom-out}
.lb-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:20px;padding:18px 24px}
.lb-cap{flex:1;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.lb-count{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.lb-stage{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);pointer-events:auto;animation:lbZoom .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes lbZoom{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:none}}
.lb-btn{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(237,234,228,.18);cursor:pointer;transition:all .3s}
.lb-btn:hover,.lb-btn:focus-visible{background:var(--ink);color:var(--bg);outline:none}
.lb-nav{position:absolute;top:50%;margin-top:-24px}
.lb-nav.prev{left:22px}.lb-nav.next{right:22px}
.lb-thumbs{position:absolute;bottom:26px;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:8px;padding:0 24px;overflow-x:auto}
.th{flex:none;width:56px;height:40px;border-radius:4px;border:2px solid transparent;background:#1a1a1e;cursor:pointer;padding:0;overflow:hidden;opacity:.5;transition:all .3s}
.th img{width:100%;height:100%;object-fit:cover}
.th:hover{opacity:.85}
.th.on{opacity:1;border-color:var(--ink);transform:scale(1.08)}

/* ---------- about ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center}
.about-photo{position:relative;aspect-ratio:4/5;border-radius:10px;background:#141417;border:1px solid #222226;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#ff4d4d,#ffb020,#ffe14d,#45e07a,#2bb8ff,#6a5cff,#b05cff,#ff4d4d)}
.about-txt{display:flex;flex-direction:column;gap:26px}
.about-txt .lead{margin:0;font-size:17px;color:var(--ink2)}
.about-txt .more p{margin:0 0 14px;font-size:16px;color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #222226;margin-top:14px}
.steps div{padding:22px 0}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:22px}
.steps span{font-size:14px;color:var(--mute)}

/* ---------- quote ---------- */
.quote{position:relative;overflow:hidden;padding:120px 24px;text-align:center;background:#000}
.quote .line{position:absolute;left:0;right:0;top:50%;height:1px;opacity:.5;background:linear-gradient(90deg,transparent,#ff4d4d 20%,#ffe14d 40%,#45e07a 55%,#2bb8ff 70%,#b05cff 85%,transparent)}
.quote p{position:relative;margin:0 auto;max-width:900px;padding:0 24px;background:#000;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,3.6vw,48px);line-height:1.25;color:#F4F1EB}
.flow{background-size:200% 100%!important;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:200% 0}}

/* ---------- contact ---------- */
.info{border-top:1px solid #222226;margin-top:8px}
.info-row{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid #222226}
.info-row svg{flex:none;margin-top:2px}
.info-row small{display:block;font-size:13px;color:var(--mute)}
.info-row div p{margin:2px 0 0;font-size:17px}
.info-row a{text-decoration:none}
.form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:36px;display:flex;flex-direction:column;gap:18px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:13px;color:var(--mute);letter-spacing:.04em}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;color:var(--ink);background:#121214;border:1px solid #2a2a2f;border-radius:6px;padding:14px 16px;min-height:48px;outline:none;transition:border-color .3s;color-scheme:dark}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{padding:14px 16px;border-radius:8px;font-size:15px}
.note.ok{background:rgba(69,224,122,.1);border:1px solid rgba(69,224,122,.35);color:#bff3cf}
.note.err{background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.35);color:#ffc9c9}

/* ---------- footer ---------- */
.ftr{border-top:1px solid #1d1d21;background:var(--bg2)}
.ftr-in{padding:48px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ftr-in img{height:52px;width:auto;opacity:.85}
.ftr small{font-size:13px;color:var(--mute2)}
.socials{display:flex;gap:12px}
.soc{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2);border:1px solid #2a2a2f;transition:all .3s}
.soc:hover{color:var(--bg);background:var(--ink);border-color:var(--ink);transform:translateY(-3px)}
.credit{border-top:1px solid #18181b;margin:0;padding:18px 24px;font-size:12px;letter-spacing:.06em;color:var(--mute2);text-align:center}
.credit b{color:var(--ink2);font-weight:500}

/* ---------- floating buttons ---------- */
.fab{position:fixed;bottom:22px;z-index:50;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,20,23,.62);border:1px solid rgba(237,234,228,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;animation:fadeTo .8s ease 4.4s forwards;transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.fab.call{left:22px}
.fab.call::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(237,234,228,.35);animation:ping 3.2s ease-out 5s infinite;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.6);opacity:0}}
.fab.top{right:22px}
.fab::after{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,#ff4d4d,#ffb020,#ffe14d,#45e07a,#2bb8ff,#6a5cff,#b05cff,#ff4d4d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transform:scale(.85);transition:opacity .35s,transform .35s;pointer-events:none}
.fab:hover,.fab:focus-visible{transform:translateY(-3px) scale(1.08);background:var(--bg);border-color:transparent;color:#fff;box-shadow:0 0 22px rgba(255,77,77,.25),0 0 30px rgba(43,184,255,.25),0 8px 24px rgba(0,0,0,.5);outline:none}
.fab:hover::after,.fab:focus-visible::after{opacity:1;transform:scale(1);animation:spin 2.4s linear infinite}
.fab:hover svg,.fab:focus-visible svg{stroke:url(#fabgrad)}
@keyframes spin{to{transform:rotate(360deg)}}
.fab.top{transition:opacity .4s,transform .3s,background .3s,box-shadow .3s}
.fab.top.away{opacity:0!important;pointer-events:none;transform:translateY(12px)}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--spec);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* ---------- scroll-driven ---------- */
.rv{opacity:1}
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
  .g3 .rv:nth-child(3n+2){animation-range:entry 8% entry 55%}
  .g3 .rv:nth-child(3n){animation-range:entry 16% entry 65%}
  .tile{animation:tileIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes tileIn{from{opacity:0;transform:translateY(50px) scale(.95);clip-path:inset(35% 0 0 0 round 6px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 6px)}}
  .h2{animation:h2In linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes h2In{from{filter:blur(6px)}to{filter:blur(0)}}
}
@supports (animation-timeline: scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{to{transform:scaleX(1)}}
  .par-bg{animation:parBg linear both;animation-timeline:scroll(root);animation-range:0 820px}
  @keyframes parBg{to{transform:translateY(180px) scale(1.1);opacity:.25}}
  .par-fg{animation:parFg linear both;animation-timeline:scroll(root);animation-range:0 760px}
  @keyframes parFg{to{transform:translateY(-90px) scale(.96);opacity:0}}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr);gap:40px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
}
@media (max-width:760px){
  .nav{display:none}
  .hlogo img{height:46px}
  .hdr-in{height:76px}
  .hero{margin-top:-76px}
}
@media (max-width:640px){
  .g3,.f2,.steps{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal{grid-auto-rows:150px;gap:10px}
  .form{padding:24px}
  .lb{padding:72px 12px 130px}
  .lb-nav{top:auto;bottom:80px;margin-top:0}
  .lb-thumbs{bottom:20px;justify-content:flex-start}
  .sec{padding:90px 0 80px}
  .gal-wrap{padding-top:90px;padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .mq{animation:none}
  .shutter,.spark{display:none}
}