/* C4 — BENTO GRID MODERN */
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:#F4E8D1;color:#2D1E0F;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;width:100%}

.chip{display:inline-block;padding:.4rem 1.2rem;border-radius:100px;background:rgba(212,100,42,.1);color:#D4642A;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* PILL NAV */
.pill-nav{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2rem;padding:.6rem .8rem .6rem 1.5rem;background:rgba(255,245,232,.85);backdrop-filter:blur(20px);border-radius:100px;z-index:100;box-shadow:0 8px 40px rgba(45,30,15,.08);border:1px solid rgba(212,100,42,.1)}
.pill-logo{width:32px;height:32px;background:#D4642A;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.pill-links{display:flex;gap:1.5rem}
.pill-links a{font-size:.7rem;font-weight:500;color:#6B5038;transition:color .3s}
.pill-links a:hover{color:#D4642A}
.pill-cta{padding:.5rem 1.5rem;background:#D4642A;color:#fff;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:.05em;transition:background .3s}
.pill-cta:hover{background:#B8501E}

/* HERO BENTO */
.hero-bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:auto auto;gap:1rem;padding:8rem 2rem 2rem;max-width:1400px;margin:0 auto}
.bento-main{grid-row:span 2;background:#FFF5E8;border-radius:24px;padding:4rem;display:flex;align-items:flex-end}
.bento-main h1{font-size:clamp(3rem,6vw,5rem);font-weight:800;line-height:1}
.bento-main h1 span{background:linear-gradient(135deg,#D4642A,#E8973F);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.bento-img{border-radius:24px;overflow:hidden}
.bento-img img{width:100%;height:100%;object-fit:cover}
.bento-stat{background:#FFF5E8;border-radius:24px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.bento-stat strong{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#D4642A,#E8973F);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.bento-stat span{font-size:.65rem;color:#A08968;margin-top:.3rem;letter-spacing:.05em;text-transform:uppercase}
.bento-desc{background:#2D1E0F;color:#fff;border-radius:24px;padding:2.5rem;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.bento-desc p{font-size:.85rem;line-height:1.8;color:rgba(255,255,255,.7)}
.link-arrow{font-weight:700;font-size:.75rem;color:#E8973F;transition:color .3s}
.link-arrow:hover{color:#D4642A}
.bento-img2{border-radius:24px;overflow:hidden}
.bento-img2 img{width:100%;height:100%;object-fit:cover}

/* PROJECTS */
.projects{padding:6rem 2rem;max-width:1400px;margin:0 auto}
.sec-head{margin-bottom:3rem}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-top:.8rem}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pcard{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;cursor:pointer}
.pcard.large{grid-column:span 2;aspect-ratio:auto}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pcard:hover img{transform:scale(1.06)}
.pcard-info{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(to top,rgba(45,30,15,.8),transparent);color:#fff}
.pcard-info span{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:#E8973F}
.pcard-info h3{font-size:1.2rem;font-weight:700;margin-top:.2rem}

/* SERVICES */
.services{padding:4rem 2rem 6rem;max-width:1400px;margin:0 auto}
.svc-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sb{background:#FFF5E8;border-radius:20px;padding:3rem 2.5rem;transition:transform .3s,box-shadow .3s}
.sb:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(212,100,42,.1)}
.sb.large{grid-column:span 2}
.sb.full{grid-column:span 3}
.sb-num{font-size:3rem;font-weight:800;background:linear-gradient(135deg,rgba(212,100,42,.15),rgba(232,151,63,.1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}
.sb h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.sb p{font-size:.82rem;line-height:1.8;color:#6B5038}

/* CONTACT */
.contact{padding:2rem;max-width:1400px;margin:0 auto}
.contact-card{background:#2D1E0F;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;padding:5rem;gap:4rem;color:#fff}
.cc-left h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin:.8rem 0 2rem}
.cc-info p{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:.8rem}
.contact-card form{display:flex;flex-direction:column;gap:1rem}
.contact-card input,.contact-card textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem 1.2rem;color:#fff;font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;transition:border-color .3s}
.contact-card input:focus,.contact-card textarea:focus{border-color:#D4642A}
.contact-card textarea{min-height:80px;resize:none}
.contact-card input::placeholder,.contact-card textarea::placeholder{color:rgba(255,255,255,.25)}
.contact-card button{background:linear-gradient(135deg,#D4642A,#E8973F);color:#fff;border:none;border-radius:12px;padding:1rem;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .3s,box-shadow .3s}
.contact-card button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,100,42,.3)}

footer{display:flex;justify-content:space-between;padding:3rem 2rem;font-size:.7rem;color:#A08968;max-width:1400px;margin:0 auto}
footer a{margin-left:1.5rem;color:#A08968;transition:color .3s}
footer a:hover{color:#D4642A}

@media(max-width:1024px){.hero-bento{grid-template-columns:1fr 1fr}.bento-main{grid-column:span 2}.proj-grid{grid-template-columns:1fr 1fr}.pcard.large{grid-column:span 2}.svc-bento{grid-template-columns:1fr 1fr}.sb.large,.sb.full{grid-column:span 2}}
@media(max-width:768px){.pill-links{display:none}.hero-bento{grid-template-columns:1fr;padding:6rem 1rem 1rem}.bento-main{grid-column:auto;grid-row:auto}.proj-grid,.svc-bento{grid-template-columns:1fr}.pcard.large,.sb.large,.sb.full{grid-column:auto}.contact-card{grid-template-columns:1fr;padding:2.5rem}footer{padding:2rem 1rem}}
