/* ============================================================
   STUDIOSETUP — DESIGN SYSTEM
   Editorial · monochrome + single citrus accent · no gradients
   ============================================================ */

:root{
  --paper:#ffffff;
  --cream:#f7f4eb;
  --bg:#ebe8df;
  --ink:#171717;
  --ash:#5e5b56;
  --line:rgba(23,23,23,.10);
  --line-strong:rgba(23,23,23,.18);
  --citrus:#ee5b13;
  --acid:#d4dd2c;
  --voltage:#1e3fa3;
  --mist:#e8e6df;

  --mono:'JetBrains Mono','SF Mono',Menlo,Monaco,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
  --serif:'Iowan Old Style','Charter','Georgia',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 20px}}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:14px;font-weight:500}
.kicker::before{content:"";display:inline-block;width:5px;height:5px;background:var(--acid);margin-right:7px;vertical-align:middle;transform:translateY(-1px)}

h1,h2,h3{letter-spacing:-.02em;line-height:1.05;font-weight:900}
h1{font-size:clamp(36px,6vw,68px);letter-spacing:-.035em;line-height:1.02}
h1 em{font-style:normal;color:var(--citrus)}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.025em}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2}

.section-head{max-width:680px;margin-bottom:48px}
.section-head p{color:var(--ash);font-size:16px;line-height:1.6;margin-top:14px;max-width:560px}

.btn{display:inline-block;padding:13px 22px;font-weight:600;font-size:14px;letter-spacing:.01em;border-radius:3px;transition:.15s;cursor:pointer;border:1px solid transparent;font-family:var(--sans)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{background:var(--citrus);border-color:var(--citrus)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn.coffee-btn{background:var(--citrus);color:var(--paper);border-color:var(--citrus);font-size:15px;padding:14px 26px}
.btn.coffee-btn:hover{background:var(--ink);border-color:var(--ink)}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{position:sticky;top:0;z-index:50;background:rgba(235,232,223,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{font-weight:900;font-size:18px;letter-spacing:-.5px;line-height:1}
.brand span{color:var(--citrus)}
.topbar nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:500}
.topbar nav a{color:var(--ash);transition:.12s}
.topbar nav a:hover{color:var(--ink)}
.topbar nav .coffee-link{color:var(--citrus);font-weight:600}
@media(max-width:700px){.topbar nav a:not(.coffee-link){display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:80px 0 100px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:center}
@media(max-width:900px){.hero{padding:60px 0 80px}.hero .wrap{grid-template-columns:1fr;gap:60px}.hero-paper{order:-1;max-width:300px;margin:0 auto}}

.hero-text .lead{font-size:17px;line-height:1.65;color:var(--ash);max-width:560px;margin:24px 0 32px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.meta-line{font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.05em;line-height:1.6}

/* 3D paper stack */
.hero-paper{perspective:1400px;height:440px;position:relative}
.paper-stack{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(8deg);animation:floaty 8s ease-in-out infinite}
.paper{position:absolute;background:var(--paper);box-shadow:0 18px 40px -8px rgba(23,23,23,.18),0 4px 12px rgba(23,23,23,.06);border-radius:1px}
.paper.p1{width:280px;height:360px;top:20px;left:80px;background:var(--cream);transform:translateZ(-30px) rotate(-3deg)}
.paper.p2{width:280px;height:360px;top:35px;left:50px;background:var(--mist);transform:translateZ(-15px) rotate(2deg)}
.paper.p3{width:280px;height:360px;top:50px;left:20px;background:var(--paper);padding:32px 28px;transform:translateZ(0)}
.ph-band{height:6px;background:var(--ink);border-radius:1px;margin-bottom:8px}
.ph-band.band1{width:62%;height:18px;background:var(--ink);margin-bottom:14px}
.ph-band.band2{width:88%;height:8px;background:var(--citrus);margin-bottom:20px}
.ph-band.band3{width:70%;height:5px;background:rgba(23,23,23,.18);margin-bottom:5px}
.ph-block{margin-top:28px;width:100%;height:160px;background:var(--citrus)}

@keyframes floaty{
  0%,100%{transform:rotateY(-18deg) rotateX(8deg) translateY(0)}
  50%{transform:rotateY(-15deg) rotateX(6deg) translateY(-8px)}
}

/* ============================================================
   PROJECT TYPE CARDS
   ============================================================ */
.types{padding:90px 0;background:var(--paper)}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

.type-card{background:var(--cream);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;text-align:left}
.type-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 28px -8px rgba(23,23,23,.16)}
.type-card .preview{aspect-ratio:4/5;background:var(--mist);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.type-card .preview img{width:100%;height:100%;object-fit:cover}
.type-card .preview .placeholder{width:75%;height:80%;background:var(--paper);box-shadow:0 6px 18px -4px rgba(0,0,0,.12);display:flex;flex-direction:column;padding:14px;border-radius:1px}
.type-card .preview .placeholder.poster{aspect-ratio:auto}
.type-card .info{padding:16px 18px 18px}
.type-card .info h3{font-size:17px;letter-spacing:-.005em;margin-bottom:4px}
.type-card .info .sub{font-family:var(--mono);font-size:10px;color:var(--ash);letter-spacing:.08em;text-transform:uppercase}
.type-card .info p{font-size:13px;color:var(--ash);line-height:1.5;margin-top:8px}
.type-card .arrow{margin-top:14px;font-size:12px;font-weight:600;color:var(--citrus);letter-spacing:.02em}

/* Inline visuals for cards (when no admin photo set) */
.viz{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.viz-paper{background:var(--paper);box-shadow:0 8px 22px -6px rgba(23,23,23,.18);position:relative;display:flex;flex-direction:column;padding:14px}
.viz-paper.magazine{width:62%;aspect-ratio:8.5/11}
.viz-paper.brochure{width:80%;aspect-ratio:11/8.5}
.viz-paper.flyer{width:65%;aspect-ratio:8.5/11}
.viz-paper.poster{width:55%;aspect-ratio:18/24}
.viz-paper.card{width:80%;aspect-ratio:7/4}
.viz-paper.book{width:55%;aspect-ratio:6/9}
.viz-paper.social{width:78%;aspect-ratio:1/1}
.viz-bar{height:3px;background:var(--ink);margin-bottom:3px;border-radius:.5px}
.viz-bar.l{height:8px;width:70%;margin-bottom:6px;background:var(--ink)}
.viz-bar.m{width:90%;background:var(--citrus);height:4px;margin-bottom:8px}
.viz-bar.s{width:50%;background:rgba(0,0,0,.15)}
.viz-block{margin-top:8px;flex:1;background:var(--citrus);min-height:40%}
.viz-block.alt{background:var(--ink)}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{padding:90px 0;border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:800px){.steps{grid-template-columns:1fr;gap:24px}}
.step{padding:0}
.step-num{font-family:var(--mono);font-size:13px;color:var(--citrus);letter-spacing:.1em;font-weight:600;margin-bottom:12px}
.step h3{margin-bottom:10px}
.step p{color:var(--ash);font-size:15px;line-height:1.6}

/* ============================================================
   COFFEE CTA
   ============================================================ */
.coffee{padding:80px 0;background:var(--ink);color:var(--cream)}
.coffee .kicker{color:rgba(247,244,235,.55)}
.coffee .kicker::before{background:var(--citrus)}
.coffee-card{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
@media(max-width:700px){.coffee-card{grid-template-columns:1fr;gap:24px}}
.coffee h3{font-size:28px;line-height:1.2;color:var(--paper);margin-bottom:14px;letter-spacing:-.015em}
.coffee p{color:rgba(247,244,235,.7);max-width:560px;line-height:1.6;font-size:15px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:36px 0;background:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ash)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-links{display:flex;gap:20px}
.foot-links a:hover{color:var(--ink)}