/*
  HIMART Mobile System v1.2
  Canonical mobile authority for the current Himart / Reuse / Ways case studies.
  Desktop is intentionally untouched: every rule is isolated below 780px.

  Type hierarchy:
  Hero > Major section > Middle title > Group title > Body > Note.

  Circular journey rule:
  - mobile flow is vertical;
  - circular nodes keep a true 1:1 geometry;
  - tablet/capsule groups keep the enclosing rounded outline;
  - text inside circles scales with the circle through container query units.
*/

@media(max-width:780px){
  /* ---------- MOBILE TYPOGRAPHY TOKENS ----------
     Canonical scale: body 14 / group 16 / subsection 20 / section 24 / hero 28.
     These explicit mobile values also protect the system from stale imported token caches. */
  html body.himart-page-body{
    --hm-type-hero-mobile:28px;
    --hm-type-section-mobile:24px;
    --hm-type-subsection-mobile:20px;
    --hm-type-group-mobile:16px;
    --hm-type-body-mobile:14px;
    --hm-type-note-mobile:10px;
    --hm-type-source-mobile:10px;
  }

  /* ---------- CANVAS ---------- */
  html body.himart-page-body #live-main .hm-wrap,
  html body.himart-page-body #live-main .hm-ds-wrap,
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__inner{
    width:calc(100% - (var(--hm-mobile-inset) * 2))!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* ---------- MOBILE TYPE AUTHORITY ---------- */
  html body.himart-page-body #live-main .hm-title,
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__title{
    font-family:var(--hm-font-ko)!important;
    font-size:var(--hm-type-hero-mobile)!important;
    font-weight:100!important;
    line-height:1.08!important;
    letter-spacing:var(--hm-track-hero)!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main :is(#brand,#data,#journey,#direction) > .hm-wrap > .hm-section-head .hm-section-title{
    font-family:var(--hm-font-ko)!important;
    font-size:var(--hm-type-section-mobile)!important;
    font-weight:100!important;
    line-height:1.16!important;
    letter-spacing:var(--hm-track-section)!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-subhead .hm-subtitle,
    .hm-subhead .forced-redesign-title,
    .narrative-title,
    .journey-block-title,
    .data-bridge-title,
    .data-card-head h3,
    .prototype-intro h3,
    .sentiment-conclusion h4
  ){
    font-family:var(--hm-font-ko)!important;
    font-size:var(--hm-type-subsection-mobile)!important;
    font-weight:100!important;
    line-height:1.2!important;
    letter-spacing:var(--hm-track-subsection)!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-group-title,
    .hm-ds-card__title,
    .problem-item h4,
    .proof-item h4,
    .signal-item h4,
    .behavior-card h4,
    .role-card h4,
    .hm-ds-role__title,
    .hm-ds-flow__node h4,
    .direction-card h4,
    .voice-group-title,
    .number-panel h4,
    .sentiment-title,
    .hm-ds-numbered-list > article > h4,
    .ax-friction-card h4,
    .prototype-case-copy h3
  ){
    font-family:var(--hm-font-ko)!important;
    font-size:var(--hm-type-group-mobile)!important;
    font-weight:100!important;
    line-height:1.3!important;
    letter-spacing:var(--hm-track-group)!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-lead,
    .hm-section-desc,
    .hm-subcopy,
    .data-card-head .desc,
    .narrative-copy,
    .journey-block-copy,
    .behavior-note,
    .role-card p,
    .hm-ds-card__body,
    .hm-ds-role__body,
    .hm-ds-flow__node p,
    .number-panel p,
    .proof-item p,
    .prototype-intro p,
    .sentiment-conclusion p,
    .sentiment-keywords,
    .hm-ds-numbered-list > article > p,
    .ax-friction-card p,
    .prototype-case-copy p
  ){
    font-size:var(--hm-type-body-mobile)!important;
    line-height:1.58!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-section-no,
    .hm-subno,
    .hm-card-no,
    .hm-roman-no,
    .hm-note,
    .metric-label,
    .hm-role-name,
    .proof-label,
    .proof-compare,
    .flow-label,
    .hm-source,
    .hm-ds-card__label,
    .phone-meta span,
    .phone-meta b
  ){
    font-size:var(--hm-type-note-mobile)!important;
  }

  /* Hero description and metadata use the same hierarchy on all three pages. */
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__description{
    width:fit-content!important;
    max-width:min(var(--hm-hero-description-width-mobile),88%)!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    text-wrap:pretty!important;
    word-break:keep-all!important;
    -webkit-line-clamp:unset!important;
    line-clamp:none!important;
    margin-top:16px!important;
    font-size:var(--hm-type-body-mobile)!important;
    line-height:1.5!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta span,
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta b{
    font-size:var(--hm-type-note-mobile)!important;
  }

  /* ---------- SHARED MOBILE LAYOUT ---------- */
  html body.himart-page-body #live-main :is(
    .hm-ds-signal-grid,
    .hm-ds-role-grid,
    .role-grid,
    .hm-ds-stat-grid,
    .behavior-grid,
    .proof-grid,
    .signal-grid,
    .direction-list,
    .number-pair
  ){
    grid-template-columns:1fr!important;
  }

  html body.himart-page-body #live-main .hm-ds-numbered-list{
    --hm-numbered-title-size:var(--hm-type-group-mobile)!important;
    grid-template-columns:1fr!important;
  }

  /* Process-only equal segments may stack; ratio charts keep their original ratio geometry. */
  html body.himart-page-body #live-main .hm-ds-segmented-bar.hm-ds-segmented--equal-4{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    height:auto!important;
  }
  html body.himart-page-body #live-main .hm-ds-segmented-bar.hm-ds-segmented--equal-4 > .hm-ds-segment{
    min-height:58px!important;
    padding:0 14px!important;
  }

  /* ---------- CIRCULAR DATA VISUALS ---------- */
  html body.himart-page-body #live-main :is(.hm-ds-ring-row,.ring-row){
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.himart-page-body #live-main :is(.hm-ds-ring-card,.ring-card){
    width:min(78vw,300px)!important;
    max-width:100%!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    padding:17cqi 12cqi 24cqi!important;
    container-type:inline-size!important;
  }
  html body.himart-page-body #live-main :is(.hm-ds-ring-card,.ring-card) h4{
    font-family:var(--hm-font-ko)!important;
    font-size:clamp(16px,8.4cqi,var(--hm-type-group-mobile))!important;
    font-weight:100!important;
    line-height:1.28!important;
    letter-spacing:var(--hm-track-group)!important;
  }
  html body.himart-page-body #live-main :is(.hm-ds-ring-card,.ring-card) p{
    margin-top:6cqi!important;
    font-family:var(--hm-font-ko)!important;
    font-size:clamp(11px,5cqi,var(--hm-type-body-mobile))!important;
    font-weight:300!important;
    line-height:1.5!important;
    letter-spacing:var(--hm-track-body)!important;
  }
  html body.himart-page-body #live-main :is(.hm-ds-ring-card,.ring-card) .pct{
    bottom:8cqi!important;
    font-size:clamp(36px,17cqi,52px)!important;
  }

  /* ---------- JOURNEY CIRCLE + TABLET SYSTEM ---------- */
  html body.himart-page-body #live-main #journey :is(
    .journey-signal-subsection .flow-row,
    .journey-redesign-subsection .flow-row,
    .hm-ds-journey-stack
  ){
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:16px!important;
    width:100%!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .wide-flow-cluster.v12-journey-tablet,
    .hm-ds-journey-tablet
  ){
    position:relative!important;
    display:flex!important;
    width:var(--hm-mobile-tablet-width)!important;
    max-width:320px!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    margin:8px auto!important;
    padding:32px 18px 24px!important;
    border-radius:var(--hm-mobile-tablet-radius)!important;
    background:#000!important;
    overflow:visible!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner,
    .hm-ds-journey-tablet__inner
  ){
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:14px!important;
    width:100%!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .journey-signal-subsection .flow-node,
    .journey-redesign-subsection .flow-node,
    .wide-flow-cluster.v12-journey-tablet .flow-node,
    .hm-ds-journey-circle
  ){
    position:relative!important;
    display:flex!important;
    flex:0 0 var(--hm-mobile-circle-size)!important;
    width:var(--hm-mobile-circle-size)!important;
    min-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;
    aspect-ratio:1/1!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:13cqi!important;
    border-radius:50%!important;
    text-align:center!important;
    box-sizing:border-box!important;
    container-type:inline-size!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .journey-signal-subsection .flow-node .hm-card-no,
    .journey-redesign-subsection .flow-node .hm-card-no,
    .hm-ds-journey-circle .hm-card-no
  ){
    display:block!important;
    margin:0 0 7cqi!important;
    font-family:var(--hm-font-en)!important;
    font-size:clamp(9px,6.5cqi,var(--hm-type-journey-circle-number))!important;
    line-height:1.15!important;
    letter-spacing:var(--hm-track-note)!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .journey-signal-subsection .flow-node h4,
    .journey-redesign-subsection .flow-node h4,
    .hm-ds-journey-circle h4
  ){
    margin:0!important;
    font-family:var(--hm-font-ko)!important;
    font-size:clamp(14px,12.5cqi,var(--hm-type-journey-circle-title))!important;
    font-weight:100!important;
    line-height:1.22!important;
    letter-spacing:var(--hm-track-group)!important;
    text-align:center!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .journey-signal-subsection .flow-node p,
    .journey-redesign-subsection .flow-node p,
    .hm-ds-journey-circle p
  ){
    max-width:100%!important;
    margin:6cqi 0 0!important;
    font-family:var(--hm-font-ko)!important;
    font-size:clamp(10px,7.5cqi,var(--hm-type-journey-circle-body))!important;
    font-weight:300!important;
    line-height:1.42!important;
    letter-spacing:var(--hm-track-body)!important;
    text-align:center!important;
    word-break:keep-all!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .flow-arrow,
    .wide-flow-cluster.v12-journey-tablet .flow-arrow,
    .hm-ds-journey-arrow
  ){
    display:flex!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    align-items:center!important;
    justify-content:center!important;
    transform:rotate(90deg)!important;
    transform-origin:center!important;
  }

  html body.himart-page-body #live-main #journey :is(
    .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label,
    .hm-ds-journey-tablet__label
  ){
    position:absolute!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    width:max-content!important;
    max-width:78%!important;
    height:auto!important;
    min-height:0!important;
    padding:0 10px!important;
    transform:translate(-50%,-50%)!important;
    background:#000!important;
    font-family:var(--hm-font-ko)!important;
    font-size:var(--hm-type-note-mobile)!important;
    font-weight:300!important;
    line-height:1.4!important;
    letter-spacing:var(--hm-track-body)!important;
    text-align:center!important;
    white-space:normal!important;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.0 — sitewide final authority */
/*
  Scope: mobile only (<=780px). Desktop declarations are never changed here.
  Priority:
  1. preserve the desktop information hierarchy;
  2. keep data and circular diagrams readable rather than merely shrinking them;
  3. when a horizontal circle-flow becomes unreadable, stack the same nodes vertically
     and retain the flow as a rounded tablet/capsule outline;
  4. dense SVG charts preserve their desktop plotting geometry inside a touch-scroll viewport.
*/
@media(max-width:780px){
  /* ---------- ALL CASE-STUDY PAGES: CANVAS + TYPE ---------- */
  html body.himart-page-body{
    --hm-mobile-visual-max:320px;
    --hm-mobile-chart-scroll-min:620px;
    overflow-x:hidden!important;
  }
  html body.himart-page-body #live-main{
    overflow-x:clip!important;
  }
  html body.himart-page-body #live-main :is(.hm-wrap,.hm-ds-wrap){
    width:calc(100% - (var(--hm-mobile-inset,18px) * 2))!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-inline:0!important;
  }

  html body.himart-page-body #live-main :is(.hm-title,.hm-ds-hero__title){
    font-size:var(--hm-type-hero-mobile)!important;
    line-height:1.08!important;
  }
  html body.himart-page-body #live-main :is(.hm-section-title,.hm-ds-section__title){
    font-size:var(--hm-type-section-mobile)!important;
    line-height:1.16!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-subtitle,.hm-ds-subsection__title,.narrative-title,.journey-block-title,
    .data-card-head h3,.prototype-intro h3,.sentiment-conclusion h4,
    .forced-redesign-title,.data-bridge-title
  ){
    font-size:var(--hm-type-subsection-mobile)!important;
    line-height:1.22!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-group-title,.problem-item h4,.proof-item h4,.signal-item h4,.behavior-card h4,
    .role-card h4,.direction-card h4,.principle-item h4,.design-rule h4,
    .number-panel h4,.voice-group-title,.ways-operating-stack h4,.ax-maker-step h4,
    .yanolja-lead-step strong,.aimmo-company-signals h4,.ax-friction-card h4,
    .prototype-case-copy h3
  ){
    font-size:var(--hm-type-group-mobile)!important;
    line-height:1.32!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-lead,.hm-section-desc,.hm-subcopy,.data-card-head .desc,.narrative-copy,
    .journey-block-copy,.behavior-note,.role-card p,.direction-card p,.principle-item p,
    .design-rule p,.number-panel p,.proof-item p,.prototype-intro p,.sentiment-conclusion p,
    .ways-operating-stack p,.ax-maker-step p,.yanolja-lead-step p,.aimmo-company-signals p,
    .ax-friction-card p,.prototype-case-copy p
  ){
    font-size:var(--hm-type-body-mobile)!important;
    line-height:1.58!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-section-no,.hm-subno,.hm-card-no,.hm-roman-no,.hm-note,.metric-label,
    .hm-role-name,.proof-label,.proof-compare,.flow-label,.hm-ds-card__label,
    .phone-meta span,.phone-meta b
  ){
    font-size:var(--hm-type-note-mobile)!important;
  }
  html body.himart-page-body #live-main :is(.hm-source,.hm-ds-source-note){
    font-size:var(--hm-type-source-mobile)!important;
    line-height:1.5!important;
  }

  /* Display numerals are constrained independently from editorial titles. */
  html body.himart-page-body #live-main :is(
    .behavior-value,.sentiment-number,.trenbe-age-chart__summary strong,
    .himart-brand-metric-card__value strong,.stepup-en-metric-value
  ){
    font-size:var(--hm-type-data-xl-mobile)!important;
  }

  /* ---------- GENERIC GRAPH CONTAINMENT ---------- */
  html body.himart-page-body #live-main :is(
    .chart-wrap,.data-viz,.aimmo-output-graph,.trenbe-age-chart,
    .reuse-uncertainty-graph
  ){
    max-width:100%!important;
  }
  html body.himart-page-body #live-main .chart-wrap{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body.himart-page-body #live-main .chart-wrap::-webkit-scrollbar{display:none}
  html body.himart-page-body #live-main .chart-svg{
    display:block!important;
    width:max(100%,var(--hm-mobile-chart-scroll-min))!important;
    min-width:var(--hm-mobile-chart-scroll-min)!important;
    height:auto!important;
  }

  /* Simple ratios should fit the viewport without horizontal scrolling. */
  html body.himart-page-body #live-main :is(.pie-layout,.number-pair){
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.himart-page-body #live-main .pie{
    width:min(72vw,260px)!important;
    max-width:260px!important;
    aspect-ratio:1/1!important;
    margin-inline:auto!important;
    flex:0 0 auto!important;
  }
  html body.himart-page-body #live-main .pie-center{
    font-size:var(--hm-type-data-lg-mobile)!important;
  }
  html body.himart-page-body #live-main .pie-layout .legend{
    width:100%!important;
    min-width:0!important;
  }

  /* Shared ring visuals remain true circles. */
  html body.himart-page-body #live-main :is(.hm-ds-ring-row,.ring-row){
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:28px!important;
  }
  html body.himart-page-body #live-main :is(.hm-ds-ring-card,.ring-card){
    width:min(76vw,280px)!important;
    max-width:280px!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
    container-type:inline-size!important;
  }

  /* ---------- HORIZONTAL BAR CHARTS ---------- */
  html body.himart-page-body #live-main :is(
    .aimmo-reference-bars__row,.reuse-reference-bars__row,.ways-reference-bars__row
  ){
    grid-template-columns:88px minmax(0,1fr) 48px!important;
    gap:10px!important;
    min-height:24px!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-reference-bars__label,.aimmo-reference-bars__value,
    .reuse-reference-bars__label,.reuse-reference-bars__value,
    .ways-reference-bars__label,.ways-reference-bars__value
  ){
    font-size:var(--hm-type-chart-value-mobile)!important;
    line-height:1.25!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-reference-bars__track,.reuse-reference-bars__track,.ways-reference-bars__track
  ){
    height:8px!important;
  }

  html body.himart-page-body #live-main :is(
    .aimmo-impact-chart__row,.ways-impact-chart__row
  ){
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:10px!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-impact-chart__label strong,.ways-impact-chart__label strong
  ){
    max-width:9ch!important;
    font-size:17px!important;
    line-height:1.25!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-impact-chart__track,.ways-impact-chart__track
  ){
    height:60px!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-impact-chart__bar strong,.ways-impact-chart__bar strong
  ){
    font-size:28px!important;
  }

  /* ---------- DENSE COLUMN GRAPH: keep desktop plot ratios, allow touch pan ---------- */
  html body.trenbe-ut-page #live-main .trenbe-age-chart{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body.trenbe-ut-page #live-main .trenbe-age-chart::-webkit-scrollbar{display:none}
  html body.trenbe-ut-page #live-main .trenbe-age-chart__summary{
    grid-template-columns:1fr!important;
    gap:14px!important;
    min-width:0!important;
  }
  html body.trenbe-ut-page #live-main .trenbe-age-chart__plot{
    width:560px!important;
    min-width:560px!important;
    height:280px!important;
    gap:10px!important;
  }

  /* ---------- CIRCULAR FLOWS: stack, do not shrink ---------- */
  html body.himart-page-body #live-main :is(
    .aimmo-business-flow,
    .trenbe-evidence-flow,
    .trenbe-segment-flow,
    .stepup-reframe-flow
  ){
    display:flex!important;
    width:min(100%,var(--hm-mobile-visual-max))!important;
    max-width:var(--hm-mobile-visual-max)!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    margin-inline:auto!important;
    padding:34px 18px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:48px!important;
    box-sizing:border-box!important;
    background:transparent!important;
  }

  html body.himart-page-body #live-main :is(
    .aimmo-business-flow > article,
    .trenbe-evidence-node,
    .trenbe-segment-flow > article,
    .stepup-reframe-flow > article
  ){
    flex:0 0 var(--hm-mobile-circle-size)!important;
    width:var(--hm-mobile-circle-size)!important;
    min-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;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    padding:clamp(18px,5vw,24px)!important;
    box-sizing:border-box!important;
    container-type:inline-size!important;
  }

  html body.himart-page-body #live-main :is(
    .aimmo-business-flow > .hm-ds-gallery-arrow,
    .trenbe-flow-arrow,
    .stepup-reframe-arrow
  ){
    display:grid!important;
    place-items:center!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    margin:0!important;
    transform:rotate(90deg)!important;
    transform-origin:center!important;
    opacity:.5!important;
  }

  /* AIMMO System 01.2: keep the two repeated stages inside rounded tablet outlines. */
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow{
    gap:22px!important;
  }
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow .reuse-confidence-row{
    display:flex!important;
    width:100%!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
  }
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow .reuse-confidence-node{
    flex:0 0 var(--hm-mobile-circle-size)!important;
    width:var(--hm-mobile-circle-size)!important;
    min-width:var(--hm-mobile-circle-size)!important;
    height:var(--hm-mobile-circle-size)!important;
    aspect-ratio:1/1!important;
    margin-inline:auto!important;
    padding:clamp(18px,5vw,24px)!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow .reuse-confidence-arrow{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    transform:rotate(90deg)!important;
    opacity:.5!important;
  }
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow .aimmo-repeat-capsule{
    position:relative!important;
    display:flex!important;
    width:min(100%,280px)!important;
    max-width:280px!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
    margin:8px auto!important;
    padding:34px 18px 24px!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:999px!important;
    background:#000!important;
    box-sizing:border-box!important;
  }
  html body.aimmo-system-page #live-main .aimmo-static-reuse-flow .aimmo-repeat-capsule__label{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    width:max-content!important;
    max-width:82%!important;
    padding:0 10px!important;
    transform:translate(-50%,-50%)!important;
    background:#000!important;
    font-size:var(--hm-type-note-mobile)!important;
    line-height:1.35!important;
    text-align:center!important;
    white-space:normal!important;
  }

  /* Reuse complex circle flow already stacks; constrain each circle and preserve its meaning. */
  html body.reuse-current #live-main .reuse-confidence-row{
    align-items:center!important;
  }
  html body.reuse-current #live-main .reuse-confidence-node{
    flex:0 0 var(--hm-mobile-circle-size)!important;
    width:var(--hm-mobile-circle-size)!important;
    min-width:var(--hm-mobile-circle-size)!important;
    height:var(--hm-mobile-circle-size)!important;
    min-height:var(--hm-mobile-circle-size)!important;
    aspect-ratio:1/1!important;
  }

  /* ---------- STEPUP 01.2: restore the desktop circle semantics on mobile ---------- */
  html body.nbt-stepup-page #reframe .stepup-reframe-flow article{
    aspect-ratio:1/1!important;
    min-height:0!important;
  }
  html body.nbt-stepup-page #reframe .stepup-reframe-flow>.stepup-reframe-arrow{
    display:grid!important;
  }

  /* STEPUP 04.3: use a readable mobile donut instead of squeezing the 20% segment copy. */
  html body.nbt-stepup-page #habit .aimmo-environment-ratio{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__pie{
    display:grid!important;
    width:min(68vw,240px)!important;
    max-width:240px!important;
    aspect-ratio:1/1!important;
    place-items:center!important;
    margin-inline:auto!important;
    border-radius:50%!important;
    background:conic-gradient(var(--hm-blue,#00A6ED) 0 20%,rgba(0,166,237,.20) 20% 100%)!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__center{
    display:flex!important;
    width:58%!important;
    aspect-ratio:1/1!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#000!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__center strong{
    font:300 var(--hm-type-data-lg-mobile)/1 var(--hm-font-en)!important;
    letter-spacing:var(--hm-track-data-number)!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__center span{
    margin-top:7px!important;
    font:400 var(--hm-type-note-mobile)/1.2 var(--hm-font-en)!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__legend{
    display:grid!important;
    width:100%!important;
    height:auto!important;
    gap:0!important;
    overflow:visible!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__legend-row{
    display:grid!important;
    grid-template-columns:12px minmax(0,1fr) auto!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    flex:none!important;
    align-items:center!important;
    padding:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    background:transparent!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__legend-row i{
    display:block!important;
    width:8px!important;
    height:8px!important;
    border-radius:50%!important;
    background:var(--segment-color)!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__legend-row span{
    font-size:var(--hm-type-body-mobile)!important;
    white-space:normal!important;
  }
  html body.nbt-stepup-page #habit .aimmo-environment-ratio__legend-row b{
    margin:0!important;
    font-size:var(--hm-type-data-md-mobile)!important;
    text-align:right!important;
  }

  /* ---------- HOMEPAGE / WORKS / ABOUT MOBILE TYPE CONTRACT ---------- */
  body.works-page-body .works-page-title{
    font-size:var(--hm-type-section-mobile,24px)!important;
  }
  body.works-page-body .works-card-title{
    font-size:var(--hm-type-section-mobile,24px)!important;
    line-height:1.12!important;
  }
  body.works-page-body .works-card-company{
    font-size:var(--hm-type-note-mobile,10px)!important;
  }

  body.about-page-body :is(.about-hero-title,.about-statement){
    font-size:var(--hm-type-hero-mobile)!important;
    line-height:1.12!important;
  }
  body.about-page-body :is(.principle-title,.interview-q,.leadership-card-title){
    font-size:var(--hm-type-group-mobile,16px)!important;
    line-height:1.3!important;
  }
  body.about-page-body :is(.about-lead,.principle-copy,.interview-a,.leadership-card-copy){
    font-size:var(--hm-type-body-mobile,14px)!important;
    line-height:1.58!important;
  }

  /* Home has deliberately oversized kinetic typography; only supporting copy is normalized. */
  body.home-page :is(.impact-copy,.subtractive-korean,.hero-identity){
    font-size:var(--hm-type-body-mobile,14px)!important;
  }
  body.home-page :is(.mini-label,.principle-en){
    font-size:var(--hm-type-note-mobile,10px)!important;
  }
}

@media(max-width:420px){
  html body.himart-page-body{
    --hm-mobile-circle-size:clamp(164px,52vw,188px);
    --hm-mobile-visual-max:100%;
    --hm-mobile-chart-scroll-min:580px;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.1 — ratio/card refinements */
@media(max-width:780px){
  /* Data/insight grids collapse before typography is reduced further. */
  html body.himart-page-body #live-main :is(
    .himart-brand-metric-grid,.reuse-brand-metric-grid,.himart-data-metric-grid,
    .aimmo-company-signals,.aimmo-graphic-signal-grid,.ax-maker-flow,
    .yanolja-goal-grid,.yanolja-rule-grid,.yanolja-lead-flow,
    .stepup-question-grid,.stepup-experience-grid
  ){
    grid-template-columns:1fr!important;
  }

  html body.himart-page-body #live-main :is(
    .himart-brand-metric-card,.himart-data-metric-card
  ){
    min-height:0!important;
  }
  html body.himart-page-body #live-main :is(
    .himart-brand-metric-card__value,.himart-data-metric-card .himart-brand-metric-card__value
  ){
    margin-top:48px!important;
  }

  /* AIMMO 02 environment ratio: mobile uses the same percentages as a readable donut.
     Desktop remains the authored 78.7 / 21.3 segmented bar. */
  html body.aimmo-system-page #data .aimmo-environment-ratio{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__pie{
    display:grid!important;
    width:min(68vw,240px)!important;
    max-width:240px!important;
    aspect-ratio:1/1!important;
    place-items:center!important;
    margin-inline:auto!important;
    border-radius:50%!important;
    background:conic-gradient(var(--hm-chart-01,#00A6ED) 0 78.7%,var(--hm-chart-02,#007DE3) 78.7% 100%)!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__center{
    display:flex!important;
    width:58%!important;
    aspect-ratio:1/1!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#000!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__center strong{
    color:#fff!important;
    font:300 var(--hm-type-data-lg-mobile)/1 var(--hm-font-en)!important;
    letter-spacing:var(--hm-track-data-number)!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__center span{
    margin-top:7px!important;
    color:rgba(255,255,255,.6)!important;
    font:400 var(--hm-type-note-mobile)/1.2 var(--hm-font-en)!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__legend{
    display:grid!important;
    width:100%!important;
    height:auto!important;
    gap:0!important;
    overflow:visible!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__legend-row{
    display:grid!important;
    grid-template-columns:12px minmax(0,1fr) auto!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    flex:none!important;
    align-items:center!important;
    padding:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    background:transparent!important;
    clip-path:none!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__legend-row i{
    display:block!important;
    width:8px!important;
    height:8px!important;
    border-radius:50%!important;
    background:var(--segment-color)!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__legend-row span{
    font-size:var(--hm-type-body-mobile)!important;
    white-space:normal!important;
  }
  html body.aimmo-system-page #data .aimmo-environment-ratio__legend-row b{
    margin:0!important;
    font-size:var(--hm-type-data-md-mobile)!important;
    text-align:right!important;
  }

  /* Data card copy must never force a desktop-width line on mobile. */
  html body.himart-page-body #live-main :is(
    .himart-brand-metric-card h4,.himart-data-metric-card h4,
    .aimmo-company-signals h4,.ax-maker-step h4,.yanolja-lead-step strong
  ){
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.4 — canonical self-contained mobile token bridge.
   This :root bridge is the final authority for HOME / ABOUT / WORKS as well as
   detail pages, so it must match the 14 / 16 / 20 / 24 / 28 mobile scale above. */
@media(max-width:780px){
  :root{
    --hm-type-hero-mobile:28px;
    --hm-type-section-mobile:24px;
    --hm-type-subsection-mobile:20px;
    --hm-type-group-mobile:16px;
    --hm-type-body-mobile:14px;
    --hm-type-note-mobile:10px;
    --hm-type-source-mobile:10px;
    --hm-type-data-xl-mobile:clamp(48px,14vw,68px);
    --hm-type-data-lg-mobile:clamp(32px,9.5vw,44px);
    --hm-type-data-md-mobile:clamp(24px,7.2vw,32px);
    --hm-type-chart-label-mobile:12px;
    --hm-type-chart-value-mobile:13px;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.3 — non-square gallery copy below media */
@media(max-width:780px){
  /*
    Mobile gallery copy contract
    - Non-square gallery/media views keep text outside the image plane.
    - Square gallery cards are intentionally excluded and preserve their authored overlay treatment.
    - Navigation/status remains on the media plane.
  */

  /* REUSE 03.2 — 4:3 rolling image galleries. */
  html body.reuse-current #live-main .reuse-image-display-card{
    container-type:inline-size!important;
    display:block!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
  html body.reuse-current #live-main .reuse-image-display-card__viewport{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    overflow:hidden!important;
    background:#080808!important;
  }
  html body.reuse-current #live-main .reuse-image-display-card::after{
    display:none!important;
    content:none!important;
  }
  html body.reuse-current #live-main .reuse-image-display-card__copy{
    position:relative!important;
    z-index:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:18px 0 30px!important;
    text-align:left!important;
    pointer-events:auto!important;
  }
  html body.reuse-current #live-main .reuse-image-display-card__nav{
    top:37.5cqw!important;
  }
  html body.reuse-current #live-main .reuse-image-display-card__status{
    top:16px!important;
    right:16px!important;
    bottom:auto!important;
  }

  /* REUSE 03.3 — 16:9 rolling production galleries. */
  html body.reuse-current #live-main .reuse-production-gallery{
    container-type:inline-size!important;
    display:block!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery__viewport{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    background:#080808!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery::after{
    display:none!important;
    content:none!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery__copy,
  html body.reuse-current #live-main .reuse-production-gallery--video-player .reuse-production-gallery__copy{
    position:relative!important;
    z-index:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:18px 0 30px!important;
    text-align:left!important;
    pointer-events:auto!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery__nav,
  html body.reuse-current #live-main .reuse-video-player__skip,
  html body.reuse-current #live-main .reuse-video-player__toggle{
    top:28.125cqw!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery__status{
    top:16px!important;
    right:16px!important;
    bottom:auto!important;
  }
  html body.reuse-current #live-main .reuse-production-gallery--video-player .reuse-video-player__veil{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    height:56.25cqw!important;
  }

  /* AIMMO System 02.1 / 02.3 — 16:9 evidence galleries. 03.2 square application gallery is excluded. */
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card{
    container-type:inline-size!important;
    display:block!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card__viewport{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    background:#080808!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card > img{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card::after{
    display:none!important;
    content:none!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card > figcaption{
    position:relative!important;
    z-index:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 0 30px!important;
    background:transparent!important;
    text-align:left!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card__nav{
    top:28.125cqw!important;
  }
  html body.aimmo-system-page #live-main :is(.aimmo-evidence-gallery,.aimmo-improvement-gallery) .aimmo-evidence-card__status{
    top:16px!important;
    right:16px!important;
    bottom:auto!important;
  }

  /* AIMMO Graphic uses 16:9 media-gallery items page-wide; text, when present, belongs below media.
     Shared square media-gallery cards on other pages are intentionally untouched. */
  html body.aimmo-graphic-page #live-main .hm-ds-media-gallery__item{
    display:block!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
  html body.aimmo-graphic-page #live-main .hm-ds-media-gallery__item > :is(img,video){
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
  }
  html body.aimmo-graphic-page #live-main .hm-ds-media-gallery__item::after{
    display:none!important;
    content:none!important;
  }
  html body.aimmo-graphic-page #live-main .hm-ds-media-gallery__item > figcaption{
    position:relative!important;
    z-index:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:18px 0 30px!important;
    background:transparent!important;
  }
  html body.aimmo-graphic-page #live-main .aimmo-wide-gallery--clean .hm-ds-media-gallery__item > figcaption{
    display:none!important;
  }

  /* TEAM / YANOLJA 16:9 workshop galleries: cards/copy sit below the media on mobile. */
  html body:is(.himart-team-page,.yanolja-system-page) #live-main .team-workshop-visual{
    padding-bottom:0!important;
    overflow:visible!important;
  }
  html body:is(.himart-team-page,.yanolja-system-page) #live-main .team-workshop-visual__image{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  html body:is(.himart-team-page,.yanolja-system-page) #live-main .team-workshop-visual__cards{
    position:relative!important;
    z-index:auto!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:18px 0 0!important;
    padding:0!important;
    transform:none!important;
    background:transparent!important;
    overflow:visible!important;
  }
  html body:is(.himart-team-page,.yanolja-system-page) #live-main .team-workshop-card{
    min-height:0!important;
    height:auto!important;
    padding:22px 0 26px!important;
    border-left:0!important;
    background:transparent!important;
  }

  /* StepUp phone carousel already places copy below the phone media; keep that structure explicit. */
  html body.nbt-stepup-page #live-main .stepup-screens-carousel .production-v18-copy{
    position:relative!important;
    inset:auto!important;
    margin-top:20px!important;
  }

  /* Existing below-media galleries remain below-media and receive no overlay on mobile. */
  html body.trenbe-ut-page #live-main .trenbe-field-gallery figcaption,
  html body.himart-ax-page #live-main .ax-banner-reference figcaption{
    position:relative!important;
    inset:auto!important;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.4 — vertical flow / gallery / footer authority
   Desktop is intentionally untouched. These rules are the final <=780px authority. */
@media(max-width:780px){
  /* ---------- WORD-BASED MOBILE WRAPPING ---------- */
  body :is(
    #live-main,.shell,.portfolio-footer,.hm-project-footer,.hm-project-reflection,.wa-switcher
  ) :is(h1,h2,h3,h4,h5,h6,p,li,figcaption,strong,a,button,span){
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    line-break:strict;
  }

  /* ---------- SITEWIDE MOBILE FOOTERS ---------- */
  body .portfolio-footer .portfolio-footer__inner{
    grid-template-columns:1fr!important;
    row-gap:20px!important;
    align-items:start!important;
  }
  body .portfolio-footer :is(
    .portfolio-footer__left,.portfolio-footer__right,
    .portfolio-footer__left p,.portfolio-footer__right p,
    .portfolio-footer__left a,.portfolio-footer__right a
  ){
    width:100%!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  html body.himart-page-body .hm-project-footer__rail{
    display:grid!important;
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
    gap:0!important;
    align-items:stretch!important;
  }
  html body.himart-page-body .hm-project-footer__link{
    width:100%!important;
    min-height:82px!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    flex-direction:row!important;
    padding:18px 0 18px 32px!important;
    text-align:left!important;
  }
  html body.himart-page-body .hm-project-footer__link--next{
    border-top:1px solid rgba(255,255,255,.10)!important;
  }
  html body.himart-page-body .hm-project-footer__link--next .hm-project-footer__arrow{
    right:auto!important;
    left:0!important;
  }
  html body.himart-page-body .hm-project-footer__link--next .hm-project-footer__arrow::before{
    transform:translate(-65%,-50%) rotate(45deg)!important;
  }
  html body.himart-page-body .hm-project-footer__meta,
  html body.himart-page-body .hm-project-footer__label,
  html body.himart-page-body .hm-project-footer__name{
    width:100%!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  html body.himart-page-body #live-main :is(.hm-footer > .hm-wrap,.stepup-footer-inner){
    justify-items:start!important;
    text-align:left!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-footer > .hm-wrap > *, .hm-footer > .hm-wrap > div > *,
    .stepup-footer-inner > *, .stepup-footer-inner > div > *
  ){
    width:100%!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  /* ---------- VERTICAL CIRCLE / TABLET / CAPSULE FLOWS ---------- */
  html body.himart-page-body #live-main :is(
    #journey .flow-row,
    .reuse-confidence-row,
    .reuse-proof-band__nodes,
    .aimmo-ownership-sync,
    .aimmo-business-flow,
    .stepup-habit-flow,
    .stepup-reframe-flow
  ){
    display:flex!important;
    width:100%!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
  }

  html body.himart-page-body #live-main :is(
    .wide-flow-cluster.v12-journey-tablet,
    .hm-ds-journey-tablet,
    .hm-flow-capsule,
    .aimmo-repeat-capsule
  ){
    position:relative!important;
    display:flex!important;
    width:min(100%,var(--hm-mobile-tablet-width,320px))!important;
    max-width:320px!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    margin:8px auto!important;
    padding:36px 18px 24px!important;
    border-radius:999px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  html body.himart-page-body #live-main :is(
    .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-inner,
    .hm-ds-journey-tablet__inner,
    .hm-flow-capsule__inner
  ){
    display:flex!important;
    width:100%!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
  }

  html body.himart-page-body #live-main :is(
    .wide-flow-cluster.v12-journey-tablet .wide-flow-cluster-label,
    .hm-ds-journey-tablet__label,
    .hm-flow-capsule__label,
    .aimmo-repeat-capsule__label,
    .aimmo-ownership-sync__label
  ){
    position:absolute!important;
    z-index:2!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    width:max-content!important;
    max-width:82%!important;
    margin:0!important;
    padding:0 10px!important;
    transform:translate(-50%,-50%)!important;
    background:#000!important;
    text-align:center!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  /* Every horizontal connector becomes a vertical down-flow connector on mobile. */
  html body.himart-page-body #live-main :is(
    #journey .flow-arrow,
    .reuse-confidence-arrow,
    .hm-flow-arrowhead
  ){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:rotate(90deg)!important;
    transform-origin:center!important;
  }
  html body.himart-page-body #live-main :is(
    .aimmo-business-flow,
    .stepup-habit-flow
  ) > .hm-ds-gallery-arrow{
    transform:rotate(135deg)!important;
    transform-origin:center!important;
  }
  html body.nbt-stepup-page #live-main .stepup-reframe-flow > .stepup-reframe-arrow{
    display:grid!important;
    place-items:center!important;
    transform:rotate(90deg)!important;
    transform-origin:center!important;
  }

  /* Circle content scales from the circle itself, not from viewport width. */
  html body.himart-page-body #live-main :is(
    #journey .flow-node,
    .reuse-confidence-node,
    .reuse-proof-map__node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article,
    .stepup-reframe-flow > article
  ){
    container-type:inline-size!important;
  }
  html body.himart-page-body #live-main :is(
    #journey .flow-node,
    .reuse-confidence-node,
    .reuse-proof-map__node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article,
    .stepup-reframe-flow > article
  ) > :is(span,.hm-card-no){
    font-size:clamp(9px,6cqi,12px)!important;
    line-height:1.1!important;
  }
  html body.himart-page-body #live-main :is(
    #journey .flow-node,
    .reuse-confidence-node,
    .reuse-proof-map__node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article,
    .stepup-reframe-flow > article
  ) h4{
    font-size:clamp(14px,10.5cqi,22px)!important;
    line-height:1.24!important;
    word-break:keep-all!important;
  }
  html body.himart-page-body #live-main :is(
    #journey .flow-node,
    .reuse-confidence-node,
    .aimmo-ownership-sync__node,
    .aimmo-business-flow > article,
    .stepup-habit-flow > article,
    .stepup-reframe-flow > article
  ) p{
    max-width:84%!important;
    font-size:clamp(10px,6.3cqi,13px)!important;
    line-height:1.42!important;
    word-break:keep-all!important;
  }

  html body.aimmo-system-page #live-main .aimmo-ownership-sync{
    position:relative!important;
    width:min(100%,var(--hm-mobile-tablet-width,320px))!important;
    max-width:320px!important;
    margin-inline:auto!important;
    padding:38px 18px 24px!important;
    border-radius:999px!important;
  }

  /* ---------- REUSE GALLERY ARROWS: IMAGE-PLANE ONLY ---------- */
  html body.reuse-current:not(.work-archive-page) #live-main .reuse-image-display-card__nav{
    top:0!important;
    bottom:auto!important;
    height:75cqw!important;
    transform:none!important;
  }
  html body.reuse-current:not(.work-archive-page) #live-main .reuse-production-gallery__nav{
    top:0!important;
    bottom:auto!important;
    height:56.25cqw!important;
    transform:none!important;
  }
  html body.reuse-current:not(.work-archive-page) #live-main :is(
    .reuse-image-display-card__nav,.reuse-production-gallery__nav
  )::before{
    top:50%!important;
  }

  /* ---------- WORK ARCHIVE: TITLE -> MEDIA -> COPY ---------- */
  html body.work-archive-page #live-main .wa-project__head{
    position:relative!important;
    display:block!important;
    width:100%!important;
    margin:0 0 24px!important;
  }
  html body.work-archive-page #live-main .wa-company .reuse-production-gallery{
    display:block!important;
    width:100%!important;
    height:var(--wa-gallery-height,auto)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#080808!important;
    container-type:inline-size!important;
  }
  html body.work-archive-page #live-main .wa-company .reuse-production-gallery__viewport{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#080808!important;
  }
  html body.work-archive-page #live-main .wa-company .reuse-production-gallery__nav{
    top:0!important;
    bottom:auto!important;
    height:100%!important;
    transform:none!important;
  }
  html body.work-archive-page #live-main .wa-company .reuse-production-gallery__nav::before{
    top:50%!important;
  }
  html body.work-archive-page #live-main .wa-company .reuse-production-gallery__status{
    top:16px!important;
    right:16px!important;
    bottom:auto!important;
  }
  html body.work-archive-page #live-main .wa-gallery-overlay.is-mobile-stacked{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:18px 0 0!important;
    padding:0 0 28px!important;
    color:rgba(255,255,255,.70)!important;
    background:transparent!important;
    text-align:left!important;
  }
  html body.work-archive-page #live-main .wa-gallery-overlay.is-mobile-stacked :is(
    .wa-gallery-overlay__body,
    .wa-gallery-overlay__body p,
    .wa-gallery-note
  ){
    width:100%!important;
    max-width:100%!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.5 — paired proof / Yanolja / Trenbe corrections
   Mobile only. Desktop geometry and information order are untouched. */
@media(max-width:780px){
  /* REUSE 02.1 — preserve the semantic pair:
     anxiety circle -> downward arrow -> matching solution circle. */
  html body.reuse-current #data .reuse-proof-map{
    display:flex!important;
    width:100%!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:56px!important;
  }
  html body.reuse-current #data .reuse-proof-map > .reuse-proof-band,
  html body.reuse-current #data .reuse-proof-map > .reuse-proof-band > .reuse-proof-band__nodes{
    display:contents!important;
  }
  html body.reuse-current #data .reuse-proof-map > .reuse-proof-map__arrow{
    display:none!important;
  }
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node{
    position:relative!important;
    flex:0 0 var(--hm-mobile-circle-size)!important;
    width:var(--hm-mobile-circle-size)!important;
    min-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;
    aspect-ratio:1/1!important;
    margin:0 auto!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--anxiety:nth-child(1){order:1}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--solution:nth-child(1){order:2}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--anxiety:nth-child(2){order:3}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--solution:nth-child(2){order:4}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--anxiety:nth-child(3){order:5}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--solution:nth-child(3){order:6}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--anxiety:nth-child(4){order:7}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--solution:nth-child(4){order:8}
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--anxiety::after{
    content:""!important;
    position:absolute!important;
    z-index:8!important;
    left:50%!important;
    bottom:-31px!important;
    display:block!important;
    width:12px!important;
    height:12px!important;
    border-right:1px solid rgba(255,255,255,.46)!important;
    border-bottom:1px solid rgba(255,255,255,.46)!important;
    background:transparent!important;
    transform:translateX(-50%) rotate(45deg)!important;
    transform-origin:center!important;
    pointer-events:none!important;
  }
  html body.reuse-current #data .reuse-proof-map .reuse-proof-map__node--solution:not(:last-child){
    margin-bottom:34px!important;
  }

  /* YANOLJA — the source page disabled aspect-ratio on mobile.
     Reinstate true circles and center them in the single-column flow. */
  html body.yanolja-system-page #live-main :is(
    .yanolja-question-grid,
    .yanolja-direction-grid,
    .yanolja-goal-grid
  ){
    justify-items:center!important;
  }
  html body.yanolja-system-page #live-main :is(
    .yanolja-question-card,
    .yanolja-direction-card,
    .yanolja-goal-card
  ){
    display:flex!important;
    flex:0 0 min(76vw,280px)!important;
    width:min(76vw,280px)!important;
    min-width:0!important;
    max-width:280px!important;
    height:min(76vw,280px)!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    margin-inline:auto!important;
    padding:clamp(22px,6vw,32px)!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    container-type:inline-size!important;
  }

  /* YANOLJA 03.1 — six color families read as a compact 2-column palette. */
  html body.yanolja-system-page #journey .yanolja-palette{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:26px 12px!important;
    align-items:start!important;
  }

  /* TRENBE 02.1 — value labels sit directly above and centered on each bar. */
  html body.trenbe-ut-page #data .trenbe-age-bar b{
    left:50%!important;
    right:auto!important;
    bottom:calc(var(--value) * 11px + 6px)!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:none!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}


/* MOBILE PORTFOLIO SYSTEM v2.6 — Yanolja rows and gallery controls
   Mobile-only corrections. Desktop remains untouched. */
@media(max-width:780px){
  /* YANOLJA 01.2 — one numbered answer per row. */
  html body.yanolja-system-page #brand .aimmo-collaboration-grid.yanolja-answer-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:28px!important;
  }
  html body.yanolja-system-page #brand .aimmo-collaboration-grid.yanolja-answer-grid>article{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
  }

  /* YANOLJA 04.1 / 04.2 — page CSS previously collapsed gallery controls to 36px.
     Restore the hit area to the full image plane so arrows remain vertically centered. */
  html body.yanolja-system-page #direction .hst-ds-gallery__nav{
    top:0!important;
    bottom:0!important;
    width:var(--hm-gallery-nav-hit-width,10%)!important;
    height:100%!important;
    margin:0!important;
    transform:none!important;
  }
  html body.yanolja-system-page #direction .hst-ds-gallery__nav::before{
    top:50%!important;
  }
}

/* MOBILE PORTFOLIO SYSTEM v2.7 — final editorial type authority.
   This block intentionally sits last so page-specific mobile rules cannot restore
   older desktop-like sizes. Canonical scale: body 14 / group 16 / subsection 20 / section 24 / hero 28. */
@media(max-width:780px){
  html body.himart-page-body{
    --hm-type-hero-mobile:28px!important;
    --hm-type-section-mobile:24px!important;
    --hm-type-subsection-mobile:20px!important;
    --hm-type-group-mobile:16px!important;
    --hm-type-body-mobile:14px!important;
    --hm-type-note-mobile:10px!important;
    --hm-type-source-mobile:10px!important;
  }

  html body.himart-page-body #live-main .hm-section-title{
    font-size:var(--hm-type-section-mobile)!important;
    line-height:1.16!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-subhead .hm-subtitle,
    .hm-subhead .forced-redesign-title,
    .narrative-title,
    .journey-block-title,
    .data-bridge-title,
    .data-card-head h3,
    .prototype-intro h3,
    .sentiment-conclusion h4
  ){
    font-size:var(--hm-type-subsection-mobile)!important;
    line-height:1.22!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-group-title,
    .hm-ds-card__title,
    .problem-item h4,
    .proof-item h4,
    .signal-item h4,
    .behavior-card h4,
    .role-card h4,
    .hm-ds-role__title,
    .hm-ds-flow__node h4,
    .direction-card h4,
    .voice-group-title,
    .number-panel h4,
    .sentiment-title,
    .hm-ds-numbered-list > article > h4,
    .ax-friction-card h4,
    .prototype-case-copy h3
  ){
    font-size:var(--hm-type-group-mobile)!important;
    line-height:1.32!important;
  }

  html body.himart-page-body #live-main :is(
    .hm-lead,
    .hm-section-desc,
    .hm-subcopy,
    .data-card-head .desc,
    .narrative-copy,
    .journey-block-copy,
    .behavior-note,
    .role-card p,
    .hm-ds-card__body,
    .hm-ds-role__body,
    .hm-ds-flow__node p,
    .number-panel p,
    .proof-item p,
    .prototype-intro p,
    .sentiment-conclusion p,
    .sentiment-keywords,
    .hm-ds-numbered-list > article > p,
    .ax-friction-card p,
    .prototype-case-copy p
  ){
    font-size:14px!important;
    line-height:1.55!important;
  }
}



/* MOBILE PORTFOLIO SYSTEM v2.9 — final high-specificity editorial type lock.
   850px is the single mobile breakpoint shared with the canonical GNB.
   The token bridge lives here as the final authority so 781–850px devices cannot
   fall back to desktop title sizes. */
@media(max-width:850px){
  :root{
    --hm-type-hero-mobile:28px!important;
    --hm-type-section-mobile:24px!important;
    --hm-type-subsection-mobile:20px!important;
    --hm-type-group-mobile:16px!important;
    --hm-type-body-mobile:14px!important;
    --hm-type-note-mobile:10px!important;
    --hm-type-source-mobile:10px!important;
  }
  html body.himart-page-body{
    --hm-type-hero-mobile:28px!important;
    --hm-type-section-mobile:24px!important;
    --hm-type-subsection-mobile:20px!important;
    --hm-type-group-mobile:16px!important;
    --hm-type-body-mobile:14px!important;
    --hm-type-note-mobile:10px!important;
    --hm-type-source-mobile:10px!important;
  }

  html body.himart-page-body.hm-wide-editorial #live-main > :is(#brand,#data,#journey,#direction).hm-section .hm-section-head .hm-section-title{
    font-size:var(--hm-type-section-mobile)!important;
    line-height:1.16!important;
  }

  html body.himart-page-body.hm-wide-editorial #live-main :is(#brand,#data,#journey,#direction) :is(
    .hm-subtitle,
    .forced-redesign-title,
    .narrative-title,
    .journey-block-title,
    .data-bridge-title,
    .data-card-head h3,
    .prototype-intro h3,
    .sentiment-conclusion h4
  ){
    font-size:var(--hm-type-subsection-mobile)!important;
    line-height:1.22!important;
  }

  html body.himart-page-body.hm-wide-editorial #live-main :is(#brand,#data,#journey,#direction) :is(
    .hm-group-title,
    .hm-ds-card__title,
    .problem-item h4,
    .proof-item h4,
    .signal-item h4,
    .behavior-card h4,
    .behavior-pattern-card h4,
    .role-card h4,
    .direction-card h4,
    .himart-brand-metric-card h4,
    .himart-data-metric-card h4,
    .voice-group-title,
    .number-panel h4,
    .ax-friction-card h4,
    .prototype-case-copy h3
  ){
    font-size:var(--hm-type-group-mobile)!important;
    line-height:1.32!important;
  }

  html body.himart-page-body.hm-wide-editorial #live-main :is(#brand,#data,#journey,#direction) :is(
    .hm-lead,
    .hm-section-desc,
    .hm-subcopy,
    .narrative-copy,
    .journey-block-copy,
    .behavior-note,
    .behavior-pattern-card p,
    .role-card p,
    .direction-card p,
    .number-panel p,
    .proof-item p,
    .prototype-intro p,
    .ax-friction-card p,
    .prototype-case-copy p
  ){
    font-size:14px!important;
    line-height:1.55!important;
  }

  html body.himart-page-body.hm-wide-editorial #live-main :is(#brand,#data,#journey,#direction) :is(
    .hm-section-no,
    .hm-subno,
    .hm-card-no,
    .hm-roman-no,
    .hm-note,
    .metric-label,
    .proof-label,
    .flow-label,
    .himart-brand-metric-card__index
  ){
    font-size:10px!important;
  }

  html body.himart-page-body #live-main .hm-ds-index-label[data-index]::before{
    font-size:10px!important;
    line-height:1.2!important;
  }
}

/* Shared 781–850px title/body coverage and final mobile hierarchy.
   Display numerals and the kinetic Home hero retain their separate visual scale. */
@media(max-width:850px){
  html body.himart-page-body #live-main :is(.hm-title,.hm-ds-hero__title){
    font-size:var(--hm-type-hero-mobile)!important;
  }
  html body.himart-page-body #live-main :is(.hm-section-title,.hm-ds-section__title){
    font-size:var(--hm-type-section-mobile)!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-subtitle,.hm-ds-subsection__title,.narrative-title,.journey-block-title,
    .data-card-head h3,.prototype-intro h3,.sentiment-conclusion h4,
    .forced-redesign-title,.data-bridge-title
  ){
    font-size:var(--hm-type-subsection-mobile)!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-group-title,.hm-ds-card__title,.problem-item h4,.proof-item h4,
    .signal-item h4,.behavior-card h4,.behavior-pattern-card h4,.role-card h4,
    .hm-ds-role__title,.hm-ds-flow__node h4,.direction-card h4,
    .principle-item h4,.design-rule h4,.number-panel h4,.voice-group-title,
    .ways-operating-stack h4,.ax-maker-step h4,.yanolja-lead-step strong,
    .aimmo-company-signals h4,.ax-friction-card h4,.prototype-case-copy h3
  ){
    font-size:var(--hm-type-group-mobile)!important;
  }
  html body.himart-page-body #live-main :is(
    .hm-lead,.hm-section-desc,.hm-subcopy,.narrative-copy,.journey-block-copy,
    .behavior-note,.behavior-pattern-card p,.role-card p,.direction-card p,
    .principle-item p,.design-rule p,.number-panel p,.proof-item p,
    .ways-operating-stack p,.ax-maker-step p,.yanolja-lead-step p,
    .aimmo-company-signals p,.ax-friction-card p,.prototype-case-copy p
  ){
    font-size:var(--hm-type-body-mobile)!important;
  }
  html body.works-page-body :is(.works-page-title,.works-card-title){
    font-size:var(--hm-type-section-mobile)!important;
  }
  html body.about-page-body :is(.about-hero-title,.about-statement){
    font-size:var(--hm-type-hero-mobile)!important;
  }
  html body.about-page-body :is(.principle-title,.interview-q,.leadership-card-title){
    font-size:var(--hm-type-group-mobile)!important;
  }
  html body.about-page-body :is(.about-lead,.principle-copy,.interview-a,.leadership-card-copy),
  html body.home-page :is(.impact-copy,.subtractive-korean,.hero-identity){
    font-size:var(--hm-type-body-mobile)!important;
  }
}