/* ============================================================
   Case studies — shared Swiss frame (nav + footer), see BRAND.md.
   Each case study keeps its client's colours and display fonts; this layer only adds the
   site's navigation and ending, in Inter Tight, square, quiet. It reads the page's own
   background/foreground through currentColor and the --cs-bg/--cs-fg values set by case-study.js.
   ============================================================ */

.back-nav { display: none !important; }   /* replaced by .cs-nav */

.cs-nav,
.cs-end {
    font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
}

/* ---------- Nav ---------- */
.cs-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: 64px;
    padding: 0 clamp(16px, 4vw, 64px);
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 36px);
    color: var(--cs-fg, currentColor);
    background: transparent;
    transition: background-color 0.25s ease, height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-nav.is-scrolled {
    height: 56px;
    background: var(--cs-bg, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cs-fg, currentColor) 14%, transparent);
}

.cs-nav a { color: inherit; text-decoration: none; }

.cs-nav-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.cs-nav-mark img {
    height: 36px;
    width: auto;
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cs-nav[data-tone="dark"] .cs-nav-mark img { filter: invert(1); }
.cs-nav-mark:hover img { transform: rotate(-8deg) scale(1.06); }

.cs-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 32px);
    font-size: 0.875rem;
    font-weight: 500;
}

.cs-nav-links a:not(.cs-nav-cta) { position: relative; }

.cs-nav-links a:not(.cs-nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-nav-links a:not(.cs-nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

.cs-nav-num {
    font-size: 0.65rem;
    opacity: 0.55;
    vertical-align: super;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

.cs-nav-cta {
    padding: 8px 13px;
    background: var(--cs-fg, currentColor);
    color: var(--cs-bg, #000) !important;
    border: 1px solid var(--cs-fg, currentColor);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cs-nav-cta:hover { background: transparent; color: var(--cs-fg, currentColor) !important; }

.cs-nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

@media (max-width: 760px) {
    .cs-nav-links a:not(.cs-nav-cta) { display: none; }
    .cs-nav-mark span { display: none; }
}

/* ---------- Ending: next case study + site footer ---------- */
.cs-end {
    position: relative;
    z-index: 2;
    color: var(--cs-fg, currentColor);
    background: var(--cs-bg, transparent);
    padding: clamp(80px, 10vw, 160px) clamp(16px, 4vw, 64px) 0;
    overflow: hidden;
}

.cs-next {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 16px 0 32px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    color: inherit;
    text-decoration: none;
}

.cs-next-label {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
}

.cs-next-name {
    font-size: clamp(2.6rem, 8vw, 8rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.cs-next-arrow {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cs-next:hover .cs-next-arrow { transform: translateX(16px); }

.cs-foot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 40px 0 56px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cs-foot-col { display: flex; flex-direction: column; gap: 4px; }
.cs-foot-col a { color: inherit; opacity: 0.72; text-decoration: none; width: fit-content; }
.cs-foot-col a:hover { opacity: 1; }
.cs-foot-head { font-weight: 600; margin-bottom: 6px; }
.cs-foot-play { opacity: 1 !important; text-decoration: underline !important; text-underline-offset: 0.2em; }
.cs-foot-small { align-self: end; opacity: 0.6; }

@media (max-width: 760px) {
    .cs-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Problem / Needed: what each project was solving for, under the brief title.
   Built on currentColor so it works on light and dark case studies alike. */
.brief-req {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    margin: 4px 0 clamp(28px, 3.5vw, 44px);
    max-width: 52ch;
}
.brief-req dt,
.brief-req dd {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.brief-req dt:first-of-type,
.brief-req dt:first-of-type + dd { border-top: 1px solid currentColor; }
.brief-req dt { font-size: 0.75rem; font-weight: 600; opacity: 0.6; padding-top: 15px; }
.brief-req dd { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
@media (max-width: 480px) {
    .brief-req { grid-template-columns: 1fr; }
    .brief-req dt { padding-bottom: 0; border-bottom: 0; }
    .brief-req dt:first-of-type + dd { border-top: 0; }
}