/* ============ SORTIKA CASE STUDY — "blue cinema" theme ============
   Portfolio identity: near-black / warm off-white / cobalt.
   Sortika's own mood: cinematic darks, warm paper reading bands,
   deep-blue moments. No global resets. */

:root{
  --black:#05080f;
  --navy:#0a1220;
  --ink-d:#f5f8fd;
  --muted-d:rgba(245,248,253,.64);
  --faint-d:rgba(245,248,253,.38);
  --line-d:rgba(245,248,253,.1);
  --paper:#faf8f3;
  --ink:#101725;
  --muted:rgba(16,23,37,.66);
  --faint:rgba(16,23,37,.42);
  --line:rgba(16,23,37,.13);
  --blue:#4d8dff;
  --blue-deep:#2f6bf0;
  --cobalt:#1a3fa0;
  --radius:20px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--ink-d);
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.07;
  background-image:var(--grain);
}

::selection{ background:var(--blue-deep); color:#fff; }

.wrap{ width:min(1200px,92vw); margin:0 auto; }
.wrap-narrow{ width:min(780px,92vw); margin:0 auto; }

.progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:1500;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue)); }

/* ---- nav (matches portfolio) ---- */
.nav{ position:fixed; top:16px; left:0; right:0; z-index:1000; display:flex; justify-content:center; pointer-events:none; }
.nav-pill{ pointer-events:auto; display:flex; align-items:center; gap:4px; padding:8px 10px 8px 20px;
  background:rgba(6,9,15,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-d); border-radius:999px; box-shadow:0 18px 44px -18px rgba(0,0,0,.55); }
.nav-brand{ font-family:"Fraunces",serif; font-style:italic; font-weight:600; font-size:18px; color:#f4f1e8;
  text-decoration:none; padding:6px 12px 6px 2px; margin-right:10px; }
.nav-brand span{ color:#7ea2ff; font-style:normal; }
.nav-item{ font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.06em; font-weight:500; color:rgba(244,241,232,.6); text-decoration:none; padding:9px 17px; border-radius:999px; }
.nav-item:hover{ color:#fff; background:rgba(250,248,243,.08); }
.nav-item.active{ background:var(--blue-deep); color:#fff; }

/* ---- hero: dark cinematic ---- */
.cs-hero{
  padding:150px 0 64px; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 12% -4%, rgba(47,107,240,.22), transparent 60%),
    radial-gradient(760px 520px at 88% 8%, rgba(77,141,255,.10), transparent 60%),
    var(--black);
}
.cs-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(245,248,253,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,248,253,.045) 1px, transparent 1px);
  background-size:92px 92px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%);
}
.back-link{ display:inline-block; font-size:13.5px; font-weight:500; color:var(--muted-d); text-decoration:none; margin-bottom:34px; position:relative; }
.back-link:hover{ color:#fff; }
.kicker{ font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); font-weight:500; }

.headline-marquee{ overflow:hidden; margin:26px 0 8px; position:relative; }
.headline-track{ display:block; }
.headline-track h1{
  font-size:clamp(2.9rem,7.5vw,5.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; color:#fff; margin:0;
}
.headline-track h1 i{ font-style:normal; color:var(--blue); }
.headline-track h1:last-child{ display:none; }

.cs-meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:30px 0 26px; position:relative; }
.cs-meta-row span{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-d);
  border:1px solid var(--line-d); border-radius:999px; padding:8px 16px; background:rgba(255,255,255,.03); }
.cs-meta-row i{ display:none; }

.cs-lede{ font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.55; color:var(--muted-d); max-width:44rem; margin:0 0 54px; position:relative; }
.cs-lede strong{ color:#fff; font-weight:600; }

.details-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; }
.details-cell{ background:rgba(255,255,255,.035); border:1px solid var(--line-d); border-radius:var(--radius); padding:22px; }
.details-label{ font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.details-cell p, .details-cell ul{ font-size:14px; line-height:1.6; color:var(--muted-d); margin:0; }
.details-cell ul{ list-style:none; padding:0; }
.details-cell li{ margin-bottom:6px; }
.details-cell strong{ color:#fff; }

.cs-hero-visual{ width:min(1240px,94vw); margin:64px auto 0; position:relative; }
.hero-shot{ width:100%; height:auto; display:block; border-radius:24px; border:1px solid var(--line-d);
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 120px rgba(47,107,240,.12); }

/* hero split: small visual left, problem/solution/result right */
.hero-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,72px); align-items:center; margin-top:60px; }
.hero-split-visual{ display:flex; justify-content:center; position:relative; }
.hero-split-visual::before{ content:""; position:absolute; width:120%; aspect-ratio:1; top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(47,107,240,.20), transparent); filter:blur(40px); pointer-events:none; }
.hero-split-visual .hero-shot{ width:min(400px,80%); position:relative; }
.hero-split-psr{ display:flex; flex-direction:column; gap:14px; }
.hero-split-psr .psr-card{ padding:22px 24px; }
.hero-split-psr .psr-label{ margin-bottom:10px; }
.hero-split-psr .psr-card p{ font-size:.95rem; }

/* slim figure (e.g. prioritization matrix) */
.figure.slim{ width:min(860px,94vw); }

/* ---- section bands ---- */
main{ padding:0 0 20px; }
.cs-section{ padding:56px 0; border-top:1px solid var(--line-d); }
.cs-section:first-child{ border-top:none; }

/* full-bleed light + blue bands (sections sit inside .wrap-narrow) */
.cs-section.band-light, .cs-section.band-blue{
  width:100vw; margin-left:calc(50% - 50vw);
  padding:76px 0; border-top:none; position:relative;
}
.cs-section.band-light{
  background:var(--paper); color:var(--ink);
}
.cs-section.band-light::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:var(--grain);
}
.cs-section.band-blue{
  background:
    radial-gradient(820px 440px at 18% 10%, rgba(47,107,240,.30), transparent 62%),
    radial-gradient(700px 460px at 85% 95%, rgba(26,63,160,.5), transparent 60%),
    var(--navy);
  color:var(--ink-d);
}
.cs-section.band-blue::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.09; background-image:var(--grain);
}

/* ---- type on bands ---- */
.cs-eyebrow{ font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin-bottom:18px; font-weight:500; position:relative; }
.cs-section h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:#fff; margin:0 0 24px; max-width:20em; position:relative; }
.band-light .cs-eyebrow{ color:var(--cobalt); }
.band-light .cs-section-h2, .band-light h2{ color:var(--ink); }
.band-blue .cs-eyebrow{ color:#9db9ff; }

.cs-prose{ max-width:44rem; position:relative; }
.cs-prose p{ font-size:1.06rem; line-height:1.75; color:var(--muted-d); margin:0 0 1.2em; }
.cs-prose strong{ color:#fff; font-weight:600; }
.band-light .cs-prose p{ color:var(--muted); }
.band-light .cs-prose strong{ color:var(--ink); }
.pull{ font-family:"Fraunces",serif; font-style:italic; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.4; color:#fff;
  border-left:3px solid var(--blue); padding-left:24px; margin:2em 0; }
.band-light .pull{ color:var(--ink); border-left-color:var(--cobalt); }

/* problem / solution / result + impact */
.psr{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:52px; }
.psr-card{ background:linear-gradient(180deg, rgba(77,141,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line-d); border-radius:var(--radius); padding:28px; }
.psr-label{ font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.psr-card p{ font-size:1rem; line-height:1.65; color:var(--muted-d); margin:0; }
.psr-card strong{ color:#fff; }

.impact-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.impact-num{ font-size:clamp(2.6rem,5vw,3.8rem); font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1; }
.impact-num .suffix{ color:var(--blue); }
.impact-label{ font-size:14px; color:var(--faint-d); margin-top:10px; line-height:1.5; }

/* band content stays at reading width; figures break out full-bleed */
.cs-section.band-light > *:not(.figure), .cs-section.band-blue > *:not(.figure){
  width:min(780px,92vw); margin-left:auto; margin-right:auto;
}
/* figures — oversized */
.figure{ width:min(1180px,94vw); margin:52px auto; }
/* in non-band sections (still inside the narrow wrapper), break out symmetrically */
.cs-section:not(.band-light):not(.band-blue) .figure{
  margin-left:50%; transform:translateX(-50%);
}
.figure img{ width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--line-d);
  box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 90px rgba(47,107,240,.10); background:#0b1220; }
.band-light .figure img{ border-color:var(--line); box-shadow:0 40px 90px -30px rgba(16,23,37,.3); background:#fff; }
.figure figcaption{ font-size:13.5px; color:var(--faint-d); margin-top:14px; line-height:1.6; max-width:46rem; }
.band-light .figure figcaption{ color:var(--faint); }

/* method steps */
.method-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; position:relative; }
.method{ background:rgba(255,255,255,.035); border:1px solid var(--line-d); border-radius:var(--radius); padding:24px; }
.band-light .method{ background:#fff; border-color:var(--line); }
.method .c{ font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.band-light .method .c{ color:var(--cobalt); }
.method h4{ font-size:1.02rem; font-weight:700; color:#fff; margin:12px 0 8px; letter-spacing:-.01em; }
.band-light .method h4{ color:var(--ink); }
.method p{ font-size:14px; line-height:1.6; color:var(--muted-d); margin:0; }
.band-light .method p{ color:var(--muted); }

/* goals (blue band) */
.goal-list{ display:grid; gap:14px; margin-top:8px; position:relative; }
.goal{ display:flex; gap:22px; align-items:baseline; background:rgba(255,255,255,.045); border:1px solid rgba(157,185,255,.18);
  border-radius:var(--radius); padding:26px 28px; backdrop-filter:blur(4px); }
.goal .n{ font-family:"Geist Mono",monospace; font-size:13px; color:#9db9ff; flex-shrink:0; }
.goal p{ font-size:1.05rem; line-height:1.6; color:var(--muted-d); margin:0; }
.goal strong{ color:#fff; }

/* insights */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:40px; position:relative; }
.insight{ background:linear-gradient(180deg, rgba(77,141,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--line-d); border-radius:var(--radius); padding:28px; }
.band-light .insight{ background:#fff; border-color:var(--line); box-shadow:0 20px 44px -28px rgba(16,23,37,.22); }
.insight .k{ font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); }
.band-light .insight .k{ color:var(--cobalt); }
.insight p{ font-size:.98rem; line-height:1.7; color:var(--muted-d); margin:14px 0 0; }
.band-light .insight p{ color:var(--muted); }
.insight strong{ color:#fff; }
.band-light .insight strong{ color:var(--ink); }

/* personas */
.personas{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; position:relative; }
.persona{ background:rgba(255,255,255,.035); border:1px solid var(--line-d); border-radius:var(--radius); padding:28px; }
.band-light .persona{ background:#fff; border-color:var(--line); box-shadow:0 20px 44px -28px rgba(16,23,37,.22); }
.persona-avatar{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--blue-deep),var(--blue)); margin-bottom:18px; }
.persona h4{ font-size:1.15rem; font-weight:700; color:#fff; margin:0 0 4px; letter-spacing:-.01em; }
.band-light .persona h4{ color:var(--ink); }
.persona .who{ font-size:13.5px; color:var(--faint-d); margin-bottom:18px; }
.band-light .persona .who{ color:var(--faint); }
.persona .plabel{ font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin:16px 0 8px; }
.band-light .persona .plabel{ color:var(--cobalt); }
.persona p{ font-size:14px; line-height:1.65; color:var(--muted-d); margin:0; }
.band-light .persona p{ color:var(--muted); }

/* solutions — oversized screens */
.solution-band{ padding:76px 0 20px; }
.solution{ display:grid; grid-template-columns:minmax(0,400px) 1fr; gap:clamp(36px,6vw,80px); align-items:center; padding:52px 0; border-top:1px solid var(--line-d); }
.solution:first-of-type{ border-top:none; }
.solution.flip{ grid-template-columns:1fr minmax(0,400px); }
.solution.flip .sol-visual{ order:2; }
.sol-visual{ position:relative; }
.sol-visual::before{ content:""; position:absolute; inset:6% -8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(47,107,240,.24), transparent); filter:blur(34px); }
.sol-visual img{ width:auto; max-width:100%; max-height:620px; height:auto; margin:0 auto; display:block; border-radius:26px; border:1px solid var(--line-d);
  box-shadow:0 50px 110px rgba(0,0,0,.6), 0 0 80px rgba(47,107,240,.12); background:#0b1220; }
.sol-num{ font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); }
.sol-body h3{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.025em; color:#fff; margin:14px 0 16px; line-height:1.15; }
.sol-body p{ font-size:1.02rem; line-height:1.7; color:var(--muted-d); margin:0; }
.sol-body strong{ color:#fff; }

/* detail crops — two large side by side */
.detail-duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:60px 0 20px; }
.detail-duo figure{ margin:0; }
.detail-duo img{ width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--line-d);
  box-shadow:0 40px 90px rgba(0,0,0,.55); background:#0b1220; }
.detail-duo figcaption{ font-size:13.5px; color:var(--faint-d); margin-top:12px; line-height:1.6; }

/* reflections */
.reflections{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; }
.reflection{ background:rgba(255,255,255,.035); border:1px solid var(--line-d); border-radius:var(--radius); padding:28px; }
.band-light .reflection{ background:#fff; border-color:var(--line); box-shadow:0 20px 44px -28px rgba(16,23,37,.22); }
.reflection h4{ font-size:1.05rem; font-weight:700; color:#fff; margin:0 0 12px; line-height:1.4; letter-spacing:-.01em; }
.band-light .reflection h4{ color:var(--ink); }
.reflection p{ font-size:14.5px; line-height:1.7; color:var(--muted-d); margin:0; }
.band-light .reflection p{ color:var(--muted); }

/* next + fin */
.next-block{ background:linear-gradient(135deg, rgba(47,107,240,.18), rgba(77,141,255,.05));
  border:1px solid rgba(77,141,255,.28); border-radius:24px; padding:48px; position:relative; overflow:hidden; }
.next-block::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.1; background-image:var(--grain); }
.next-block .cs-eyebrow{ color:#9db9ff; }
.next-block h3{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.025em; color:#fff; margin:0 0 14px; position:relative; }
.next-block p{ font-size:1.05rem; line-height:1.7; color:var(--muted-d); margin:0; max-width:40rem; position:relative; }

.link-arrow{ display:inline-block; margin-top:8px; font-weight:600; font-size:1rem; color:var(--blue); text-decoration:none; }
.link-arrow:hover{ color:#fff; }
.fin{ text-align:center; font-family:"Fraunces",serif; font-style:italic; font-size:1.6rem; color:var(--faint-d); padding:64px 0 26px; }

/* footer — dark navy moment */
footer{
  border-top:1px solid var(--line-d); padding:44px 0 54px; margin-top:20px; position:relative; overflow:hidden;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(47,107,240,.18), transparent 65%),
    var(--navy);
}
footer::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.09; background-image:var(--grain); }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--faint-d); position:relative; }
footer a{ color:var(--blue); text-decoration:none; font-weight:600; }
footer a:hover{ color:#fff; }

/* reveal (matches script.js .visible) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s; } .reveal-d2{ transition-delay:.2s; } .reveal-d3{ transition-delay:.3s; }

/* responsive */
@media (max-width:900px){
  .details-grid{ grid-template-columns:1fr 1fr; }
  .psr{ grid-template-columns:1fr; }
  .impact-row{ grid-template-columns:1fr; gap:26px; }
  .method-row{ grid-template-columns:1fr 1fr; }
  .insight-grid{ grid-template-columns:1fr; }
  .personas{ grid-template-columns:1fr; }
  .solution, .solution.flip{ grid-template-columns:1fr; gap:30px; padding:44px 0; }
  .solution.flip .sol-visual{ order:0; }
  .sol-visual img{ max-height:520px; }
  .hero-split{ grid-template-columns:1fr; gap:40px; margin-top:48px; }
  .hero-split-visual .hero-shot{ width:min(320px,72%); }
  .detail-duo{ grid-template-columns:1fr; }
  .reflections{ grid-template-columns:1fr; }
  .cs-hero{ padding-top:120px; }
  .cs-section.band-light, .cs-section.band-blue{ padding:60px 0; }
}
@media (max-width:560px){
  .details-grid{ grid-template-columns:1fr; }
  .method-row{ grid-template-columns:1fr; }
  .next-block{ padding:32px 24px; }
  .nav-pill{ max-width:94vw; overflow-x:auto; }
}