:root{
  --cream:#f5f3ee;
  --ink:#1a1a1a;
  --muted:#6b6862;
  --rule:#d8d4cb;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--rule)}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
.display{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-0.01em}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 40px}}

.eyebrow{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.eyebrow.light{color:rgba(245,243,238,.6)}
.eyebrow .rule{display:inline-block;height:1px;width:32px;background:rgba(26,26,26,.4)}

a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-size:14px;transition:opacity .2s,background .2s}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{opacity:.9}
.hero .btn-ghost{
  border:1px solid rgba(255,255,255,0.6);
  color:#ffffff;
}
.btn-ghost:hover{background:rgba(26,26,26,.05)}
.btn-cream{background:var(--cream);color:var(--ink);padding:16px 24px;font-size:16px}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(245,243,238,.75);backdrop-filter:blur(12px);border-bottom:1px solid rgba(216,212,203,.6)}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{font-family:"Cormorant Garamond",serif;font-size:26px;line-height:1;font-weight:600}
.brand-mark.light{color:var(--cream)}
.brand-label{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted)}
.brand-label.light{color:rgba(245,243,238,.7)}
.nav-links{display:none;gap:32px;font-size:14px}
.nav-links a:hover{opacity:.6}
@media(min-width:768px){.nav-links{display:flex}}

.hero{
  padding:144px 0 96px;
  border-bottom:1px solid var(--rule);
  position:relative;
  background-image:url('desk.jpg');
  background-size:cover;
  background-position:center 60%;
  background-repeat:no-repeat;
}
@media(min-width:1024px){.hero{padding:176px 0 128px}}

/* Dark overlay to dim the background image */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  pointer-events:none;
}

/* Ensure hero content sits above the overlay */
.hero .container{
  position:relative;
  z-index:1;
}
.hero-title{font-size:clamp(44px,7vw,104px);line-height:.95;max-width:1000px;margin-top:40px}
.hero-title em{font-style:italic;color:rgba(26,26,26,.7)}
.hero-grid{margin-top:56px;display:grid;gap:40px;align-items:end}
@media(min-width:768px){.hero-grid{grid-template-columns:1fr 1fr}}
.lead{font-size:18px;color:rgba(26,26,26,.75);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-self:start}
@media(min-width:768px){.hero-cta{justify-self:end}}

.marquee{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--rule)}
.marquee .tool{font-size:24px;color:rgba(26,26,26,.85)}

.section{padding:96px 0;border-bottom:1px solid var(--rule)}
@media(min-width:1024px){.section{padding:128px 0}}
.section-tint{background:rgba(26,26,26,.02)}

/* Services section — same background treatment as hero */
#services{
  position:relative;
  background-image:url('Services.jpg');
  background-size:cover;
  background-position:center 60%;
  background-repeat:no-repeat;
}
#services::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  pointer-events:none;
}
#services .container{
  position:relative;
  z-index:1;
}
#services .eyebrow,
#services .section-title{
  color:#ffffff;
}
#services .eyebrow .rule{
  background:rgba(255,255,255,0.4);
}
#services .eyebrow{
  color:rgba(255,255,255,0.7);
}
.section-title{font-size:40px;line-height:1.1;margin-top:16px}
@media(min-width:1024px){.section-title{font-size:52px}}
.two-col{display:grid;gap:48px}
@media(min-width:768px){.two-col{grid-template-columns:4fr 7fr}}
.prose p{font-size:17px;color:rgba(26,26,26,.8);line-height:1.7;margin-bottom:20px}
.prose .meta{margin-top:24px;font-size:14px}
.prose .meta .eyebrow{margin-bottom:4px}

.services{
    margin-top:56px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
}

.services article{
    background:#fff;
    padding:30px;
    border:none;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    transition:transform .2s ease;
}

.services article:hover{
    transform:translateY(-5px);
}

.services .num{
    display:block;
    margin-bottom:12px;
    font-size:14px;
    font-weight:600;
    color:var(--muted);
}

.services h3{
    font-size:24px;
    line-height:1.2;
    margin-bottom:16px;
}

.services p{
    color:rgba(26,26,26,.75);
    line-height:1.65;
}

@media(max-width:768px){
    .services{
        grid-template-columns:1fr;
    }
}

.mission-title{font-size:44px;line-height:1.05;max-width:900px;margin-top:24px}
@media(min-width:1024px){.mission-title{font-size:68px}}
.mission-title em{font-style:italic;color:rgba(26,26,26,.7)}
.three-col{margin-top:80px;display:grid;gap:40px}
@media(min-width:768px){.three-col{grid-template-columns:repeat(3,1fr)}}
.three-col p,.three-col li{color:rgba(26,26,26,.8);line-height:1.65;margin-top:16px}
.three-col ul{list-style:none;margin-top:16px}
.three-col ul li{margin-top:6px}

.founder-grid{display:grid;gap:48px;align-items:start}
@media(min-width:768px){.founder-grid{grid-template-columns:5fr 6fr}}
.founder-photo{margin-top:32px;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#eee}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}

.faq details{border-top:1px solid var(--rule);padding:24px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{font-family:"Instrument Serif",serif;font-size:24px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:rgba(26,26,26,.75);line-height:1.65}

.contact{padding:96px 0 144px;background:var(--ink);color:var(--cream)}
.contact-title{font-size:44px;line-height:1.05;margin-top:24px;max-width:900px}
@media(min-width:1024px){.contact-title{font-size:68px}}
.contact-lead{margin-top:32px;max-width:640px;color:rgba(245,243,238,.75);font-size:18px;line-height:1.65}
.contact-cta{margin-top:48px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(min-width:640px){.contact-cta{flex-direction:row;align-items:center;flex-wrap:wrap}}
.btn-whatsapp{background:#25D366;color:#fff;padding:16px 24px;font-size:16px;gap:10px}
.btn-whatsapp:hover{opacity:.9}
.muted{color:rgba(245,243,238,.6);font-size:14px}

.footer{background:var(--ink);color:rgba(245,243,238,.7);border-top:1px solid rgba(245,243,238,.1)}
.footer-inner{padding:48px 0;display:flex;flex-direction:column;gap:24px;align-items:flex-start;justify-content:space-between;font-size:14px}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center}}
.footer a:hover{color:var(--cream)}

.hero .eyebrow,
.hero .hero-title,
.hero .lead {
  color: #ffffff;
}