/* ============ FotoNovelty — Frame Brand theme ============ */
:root{
    --mint:#02fcc4;
    --cyan:#00bdf3;
    --ink:#121212;
    --muted:#666;
    --line:#121212;
    --bg:#fff;
    --soft:#fafafa;
    --grad:linear-gradient(90deg,var(--mint),var(--cyan));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
h1:focus{outline:none}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}

/* reveal — gated on .js so content is never hidden without JavaScript */
html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* nav */
.topnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px;gap:1rem}
.logo{display:flex;align-items:center}
.logo img{height:22px;display:block;width:auto}
.nav-links{display:flex;gap:1.8rem;font-weight:500;font-size:.88rem;color:var(--muted)}
.nav-links a{position:relative;padding:.2rem 0;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:inherit;font-size:.86rem;font-weight:600;padding:.65rem 1.2rem;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn-fill{background:var(--ink);color:#fff}
.btn-fill:hover{background:#fff;color:var(--ink)}
.btn-accent,.btn-pop{border-color:transparent;background:var(--grad);color:var(--ink)}
.btn-accent:hover,.btn-pop:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* home hero */
.hero{padding:3.5rem 0 4rem}
.hero-frame{border:1px solid var(--line);padding:clamp(2.4rem,5vw,4rem);position:relative}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--line);background:var(--bg)}
.hero-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.hero-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.hero-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.hero-kicker{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:.55rem}
.hero-kicker::before{content:"";width:20px;height:2px;background:var(--grad)}
.hero-brand{margin-bottom:1.1rem}
.hero-brand img{height:clamp(28px,4.5vw,40px);width:auto;display:block}
.hero h1{font-size:clamp(2rem,4.8vw,3.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.1;max-width:18ch}
.hero> .wrap > .hero-frame > p,
.hero-frame > p{margin-top:1.2rem;max-width:480px;font-size:1.05rem;color:var(--muted)}
.hero-ctas{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero-side{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);padding-top:1.4rem}
.hero-side div{padding-right:1.2rem;border-right:1px solid var(--line)}
.hero-side div:last-child{border-right:none;padding-right:0}
.hero-side strong{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.hero-side span{font-size:.8rem;color:var(--muted)}

/* sections */
section{padding:4.5rem 0}
.sec-kicker,.sec-label{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.7rem;border:none;padding:0;border-radius:0}
.sec-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.025em;margin-bottom:0}
.sec-title em{font-style:normal;color:var(--ink);background:none;-webkit-text-fill-color:unset}
.sec-head,.sec-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sec-head-row .sec-title{margin-bottom:0}
.link-more{font-weight:600;font-size:.85rem;color:var(--cyan);white-space:nowrap;border-bottom:1px solid transparent}
.link-more:hover{border-bottom-color:var(--cyan)}

/* cards / posts */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.post-card{background:var(--bg);border:1px solid var(--line);overflow:hidden;transition:background .15s;display:flex;flex-direction:column;border-radius:0;box-shadow:none}
.post-card:hover{background:var(--soft);transform:none;box-shadow:none}
.post-art{aspect-ratio:4/3;display:grid;place-items:center;font-size:1.6rem;border-bottom:1px solid var(--line);background:var(--soft);overflow:hidden;position:relative}
.post-art::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.post-card:hover .post-art::after{transform:scaleX(1)}
.post-art img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post-card:hover .post-art img{transform:scale(1.03)}
.post-body{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-meta{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan)}
.post-card h3{font-size:1rem;font-weight:650;letter-spacing:-.015em;line-height:1.3;text-transform:none;font-family:inherit}
.post-card p{font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .go{margin-top:auto;padding-top:.8rem;font-weight:600;font-size:.85rem;text-transform:none}
.post-card .go i{font-style:normal;display:inline-block;transition:transform .2s}
.post-card:hover .go i{transform:translateX(6px)}

/* about (light framed — replaces dark band) */
.band-dark,.about-band{background:transparent;color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:stretch}
.about-copy,.about-grid > div:first-child{border:1px solid var(--line);padding:2rem}
.about-grid h2{margin-bottom:1rem}
.about-grid p{color:var(--muted);margin-bottom:1rem;max-width:none;opacity:1}
.badges,.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.badge,.stat{border:1px solid var(--line);border-radius:0;padding:1.5rem;text-align:left;display:flex;flex-direction:column;justify-content:center;transition:background .15s}
.badge:hover,.stat:hover{background:var(--soft);transform:none;border-color:var(--line)}
.badge strong,.stat strong{font-family:inherit;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;display:block;color:var(--ink);background:none;-webkit-text-fill-color:unset}
.badge span,.stat span{font-size:.8rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);opacity:1;margin-top:.2rem}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.member{background:var(--bg);border:1px solid var(--line);border-radius:0;padding:1.8rem;text-align:left;box-shadow:none;transition:background .15s}
.member:hover{background:var(--soft);transform:none;box-shadow:none}
.member .avatar{width:48px;height:48px;border-radius:0;margin:0 0 1rem;display:grid;place-items:center;font-family:inherit;font-size: .9rem;font-weight:700;background:var(--grad);border:1px solid var(--line);color:var(--ink)}
.member h3{font-family:inherit;text-transform:none;font-size:1.05rem;font-weight:650;letter-spacing:-.015em}
.member .role{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin:.25rem 0 .6rem}
.member p{font-size:.9rem;color:var(--muted)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:stretch}
.contact-left{border:1px solid var(--line);padding:2rem}
.contact-left>p{font-size:1rem;font-weight:400;max-width:none;margin-bottom:1.6rem;color:var(--muted)}
.contact-line{display:flex;align-items:center;gap:.7rem;font-weight:500;font-size:.95rem;margin-bottom:.85rem}
.contact-line .ico-box,.contact-line b{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:0;background:transparent;font-size:.85rem;font-weight:600;flex-shrink:0}
.contact-form{background:var(--bg);border:1px solid var(--line);border-radius:0;padding:2rem;box-shadow:none;display:grid;gap:1rem}
.contact-form label{font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;display:grid;gap:.4rem;color:var(--muted)}
.contact-form input,.contact-form textarea{font-family:inherit;font-size:.95rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:0;background:#fff;transition:box-shadow .15s,border-color .15s;outline:none;resize:vertical;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,189,243,.15)}
.sent{font-weight:600;color:#00a186;font-size:.9rem}

/* article (blog / service detail) */
.article{max-width:780px;margin:0 auto;padding:3rem 0 4rem}
.article-back{display:inline-block;font-weight:600;font-size:.85rem;color:var(--cyan);margin-bottom:1.6rem}
.article-back:hover{text-decoration:underline}
.article .post-meta{margin-bottom:.4rem;display:block}
.article h1{font-family:inherit;text-transform:none;font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem}
.article .lede{font-size:1.1rem;font-weight:400;color:var(--muted);margin-bottom:1.4rem}
.article .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.article .tag{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.35rem .75rem;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink)}
.article .tag:not(.tag-plain){background:var(--grad);border-color:transparent}
.article .cover{display:block;line-height:0;border:1px solid var(--line);border-radius:0;overflow:hidden;box-shadow:none;margin-bottom:2.2rem}
.article .cover img{display:block;width:100%;max-height:460px;object-fit:cover}
.article-body{font-size:1.04rem;line-height:1.75;color:var(--ink)}
.article-body h1,.article-body h2,.article-body h3,.article-body h4{font-family:inherit;text-transform:none;font-weight:700;letter-spacing:-.02em;margin:1.9rem 0 .7rem;line-height:1.2}
.article-body h3{font-size:1.25rem}
.article-body p{margin:0 0 1.05rem}
.article-body blockquote{border-left:3px solid;border-image:var(--grad) 1;padding:.3rem 0 .3rem 1.2rem;font-weight:500;margin:1.5rem 0;color:var(--muted)}
.article-body code{background:var(--soft);border-radius:0;padding:.15rem .4rem;font-size:.9em;border:1px solid var(--line)}
.article-body a{color:var(--cyan);font-weight:600}
.article-body ul,.article-body ol{margin:0 0 1.05rem;padding-left:1.4rem}
.article-body figure{margin:1.9rem 0}
.article-body figure img{width:100%;border:1px solid var(--line);border-radius:0;box-shadow:none}
.article-body figcaption{text-align:center;font-size:.85rem;margin-top:.7rem;font-weight:500;color:var(--muted)}
.article-section{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.article-section h2{font-family:inherit;text-transform:none;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.2rem}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.link-card{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:0;background:#fff;box-shadow:none;transition:background .15s}
.link-card:hover{background:var(--soft);transform:none;box-shadow:none}
.link-card .ext{display:grid;place-items:center;min-width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:0;font-size:.68rem;font-weight:700;background:var(--grad)}
.link-card .txt{display:flex;flex-direction:column;min-width:0}
.link-card .txt strong{font-size:.92rem}
.link-card .txt small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-image{margin:0}
.media-image img{width:100%;border:1px solid var(--line);border-radius:0}
.media-image figcaption{font-size:.84rem;font-weight:500;margin-top:.5rem;color:var(--muted)}
.post-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.post-nav a{display:flex;flex-direction:column;gap:.2rem;max-width:48%}
.post-nav small{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.post-nav span{font-weight:600}
.post-nav a:hover span{color:var(--cyan)}
.post-nav .next{text-align:right;margin-left:auto}

/* services catalog */
.cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.cat-nav a{font-weight:600;font-size:.8rem;text-transform:none;letter-spacing:0;padding:.45rem .9rem;border:1px solid var(--line);border-radius:0;background:#fff;transition:background .15s}
.cat-nav a:hover{background:var(--soft);transform:none}
.cat-nav a b{color:var(--cyan);margin-left:.3rem;font-weight:600}
.cat-sec{padding:3.2rem 0 1.2rem;scroll-margin-top:80px}
.tag-plain{background:#fff}
.svc-cta{margin:2rem 0 .6rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.gallery a{display:block;border:1px solid var(--line);border-radius:0;overflow:hidden;box-shadow:none;transition:opacity .15s;aspect-ratio:1;background:#fff}
.gallery a:hover{opacity:.85;transform:none;box-shadow:none}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.video-card{margin:0}
.video-card video{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:0;background:#000;box-shadow:none}
.video-card figcaption{font-size:.84rem;font-weight:500;margin-top:.5rem;color:var(--muted)}

/* footer */
.footer{border-top:1px solid var(--line);padding:1.8rem 0 2.4rem;margin-top:2rem}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer .cols{display:flex;gap:1.4rem;flex-wrap:wrap;font-weight:500;font-size:.82rem;color:var(--muted);text-transform:none}
.footer .cols a:hover{color:var(--ink)}
.footer .copy{font-weight:500;font-size:.82rem;text-transform:none;color:var(--muted)}
.footer-brand{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.footer-brand img{height:18px;display:block;width:auto;opacity:.85}

/* lightbox */
html.lb-lock{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(18,18,18,.94);padding:1rem}
.lightbox.open{display:flex}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:min(1100px,100%)}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;border:1px solid #fff;border-radius:0;background:#fff;box-shadow:none;animation:lb-in .22s ease}
@keyframes lb-in{from{opacity:0;transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.lightbox img{animation:none}}
.lightbox figcaption{color:#f4f7f6;font-weight:500;font-size:.92rem;text-align:center}
.lb-btn{display:grid;place-items:center;width:2.8rem;height:2.8rem;font-size:1.1rem;font-weight:700;font-family:inherit;background:var(--grad);color:var(--ink);border:1px solid transparent;border-radius:0;box-shadow:none;cursor:pointer;transition:background .12s,color .12s;position:absolute;z-index:1}
.lb-btn:hover{background:#fff;color:var(--ink);transform:none;box-shadow:none}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;margin-top:-1.4rem}
.lb-next{right:1rem;top:50%;margin-top:-1.4rem}
.lb-count{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);font-weight:600;font-size:.82rem;letter-spacing:.08em;color:#f4f7f6;background:rgba(18,18,18,.85);border:1px solid rgba(244,247,246,.35);border-radius:0;padding:.35rem 1rem}
@media(max-width:640px){
    .lb-btn{width:2.5rem;height:2.5rem}
    .lb-prev{left:.5rem}
    .lb-next{right:.5rem}
    .lightbox img{max-height:70vh}
}

/* page hero (inner pages) */
.page-hero{padding:3.5rem 0 1.2rem}
.page-hero h1{font-family:inherit;text-transform:none;font-size:clamp(2rem,4.8vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.page-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{font-size:1.05rem;font-weight:400;color:var(--muted);max-width:620px;margin-top:1rem}
.empty-note{background:var(--soft);border:1px dashed var(--line);border-radius:0;padding:1.6rem;font-weight:400;color:var(--muted)}

/* mobile — drop frames, no nested padding tax */
@media(max-width:840px){
    .wrap{padding:0 20px}
    .nav-links{display:none}
    .hero{padding:2rem 0 2.5rem}
    .hero-frame{border:none;padding:0}
    .hero-frame::before,.hero-frame::after,.hero-accent{display:none}
    .hero-side{grid-template-columns:1fr;border-top:1px solid var(--line);padding-top:0;margin-top:2rem}
    .hero-side div{border-right:none;border-bottom:1px solid var(--line);padding:1rem 0;padding-right:0}
    .hero-side div:last-child{border-bottom:none}
    .about-grid,.contact-grid,.posts{grid-template-columns:1fr;gap:0}
    .about-copy,.about-grid > div:first-child,.contact-left,.contact-form,
    .badge,.stat,.post-card,.member{
        border-left:none;border-right:none;
        border-top:1px solid var(--line);border-bottom:none;
        padding:1.4rem 0;background:transparent;box-shadow:none;
    }
    .about-grid > div:first-child,.contact-left,.contact-form,
    .posts .post-card:last-child{border-bottom:1px solid var(--line)}
    .badges,.stats{gap:0;grid-template-columns:1fr 1fr}
    .badge,.stat{padding:1.2rem 0}
    .badges .badge:nth-child(odd),.stats .stat:nth-child(odd){padding-right:1rem}
    .badges .badge:nth-child(even),.stats .stat:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}
    .badges .badge:nth-child(n+3),.stats .stat:nth-child(n+3){border-bottom:1px solid var(--line)}
    .post-art{aspect-ratio:16/7}
    .post-body{padding:1rem 0 1.4rem}
    .post-card:hover,.member:hover{background:transparent}
    .post-art::after{display:none}
    .sec-head,.sec-head-row{margin-bottom:0;padding-bottom:.9rem}
    section{padding:3.2rem 0}
    .team{gap:0}
    .member{border-bottom:1px solid var(--line)}
    .page-hero{padding:2.4rem 0 1rem}
}