*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #FAF7F4;
  --rose:    #C97B8A;
  --rose-dk: #9E5A6A;
  --terra:   #D4896A;
  --dark:    #1C1412;
  --mid:     #5C4A47;
  --muted:   #A89490;
  --border:  rgba(201,123,138,0.15);
  --border2: rgba(201,123,138,0.28);
  --white:   #FFFFFF;
  --black:   #0E0F11;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--dark); overflow-x: hidden; cursor: none; }

.cursor { position:fixed; z-index:9999; pointer-events:none; width:8px; height:8px; border-radius:50%; background:var(--rose); top:0; left:0; transform:translate(-50%,-50%); }
.cursor-ring { position:fixed; z-index:9998; pointer-events:none; width:36px; height:36px; border-radius:50%; border:1px solid rgba(201,123,138,0.45); top:0; left:0; transform:translate(-50%,-50%); transition:width 0.3s,height 0.3s; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 3rem;
  background:rgba(250,247,244,0.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,123,138,0.15);
}
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; letter-spacing:0.06em; color:var(--dark); text-decoration:none; }
.nav-logo span { color:var(--rose); }
.nav-back { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:0.5rem; transition:color 0.2s; }
.nav-back:hover { color:var(--rose); }

/* HERO — cream, matching homepage */
.cs-hero {
  background: var(--cream);
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10rem 6rem 4rem;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.cs-eyebrow {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.cs-tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.65rem; border: 1px solid var(--border2); color: var(--muted); }
.cs-tag.hi { border-color: var(--border2); color: var(--rose); }
.cs-live { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.65rem; background: rgba(201,123,138,0.1); color: var(--rose); border: 1px solid rgba(201,123,138,0.3); border-radius: 100px; }

.cs-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300; line-height: 0.95;
  color: var(--dark); letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}
.cs-title em { font-style: italic; color: var(--rose); }

.cs-hero-meta {
  display: flex; gap: 3rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
}
.cs-meta-item {}
.cs-meta-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.cs-meta-val { font-size: 0.82rem; color: var(--mid); }

/* CONTENT */
.cs-content { background: var(--cream); }
.cs-section { padding: 4rem; border-bottom: 1px solid var(--border); max-width: 1200px; margin: 0 auto; }
.cs-section:last-child { border-bottom: none; }

.cs-section-label {
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.cs-section-label::before { content: ''; width: 20px; height: 1px; background: var(--rose); }

.cs-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300; margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}

.cs-body { font-size: 0.9rem; line-height: 1.85; color: var(--mid); max-width: 680px; }

/* OVERVIEW GRID */
.cs-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cs-overview-right { display: flex; flex-direction: column; gap: 1rem; }
.cs-stat-box {
  padding: 1.2rem 1.5rem;
  background: white; border: 1px solid var(--border);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
}
.cs-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: var(--dark); }
.cs-stat-num span { color: var(--rose); }
.cs-stat-label { font-size: 0.78rem; color: var(--mid); }
.cs-stat-sub { font-size: 0.65rem; color: var(--muted); margin-top: 0.15rem; }

/* SCREENSHOT */
.cs-screenshot {
  width: 100%; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(201,123,138,0.1);
  margin: 2rem 0;
}
.cs-screenshot img { width: 100%; display: block; }
.cs-screenshot-caption { font-size: 0.72rem; color: var(--muted); padding: 0.8rem 1rem; background: white; border-top: 1px solid var(--border); font-style: italic; }

.cs-screenshot-browser { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(201,123,138,0.1); margin: 2rem 0; }
.cs-browser-bar { background: white; padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 5px; }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; }
.cs-dot.r{background:#FF5F57;} .cs-dot.y{background:#FFBD2E;} .cs-dot.g{background:#28CA41;}
.cs-url { font-size: 0.7rem; color: var(--muted); margin-left: 8px; }
.cs-screenshot-browser img { width: 100%; display: block; }
.cs-screenshot-browser .cs-screenshot-caption { border-top: 1px solid var(--border); }

/* TWO COL SCREENSHOTS */
.cs-screenshots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }

/* DECISIONS */
.cs-decisions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.cs-decision {
  padding: 1.5rem;
  background: white; border: 1px solid var(--border);
  border-left: 3px solid var(--rose);
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
}
.cs-decision-num { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--rose); font-weight: 300; line-height: 1; }
.cs-decision-title { font-size: 0.85rem; font-weight: 500; color: var(--dark); margin-bottom: 0.4rem; }
.cs-decision-body { font-size: 0.8rem; color: var(--mid); line-height: 1.7; }

/* NAV FOOT */
.cs-footer-nav {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 2rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
}
.cs-footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--dark); letter-spacing: 0.05em; }
.cs-footer-logo span { color: var(--rose); }
.cs-next { text-align: right; }
.cs-next-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.cs-next-link { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--dark); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.cs-next-link:hover { color: var(--rose); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
/* PHONE MOCKUPS — Closetly case study */
.cs-phones-wrap {
  display: flex; justify-content: center; gap: 2rem;
  padding: 2rem 0; flex-wrap: wrap;
}
.cs-phone {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.cs-phone-screen {
  width: 160px; height: 320px;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 10px 8px;
  box-shadow: 0 20px 48px rgba(201,123,138,0.2), 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
}
.cs-phone-caption {
  font-size: 0.7rem; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  nav { padding: 1.2rem 2rem; }
  .cs-hero { padding: 8rem 2.5rem 3rem; }
  .cs-overview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-hero-meta { flex-wrap: wrap; gap: 1.5rem; }
  .cs-section { padding: 3rem 2.5rem; }
  .cs-screenshots-2 { grid-template-columns: 1fr; }
  .cs-footer-nav { padding: 2rem 2.5rem; }
  .cs-phones-wrap { gap: 1.2rem; }
}

@media (max-width: 768px) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }

  nav { padding: 1rem 1.5rem; }
  .cs-hero { padding: 7rem 1.5rem 2.5rem; min-height: 50vh; }
  .cs-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .cs-eyebrow { flex-wrap: wrap; gap: 0.5rem; }
  .cs-hero-meta { flex-direction: column; gap: 1rem; }

  .cs-section { padding: 2.5rem 1.5rem; }
  .cs-section-title { font-size: clamp(1.6rem, 6vw, 2rem); }
  .cs-body { font-size: 0.85rem; }

  .cs-overview-right { gap: 0.8rem; }
  .cs-stat-box { padding: 1rem; gap: 0.8rem; }
  .cs-stat-num { font-size: 1.6rem; }

  .cs-decisions { gap: 0.8rem; }
  .cs-decision { padding: 1.2rem; gap: 0.8rem; }

  .cs-phones-wrap { gap: 0.8rem; }
  .cs-phone-screen { width: 110px; height: 220px; }

  .cs-footer-nav { flex-direction: column; gap: 1.5rem; text-align: center; padding: 2rem 1.5rem; }
  .cs-next { text-align: center; }
}

@media (max-width: 480px) {
  .cs-section { padding: 2rem 1rem; }
  .cs-hero { padding: 6rem 1rem 2rem; }
  .cs-phones-wrap { gap: 0.5rem; }
  .cs-phone-screen { width: 90px; height: 180px; }
}