/* FS case study: agency noir frame, original green client artwork. */
body.fs-noir { --fs-yellow:#ffd400; background:#050506; color:#f5f5f6; }
.fs-detail { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.fs-wrap { width:min(1240px,calc(100% - 80px)); margin-inline:auto; }
.fs-detail h1,.fs-detail h2,.fs-detail h3,.fs-detail h4 { font-family:inherit; font-style:normal; font-weight:600; }
.fs-detail h2 { margin:0; font-size:var(--type-section-title); line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.fs-detail h2 span,.fs-detail h1 span,.fs-deliverables h3 span { color:var(--fs-yellow); }
.fs-detail p { text-wrap:pretty; }
.fs-detail .fs-eyebrow { margin:0 0 22px; color:#aaaab0; font-size:var(--type-label); font-weight:600; line-height:1.5; text-transform:uppercase; letter-spacing:.16em; }
.fs-project-line { display:flex; justify-content:space-between; gap:20px; padding:30px 0 46px; color:#9999a1; font-size:var(--type-caption); }
.fs-project-line a { color:#f4f4f5; }
.fs-project-line a:hover { color:var(--fs-yellow); }
.fs-hero { padding-top:12px; }
.fs-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(32px,5vw,76px); }
.fs-hero-copy { padding-block:34px; }
.fs-hero h1 { margin:0 0 28px; font-size:var(--type-page-title); line-height: var(--type-title-leading); letter-spacing: var(--type-title-tracking); }
.fs-hero h1 span { display:inline-block; }
.fs-hero-sub { max-width:390px; margin:0; color:#b4b4bc; font-size:var(--type-lead); line-height:1.55; }
.fs-jump { display:inline-flex; align-items:center; gap:30px; margin-top:38px; font-size:var(--type-caption); }
.fs-jump span { color:var(--fs-yellow); font-size:var(--type-lead); }
.fs-hero-art { position:relative; margin:0; padding:12px; background:#17191a; transform:rotate(2deg); }
.fs-hero-art::before { content:''; position:absolute; top:-9px; left:20px; width:94px; height:22px; background:var(--fs-yellow); transform:rotate(-8deg); }
.fs-hero-art img { display:block; width:100%; height:auto; aspect-ratio:1.1; object-fit:cover; }
.fs-hero-art figcaption { display:flex; justify-content:space-between; gap:12px; padding:16px 4px 4px; color:#d0d0d3; font-size:var(--type-label); }
.fs-hero-art figcaption span:last-child { color:var(--fs-yellow); }
.fs-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:55px 0 0; padding:25px 0; border-block:1px solid #29292e; }
.fs-facts dt { margin-bottom:8px; color:#92929a; font-size:var(--type-label); text-transform:uppercase; letter-spacing:.12em; }
.fs-facts dd { margin:0; font-size:var(--type-body); font-weight:500; }
.fs-chapter { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,7vw,110px); padding-block:clamp(70px,8vw,115px); scroll-margin-top:115px; }
.fs-chapter-copy p { margin:0 0 18px; color:#aaaab2; font-size:var(--type-body); line-height:1.7; }
.fs-chapter-copy p:last-child { margin-bottom:0; }
.fs-chapter-copy .fs-lead { color:#f0f0f2; font-size:var(--type-lead); line-height:1.4; letter-spacing:-.025em; }
.fs-editorial { position:relative; margin-block:0; }
.fs-editorial img { display:block; width:100%; height:clamp(300px,43vw,560px); object-fit:cover; object-position:center 55%; }
.fs-editorial figcaption { display:flex; justify-content:space-between; gap:18px; padding:18px 0 0; color:#b4b4bc; font-size:var(--type-caption); }
.fs-editorial figcaption small { font-size:var(--type-label); color:#777780; }
.fs-brand-board { display:grid; grid-template-columns:1fr 1fr; background:#101112; }
.fs-brand-detail { position:relative; margin:0; min-width:0; overflow:hidden; }
.fs-brand-detail img { display:block; width:100%; height:100%; min-height:470px; object-fit:cover; object-position:65% bottom; transform:scale(1.13); }
.fs-brand-detail figcaption { position:absolute; bottom:22px; left:24px; right:24px; padding:12px 16px; color:white; background:#052817df; font-size:var(--type-caption); }
.fs-deliverables { padding:clamp(28px,4vw,56px); }
.fs-deliverables h3 { margin:0 0 28px; font-size:var(--type-card-title); line-height:1.13; letter-spacing:-.035em; }
.fs-deliverables ul { padding:0; margin:0 0 30px; list-style:none; }
.fs-deliverables li { display:flex; gap:18px; padding:13px 0; border-bottom:1px solid #2a2b2c; font-size:var(--type-small); color:#cccbd0; }
.fs-deliverables li span { color:#777780; font-size:var(--type-label); padding-top:3px; }
.fs-board-note { color:var(--fs-yellow); font-size:var(--type-caption); }
.fs-digital-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fs-digital-grid article { padding:32px; background:#111113; }
.fs-card-number { display:block; margin-bottom:34px; color:var(--fs-yellow); font-size:var(--type-label); letter-spacing:.1em; text-transform:uppercase; }
.fs-digital-grid h3 { margin:0 0 18px; font-size:var(--type-card-title); letter-spacing:-.025em; line-height:1.2; }
.fs-digital-grid p { margin:0; font-size:var(--type-small); line-height:1.65; color:#aaaab2; }
.fs-character-section { padding-block:clamp(75px,9vw,130px); }
.fs-character-section header { max-width:650px; }
.fs-character-section header > p:last-child { max-width:490px; margin:26px 0 40px; font-size:var(--type-body); line-height:1.65; color:#aaaab2; }
.fs-character-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fs-character-grid article { display:grid; grid-template-columns:.8fr 1fr; align-items:center; gap:25px; padding:36px; background:radial-gradient(ellipse at 15% 50%,#ffd40012,transparent 70%),#101012; }
.fs-character-letter { position:relative; display:block; color:var(--fs-yellow); font-size:clamp(100px,12vw,170px); font-weight:700; line-height:1; letter-spacing:-.1em; }
.fs-character-letter > span { position:absolute; right:4px; bottom:0; display:grid; place-items:center; width:42px; height:42px; border:1px solid #7b6c12; border-radius:50%; background:#15150f; font-size:26px; font-weight:400; letter-spacing:0; }
.fs-character-grid .fs-eyebrow { font-size:var(--type-label); margin-bottom:12px; }
.fs-character-grid h3 { margin:0 0 15px; font-size:var(--type-section-title); letter-spacing:-.04em; line-height:1; }
.fs-character-grid p:last-child { margin:0; color:#aaaab2; font-size:var(--type-small); line-height:1.6; }
.fs-outcome { padding:clamp(32px,6vw,80px); background:#13130f; position:relative; }
.fs-outcome > p:not(.fs-eyebrow) { max-width:640px; margin:28px 0 36px; color:#b6b6bc; font-size:var(--type-label); line-height:1.6; }
.fs-toast { display:flex; align-items:center; gap:22px; }
.fs-toast > span { color:var(--fs-yellow); font-size:var(--type-section-title); }
.fs-toast p { margin:0; font-size:var(--type-small); line-height:1.6; color:#a6a6ad; }
.fs-toast strong { color:#f5f5f6; font-weight:500; }
.fs-longread { margin-block:55px 85px; }
.fs-longread details { border-block:1px solid #2c2c31; }
.fs-longread summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; cursor:pointer; font-size:var(--type-body); list-style:none; }
.fs-longread summary::-webkit-details-marker { display:none; }
.fs-longread summary span { color:var(--fs-yellow); font-size:var(--type-card-title); }
.fs-longread details[open] summary span { transform:rotate(45deg); }
.fs-original-copy { max-width:780px; padding-block:20px 40px; margin-inline:auto; }
.fs-original-copy p { margin:0 0 22px; color:#b6b6bf; font-size:var(--type-body); line-height:1.7; }
.fs-original-copy .fs-trust-callout { color:var(--fs-yellow); font-size:var(--type-card-title); line-height:1.4; margin-block:32px; }
.fs-characters { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-block:30px; }
.fs-characters h4 { font-size:var(--type-card-title); margin:0 0 10px; }
.fs-detail .fs-credits { width:min(1240px,calc(100% - 80px)); padding:0 0 70px; }
.fs-credits .credits-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.fs-credits .credits-grid dd { font-size:var(--type-body); line-height:1.4; }
.fs-credits .credits-grid dt { font-size:var(--type-caption); line-height:1.5; }
.fs-project-back { padding-block:60px 100px; text-align:center; }
.fs-project-back h2 { margin-bottom:30px; }
.fs-button { display:inline-flex; align-items:center; gap:30px; padding:16px 22px; background:var(--fs-yellow); color:#09090b; font-size:var(--type-button); font-weight:600; }
.fs-button:hover { background:#fff; }
body.fs-noir a:focus-visible,body.fs-noir summary:focus-visible { outline:2px solid var(--fs-yellow); outline-offset:6px; }
@media(max-width:1000px) {
 .fs-hero-grid { gap:30px; } .fs-hero h1 { font-size:var(--type-page-title); }
 .fs-character-grid article { grid-template-columns:1fr; } .fs-character-letter { font-size:120px; width:140px; }
 .fs-digital-grid article { padding:24px; }
}
@media(max-width:760px) {
 .fs-wrap,.fs-detail .fs-credits { width:calc(100% - 40px); }
 .fs-project-line { padding:22px 0 28px; font-size:var(--type-label); }
 .fs-project-line span { text-align:right; max-width:140px; }
 .fs-hero-grid,.fs-chapter,.fs-brand-board,.fs-character-grid { grid-template-columns:1fr; }
 .fs-hero h1 { font-size:var(--type-page-title); }
 .fs-hero-copy { padding:10px 0 20px; }
 .fs-hero-art { transform:rotate(1deg); margin:8px 4px; }
 .fs-facts { grid-template-columns:1fr; gap:20px; margin-top:35px; }
 .fs-facts div { display:grid; grid-template-columns:100px 1fr; gap:20px; }
 .fs-facts dt { margin:3px 0 0; font-size:var(--type-label); }
 .fs-facts dd { font-size:var(--type-small); }
 .fs-chapter { gap:28px; padding-block:64px; }
 .fs-chapter-copy p { font-size:var(--type-body); }
 .fs-editorial img { height:300px; object-position:40% center; }
 .fs-editorial figcaption { flex-direction:column; gap:8px; line-height:1.5; }
 .fs-brand-detail img { height:360px; min-height:0; }
 .fs-deliverables { padding:30px 24px; }
 .fs-digital-grid { grid-template-columns:1fr; gap:12px; }
 .fs-digital-grid article { padding:28px; }
 .fs-card-number { margin-bottom:22px; }
 .fs-character-grid article { grid-template-columns:100px 1fr; gap:24px; padding:28px 22px; }
 .fs-character-letter { font-size:100px; width:90px; }
 .fs-character-letter > span { width:30px; height:30px; font-size:20px; }
 .fs-character-grid h3 { font-size:var(--type-card-title); }
 .fs-character-grid p:last-child { font-size:var(--type-small); }
 .fs-outcome { padding:32px 24px; }
 .fs-outcome > p:not(.fs-eyebrow) { font-size:var(--type-label); }
 .fs-credits .credits-grid { grid-template-columns:1fr 1fr; gap:25px; }
 .fs-credits .credits-grid dd { font-size:var(--type-body); }
 .fs-longread { margin-block:35px 60px; }
 .fs-characters { grid-template-columns:1fr; }
 .fs-project-back { padding-block:25px 70px; }
}

/* Original client assets and actual website captures. */
.fs-brand-detail.fs-original-identity { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:25px; padding:48px 36px 78px; background:radial-gradient(ellipse at 55% 40%,#71934b,#33562b); }
.fs-original-identity .fs-client-logo { width:min(300px,85%); height:auto; min-height:0; object-fit:contain; transform:none; }
.fs-original-identity .fs-client-duo { width:min(310px,85%); height:260px; min-height:0; object-fit:contain; transform:none; }
.fs-character-art { display:block; width:100%; height:220px; object-fit:contain; }
.fs-web-gallery { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.fs-web-gallery figure { min-width:0; margin:0; }
.fs-browser-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border:1px solid #303035; border-bottom:0; background:#18181b; font-size:var(--type-label); color:#92929a; }
.fs-browser-bar span:first-child { letter-spacing:3px; color:#66666f; font-size:var(--type-label); }
.fs-browser-bar span:last-child { color:var(--fs-yellow); }
.fs-web-gallery a { display:block; overflow:hidden; border:1px solid #303035; }
.fs-web-gallery img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .35s ease; }
.fs-web-gallery a:hover img { transform:scale(1.025); }
.fs-web-gallery figcaption { display:grid; gap:8px; padding:18px 0 12px; font-size:var(--type-small); font-weight:500; }
.fs-web-gallery figcaption small { color:#92929a; font-size:var(--type-label); font-weight:400; }
@media(max-width:760px) {
 .fs-web-gallery { grid-template-columns:1fr; gap:25px; }
 .fs-character-art { height:150px; }
 .fs-brand-detail.fs-original-identity { padding:35px 25px 75px; gap:20px; }
 .fs-original-identity .fs-client-duo { height:240px; }
}
@media(prefers-reduced-motion:reduce) { .fs-web-gallery img { transition:none; } }