:root {
  /* Monochrome slate palette */
  --bg-900:#0b0e12; --bg-850:#0f1319; --bg-800:#12161d; --bg-750:#171c24; --line-700:#1b2029;
  --ink-100:#e6e7ea; --ink-80:#cfd2d9; --ink-60:rgba(230,231,234,0.72); --ink-40:rgba(230,231,234,0.40);

  /* Accent brand */
  --accent:#34A1FF;               /* requested */
  --accent-ink:#0b0e12;           /* text on accent */
  --accent-ghost:rgba(52,161,255,0.12);
}

html,body{height:100%}
body{background:var(--bg-900);color:var(--ink-100);font-family:'Fraunces',ui-serif,Georgia,serif}

.text-ink-100{color:var(--ink-100)!important}.text-ink-60{color:var(--ink-60)!important}

/* NAV */
.navbar{backdrop-filter:saturate(1.2) blur(8px);background:rgba(18,22,29,.72)!important;border-bottom:1px solid var(--line-700);transition:transform .35s ease}
.navbar.nav-hide{transform:translateY(-100%)}
.navbar .nav-link{color:var(--ink-80)}.navbar .nav-link:hover{color:var(--ink-100)}

/* PAGE WIPE */
.page-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.wipe-layer{position:absolute;inset:-12%;transform:scaleX(1) skewX(-10deg);transform-origin:left center}
.wipe-primary{background:var(--bg-750)}.wipe-surface{background:var(--bg-900)}
.wipe-brand{position:absolute;left:24px;bottom:18px;font-weight:800;color:var(--ink-100);letter-spacing:.04em;font-size:14px;opacity:.9}

/* HERO */
.hero-viewport{min-height:100svh;display:flex;flex-direction:column}
.hero-content{flex:1;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(11,14,18,.30),rgba(11,14,18,.65)),url("../images/bg-hero.jpg");background-size:cover;background-position:50% 50%;filter:saturate(.9) contrast(.95);will-change:transform,background-position}
.hero-title{font-size:clamp(2.3rem,5vw + 1rem,4.3rem);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.hero-title .accent{color:var(--ink-100);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.1em;text-underline-offset:.18em}

/* Blobs (monochrome texture) */
.blob{position:absolute;border-radius:50%;filter:blur(10px);opacity:.25;mix-blend-mode:screen}
.blob-1{width:44vmax;height:44vmax;left:-12vmax;top:-10vmax;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%)}
.blob-2{width:44vmax;height:44vmax;right:-14vmax;top:-8vmax;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.06),rgba(255,255,255,0) 65%)}

/* GSAP BANNER */
.gsap-banner{background:rgba(23,28,36,.85);border-top:1px solid var(--line-700);border-bottom:1px solid var(--line-700);padding-block:10px}
.ticker{display:inline-flex;gap:clamp(28px,5vw,64px);white-space:nowrap;font-weight:700;letter-spacing:.01em;color:var(--ink-80);align-items:center;user-select:none;will-change:transform}
.ticker .bi{opacity:1;color:var(--accent)} /* accent color on icons */

/* ABOUT */
.about-section{background:var(--bg-900);color:var(--ink-100);position:relative}
.about-top-edge{position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(to bottom,rgba(0,0,0,.25),transparent)}
.py-section{padding-block:clamp(56px,8vw,112px)}
.about-copy{max-width:60ch}

/* WORK */
#work{background:var(--bg-900)}
.work-card{height:100%;border:1px solid var(--line-700);border-radius:18px;overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s,background-color .35s;background:var(--bg-800);color:var(--ink-100)}
.work-card:hover{transform:translateY(-4px);box-shadow:0 20px 36px rgba(0,0,0,.35);border-color:#242b36;background-color:#141922}
.thumb{border-radius:14px;overflow:hidden;background:linear-gradient(to bottom right,rgba(255,255,255,.03),rgba(255,255,255,0));position:relative}
.thumb>.parallax-img{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));mix-blend-mode:screen}
.work-tag{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;color:var(--ink-80);background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px;border:1px solid var(--line-700)}

/* CONNECT & FOOTER */
.connect-cta{background:#202530;color:var(--ink-80)}
.connect-copy{color:var(--ink-80);max-width:60ch}
.site-footer{background:#1a1f28;border-top:1px solid var(--line-700);color:var(--ink-60)}

/* Buttons with ACCENT */
.btn{transition:background-color .25s,color .25s,border-color .25s,box-shadow .3s,transform .2s;border-radius:12px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 0 rgba(255,255,255,.06) inset}
.btn-primary:hover{background:#1d8ee9;border-color:#1d8ee9;color:var(--accent-ink);transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.25),0 2px 0 rgba(255,255,255,.1) inset}
.btn-outline-light{color:var(--ink-100);border-color:var(--ink-40)}
.btn-outline-light:hover{background:var(--accent-ghost);border-color:rgba(255,255,255,.5);transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.25)}

.section-label{font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-60)}
.strong-lock{font-size:1.15em;vertical-align:-.1em;text-shadow:0 0 0 currentColor,.03em 0 currentColor,-.03em 0 currentColor,0 .03em currentColor,0 -.03em currentColor}



/* Modal Stylesheet begins */

/* ====== Case Study Modal: Dark Surface + High Contrast ====== */
.case-modal-content {
  background: var(--bg-900);
  color: var(--ink-100);
  border: 1px solid var(--line-700);
  /* match card hover vibe but subtler */
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* Backdrop: increase focus, keep premium feel */
.modal-backdrop.show {
  opacity: 0.88;
  backdrop-filter: blur(3px) saturate(1.05);
}

/* Header chip + meta aligned with brand accent + slate neutrals */
.case-modal-content .badge {
  background: rgba(52,161,255,0.14); /* --accent ghost, slightly stronger */
  color: var(--ink-100);
  border: 1px solid var(--line-700);
}

.case-modal-content .text-body-secondary {
  color: var(--ink-80) !important; /* for labels/meta only */
}

/* Title + section labels */
.case-modal-content #caseStudyTitle {
  color: var(--ink-100);
  letter-spacing: -0.01em;
  font-weight: 800;
}
.case-modal-content .cs-section h3 {
  color: var(--ink-80);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}

/* Long-form readability */
.case-modal-content .lead-sm,
.case-modal-content .cs-section p,
.case-modal-content .cs-list li {
  color: var(--ink-100);
  line-height: 1.65;
}

/* List treatment consistent with site cards */
.case-modal-content .cs-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.case-modal-content .cs-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
}
.case-modal-content .cs-list li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: .35rem;
  width: .5rem; height: .5rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52,161,255,0.12);
}

/* KPI emphasis using accent ratio (not neon) */
.case-modal-content .cs-kpi {
  color: var(--ink-100);
  display: flex; align-items: baseline; gap: .5rem;
}
.case-modal-content .cs-kpi-val {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.35rem;
}

/* Reading surface “card” on the left column */
.cs-reading-surface {
  background: var(--bg-800);
  border: 1px solid var(--line-700);
  border-radius: 18px;
  padding: clamp(20px, 3.5vw, 32px);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* Image area: keep brand texture + edge framing */
.cs-figure {}

	/* Case study section headings */
.case-modal-content .cs-heading {
  color: var(--accent);
}

/* Optional: subtle divider under headings */
.case-modal-content .cs-section {
  border-top: 1px solid var(--line-700);
  padding-top: 1rem;
}

.case-modal-content .cs-section:first-of-type {
  border-top: none;
  padding-top: 0;
}