/* My Personal Photographer — built from Figma template l8QFVIeamsH1qMU5deUP8g
   (Photographer Portfolio, Produce UI). Tokens + anatomy extracted via Figma MCP:
   font Manrope; bg #070708; panels #131316/#1C1C21; borders #232329/#2F2F37;
   text #FFF/#E4E4E6/#CACACE/#AFB0B6/#797C86; accent purple #4A2CED/#AEA1F7;
   stars #FFCE22; cards r20 p40; buttons r10 (#1C1C21 + #2F2F37 border); pills r100. */
:root{
  --bg:#070708; --p1:#131316; --p2:#1C1C21; --p3:#232329;
  --edge:#1C1C21; --edge2:#2F2F37; --edge3:#474752;
  --w:#FFFFFF; --g90:#E4E4E6; --g80:#CACACE; --g70:#AFB0B6; --g50:#797C86;
  --purple:#4A2CED; --purple-l:#AEA1F7; --mango:#FFCE22;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--g70);font-family:'Manrope',sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1596px;margin-inline:auto;padding-inline:clamp(1rem,3.4vw,3rem)}

/* header — template: wordmark left, pill nav centre, contact button right */
header{border-bottom:1px solid var(--edge);position:sticky;top:0;background:rgba(7,7,8,.92);backdrop-filter:blur(10px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem}
.wordmark{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--w);font-size:1.05rem}
.navpills{display:flex;gap:.5rem;background:var(--p1);border:1px solid var(--edge);border-radius:100px;padding:.35rem}
.navpills a{padding:.55rem 1.3rem;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--g70)}
.navpills a.on,.navpills a:hover{background:var(--p2);border:1px solid var(--edge2);color:var(--w)}
.navpills a:not(.on):not(:hover){border:1px solid transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--p2);border:1px solid var(--edge2);border-radius:10px;padding:1rem 1.9rem;font-size:1rem;font-weight:500;color:var(--w);transition:.2s}
.btn:hover{border-color:var(--edge3)}
.btn-sm{padding:.7rem 1.3rem;font-size:.85rem}
@media(max-width:900px){.navpills{display:none}}

/* purple arrow pill (LET'S ↗ WORK TOGETHER motif) */
.pillarrow{display:inline-grid;place-items:center;background:var(--purple);border-radius:100px;width:74px;height:40px;color:#fff;font-size:1.05rem;vertical-align:middle}
.pillarrow.big{width:96px;height:52px;font-size:1.3rem}

/* hero — eyebrow + giant name left, LET'S ↗ WORK TOGETHER right */
.hero{padding-block:clamp(2.5rem,6vw,5rem) 0}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.eyebrow{color:var(--g50);font-weight:600;text-transform:uppercase;font-size:clamp(.8rem,1.4vw,1.25rem);letter-spacing:.08em}
h1{color:var(--w);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:.01em}
.lets{color:var(--w);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.35;text-align:right}
@media(max-width:720px){.lets{text-align:left}}

/* category marquee chips */
.marq{border-block:1px solid var(--edge);margin-top:clamp(2rem,4.5vw,3.5rem);padding-block:.9rem;overflow:hidden}
.marq-track{display:flex;gap:.7rem;width:max-content;animation:marq 32s linear infinite}
.chip{display:inline-flex;align-items:center;gap:.7rem;background:var(--p1);border:1px solid var(--edge);border-radius:100px;padding:.55rem 1.25rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g80);white-space:nowrap}
.chip::before{content:"✦";color:var(--purple-l)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-track{animation:none}}

/* bento photo grid */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,15vw,220px);gap:14px;padding-block:clamp(2rem,4vw,3.4rem)}
.bento a{overflow:hidden;border-radius:14px;position:relative;background:var(--p1)}
.bento img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bento a:hover img{transform:scale(1.04)}
.b-tall{grid-row:span 2}
.b-wide{grid-column:span 2}
.b-purple{background:var(--purple)}
.b-mango{background:var(--mango)}
@media(max-width:720px){.bento{grid-template-columns:repeat(2,1fr)}}

/* section head — eyebrow + big title + action button */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--edge);padding-bottom:2.6rem;margin-bottom:clamp(2rem,4.5vw,4rem);flex-wrap:wrap}
.shead .t p{color:var(--g50);font-weight:600;text-transform:uppercase;font-size:clamp(.85rem,1.2vw,1.25rem)}
.shead .t h2{color:var(--w);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,3.6rem);line-height:1.1;margin-top:.3rem}
section{padding-block:clamp(2.6rem,5.5vw,4.5rem)}

/* about card — template: image left, bordered card right with ✦ sections */
.about{display:grid;gap:30px}
@media(min-width:980px){.about{grid-template-columns:1fr 1fr}}
.about .photo{border-radius:20px;overflow:hidden;min-height:420px}
.about .photo img{width:100%;height:100%;object-fit:cover}
.card{border:1px solid var(--edge);border-radius:20px}
.card .sect{padding:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--edge)}
.card .sect:last-child{border-bottom:none}
.card h3{display:flex;align-items:flex-end;gap:.7rem;color:var(--g80);font-weight:500;font-size:clamp(1.3rem,2vw,1.9rem)}
.card h3::before{content:"✦";color:var(--purple-l);font-size:1.4rem}
.card .body{margin-top:1.2rem;color:var(--g70);font-size:clamp(.95rem,1.2vw,1.1rem)}
.ci{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem}
.ci div{flex:1;min-width:200px}
.ci b{display:block;color:var(--g90);font-weight:500;font-size:1rem}
.ci span{color:var(--g70);font-size:1.1rem}
.btnrow{display:flex;gap:1.2rem;margin-top:2rem;flex-wrap:wrap}
.btnrow .btn{flex:1;min-width:160px}
.socials{display:inline-flex;gap:.9rem;background:var(--bg);border:1px solid var(--edge);border-radius:100px;padding:.6rem}
.socials a{display:grid;place-items:center;width:46px;height:46px;background:var(--p2);border:1px solid var(--edge2);border-radius:100px;color:var(--g80);font-size:.75rem;font-weight:700}
.socials a:hover{color:var(--w);border-color:var(--edge3)}

/* services — name + purple pill, highlights checklist, image right */
.svc{display:grid;gap:30px;align-items:start}
@media(min-width:980px){.svc{grid-template-columns:1.05fr .95fr}}
.svc h3{display:flex;align-items:center;gap:1rem;color:var(--w);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.3rem)}
.svc .desc{margin-top:1.2rem;color:var(--g70)}
.svc .hl-label{margin-top:2rem;color:var(--g50);font-weight:600;text-transform:uppercase;font-size:.95rem}
.hl{margin-top:.9rem;display:grid;gap:.7rem}
.hl div{display:flex;gap:.9rem;align-items:center;background:var(--p1);border:1px solid var(--edge);border-radius:12px;padding:1rem 1.2rem;font-size:.95rem;color:var(--g80)}
.hl div::before{content:"✦";color:var(--purple-l)}
.svc .photo{border-radius:20px;overflow:hidden;min-height:380px}
.svc .photo img{width:100%;height:100%;object-fit:cover}

/* portfolio cards */
.works{display:grid;gap:26px}
@media(min-width:880px){.works{grid-template-columns:repeat(3,1fr)}}
.work{display:block}
.work .ph{border-radius:16px;overflow:hidden;height:clamp(260px,26vw,380px)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.work:hover img{transform:scale(1.04)}
.work .m{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.work .m b{color:var(--g90);font-weight:600;font-size:1.05rem}
.work .m span{color:var(--g50);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.work .m .v{color:var(--g80)}

/* FAQ */
.faqs{display:grid;gap:22px;align-items:start}
@media(min-width:980px){.faqs{grid-template-columns:1fr 1fr}}
details{border:1px solid var(--edge);border-radius:14px;background:var(--p1)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 1.6rem;color:var(--g90);font-weight:600;font-size:1rem}
summary::after{content:"⌄";color:var(--g50);transition:.2s}
details[open] summary::after{transform:rotate(180deg)}
details p{padding:0 1.6rem 1.5rem;color:var(--g70);font-size:.95rem}

/* testimonials */
.quotes{display:grid;gap:26px}
@media(min-width:880px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--p1);border:1px solid var(--edge);border-radius:16px;padding:2rem}
.quote .who{display:flex;justify-content:space-between;align-items:center}
.quote .who b{color:var(--g90);font-weight:600;font-size:1rem;display:block}
.quote .who span{color:var(--g50);font-size:.85rem}
.stars{color:var(--mango);letter-spacing:.2em;margin-block:1.1rem;font-size:1rem}
.quote p{color:var(--g70);font-size:.98rem}

/* watermark + CTA band + footer */
.watermark{overflow:hidden;text-align:center;border-top:1px solid var(--edge)}
.watermark span{font-weight:800;text-transform:uppercase;font-size:clamp(5rem,17vw,15rem);line-height:1;color:var(--p2);letter-spacing:.02em}
.ctaband{border-top:1px solid var(--edge);padding-block:clamp(3rem,6vw,5rem)}
.ctaband .in{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.ctaband .eyebrow{margin-bottom:.8rem}
.ctaband .lets{text-align:left}
footer.site{border-top:1px solid var(--edge)}
.fgrid{display:grid;gap:2.5rem;padding-block:3rem}
@media(min-width:880px){.fgrid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.fgrid h4{color:var(--g50);font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.08em;margin-bottom:1.1rem}
.fgrid a{display:block;color:var(--g80);font-size:.95rem;padding-block:.3rem}
.fgrid a:hover{color:var(--w)}
.fbottom{border-top:1px solid var(--edge);padding-block:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--g50);font-size:.85rem}

/* booking / deposit (contact page) — his real model: contract + deposit secures the date */
.bookgrid{display:grid;gap:26px;align-items:start}
@media(min-width:980px){.bookgrid{grid-template-columns:1.05fr .95fr}}
label{display:block;color:var(--g90);font-weight:500;font-size:.95rem;margin-bottom:.45rem}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--edge2);border-radius:10px;color:var(--w);padding:1rem 1.1rem;font-family:'Manrope',sans-serif;font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--purple);outline-offset:1px}
.field{margin-bottom:1.3rem}
.opt3{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.opt{border:1px solid var(--edge2);border-radius:10px;padding:.9rem;text-align:center;font-size:.85rem;color:var(--g80)}
.opt.sel{border-color:var(--purple);background:rgba(74,44,237,.12);color:var(--w);font-weight:600}
.dep-line{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 0;border-bottom:1px dashed var(--edge2);font-size:.98rem}
.dep-line b{color:var(--w);font-weight:700;font-size:1.35rem}
.blankval{display:inline-block;min-width:70px;border-bottom:1px dotted var(--g50)}
.paysheet{margin-top:1.3rem;background:var(--bg);border:1px solid var(--edge2);border-radius:12px;padding:1.2rem}
.paysheet .r{display:flex;justify-content:space-between;color:var(--g70);font-size:.92rem;padding-block:.35rem}
.wallets{display:flex;gap:.7rem;margin-top:.8rem}
.wallets span{flex:1;text-align:center;background:var(--p2);border:1px solid var(--edge2);border-radius:8px;padding:.75rem;font-size:.85rem;color:var(--w)}
.btn-purple{background:var(--purple);border-color:var(--purple)}
.btn-purple:hover{background:#5b3ff0}
.finenote{margin-top:1rem;color:var(--g50);font-size:.82rem}

/* contact info wrap fix */
.ci div{min-width:100%}
@media(min-width:1200px){.ci div{min-width:240px}}
.ci span{word-break:break-all}

/* ---- premium motion layer (motion.js adds .mjs/.rv/.in; no-JS = visible) ---- */
.mjs .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.mjs .rv.in{opacity:1;transform:none}
.mjs .watermark span.rv{transform:translateY(60px)}
/* hover lift — cards & tiles */
.quote,.work,.hl div,.card,details{transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s}
.quote:hover,.work:hover{transform:translateY(-5px);border-color:var(--edge3)}
.hl div:hover{border-color:var(--edge3);transform:translateX(4px)}
details:hover{border-color:var(--edge3)}
.btn{transition:border-color .25s,background .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.pillarrow{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
a:hover > .pillarrow,.lets:hover .pillarrow{transform:rotate(45deg)}
.bento a{transition:transform .35s}
.bento a:hover{transform:translateY(-4px)}
.navpills a{transition:background .2s,color .2s}
.socials a{transition:border-color .2s,color .2s,transform .2s}
.socials a:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .quote:hover,.work:hover,.btn:hover,.bento a:hover,.hl div:hover,.socials a:hover{transform:none}
  a:hover > .pillarrow,.lets:hover .pillarrow{transform:none}
}