/* =========================================================================
   case-study-editorial.css
   Extension layer for the long-form case studies (TruDiagnostic, Infinite Epigenetics).
   Loads AFTER project.css and only adds `cs-` prefixed classes, so existing pages
   are untouched. Typography (neuzeit-grotesk), background (#edebe9), accent pink
   (#ff1dce), the brown meta colour (#7f6a57) and the 16px image radius all come
   from the existing site system.
   ========================================================================= */

.cs {
	font-family: neuzeit-grotesk, sans-serif; /* same Typekit face as the rest of elliakou.com */
	--cs-gutter: 3rem;
	--cs-gap: 2vw;
	--cs-pink: #ff1dce;
	--cs-alt: #7f6a57;
	--cs-ink: #111;
	--cs-radius: 16px;
	--cs-section: 12rem;
	--band-bg: #111;
	--band-fg: #edebe9;
	--band-accent: #ff1dce;
}
.cs--infinite { --band-bg: #0c2c31; --band-fg: #f1e9df; --band-accent: #e6f24f; --cs-section: 15rem; }
.cs--trudiagnostic { --band-bg: #1b1066; --band-fg: #ffffff; --band-accent: #e4ff5c; --cs-section: 10rem; }

.cs img { display: block; width: 100%; height: auto; border-radius: var(--cs-radius); }
.cs figure { margin: 0; }
.cs a { text-decoration: none; }
.cs h2, .cs h3, .cs p, .cs li, .cs figcaption { font-family: inherit; }

/* ---------- reveal (Locomotive Scroll adds .is-inview to [data-scroll]) ---------- */
.has-scroll-init .cs-reveal { opacity: 0; transform: translate3d(0, 60px, 0); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1); }
.has-scroll-init .cs-reveal.is-inview { opacity: 1; transform: none; }
.has-scroll-init .cs-reveal--d1 { transition-delay: .1s; }
.has-scroll-init .cs-reveal--d2 { transition-delay: .2s; }
.has-scroll-init .cs-reveal--d3 { transition-delay: .3s; }
.cs-zoom { overflow: hidden; border-radius: var(--cs-radius); }
.cs-zoom img { border-radius: 0; }
.has-scroll-init .cs-zoom img { transform: scale(1.06); transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.has-scroll-init .cs-zoom.is-inview img { transform: none; }

/* ---------- layout primitives ---------- */
.cs-wrap { padding: 0 var(--cs-gutter); }
.cs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cs-gap); align-items: start; }
.cs-grid--end { align-items: end; }
.cs-grid--center { align-items: center; }
/* column spans: .cs-sA-B = grid-column A / B */
.cs-s1-2 { grid-column: 1 / 2; } .cs-s1-3 { grid-column: 1 / 3; } .cs-s1-4 { grid-column: 1 / 4; } .cs-s1-5 { grid-column: 1 / 5; } .cs-s1-6 { grid-column: 1 / 6; } .cs-s1-7 { grid-column: 1 / 7; } .cs-s1-8 { grid-column: 1 / 8; } .cs-s1-9 { grid-column: 1 / 9; } .cs-s1-10 { grid-column: 1 / 10; } .cs-s1-11 { grid-column: 1 / 11; } .cs-s1-12 { grid-column: 1 / 12; } .cs-s1-13 { grid-column: 1 / 13; }
.cs-s2-3 { grid-column: 2 / 3; } .cs-s2-4 { grid-column: 2 / 4; } .cs-s2-5 { grid-column: 2 / 5; } .cs-s2-6 { grid-column: 2 / 6; } .cs-s2-7 { grid-column: 2 / 7; } .cs-s2-8 { grid-column: 2 / 8; } .cs-s2-9 { grid-column: 2 / 9; } .cs-s2-10 { grid-column: 2 / 10; } .cs-s2-11 { grid-column: 2 / 11; } .cs-s2-12 { grid-column: 2 / 12; } .cs-s2-13 { grid-column: 2 / 13; }
.cs-s3-4 { grid-column: 3 / 4; } .cs-s3-5 { grid-column: 3 / 5; } .cs-s3-6 { grid-column: 3 / 6; } .cs-s3-7 { grid-column: 3 / 7; } .cs-s3-8 { grid-column: 3 / 8; } .cs-s3-9 { grid-column: 3 / 9; } .cs-s3-10 { grid-column: 3 / 10; } .cs-s3-11 { grid-column: 3 / 11; } .cs-s3-12 { grid-column: 3 / 12; } .cs-s3-13 { grid-column: 3 / 13; }
.cs-s4-5 { grid-column: 4 / 5; } .cs-s4-6 { grid-column: 4 / 6; } .cs-s4-7 { grid-column: 4 / 7; } .cs-s4-8 { grid-column: 4 / 8; } .cs-s4-9 { grid-column: 4 / 9; } .cs-s4-10 { grid-column: 4 / 10; } .cs-s4-11 { grid-column: 4 / 11; } .cs-s4-12 { grid-column: 4 / 12; } .cs-s4-13 { grid-column: 4 / 13; }
.cs-s5-6 { grid-column: 5 / 6; } .cs-s5-7 { grid-column: 5 / 7; } .cs-s5-8 { grid-column: 5 / 8; } .cs-s5-9 { grid-column: 5 / 9; } .cs-s5-10 { grid-column: 5 / 10; } .cs-s5-11 { grid-column: 5 / 11; } .cs-s5-12 { grid-column: 5 / 12; } .cs-s5-13 { grid-column: 5 / 13; }
.cs-s6-7 { grid-column: 6 / 7; } .cs-s6-8 { grid-column: 6 / 8; } .cs-s6-9 { grid-column: 6 / 9; } .cs-s6-10 { grid-column: 6 / 10; } .cs-s6-11 { grid-column: 6 / 11; } .cs-s6-12 { grid-column: 6 / 12; } .cs-s6-13 { grid-column: 6 / 13; }
.cs-s7-8 { grid-column: 7 / 8; } .cs-s7-9 { grid-column: 7 / 9; } .cs-s7-10 { grid-column: 7 / 10; } .cs-s7-11 { grid-column: 7 / 11; } .cs-s7-12 { grid-column: 7 / 12; } .cs-s7-13 { grid-column: 7 / 13; }
.cs-s8-9 { grid-column: 8 / 9; } .cs-s8-10 { grid-column: 8 / 10; } .cs-s8-11 { grid-column: 8 / 11; } .cs-s8-12 { grid-column: 8 / 12; } .cs-s8-13 { grid-column: 8 / 13; }
.cs-s9-10 { grid-column: 9 / 10; } .cs-s9-11 { grid-column: 9 / 11; } .cs-s9-12 { grid-column: 9 / 12; } .cs-s9-13 { grid-column: 9 / 13; }
.cs-s10-11 { grid-column: 10 / 11; } .cs-s10-12 { grid-column: 10 / 12; } .cs-s10-13 { grid-column: 10 / 13; }
.cs-s11-12 { grid-column: 11 / 12; } .cs-s11-13 { grid-column: 11 / 13; }
.cs-s12-13 { grid-column: 12 / 13; }
.cs-mt { margin-top: var(--cs-gap); } .cs-mt-l { margin-top: 8vw; } .cs-mt-xl { margin-top: 14vw; }
.cs-up { margin-top: -10vw; position: relative; z-index: 2; }
.cs-up-s { margin-top: -5vw; position: relative; z-index: 2; }
.cs-down { margin-top: 7vw; }
.cs-down-s { margin-top: 3.5vw; }
.cs-section { padding-top: var(--cs-section); }
.cs-bleed img, .cs-bleed.cs-zoom { border-radius: 0; }

/* ---------- type ---------- */
.cs-label { font-size: 1.3rem; font-weight: 300; color: var(--cs-pink); margin: 0 0 1rem; }
.cs-meta { font-size: 1rem; color: var(--cs-alt); letter-spacing: .02em; margin: 0; }
.cs-num { font-size: 1rem; color: var(--cs-pink); font-variant-numeric: tabular-nums; margin: 0; }
.cs-h1 { font-size: 9vw; line-height: .82; font-weight: 500; margin: 0; }
.cs-h2 { font-size: clamp(2.4rem, 5.4vw, 6.2rem); line-height: .92; font-weight: 500; margin: 0; }
.cs-h3 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.05; font-weight: 500; margin: 0; }
.cs-sub { font-size: clamp(1.4rem, 2.6vw, 2.6rem); line-height: 1.12; margin: 0; max-width: 24ch; }
.cs-body { font-size: clamp(1.05rem, 1.2vw, 1.3rem); line-height: 1.5; margin: 0 0 1em; max-width: 34em; }
.cs-lead { font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: 1.22; margin: 0 0 .9em; max-width: 26em; }
.cs-caption { font-size: .9rem; color: var(--cs-alt); margin-top: .8rem; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- hero ---------- */
.cs-hero { padding: 12rem var(--cs-gutter) 0; }
.cs-hero__top { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.cs-hero__meta { text-align: right; display: grid; gap: .4rem; padding-bottom: .6vw; }
.cs-hero .cs-sub { margin-top: 2.2rem; }
.cs-hero__visual { margin-top: 5rem; position: relative; }

/* ---------- intro ---------- */
.cs-intro { padding: 9rem var(--cs-gutter) 0; }

/* ---------- chapter head ---------- */
.cs-chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cs-gap); margin-bottom: 5vw; }
.cs-chapter > * { padding-top: .9rem; border-top: 1px solid rgba(17,17,17,.2); }
.cs-chapter__n { grid-column: 1 / 3; }
.cs-chapter__t { grid-column: 3 / 9; }
.cs-chapter__p { grid-column: 9 / 13; }
.cs-chapter__p .cs-body { font-size: clamp(1rem, 1.1vw, 1.2rem); }

/* ---------- full-width colour band (enters the client's world) ---------- */
.cs-band { background: var(--band-bg); color: var(--band-fg); padding: 9rem var(--cs-gutter); margin-top: var(--cs-section); }
.cs-band .cs-label { color: var(--band-accent); }
.cs-band .cs-caption, .cs-band .cs-meta { color: rgba(255,255,255,.6); }
.cs-band .cs-chapter > * { border-color: rgba(255,255,255,.22); }
.cs-band .cs-num { color: var(--band-accent); }
.cs-band--flush { padding-bottom: 0; overflow: hidden; }

/* ---------- typographic moment ---------- */
.cs-statement { padding: var(--cs-section) var(--cs-gutter) 0; overflow: hidden; }
.cs-band .cs-statement, .cs-statement--inband { padding: 0; }
.cs-statement__big { font-size: 8.4vw; line-height: .86; font-weight: 500; margin: 0; white-space: nowrap; }
.cs-statement__big em { font-style: normal; color: var(--cs-pink); }
.cs-band .cs-statement__big em { color: var(--band-accent); }
.cs-list-line { display: flex; flex-wrap: wrap; gap: 1rem 2.4vw; margin: 4rem 0 0; padding: 0; list-style: none; }
.cs-list-line li { flex: 1 1 11rem; font-size: clamp(1.05rem, 1.6vw, 1.6rem); padding-top: .7rem; border-top: 1px solid currentColor; }
.cs-list-line li span { display: block; font-size: .8rem; color: var(--cs-pink); margin-bottom: .35rem; }
.cs-band .cs-list-line li span { color: var(--band-accent); }

/* ---------- moving strip (horizontal motion via Locomotive) ---------- */
.cs-strip { overflow: hidden; padding: 2vw 0; }
.cs-strip__line { display: flex; gap: var(--cs-gap); width: max-content; padding-left: var(--cs-gutter); }
.cs-strip__line figure { width: 21vw; flex: none; }
.cs-strip__line--wide figure { width: 38vw; }
.cs-strip__line--tall figure { width: 16vw; }

/* ---------- web frames (used sparingly) ---------- */
.cs-browser { border-radius: var(--cs-radius); overflow: hidden; background: #fff; }
.cs-browser__bar { height: 30px; display: flex; gap: 6px; align-items: center; padding: 0 12px; background: #f4f3f1; }
.cs-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d2cc; }
.cs-browser img { border-radius: 0; }
.cs-scroll { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.cs-scroll img { transition: transform 14s cubic-bezier(.45,.05,.35,1); }
.cs-scroll:hover img { transform: translateY(calc(-100% + var(--frame-h, 40vw))); }
.cs-phone { border-radius: 34px; padding: 7px; background: #111; }
.cs-phone img { border-radius: 28px; }
.cs-phones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cs-gap); align-items: start; }
.cs-phones > :nth-child(even) { margin-top: 6vw; }

/* ---------- long emails / documents ---------- */
.cs-tall { overflow: hidden; border-radius: var(--cs-radius); position: relative; max-height: var(--cap, 46vw); }
.cs-tall img { border-radius: 0; }
.cs-tall::after { content: ""; position: absolute; inset: auto 0 0 0; height: 20%; background: linear-gradient(rgba(237,235,233,0), var(--fade, #edebe9)); }
.cs-band .cs-tall { --fade: var(--band-bg); }
.cs-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cs-gap); align-items: start; }
.cs-wall > :nth-child(3n+2) { margin-top: 5vw; }
.cs-wall > :nth-child(3n) { margin-top: 2.2vw; }
.cs-wall--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- ad / social families ---------- */
.cs-set { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--cs-gap); align-items: start; }
.cs-set--stagger > :nth-child(even) { transform: translateY(14%); }
.cs-family { margin-top: 8vw; }
.cs-family__head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-bottom: 2.4rem; padding-top: .9rem; border-top: 1px solid rgba(17,17,17,.2); }
.cs-band .cs-family__head { border-color: rgba(255,255,255,.22); }

/* ---------- next project ---------- */
.cs-next { display: block; padding: 11rem var(--cs-gutter) 3rem; color: var(--cs-ink) !important; }
.cs-next .cs-meta { margin-bottom: 1.4rem; }
.cs-next__t { font-size: 7vw; line-height: .85; font-weight: 500; display: inline-block; transition: transform .8s cubic-bezier(.16,1,.3,1), color .3s; }
.cs-next:hover .cs-next__t, .cs-next:focus-visible .cs-next__t { transform: translateX(2vw); color: var(--cs-pink); }
.cs-next__arrow { color: var(--cs-pink); }

/* ---------- responsive ---------- */
@media screen and (max-width: 1024px) {
	.cs { --cs-gutter: 1.6rem; --cs-gap: 3vw; --cs-section: 7rem; }
	.cs--infinite { --cs-section: 8.5rem; }
	.cs-hero { padding-top: 9rem; }
	.cs-h1 { font-size: 15vw; }
	.cs-hero__top { grid-template-columns: 1fr; }
	.cs-hero__meta { text-align: left; }
	.cs-chapter__t { grid-column: 3 / 13; }
	.cs-chapter__p { grid-column: 3 / 13; border-top: 0; padding-top: 0; }
	.cs-statement__big { font-size: 13vw; white-space: normal; }
	.cs-band { padding: 6rem var(--cs-gutter); }
	.cs-intro { padding-top: 6rem; }
}
@media screen and (max-width: 700px) {
	.cs { --cs-gutter: 1.15rem; --cs-gap: 3.2vw; --cs-radius: 10px; }
	.cs-hero { padding-top: 8rem; }
	.cs-h1 { font-size: 16.5vw; line-height: .88; }
	.cs-hero .cs-sub { margin-top: 1.4rem; }
	.cs-hero__visual { margin-top: 2.6rem; }
	.cs-grid > [class*="cs-s"] { grid-column: 1 / 13; }
	.cs-grid > .cs-m-half { grid-column: span 6; }
	.cs-grid > .cs-m-l { grid-column: 1 / 9; }
	.cs-grid > .cs-m-r { grid-column: 5 / 13; }
	.cs-up, .cs-up-s { margin-top: -12vw; }
	.cs-down, .cs-down-s { margin-top: 0; }
	.cs-grid > .cs-m-half.cs-down, .cs-grid > .cs-m-half.cs-down-s { margin-top: 10vw; }
	.cs-mt-l { margin-top: 12vw; } .cs-mt-xl { margin-top: 18vw; }
	.cs-chapter { margin-bottom: 9vw; }
	.cs-chapter__n { grid-column: 1 / 13; border-top: 0; padding-top: 0; }
	.cs-chapter__t, .cs-chapter__p { grid-column: 1 / 13; }
	.cs-chapter__p { padding-top: .2rem; }
	.cs-h2 { font-size: 11vw; }
	.cs-statement__big { font-size: 15vw; }
	.cs-band { padding: 4.5rem var(--cs-gutter); }
	.cs-intro { padding-top: 4.5rem; }
	.cs-strip__line figure { width: 58vw; }
	.cs-strip__line--wide figure { width: 84vw; }
	.cs-strip__line--tall figure { width: 44vw; }
	.cs-phones { grid-template-columns: repeat(5, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
	.cs-phones > * { scroll-snap-align: start; }
	.cs-phones > :nth-child(even) { margin-top: 0; }
	.cs-wall, .cs-wall--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-wall > :nth-child(n) { margin-top: 0; }
	.cs-wall > :nth-child(even) { margin-top: 10vw; }
	.cs-wall > :nth-child(n+5) { display: none; }
	.cs-tall { max-height: var(--cap-m, 120vw); }
	.cs-set { --n: 2 !important; }
	.cs-set--stagger > :nth-child(even) { transform: translateY(10%); }
	.cs-family__head { flex-direction: column; gap: .3rem; }
	.cs-next { padding-top: 7rem; }
	.cs-next__t { font-size: 13vw; }
	.cs-m-hide { display: none !important; }
	.cs-scroll { aspect-ratio: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) {
	.has-scroll-init .cs-reveal, .has-scroll-init .cs-zoom img { opacity: 1; transform: none; transition: none; }
	.cs-scroll img { transition: none; }
}

/* clickable section index */
.cs-list-line--nav { flex-wrap: nowrap; gap: 1.6vw; }
.cs-list-line--nav li { flex: 1 1 0; min-width: 0; padding-top: 0; border-top: 0; }
.cs-list-line--nav a { display: block; padding-top: .7rem; border-top: 1px solid currentColor; color: inherit; text-decoration: none; transition: color .25s, border-color .25s; }
.cs-list-line--nav a:hover, .cs-list-line--nav a:focus-visible { color: var(--band-accent, var(--cs-pink)); border-color: var(--band-accent, var(--cs-pink)); outline: none; }
.cs-list-line--nav a:hover span { transform: translateX(.3rem); }
.cs-list-line--nav span { transition: transform .25s; }
@media (max-width: 1024px) { .cs-list-line--nav { flex-wrap: wrap; gap: 1rem 2.4vw; } .cs-list-line--nav li { flex: 1 1 21%; } }
@media (max-width: 700px) { .cs-list-line--nav li { flex: 1 1 40%; } }
.cs-band--nav { padding-bottom: 3.5rem; }
.cs-band--nav + .cs-band { margin-top: 0; padding-top: 5rem; border-top: 1px solid rgba(255,255,255,.12); }
@media screen and (max-width: 700px) { .cs-band--nav { padding-bottom: 2.5rem; } .cs-band--nav + .cs-band { padding-top: 3.5rem; } }

/* hero lead image matches the height of the two posts beside it */
@media screen and (min-width: 701px) {
	.cs-hero__lead { align-self: stretch; position: relative; min-height: 18vw; }
	.cs-hero__lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
}

/* featured film */
.cs-film { position: relative; margin: 0; overflow: hidden; background: #0c2c31; }
.cs-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-film__sound { position: absolute; left: var(--cs-gutter, 4vw); bottom: 2rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem .55rem .8rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(12,44,49,.35); color: #fff; font-family: "Switzer", "neuzeit-grotesk", sans-serif; font-weight: 400; font-size: .78rem; letter-spacing: .02em; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s; }
.cs-film__icon { width: 16px; height: 16px; flex: none; }
.cs-film__sound:hover, .cs-film__sound:focus-visible { background: #e6f24f; color: #0c2c31; border-color: #e6f24f; outline: none; }
@media (max-width: 700px) { .cs-film__sound { bottom: 1rem; font-size: .72rem; padding: .5rem .85rem .5rem .7rem; } }
.cs-social-video { border-radius: var(--cs-radius); overflow: hidden; background: #0c2c31; }
.cs-social-video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cs-social-video { position: relative; }
.cs-film__sound--sm { left: .9rem; bottom: .9rem; font-size: .7rem; padding: .45rem .75rem .45rem .6rem; gap: .4rem; }
.cs-film__sound--sm .cs-film__icon { width: 14px; height: 14px; }

/* mobile / native-scroll mode: the site's base CSS locks body overflow, which blocks touch scrolling when Locomotive falls back to native scroll */
html:not(.has-scroll-smooth) body { overflow: visible !important; overflow-x: hidden !important; }
html:not(.has-scroll-smooth), html:not(.has-scroll-smooth) body { height: auto; }