/* Case-study pages injected into the Framer project template (see cases.js). */

/* Hide the template's own content and the template meta values on mapped pages. */
html[data-case] [data-framer-name="Page wrapper"] [data-framer-name="Content"] { display: none !important; }
html[data-case] [data-framer-name="Info"] [data-framer-name="Desc"] p:not([data-cs]),
html[data-case] [data-framer-name="Info"] [data-framer-name="Client"] > div:nth-child(2) p:not([data-cs]),
html[data-case] [data-framer-name="Info"] [data-framer-name="Deliverables"] > div:nth-child(2) p:not([data-cs]),
html[data-case] [data-framer-name="Info"] [data-framer-name="Year"] > div:nth-child(2) p:not([data-cs]),
html[data-case] [data-framer-name="Info"] [data-framer-name="Role"] > div:nth-child(2) p:not([data-cs]) { display: none !important; }

.cs {
  --cs-fg: #fff;
  --cs-text: rgba(255, 255, 255, 0.78);
  --cs-muted: rgba(255, 255, 255, 0.5);
  --cs-line: rgba(255, 255, 255, 0.14);
  --cs-panel: #1a1919;
  --cs-link: #4c8dff;
  --cs-gap: 50px;
  --cs-sec: 200px;
  width: 100%;
  color: var(--cs-fg);
  font-family: "Switzer", "Switzer Placeholder", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 120px;
}
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs img { display: block; width: 100%; height: auto; }
.cs a { color: var(--cs-link); text-decoration: underline; text-decoration-color: rgba(76, 141, 255, 0.4); text-underline-offset: 0.18em; transition: text-decoration-color .2s; }
.cs a:hover { text-decoration-color: currentColor; }
.cs figure { margin: 0; }

/* Type, built on the template presets: Switzer 500, tight negative tracking for display sizes,
   12px uppercase labels. Body copy is sentence case so long text stays readable. */
.cs h2 { margin: 0; font-size: 50px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; }
.cs h3 { margin: 0 0 20px; font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.cs p, .cs li { font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--cs-text); }
.cs p { margin: 0 0 20px; }
.cs p:last-child { margin-bottom: 0; }
.cs em { font-style: normal; color: var(--cs-fg); }
.cs-label, .cs figcaption {
  display: block; font-size: 12px; line-height: 1.2; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--cs-muted);
}
.cs figcaption { margin-top: 14px; }
.cs-cap { margin: 0 0 14px; }

.cs-hero { display: grid; gap: 10px; }

/* Sections on the template's 12-column grid: heading left, copy right.
   Rules only separate sections; items inside a section are separated by spacing alone. */
.cs-sec {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cs-gap); row-gap: 64px;
  margin-top: var(--cs-sec); padding-top: 24px; border-top: 1px solid var(--cs-line);
}
.cs-head { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 20px; }
.cs-body { grid-column: 7 / span 6; max-width: 640px; }
.cs-head + .cs-body { grid-row: 1; }
.cs-wide, .cs-stats, .cs-phones, .cs-split { grid-column: 1 / -1; }
.cs-wide { display: grid; gap: 40px; }
.cs-body > .cs-label { margin-bottom: 14px; }
.cs-body > h3:not(:first-child) { margin-top: 48px; }
.cs-body > .cs-label + h3 { margin-top: 0; }

.cs-list { margin: 0; padding: 0; list-style: none; counter-reset: cs; }
.cs-list > li { position: relative; padding-left: 48px; counter-increment: cs; }
.cs-list > li + li { margin-top: 20px; }
.cs-list > li::before {
  content: counter(cs, decimal-leading-zero); position: absolute; left: 0; top: 5px;
  font-size: 12px; line-height: 1.2; letter-spacing: 0.02em; color: var(--cs-muted);
}
.cs-list--dash > li::before { content: "—"; }

.cs-steps { display: grid; gap: 36px; }
.cs-step .cs-label { color: var(--cs-fg); margin-bottom: 12px; }
.cs-step ul { margin: 0; padding: 0; list-style: none; }
.cs-step li { padding-left: 48px; position: relative; }
.cs-step li + li { margin-top: 8px; }
/* Dashes use the same 12px label style as the 01 / 02 counters. */
.cs-step li::before {
  content: "—"; position: absolute; left: 0; top: 5px;
  font-size: 12px; line-height: 1.2; letter-spacing: 0.02em; color: var(--cs-muted);
}

.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cs-gap); row-gap: 48px; }
.cs-stat { display: flex; flex-direction: column; gap: 16px; }
.cs-num { font-size: 90px; line-height: 0.9; letter-spacing: -0.03em; }
.cs-stat p { margin: 0; flex: 1; }

.cs-note { padding-left: 20px; border-left: 2px solid var(--cs-fg); color: var(--cs-fg) !important; }
.cs-trade { margin-top: 32px !important; }
.cs-trade .cs-label { margin-bottom: 10px; color: var(--cs-fg); }
.cs-lead { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -0.03em !important; color: var(--cs-fg) !important; }

.cs-grid { display: grid; gap: 10px; }
.cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-wide > .cs-cap { margin-bottom: -26px; }

.cs-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cs-gap); align-items: start; }
.cs-split > .cs-fig { grid-column: 1 / span 6; }
.cs-split-text { grid-column: 7 / span 6; position: sticky; top: 120px; max-width: 640px; }
.cs-kit { margin-top: 40px; }
.cs-panel { background: var(--cs-panel); border-radius: 16px; padding: 32px; display: flex; align-items: center; justify-content: center; }
.cs-panel img { width: auto; max-width: 100%; max-height: 420px; }

.cs-phones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 64px;
  padding: 72px max(64px, calc((100% - 1000px) / 2)); background: var(--cs-panel); border-radius: 24px;
}

/* Tablet */
@media (max-width: 1199px) {
  .cs { --cs-gap: 32px; --cs-sec: 160px; }
  .cs h2 { font-size: 44px; }
  .cs-num { font-size: 64px; }
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-head { grid-column: 1 / -1; }
  .cs-body { grid-column: 1 / -1; grid-row: auto !important; max-width: 720px; }
  .cs-split > .cs-fig, .cs-split-text { grid-column: 1 / -1; }
  .cs-split-text { position: static; margin-top: 48px; }
  .cs-phones { gap: 32px; padding: 48px; }
}

/* Phone */
@media (max-width: 809px) {
  .cs { --cs-gap: 20px; --cs-sec: 112px; padding-bottom: 72px; }
  .cs h2 { font-size: 34px; }
  .cs h3 { font-size: 22px; }
  .cs p, .cs li { font-size: 16px; }
  .cs-lead { font-size: 22px !important; }
  .cs-sec { row-gap: 40px; }
  .cs-wide { gap: 28px; }
  .cs-wide > .cs-cap { margin-bottom: -14px; }
  .cs-num { font-size: 50px; }
  .cs-stats { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .cs-grid--2, .cs-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .cs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-list > li, .cs-step li { padding-left: 40px; }
  .cs-list > li::before, .cs-step li::before { top: 4px; }
  /* Phone mockups scroll sideways instead of shrinking to unreadable sizes. */
  .cs-phones {
    display: flex; gap: 16px; padding: 32px 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    border-radius: 16px; scrollbar-width: none;
  }
  .cs-phones::-webkit-scrollbar { display: none; }
  .cs-phones img { flex: 0 0 66%; scroll-snap-align: center; }
  .cs-panel { padding: 20px; }
}

/* Back link above the project title. The template title block is 60vh tall and bottom-aligned,
   so on short screens it rises into the link; padding keeps a fixed gap below it. */
html[data-case] [data-framer-name="Post"] { position: relative; }
html[data-case] [data-framer-name="Title"] { height: auto !important; min-height: 60vh; padding-top: 180px !important; }
/* Below desktop the 60vh block leaves a tall empty gap, so the gap is fixed at the desktop value (~46px). */
@media (max-width: 1199px) { html[data-case] [data-framer-name="Title"] { min-height: 0; } }
@media (max-width: 809px) { html[data-case] [data-framer-name="Title"] { padding-top: 156px !important; } }
.cs-back {
  position: absolute; top: 120px; left: 0; z-index: 2;
  font-family: "Switzer", "Switzer Placeholder", sans-serif; font-weight: 500;
  font-size: 12px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color .2s;
}
.cs-back:hover { color: #fff; }
@media (max-width: 809px) { .cs-back { top: 96px; } }

/* Chapter rail (Notion-style): dashes on the right edge, chapter list on hover. */
.cs-toc {
  position: fixed; top: 50%; right: 12px; z-index: 50; transform: translateY(-50%);
  font-family: "Switzer", "Switzer Placeholder", sans-serif; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cs-toc.is-visible { opacity: 1; pointer-events: auto; }
.cs-toc-rail { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 12px 6px; }
.cs-toc-rail span { display: block; width: 16px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.22); transition: background .2s, width .2s; }
.cs-toc-rail span.is-active { width: 22px; background: #fff; }
.cs-toc-list {
  position: absolute; top: 50%; right: 0; margin: 0; padding: 14px 8px; list-style: none;
  min-width: 240px; max-height: 80vh; overflow-y: auto;
  background: #1a1919; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translate(8px, -50%);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.cs-toc:hover .cs-toc-list, .cs-toc:focus-within .cs-toc-list {
  opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .18s, transform .18s;
}
.cs-toc-list a {
  display: block; padding: 7px 14px; border-radius: 8px;
  font-size: 15px; line-height: 1.3; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color .15s, background .15s;
}
.cs-toc-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cs-toc-list a.is-active { color: #4c8dff; }
@media (max-width: 809px), (hover: none) { .cs-toc { display: none; } }

/* Client links in the About block on the home page (blue, like links in case text). */
a.ovz-link { color: #4c8dff !important; text-decoration: none; transition: opacity .2s; }
a.ovz-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }