.hp-case { color: var(--ink, #1a1c1c); background: var(--paper, #faf9f5); }
.hp-case *, .hp-case *::before, .hp-case *::after { box-sizing: border-box; }
.hp-case h1, .hp-case h2, .hp-case h3, .hp-case h4, .hp-case p, .hp-case figure, .hp-case dl, .hp-case dd, .hp-case blockquote { margin: 0; }
.hp-case h1, .hp-case h2, .hp-case h3, .hp-case h4 { font-family: Merriweather, Georgia, serif; font-weight: 500; }
.hp-case p, .hp-case li, .hp-case dt, .hp-case dd, .hp-case a { font-family: 'Merriweather Sans', Arial, sans-serif; }
.hp-case a { color: inherit; }
.hp-case-mobile { display: none; }
.hp-case a:focus-visible, .hp-case-reports:focus-visible { outline: 3px solid var(--accent, #ea6c11); outline-offset: 5px; }
.hp-case-header { display: grid; grid-template-columns: 65% 35%; min-height: 440px; border: 1px solid var(--line, #c6c6c6); border-top: 0; }
.hp-case-intro { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 64px; border-right: 1px solid var(--line, #c6c6c6); }
.hp-case h1 { font-size: clamp(32px, 3.34vw, 48px); line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; }
.hp-case-intro > p { font-size: 18px; line-height: 1.5; color: var(--muted, #5d5f5f); }
.hp-case-meta { display: grid; align-content: center; gap: 24px; padding: 64px; }
.hp-case-meta dt { margin-bottom: 8px; font-size: 12px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--muted, #5d5f5f); }
.hp-case-meta dd { font-size: 18px; line-height: 1.5; font-weight: 700; }
.hp-case-hero { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.hp-case-hero--dark { background: #0b1014; }
.hp-case-hero--paper { background: var(--paper, #faf9f5); }
.hp-case-hero > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hp-case-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.hp-case-sidebar { border-right: 1px solid var(--line, #c6c6c6); padding: 64px 32px; }
.hp-case-sidebar nav { position: sticky; top: 92px; display: grid; gap: 24px; }
.hp-case-sidebar a { font-size: 14px; line-height: 1.5; text-decoration: none; color: var(--muted, #5d5f5f); }
.hp-case-sidebar a:hover { color: var(--accent, #ea6c11); }
.hp-case-content { min-width: 0; display: grid; gap: 64px; padding: 64px; }
.hp-case-section { min-width: 0; scroll-margin-top: 92px; }
.hp-case-section > h2, .hp-case-related > h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.04em; }
.hp-case-section > h2 { margin-bottom: 16px; }
.hp-case-section > p, .hp-case-list { font-size: 18px; line-height: 1.5; color: #454747; }
.hp-case-section > p + p { margin-top: 20px; }
.hp-case-section > .hp-case-primary.hp-case-copy-first { margin-top: 0; }
.hp-case-section--challenge { padding: 32px; background: #fff0e9; }
.hp-case-section--challenge > h2 { color: #c34d22; }
.hp-case-list { padding-left: 24px; margin: 20px 0 0; }
.hp-case-list li + li { margin-top: 8px; }
.hp-case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f5f4f0; margin-top: 32px !important; padding: 24px 16px; gap: 16px; }
.hp-case-metrics > div { display: flex; flex-direction: column-reverse; justify-content: end; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.hp-case-metrics dt { font-size: 14px; line-height: 1.5; color: var(--muted, #5d5f5f); }
.hp-case-metrics dd { font-family: Merriweather, Georgia, serif; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.03em; color: var(--accent, #ea6c11); overflow-wrap: anywhere; }
#case-starting-point .hp-case-metrics dd { color: #3a78c6; }
.hp-case-subtitle { font-size: 24px; line-height: 1.3; margin: 32px 0 16px !important; }
.hp-case-boards { display: grid; gap: 32px; margin-top: 32px; }
.hp-case-boards--stack { max-width: 800px; margin-inline: auto; }
.hp-case-boards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.hp-board { padding: 32px; background: var(--surface, #efeee6); min-width: 0; }
.hp-board .hp-board-label { font-size: 13px; line-height: 1.4; letter-spacing: 1.3px; color: var(--accent, #ea6c11); margin-bottom: 16px; }
.hp-board > h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.hp-board-intro { color: var(--muted, #5d5f5f); font-size: 16px; line-height: 1.5; margin-top: 12px !important; }
.hp-board-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.hp-board-card { padding: 24px; background: var(--paper, #faf9f5); min-width: 0; }
.hp-board-card h4 { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; }
.hp-board-card p { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--muted, #5d5f5f); }
.hp-board-note { font-size: 15px; line-height: 1.4; color: var(--muted, #5d5f5f); margin-top: 24px !important; }
.hp-board--comparison { min-height: 508px; }
.hp-case--parababies .hp-board--comparison { min-height: 450px; }
.hp-board--journey { min-height: 500px; }
.hp-case--parababies .hp-board--journey { min-height: 446px; }
.hp-board--journey .hp-board-card { padding: 20px; }
.hp-board--journey .hp-board-card h4 { font-size: 22px; }
.hp-board--journey .hp-board-card p { font-size: 15px; margin-top: 12px; }
.hp-board--cycle { min-height: 643px; }
.hp-board--cycle .hp-board-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-board--cycle .hp-board-card { min-height: 250px; }
.hp-board--cycle .hp-board-card p { font-size: 18px; }
.hp-board-banner { padding: 30px; margin-top: 24px !important; background: var(--accent, #ea6c11); color: #141414; font-family: Merriweather, Georgia, serif !important; font-size: 28px; line-height: 1.4; }
.hp-board--funnel { min-height: 500px; }
.hp-board--funnel .hp-board-cards { display: flex; align-items: center; flex-direction: column; gap: 12px; }
.hp-board--funnel .hp-board-card { width: 100%; padding: 22px; text-align: center; }
.hp-board--funnel .hp-board-card h4 { font-family: 'Merriweather Sans', Arial, sans-serif; font-size: 16px; line-height: 1.4; }
.hp-board--funnel .hp-board-card:nth-child(2) { width: 84%; }
.hp-board--funnel .hp-board-card:nth-child(3) { width: 68%; }
.hp-board--funnel .hp-board-card:nth-child(4) { width: 52%; }
.hp-board--funnel .hp-board-card:last-child { background: var(--accent, #ea6c11); }
.hp-board--tall { min-height: 1000px; }
.hp-board--tall .hp-board-cards { gap: 28px; }
.hp-board--tall .hp-board-card { padding: 54px 24px; }
.hp-board--tall .hp-board-card h4 { font-size: 24px; }
.hp-board--tall .hp-board-note { padding: 32px; background: var(--paper, #faf9f5); font-size: 18px; }
.hp-board--principles { min-height: 468px; }
.hp-board--principles .hp-board-label { font-size: 11px; letter-spacing: 1px; }
.hp-board--principles > h3 { font-size: 28px; }
.hp-board--principles .hp-board-cards { grid-template-columns: 1fr; gap: 24px; }
.hp-board--principles .hp-board-card { background: transparent; border-top: 1px solid var(--line, #c6c6c6); padding: 14px 0 0; }
.hp-board--principles .hp-board-card h4 { font-family: 'Merriweather Sans', Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.4; }
.hp-board--principles .hp-board-card p { margin-top: 4px; font-size: 15px; }
.hp-board--dark { background: #141414; color: var(--paper, #faf9f5); }
.hp-board--dark .hp-board-card { border-color: #454747; }
.hp-board--dark .hp-board-card p { color: #b9bbbb; }
.hp-case-reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 16px; margin-top: 24px; }
.hp-case-report { min-width: 0; overflow: hidden; border-radius: 16px; background: var(--paper, #faf9f5); }
.hp-case-report--wide { grid-column: 1 / -1; }
.hp-case-report a { display: block; }
.hp-case-report img { display: block; width: 100%; height: auto; }
.hp-case-reports--scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 0 0 12px; scrollbar-color: var(--line, #c6c6c6) transparent; }
.hp-case-reports--scroll .hp-case-report { flex: 0 0 43.4%; scroll-snap-align: start; }
.hp-case-reports--scroll .hp-case-report img { aspect-ratio: 434 / 300; object-fit: contain; }
.hp-case-section > .hp-case-note { margin-top: 24px; }
.hp-case-quote { margin-top: 24px !important; padding: 32px; background: #242626; color: var(--paper, #faf9f5); }
.hp-case-quote p { font-family: Merriweather, Georgia, serif; font-size: 28px; line-height: 1.4; letter-spacing: -.02em; }
.hp-case-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; }
.hp-case-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; background: #141414; color: #fff; border-radius: 2px; font-size: 14px; text-decoration: none; }
.hp-case-actions a:hover { background: var(--accent, #ea6c11); color: #141414; }
.hp-case-related { padding: 64px max(32px, 8.333%); border: 1px solid var(--line, #c6c6c6); }
.hp-case-related > h2 { text-align: center; margin-bottom: 40px; }
.hp-case-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.hp-case-related-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--line, #c6c6c6); border-radius: 16px; text-decoration: none; min-width: 0; }
.hp-case-related-cover { display: block; width: 100%; height: 215px; object-fit: contain; background: #f5f0eb; border-radius: 10px; }
.hp-case-related-heading { font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.hp-case-related-card p { color: var(--muted, #5d5f5f); font-size: 16px; line-height: 1.5; }
.hp-case-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 769px) { .hp-case--tarz-e-rang .hp-case-related-card { padding: 0; height: 350px; overflow: hidden; } .hp-case--tarz-e-rang .hp-case-related-cover { height: 100%; border-radius: 15px; } .hp-case--tarz-e-rang .hp-case-related-card p, .hp-case--tarz-e-rang .hp-case-related-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 1100px) and (min-width: 769px) { .hp-case-body { grid-template-columns: 210px minmax(0, 1fr); } .hp-case-content, .hp-case-intro, .hp-case-meta { padding: 40px; } .hp-board { padding: 24px; } .hp-board-card { padding: 16px; } .hp-board-card h4 { font-size: 22px; } .hp-board--cycle .hp-board-cards { grid-template-columns: 1fr; } .hp-board--cycle .hp-board-card { min-height: 0; } }
@media (max-width: 768px) {
    .hp-case-desktop { display: none !important; }
    .hp-case-mobile { display: block; }
    .hp-case-header { grid-template-columns: 1fr; min-height: 0; }
    .hp-case-intro { padding: 32px; border-right: 0; border-bottom: 1px solid var(--line, #c6c6c6); min-height: 275px; }
    .hp-case h1 { font-size: 32px; }
    .hp-case-intro > p { font-size: 16px; }
    .hp-case-meta { padding: 32px; gap: 24px; }
    .hp-case-meta dd { font-size: 16px; }
    .hp-case-body { display: block; }
    .hp-case-sidebar { display: none; }
    .hp-case-content { padding: 32px 24px; gap: 48px; }
    .hp-case-section > h2, .hp-case-related > h2 { font-size: 25px; }
    .hp-case-section > p, .hp-case-list { font-size: 16px; }
    .hp-case-section--challenge { padding: 24px; }
    .hp-case-metrics { padding: 20px 12px; gap: 8px; }
    .hp-case-metrics dd { font-size: 18px; overflow-wrap: normal; }
    .hp-case-metrics dt { font-size: 12px; }
    .hp-case-subtitle { font-size: 20px; }
    .hp-case-boards { gap: 24px; margin-top: 24px; }
    .hp-case-boards--pair { grid-template-columns: 1fr; }
    .hp-board { padding: 24px; min-height: 0 !important; }
    .hp-board .hp-board-label { font-size: 10px; letter-spacing: .8px; }
    .hp-board > h3 { font-size: 24px; }
    .hp-board-intro, .hp-board-card p, .hp-board-note { font-size: 14px; }
    .hp-board-cards, .hp-board--cycle .hp-board-cards { grid-template-columns: 1fr; gap: 12px; }
    .hp-board-card { padding: 20px; min-height: 0 !important; }
    .hp-board-card h4, .hp-board--journey .hp-board-card h4 { font-size: 20px; }
    .hp-board--cycle .hp-board-card p { font-size: 15px; }
    .hp-board-banner { padding: 24px; font-size: 22px; }
    .hp-board--funnel .hp-board-card { padding: 24px 12px; }
    .hp-board--funnel .hp-board-card h4 { font-size: 14px; }
    .hp-board--tall .hp-board-card { padding: 36px 12px; }
    .hp-board--tall .hp-board-card h4 { font-size: 18px; }
    .hp-board--tall .hp-board-note { padding: 20px; font-size: 15px; }
    .hp-board--principles .hp-board-card { padding: 14px 0 0; }
    .hp-board--compact > h3 { font-size: 18px; }
    .hp-board--compact .hp-board-cards { gap: 16px; margin-top: 24px; }
    .hp-board--compact .hp-board-card { padding: 0; background: transparent; }
    .hp-board--compact .hp-board-card h4 { font-family: 'Merriweather Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; }
    .hp-board--compact .hp-board-note { font-size: 12px; }
    .hp-board--compact.hp-board--principles .hp-board-card { padding-top: 12px; }
    .hp-board--compact.hp-board--principles .hp-board-card h4, .hp-board--compact.hp-board--principles .hp-board-card p { font-size: 13px; }
    .hp-case-reports { grid-template-columns: 1fr; gap: 24px; }
    .hp-case-reports--scroll .hp-case-report { flex-basis: 100%; }
    .hp-case-reports--scroll .hp-case-report img { aspect-ratio: auto; }
    .hp-case-quote { padding: 24px; }
    .hp-case-quote p { font-size: 22px; }
    .hp-case-related { padding: 32px 24px; }
    .hp-case-related > h2 { font-size: 24px; margin-bottom: 32px; }
    .hp-case-related-grid { grid-template-columns: 1fr; gap: 16px; }
    .hp-case-related-card { gap: 12px; }
    .hp-case-related-cover { height: auto; aspect-ratio: 310 / 186.8125; }
    .hp-case-related-heading { font-size: 18px; line-height: 1.25; }
    .hp-case-related-card p { font-size: 16px; }
    .hp-case--skindrops .hp-case-content, .hp-case--beauty-botanic .hp-case-content { padding: 40px 32px; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { html:not(.hp-motion-override) .hp-case *, html:not(.hp-motion-override) .hp-case *::before, html:not(.hp-motion-override) .hp-case *::after { scroll-behavior: auto !important; transition: none !important; } }