:root{
  --bg:#f6f2eb;
  --paper:#fffdf9;
  --ink:#171715;
  --muted:#67645e;
  --line:#ddd7cf;
  --accent:#ff6a47;
  --soft:#efe9df;
  --radius:24px;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.6
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:28px;padding:20px clamp(22px,6vw,88px);
  background:rgba(246,242,235,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.05)
}
.brand{font-size:14px;letter-spacing:.2em;font-weight:600}
.nav{display:flex;gap:28px;font-size:13px}
.nav a,.footer-links a{position:relative}
.nav a:after,.footer-links a:after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:.25s
}
.nav a:hover:after,.footer-links a:hover:after{width:100%}
.desktop-cta{justify-self:end}
.menu-btn{display:none;border:0;background:none;font-size:24px}
.section{padding:clamp(70px,8vw,120px) clamp(22px,7vw,110px)}
.hero{
  min-height:82vh;display:grid;grid-template-columns:1.05fr .95fr;
  gap:70px;align-items:center
}
.eyebrow{
  margin:0 0 14px;color:var(--accent);text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;font-weight:600
}
.eyebrow.muted{color:var(--muted)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.03}
h1{font-size:clamp(50px,5.8vw,92px);letter-spacing:-.04em;margin-bottom:26px}
h2{font-size:clamp(42px,4.2vw,66px);letter-spacing:-.03em;margin-bottom:20px}
h3{font-family:var(--serif);font-size:25px;font-weight:500}
.lead{font-size:18px;color:var(--muted);max-width:640px}
.hero-actions{display:flex;gap:26px;align-items:center;margin-top:34px}
.pill{
  display:inline-flex;align-items:center;gap:18px;padding:13px 22px;
  border-radius:999px;font-size:13px;font-weight:600
}
.pill-dark{background:var(--ink);color:#fff}
.pill-coral{background:var(--accent);color:#fff}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600}
.hero-visual{position:relative;min-height:560px}
.hero-card{border-radius:var(--radius);box-shadow:0 20px 60px rgba(32,26,18,.10)}
.hero-main{
  position:absolute;inset:30px 20px 20px 80px;
  padding:36px;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(circle at 68% 24%, rgba(255,106,71,.18), transparent 28%),
    linear-gradient(145deg,#dcd2c4,#a99d8d 58%,#756c62);
  overflow:hidden
}
.hero-main:before{
  content:"";position:absolute;width:260px;height:360px;border-radius:50% 50% 45% 45%;
  background:linear-gradient(180deg,#222,#5a4d43);right:12%;top:16%;opacity:.86
}
.portrait-mark{
  width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);font-family:var(--serif);font-size:32px;z-index:1
}
.portrait-copy{position:relative;z-index:1;color:#fff;margin-top:22px}
.portrait-copy small{display:block;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.portrait-copy strong{font-family:var(--serif);font-size:34px;line-height:1}
.floating-card{
  position:absolute;right:-10px;top:40px;width:180px;padding:18px;background:var(--paper);z-index:4
}
.mini-label{font-size:10px;text-transform:uppercase;letter-spacing:.2em}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.mini-grid span{height:54px;background:#d8d3ca;border-radius:6px}
.mini-grid span:nth-child(2),.mini-grid span:nth-child(3){background:#1f211e}
.coral-dot{
  position:absolute;left:35px;top:170px;width:66px;height:66px;border-radius:50%;
  background:var(--accent);z-index:3
}
.scribble{
  position:absolute;left:0;bottom:30px;transform:rotate(-8deg);
  font-family:var(--serif);font-style:italic;color:var(--muted)
}
.soft{background:rgba(255,255,255,.34);border-top:1px solid rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.04)}
.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:44px
}
.section-head p{max-width:520px;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{
  min-height:300px;padding:28px;background:var(--paper);
  border:1px solid #ebe5dc;position:relative;overflow:hidden
}
.service-card:after{
  content:"";position:absolute;width:120px;height:120px;border-radius:50%;
  right:-34px;bottom:-44px;background:rgba(255,106,71,.10)
}
.service-card:nth-child(2):after{background:rgba(144,160,124,.13)}
.service-card:nth-child(3):after{background:rgba(88,101,113,.10)}
.service-card:nth-child(4):after{background:rgba(149,130,170,.12)}
.num{font-size:12px;color:var(--muted)}
.service-card h3{margin-top:56px}
.service-card p{color:var(--muted);font-size:14px;min-height:66px}
.service-card a{font-size:13px;font-weight:600}
.projects{
  display:grid;grid-template-columns:.55fr 1.45fr;gap:64px;align-items:start
}
.projects-intro{position:sticky;top:120px}
.projects-intro p{color:var(--muted)}
.project-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.project-stack{display:grid;gap:18px}
.project-card{position:relative;overflow:hidden;background:#d8d0c5;min-height:310px}
.project-large{min-height:640px}
.mock-laptop,.brand-mock,.phone-mock{
  position:absolute;inset:0;display:grid;place-items:center;padding:34px
}
.mock-laptop{background:linear-gradient(145deg,#d8d3cc,#a79f95)}
.screen{
  width:86%;height:64%;background:#132017;color:#f7f0dc;border:12px solid #252525;border-radius:16px;
  padding:38px;box-shadow:0 22px 50px rgba(0,0,0,.25)
}
.screen span{font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.screen strong{display:block;font-family:var(--serif);font-size:34px;line-height:1;margin-top:44px}
.screen em{display:block;margin-top:20px;color:#bcc5b8}
.brand-mock{background:linear-gradient(135deg,#7f766b,#c6b8a6)}
.paper{position:absolute;width:46%;height:56%;display:grid;place-items:center;background:#e8dfd4;box-shadow:0 18px 30px rgba(0,0,0,.16);font-family:var(--serif);letter-spacing:.3em}
.paper-a{transform:rotate(-8deg) translate(-18%,2%)}
.paper-b{transform:rotate(8deg) translate(30%,4%);background:#bba994}
.phone-mock{background:#1a251d}
.phone{
  width:42%;height:86%;border:10px solid #111;border-radius:34px;background:#e7d8c6;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  transform:rotate(11deg);box-shadow:0 20px 40px rgba(0,0,0,.35)
}
.phone span{font-family:var(--serif);font-size:18px}
.project-meta{
  position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72))
}
.project-meta span{font-size:11px;opacity:.8}
.project-meta h3{margin:2px 0 0}
.about{
  display:grid;grid-template-columns:1.05fr 1fr .42fr;gap:44px;align-items:center
}
.about-photo{
  min-height:420px;border-radius:var(--radius);background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.45), transparent 25%),
    linear-gradient(145deg,#b9ad9d,#807264);
  position:relative;display:flex;align-items:flex-end;padding:32px;color:#fff
}
.about-photo:before{
  content:"";position:absolute;width:210px;height:290px;border-radius:46% 46% 42% 42%;
  background:#2c2926;right:18%;top:14%;opacity:.82
}
.portrait-mark.large{position:absolute;left:28px;top:28px;z-index:2}
.about-photo span{position:relative;z-index:2;font-family:var(--serif);font-size:23px}
.about-copy p{color:var(--muted)}
.about-note{padding:28px;background:#f6e9df;border-radius:18px}
.spark{color:var(--accent);font-size:28px}
.about-note strong{display:block;font-family:var(--serif);font-size:32px;line-height:1.02;margin:16px 0}
.about-note p{font-size:13px;color:var(--muted)}
.contact{
  background:#161614;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;
  gap:60px;align-items:center
}
.contact h2{font-size:clamp(44px,4.6vw,72px)}
.contact-copy p{max-width:700px;color:#c9c6bf}
.contact-info{display:grid;gap:16px;justify-self:end}
.socials{display:flex;gap:10px;margin-top:8px}
.socials a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.24);
  border-radius:50%;display:grid;place-items:center;font-size:11px
}
.footer{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:28px clamp(22px,7vw,110px);background:var(--paper);font-size:12px
}
.footer-links{display:flex;gap:22px}
.footer small{justify-self:end;color:var(--muted)}
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width: 980px){
  .site-header{grid-template-columns:1fr auto}
  .nav{
    display:none;position:absolute;top:72px;left:20px;right:20px;
    background:var(--paper);padding:24px;border:1px solid var(--line);flex-direction:column
  }
  .nav.open{display:flex}
  .desktop-cta{display:none}
  .menu-btn{display:block}
  .hero,.projects,.about,.contact{grid-template-columns:1fr}
  .hero{gap:24px}
  .hero-visual{min-height:500px}
  .section-head{align-items:start;flex-direction:column}
  .service-grid{grid-template-columns:1fr 1fr}
  .projects-intro{position:static}
  .project-layout{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about-note{max-width:330px}
  .contact-info{justify-self:start}
  .footer{grid-template-columns:1fr;justify-items:start}
  .footer small{justify-self:start}
}
@media (max-width: 640px){
  .section{padding:64px 22px}
  .site-header{padding:16px 20px}
  h1{font-size:48px}
  .lead{font-size:16px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .hero-visual{min-height:390px}
  .hero-main{inset:30px 0 0 20px}
  .floating-card{width:145px;right:0}
  .coral-dot{left:0;width:48px;height:48px}
  .service-grid{grid-template-columns:1fr}
  .project-large{min-height:500px}
  .screen{width:94%;padding:22px}
  .screen strong{font-size:25px}
  .footer-links{flex-wrap:wrap}
}