/* Chapter 05: editable strategy text, cards and concept illustration. */
.strategy-reference { position: relative; isolation: isolate; overflow: hidden; padding: 43px 0 34px; color: #080e26; background: radial-gradient(ellipse at 38% 66%, #e5f0ff 0, transparent 55%), linear-gradient(120deg, #f8fbff, #f2f8ff 65%, #f7fbff); }
.strategy-reference::before { content: ''; position: absolute; z-index: -1; top: -195px; right: -265px; width: 520px; height: 450px; border: 1px solid #fff; border-radius: 50%; background: #dceaff55; box-shadow: -80px -120px 0 10px #dceaff3b; }
.strategy-reference::after { content: ''; position: absolute; z-index: -1; left: 6px; bottom: 134px; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(120deg, #e6f1ff, #dbeaff); box-shadow: 1650px 50px 0 15px #deecff66; }
.strategy-reference .strategy-shell { width: 90.5%; max-width: 1810px; margin-left: 5.5%; }
.strategy-reference .strategy-reference-layout { display: grid; grid-template-columns: 36.3% minmax(0, 1fr); gap: 2.7%; align-items: start; }
.strategy-reference .strategy-reference-layout > * { min-width: 0; }
.strategy-reference .strategy-kicker { color: #566f9a; font-size: 13px; font-weight: 500; line-height: 1.7; letter-spacing: .13em; }
.strategy-reference h2 { margin-top: 20px; max-width: none; font-size: clamp(37px, 3.6vw, 70px); line-height: 1.27; font-weight: 700; letter-spacing: -.025em; text-wrap: initial; }
.strategy-reference h2 span { display: block; }
.strategy-reference .strategy-subtitle { margin-top: 17px; color: #5d78a6; font-size: clamp(10px, .72vw, 14px); letter-spacing: .2em; line-height: 1.8; white-space: nowrap; }
.strategy-reference .strategy-concept { position: relative; width: calc(100% + 18px); height: clamp(390px, 24.6vw, 492px); margin: 28px 0 0 -18px; }
.strategy-reference .strategy-concept::before { content: ''; position: absolute; z-index: -1; top: 75px; left: 120px; width: 345px; height: 270px; border-radius: 50%; background: linear-gradient(140deg, #d4e5ff88, #f8fbff); transform: rotate(-32deg); }
.strategy-reference .strategy-concept::after { content: ''; position: absolute; z-index: -1; width: 510px; height: 110px; left: -155px; top: 245px; background: #ffffffb3; border-radius: 50%; transform: rotate(-35deg); }
.strategy-reference .strategy-transition { position: absolute; top: 3%; left: 26%; width: 50%; height: auto; }
.strategy-reference .strategy-model { position: absolute; padding: 25px 23px; border: 1px solid #fff; border-radius: 18px; background: linear-gradient(125deg, #ffffffed, #ffffff8f); box-shadow: 0 24px 46px #cbdef64d; transform: skewY(-8deg); }
.strategy-reference .strategy-model-before { top: 14.5%; left: 0; width: 35.3%; min-height: 226px; padding-block: 18px; }
.strategy-reference .strategy-model-after { top: 13%; left: 52.2%; width: 46.3%; min-height: 311px; }
.strategy-reference .strategy-model-heading { display: flex; align-items: center; gap: 13px; }
.strategy-reference .strategy-model-heading > div { min-width: 0; }
.strategy-reference .strategy-model h3 { font-size: clamp(16px, 1.12vw, 22px); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.strategy-reference .strategy-model-heading p { margin-top: 3px; color: #58739f; font-size: clamp(12px, .89vw, 17px); line-height: 1.6; white-space: nowrap; }
.strategy-reference .strategy-model-after h3 { font-size: clamp(19px, 1.4vw, 27px); }
.strategy-reference .strategy-model-after .strategy-model-heading p { font-size: clamp(13px, .98vw, 18px); }
.strategy-reference .strategy-model-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 55px; color: #3372ff; border-radius: 12px; background: #fff9; box-shadow: 0 7px 13px #deebfa66; }
.strategy-reference .strategy-model-icon svg { width: 36px; height: 36px; }
.strategy-reference .strategy-model-before .strategy-model-icon { width: 43px; height: 47px; }
.strategy-reference .strategy-model ul { display: grid; gap: 17px; margin-top: 30px; }
.strategy-reference .strategy-model li { display: flex; align-items: center; gap: 15px; color: #536d97; font-size: clamp(13px, .99vw, 19px); line-height: 1.65; white-space: nowrap; }
.strategy-reference .strategy-model-before li::before { content: ''; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: #c8ddff; }
.strategy-reference .strategy-model-before ul { gap: 13px; }
.strategy-reference .strategy-model-after ul { gap: 13px; margin-top: 27px; }
.strategy-reference .strategy-model-check { display: grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; border-radius: 9px; color: #4b83ff; background: #ffffffc7; }
.strategy-reference .strategy-model-check svg { width: 22px; height: 22px; }
.strategy-reference .strategy-handnote { position: absolute; left: 10%; bottom: 0; color: #91b2ef; font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: 21px; line-height: 1.2; transform: rotate(-12deg); }
.strategy-reference .strategy-handnote svg { width: 204px; height: 32px; margin-top: 1px; }
.strategy-reference .strategy-content { padding-top: 48px; min-width: 0; }
.strategy-reference .strategy-lead { padding-left: 80px; }
.strategy-reference .strategy-lead-copy { max-width: 585px; color: #5c739d; font-size: clamp(17px, 1.13vw, 22px); line-height: 1.72; }
.strategy-reference .strategy-lead-en { position: relative; margin-top: 22px; padding-top: 18px; color: #5d77a4; font-size: 12px; line-height: 1.85; letter-spacing: .22em; }
.strategy-reference .strategy-lead-en::before { content: ''; position: absolute; top: 0; left: 0; width: 39px; height: 1px; background: #aec6f2; }
.strategy-reference .strategy-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.strategy-reference .strategy-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 27px; align-items: start; min-width: 0; min-height: 202px; padding: 18px 24px 19px; border: 1px solid #fff; border-radius: 18px; background: linear-gradient(130deg, #ffffffed, #ffffffb0); box-shadow: 0 12px 30px #d3e2f733; }
.strategy-reference .strategy-card-icon { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid #e6efff; border-radius: 16px; color: #3674ff; background: linear-gradient(135deg, #edf4ff, #f6faff); box-shadow: 0 7px 14px #d7e6fd5c; }
.strategy-reference .strategy-card-icon svg { width: 42px; height: 42px; }
.strategy-reference .strategy-card-body { min-width: 0; }
.strategy-reference .strategy-card-meta { display: flex; align-items: center; gap: 28px; min-height: 29px; }
.strategy-reference .strategy-card-number { color: #3771e6; font-size: 19px; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; }
.strategy-reference .strategy-card-type { color: #5d74a1; font-size: 11px; line-height: 1.6; font-weight: 500; letter-spacing: .025em; }
.strategy-reference .strategy-card h3 { margin-top: 7px; font-size: clamp(21px, 1.42vw, 28px); font-weight: 700; line-height: 1.5; text-wrap: balance; }
.strategy-reference .strategy-card-copy { margin-top: 8px; color: #5b7199; font-size: clamp(14px, .96vw, 19px); line-height: 1.4; text-wrap: pretty; }
.strategy-reference .strategy-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.strategy-reference .strategy-tags li { padding: 4px 13px; border-radius: 999px; color: #2861d3; background: #eaf2ff; font-family: Arial, 'Portfolio Noto SC', sans-serif; font-size: 13px; line-height: 1.6; white-space: nowrap; }
.strategy-reference .strategy-edge-note { position: absolute; right: 3.4%; top: 51px; color: #8ca5d0; font-size: 9px; line-height: 2.2; text-align: right; letter-spacing: .17em; }
.strategy-reference .strategy-edge-note::before { content: ''; display: block; width: 18px; height: 1px; margin: 0 0 17px auto; background: #88a4d1; }
.strategy-reference .strategy-takeaway { display: grid; grid-template-columns: 162px minmax(0, 1fr) 117px; gap: 74px; align-items: center; margin-top: 30px; padding-top: 28px; border-top: 1px solid #bbd0ee; }
.strategy-reference .strategy-takeaway-label { align-self: stretch; display: flex; align-items: center; border-right: 1px solid #bbd0ee; color: #6b83af; font-size: 12px; line-height: 1.8; letter-spacing: .07em; }
.strategy-reference .strategy-takeaway-copy { margin: 0; color: #0d1530; font-size: clamp(23px, 1.72vw, 33px); line-height: 1.6; font-weight: 700; letter-spacing: -.025em; text-wrap: initial; }
.strategy-reference .strategy-takeaway-copy strong { color: #2d6fff; font-weight: 700; }
.strategy-reference .strategy-echo { margin: 0; color: #8ba4cc; font-size: 9px; line-height: 1.8; letter-spacing: .09em; }
.strategy-reference .strategy-phrase { white-space: nowrap; }
.strategy-reference .strategy-echo::after { content: ''; display: block; width: 18px; height: 1px; margin-top: 10px; background: #94afe1; }
@media (min-width: 2001px) { .strategy-reference .strategy-shell { margin-inline: auto; } }
@media (max-width: 1500px) {
  .strategy-reference .strategy-content { padding-top: 42px; }
  .strategy-reference .strategy-lead { padding-left: 45px; }
  .strategy-reference .strategy-lead-copy { max-width: 500px; font-size: 17px; }
  .strategy-reference .strategy-lead-en { font-size: 10px; }
  .strategy-reference .strategy-card { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding-inline: 18px; }
  .strategy-reference .strategy-card-icon { width: 58px; height: 64px; }
  .strategy-reference .strategy-card-icon svg { width: 35px; height: 35px; }
  .strategy-reference .strategy-card-meta { gap: 18px; }
  .strategy-reference .strategy-card-type { font-size: 9px; }
  .strategy-reference .strategy-tags { gap: 5px; }
  .strategy-reference .strategy-tags li { padding-inline: 9px; font-size: 11px; }
  .strategy-reference .strategy-model { padding: 21px 16px; }
  .strategy-reference .strategy-model-heading { gap: 9px; }
  .strategy-reference .strategy-model-icon { width: 40px; height: 49px; }
  .strategy-reference .strategy-model-before .strategy-model-icon { width: 34px; height: 43px; }
  .strategy-reference .strategy-model-icon svg { width: 29px; height: 29px; }
  .strategy-reference .strategy-model-after { min-height: 285px; }
  .strategy-reference .strategy-model-check { width: 27px; height: 29px; }
  .strategy-reference .strategy-model li { gap: 10px; }
  .strategy-reference .strategy-handnote { font-size: 18px; }
  .strategy-reference .strategy-takeaway { grid-template-columns: 125px minmax(0, 1fr) 95px; gap: 42px; }
  .strategy-reference .strategy-takeaway-copy { font-size: 23px; }
  .strategy-reference .strategy-edge-note { font-size: 8px; }
}
@media (max-width: 1150px) {
  .strategy-reference { padding: 36px 0; }
  .strategy-reference .strategy-shell { width: calc(100% - 64px); margin-inline: auto; }
  .strategy-reference .strategy-reference-layout { grid-template-columns: 1fr; gap: 20px; }
  .strategy-reference h2 { font-size: clamp(42px, 5.5vw, 58px); }
  .strategy-reference .strategy-subtitle { font-size: 11px; white-space: normal; }
  .strategy-reference .strategy-concept { width: 570px; max-width: 100%; margin-left: 0; height: 430px; }
  .strategy-reference .strategy-model h3 { font-size: 19px; }
  .strategy-reference .strategy-model-after h3 { font-size: 23px; }
  .strategy-reference .strategy-model-heading p { font-size: 14px; }
  .strategy-reference .strategy-model-after .strategy-model-heading p { font-size: 16px; }
  .strategy-reference .strategy-model li { font-size: 16px; }
  .strategy-reference .strategy-model-before { min-height: 226px; }
  .strategy-reference .strategy-model-after { min-height: 305px; }
  .strategy-reference .strategy-content { padding-top: 0; }
  .strategy-reference .strategy-lead { padding-left: 0; }
  .strategy-reference .strategy-lead-copy { max-width: 720px; font-size: 18px; }
  .strategy-reference .strategy-lead-en { font-size: 11px; }
  .strategy-reference .strategy-card h3 { font-size: 21px; }
  .strategy-reference .strategy-card-copy { font-size: 16px; line-height: 1.6; }
  .strategy-reference .strategy-tags li { font-size: 12px; }
  .strategy-reference .strategy-card-type { font-size: 10px; }
  .strategy-reference .strategy-edge-note { display: none; }
  .strategy-reference .strategy-takeaway { grid-template-columns: 100px minmax(0, 1fr); gap: 28px; }
  .strategy-reference .strategy-takeaway-copy { font-size: 25px; }
  .strategy-reference .strategy-echo { grid-column: 2; }
}
@media (max-width: 700px) {
  .strategy-reference { padding: 30px 0; }
  .strategy-reference .strategy-shell { width: calc(100% - 40px); }
  .strategy-reference .strategy-kicker { font-size: 12px; }
  .strategy-reference h2 { font-size: clamp(29px, 8.2vw, 45px); line-height: 1.4; margin-top: 20px; }
  .strategy-reference .strategy-subtitle { margin-top: 14px; font-size: 9px; letter-spacing: .12em; }
  .strategy-reference .strategy-concept { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; height: auto; margin-top: 32px; padding-bottom: 62px; }
  .strategy-reference .strategy-model { position: relative; top: auto; left: auto; width: 100%; min-height: 0; padding: 22px 24px; transform: none; border-radius: 16px; }
  .strategy-reference .strategy-model-before ul { gap: 10px; margin-top: 20px; }
  .strategy-reference .strategy-model-after ul { gap: 12px; margin-top: 22px; }
  .strategy-reference .strategy-model-heading { gap: 14px; }
  .strategy-reference .strategy-model-before .strategy-model-icon, .strategy-reference .strategy-model-icon { width: 46px; height: 50px; }
  .strategy-reference .strategy-model-after h3 { font-size: 23px; }
  .strategy-reference .strategy-model li { font-size: 15px; }
  .strategy-reference .strategy-model-before::after { content: '↓'; position: absolute; bottom: -29px; left: 40px; color: #77a1f5; font: 26px/30px Arial, sans-serif; }
  .strategy-reference .strategy-transition { display: none; }
  .strategy-reference .strategy-handnote { left: auto; right: 0; bottom: 0; font-size: 14px; transform: rotate(-6deg); }
  .strategy-reference .strategy-handnote svg { display: none; }
  .strategy-reference .strategy-lead-copy { font-size: 16px; line-height: 1.8; }
  .strategy-reference .strategy-lead-en { font-size: 9px; line-height: 1.9; letter-spacing: .12em; }
  .strategy-reference .strategy-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .strategy-reference .strategy-card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 19px 17px 21px; border-radius: 16px; }
  .strategy-reference .strategy-card-icon { width: 44px; height: 49px; border-radius: 12px; }
  .strategy-reference .strategy-card-icon svg { width: 28px; height: 28px; }
  .strategy-reference .strategy-card-meta { gap: 14px; }
  .strategy-reference .strategy-card-number { font-size: 17px; }
  .strategy-reference .strategy-card-type { font-size: 9px; }
  .strategy-reference .strategy-card h3 { font-size: 20px; }
  .strategy-reference .strategy-card-copy { font-size: 14px; line-height: 1.65; }
  .strategy-reference .strategy-tags { margin-top: 12px; gap: 6px; }
  .strategy-reference .strategy-tags li { font-size: 11px; padding-inline: 10px; }
  .strategy-reference .strategy-takeaway { grid-template-columns: 1fr; gap: 16px; margin-top: 27px; padding-top: 23px; }
  .strategy-reference .strategy-takeaway-label { border-right: 0; font-size: 10px; }
  .strategy-reference .strategy-takeaway-label br { display: none; }
  .strategy-reference .strategy-takeaway-copy { font-size: 23px; line-height: 1.65; }
  .strategy-reference .strategy-echo { grid-column: auto; margin-top: 4px; }
}