:root{--bg:#08070a;--panel:#100d13;--text:#f4eef5;--muted:#b9afb9;--pink:#e3479a;--plum:#8d2f70;--line:rgba(255,255,255,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 15%,#241326 0,#08070a 36%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}.nav{height:78px;padding:0 5vw;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(8,7,10,.9);backdrop-filter:blur(14px);z-index:10}.brand{font:700 36px/1 "Cormorant Garamond",serif;color:#fff}.brand span{color:var(--pink);font-size:18px;margin-left:6px}.nav nav{display:flex;gap:28px;text-transform:uppercase;letter-spacing:2px;font-size:11px}.nav nav a:hover{color:var(--pink)}.tags{margin-left:auto;color:#a995a8;font-size:9px;letter-spacing:2px}.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:.9fr 1.35fr;align-items:center;padding:6vw 5vw;gap:4vw;overflow:hidden}.hero-copy{max-width:570px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:3px;color:#d8c6d4;margin:0 0 20px}.hero h1{font:600 clamp(80px,11vw,160px)/.75 "Cormorant Garamond",serif;margin:0 0 30px;letter-spacing:-4px}.hero h1 span{color:var(--pink)}.lead{font:400 18px/1.75 "Cormorant Garamond",serif;color:#d5ccd5;max-width:510px}.button{display:inline-flex;align-items:center;gap:16px;margin-top:22px;border:1px solid var(--pink);padding:15px 25px;font-size:10px;letter-spacing:3px;font-weight:700;transition:.25s}.button:hover{background:var(--pink);color:#09070b}.button span{color:var(--pink)}.button:hover span{color:#09070b}.hero-image{height:72vh;min-height:500px;display:flex;align-items:center;justify-content:center;position:relative}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 22%,transparent 80%,var(--bg) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 12%,transparent 88%,var(--bg) 100%);pointer-events:none}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:0;filter:saturate(1.02) contrast(1.03)}.section{padding:110px 5vw}.section-heading{text-align:center}.section-heading h2,.about h2,.contact h2{font:600 clamp(54px,7vw,92px)/.9 "Cormorant Garamond",serif;margin:0}.section-heading:after{content:"♥";display:block;color:var(--pink);margin:24px auto 45px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-item{border:0;padding:0;background:#100d13;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.gallery-item img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}.gallery-item:hover img{transform:scale(1.025)}.about{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding:0 5vw 110px}.about-image{background:#100d13;display:flex;align-items:center;justify-content:center}.about-image img{width:100%;height:auto;display:block}.about-copy{max-width:620px}.about h2{margin-bottom:28px}.about h2 em{color:var(--pink);font-weight:500}.about-copy p:not(.eyebrow){font:17px/1.8 "Cormorant Garamond",serif;color:#d3c9d3}.traits{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:34px}.traits div{border-top:1px solid var(--line);padding-top:15px}.traits b{display:block;color:var(--pink);font-size:20px;margin-bottom:9px}.traits span{font-size:8px;letter-spacing:2px;line-height:1.5;color:#cfc2cf}.contact{margin:0 5vw 60px;padding:80px 7vw;background:linear-gradient(120deg,#1c0c19,#0d0a10 65%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.contact h2{font-size:clamp(60px,8vw,110px)}.contact-copy{max-width:530px}.contact-copy p{font:18px/1.7 "Cormorant Garamond",serif;color:#d5cbd5}.small{font-family:Inter,sans-serif!important;font-size:10px!important;color:#9d929d!important;margin-top:18px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:4vw;z-index:50}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:92vh;object-fit:contain}.close{position:absolute;right:25px;top:18px;border:0;background:none;color:#fff;font-size:42px;cursor:pointer}.lightbox.open .close:hover{color:var(--pink)}
@media(max-width:850px){.nav{height:auto;min-height:70px;flex-wrap:wrap;padding:15px 5vw;gap:16px}.nav nav{order:3;width:100%;justify-content:center}.tags{display:none}.hero{grid-template-columns:1fr;padding-top:45px}.hero-image{height:62vh;min-height:400px;order:-1}.hero-copy{margin-top:-20px}.gallery{grid-template-columns:1fr 1fr}.about,.contact{grid-template-columns:1fr}.about{gap:45px}.contact{padding:55px 8vw}.traits{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hero h1{font-size:86px}.gallery{grid-template-columns:1fr}.hero-image{height:58vh}.section{padding:80px 5vw}.about{padding-bottom:80px}}

.hero-script{font:500 clamp(38px,4vw,62px)/1 "Caveat",cursive;color:#f2e8f0;margin-bottom:8px;transform:rotate(-3deg);transform-origin:left center}
.hero-rule{display:flex;align-items:center;gap:12px;margin:17px 0 16px;width:250px;color:#e3479a}
.hero-rule:before,.hero-rule:after{content:"";height:1px;background:rgba(227,71,154,.55);flex:1}
.hero-rule span{font-size:18px}
.hero-kicker{font-size:9px;letter-spacing:3px;color:#eee1eb;margin:0 0 20px;white-space:nowrap}
@media(min-width:851px){
.nav{height:80px;padding:0 5vw;gap:34px}
.brand{font:700 42px/1 "Cormorant Garamond",serif;color:#e3479a;letter-spacing:-1px;white-space:nowrap}
.hero{min-height:520px;height:calc(100vh - 80px);max-height:720px;display:grid;grid-template-columns:44% 56%;align-items:stretch;padding:0;gap:0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1);background:#070609}
.hero-copy{max-width:none;padding:82px 8vw 70px 5.5vw;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#070609 0%,#08070a 72%,rgba(8,7,10,.92) 100%)}
.hero h1{font:600 clamp(72px,8vw,126px)/.8 "Cormorant Garamond",serif;margin:0;color:#e3479a;letter-spacing:-4px}
.hero h1 span{color:#e3479a}
.hero-image{height:100%;min-height:0;display:block;position:relative;overflow:hidden}
.hero-image:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#08070a 0%,rgba(8,7,10,.6) 8%,transparent 28%),linear-gradient(0deg,rgba(8,7,10,.28),transparent 28%,transparent 78%,rgba(8,7,10,.35));pointer-events:none}
.hero-image:after{display:none}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 42%;border-radius:0;filter:saturate(1.02) contrast(1.03)}
}
@media(max-width:850px){
.hero{height:auto;min-height:0;grid-template-columns:1fr}
.hero-image{height:62vh;min-height:400px;order:-1}
.hero-copy{padding:54px 7vw 65px;background:#08070a;margin-top:0}
.hero-kicker{white-space:normal}
.hero h1{font-size:86px}
}
@media(max-width:520px){.hero-image{height:58vh}.hero h1{font-size:80px}}

/* Exact visual treatment based on the supplied Raven draft */
body{background:#030305}
.nav{height:78px;background:#030305;border-bottom:1px solid rgba(255,255,255,.08);padding:0 5.2vw}
.brand{color:#e04498;font-size:43px}
.nav nav{gap:32px;font-size:10px}
.tags{font-size:8px;letter-spacing:2.4px;color:#c2b4c1}
.hero{height:463px;min-height:463px;max-height:none;grid-template-columns:43% 57%;background:#030305}
.hero-copy{padding:40px 6vw 40px 5.5vw;background:linear-gradient(90deg,#030305 0%,#030305 76%,rgba(3,3,5,.7) 100%)}
.hero-script{font-size:50px;margin-bottom:2px}
.hero h1{font-size:91px;line-height:.78;letter-spacing:-3px}
.hero-rule{width:250px;margin:15px 0 14px}
.hero-kicker{font-size:8px;letter-spacing:3px;margin-bottom:18px}
.hero .lead{font-size:16px;line-height:1.55;max-width:365px}
.hero .button{margin-top:25px;padding:13px 28px}
.hero-image img{object-position:center 42%}
.section{padding:27px 4.5vw 28px}
.gallery-section{border-bottom:1px solid rgba(255,255,255,.08)}
.section-heading h2{font-size:25px;letter-spacing:7px;text-transform:uppercase;font-family:Inter,sans-serif;font-weight:400}
.section-heading:after{margin:9px auto 21px}
.gallery{grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-item{aspect-ratio:1.32;background:#0c0b0e}
.gallery-item img{object-fit:cover}
.about{grid-template-columns:47% 53%;gap:0;padding:0;border-bottom:1px solid rgba(255,255,255,.08);min-height:318px}
.about-image{height:318px;overflow:hidden;background:#09070b}
.about-image img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:contrast(1.04) saturate(1.04)}
.about-copy{padding:45px 9vw 35px 4vw}
.about h2{font:500 45px/1 "Caveat",cursive;color:#e04498;margin:0 0 15px}
.about-copy p:not(.eyebrow){font:15px/1.35 "Cormorant Garamond",serif;color:#ddd3dc;margin:0 0 12px;max-width:500px}
.traits{margin-top:22px;gap:20px}
.traits div{border:0;text-align:center;padding:0}
.traits b{font-size:22px;margin-bottom:7px}
.traits span{font-size:7px;letter-spacing:2px}
.contact{position:relative;overflow:hidden;margin:0;padding:30px 9vw 22px;min-height:125px;background:linear-gradient(180deg,#220a25 0%,#100715 50%,#07040a 100%);display:grid;grid-template-columns:31% 38% 20%;gap:3%;border:0}
.city-glow{position:absolute;inset:auto 0 0;height:55px;background:linear-gradient(165deg,transparent 0 38%,#0d0a12 39% 46%,transparent 47%),linear-gradient(175deg,transparent 0 50%,#09070c 51% 62%,transparent 63%);opacity:.9}
.contact-title,.contact-copy,.location,.signature{position:relative;z-index:2}
.contact h2{font:500 43px/0.85 "Cormorant Garamond",serif;color:#d7b1b7;margin:0}
.heartline{color:#e04498;margin-top:10px;font-size:14px}
.contact-copy{align-self:center}
.contact-copy p{font:13px/1.45 "Cormorant Garamond",serif;margin:0 0 10px;color:#ddd1dd}
.contact-copy .button{margin-top:0;padding:10px 25px;font-size:8px}
.location{align-self:center;display:flex;gap:10px;align-items:center}
.location>span{font-size:22px;color:#e04498}
.location b{display:block;font-size:9px;letter-spacing:2px}
.location small{display:block;font-size:7px;letter-spacing:2px;color:#a99ca9;margin-top:4px}
.signature{position:absolute;right:4.5vw;bottom:11px;font:500 24px "Caveat",cursive;color:#e04498}
.signature span{font-family:Inter;font-size:10px}
@media(max-width:850px){.hero{height:auto;min-height:0}.hero-copy{padding:55px 7vw 60px}.hero-image{height:62vh;min-height:400px}.gallery{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr}.about-image{height:340px}.contact{grid-template-columns:1fr;min-height:300px;padding:50px 8vw}.location{display:none}.signature{right:8vw}.tags{display:none}}
@media(max-width:520px){.gallery{grid-template-columns:1fr 1fr}.gallery-item{aspect-ratio:1}.hero h1{font-size:78px}}

/* Hero framing: match the supplied preview — face/chest-forward crop */
@media(min-width:851px){
.hero-image img{object-position:center 17%;transform:scale(1.04)}
}

/* Strong chest-up hero crop: intentionally crop out the lower body */
@media(min-width:851px){
  .hero-image{overflow:hidden}
  .hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:52% 13%;
    transform:scale(1.62);
    transform-origin:52% 13%;
  }
}
@media(max-width:850px){
  .hero-image{overflow:hidden}
  .hero-image img{
    object-fit:cover;
    object-position:52% 13%;
    transform:scale(1.35);
    transform-origin:52% 13%;
  }
}

.contact-main{padding:70px 7vw 80px;background:radial-gradient(circle at 78% 30%,#251126 0,#08070a 42%,#030305 100%);display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;align-items:center}
.contact-heading h2{font:600 clamp(54px,7vw,92px)/.9 "Cormorant Garamond",serif;margin:0 0 20px;color:#d7b1b7}
.contact-heading p:not(.eyebrow){font:17px/1.65 "Cormorant Garamond",serif;color:#d7cbd6;max-width:390px}
.main-contact-form{background:rgba(14,10,16,.88);border:1px solid rgba(255,255,255,.1);padding:32px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.contact-main .field{display:flex;flex-direction:column;gap:7px}
.contact-main .field.full{grid-column:1/-1}
.contact-main label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#c8bcc7}
.contact-main input,.contact-main select,.contact-main textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:#08070a;color:#f5eff5;padding:12px 14px;font:14px "Cormorant Garamond",serif;outline:none}
.contact-main input:focus,.contact-main select:focus,.contact-main textarea:focus{border-color:#e3479a}
.contact-main textarea{min-height:115px;resize:vertical}
.contact-main .form-note{font-size:9px;line-height:1.5;color:#9e929e;margin:16px 0 0}
.contact-main .button{cursor:pointer;margin-top:18px}
@media(max-width:850px){.contact-main{grid-template-columns:1fr;padding:60px 6vw}.contact-grid{grid-template-columns:1fr}.contact-main .field.full{grid-column:auto}.main-contact-form{padding:25px}}
<div class="portfolio-disclosure" style="padding:18px 24px;text-align:center;background:#090909;color:#bdb5aa;font:10px/1.7 Arial,sans-serif;letter-spacing:.08em;border-top:1px solid #ffffff22">VELVET DIGITAL PORTFOLIO SAMPLE · Fictional identity, demo imagery, sample rates and contact details. Text inquiries open your messaging app for review; nothing is sent automatically.</div>