/* Opt-in editorial layouts: case-study articles and case-study feature cards. */
.case-page { background: #fff; padding-top: 84px; }
.case-page h1,.case-page h2,.case-page h3,.case-showcase h2,.case-showcase h3 { letter-spacing: -.045em; line-height: 1.08; }
.case-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.case-kicker span { margin-inline: 12px; color: #a5a099; }
.case-hero { background: #f5f2ec; padding: 32px 0 0; }
.case-back { display: inline-block; font-size: 13px; color: #666; padding-block: 8px; }
.case-back:hover { color: var(--accent); }
.case-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; padding: 44px 0 64px; align-items: center; }
.case-hero h1 { font-size: clamp(42px,4.5vw,66px); font-weight: 600; max-width: 660px; margin: 24px 0; }
.case-intro { max-width: 535px; color: #62605c; font-size: 18px; line-height: 1.6; margin-bottom: 30px; }
.case-text-link { display: inline-flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #bbb4a8; padding-bottom: 10px; }
.case-text-link:hover { color: var(--accent); }
.case-identity { background: #181b1a; color: #fff; padding: 28px 32px; position: relative; overflow: hidden; min-height: 340px; }
.case-identity-top { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #b9bdb6; }
.case-client-name { position: relative; z-index: 1; font-size: clamp(32px,3.8vw,53px); font-weight: 600; letter-spacing: -.05em; margin: 35px 0 5px; }
.case-sector { position: relative; z-index: 1; color: #b9bdb6; font-size: 13px; }
.case-line-art { position: absolute; right: -15px; top: 75px; width: 125px; transform: rotate(-30deg); opacity: .3; }
.case-line-art span { display: block; height: 33px; margin-bottom: 11px; border: 1px solid #dd743a; transform: skew(-25deg); }
.case-facts { margin: 42px 0 0; font-size: 12px; position: relative; }
.case-facts div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; border-top: 1px solid #3c403c; padding-top: 12px; margin-top: 12px; }
.case-facts dt { color: #a8ada6; }
.case-facts dd { margin: 0; line-height: 1.5; }
.case-metrics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); border-top: 1px solid #d5d0c7; padding: 28px 0 32px; gap: 28px; }
.case-metric { display: flex; align-items: center; gap: 20px; }
.case-metric + .case-metric { padding-left: 28px; border-left: 1px solid #d5d0c7; }
.case-metric strong { white-space: nowrap; font-size: clamp(28px,3vw,43px); letter-spacing: -.05em; font-weight: 600; }
.case-metric span { display: block; font-size: 13px; font-weight: 600; }
.case-metric small { display: block; max-width: 170px; color: #77736c; font-size: 11px; line-height: 1.5; margin-top: 5px; }
.case-overview { padding: 55px 0; border-bottom: 1px solid #e9e6df; }
.case-overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
.case-step { color: var(--accent); font-size: 11px; display: block; margin-bottom: 16px; }
.case-overview h2 { font-size: 24px; margin-bottom: 14px; }
.case-overview p { font-size: 15px; line-height: 1.65; color: #6b6862; margin: 0; }
.case-story-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 90px; padding-block: 70px 80px; align-items: start; }
.case-sidebar { position: sticky; top: 110px; }
.case-sidebar nav a { display: flex; gap: 16px; padding: 12px 0; font-size: 13px; border-bottom: 1px solid #eeeae3; }
.case-sidebar nav a span { font-size: 10px; color: #9c968e; margin-top: 3px; }
.case-sidebar nav a:hover { color: var(--accent); }
.case-byline { margin-top: 34px; display: grid; gap: 7px; font-size: 13px; }
.case-byline span,.case-byline small { font-size: 11px; color: #888178; }
.case-byline a { font-weight: 600; }
.case-story { min-width: 0; max-width: 810px; }
.case-chapter { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid #eeeae3; }
.case-story h2 { font-size: clamp(26px,2.4vw,34px); max-width: 650px; margin-bottom: 23px; scroll-margin-top: 115px; }
.case-story p { font-size: 16px; line-height: 1.8; color: #5e5c57; margin-bottom: 18px; }
.case-story p:last-child { margin-bottom: 0; }
.case-story ul { padding-left: 22px; margin: 20px 0; color: #5e5c57; font-size: 16px; line-height: 1.8; }
.case-story li + li { margin-top: 10px; }
.case-story li::marker { color: var(--accent); }
.case-story p a { color: #a7470a; text-decoration: underline; text-underline-offset: 3px; }
.case-story p strong { color: #181b1a; font-weight: 600; }
.case-story .case-result { background: #f5f2ec; padding: 34px; border: 0; border-left: 3px solid var(--accent); }
.case-story table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 13px; line-height: 1.6; }
.case-story th { text-align: left; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; color: #746d62; }
.case-story th,.case-story td { padding: 15px 12px 15px 0; border-bottom: 1px solid #ddd7cc; vertical-align: top; }
.case-story td:first-child { width: 31%; font-weight: 600; }
.case-story .article-method { background: transparent; border: 0; border-top: 1px solid #ddd7cc; padding: 28px 0; margin: 0 0 25px; }
.case-story .article-method h2 { font-size: 21px; }
.case-story .article-method p { font-size: 13px; line-height: 1.7; }
.case-story .article-method .article-summary__label { color: var(--accent); font-size: 10px; }
.case-faq h2 { font-size: 27px; }
.case-faq details { border-bottom: 1px solid #e3ded6; }
.case-faq summary { cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; font-size: 15px; font-weight: 500; list-style: none; }
.case-faq summary::-webkit-details-marker { display: none; }
.case-faq summary span { color: var(--accent); font-size: 20px; }
.case-faq details[open] summary span { transform: rotate(45deg); }
.case-faq details p { font-size: 14px; padding-bottom: 18px; }
.case-end { padding: 70px 0; background: #eae4d9; }
.case-end-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 100px; align-items: center; }
.case-end h2 { font-size: clamp(32px,3.4vw,48px); max-width: 600px; }
.case-end p:not(.case-kicker) { line-height: 1.7; color: #6c655c; font-size: 15px; max-width: 450px; }
.case-end .btn { margin-top: 12px; gap: 30px; }
.case-next { border-left: 1px solid #c8beb0; padding: 10px 0 10px 40px; position: relative; }
.case-next > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.case-next strong { display: block; font-size: 35px; letter-spacing: -.045em; margin: 22px 0 8px; }
.case-next-arrow { font-size: 30px; color: var(--accent); }
.case-next:hover strong { color: var(--accent); }
.case-showcase { padding: 75px 0 85px; background: #fff; scroll-margin-top: 95px; }
.case-showcase-heading { max-width: 680px; margin-bottom: 38px; }
.case-showcase-heading h2 { font-size: clamp(32px,3.8vw,49px); margin-bottom: 18px; }
.case-showcase-heading > p:last-child { color: #77716a; line-height: 1.7; font-size: 16px; }
.case-showcase-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.case-project-card { display: flex; flex-direction: column; padding: 34px; background: #eeebe4; transition: transform .2s, box-shadow .2s; }
.case-project-card:first-child { background: #1e2420; color: #fff; }
.case-project-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px #00000014; }
.case-project-top { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.case-project-top span:last-child { font-size: 23px; line-height: 1; }
.case-project-client { font-size: clamp(35px,4.5vw,63px); font-weight: 600; letter-spacing: -.05em; margin-top: 40px; }
.case-project-sector { opacity: .65; font-size: 12px; margin-top: 8px; }
.case-project-rule { height: 1px; background: currentColor; opacity: .18; margin: 22px 0 26px; }
.case-project-card h3 { font-size: 28px; max-width: 390px; margin-bottom: 15px; }
.case-project-description { font-size: 14px; line-height: 1.7; opacity: .72; max-width: 430px; }
.case-project-bottom { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: auto; padding-top: 30px; }
.case-project-bottom strong { font-size: 38px; letter-spacing: -.04em; display: block; }
.case-project-bottom span { font-size: 11px; }
.case-project-bottom > span { border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.case-page a:focus-visible,.case-showcase a:focus-visible,.case-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@media (max-width: 1050px) {
  .case-hero-grid { gap: 35px; }
  .case-metric { display: block; }
  .case-metric > div { margin-top: 8px; }
  .case-story-layout { grid-template-columns: 190px minmax(0,1fr); gap: 40px; }
  .case-end-grid { gap: 40px; }
}
@media (max-width: 720px) {
  .case-hero { padding-top: 20px; }
  .case-hero-grid { grid-template-columns: 1fr; padding: 28px 0 32px; gap: 30px; }
  .case-hero h1 { font-size: clamp(38px,9vw,54px); margin: 20px 0; }
  .case-intro { font-size: 16px; }
  .case-identity { padding: 24px; min-height: 0; }
  .case-client-name { font-size: 42px; margin-top: 24px; }
  .case-facts { margin-top: 25px; }
  .case-metrics { gap: 12px; padding: 25px 0; }
  .case-metric + .case-metric { padding-left: 12px; }
  .case-metric strong { font-size: clamp(23px,6vw,31px); }
  .case-metric span { font-size: 11px; line-height: 1.4; }
  .case-metric small { font-size: 10px; }
  .case-overview { padding: 34px 0; }
  .case-overview-grid { grid-template-columns: 1fr; gap: 26px; }
  .case-overview-grid > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; }
  .case-step { grid-row: span 2; padding-top: 4px; }
  .case-overview h2 { font-size: 22px; margin-bottom: 8px; }
  .case-overview p { font-size: 14px; }
  .case-story-layout { display: block; padding-block: 32px 45px; }
  .case-sidebar { position: static; margin-bottom: 36px; }
  .case-sidebar nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .case-sidebar nav .case-kicker { width: 100%; margin-bottom: 5px; }
  .case-sidebar nav a { font-size: 11px; gap: 6px; padding-block: 9px; }
  .case-byline { margin-top: 22px; }
  .case-story h2 { font-size: 28px; }
  .case-story p { font-size: 15px; line-height: 1.75; }
  .case-story ul { font-size: 15px; line-height: 1.75; }
  .case-chapter { padding-bottom: 24px; margin-bottom: 28px; }
  .case-story .case-result { padding: 24px 20px; margin-inline: -8px; }
  .case-story td { font-size: 12px; }
  .case-end { padding: 42px 0; }
  .case-end-grid { grid-template-columns: 1fr; gap: 35px; }
  .case-next { border-left: 0; border-top: 1px solid #c8beb0; padding: 25px 0 0; }
  .case-showcase { padding: 40px 0; }
  .case-showcase-grid { grid-template-columns: 1fr; gap: 18px; }
  .case-project-card { padding: 25px; }
  .case-project-client { font-size: 46px; }
  .case-project-card h3 { font-size: 26px; }
  .case-project-bottom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .case-project-card { transition: none; } .case-project-card:hover { transform: none; } }