/* ═══════════════════════════════════════════════════
   LAYER NINE — CREATIVE SYSTEMS FOR THE POST CAMERA ERA
   Global Stylesheet
   Palette: #35858E teal | #5B4BC4 purple | #09080F void
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Mono:wght@300;400&display=swap');

:root {
  --void:       #09080F;
  --surf:       #0F0E18;
  --surf2:      #141220;
  --panel:      #1A1830;
  --teal:       #35858E;
  --teal-lt:    #4AAAB4;
  --teal-dk:    #1D5459;
  --teal-glow:  rgba(53,133,142,.16);
  --purple:     #5B4BC4;
  --purple-lt:  #7B6DD6;
  --purple-dk:  #3D3190;
  --purple-glow:rgba(91,75,196,.16);
  --white:      #E8E5F0;
  --grey:       #6A6880;
  --grey-lt:    #9896B0;
  --grey-dk:    #252338;
  --border:     rgba(232,229,240,.06);
  --border-t:   rgba(53,133,142,.2);
  --border-p:   rgba(91,75,196,.22);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--void);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ── */
#cursor-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--teal); position:fixed;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:width .18s,height .18s,background .2s;
}
#cursor-ring {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(53,133,142,.32);
  position:fixed; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .22s,height .22s,border-color .22s;
}
body.hov #cursor-dot { width:18px; height:18px; background:var(--purple-lt); }
body.hov #cursor-ring { width:54px; height:54px; border-color:rgba(91,75,196,.38); }

/* ── GRAIN ── */
body::before {
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  opacity:.4;
}

/* ═══ NAV ═══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:72px;
  display:grid;
  grid-template-columns:60px 1fr auto;
  align-items:center;
  background:rgba(9,8,15,.84);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
nav.scrolled { background:rgba(9,8,15,.96); }

.nav-social {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; height:100%;
  border-right:1px solid var(--border);
}
.nav-social a {
  font-family:'DM Mono'; font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--grey); text-decoration:none; transition:color .2s;
}
.nav-social a:hover { color:var(--teal); }

.nav-center {
  display:flex; align-items:center;
  justify-content:space-between; padding:0 36px;
}
.nav-logo {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.nav-logo-frames {
  display:flex; align-items:center; gap:2px;
}
.nav-logo-frames span {
  display:block;
  width:2px; height:18px;
  background:var(--white);
  opacity:.2;
  transition:opacity .3s;
}
.nav-logo-frames span:nth-child(2){opacity:.3;width:3px;}
.nav-logo-frames span:nth-child(3){opacity:.45;width:4px;height:20px;}
.nav-logo-frames span:nth-child(4){opacity:.65;width:6px;height:22px;}
.nav-logo-frames span:nth-child(5){opacity:.85;width:9px;height:24px;background:var(--white);}
.nav-logo:hover .nav-logo-frames span { opacity:1; }

.nav-logo-text {
  font-family:'Raleway'; font-weight:200; font-size:13px;
  letter-spacing:6px; text-transform:uppercase; color:var(--white);
}
.nav-logo-text em { color:var(--teal); font-style:normal; font-weight:300; }

.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-family:'Raleway'; font-weight:300; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--grey-lt); text-decoration:none;
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--teal); transition:width .25s;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* Dropdown */
.nav-item { position:relative; }
.nav-dropdown {
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  background:var(--surf2); border:1px solid var(--border);
  min-width:220px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  transform:translateX(-50%) translateY(-8px);
  z-index:100;
}
.nav-item:hover .nav-dropdown {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display:block; padding:12px 20px;
  font-family:'Raleway'; font-weight:300; font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--grey-lt); text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:color .2s, background .2s;
}
.nav-dropdown a:last-child { border-bottom:none; }
.nav-dropdown a:hover { color:var(--teal); background:rgba(53,133,142,.06); }
.nav-dropdown a::after { display:none; }

.nav-cta-wrap { padding-right:32px; }
.nav-cta {
  font-family:'Raleway'; font-weight:400; font-size:10px;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--void); background:var(--teal);
  padding:11px 26px; text-decoration:none;
  display:inline-block; transition:background .2s;
}
.nav-cta:hover { background:var(--purple-lt); color:var(--void); }

/* ═══ PAGE HERO (inner pages) ═══ */
.page-hero {
  padding-top:72px; min-height:50vh;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding-bottom:80px; padding-left:52px; padding-right:52px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
}
.page-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 80% 60% at 30% 60%,var(--teal-glow) 0%,transparent 70%),
             radial-gradient(ellipse 50% 50% at 80% 30%,var(--purple-glow) 0%,transparent 60%);
}
.page-hero-content { position:relative; z-index:1; }
.page-eyebrow {
  font-family:'DM Mono'; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--teal);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.page-eyebrow::before { content:''; width:24px; height:1px; background:var(--teal); }
.page-title {
  font-family:'Playfair Display'; font-style:italic; font-weight:400;
  font-size:clamp(52px,7vw,96px); line-height:.92; color:var(--white);
  margin-bottom:24px; letter-spacing:-1px;
}
.page-title em { color:var(--teal); font-style:normal; }
.page-sub {
  font-family:'Raleway'; font-weight:300; font-size:15px; line-height:1.9;
  color:var(--grey-lt); max-width:560px;
}

/* ═══ SECTION UTILITIES ═══ */
.section { padding:120px 52px; }
.section-sm { padding:80px 52px; }

.eyebrow {
  font-family:'DM Mono'; font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--teal); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before { content:''; width:20px; height:1px; background:var(--teal); }
.eyebrow.purple { color:var(--purple-lt); }
.eyebrow.purple::before { background:var(--purple-lt); }

.section-title {
  font-family:'Playfair Display'; font-style:italic; font-weight:400;
  font-size:clamp(36px,4.5vw,62px); line-height:1.1; color:var(--white);
  margin-bottom:24px;
}
.section-title em { color:var(--teal); font-style:normal; }
.section-title b { color:var(--purple-lt); font-weight:400; font-style:italic; }

.section-body {
  font-family:'Raleway'; font-weight:300; font-size:14px;
  line-height:2; color:var(--grey-lt);
}

.text-link {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Mono'; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--teal); text-decoration:none;
  border-bottom:1px solid var(--border-t); padding-bottom:8px;
  width:fit-content; transition:color .25s, border-color .25s; margin-top:32px;
}
.text-link:hover { color:var(--purple-lt); border-color:var(--border-p); }
.text-link.purple { color:var(--purple-lt); border-color:var(--border-p); }
.text-link.purple:hover { color:var(--teal); border-color:var(--border-t); }

/* ═══ SPLIT LAYOUT ═══ */
.split { display:grid; grid-template-columns:1fr 1fr; min-height:640px; }
.split.flip { direction:rtl; }
.split.flip > * { direction:ltr; }

.sp-canvas {
  position:relative; overflow:hidden; background:var(--surf);
}
.sp-canvas canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.sp-tag {
  position:absolute; top:28px; left:28px; z-index:2;
  font-family:'DM Mono'; font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:8px;
}
.sp-tag .dot { width:6px; height:6px; background:var(--teal); border-radius:50%; animation:ldot 1.5s infinite; }
.sp-tag.pur { color:var(--purple-lt); }
.sp-tag.pur .dot { background:var(--purple-lt); }
@keyframes ldot { 0%,100%{opacity:1;} 50%{opacity:.15;} }

.sp-text {
  background:var(--surf2); padding:80px 70px;
  display:flex; flex-direction:column; justify-content:center;
}

/* ═══ SERVICE CARDS ═══ */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px; background:var(--border);
}
.card {
  background:var(--surf); padding:40px 32px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .3s; cursor:none;
}
.card:hover { background:var(--panel); }
.card-icon {
  width:44px; height:44px;
  border:1px solid var(--border-t);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-size:18px;
  transition:background .3s;
}
.card:hover .card-icon { background:rgba(53,133,142,.1); }
.card-title {
  font-family:'Playfair Display'; font-size:20px; font-weight:400;
  color:var(--white); line-height:1.2;
}
.card-body {
  font-family:'Raleway'; font-weight:300; font-size:13px;
  line-height:1.85; color:var(--grey-lt);
}

/* ═══ NUMBERS ROW ═══ */
.numbers-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border-top:1px solid var(--border);
}
.num-cell { background:var(--surf); padding:48px 36px; }
.num-val {
  font-family:'Raleway'; font-weight:100; font-size:64px;
  color:var(--teal); line-height:1; margin-bottom:8px;
  letter-spacing:-2px;
}
.num-label {
  font-family:'DM Mono'; font-size:9px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--grey);
}

/* ═══ TICKER ═══ */
.ticker {
  height:56px; overflow:hidden;
  background:var(--surf);
  border-top:1px solid var(--border-t);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
}
.ticker-track {
  display:flex; white-space:nowrap;
  animation:ticker 34s linear infinite;
}
@keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.t-item {
  font-family:'DM Mono'; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  padding:0 44px; color:var(--grey-lt);
  display:flex; align-items:center; gap:14px;
}
.t-item.hi { color:var(--teal); }
.t-sep { width:4px; height:4px; background:var(--purple); transform:rotate(45deg); opacity:.5; }

/* ═══ CASE / PROJECT CARDS ═══ */
.cases-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.case-card {
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; text-decoration:none; color:inherit; cursor:none;
}
.cc-bg {
  position:absolute; inset:0; z-index:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.case-card:hover .cc-bg { transform:scale(1.06); }
.cc-grad {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(9,8,15,.95) 0%,rgba(9,8,15,.0) 60%);
}
.cc-canvas { position:absolute; inset:0; z-index:2; opacity:.5; }
.cc-info { position:relative; z-index:3; }
.cc-num { font-family:'DM Mono'; font-size:9px; letter-spacing:2px; color:var(--teal); margin-bottom:8px; }
.cc-name-wrap { overflow:hidden; position:relative; margin-bottom:8px; }
.cc-name, .cc-name2 {
  font-family:'Playfair Display'; font-weight:400; font-style:italic;
  font-size:clamp(20px,2.4vw,32px); display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cc-name { color:var(--white); }
.cc-name2 { position:absolute; top:100%; left:0; color:var(--teal); }
.case-card:hover .cc-name { transform:translateY(-100%); }
.case-card:hover .cc-name2 { transform:translateY(-100%); }
.cc-meta { display:flex; justify-content:space-between; }
.cc-type { font-family:'Raleway'; font-weight:300; font-size:11px; color:var(--grey); }
.cc-award { font-family:'DM Mono'; font-size:9px; letter-spacing:1.5px; color:var(--purple-lt); }

/* ═══ TESTIMONIALS ═══ */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); }
.t-card { background:var(--surf); padding:50px; transition:background .3s; }
.t-card:hover { background:var(--surf2); }
.t-av {
  width:48px; height:48px; border-radius:50%;
  background:var(--purple-dk); border:1px solid var(--border-p);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono'; font-size:13px; color:var(--purple-lt);
  margin-bottom:20px;
}
.t-q {
  font-family:'Playfair Display'; font-size:clamp(15px,1.8vw,20px);
  font-style:italic; font-weight:400; line-height:1.7;
  color:var(--white); margin-bottom:24px;
}
.t-name { font-family:'Raleway'; font-weight:400; font-size:12px; letter-spacing:1px; color:var(--white); }
.t-role { font-family:'DM Mono'; font-size:9px; color:var(--teal); margin-top:4px; }

/* ═══ CTA SECTION ═══ */
.cta-section {
  position:relative; overflow:hidden; min-height:90vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; border-top:1px solid var(--border);
}
.cta-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cta-vig {
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 20%,rgba(9,8,15,.8) 100%);
}
.cta-content { position:relative; z-index:2; padding:60px 52px; }
.cta-eyebrow {
  font-family:'DM Mono'; font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--teal); margin-bottom:28px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.cta-eyebrow::before,.cta-eyebrow::after { content:''; width:36px; height:1px; background:var(--teal); }
.cta-h {
  font-family:'Playfair Display'; font-style:italic; font-weight:400;
  font-size:clamp(60px,10vw,140px); line-height:.88; color:var(--white); margin-bottom:28px;
}
.cta-h span { color:var(--teal); }
.cta-sub {
  font-family:'Raleway'; font-weight:300; font-size:15px; line-height:1.85;
  color:var(--grey-lt); max-width:460px; margin:0 auto 40px;
}
.cta-btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:'DM Mono'; font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--void); background:var(--teal);
  padding:15px 44px; text-decoration:none; transition:background .2s;
}
.cta-btn:hover { background:var(--purple-lt); }

/* ═══ FOOTER ═══ */
footer {
  padding:48px 52px 28px;
  border-top:1px solid var(--border);
}
.footer-top {
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:48px;
}
.footer-brand {}
.footer-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:14px;
}
.footer-logo-mark {
  display:flex; align-items:center; gap:2px;
}
.footer-logo-mark span {
  display:block; background:var(--white); opacity:.25;
  transition:opacity .3s;
}
.footer-logo-mark span:nth-child(1){width:2px;height:14px;}
.footer-logo-mark span:nth-child(2){width:2px;height:14px;opacity:.35;}
.footer-logo-mark span:nth-child(3){width:3px;height:16px;opacity:.5;}
.footer-logo-mark span:nth-child(4){width:5px;height:18px;opacity:.7;}
.footer-logo-mark span:nth-child(5){width:7px;height:20px;opacity:.9;background:var(--white);}
.footer-logo-text {
  font-family:'Raleway'; font-weight:200; font-size:12px;
  letter-spacing:5px; text-transform:uppercase; color:var(--white);
}
.footer-logo-text em { color:var(--teal); font-style:normal; font-weight:300; }
.footer-tagline {
  font-family:'Raleway'; font-weight:300; font-size:12px; line-height:1.8;
  color:var(--grey); max-width:220px; margin-bottom:20px;
}
.footer-socials { display:flex; gap:14px; }
.footer-socials a {
  font-family:'DM Mono'; font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--grey); text-decoration:none; transition:color .2s;
}
.footer-socials a:hover { color:var(--teal); }

.footer-col h4 {
  font-family:'DM Mono'; font-size:9px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--teal); margin-bottom:20px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a {
  font-family:'Raleway'; font-weight:300; font-size:12px; letter-spacing:1px;
  color:var(--grey-lt); text-decoration:none; transition:color .2s;
}
.footer-col ul a:hover { color:var(--white); }

.footer-bottom {
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-copy {
  font-family:'DM Mono'; font-size:9px; letter-spacing:1.5px; color:var(--grey-dk);
}
.footer-domain {
  font-family:'DM Mono'; font-size:9px; letter-spacing:1.5px; color:var(--teal); opacity:.6;
}

/* ═══ REVEAL ANIMATIONS ═══ */
[data-r] {
  opacity:0; transform:translateY(36px);
  transition:opacity .95s ease, transform .95s cubic-bezier(.16,1,.3,1);
}
[data-r].on { opacity:1; transform:translateY(0); }
[data-r][data-d="1"] { transition-delay:.12s; }
[data-r][data-d="2"] { transition-delay:.24s; }
[data-r][data-d="3"] { transition-delay:.36s; }
[data-r][data-d="4"] { transition-delay:.48s; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .numbers-row { grid-template-columns:1fr 1fr; }
}
@media(max-width:960px) {
  nav { grid-template-columns:1fr auto; }
  .nav-social { display:none; }
  .nav-center { padding:0 20px; }
  .nav-links { display:none; }
  .nav-cta-wrap { padding-right:20px; }
  .split, .split.flip { grid-template-columns:1fr; direction:ltr; }
  .sp-canvas { min-height:320px; }
  .sp-text { padding:52px 24px; }
  .section { padding:80px 20px; }
  .section-sm { padding:56px 20px; }
  .page-hero { padding:120px 20px 60px; }
  .cases-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:8px; }
  .cta-content { padding:60px 20px; }
  footer { padding:40px 20px 20px; }
}