/* HIMART WAYS — canonical page stylesheet
   Single source of truth for himart-ways.html.
   Consolidated 2026-09-19 from the former v2–v16 incremental layers.
   Future Ways visual edits belong in this file only; do not add numbered override layers.
*/


/* ===== consolidated from design-system/components/himart-ways-v2.css ===== */
/* HIMART WAYS — operating model case-study layer v2.0
   Shared typography, hero, section rhythm and navigation remain design-system owned.
   This file only owns research evidence, role architecture, rollout, simulation and feedback modules.
*/
html body.ways-page{background:#000!important;color:#fff!important;overflow-x:clip!important}
html body.ways-page *,html body.ways-page *::before,html body.ways-page *::after{box-sizing:border-box}
html body.ways-page #live-main{position:relative;background:#000!important}
html body.ways-page .hm-wide-right-rail{min-width:0;width:100%;max-width:100%}

/* AIMMO-inspired evidence rhythm: open grid, line-led, no boxed-card decoration. */
.ways-signal-grid,.ways-quote-grid,.ways-role-grid,.ways-tool-grid,.ways-feedback-grid,.ways-next-grid{display:grid;width:100%;gap:28px}
.ways-signal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ways-quote-grid,.ways-feedback-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ways-role-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ways-tool-grid,.ways-next-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ways-signal-grid article,.ways-quote-grid article,.ways-role-grid article,.ways-tool-grid article,.ways-feedback-grid article,.ways-next-grid article{min-width:0;padding:24px 0 28px;border-top:1px solid var(--hm-line-default)}
.ways-signal-grid article:first-child,.ways-quote-grid article:first-child,.ways-role-grid article:first-child,.ways-tool-grid article:first-child,.ways-feedback-grid article:first-child,.ways-next-grid article:first-child{border-top-color:var(--hm-blue)}
.ways-kicker{display:block;margin:0;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note);text-transform:uppercase}
.ways-signal-grid strong{display:block;margin:30px 0 0;color:#fff;font:300 36px/1 var(--hm-font-en);letter-spacing:var(--hm-track-data-number);font-variant-numeric:tabular-nums}
.ways-signal-grid h4,.ways-role-grid h4,.ways-tool-grid h4,.ways-next-grid h4{margin:26px 0 0!important;color:#fff!important;font:100 22px/1.28 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-signal-grid p,.ways-role-grid p,.ways-tool-grid p,.ways-next-grid p,.ways-feedback-grid p{margin:14px 0 0!important;max-width:29ch!important;color:var(--hm-description-color)!important;font:300 16px/1.52 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-quote-grid strong,.ways-feedback-grid strong{display:block;max-width:30ch;margin:0;color:#fff;font:100 24px/1.36 var(--hm-font-ko);font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group);word-break:keep-all}
.ways-quote-grid article:first-child strong,.ways-feedback-grid article:first-child strong{color:var(--hm-blue)}
.ways-quote-grid span,.ways-feedback-grid span{display:block;margin-top:34px;color:var(--hm-text-tertiary);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}

.ways-synthesis{margin-top:64px;padding:30px 0 0;border-top:1px solid var(--hm-line-default)}
.ways-synthesis>span{display:block;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-synthesis h4{margin:18px 0 0!important;color:#fff!important;font:100 28px/1.28 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-synthesis p{margin:14px 0 0!important;max-width:68ch!important;color:var(--hm-description-color)!important;font:300 16px/1.52 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}

/* AS-IS -> TO-BE comparison. */
.ways-before-after{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:24px;align-items:stretch;width:100%}
.ways-before-after__panel{padding:28px 0 32px;border-top:1px solid var(--hm-line-default);border-bottom:1px solid var(--hm-line-faint)}
.ways-before-after__panel.is-after{border-top-color:var(--hm-blue)}
.ways-before-after__panel>span{display:block;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-before-after__panel h4{margin:26px 0 0!important;color:#fff!important;font:100 28px/1.24 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-before-after__panel ul{margin:24px 0 0;padding:0;list-style:none}
.ways-before-after__panel li{position:relative;margin:12px 0 0;padding-left:18px;color:var(--hm-description-color);font:300 16px/1.48 var(--hm-font-ko);letter-spacing:var(--hm-track-body);word-break:keep-all}
.ways-before-after__panel li::before{content:"";position:absolute;top:.65em;left:0;width:6px;height:1px;background:var(--hm-blue)}
.ways-before-after__arrow{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font:100 34px/1 var(--hm-font-en)}

/* Research-to-decision six-step path. */
.ways-research-path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;border-top:1px solid var(--hm-line-default);border-bottom:1px solid var(--hm-line-faint)}
.ways-research-path article{min-width:0;min-height:220px;padding:26px 20px 30px 0}
.ways-research-path article+article{padding-left:20px;border-left:1px solid var(--hm-line-faint)}
.ways-research-path span{display:block;color:var(--hm-blue);font:400 11px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-research-path h4{margin:32px 0 0!important;color:#fff!important;font:100 20px/1.28 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-research-path p{margin:12px 0 0!important;color:var(--hm-description-color)!important;font:300 13px/1.48 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}

/* Ground rules. */
.ways-rule-list{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--hm-line-default)}
.ways-rule-list article{display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;padding:28px 0;border-bottom:1px solid var(--hm-line-faint)}
.ways-rule-list span{color:var(--hm-blue);font:300 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-rule-list h4{margin:0!important;color:#fff!important;font:100 20px/1.3 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-rule-list p{margin:9px 0 0!important;color:var(--hm-description-color)!important;font:300 15px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}

/* Simulation: explicitly forecast, not measured performance. */
.ways-sim-note{padding:22px 0;border-top:1px solid var(--hm-blue);border-bottom:1px solid var(--hm-line-faint)}
.ways-sim-note strong{display:block;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-sim-note p{margin:12px 0 0!important;max-width:78ch!important;color:var(--hm-description-color)!important;font:300 14px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-assumption-table{display:grid;width:100%;margin-top:40px;border-top:1px solid var(--hm-line-default)}
.ways-assumption-row{display:grid;grid-template-columns:minmax(180px,.9fr) 120px 120px 120px;gap:18px;align-items:center;min-height:74px;border-bottom:1px solid var(--hm-line-faint)}
.ways-assumption-row.is-head{min-height:52px;color:var(--hm-text-tertiary);font:400 11px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-assumption-row>span:first-child{color:#fff;font:300 15px/1.4 var(--hm-font-ko);letter-spacing:var(--hm-track-body)}
.ways-assumption-row.is-head>span:first-child{color:var(--hm-text-tertiary);font:inherit}
.ways-assumption-row b{color:#fff;font:300 18px/1 var(--hm-font-en);letter-spacing:var(--hm-track-data-number);font-variant-numeric:tabular-nums}
.ways-assumption-row b.is-after,.ways-assumption-row b.is-delta{color:var(--hm-blue)}

.ways-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;width:100%}
.ways-impact-grid article{min-width:0;min-height:270px;padding:24px 0 28px;border-top:1px solid var(--hm-line-default)}
.ways-impact-grid article:first-child,.ways-impact-grid article:nth-child(3){border-top-color:var(--hm-blue)}
.ways-impact-grid strong{display:block;color:var(--hm-blue);font:300 clamp(42px,4vw,64px)/.96 var(--hm-font-en);letter-spacing:var(--hm-track-data-number);font-variant-numeric:tabular-nums}
.ways-impact-grid h4{margin:30px 0 0!important;color:#fff!important;font:100 21px/1.3 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-impact-grid p{margin:14px 0 0!important;max-width:26ch!important;color:var(--hm-description-color)!important;font:300 14px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}

.ways-scenario{width:100%;padding-top:30px;border-top:1px solid var(--hm-line-default)}
.ways-scenario__rows{display:grid;gap:18px}
.ways-scenario__row{display:grid;grid-template-columns:120px minmax(0,1fr) 110px;gap:16px;align-items:center}
.ways-scenario__label{color:rgba(255,255,255,.62);font:300 15px/1.3 var(--hm-font-ko);letter-spacing:var(--hm-track-body)}
.ways-scenario__track{height:14px;overflow:hidden;background:rgba(255,255,255,.07)}
.ways-scenario__fill{display:block;width:var(--value);height:100%;background:var(--hm-blue)}
.ways-scenario__value{color:#fff;font:300 17px/1 var(--hm-font-en);letter-spacing:var(--hm-track-data-number);font-variant-numeric:tabular-nums;text-align:right}
.ways-scenario__source{display:block;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--hm-line-faint);color:var(--hm-text-tertiary);font:300 10px/1.5 var(--hm-font-ko);letter-spacing:var(--hm-track-base);word-break:keep-all}

.ways-final-statement{padding:40px 0;border-top:1px solid var(--hm-line-default);border-bottom:1px solid var(--hm-line-faint)}
.ways-final-statement>span{display:block;margin-bottom:24px;color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-final-statement p{margin:0!important;max-width:1050px!important;color:#fff!important;font:100 32px/1.23 var(--hm-font-ko)!important;font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-subsection)!important;word-break:keep-all!important}
.ways-final-statement strong{font-weight:400;font-variation-settings:"wght" 400}

/* Match AIMMO's authored right-rail composition at wide desktop. */
@media(min-width:1600px){
  html body.ways-page.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > .hm-section-head{grid-column:2!important;grid-row:1!important}
  html body.ways-page.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section > .hm-wrap > .hm-wide-right-rail{grid-column:4!important;grid-row:1!important;align-self:start!important;min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
  html body.ways-page.hm-wide-editorial-test.hm-wide-himart-test #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-wide-right-rail > :first-child{margin-top:0!important}
}

@media(max-width:1180px){
  .ways-signal-grid,.ways-role-grid,.ways-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways-research-path{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ways-research-path article:nth-child(4){border-left:0;border-top:1px solid var(--hm-line-faint);padding-left:0}
  .ways-research-path article:nth-child(5),.ways-research-path article:nth-child(6){border-top:1px solid var(--hm-line-faint)}
}
@media(max-width:780px){
  .ways-signal-grid,.ways-quote-grid,.ways-role-grid,.ways-tool-grid,.ways-feedback-grid,.ways-next-grid,.ways-impact-grid,.ways-rule-list{grid-template-columns:1fr}
  .ways-signal-grid article,.ways-role-grid article,.ways-tool-grid article,.ways-feedback-grid article,.ways-next-grid article,.ways-impact-grid article{min-height:0}
  .ways-before-after{grid-template-columns:1fr;gap:18px}
  .ways-before-after__arrow{transform:rotate(90deg);height:38px}
  .ways-research-path{grid-template-columns:1fr}
  .ways-research-path article,.ways-research-path article+article,.ways-research-path article:nth-child(4){min-height:0;padding:24px 0;border-left:0;border-top:1px solid var(--hm-line-faint)}
  .ways-research-path article:first-child{border-top:0}
  .ways-assumption-row{grid-template-columns:minmax(0,1fr) 74px 74px;gap:10px;padding:16px 0}
  .ways-assumption-row>span:nth-child(4),.ways-assumption-row>b:nth-child(4){display:none}
  .ways-assumption-row.is-head>span:nth-child(4){display:none}
  .ways-scenario__row{grid-template-columns:80px minmax(0,1fr) 82px;gap:10px}
  .ways-final-statement p{font-size:26px!important}
}


/* ===== consolidated from design-system/components/himart-ways-v3.css ===== */
/* HIMART WAYS — refinement layer v3.0
   Neutralizes accent rules, borrows HIMART journey-flow geometry, and reuses
   AIMMO reference/impact chart grammar for simulation and expected impact. */

/* No blue top-rule emphasis on this case. Keep blue for labels/data only. */
html body.ways-page :is(
  .ways-signal-grid article,
  .ways-quote-grid article,
  .ways-role-grid article,
  .ways-tool-grid article,
  .ways-feedback-grid article,
  .ways-next-grid article,
  .ways-before-after__panel,
  .ways-before-after__panel.is-after,
  .ways-sim-note,
  .ways-impact-grid article,
  .ways-synthesis,
  .ways-final-statement
){border-top-color:var(--hm-line-default)!important}

/* 01.3 + 02.2 — same visual grammar as HIMART 03.1 JOURNEY FLOW. */
html body.ways-page .ways-hm-flow{
  width:100%!important;
  margin:var(--hm-subtitle-to-content) 0 0!important;
  padding:0!important;
  border-top:0!important;
}
html body.ways-page .ways-hm-flow .flow-groups{display:grid!important;gap:72px!important;width:100%!important}
html body.ways-page .ways-hm-flow .flow-group{
  position:relative!important;
  width:100%!important;
  padding-top:34px!important;
  --line-left:0px!important;
  --line-width:100%!important;
}
html body.ways-page .ways-hm-flow .flow-group::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:1px!important;
  background:var(--hm-line-default)!important;
}
html body.ways-page .ways-hm-flow .flow-label{
  position:absolute!important;
  top:-26px!important;
  left:0!important;
  margin:0!important;
  color:var(--hm-text-tertiary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.4!important;
  letter-spacing:var(--hm-track-body)!important;
  white-space:nowrap!important;
}
html body.ways-page .ways-hm-flow .flow-row{
  display:grid!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
}
html body.ways-page .ways-hm-flow .flow-row.row4{grid-template-columns:252px 48px 252px 48px 252px 48px 252px!important}
html body.ways-page .ways-hm-flow .flow-row.row3{grid-template-columns:252px 48px 252px 48px 252px!important}
html body.ways-page .ways-hm-flow .flow-node{
  display:flex!important;
  width:252px!important;
  height:252px!important;
  min-width:252px!important;
  min-height:252px!important;
  aspect-ratio:1!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
  border:1px solid var(--hm-line-default)!important;
  border-radius:50%!important;
  background:#000!important;
  text-align:center!important;
}
html body.ways-page .ways-hm-flow .flow-node .hm-card-no{
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.ways-page .ways-hm-flow .flow-node h4{
  margin:18px 0 0!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.22!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page .ways-hm-flow .flow-node p{
  margin:12px 0 0!important;
  max-width:18ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:13px!important;
  font-weight:300!important;
  line-height:1.46!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}
html body.ways-page .ways-hm-flow .flow-arrow{
  position:relative!important;
  width:48px!important;
  height:48px!important;
  font-size:0!important;
  color:transparent!important;
}
html body.ways-page .ways-hm-flow .flow-arrow::before{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:17px!important;
  height:17px!important;
  border-top:1px solid rgba(255,255,255,.56)!important;
  border-right:1px solid rgba(255,255,255,.56)!important;
  transform:translate(-62%,-50%) rotate(45deg)!important;
}

/* 04.1 — AIMMO 03 DECISION reference-bar grammar. */
html body.ways-page .ways-reference-bars{width:100%!important;margin:var(--hm-subtitle-to-content) 0 0!important;padding:0!important}
html body.ways-page .ways-reference-bars__rows{display:grid!important;width:100%!important;gap:20px!important}
html body.ways-page .ways-reference-bars__row{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) 84px!important;
  gap:16px!important;
  align-items:center!important;
  width:100%!important;
  min-height:30px!important;
}
html body.ways-page .ways-reference-bars__label{
  color:rgba(255,255,255,.62)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:15px!important;
  font-weight:300!important;
  line-height:1.3!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}
html body.ways-page .ways-reference-bars__track{
  position:relative!important;
  width:100%!important;
  height:10px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.07)!important;
}
html body.ways-page .ways-reference-bars__fill{
  display:block!important;
  width:calc(var(--value,0) * 1%)!important;
  height:100%!important;
  min-width:2px!important;
  background:var(--bar-color,var(--hm-chart-02,#007DE3))!important;
}
html body.ways-page .ways-reference-bars__value{
  color:rgba(255,255,255,.92)!important;
  font-family:var(--hm-font-en)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-data-number)!important;
  font-variant-numeric:tabular-nums!important;
  text-align:right!important;
  white-space:nowrap!important;
}
html body.ways-page .ways-reference-bars__row:nth-child(1){--bar-color:var(--hm-chart-01,#00A6ED)}
html body.ways-page .ways-reference-bars__row:nth-child(2){--bar-color:var(--hm-chart-02,#007DE3)}
html body.ways-page .ways-reference-bars__row:nth-child(3){--bar-color:var(--hm-chart-03,#00B8DE)}
html body.ways-page .ways-reference-bars__row:nth-child(4){--bar-color:var(--hm-chart-04,#008DDD)}
html body.ways-page .ways-reference-bars__row:nth-child(5){--bar-color:var(--hm-chart-01,#00A6ED)}
html body.ways-page .ways-reference-bars__source{
  display:block!important;
  width:100%!important;
  margin:40px 0 0!important;
  padding:18px 0 0!important;
  border-top:1px solid var(--hm-line-content-divider,var(--hm-line-weak))!important;
  color:var(--hm-text-tertiary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:10px!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:var(--hm-track-base)!important;
  word-break:keep-all!important;
}

/* 04.2 — AIMMO 04.1 impact-bar geometry: 80px bars + large value inside. */
html body.ways-page .ways-impact-chart{
  width:100%!important;
  margin:var(--hm-subtitle-to-content) 0 0!important;
  padding:32px 0 0!important;
  border-top:1px solid var(--hm-line-default)!important;
}
html body.ways-page .ways-impact-chart__rows{display:grid!important;gap:20px!important}
html body.ways-page .ways-impact-chart__row{
  display:grid!important;
  grid-template-columns:minmax(180px,.48fr) minmax(0,2.2fr)!important;
  gap:12px!important;
  align-items:center!important;
  width:100%!important;
}
html body.ways-page .ways-impact-chart__label strong{
  display:block!important;
  max-width:13ch!important;
  margin:0!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  line-height:1.22!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page .ways-impact-chart__track{
  position:relative!important;
  width:100%!important;
  height:80px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.07)!important;
}
html body.ways-page .ways-impact-chart__bar{
  display:flex!important;
  width:var(--value)!important;
  height:100%!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
  background:var(--bar-color,var(--hm-chart-02,#007DE3))!important;
}
html body.ways-page .ways-impact-chart__bar strong{
  color:#fff!important;
  font-family:var(--hm-font-en)!important;
  font-size:40px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-data-number)!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
}
html body.ways-page .ways-impact-chart__row:nth-child(1){--bar-color:var(--hm-chart-01,#00A6ED)}
html body.ways-page .ways-impact-chart__row:nth-child(2){--bar-color:var(--hm-chart-02,#007DE3)}
html body.ways-page .ways-impact-chart__row:nth-child(3){--bar-color:var(--hm-chart-03,#00B8DE)}
html body.ways-page .ways-impact-chart__row:nth-child(4){--bar-color:var(--hm-chart-04,#008DDD)}
html body.ways-page .ways-impact-chart__source{
  display:block!important;
  width:100%!important;
  margin:32px 0 0!important;
  padding:18px 0 0!important;
  border-top:1px solid var(--hm-line-content-divider,var(--hm-line-weak))!important;
  color:var(--hm-text-tertiary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:10px!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:var(--hm-track-base)!important;
  word-break:keep-all!important;
}

/* 2026-09-13 / 01 research narrative refinement. */
html body.ways-page .ways-quote-grid article:first-child strong{color:#fff!important}

html body.ways-page .ways-synthesis{
  position:relative!important;
  overflow:hidden!important;
  margin-top:64px!important;
  padding:24px!important;
  border-top:1px solid #00A6ED!important;
  background:linear-gradient(to bottom,rgba(0,166,237,.20) 0,rgba(0,166,237,0) 100px)!important;
}
html body.ways-page .ways-synthesis>span{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.ways-page .ways-synthesis h4{
  position:relative!important;
  z-index:1!important;
  margin:18px 0 0!important;
  max-width:none!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.42!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page .ways-synthesis h4 strong{font:inherit!important;color:inherit!important}
html body.ways-page .ways-synthesis p{display:none!important}
html body.ways-page .ways-synthesis::after{
  content:"익숙한 불편을 그대로 두는 대신, 문제를 드러내고 함께 바꿀 수 있는 업무 구조부터 다시 정의했습니다.";
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin:12px 0 0!important;
  max-width:68ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.52!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}

/* 01.3 — AIMMO 01.2 circle/arrow grammar, recolored red and kept in one ordered row. */
html body.ways-page .ways-hm-flow--legacy .flow-group{padding-top:0!important;container-type:inline-size!important}
html body.ways-page .ways-hm-flow--legacy .flow-group::before,
html body.ways-page .ways-hm-flow--legacy .flow-label{display:none!important}
html body.ways-page .ways-hm-flow--legacy .flow-row.row4{
  --ways-legacy-arrow:30.8px;
  --ways-legacy-node:min(250px,calc((100cqw - (var(--ways-legacy-arrow) * 3)) / 4));
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
}
html body.ways-page .ways-hm-flow--legacy .flow-node{
  flex:0 0 var(--ways-legacy-node)!important;
  width:var(--ways-legacy-node)!important;
  min-width:var(--ways-legacy-node)!important;
  max-width:var(--ways-legacy-node)!important;
  height:var(--ways-legacy-node)!important;
  min-height:var(--ways-legacy-node)!important;
  max-height:var(--ways-legacy-node)!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  padding:28px!important;
  border:1px solid var(--hm-red)!important;
  border-radius:50%!important;
  background:#000!important;
}
html body.ways-page .ways-hm-flow--legacy .flow-node .hm-card-no{
  margin:0!important;
  color:var(--hm-red)!important;
  font-family:var(--hm-font-en)!important;
  font-size:11px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.ways-page .ways-hm-flow--legacy .flow-node h4{color:var(--hm-red)!important}
html body.ways-page .ways-hm-flow--legacy .flow-arrow{
  position:relative!important;
  display:block!important;
  flex:0 0 var(--ways-legacy-arrow)!important;
  width:var(--ways-legacy-arrow)!important;
  min-width:var(--ways-legacy-arrow)!important;
  max-width:var(--ways-legacy-arrow)!important;
  height:40px!important;
  margin:0!important;
  padding:0!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
}
html body.ways-page .ways-hm-flow--legacy .flow-arrow::before{
  width:12px!important;
  height:12px!important;
  border-top:1px solid rgba(255,255,255,.48)!important;
  border-right:1px solid rgba(255,255,255,.48)!important;
  transform:translate(-65%,-50%) rotate(45deg)!important;
}

@media(max-width:1180px){
  html body.ways-page .ways-hm-flow .flow-row.row4,
  html body.ways-page .ways-hm-flow .flow-row.row3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
  }
  html body.ways-page .ways-hm-flow .flow-arrow{display:none!important}
  html body.ways-page .ways-hm-flow .flow-node{width:100%!important;min-width:0!important;height:auto!important;min-height:240px!important;aspect-ratio:1!important}

  html body.ways-page .ways-hm-flow--legacy .flow-row.row4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;container-type:normal!important}
  html body.ways-page .ways-hm-flow--legacy .flow-arrow{display:none!important}
  html body.ways-page .ways-hm-flow--legacy .flow-node{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:240px!important;max-height:none!important;aspect-ratio:1!important}
}
@media(max-width:780px){
  html body.ways-page .ways-hm-flow .flow-label{position:static!important;margin:0 0 24px!important;white-space:normal!important}
  html body.ways-page .ways-hm-flow .flow-group{padding-top:24px!important}
  html body.ways-page .ways-hm-flow .flow-row.row4,
  html body.ways-page .ways-hm-flow .flow-row.row3{grid-template-columns:1fr!important;gap:16px!important}
  html body.ways-page .ways-hm-flow .flow-node{max-width:360px!important;margin-inline:auto!important;min-height:0!important;aspect-ratio:1!important}
  html body.ways-page .ways-reference-bars__row{grid-template-columns:104px minmax(0,1fr) 64px!important;gap:10px!important}
  html body.ways-page .ways-reference-bars__label{font-size:13px!important}
  html body.ways-page .ways-reference-bars__value{font-size:14px!important}
  html body.ways-page .ways-impact-chart__row{grid-template-columns:1fr!important;gap:10px!important}
  html body.ways-page .ways-impact-chart__track{height:64px!important}
  html body.ways-page .ways-impact-chart__bar strong{font-size:32px!important}

  html body.ways-page .ways-synthesis{padding:24px 0!important}
  html body.ways-page .ways-hm-flow--legacy .flow-group{padding-top:0!important}
  html body.ways-page .ways-hm-flow--legacy .flow-row.row4{grid-template-columns:1fr!important;gap:16px!important}
  html body.ways-page .ways-hm-flow--legacy .flow-node{max-width:360px!important;margin-inline:auto!important;min-height:0!important}
}


/* ===== consolidated from design-system/components/himart-ways-v4.css ===== */
/* HIMART WAYS v4 — R&R / operating-model narrative refinement.
   Page-specific composition only. Shared typography/tokens remain design-system owned. */

/* 01.2 synthesis: same blue line, softer 10% gradient. */
html body.ways-page .ways-synthesis{
  border-top:1px solid var(--hm-blue)!important;
  background:linear-gradient(to bottom,rgba(0,166,237,.10) 0,rgba(0,166,237,0) 100px)!important;
}

/* 01.3 — compact legacy flow. Shared flow type is already defined globally; this layer only
   adds container-relative scaling because these circles are intentionally reduced. */
html body.ways-page .ways-hm-flow .flow-node{container-type:inline-size!important}
html body.ways-page .ways-hm-flow .flow-node .hm-card-no{
  font-size:clamp(9px,4.5cqi,11px)!important;
}
html body.ways-page .ways-hm-flow .flow-node h4{
  font-size:clamp(15px,8.6cqi,20px)!important;
  line-height:1.22!important;
}
html body.ways-page .ways-hm-flow .flow-node p{
  font-size:clamp(10px,5.2cqi,12px)!important;
  line-height:1.46!important;
}
html body.ways-page .ways-hm-flow--legacy .flow-row.row4{
  --ways-legacy-arrow:34px;
  --ways-legacy-node:min(225px,calc((100cqw - (var(--ways-legacy-arrow) * 3)) / 4));
  justify-content:center!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
  padding:20px!important;
  border:1px solid var(--hm-red)!important;
  border-left:1px solid var(--hm-red)!important;
  border-right:1px solid var(--hm-red)!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node h4{
  margin:12px 0 0!important;
  color:var(--hm-red)!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node p{margin:8px 0 0!important}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node .hm-card-no{color:var(--hm-red)!important}
html body.ways-page #brand .ways-hm-flow--legacy .flow-arrow::before{
  border-top-color:var(--hm-red)!important;
  border-right-color:var(--hm-red)!important;
}

/* 02.1 — three role-problem rows. Each role owns one accent across rule, index and labels. */
.ways-team-problems{display:grid;width:100%;gap:72px}
.ways-team-problem{--role-color:var(--hm-blue);padding-top:24px;border-top:1px solid var(--role-color)}
.ways-team-problem.is-ux{--role-color:var(--hm-blue-new)}
.ways-team-problem.is-dev{--role-color:var(--hm-green)}
.ways-team-problem__head{display:grid;grid-template-columns:76px minmax(0,1fr);gap:28px;align-items:start}
.ways-team-problem__no{color:var(--role-color);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-team-problem__title{margin:0!important;max-width:32ch;color:#fff;font:100 22px/1.3 var(--hm-font-ko);font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group);word-break:keep-all}
.ways-team-problem__copy{margin:12px 0 0!important;max-width:68ch!important;color:var(--hm-description-color)!important;font:300 16px/1.55 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-team-problem__quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.ways-team-problem__quotes blockquote{min-width:0;margin:0;padding:20px 0 0;border-top:1px solid color-mix(in srgb,var(--role-color) 38%,transparent)}
.ways-team-problem__quotes p{margin:0!important;max-width:28ch!important;color:#fff!important;font:100 18px/1.45 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-team-problem__quotes span{display:block;margin-top:20px;color:var(--role-color);font:400 10px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}

/* 02.2 — parallel model: three roles start together and meet at shared sync checkpoints. */
.ways-parallel-model{width:100%;padding-top:28px;border-top:1px solid var(--hm-line-default)}
.ways-parallel-model__intro{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start}
.ways-parallel-model__intro>span{color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-parallel-model__intro>p{margin:0!important;max-width:58ch!important;color:#fff!important;font:100 22px/1.4 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-parallel-model__lanes{display:grid;gap:16px;margin-top:48px}
.ways-parallel-lane{--role-color:var(--hm-blue);display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));min-height:132px;border-top:1px solid var(--role-color)}
.ways-parallel-lane.is-ux{--role-color:var(--hm-blue-new)}
.ways-parallel-lane.is-dev{--role-color:var(--hm-green)}
.ways-parallel-lane__role{display:flex;flex-direction:column;justify-content:center;padding:18px 20px 18px 0}
.ways-parallel-lane__role span{color:var(--role-color);font:400 11px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-parallel-lane__role strong{margin-top:10px;color:#fff;font:300 18px/1.25 var(--hm-font-ko);letter-spacing:var(--hm-track-group)}
.ways-parallel-lane__step{padding:22px 24px;border-left:1px solid var(--hm-line-faint)}
.ways-parallel-lane__step b{display:block;color:var(--role-color);font:400 10px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-parallel-lane__step strong{display:block;margin-top:12px;color:#fff;font:100 18px/1.3 var(--hm-font-ko);font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-group);word-break:keep-all}
.ways-parallel-lane__step p{margin:8px 0 0!important;max-width:26ch!important;color:var(--hm-description-color)!important;font:300 12px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-sync-checkpoints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 0 150px;padding-top:24px;border-top:1px solid var(--hm-line-weak)}
.ways-sync-checkpoints article span{color:var(--hm-text-tertiary);font:400 10px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-sync-checkpoints article strong{display:block;margin-top:9px;color:#fff;font:100 16px/1.35 var(--hm-font-ko);font-variation-settings:"wght" 100;letter-spacing:var(--hm-track-body);word-break:keep-all}

/* 02.3 — ownership contract, intentionally not another card grid. */
.ways-ownership-contract{width:100%;border-top:1px solid var(--hm-line-default)}
.ways-ownership-band{--role-color:var(--hm-blue);display:grid;grid-template-columns:160px minmax(0,1fr);gap:36px;padding:34px 0;border-bottom:1px solid var(--hm-line-faint)}
.ways-ownership-band.is-ux{--role-color:var(--hm-blue-new)}
.ways-ownership-band.is-dev{--role-color:var(--hm-green)}
.ways-ownership-band__role span{display:block;color:var(--role-color);font:400 11px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-ownership-band__role strong{display:block;margin-top:10px;color:#fff;font:300 22px/1.2 var(--hm-font-ko);letter-spacing:var(--hm-track-group)}
.ways-ownership-band__body{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:28px}
.ways-ownership-band__body div b{display:block;color:var(--role-color);font:400 10px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-ownership-band__body div p{margin:10px 0 0!important;max-width:28ch!important;color:var(--hm-description-color)!important;font:300 14px/1.5 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-ownership-principle{margin-top:32px;padding:28px 0 0;border-top:1px solid var(--hm-blue)}
.ways-ownership-principle p{margin:0!important;max-width:72ch!important;color:#fff!important;font:100 22px/1.4 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}

/* 03.1 — 3 + 3 grid, no vertical dividers, a long down arrow between rows. */
html body.ways-page .ways-research-path{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  row-gap:128px!important;
  column-gap:28px!important;
  border-top:1px solid var(--hm-line-default)!important;
  border-bottom:0!important;
}
html body.ways-page .ways-research-path::after{
  content:"";
  position:absolute;
  top:calc(50% - 43px);
  left:50%;
  width:22px;
  height:86px;
  transform:translateX(-50%);
  opacity:.20;
  background:
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) center top/1px 70px no-repeat,
    linear-gradient(45deg,transparent 47%,rgba(255,255,255,.9) 48% 52%,transparent 53%) left bottom/11px 16px no-repeat,
    linear-gradient(-45deg,transparent 47%,rgba(255,255,255,.9) 48% 52%,transparent 53%) right bottom/11px 16px no-repeat;
  pointer-events:none;
}
html body.ways-page .ways-research-path article,
html body.ways-page .ways-research-path article+article{
  min-height:190px!important;
  padding:26px 0 28px!important;
  border-left:0!important;
  border-top:0!important;
}
html body.ways-page .ways-research-path article:nth-child(-n+3){border-bottom:1px solid var(--hm-line-faint)!important}

/* 03.2 — one operating stack instead of six identical cards. */
.ways-operating-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%}
.ways-operating-stack article{min-width:0;padding:26px 28px 30px;border-top:1px solid var(--hm-line-default);background:rgba(255,255,255,.018)}
.ways-operating-stack article>span{display:block;color:var(--hm-blue);font:400 11px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-operating-stack article h4{margin:22px 0 0!important;color:#fff!important;font:100 22px/1.3 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-operating-stack article p{margin:12px 0 0!important;max-width:42ch!important;color:var(--hm-description-color)!important;font:300 14px/1.52 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}
.ways-operating-stack__anchor{grid-column:1/-1;display:grid!important;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:center;min-height:150px;border-top-color:var(--hm-blue)!important;background:linear-gradient(90deg,rgba(0,166,237,.10),rgba(0,166,237,0) 70%)!important}
.ways-operating-stack__anchor h4{margin:0!important;font-size:28px!important}
.ways-operating-stack__next{grid-column:1/-1;display:grid!important;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:center;background:transparent!important}
.ways-operating-stack__next h4{margin:0!important}

/* 03.3 — horizontal rulebook rows rather than another card grid. */
.ways-operating-rules{width:100%;border-top:1px solid var(--hm-blue)}
.ways-operating-rule{display:grid;grid-template-columns:70px minmax(240px,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid var(--hm-line-faint)}
.ways-operating-rule>span{color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en);letter-spacing:var(--hm-track-note)}
.ways-operating-rule h4{margin:0!important;color:#fff!important;font:100 20px/1.35 var(--hm-font-ko)!important;font-variation-settings:"wght" 100!important;letter-spacing:var(--hm-track-group)!important;word-break:keep-all!important}
.ways-operating-rule p{margin:0!important;max-width:42ch!important;color:var(--hm-description-color)!important;font:300 14px/1.52 var(--hm-font-ko)!important;letter-spacing:var(--hm-track-body)!important;word-break:keep-all!important}

/* Remove local leadership closing statement; project reflection below owns the ending. */
html body.ways-page .ways-final-statement{display:none!important}

@media(max-width:1180px){
  .ways-team-problem__quotes{grid-template-columns:1fr}
  .ways-parallel-lane{grid-template-columns:130px repeat(3,minmax(0,1fr))}
  .ways-sync-checkpoints{margin-left:130px}
  .ways-ownership-band__body{grid-template-columns:1fr}
  html body.ways-page .ways-research-path{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:780px){
  .ways-team-problem__head,.ways-parallel-model__intro,.ways-ownership-band,.ways-operating-stack__anchor,.ways-operating-stack__next{grid-template-columns:1fr}
  .ways-team-problem__quotes{gap:20px}
  .ways-parallel-lane{grid-template-columns:1fr}
  .ways-parallel-lane__step{border-left:0;border-top:1px solid var(--hm-line-faint)}
  .ways-sync-checkpoints{grid-template-columns:1fr;margin-left:0}
  .ways-ownership-band__body{grid-template-columns:1fr}
  html body.ways-page .ways-research-path{grid-template-columns:1fr!important;row-gap:0!important}
  html body.ways-page .ways-research-path::after{display:none!important}
  html body.ways-page .ways-research-path article,html body.ways-page .ways-research-path article+article{border-bottom:1px solid var(--hm-line-faint)!important}
  .ways-operating-stack{grid-template-columns:1fr}
  .ways-operating-stack__anchor,.ways-operating-stack__next{grid-column:auto}
  .ways-operating-rule{grid-template-columns:50px minmax(0,1fr)}
  .ways-operating-rule p{grid-column:2}
  html body.ways-page .ways-hm-flow--legacy .flow-row.row4{grid-template-columns:1fr!important}
  html body.ways-page #brand .ways-hm-flow--legacy .flow-node{width:var(--hm-mobile-circle-size)!important;max-width:var(--hm-mobile-circle-size)!important;height:var(--hm-mobile-circle-size)!important;min-height:var(--hm-mobile-circle-size)!important;margin-inline:auto!important}
}


/* ===== consolidated from design-system/components/himart-ways-v5.css ===== */
/* HIMART WAYS v5 — proportional flow, interview rows, and shared R&R table grammar.
   Page-specific composition only; global type/color tokens remain design-system owned. */

/* 01.3 — exactly 17/20 for four circles + 3/20 for three arrows. */
html body.ways-page #brand .ways-hm-flow--legacy .flow-row.row4{
  --ways-legacy-arrow:5cqw!important;
  --ways-legacy-node:21.25cqw!important;
  width:100%!important;
  justify-content:flex-start!important;
  gap:0!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
  flex:0 0 var(--ways-legacy-node)!important;
  width:var(--ways-legacy-node)!important;
  min-width:var(--ways-legacy-node)!important;
  max-width:var(--ways-legacy-node)!important;
  height:var(--ways-legacy-node)!important;
  min-height:var(--ways-legacy-node)!important;
  max-height:var(--ways-legacy-node)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-left-color:rgba(255,255,255,.10)!important;
  border-right-color:rgba(255,255,255,.10)!important;
  container-type:inline-size!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-arrow{
  flex:0 0 var(--ways-legacy-arrow)!important;
  width:var(--ways-legacy-arrow)!important;
  min-width:var(--ways-legacy-arrow)!important;
  max-width:var(--ways-legacy-arrow)!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node h4{
  font-size:clamp(16px,8.4cqi,20px)!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node p{
  font-size:clamp(10px,5.1cqi,12px)!important;
}

/* 02.1 — left role rail 2/10, quote rail 8/10 split into three equal columns. */
.ways-team-problems{gap:72px!important}
.ways-team-problem__head{
  display:grid!important;
  grid-template-columns:20% 80%!important;
  gap:0!important;
  align-items:start!important;
}
.ways-team-problem__no{
  padding-right:28px!important;
  box-sizing:border-box!important;
}
.ways-team-problem__title{
  margin:0!important;
  max-width:34ch!important;
  font-size:26px!important;
  line-height:1.28!important;
}
.ways-team-problem__copy{
  margin:12px 0 0!important;
  max-width:54ch!important;
}
.ways-team-problem__quotes{
  display:grid!important;
  grid-template-columns:20% repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:40px!important;
}
.ways-team-problem__quotes::before{
  content:"";
  display:block;
}
.ways-team-problem__quotes blockquote{
  display:flex!important;
  min-width:0!important;
  min-height:154px!important;
  margin:0!important;
  padding:20px 24px 0!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  border-top:1px solid color-mix(in srgb,var(--role-color) 38%,transparent)!important;
}
.ways-team-problem__quotes blockquote:first-of-type{padding-left:0!important}
.ways-team-problem__quotes p{
  min-height:calc(1.45em * 3)!important;
  margin:0!important;
  max-width:none!important;
  line-height:1.45!important;
}
.ways-team-problem__quotes span{
  min-height:1.2em!important;
  margin-top:20px!important;
  color:var(--role-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-note)!important;
}

/* 02.2 — one exact 2/10 + 8/10 alignment contract from intro through every role row. */
.ways-parallel-model{
  padding-top:28px!important;
  border-top:1px solid rgba(255,255,255,1)!important;
}
.ways-parallel-model__intro{
  display:grid!important;
  grid-template-columns:20% 80%!important;
  gap:0!important;
  align-items:start!important;
}
.ways-parallel-model__intro>span{
  color:#fff!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.18!important;
  letter-spacing:var(--hm-track-note)!important;
}
.ways-parallel-model__intro>p{
  margin:0!important;
  max-width:54ch!important;
}
.ways-parallel-model__lanes{gap:16px!important;margin-top:48px!important}
.ways-parallel-lane{
  display:grid!important;
  grid-template-columns:20% repeat(3,minmax(0,1fr))!important;
  min-height:0!important;
  align-items:stretch!important;
}
.ways-parallel-lane__role{
  min-height:142px!important;
  height:100%!important;
  padding:22px 24px 22px 0!important;
  justify-content:center!important;
}
.ways-parallel-lane__step{
  min-height:142px!important;
  height:100%!important;
  padding:22px 24px!important;
}
.ways-parallel-lane__step b{
  font-family:var(--hm-font-en)!important;
  font-size:10px!important;
  font-weight:400!important;
}
.ways-parallel-lane__step strong{margin-top:12px!important}
.ways-parallel-lane__step p{margin:8px 0 0!important}
.ways-sync-checkpoints{display:none!important}

/* 02.3 — reuse the same row geometry as 02.2. */
.ways-ownership-model{border-top-color:var(--hm-line-default)!important}
.ways-ownership-model .ways-parallel-lane__role span{
  font-size:11px!important;
}
.ways-ownership-conclusion{
  display:grid!important;
  grid-template-columns:20% 80%!important;
  gap:0!important;
  margin-top:16px!important;
  padding:26px 0 0!important;
  border-top:1px solid rgba(255,255,255,.20)!important;
}
.ways-ownership-conclusion>span{
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.4!important;
  letter-spacing:var(--hm-track-note)!important;
}
.ways-ownership-conclusion>p{
  margin:0!important;
  max-width:72ch!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.55!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}

@media(max-width:1180px){
  .ways-team-problem__head{grid-template-columns:20% 80%!important}
  .ways-team-problem__quotes{grid-template-columns:20% repeat(3,minmax(0,1fr))!important}
  .ways-parallel-model__intro,.ways-ownership-conclusion{grid-template-columns:20% 80%!important}
  .ways-parallel-lane{grid-template-columns:20% repeat(3,minmax(0,1fr))!important}
}

@media(max-width:780px){
  html body.ways-page #brand .ways-hm-flow--legacy .flow-row.row4{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
    width:min(320px,88vw)!important;
    min-width:0!important;
    max-width:min(320px,88vw)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto!important;
  }
  html body.ways-page #brand .ways-hm-flow--legacy .flow-arrow{display:none!important}
  .ways-team-problem__head,.ways-parallel-model__intro,.ways-ownership-conclusion{grid-template-columns:1fr!important}
  .ways-team-problem__quotes{grid-template-columns:1fr!important}
  .ways-team-problem__quotes::before{display:none!important}
  .ways-team-problem__quotes blockquote,.ways-team-problem__quotes blockquote:first-of-type{padding-left:0!important;padding-right:0!important}
  .ways-parallel-lane{grid-template-columns:1fr!important}
  .ways-parallel-lane__role,.ways-parallel-lane__step{min-height:0!important}
  .ways-ownership-conclusion>p{margin-top:12px!important}
}

/* v5.1 — role color, row alignment and 03.1 hierarchy refinement. */
html body.ways-page #data .ways-team-problem__title{
  color:var(--role-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:26px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
}
html body.ways-page #data .ways-team-problem__quotes span{
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-font-ko)!important;
  font-weight:300!important;
}
html body.ways-page #data .ways-parallel-model:not(.ways-ownership-model){
  border-top:1px solid rgba(255,255,255,.70)!important;
}
html body.ways-page #data .ways-parallel-lane__step{border-left:0!important}
html body.ways-page #data .ways-parallel-lane__role{
  min-height:142px!important;
  height:100%!important;
  padding:22px 24px 22px 0!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
}
html body.ways-page #data .ways-parallel-lane__role strong{
  margin-top:12px!important;
  color:var(--role-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
}
html body.ways-page #data .ways-ownership-model{
  padding-top:0!important;
  border-top:0!important;
}
html body.ways-page #data .ways-ownership-model .ways-parallel-lane__role strong{font-size:22px!important}
html body.ways-page #data .ways-ownership-conclusion>span{
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
  letter-spacing:var(--hm-track-group)!important;
}
html body.ways-page #data .ways-ownership-conclusion>p{
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:18px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.5!important;
}
html body.ways-page #journey .ways-research-path article h4{
  font-size:26px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.28!important;
}
@media(max-width:780px){
  html body.ways-page #data .ways-parallel-lane__role{min-height:0!important}
  html body.ways-page #data .ways-team-problem__title,
  html body.ways-page #journey .ways-research-path article h4{font-size:22px!important}
  html body.ways-page #data .ways-ownership-conclusion>span{font-size:20px!important}
  html body.ways-page #data .ways-ownership-conclusion>p{font-size:16px!important}
}


/* ===== consolidated from design-system/components/himart-ways-title-owner.css ===== */
/* HIMART WAYS — chapter title ownership
   The legacy Himart narrative bundle contains an old #journey title as a CSS ::before pseudo-element.
   himart-ways.html owns its authored chapter titles, so generated legacy title content is disabled here.
   This file must load after the legacy production bundle and the shared design-system layers. */

html body.ways-page #live-main > #journey.hm-section .hm-section-head .hm-section-title::before,
html body.ways-page #live-main > #journey.hm-section .hm-section-head .hm-section-title::after{
  content:none!important;
  display:none!important;
}

/* Restore the real authored H2 because the legacy bundle also forces the journey H2 to font-size:0 / line-height:0. */
html body.ways-page #live-main > #journey.hm-section .hm-section-head .hm-section-title{
  width:100%!important;
  max-width:none!important;
  white-space:normal!important;
  font-family:var(--hm-font-ko)!important;
  font-size:var(--hm-type-section)!important;
  font-weight:100!important;
  line-height:1.12!important;
  letter-spacing:var(--hm-track-section)!important;
  color:#fff!important;
}

@media (min-width:1600px){
  html body.ways-page #live-main > #journey.hm-section .hm-section-head .hm-section-title{
    max-width:440px!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v7.css ===== */
/* HIMART WAYS v7 — focused refinements for 02.2–02.4 and 03.1.
   Page-specific layout only; shared typography/color tokens remain the source of truth. */

/* ---------- 02.2 / 02.3 — parallel role rows ---------- */
html body.ways-page #data .ways-parallel-model__intro{
  grid-template-columns:20% 80%!important;
}
html body.ways-page #data .ways-parallel-model__intro>p{
  grid-column:2!important;
  margin:0!important;
  max-width:58ch!important;
}

/* The START TOGETHER label is intentionally removed in the DOM.
   Keep the explanatory copy aligned to the 80% process rail. */
html body.ways-page #data .ways-parallel-model__lanes{
  gap:16px!important;
  margin-top:48px!important;
}
html body.ways-page #data .ways-parallel-lane{
  position:relative!important;
  min-height:160px!important;
  height:160px!important;
  border-top:0!important;
}
/* Process rule begins at the same x-position as the intro copy, not at the role rail. */
html body.ways-page #data .ways-parallel-lane::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:20%!important;
  right:0!important;
  height:1px!important;
  background:var(--role-color)!important;
  opacity:.72!important;
  pointer-events:none!important;
}
html body.ways-page #data .ways-parallel-lane__role,
html body.ways-page #data .ways-parallel-lane__step{
  min-height:160px!important;
  height:160px!important;
  box-sizing:border-box!important;
}
html body.ways-page #data .ways-parallel-lane__role{
  padding:24px 24px 22px 0!important;
  justify-content:flex-start!important;
}
html body.ways-page #data .ways-parallel-lane__role span{
  font-size:12px!important;
  line-height:1.2!important;
}
html body.ways-page #data .ways-parallel-lane__role strong{
  margin-top:12px!important;
  font-size:22px!important;
  line-height:1.3!important;
}
html body.ways-page #data .ways-parallel-lane__step{
  padding:24px 24px 22px!important;
  border-left:0!important;
}
html body.ways-page #data .ways-parallel-lane__step b{
  font-size:10px!important;
}
html body.ways-page #data .ways-parallel-lane__step strong{
  margin-top:12px!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
}
html body.ways-page #data .ways-parallel-lane__step p{
  margin-top:8px!important;
}

/* 02.3 inherits exactly the same row grammar as 02.2. */
html body.ways-page #data .ways-ownership-model{
  padding-top:0!important;
  border-top:0!important;
}
html body.ways-page #data .ways-ownership-conclusion{
  display:none!important;
}

/* ---------- 02.4 — summary cards borrow the 01 / MEMO visual grammar ---------- */
html body.ways-page #data .ways-decision-summary-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px!important;
}
html body.ways-page #data .ways-decision-summary-grid>article{
  min-width:0!important;
}
html body.ways-page #data .ways-decision-summary-grid>article>strong{
  font-size:clamp(40px,4.5vw,64px)!important;
}

/* ---------- 03.1 — six-step flow ---------- */
html body.ways-page #journey .ways-research-path{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:72px!important;
  row-gap:120px!important;
  border-top:0!important;
  border-bottom:0!important;
  overflow:visible!important;
}
/* Remove the old single vertical arrow between the two rows. */
html body.ways-page #journey .ways-research-path::after{
  content:none!important;
  display:none!important;
}
html body.ways-page #journey .ways-research-path article,
html body.ways-page #journey .ways-research-path article+article{
  position:relative!important;
  min-height:190px!important;
  padding:26px 0 28px!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  overflow:visible!important;
}
/* Each section owns its own rule rather than sharing one continuous line. */
html body.ways-page #journey .ways-research-path article:nth-child(-n+3){
  border-bottom:0!important;
}

/* 01→02→03 and 04→05→06: long-line arrows, 30% opacity, open chevron head only. */
html body.ways-page #journey .ways-research-path article:nth-child(1)::after,
html body.ways-page #journey .ways-research-path article:nth-child(2)::after,
html body.ways-page #journey .ways-research-path article:nth-child(4)::after,
html body.ways-page #journey .ways-research-path article:nth-child(5)::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  left:calc(100% + 14px)!important;
  width:44px!important;
  height:18px!important;
  transform:translateY(-50%)!important;
  opacity:.30!important;
  background:
    linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)) left center/36px 1px no-repeat,
    linear-gradient(45deg,transparent 46%,rgba(255,255,255,.95) 47% 53%,transparent 54%) right 3px/9px 7px no-repeat,
    linear-gradient(-45deg,transparent 46%,rgba(255,255,255,.95) 47% 53%,transparent 54%) right 8px/9px 7px no-repeat!important;
  pointer-events:none!important;
}
html body.ways-page #journey .ways-research-path article:nth-child(3)::after,
html body.ways-page #journey .ways-research-path article:nth-child(6)::after{
  content:none!important;
}

@media(max-width:1180px){
  html body.ways-page #journey .ways-research-path{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:52px!important;
  }
  html body.ways-page #journey .ways-research-path article:nth-child(1)::after,
  html body.ways-page #journey .ways-research-path article:nth-child(2)::after,
  html body.ways-page #journey .ways-research-path article:nth-child(4)::after,
  html body.ways-page #journey .ways-research-path article:nth-child(5)::after{
    left:calc(100% + 8px)!important;
    width:34px!important;
    background:
      linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)) left center/26px 1px no-repeat,
      linear-gradient(45deg,transparent 46%,rgba(255,255,255,.95) 47% 53%,transparent 54%) right 3px/9px 7px no-repeat,
      linear-gradient(-45deg,transparent 46%,rgba(255,255,255,.95) 47% 53%,transparent 54%) right 8px/9px 7px no-repeat!important;
  }
}

@media(max-width:780px){
  html body.ways-page #data .ways-parallel-model__intro{
    grid-template-columns:1fr!important;
  }
  html body.ways-page #data .ways-parallel-model__intro>p{
    grid-column:1!important;
  }
  html body.ways-page #data .ways-parallel-lane{
    height:auto!important;
    min-height:0!important;
  }
  html body.ways-page #data .ways-parallel-lane::before{
    left:0!important;
  }
  html body.ways-page #data .ways-parallel-lane__role,
  html body.ways-page #data .ways-parallel-lane__step{
    height:auto!important;
    min-height:0!important;
  }
  html body.ways-page #data .ways-decision-summary-grid{
    grid-template-columns:1fr!important;
  }
  html body.ways-page #journey .ways-research-path{
    grid-template-columns:1fr!important;
    row-gap:64px!important;
    column-gap:0!important;
  }
  html body.ways-page #journey .ways-research-path article::after{
    content:none!important;
    display:none!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v8.css ===== */
/* HIMART WAYS v8 — 02.2/02.3 row rules, 02.4 summary, 01.3 circles, 03.2 operating cards. */

/* 01.3 — circle contrast and internal type. */
html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
  border-color:rgba(255,255,255,.30)!important;
  border-left-color:rgba(255,255,255,.30)!important;
  border-right-color:rgba(255,255,255,.30)!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node h4{
  font-size:22px!important;
  line-height:1.22!important;
}
html body.ways-page #brand .ways-hm-flow--legacy .flow-node p{
  font-size:12px!important;
  line-height:1.46!important;
}

/* 02.2 / 02.3 — team-colored rule spans the full row, including the PO/UX/DEV role rail. */
html body.ways-page #data .ways-parallel-lane::before{
  left:0!important;
}

/* 02.4 — clean two-card summary with no top rules. */
html body.ways-page #data .ways-decision-summary-grid>article{
  border-top:0!important;
  background:transparent!important;
}
html body.ways-page #data .ways-decision-summary-subsection .hm-subcopy{
  margin-top:var(--hm-title-description-gap)!important;
}

/* 03.2 — six equal operating cards. */
html body.ways-page #journey .ways-operating-stack{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px 28px!important;
}
html body.ways-page #journey .ways-operating-stack>article,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__anchor,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__next{
  grid-column:auto!important;
  display:block!important;
  min-width:0!important;
  min-height:220px!important;
  padding:32px 28px 36px!important;
  border-top:1px solid var(--hm-line-default)!important;
  background:transparent!important;
}
html body.ways-page #journey .ways-operating-stack>article>span{
  display:block!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
}
html body.ways-page #journey .ways-operating-stack>article h4,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__anchor h4,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__next h4{
  margin:24px 0 0!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:28px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.28!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page #journey .ways-operating-stack>article p,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__anchor p,
html body.ways-page #journey .ways-operating-stack>article.ways-operating-stack__next p{
  margin:14px 0 0!important;
  max-width:42ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.52!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}

@media(max-width:780px){
  html body.ways-page #brand .ways-hm-flow--legacy .flow-node h4{font-size:20px!important}
  html body.ways-page #journey .ways-operating-stack{grid-template-columns:1fr!important}
  html body.ways-page #journey .ways-operating-stack>article{min-height:0!important}
  html body.ways-page #journey .ways-operating-stack>article h4{font-size:24px!important}
  html body.ways-page #journey .ways-operating-stack>article p{font-size:15px!important}
}


/* ===== consolidated from design-system/components/himart-ways-v9.css ===== */
/* HIMART WAYS v9 — 02.2 cleanup, 02.4 spacing, and 03.1 image-grid composition. */

/* 02.2 — remove the old intro copy and its rule completely. */
html body.ways-page #data .ways-parallel-model.ways-no-intro-model{
  padding-top:0!important;
  border-top:0!important;
}
html body.ways-page #data .ways-parallel-model.ways-no-intro-model .ways-parallel-model__lanes{
  margin-top:0!important;
}

/* 02.4 — tighten title/description to the first summary card by half. */
html body.ways-page #data .ways-decision-summary-subsection .ways-decision-summary-grid{
  margin-top:40px!important;
}

/* 03.1 — 2 x 3 editorial image cards, 4:3, 50% black matte, copy bottom-left. */
html body.ways-page #journey .ways-research-path.ways-research-path--image-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px!important;
  width:100%!important;
  margin-top:var(--hm-subtitle-to-content)!important;
  border:0!important;
  overflow:visible!important;
}
html body.ways-page #journey .ways-research-path.ways-research-path--image-grid::before,
html body.ways-page #journey .ways-research-path.ways-research-path--image-grid::after{
  content:none!important;
  display:none!important;
}
html body.ways-page #journey .ways-research-path--image-grid .ways-research-card,
html body.ways-page #journey .ways-research-path--image-grid .ways-research-card+article{
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:4 / 3!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  background:#000!important;
}
html body.ways-page #journey .ways-research-path--image-grid .ways-research-card::before,
html body.ways-page #journey .ways-research-path--image-grid .ways-research-card::after{
  content:none!important;
  display:none!important;
}
html body.ways-page #journey .ways-research-card__image{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
}
html body.ways-page #journey .ways-research-card__matte{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:rgba(0,0,0,.50)!important;
  pointer-events:none!important;
}
html body.ways-page #journey .ways-research-card__content{
  position:absolute!important;
  z-index:2!important;
  left:28px!important;
  right:28px!important;
  bottom:28px!important;
  display:block!important;
  color:#fff!important;
}
html body.ways-page #journey .ways-research-card__content>span{
  display:block!important;
  margin:0 0 14px!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.ways-page #journey .ways-research-card__content h4{
  margin:0!important;
  max-width:22ch!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:26px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.25!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page #journey .ways-research-card__content p{
  margin:10px 0 0!important;
  max-width:38ch!important;
  color:rgba(255,255,255,.76)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}

@media(max-width:780px){
  html body.ways-page #data .ways-decision-summary-subsection .ways-decision-summary-grid{margin-top:28px!important}
  html body.ways-page #journey .ways-research-path.ways-research-path--image-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  html body.ways-page #journey .ways-research-card__content{
    left:22px!important;
    right:22px!important;
    bottom:22px!important;
  }
  html body.ways-page #journey .ways-research-card__content h4{font-size:22px!important}
  html body.ways-page #journey .ways-research-card__content p{font-size:13px!important}
}


/* ===== consolidated from design-system/components/himart-ways-v10.css ===== */
/* HIMART WAYS v10 — 03.1 image matte refinement. */

/* 03.1 — tighten the 2x3 image-card grid to 12px. */
html body.ways-page #journey .ways-research-path.ways-research-path--image-grid{
  gap:12px!important;
}

/* Remove the full-card black matte. Keep only a bottom-half gradient:
   bottom = 40% black, top of the lower half = 0%. */
html body.ways-page #journey .ways-research-card__matte{
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  width:100%!important;
  height:50%!important;
  background:linear-gradient(to top,rgba(0,0,0,.40) 0%,rgba(0,0,0,0) 100%)!important;
  pointer-events:none!important;
}


/* ===== consolidated from design-system/components/himart-ways-v11.css ===== */
/* HIMART WAYS v11 — 01.3 content-width responsive flow.
   The four circles and three arrow gaps always consume the full content rail:
   circles = 17/20 total, arrows = 3/20 total. */

/* Desktop/tablet editorial rail: do not fall back to the legacy 2x2 breakpoint. */
@media (min-width:781px){
  html body.ways-page #brand .ways-hm-flow--legacy .flow-group{
    width:100%!important;
    min-width:0!important;
    container-type:inline-size!important;
  }

  html body.ways-page #brand .ways-hm-flow--legacy .flow-row.row4{
    display:grid!important;
    grid-template-columns:
      minmax(0,21.25fr) minmax(0,5fr)
      minmax(0,21.25fr) minmax(0,5fr)
      minmax(0,21.25fr) minmax(0,5fr)
      minmax(0,21.25fr)!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1 / 1!important;
    margin:0!important;
    box-sizing:border-box!important;
    container-type:inline-size!important;
  }

  html body.ways-page #brand .ways-hm-flow--legacy .flow-arrow{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

/* Mobile keeps the existing single-column reading order. */
@media (max-width:780px){
  html body.ways-page #brand .ways-hm-flow--legacy .flow-row.row4{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html body.ways-page #brand .ways-hm-flow--legacy .flow-node{
    width:min(320px,88vw)!important;
    min-width:0!important;
    max-width:min(320px,88vw)!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    margin-inline:auto!important;
  }
  html body.ways-page #brand .ways-hm-flow--legacy .flow-arrow{
    display:none!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v12.css ===== */
/* HIMART WAYS v12 — 03.2 square operating cards + 03.3 rule refinement. */

/* ---------- 03.2 / OPERATING MODEL ----------
   Material-inspired, sharp line-icon cards. No background fill; the top rule and
   card contents share the same left edge. */
html body.ways-page #journey .ways-operating-stack{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin-left:0!important;
  padding-left:0!important;
}
html body.ways-page #journey .ways-operating-stack>article{
  position:relative!important;
  display:block!important;
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  margin:0!important;
  padding:24px 0 24px!important;
  box-sizing:border-box!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
  background:transparent!important;
  overflow:hidden!important;
}
html body.ways-page #journey .ways-operating-stack>article>span{
  display:block!important;
  margin:0!important;
  color:var(--hm-blue-new)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--hm-track-note)!important;
}
html body.ways-page #journey .ways-operating-stack>article h4{
  margin:18px 0 0!important;
  max-width:12ch!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:28px!important;
  font-weight:100!important;
  font-variation-settings:"wght" 100!important;
  line-height:1.24!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
}
html body.ways-page #journey .ways-operating-stack>article p{
  margin:12px 0 0!important;
  max-width:24ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1.5!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
}
html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
  position:absolute!important;
  right:0!important;
  bottom:22px!important;
  width:72px!important;
  height:72px!important;
  color:var(--hm-blue-new)!important;
  opacity:1!important;
  pointer-events:none!important;
}
html body.ways-page #journey .ways-operating-stack .ways-operating-icon *{
  vector-effect:non-scaling-stroke;
}

/* ---------- 03.3 / RULES ---------- */
html body.ways-page #journey .ways-operating-rules{
  border-top:1px solid rgba(255,255,255,.30)!important;
}

@media(max-width:1180px){
  html body.ways-page #journey .ways-operating-stack{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:780px){
  html body.ways-page #journey .ways-operating-stack{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  html body.ways-page #journey .ways-operating-stack>article{
    aspect-ratio:auto!important;
    min-height:320px!important;
  }
  html body.ways-page #journey .ways-operating-stack>article h4{font-size:24px!important}
  html body.ways-page #journey .ways-operating-stack>article p{font-size:15px!important}
  html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
    width:64px!important;
    height:64px!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v13.css ===== */
/* HIMART WAYS v13 — 03.2 icon refinement. */

/* Icons are 20% smaller than v12 and use the primary Himart blue. */
html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
  width:57.6px!important;
  height:57.6px!important;
  color:var(--hm-blue)!important;
}

@media(max-width:780px){
  html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
    width:51.2px!important;
    height:51.2px!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v14.css ===== */
/* HIMART WAYS v14 — 01.3 type, 03.2 icon spacing, 04 feedback synthesis. */

/* 01.3 — red circle titles use Light weight. */
html body.ways-page #brand .ways-hm-flow--legacy .flow-node h4{
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
}

/* 03.2 — keep icons away from the card edge. */
html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
  right:20px!important;
}

/* 04.3 — department attribution replaces the previous English tags. */
html body.ways-page #direction .ways-feedback-grid span{
  font-family:var(--hm-font-ko)!important;
  font-size:12px!important;
  font-weight:300!important;
  letter-spacing:var(--hm-track-body)!important;
  color:rgba(255,255,255,.50)!important;
  text-transform:none!important;
}

/* Reuse the exact 01.2 SYNTHESIS component; only its contextual copy changes. */
html body.ways-page #direction .ways-feedback-synthesis::after{
  content:"초기 피드백은 상태·맥락·일정·결정이 한곳에 남는 변화에 집중됐습니다. 정량 성과는 이후 운영 데이터로 검증합니다."!important;
}

@media(max-width:780px){
  html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
    right:20px!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v15.css ===== */
/* HIMART WAYS v15 — 03.1 image spacing + copy spacing + 03.2 icon scale. */

/* 03.1 — remove all spacing between the 2x3 image cards. */
html body.ways-page #journey .ways-research-path.ways-research-path--image-grid{
  gap:0!important;
  column-gap:0!important;
  row-gap:0!important;
}

/* 03.1 — remove the 10px gap below each card title. */
html body.ways-page #journey .ways-research-card__content p{
  margin-top:0!important;
}

/* 03.2 — 15% smaller than the previous icon scale while preserving the 48x48 SVG grid. */
html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
  width:39.66px!important;
  height:39.66px!important;
}

@media(max-width:780px){
  html body.ways-page #journey .ways-operating-stack .ways-operating-icon{
    width:35.25px!important;
    height:35.25px!important;
  }
}


/* ===== consolidated from design-system/components/himart-ways-v16.css ===== */
/* HIMART WAYS v16 — requested content hierarchy + legacy-flow focus sequence.
   Final page-local authority loaded after v15. Shared system tokens remain unchanged. */

/* 01.1 — evidence titles. */
html body.ways-page #brand .ways-signal-grid .ways-kicker{
  color:var(--hm-red)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1.2!important;
}
html body.ways-page #brand .ways-signal-grid article>strong{
  margin-top:30px!important;
  color:var(--hm-red)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:36px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.08!important;
  letter-spacing:var(--hm-track-section)!important;
  word-break:keep-all!important;
}
html body.ways-page #brand .ways-signal-grid article>h4{
  margin-top:22px!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
}

/* 01.3 — same circle geometry + focus sequence as AIMMO Graphic 01.2.
   Type follows the current design-system hierarchy: number 12 / title 22 / body 16. */
html body.ways-page #brand .ways-legacy-business-flow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr)!important;
  align-items:center!important;
  width:100%!important;
}
html body.ways-page #brand .ways-legacy-business-flow article{
  --ways-flow-duration:1300ms;
  --ways-flow-delay:0ms;
  display:flex!important;
  aspect-ratio:1!important;
  min-width:0!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:50%!important;
  background:transparent!important;
  text-align:center!important;
  container-type:inline-size!important;
  transition:
    border-color var(--ways-flow-duration) cubic-bezier(.22,.61,.36,1) var(--ways-flow-delay),
    background-color var(--ways-flow-duration) cubic-bezier(.22,.61,.36,1) var(--ways-flow-delay)!important;
}
html body.ways-page #brand .ways-legacy-business-flow article:nth-of-type(1){--ways-flow-delay:0ms}
html body.ways-page #brand .ways-legacy-business-flow article:nth-of-type(2){--ways-flow-delay:650ms}
html body.ways-page #brand .ways-legacy-business-flow article:nth-of-type(3){--ways-flow-delay:1300ms}
html body.ways-page #brand .ways-legacy-business-flow article:nth-of-type(4){--ways-flow-delay:1950ms}
html body.ways-page #brand .ways-legacy-business-flow article>span{
  color:#fff!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-note)!important;
  transition:color var(--ways-flow-duration) cubic-bezier(.22,.61,.36,1) var(--ways-flow-delay)!important;
}
html body.ways-page #brand .ways-legacy-business-flow article>h4{
  margin:13px 0 0!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.22!important;
  letter-spacing:var(--hm-track-group)!important;
  word-break:keep-all!important;
  transition:color var(--ways-flow-duration) cubic-bezier(.22,.61,.36,1) var(--ways-flow-delay)!important;
}
html body.ways-page #brand .ways-legacy-business-flow article>p{
  margin:9px 0 0!important;
  max-width:17ch!important;
  color:rgba(255,255,255,.60)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:16px!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.4!important;
  letter-spacing:var(--hm-track-body)!important;
  word-break:keep-all!important;
  transition:color var(--ways-flow-duration) cubic-bezier(.22,.61,.36,1) var(--ways-flow-delay)!important;
}
html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow{
  --ways-arrow-delay:0ms;
  align-self:center!important;
  justify-self:center!important;
  color:#fff!important;
  border-color:currentColor!important;
  opacity:.30!important;
  transition:
    color 1300ms cubic-bezier(.22,.61,.36,1) var(--ways-arrow-delay),
    opacity 1300ms cubic-bezier(.22,.61,.36,1) var(--ways-arrow-delay)!important;
}
html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow:nth-of-type(1){--ways-arrow-delay:0ms}
html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow:nth-of-type(2){--ways-arrow-delay:650ms}
html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow:nth-of-type(3){--ways-arrow-delay:1300ms}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow>.hm-ds-gallery-arrow{
  color:var(--hm-red,#D30202)!important;
  opacity:1!important;
}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(-n+3){
  border-color:var(--hm-red,#D30202)!important;
}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(-n+3)>span,
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(-n+3)>h4{
  color:var(--hm-red,#D30202)!important;
}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(4){
  border-color:var(--hm-red,#D30202)!important;
  background-color:var(--hm-red,#D30202)!important;
}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(4)>span,
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(4)>h4{
  color:#fff!important;
}
html body.ways-page #brand .hm-subsection.hm-reveal.is-visible .ways-legacy-business-flow article:nth-of-type(4)>p{
  color:rgba(255,255,255,.80)!important;
}

/* 02.1 — role label and interview metadata. */
html body.ways-page #data .ways-team-problem__no{
  color:var(--role-color)!important;
  font-family:var(--hm-font-en)!important;
  font-size:26px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-base)!important;
}
html body.ways-page #data .ways-team-problem__quotes span{
  font-size:12px!important;
}

/* 02.2 / 02.3 — supporting step copy. */
html body.ways-page #data .ways-parallel-lane__step p{
  font-size:12px!important;
  line-height:1.5!important;
}

/* 03.3 — rule title/body hierarchy. */
html body.ways-page #journey .ways-operating-rule h4{
  font-size:var(--hm-type-group)!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
}
html body.ways-page #journey .ways-operating-rule p{
  font-size:16px!important;
  line-height:1.52!important;
}

/* 04.3 — all feedback titles use the case-study blue. */
html body.ways-page #direction .ways-feedback-grid article>strong{
  color:var(--hm-blue)!important;
}

@media(max-width:1180px){
  html body.ways-page #brand .ways-legacy-business-flow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }
  html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow{display:none!important}
}
@media(max-width:780px){
  html body.ways-page #brand .ways-signal-grid article>strong{font-size:36px!important}
  html body.ways-page #brand .ways-legacy-business-flow{grid-template-columns:1fr!important}
  html body.ways-page #brand .ways-legacy-business-flow article{
    width:min(320px,88vw)!important;
    min-height:320px!important;
    margin-inline:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body.ways-page #brand .ways-legacy-business-flow article,
  html body.ways-page #brand .ways-legacy-business-flow>.hm-ds-gallery-arrow{
    transition:none!important;
  }
}

/* ===== CURRENT CANONICAL RULES · 2026-09-19 ===== */

/* 03.2 / operating cards
   Use the shared design-system card copy measure instead of legacy 12ch/24ch limits.
   Korean wraps by word unit and fills roughly two-thirds of each card before wrapping. */
html body.ways-page #journey .ways-operating-stack>article h4,
html body.ways-page #journey .ways-operating-stack>article p{
  width:var(--hm-card-copy-measure)!important;
  max-width:var(--hm-card-copy-measure)!important;
  text-wrap:pretty!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
html body.ways-page #journey .ways-operating-rule h4{
  font-size:var(--hm-type-group)!important;
  font-weight:300!important;
  font-variation-settings:"wght" 300!important;
  line-height:1.3!important;
}
@media(max-width:780px){
  html body.ways-page #journey .ways-operating-stack>article h4,
  html body.ways-page #journey .ways-operating-stack>article p{
    width:var(--hm-card-copy-measure-mobile)!important;
    max-width:var(--hm-card-copy-measure-mobile)!important;
  }
}


/* 02.1 / role rail — keep 26px Averta labels fully visible.
   The previous fixed 20% rail could become narrower than DEV + its right breathing room. */
html body.ways-page #data .ways-team-problem__head{
  grid-template-columns:minmax(88px,20%) minmax(0,1fr)!important;
}
html body.ways-page #data .ways-team-problem__quotes{
  grid-template-columns:minmax(88px,20%) repeat(3,minmax(0,1fr))!important;
}
html body.ways-page #data .ways-team-problem__no{
  width:max-content!important;
  min-width:max-content!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
@media(max-width:780px){
  html body.ways-page #data .ways-team-problem__head,
  html body.ways-page #data .ways-team-problem__quotes{
    grid-template-columns:1fr!important;
  }
}