/* Renee Sofolabo · shared styles (Charcoal & Champagne) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#141418; --charcoal:#1b1b20; --panel:#232329; --panel2:#2a2a31;
  --champ:#c8a97e; --champ-l:#dcc199; --cream:#efeae2; --muted:#9d978d;
  --line:rgba(200,169,126,.22);
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;color:var(--cream);background:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px;}
.eyebrow{color:var(--champ);font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-.01em;color:#fff;}
em{font-style:italic;color:var(--champ);}
.btn{display:inline-block;font-family:'Inter';font-weight:600;font-size:.92rem;padding:14px 30px;border-radius:2px;transition:.25s;letter-spacing:.02em;cursor:pointer;}
.btn-solid{background:var(--champ);color:var(--ink);border:none;}
.btn-solid:hover{background:var(--champ-l);}
.btn-out{border:1px solid var(--champ);color:var(--champ);background:transparent;}
.btn-out:hover{background:var(--champ);color:var(--ink);}

/* NAV */
header{position:sticky;top:0;z-index:60;background:rgba(20,20,24,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
nav{max-width:1140px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:12px;}
.logo .mono-svg{flex-shrink:0;}
.logo b{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;color:#fff;letter-spacing:.01em;line-height:1;}
.logo small{display:block;font-family:'Inter';font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:3px;}
nav ul{display:flex;gap:26px;list-style:none;align-items:center;}
nav ul a{font-size:.86rem;color:var(--cream);font-weight:500;opacity:.82;transition:.2s;}
nav ul a:hover,nav ul a.active{color:var(--champ);opacity:1;}
.nav-cta{border:1px solid var(--champ);color:var(--champ)!important;padding:9px 18px;opacity:1!important;}
.nav-cta:hover{background:var(--champ);color:var(--ink)!important;}
@media(max-width:900px){nav ul li:not(.cta){display:none;}}

/* HERO */
.hero{position:relative;padding:100px 0 108px;border-bottom:1px solid var(--line);background:radial-gradient(1200px 500px at 75% -10%,rgba(200,169,126,.10),transparent 60%),var(--ink);}
.hero .eyebrow{margin-bottom:24px;}
.hero h1{font-size:clamp(2.5rem,5.5vw,4.4rem);line-height:1.05;max-width:16ch;margin-bottom:24px;}
.hero p{font-size:1.18rem;color:var(--muted);max-width:58ch;margin-bottom:34px;}
.hero.small{padding:74px 0 70px;}
.hero.small h1{font-size:clamp(2.2rem,4.5vw,3.4rem);max-width:20ch;}
.btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-meta{margin-top:50px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:44px;flex-wrap:wrap;}
.hero-meta div b{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--champ);display:block;line-height:1;}
.hero-meta div span{font-size:.8rem;color:var(--muted);}

/* STRIP */
.strip{border-bottom:1px solid var(--line);background:var(--charcoal);}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px;}
.strip span{font-size:.84rem;color:var(--cream);opacity:.8;}
.strip span::before{content:'✦ ';color:var(--champ);}

/* SECTIONS */
section.blk{padding:92px 0;}
.charcoal{background:var(--charcoal);}
.center{text-align:center;}
.head{max-width:660px;margin:0 auto 54px;text-align:center;}
.head h2{font-size:clamp(2rem,3.6vw,3rem);margin:14px 0;}
.head p{color:var(--muted);font-size:1.05rem;}
.rule{width:54px;height:1px;background:var(--champ);margin:0 auto;}

/* TWO BIG SERVICE CARDS (home) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.duo .scard{background:var(--panel);border:1px solid var(--line);padding:40px 34px;transition:.25s;display:flex;flex-direction:column;}
.duo .scard:hover{transform:translateY(-5px);border-color:var(--champ);}
.duo .scard .k{font-family:'Cormorant Garamond',serif;color:var(--champ);font-size:1rem;opacity:.7;margin-bottom:14px;}
.duo .scard h3{font-size:1.9rem;margin-bottom:12px;}
.duo .scard p{color:var(--muted);font-size:.98rem;margin-bottom:22px;flex:1;}
.duo .scard .go{color:var(--champ);font-weight:600;font-size:.9rem;letter-spacing:.03em;}
@media(max-width:760px){.duo{grid-template-columns:1fr;}}

/* SIMPLE 4-COL (services/features/process) */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.grid4 .cell{background:var(--ink);padding:32px 24px;transition:.25s;}
.charcoal .grid4 .cell{background:var(--charcoal);}
.grid4 .cell:hover{background:var(--panel);}
.grid4 .cell .n{font-family:'Cormorant Garamond',serif;color:var(--champ);font-size:1.1rem;opacity:.6;margin-bottom:14px;}
.grid4 .cell h3{font-size:1.4rem;margin-bottom:10px;}
.grid4 .cell p{color:var(--muted);font-size:.92rem;}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.grid4{grid-template-columns:1fr;}}

/* FEATURE LIST (service pages) */
.flist{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;max-width:900px;margin:0 auto;}
.flist .fi{padding-left:26px;position:relative;}
.flist .fi::before{content:'·';position:absolute;left:0;color:var(--champ);}
.flist .fi h4{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:#fff;margin-bottom:4px;}
.flist .fi p{color:var(--muted);font-size:.92rem;}
@media(max-width:640px){.flist{grid-template-columns:1fr;}}

/* WORK CARDS */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.work-card{display:block;background:var(--panel);border:1px solid var(--line);transition:.25s;}
.work-card:hover{transform:translateY(-5px);border-color:var(--champ);}
.thumb{position:relative;height:240px;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--ink),var(--panel2));display:grid;place-items:center;padding:24px;}
.thumb iframe{position:absolute;top:0;left:0;width:1400px;height:1050px;border:0;transform:scale(.345);transform-origin:top left;pointer-events:none;}
.thumb .tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(20,20,24,.8);border:1px solid var(--line);color:var(--champ);font-size:.68rem;font-weight:600;padding:5px 12px;letter-spacing:.12em;text-transform:uppercase;}
.work-body{padding:22px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.work-body h3{font-size:1.5rem;}
.work-body p{color:var(--muted);font-size:.84rem;margin-top:3px;}
.work-body .go{color:var(--champ);font-size:.82rem;font-weight:600;white-space:nowrap;letter-spacing:.04em;}
@media(max-width:720px){.work-grid{grid-template-columns:1fr;}.thumb iframe{transform:scale(.5);width:760px;height:600px;}}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.plan{background:var(--charcoal);border:1px solid var(--line);padding:38px 30px;}
.charcoal .plan{background:var(--ink);}
.plan.feat{border-color:var(--champ);position:relative;}
.plan .pn{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champ);margin-bottom:18px;}
.plan .amt{font-family:'Cormorant Garamond',serif;font-size:3rem;color:#fff;line-height:1;}
.plan .amt span{font-size:1rem;color:var(--muted);font-family:'Inter';}
.plan .mo{color:var(--muted);font-size:.92rem;margin:6px 0 22px;}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.plan li{font-size:.9rem;color:var(--cream);opacity:.9;padding-left:22px;position:relative;}
.plan li::before{content:'·';position:absolute;left:0;color:var(--champ);}
.plan .badge{position:absolute;top:-12px;left:30px;background:var(--champ);color:var(--ink);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;}
.pnote{text-align:center;color:var(--muted);font-size:.86rem;margin-top:30px;}
@media(max-width:820px){.price-grid{grid-template-columns:1fr;}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;}
.about-grid h2{font-size:clamp(2rem,3.4vw,2.8rem);margin:14px 0 20px;}
.about-grid p{color:var(--muted);margin-bottom:16px;font-size:1.02rem;}
.about-grid .quote{border-left:2px solid var(--champ);padding-left:22px;color:var(--cream);font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-style:italic;line-height:1.4;}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:32px;}}

/* CONTACT */
.contact-center{text-align:center;}
.contact-center h2{font-size:clamp(2.2rem,4vw,3.2rem);margin:16px 0 14px;}
.contact-center .email{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--champ);display:inline-block;margin:8px 0 30px;border-bottom:1px solid var(--line);padding-bottom:4px;}
.cform{max-width:560px;margin:0 auto;display:grid;gap:14px;text-align:left;}
.cform input,.cform textarea,.cform select{background:var(--panel);border:1px solid var(--line);color:var(--cream);padding:14px 16px;font-family:'Inter';font-size:.95rem;outline:none;border-radius:2px;width:100%;}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--champ);}
.cform button{background:var(--champ);color:var(--ink);border:none;padding:15px;font-family:'Inter';font-weight:700;font-size:.95rem;cursor:pointer;letter-spacing:.02em;border-radius:2px;}
.cform button:hover{background:var(--champ-l);}

/* CTA band */
.cta{background:var(--charcoal);text-align:center;}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px;}
.cta p{color:var(--muted);max-width:52ch;margin:0 auto 28px;}

footer{border-top:1px solid var(--line);padding:40px 26px 34px;background:var(--ink);}
.footer-in{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
footer .fcol h5{font-family:'Cormorant Garamond',serif;color:#fff;font-size:1.15rem;margin-bottom:10px;}
footer .fcol a,footer .fcol p{display:block;color:var(--muted);font-size:.88rem;margin-bottom:7px;}
footer .fcol a:hover{color:var(--champ);}
.fbar{max-width:1140px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.82rem;}
