:root{--paper:#f7f3ec;--paper2:#fffaf2;--ink:#121212;--muted:#6f675f;--soft:#e8ded1;--accent:#c76a43;--line:rgba(18,18,18,.14);--dark:#101010;--dark2:#181716;--cream:#f4eee4}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(18,18,18,.13) 1px,transparent 1px);background-size:22px 22px;opacity:.10;z-index:90}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{width:100%;display:block;object-fit:cover}
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:'Cormorant Garamond',serif}
.accent{color:var(--accent)}

.site-header{position:sticky;top:0;z-index:80;height:86px;background:rgba(247,243,236,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.brand{font-weight:900;letter-spacing:-.06em;font-size:29px}
.brand b{color:var(--accent);font-weight:900}
.nav{display:flex;gap:30px;align-items:center;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:12px;color:var(--muted)}
.nav a.active,.nav a:hover{color:var(--ink);border-bottom:2px solid var(--accent)}
.nav-cta{border:1px solid var(--ink);padding:11px 15px;background:var(--ink);color:var(--paper)!important}

.section{padding:110px 5vw}
.label{font-family:'IBM Plex Mono',monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.18em;font-size:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);padding:15px 21px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:12px;letter-spacing:.08em;border:1px solid var(--ink)}
.btn.light{background:transparent;color:var(--ink)}
.btn.reverse{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.text-link{border-bottom:1px solid var(--accent);color:var(--ink)}

.hero{min-height:calc(100vh - 86px);display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center;padding:88px 5vw 78px}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(64px,8.8vw,132px);line-height:.86;letter-spacing:-.06em;font-weight:600;max-width:1080px}
.hero p{max-width:650px;color:var(--muted);font-size:18px;line-height:1.8;margin-top:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-panel{border:1px solid var(--line);background:var(--paper2);padding:18px;transform:rotate(1deg)}
.hero-panel img{height:500px;border:1px solid var(--line)}
.hero-panel-info{display:flex;justify-content:space-between;gap:20px;padding:18px 4px 2px;font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:12px;text-transform:uppercase}
.layered-panel{box-shadow:18px 18px 0 rgba(199,106,67,.12)}

.proof-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{padding:24px 5vw;border-right:1px solid var(--line)}
.proof-item strong{font-family:'Cormorant Garamond',serif;font-size:42px;display:block;line-height:1}
.proof-item span{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:12px;text-transform:uppercase}

.intro-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}
.intro-grid h2,.section-title,.about-layout h2,.founder-card h2,.creator-market h2,.build-notes h2{font-family:'Cormorant Garamond',serif;font-size:clamp(54px,7vw,108px);line-height:.88;letter-spacing:-.055em;font-weight:600}
.intro-grid p{color:var(--muted);font-size:18px;line-height:1.8;max-width:760px;margin-top:22px}
.section-kicker{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;margin-bottom:48px}
.section-kicker p{color:var(--muted);line-height:1.75;max-width:620px}

.work-stack{display:grid;gap:34px}
.project-row{display:grid;grid-template-columns:.6fr 1.4fr;gap:24px;align-items:stretch;border-top:1px solid var(--line);padding-top:34px}
.project-meta{display:flex;flex-direction:column;justify-content:space-between;min-height:360px}
.project-meta h3{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,5vw,82px);line-height:.88;letter-spacing:-.055em;font-weight:600}
.project-meta p{color:var(--muted);line-height:1.75;margin:18px 0}
.tagline{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:12px;color:var(--accent);letter-spacing:.12em}
.tech-note{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.project-image{position:relative;overflow:hidden;border:1px solid var(--line);background:#ddd;min-height:440px}
.project-image img{height:100%;transition:transform .8s ease}
.project-row:hover img{transform:scale(1.025)}
.project-image:after{content:"View project";position:absolute;right:18px;bottom:18px;background:var(--ink);color:var(--paper);padding:12px 14px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:11px}

.services{background:var(--dark);color:var(--cream)}
.services .label{color:#d29a76}
.services .section-title{margin-top:18px}
.services-grid{margin-top:46px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.service-card{background:var(--dark2);min-height:260px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.service-card strong{font-family:'Cormorant Garamond',serif;font-size:36px;line-height:.95}
.service-card p{color:#aaa;line-height:1.6;font-size:14px}

.founder-split,.process,.creator-market,.build-notes{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.founder-split h2{font-family:'Cormorant Garamond',serif;font-size:clamp(60px,8vw,118px);line-height:.85;letter-spacing:-.055em;font-weight:600}
.founder-copy,.build-notes p{font-size:19px;line-height:1.8;color:var(--muted)}
.founder-copy p+p{margin-top:20px}
.founder-copy .text-link{display:inline-block;margin-top:26px}

.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.step span{font-family:'Cormorant Garamond',serif;font-size:54px;color:var(--accent);line-height:.9}
.step strong{display:block;font-size:21px;margin-bottom:8px}
.step p{color:var(--muted);line-height:1.65}

.offer{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.offer-box{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:end}
.offer h2{font-family:'Cormorant Garamond',serif;font-size:clamp(58px,7vw,110px);line-height:.86;letter-spacing:-.055em}
.offer p{color:var(--muted);font-size:18px;line-height:1.8;margin-bottom:28px}

.cta{background:var(--ink);color:var(--paper)}
.cta-inner{display:grid;grid-template-columns:1fr .75fr;gap:40px;align-items:end}
.cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(70px,10vw,150px);line-height:.82;letter-spacing:-.06em}
.cta p{color:#bdb7ae;line-height:1.8;margin-bottom:26px}

.site-footer{border-top:1px solid var(--line);padding:38px 5vw;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase}
.site-footer strong{display:block;color:var(--ink);margin-bottom:8px}
.site-footer a{border-bottom:1px solid var(--line)}
.cta+.site-footer{background:var(--ink);border-color:rgba(255,255,255,.13);color:#aaa}
.cta+.site-footer strong{color:var(--paper)}

.page-hero{padding:90px 5vw 60px}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(72px,10vw,150px);line-height:.82;letter-spacing:-.06em;max-width:1180px}
.page-hero p{color:var(--muted);font-size:18px;line-height:1.75;max-width:700px;margin-top:24px}

.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:30px 5vw 110px}
.work-card{background:var(--paper2);border:1px solid var(--line);padding:16px}
.work-card img{height:360px;border:1px solid var(--line);filter:saturate(.96)}
.work-card h2{font-family:'Cormorant Garamond',serif;font-size:54px;line-height:.9;margin:18px 0 10px}
.work-card p{color:var(--muted);line-height:1.65}
.work-card-footer{display:flex;justify-content:space-between;gap:18px;margin-top:18px;font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:12px;text-transform:uppercase}

.about-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.about-copy{font-size:20px;line-height:1.75;color:var(--muted)}
.about-copy p+p{margin-top:24px}
.story-section{padding-top:70px}
.founder-story{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.founder-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.values-grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.values-grid div{background:var(--paper2);padding:24px;min-height:220px}
.values-grid strong{font-family:'Cormorant Garamond',serif;font-size:34px;line-height:.95;display:block;margin-bottom:18px}
.values-grid p{color:var(--muted);line-height:1.6}
.creator-market{border-top:1px solid var(--line)}

.contact-section{min-height:calc(100vh - 86px)}
.contact-layout{display:grid;grid-template-columns:1fr .85fr;gap:70px}
.contact-layout h1{font-family:'Cormorant Garamond',serif;font-size:clamp(76px,10vw,142px);line-height:.82;letter-spacing:-.06em}
.contact-intro{color:var(--muted);font-size:19px;line-height:1.7;margin-top:24px}
.contact-card{background:var(--paper2);border:1px solid var(--line);padding:26px}
.contact-list{display:grid;gap:18px;margin-top:34px}
.contact-row{border-top:1px solid var(--line);padding-top:18px}
.contact-row span{display:block;font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:12px;text-transform:uppercase;margin-bottom:6px}
.contact-row p,.form-note{color:var(--muted);line-height:1.6}
.form{display:grid;gap:14px}
.form input,.form textarea{width:100%;border:1px solid var(--line);background:transparent;padding:15px;color:var(--ink)}
.form textarea{min-height:150px;resize:vertical}
.form-note{font-size:13px;margin-top:18px}

.project-hero{padding:80px 5vw}
.project-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:end}
.back{font-family:'IBM Plex Mono',monospace;color:var(--muted);text-transform:uppercase;font-size:12px}
.project-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(80px,12vw,170px);line-height:.76;letter-spacing:-.06em;margin-top:70px}
.project-summary{background:var(--paper2);border:1px solid var(--line);padding:24px}
.project-summary p{color:var(--muted);line-height:1.75;margin-bottom:16px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
.fact{background:var(--paper);padding:16px}
.fact span{display:block;font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:11px;text-transform:uppercase;margin-bottom:8px}
.project-cover{padding:0 5vw 90px}
.project-cover img{border:1px solid var(--line);height:auto}
.case-block{padding:90px 5vw;border-top:1px solid var(--line);display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}
.case-block h2{font-family:'Cormorant Garamond',serif;font-size:clamp(50px,6vw,96px);line-height:.88;letter-spacing:-.055em}
.case-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-item{background:var(--paper2);border:1px solid var(--line);padding:24px;min-height:250px}
.case-item strong{display:block;font-size:22px;margin-bottom:14px}
.case-item p{color:var(--muted);line-height:1.65}
.build-notes{border-top:1px solid var(--line);padding-top:70px;padding-bottom:70px}
.gallery{padding:0 5vw 110px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.gallery img{border:1px solid var(--line);background:#ddd}
.next-project{border-top:1px solid var(--line);padding:70px 5vw;display:flex;justify-content:space-between;gap:30px;align-items:center}
.next-project strong{font-family:'Cormorant Garamond',serif;font-size:56px;line-height:.9}

/* MOBILE FIXES */
@media(max-width:900px){
  .site-header{
    height:auto;
    min-height:82px;
    padding:22px 20px;
    align-items:center;
    gap:16px;
  }

  .brand{
    font-size:25px;
    white-space:nowrap;
  }

  .nav{
    gap:16px;
    overflow:auto;
    font-size:11px;
    max-width:58vw;
    padding-bottom:4px;
  }

  .nav-cta{display:none}

  .hero,.intro-grid,.section-kicker,.project-row,.founder-split,.process,.offer-box,.cta-inner,.about-layout,.founder-card,.creator-market,.build-notes,.contact-layout,.project-hero-grid,.case-block{
    grid-template-columns:1fr;
  }

  .section{padding:74px 20px}
  .hero{padding:64px 20px;min-height:auto}
  .hero h1{font-size:clamp(58px,17vw,86px)}

  .hero-panel img{
    height:auto;
    max-height:none;
    object-fit:contain;
  }

  .proof-strip,.services-grid,.work-grid,.facts,.case-list,.gallery,.values-grid,.site-footer{
    grid-template-columns:1fr;
  }

  .proof-item{padding:22px 20px}
  .project-meta{min-height:auto}

  .project-image{
    min-height:0;
    height:auto;
    overflow:hidden;
    background:transparent;
  }

  .project-image img{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  .project-row:hover img{
    transform:none;
  }

  .project-image:after{
    right:12px;
    bottom:12px;
    padding:12px 14px;
    font-size:11px;
  }

  .work-grid{padding:20px 20px 80px}

  .work-card{
    padding:14px;
  }

  .work-card img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }

  .work-card h2{
    font-size:48px;
  }

  .work-card-footer{
    flex-direction:column;
    gap:8px;
  }

  .project-hero,.page-hero{padding:60px 20px}
  .project-cover{padding:0 20px 70px}
  .case-block{padding:70px 20px}
  .gallery{padding:0 20px 80px}

  .gallery img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .site-footer,.next-project{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .step{grid-template-columns:70px 1fr}
  .service-card{min-height:180px}
  .case-item{min-height:auto}
  .values-grid div{min-height:auto}
}

@media(max-width:520px){
  .site-header{
    padding:20px 18px;
  }

  .brand{
    font-size:23px;
    letter-spacing:-.065em;
  }

  .nav{
    max-width:54vw;
    gap:14px;
    font-size:10px;
  }

  .page-hero h1,
  .contact-layout h1,
  .project-hero h1{
    font-size:clamp(60px,18vw,86px);
  }

  .section-title,
  .intro-grid h2,
  .about-layout h2,
  .founder-card h2,
  .creator-market h2,
  .build-notes h2{
    font-size:clamp(50px,16vw,76px);
  }

  .project-meta h3{
    font-size:clamp(46px,15vw,68px);
  }

  .project-meta p,
  .work-card p,
  .page-hero p,
  .about-copy,
  .founder-copy,
  .build-notes p{
    font-size:17px;
    line-height:1.65;
  }
}