/* ============================================
   NALO STUDIOS — Stylesheet
   Design: Textile/craft-inspired editorial
   ============================================ */

:root {
  --cream: #FAF6F0;
  --ink: #1C1917;
  --thread: #C2703E;
  --terracotta: #B85C38;
  --ochre: #D4A34A;
  --indigo: #2D3A6E;
  --forest: #2A6041;
  --crimson: #8B2E3B;
  --warm-gray: #A8A29E;
  --light-warm: #F0EAE0;
  --stitch: #D4C5B0;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--thread); color: var(--cream); }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--thread); }

/* ---- Animations ---- */
@keyframes threadFall { 0%{opacity:0;transform:translateY(-20px) rotate(-5deg)} 20%{opacity:0.4} 80%{opacity:0.2} 100%{opacity:0;transform:translateY(100vh) rotate(5deg)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.fade-up { opacity:0; animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
.stagger-1 { animation-delay:0.1s } .stagger-2 { animation-delay:0.3s } .stagger-3 { animation-delay:0.5s } .stagger-4 { animation-delay:0.7s }

/* ---- Navigation ---- */
#main-nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:20px 40px; display:flex; justify-content:space-between; align-items:center; transition:all 0.4s ease; border-bottom:1px solid transparent; }
#main-nav.scrolled { background:rgba(250,246,240,0.95); backdrop-filter:blur(10px); border-bottom-color:var(--stitch); }
.nav-logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
.logo-nalo { font-family:'Instrument Serif',serif; font-size:26px; color:var(--ink); letter-spacing:-1px; }
.logo-studios { font-family:'Instrument Serif',serif; font-size:26px; color:var(--thread); font-style:italic; letter-spacing:-1px; }
.desktop-nav { display:flex; gap:32px; align-items:center; }
.nav-link { position:relative; text-decoration:none; color:var(--ink); font-size:13px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; padding:4px 0; transition:color 0.3s; background:none; border:none; font-family:'DM Sans',sans-serif; }
.nav-link:hover { color:var(--thread); }
.nav-link.active { color:var(--thread); }
.nav-link.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:1.5px; background:var(--thread); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { width:24px; height:1.5px; background:var(--ink); transition:all 0.3s; display:block; }

.mobile-nav { position:fixed; top:0; left:0; right:0; bottom:0; background:var(--cream); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.mobile-nav .nav-link { font-size:18px; letter-spacing:4px; }
.mobile-close { position:absolute; top:24px; right:32px; background:none; border:none; font-size:28px; cursor:pointer; color:var(--ink); }

/* ---- Particles ---- */
.particles-container { position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; }
.thread-particle { position:absolute; top:-20px; width:1px; height:40px; background:linear-gradient(to bottom,transparent,var(--thread),transparent); opacity:0; animation:threadFall 18s infinite ease-in; }

/* ---- Hero ---- */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 40px; position:relative; overflow:hidden; }
.hero-content { max-width:900px; margin:0 auto; width:100%; position:relative; z-index:1; }
.hero-tagline { margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.hero-tagline span { font-family:'Caveat',cursive; font-size:20px; color:var(--thread); }
.needle-icon { color:var(--thread); }
.hero-title { font-family:'Instrument Serif',serif; font-size:clamp(48px,8vw,96px); line-height:1.0; letter-spacing:-2px; margin-bottom:32px; }
.hero-title span { color:var(--ink); }
.hero-title em { color:var(--thread); font-style:italic; }
.hero-subtitle { font-size:18px; line-height:1.7; max-width:560px; color:var(--warm-gray); font-weight:300; margin-bottom:48px; }
.hero-ctas { display:flex; gap:20px; flex-wrap:wrap; }
.hero-letter { position:absolute; right:5%; top:20%; opacity:0.06; font-size:320px; font-family:'Instrument Serif',serif; color:var(--thread); line-height:1; pointer-events:none; user-select:none; }
.hero-thread-line { position:absolute; bottom:40px; left:40px; right:40px; color:var(--stitch); }

/* ---- CTA Button ---- */
.cta-button { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; background:var(--ink); color:var(--cream); border:none; font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all 0.4s ease; position:relative; overflow:hidden; }
.cta-button::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--thread); transform:scaleX(0); transition:transform 0.4s ease; }
.cta-button:hover { background:#2C2521; }
.cta-button:hover::after { transform:scaleX(1); }
.cta-outline { background:transparent; color:var(--ink); border:1px solid var(--stitch); }
.cta-outline:hover { background:rgba(194,112,62,0.06); border-color:var(--thread); }

/* ---- Marquee ---- */
.marquee-container { border-top:1px solid var(--stitch); border-bottom:1px solid var(--stitch); padding:20px 0; overflow:hidden; background:var(--light-warm); }
.marquee-track { display:flex; gap:80px; animation:marquee 30s linear infinite; white-space:nowrap; }
.marquee-track span { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--warm-gray); white-space:nowrap; }
.marquee-track .dot { color:var(--thread); }

/* ---- Section Labels ---- */
.section-label { font-family:'Caveat',cursive; font-size:18px; color:var(--thread); display:block; margin-bottom:12px; }
.section-heading { font-family:'Instrument Serif',serif; font-size:clamp(36px,5vw,52px); line-height:1.1; letter-spacing:-1px; margin-bottom:24px; }
.section-heading em { color:var(--thread); font-style:italic; }

/* ---- Stitch Border ---- */
.stitch-border { border:1px dashed var(--stitch); border-radius:2px; }

/* ---- About ---- */
.about-section { padding:120px 40px; max-width:1100px; margin:0 auto; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-right p { font-size:16px; line-height:1.85; color:#57534E; margin-bottom:24px; }
.about-right strong { color:var(--ink); }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.stat-card { padding:20px 24px; text-align:center; }
.stat-num { font-family:'Instrument Serif',serif; font-size:36px; color:var(--thread); line-height:1; }
.stat-label { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--warm-gray); margin-top:6px; }

/* ---- Work ---- */
.work-section { padding:100px 40px 120px; background:var(--light-warm); }
.work-inner { max-width:1100px; margin:0 auto; }
.work-header { text-align:center; margin-bottom:72px; }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.project-card { border:1px solid var(--stitch); border-radius:2px; padding:40px; transition:all 0.5s cubic-bezier(0.22,1,0.36,1); position:relative; overflow:hidden; cursor:default; background:var(--cream); }
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-accent,var(--thread)); transform:scaleX(0); transform-origin:left; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.project-card:hover { border-color:var(--card-accent,var(--thread)); transform:translateY(-4px); box-shadow:0 12px 40px rgba(28,25,23,0.08); }
.project-card:hover::before { transform:scaleX(1); }
.project-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.project-symbol { font-size:32px; line-height:1; }
.project-type { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--warm-gray); background:var(--light-warm); padding:4px 10px; border-radius:1px; }
.project-card h3 { font-family:'Instrument Serif',serif; font-size:28px; margin-bottom:12px; letter-spacing:-0.5px; }
.project-card p { font-size:14px; line-height:1.75; color:#78716C; margin-bottom:16px; }
.project-awards { font-size:12px; font-weight:500; letter-spacing:0.5px; }

/* ---- Services ---- */
.services-section { padding:120px 40px; max-width:1100px; margin:0 auto; }
.services-grid { display:grid; grid-template-columns:1fr 2fr; gap:80px; }
.services-desc { font-size:15px; line-height:1.8; color:#78716C; }
.service-item { padding:32px 28px; border-left:2px solid transparent; transition:all 0.4s ease; cursor:default; }
.service-item:hover { border-left-color:var(--thread); background:rgba(194,112,62,0.04); padding-left:36px; }
.service-item-inner { display:flex; align-items:flex-start; gap:20px; }
.service-icon { font-size:22px; color:var(--thread); margin-top:2px; flex-shrink:0; width:28px; text-align:center; }
.service-item h3 { font-family:'Instrument Serif',serif; font-size:22px; margin-bottom:6px; letter-spacing:-0.3px; }
.service-item p { font-size:14px; line-height:1.75; color:#78716C; }

/* ---- CTA Banner ---- */
.cta-banner { background:var(--ink); padding:80px 40px; text-align:center; position:relative; overflow:hidden; }
.cta-banner-thread { position:absolute; top:0; left:0; right:0; opacity:0.08; color:var(--stitch); }
.banner-heading { font-family:'Instrument Serif',serif; font-size:clamp(32px,5vw,52px); color:var(--cream); line-height:1.1; margin-bottom:28px; letter-spacing:-1px; }
.banner-heading em { color:var(--thread); font-style:italic; }
.banner-desc { font-size:16px; color:#A8A29E; max-width:500px; margin:0 auto 36px; line-height:1.7; }

/* ---- Contact ---- */
.contact-section { padding:120px 40px; max-width:900px; margin:0 auto; }
.contact-header { text-align:center; margin-bottom:64px; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; margin-bottom:64px; }
.contact-card { padding:28px 24px; text-align:center; }
.contact-icon { font-size:24px; color:var(--thread); margin-bottom:12px; }
.contact-label { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:6px; }
.contact-value { font-size:15px; color:var(--ink); }
.contact-value a { transition:color 0.3s; }
.contact-value a:hover { color:var(--thread); }
.contact-footer { text-align:center; }
.contact-quote { font-family:'Caveat',cursive; font-size:22px; color:var(--thread); margin-top:24px; }
.contact-sig { font-size:13px; color:var(--warm-gray); margin-top:8px; letter-spacing:1px; }

/* ---- Footer ---- */
footer { border-top:1px solid var(--stitch); padding:40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-logo { display:flex; align-items:center; gap:10px; }
.footer-logo .logo-nalo { font-size:20px; }
.footer-logo .logo-studios { font-size:20px; }
.footer-copy { font-size:12px; color:var(--warm-gray); letter-spacing:1px; }
.footer-links { display:flex; gap:24px; }
.footer-links button { background:none; border:none; cursor:pointer; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--warm-gray); font-family:'DM Sans',sans-serif; transition:color 0.3s; }
.footer-links button:hover { color:var(--thread); }

/* ---- Responsive ---- */
@media (max-width:768px) {
  .hamburger { display:flex; }
  .desktop-nav { display:none !important; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .services-grid { grid-template-columns:1fr; gap:40px; }
  .hero { padding:0 24px; }
  .hero-letter { font-size:180px; right:0; top:10%; }
  #main-nav { padding:16px 24px; }
  footer { flex-direction:column; text-align:center; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
  .contact-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .contact-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
}