/*
Theme Name: Mahbuba Saniya Portfolio
Author: Mahbuba Saniya
Description: Dark editorial portfolio theme for a WordPress developer: projects, packages, order inquiry (email + WhatsApp).
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ms
*/
:root{--bg:#101713;--bg2:#18251E;--card:#202E25;--accent:#A3B18A;--gold:#C5A46D;--text:#F2F0E8;--muted:#B5BEB5;--line:#35443A;--hover:#D8C397;
--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:14px;--gap:clamp(1rem,3vw,2rem);--sec:clamp(3.5rem,9vw,7rem);--ease:.3s ease}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .6em}
h1{font-size:clamp(2.3rem,6.5vw,5.2rem);letter-spacing:-.02em}h2{font-size:clamp(1.8rem,4vw,3rem)}h3{font-size:1.35rem}p{margin:0 0 1em;color:var(--muted);max-width:62ch}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.wrap{width:min(1180px,92%);margin:auto}section,.sec{padding:var(--sec) 0}.alt{background:var(--bg2)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--gold);color:#000;padding:.5rem 1rem;z-index:99}
.btn{display:inline-block;padding:.85em 1.6em;border-radius:99px;border:1px solid var(--accent);background:var(--accent);color:#101713;font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem;transition:var(--ease)}
.btn:hover{background:var(--hover);border-color:var(--hover);transform:translateY(-2px)}.btn.ghost{background:transparent;color:var(--text)}.btn.ghost:hover{background:var(--card);color:var(--text)}
/* header */
.hd{position:sticky;top:0;z-index:50;transition:var(--ease);padding:.9rem 0}.hd.scrolled{background:rgba(16,23,19,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:1.5rem;justify-content:space-between}.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none}
.brand img{width:46px;height:46px;background:#fff;border-radius:12px;padding:3px;object-fit:contain}.brand b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:400}.brand small{display:block;color:var(--muted);font-size:.7rem}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}.nav a{text-decoration:none;padding:.3rem 0;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat;transition:background-size var(--ease)}
.nav a:hover,.nav .current-menu-item a{background-size:100% 2px}.burger{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.5rem .8rem}
@media(max-width:900px){.burger{display:block}.hd .btn.hdbtn{display:none}.nav{position:fixed;inset:0 0 0 auto;width:min(320px,85%);background:var(--bg2);padding:5rem 1.5rem;transform:translateX(100%);transition:transform .35s;border-left:1px solid var(--line)}.nav.open{transform:none}.nav ul{flex-direction:column;font-size:1.3rem}}
/* hero */
.hero{padding:clamp(2rem,6vw,4rem) 0 0;overflow:hidden}.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:end}.hero h1 em{font-style:italic;color:var(--accent)}
.kw{display:inline-block;min-width:11ch;color:var(--gold)}.hero .ctas{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0 3rem}.portrait{position:relative}
.portrait img{width:100%;max-height:78vh;object-fit:contain;object-position:bottom;margin-left:auto}.portrait:before{content:"";position:absolute;inset:12% 8% 0;border:1px solid var(--line);border-radius:50% 50% 0 0}
.badge5{position:absolute;left:0;bottom:12%;background:var(--card);border:1px solid var(--gold);border-radius:var(--r);padding:.7rem 1rem;font-family:var(--serif);color:var(--gold)}
@media(max-width:800px){.hero .wrap{grid-template-columns:1fr}.portrait{order:-1;max-width:340px;margin:auto}}
.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;background:var(--bg2);padding:1rem 0}.ticker div{display:inline-block;padding-left:100%;animation:tick 32s linear infinite;font-family:var(--serif);font-size:1.3rem;color:var(--accent)}
.ticker span{margin-right:3rem}@keyframes tick{to{transform:translateX(-100%)}}
/* grids */
.grid{display:grid;gap:var(--gap)}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 2rem}
.tab{background:none;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:.5rem 1.1rem;cursor:pointer;font:inherit;transition:var(--ease)}.tab:hover,.tab[aria-pressed=true]{background:var(--accent);color:#101713;border-color:var(--accent)}
.hide{display:none!important}.empty{padding:2rem;border:1px dashed var(--line);border-radius:var(--r)}
.masonry{columns:3 280px;column-gap:var(--gap)}.pj{break-inside:avoid;margin-bottom:var(--gap);display:block;text-decoration:none;position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.pj img{width:100%;transition:transform .6s}.pj:hover img{transform:scale(1.05)}.pj div{padding:1rem 1.2rem}.pj small{color:var(--gold)}
.svc.flag{border-color:var(--gold)}ul.tick{list-style:none;padding:0;margin:0 0 1.2rem}ul.tick li{padding-left:1.6rem;position:relative;margin-bottom:.45rem;color:var(--muted)}ul.tick li:before{content:"✓";position:absolute;left:0;color:var(--accent)}
/* pricing */
.price{font-family:var(--serif);font-size:3rem;color:var(--text)}.pkg.feat{border-color:var(--gold);transform:translateY(-8px)}.pkg{display:flex;flex-direction:column;transition:var(--ease)}.pkg .btn{margin-top:auto}.pkg:hover{border-color:var(--accent)}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:99px;margin-bottom:2rem}.toggle button{background:none;border:0;color:var(--muted);padding:.5rem 1.2rem;border-radius:99px;cursor:pointer;font:inherit}.toggle button[aria-pressed=true]{background:var(--gold);color:#101713}
/* forms */
form.ord{display:grid;gap:1rem;grid-template-columns:1fr 1fr}form.ord .full{grid-column:1/-1}label{display:block;font-size:.9rem;margin-bottom:.3rem}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.8rem;font:inherit}.hp{position:absolute;left:-9999px}
.msg{padding:1rem 1.2rem;border-radius:var(--r);border:1px solid var(--accent);margin-bottom:1.5rem}.msg.err{border-color:#e07a6b}@media(max-width:640px){form.ord{grid-template-columns:1fr}}
.ft{border-top:1px solid var(--line);padding:3rem 0 1.5rem;background:var(--bg2)}.ft ul{list-style:none;padding:0;margin:0}.ft li{margin-bottom:.4rem}.ft a{color:var(--muted);text-decoration:none}.ft a:hover{color:var(--hover)}
.stack{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}.stack .ph-b{margin-top:3rem}
dialog{border:1px solid var(--line);background:var(--bg);padding:0;border-radius:var(--r);max-width:92vw}dialog::backdrop{background:rgba(0,0,0,.8)}dialog img{max-height:85vh}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.ticker{overflow-x:auto}.ticker div{padding-left:0}}

/* about page photos: uniform 4:5 frames, face-safe crops */
.ph{margin:0;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--card);aspect-ratio:4/5}
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ph-a{background:radial-gradient(circle at 50% 35%,var(--bg2),var(--bg))}.ph-a img{object-position:50% 0}
.ph-b img{object-position:50% 12%}.ph-c img{object-position:62% 38%}.ph-d img{object-position:55% 28%}
.about-row{align-items:start}.about-row .ph{width:100%;max-width:560px;margin-inline:auto}.about-row .ph-d{margin-top:3rem}
@media(max-width:640px){.stack{gap:.6rem}.stack .ph-b{margin-top:1.5rem}.about-row .ph-d{margin-top:0}}