/* ===================== TOKENS ===================== */
:root{
  --white: #FFFFFF;
  --off: #F7F6F4;
  --black: #0B0B0A;
  --black-soft: #17130F;
  --rust: #D97757;
  --rust-deep: #B35A3E;
  --rust-light: #E2937A;

  --serif: "Fraunces", Georgia, serif;
  --script: "Caveat", cursive;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --deal: cubic-bezier(.16,.84,.32,1.1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--white); color:var(--black); font-family:var(--sans); overflow-x:hidden; }
::selection{ background:var(--rust); color:var(--white); }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; font-family:var(--serif); }
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-dot{
  position:fixed; width:9px; height:9px; border-radius:50%; background:var(--rust);
  pointer-events:none; z-index:998; transform:translate(-50%,-50%); transition:transform .15s var(--ease);
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }

/* ===================== SHARED ===================== */
.eyebrow{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.06em; text-transform:lowercase; color:var(--rust-deep); margin-bottom:18px; font-style:italic;
}
.eyebrow--dark{ color:var(--rust-deep); }
.eyebrow--light{ color:var(--rust-light); }
.eyebrow .rule{ width:28px; height:1px; background:currentColor; opacity:.6; }
.spark{ color:var(--rust-light); }

.section-title{
  font-family:var(--serif); font-weight:700; line-height:1.05;
  font-size:clamp(2.2rem, 5vw, 3.6rem); letter-spacing:-0.01em; color:var(--black);
}
.section-title em{ color:var(--rust); font-weight:600; }
.section-head{ max-width:900px; margin:0 auto 56px; padding:0 32px; text-align:left; position:relative; z-index:1; }

.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600;
  font-size:.95rem; padding:15px 26px; border-radius:100px; border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .3s var(--ease); display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:hover .arrow-down{ transform:translateY(3px); }
.btn-solid{ background:var(--rust); color:var(--white); }
.btn-solid:hover{ background:var(--rust-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(217,119,87,.35); }
.btn-outline{ border-color:rgba(11,11,10,.25); color:var(--black); }
.nav.scrolled .btn-outline{ border-color:rgba(255,255,255,.35); color:var(--white); }
.btn-outline:hover{ background:var(--black); color:var(--white); border-color:var(--black); }
.btn-ghost{ color:var(--white); border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }
.btn-large{ padding:20px 34px; font-size:1.05rem; }

.reveal{ opacity:0; transform:translateY(42px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===================== SECTION DIVIDERS ===================== */
.divider{ width:100%; overflow:hidden; line-height:0; }
.divider svg{ width:100%; height:40px; display:block; }
.divider--2{ background:var(--off); }
.divider--4{ background:var(--black); }

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200; padding:18px 32px; display:flex; justify-content:center;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent; color:var(--black);
}
.nav.scrolled{ background:rgba(11,11,10,.85); backdrop-filter:blur(14px); padding:12px 32px; border-color:rgba(255,255,255,.08); color:var(--white); }
.nav-inner{ width:100%; max-width:1280px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; }
.logo-img{ height:32px; width:auto; }
.nav-links{ display:flex; gap:34px; font-size:.92rem; }
.nav-links a{ position:relative; opacity:.8; transition:opacity .25s; }
.nav-links a:hover{ opacity:1; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--rust); transition:width .3s var(--ease); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding:11px 20px; font-size:.88rem; }
.nav-burger{ display:none; }
@media (max-width: 880px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
  .nav-burger span{ width:22px; height:2px; background:currentColor; display:block; }
}

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; background:var(--black); color:var(--white);
  align-items:center; justify-content:center; overflow:hidden; padding:130px 24px 80px;
}
.stars{
  position:absolute; inset:-10% -10%; z-index:0; overflow:hidden;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 90px 120px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.8px 1.8px at 160px 60px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 220px 180px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 300px 40px, rgba(255,255,255,.75), transparent);
  background-repeat:repeat; background-size:340px 220px;
  animation:star-travel-1 60s linear infinite;
}
.stars::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 60px 90px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 140px 30px, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 260px 140px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 40px 190px, rgba(255,255,255,.55), transparent);
  background-repeat:repeat; background-size:260px 300px;
  animation:star-travel-2 90s linear infinite;
}
@keyframes star-travel-1{ from{ background-position:0 0; } to{ background-position:-2000px 900px; } }
@keyframes star-travel-2{ from{ background-position:0 0; } to{ background-position:1400px -1100px; } }
.shooting-star{ position:absolute; width:120px; height:1px; background:linear-gradient(90deg, var(--white), transparent); opacity:0; }

.hero-inner{ position:relative; z-index:2; text-align:center; max-width:760px; display:flex; flex-direction:column; align-items:center; width:100%; }

.eyebrow{ justify-content:center; }
.hero-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem, 6.5vw, 4.6rem); line-height:1.04; letter-spacing:-.01em;
  margin-bottom:24px; margin-top:14px;
}
.hero-title em{ color:var(--white); font-weight:400; }
.hero-title strong{ color:var(--rust); }
.hero-sub{ font-size:1.06rem; line-height:1.6; color:rgba(255,255,255,.68); max-width:580px; margin:0 auto 34px; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ===================== MOODBOARD HERO (shatter to reveal logo) ===================== */
.moodboard{
  position:relative; height:100vh; width:100%; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.moodboard-stage{
  position:relative; width:min(100vw, calc(100vh * 1024 / 648)); height:min(100vh, calc(100vw * 648 / 1024));
  cursor:pointer;
}
.moodboard-dots{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(11,11,10,.55) 3px, transparent 3px);
  background-size:34px 34px; background-position:8px 8px;
}
.moodboard-logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34%; z-index:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));
}
.moodboard-shatter{ position:absolute; inset:0; z-index:2; }
.shard{
  position:absolute; background-image:url("assets/moodboard.jpg"); background-repeat:no-repeat;
  transition:transform .7s var(--deal), opacity .7s var(--ease);
  will-change:transform, opacity;
}
.moodboard-stage:hover .shard, .moodboard-stage.open .shard{
  transform:translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(1.06);
  opacity:0; transition-delay:var(--delay);
}
.moodboard-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5;
  font-family:var(--serif); font-style:italic; font-size:.9rem; color:rgba(11,11,10,.55);
  pointer-events:none;
}

@media (max-width: 720px){
  .moodboard-logo{ width:44%; }
}

/* ===================== MARQUEE ===================== */
.marquee{ background:var(--rust); padding:16px 0; overflow:hidden; }
.marquee-track{
  display:flex; align-items:center; gap:26px; white-space:nowrap; width:max-content;
  font-family:var(--serif); font-size:clamp(1.2rem, 2.8vw, 2rem); font-weight:700; color:var(--white);
  animation:scroll-x 26s linear infinite;
}
.marquee-track .star{
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.65); font-size:.85rem; transform:translateY(3px); width:14px;
}
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===================== SERVICES: SCATTERED PINBOARD ===================== */
.services{
  background:var(--off); padding:120px 24px 100px; position:relative;
  background-image:radial-gradient(rgba(11,11,10,.08) 1px, transparent 1px);
  background-size:22px 22px;
}
.halftone-bg{
  position:absolute; top:6%; left:0; width:520px; height:520px; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(217,119,87,.6) 2.6px, transparent 2.6px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(circle at center, black 0%, black 35%, transparent 72%);
  mask-image:radial-gradient(circle at center, black 0%, black 35%, transparent 72%);
  opacity:.65; will-change:transform;
}
.notes-board{ max-width:1200px; margin:0 auto; position:relative; height:820px; z-index:1; overflow:visible; }
.note{
  position:absolute; top:var(--top); left:var(--left); width:250px;
  background:var(--white); border-radius:4px; padding:26px 20px 18px;
  box-shadow:0 16px 30px rgba(11,11,10,.12);
  border:1px solid rgba(11,11,10,.06);
  opacity:0; transform:translateY(130px) scale(.92) rotate(var(--rot));
  transition:opacity .8s var(--deal), transform .8s var(--deal);
  will-change:transform, opacity;
}
.note.is-visible{ opacity:1; transform:translateY(0) scale(1) rotate(var(--rot)); }
.note:hover{ transform:rotate(0deg) translateY(-6px) scale(1.02) !important; box-shadow:0 26px 46px rgba(11,11,10,.18); z-index:5; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.note--rust{ background:var(--rust); color:var(--white); border-color:transparent; }
.note--dark{ background:var(--black); color:var(--white); border-color:transparent; }
.pin{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%; background:var(--rust); box-shadow:0 2px 5px rgba(0,0,0,.3); z-index:2; }
.note--rust .pin, .note--dark .pin{ background:var(--white); }
.note-no{ font-family:var(--mono); font-size:.7rem; opacity:.6; display:block; margin-bottom:12px; }
.note h3{ font-family:var(--serif); font-size:1.25rem; font-weight:700; margin-bottom:8px; }
.note p{ font-size:.88rem; line-height:1.5; opacity:.78; margin-bottom:14px; }
.note-tag{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; }

.board-arrow{ position:absolute; width:130px; height:auto; opacity:.6; pointer-events:none; z-index:1; }
.board-arrow--1{ top:8%; left:22%; }
.board-arrow--2{ top:32%; left:44%; }
.board-arrow--3{ top:60%; left:36%; }

@media (max-width: 1024px){
  .notes-board{ height:auto; display:flex; flex-direction:column; gap:26px; position:relative; }
  .note{ position:relative; top:auto !important; left:auto !important; width:100%; max-width:340px; margin:0 auto; }
  .board-arrow{ display:none; }
}

/* ===================== ABOUT ===================== */
.about{ background:var(--white); padding:120px 24px; }
.about .eyebrow, .about .section-title{ max-width:900px; margin-left:auto; margin-right:auto; padding:0 8px; }
.about-copy{ font-size:1.05rem; line-height:1.7; opacity:.75; max-width:640px; margin:20px auto 64px; padding:0 8px; }
.scrapbook-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; padding:0 24px; }
.polaroid{ background:var(--off); padding:16px 16px 44px; box-shadow:0 20px 40px rgba(11,11,10,.12); transform:rotate(-3deg); position:relative; }
.polaroid-photo{
  aspect-ratio:4/5; background:linear-gradient(155deg, #2a2420, var(--black)); overflow:hidden;
}
.polaroid-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.polaroid-caption{ text-align:center; font-family:var(--serif); font-style:italic; margin-top:14px; opacity:.7; }
.sticky-note{
  position:absolute; bottom:-26px; right:-24px; background:var(--rust); color:var(--white); padding:14px 18px;
  font-family:var(--serif); font-weight:600; font-size:.92rem; line-height:1.3; transform:rotate(4deg); box-shadow:0 10px 20px rgba(11,11,10,.2);
}
.belief-stack{ display:flex; flex-direction:column; gap:22px; }
.belief-card{ background:var(--off); border-radius:8px; padding:30px 32px; box-shadow:0 10px 24px rgba(11,11,10,.06); }
.belief-card--rust{ background:var(--rust); color:var(--white); }
.belief-tab{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; opacity:.6; display:block; margin-bottom:10px; }
.belief-card h3{ font-family:var(--serif); font-size:1.4rem; font-weight:700; margin-bottom:8px; }
.belief-card p{ font-size:.92rem; line-height:1.55; opacity:.8; }

@media (max-width: 880px){ .scrapbook-grid{ grid-template-columns:1fr; } .polaroid{ max-width:280px; margin:0 auto; } }

/* ===================== WORK ===================== */
.work{ background:var(--white); padding:60px 24px 140px; }
.case-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:600; border-bottom:1px solid var(--black); padding-bottom:2px; }
.work-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.work-card-visual{
  aspect-ratio:3/4; border-radius:12px; position:relative; overflow:hidden; margin-bottom:16px;
  transform:rotate(var(--tilt,0deg)); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 20px 40px rgba(11,11,10,.14); background:var(--off);
}
.work-card-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-card:nth-child(1) .work-card-visual{ --tilt:-3deg; }
.work-card:nth-child(2) .work-card-visual{ --tilt:2deg; }
.work-card:nth-child(3) .work-card-visual{ --tilt:-2deg; }
.work-card:nth-child(4) .work-card-visual{ --tilt:3deg; }
.work-card:hover .work-card-visual{ transform:rotate(0deg) translateY(-10px); box-shadow:0 30px 56px rgba(11,11,10,.2); }
.work-card-info h3{ font-family:var(--serif); font-size:1.1rem; font-weight:700; }
.work-card-info p{ font-size:.85rem; opacity:.55; margin-top:2px; }

@media (max-width: 980px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .work-grid{ grid-template-columns:1fr; } }

/* ===================== PROCESS ===================== */
.process{ background:var(--black); color:var(--white); padding:140px 24px; }
.process .eyebrow{ justify-content:flex-start; }
.process .section-title{ color:var(--white); }
.process .section-title em{ color:var(--rust-light); }
.process-grid{ max-width:1150px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; }
.process-badge{
  display:flex; align-items:center; justify-content:center; gap:6px; width:56px; height:56px; border-radius:50%;
  background:var(--white); color:var(--black); font-family:var(--mono); font-size:.85rem; font-weight:600; margin-bottom:20px;
  position:relative;
}
.process-icon{ position:absolute; bottom:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--rust); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-style:normal; }
.process-step h3{ font-family:var(--serif); font-size:1.3rem; font-weight:700; margin-bottom:8px; }
.process-step p{ font-size:.88rem; line-height:1.55; opacity:.65; }

@media (max-width: 980px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns:1fr; } }

/* ===================== CONTACT / FOOTER ===================== */
.contact{
  position:relative; background:var(--black); color:var(--white); padding:160px 24px 40px; text-align:left;
  overflow:hidden;
}
.contact .eyebrow{ position:relative; z-index:2; justify-content:flex-start; max-width:1280px; margin-left:auto; margin-right:auto; }
.contact-title{
  position:relative; z-index:2; font-family:var(--serif); font-weight:700; max-width:1280px; margin-left:auto; margin-right:auto;
  font-size:clamp(2.4rem, 7vw, 5rem); line-height:1.05; margin-bottom:44px;
}
.contact-title em{ font-weight:400; color:var(--rust-light); }
.contact .btn-large{ position:relative; z-index:2; max-width:1280px; margin:0 auto; display:flex; width:fit-content; }
.footer-bottom{
  position:relative; z-index:2; max-width:1280px; margin:110px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  font-size:.82rem; color:rgba(255,255,255,.55);
}
.footer-logo-img{ height:40px; width:auto; }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ opacity:.7; transition:opacity .2s; }
.footer-links a:hover{ opacity:1; }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:border-color .3s, color .3s, transform .3s, background .3s;
}
.footer-social a:hover{ border-color:var(--rust-light); background:var(--rust); transform:translateY(-3px); }

@media (max-width: 720px){ .services, .work, .about{ padding-left:20px; padding-right:20px; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }