/* Shared styles for case study & resource pages — matches site design language */
:root {
    --bg: #EDE8DF;
    --card: #FFFFFF;
    --text: #1A1A1A;
    --text-2: #484848;
    --text-3: #757575;
    --accent: #2B6777;
    --accent-light: #358999;
    --accent-sub: rgba(43,103,119,0.07);
    --border: #DDD7CC;
    --r: 12px;
    --r-sm: 8px;
    --serif: 'DM Serif Display', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.6; }
body::after {
    content:''; position:fixed; inset:0; opacity:0.2; pointer-events:none; z-index:9999;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
::selection { background:var(--accent); color:#fff; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; position:sticky; top:0; z-index:50;
    transition:background 0.3s ease, box-shadow 0.3s ease;
}
.topbar--scrolled {
    background:rgba(237,232,223,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--border), 0 8px 24px rgba(0,0,0,0.05);
}
.topbar__name { font-family:var(--serif); font-size:2rem; letter-spacing:-0.01em; }
.topbar__right { display:flex; align-items:center; gap:6px; }
.topbar__link {
    font-size:0.82rem; font-weight:500; color:var(--text-2); padding:7px 14px;
    border-radius:100px; transition:all 0.2s;
}
.topbar__link:hover { color:var(--text); background:rgba(0,0,0,0.04); }
.topbar__cta {
    display:inline-flex; align-items:center; gap:6px; padding:8px 18px;
    background:var(--accent); color:#fff; font-size:0.82rem; font-weight:600;
    border-radius:100px; transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
    box-shadow:0 2px 10px rgba(43,103,119,0.25);
}
.topbar__cta:hover { background:var(--accent-light); transform:translateY(-1px); color:#fff; }
.topbar__cta svg { width:13px; height:13px; }

.sheet { max-width:880px; margin:8px auto 48px; padding:0 24px; }
.crumbs { font-size:0.78rem; color:var(--text-3); margin:4px 0 14px; }
.crumbs a { color:var(--accent); font-weight:500; }
.crumbs a:hover { text-decoration:underline; text-underline-offset:3px; }

.paper {
    background:var(--card); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06);
    overflow:hidden;
}
.cs-head {
    padding:40px 48px 30px; border-bottom:1px solid var(--border);
    background:linear-gradient(135deg, rgba(43,103,119,0.05), transparent 55%);
}
.cs-head__eyebrow {
    font-size:0.72rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.cs-head__eyebrow::before { content:''; width:14px; height:1.5px; background:var(--accent); }
.cs-head__logo-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cs-head__logo {
    width:52px; height:52px; border-radius:10px; object-fit:contain;
    background:#fff; border:1px solid var(--border); padding:6px;
}
.cs-head__title { font-family:var(--serif); font-size:2.1rem; line-height:1.15; letter-spacing:-0.01em; }
.cs-head__sub { font-size:0.95rem; color:var(--text-2); margin-top:8px; max-width:640px; line-height:1.65; }
.cs-head__meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; }
.cs-head__meta div strong { display:block; font-family:var(--serif); font-size:1.25rem; color:var(--accent); line-height:1.1; }
.cs-head__meta div span { font-size:0.74rem; color:var(--text-3); font-weight:500; }

.cs-body { padding:34px 48px 42px; display:flex; flex-direction:column; gap:30px; }
.cs-sec__label {
    font-size:0.72rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.cs-sec__label::before { content:''; width:14px; height:1.5px; background:var(--accent); }
.cs-sec p { font-size:0.92rem; color:var(--text-2); line-height:1.75; }
.cs-sec p + p { margin-top:10px; }
.cs-sec strong { color:var(--text); font-weight:600; }
.cs-sec a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(43,103,119,0.35); text-underline-offset:3px; }
.cs-sec a:hover { text-decoration-color:var(--accent); }

.cs-points { list-style:none; display:flex; flex-direction:column; gap:9px; }
.cs-points li { display:flex; gap:10px; font-size:0.89rem; color:var(--text-2); line-height:1.6; }
.cs-points svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; margin-top:4px; }

.cs-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cs-tile {
    padding:16px 18px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg);
}
.cs-tile h3 { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); margin-bottom:5px; }
.cs-tile p { font-size:0.83rem; }

.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag {
    padding:4px 11px; background:var(--accent-sub); border:1px solid rgba(43,103,119,0.1);
    border-radius:100px; font-size:0.76rem; font-weight:500; color:var(--accent);
}

.cs-cta {
    padding:26px 28px; border-radius:var(--r-sm); background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.cs-cta h2 { font-family:var(--serif); font-size:1.35rem; line-height:1.2; }
.cs-cta p { font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:4px; }
.cs-cta__btn {
    display:inline-flex; align-items:center; gap:7px; padding:11px 22px; white-space:nowrap;
    background:#fff; color:var(--accent); font-weight:700; font-size:0.86rem; border-radius:100px;
    transition:transform 0.2s;
}
.cs-cta__btn:hover { transform:translateY(-2px); }
.cs-cta__btn svg { width:14px; height:14px; }

.cs-related { display:flex; gap:12px; flex-wrap:wrap; }
.cs-related a {
    flex:1; min-width:200px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--card); transition:all 0.2s; font-size:0.84rem;
}
.cs-related a:hover { border-color:var(--accent); background:var(--accent-sub); }
.cs-related a strong { display:block; font-family:var(--serif); font-weight:400; font-size:1rem; margin-bottom:2px; }
.cs-related a span { color:var(--text-3); font-size:0.76rem; }

@media (max-width:720px) {
    .cs-head { padding:28px 24px 24px; }
    .cs-body { padding:26px 24px 32px; }
    .cs-head__title { font-size:1.6rem; }
    .cs-grid { grid-template-columns:1fr; }
    .topbar__link { display:none; }
}