/* AIMMO Graphic v2 — narrative refinement and shared-system adoption. */

/* AIMMO Graphic intentionally keeps its editorial gallery stack edge-to-edge,
   while the shared design-system default is 24px. */
html body.aimmo-graphic-page{
  --hm-ds-media-gallery-gap:0px;
  --hm-ds-media-carousel-ratio:16/9;
}

/* 01.1 — four signals stay on one row on desktop. */
html body.aimmo-graphic-page #brand .aimmo-graphic-signal-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}

/* 01.2 — page-local red problem flow. */
html body.aimmo-graphic-page #brand .aimmo-business-flow article{
  container-type:inline-size!important;
  border:1px solid var(--hm-red,#D30202)!important;
  background:transparent!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article span{
  color:var(--hm-red,#D30202)!important;
  font-family:var(--hm-font-en)!important;
  font-size:var(--hm-type-journey-circle-number)!important;
  font-weight:300!important;
  line-height:1!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article h4{
  margin:13px 0 0!important;
  color:var(--hm-red,#D30202)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:var(--hm-type-journey-circle-title)!important;
  font-weight:var(--hm-circle-title-weight)!important;
  font-variation-settings:"wght" var(--hm-circle-title-weight)!important;
  line-height:1.22!important;
  word-break:keep-all!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article p{
  margin:9px 0 0!important;
  max-width:17ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:var(--hm-type-journey-circle-body)!important;
  font-weight:300!important;
  line-height:1.4!important;
  word-break:keep-all!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow{
  align-self:center!important;
  justify-self:center!important;
  color:var(--hm-red,#D30202)!important;
  opacity:1!important;
}

/* 01.2 — keep 22px / 12px at the current circle size, then scale only below it. */
@container (max-width:190px){
  html body.aimmo-graphic-page #brand .aimmo-business-flow article h4{
    font-size:clamp(16px,11cqi,22px)!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow article p{
    font-size:clamp(10px,6cqi,12px)!important;
  }
}

/* 01.3 + chapter 02/03 — full-width gallery variant built on the shared gallery contract. */
html body.aimmo-graphic-page .aimmo-wide-gallery{
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  gap:var(--hm-ds-media-gallery-gap,0px)!important;
  margin-right:0!important;
  margin-left:0!important;
  padding:0!important;
}
html body.aimmo-graphic-page .aimmo-wide-gallery--stack{
  gap:var(--hm-ds-media-gallery-gap,0px)!important;
}
html body.aimmo-graphic-page .aimmo-wide-gallery .hm-ds-media-gallery__item{
  grid-column:1/-1!important;
  aspect-ratio:16/9!important;
}
html body.aimmo-graphic-page .aimmo-wide-gallery--clean .hm-ds-media-gallery__item::after{
  display:none!important;
  content:none!important;
}
html body.aimmo-graphic-page .aimmo-wide-gallery--clean .hm-ds-media-gallery__item figcaption{
  display:none!important;
}

/* 02.1 — HIMART WAYS 03.2 card grammar, transparent and flush-left to the rule. */
html body.aimmo-graphic-page #data .aimmo-company-signals{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  margin-left:0!important;
  padding-left:0!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article{
  position:relative!important;
  display:block!important;
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:250px!important;
  margin:0!important;
  padding:26px 0 30px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  background:transparent!important;
  overflow:hidden!important;
  text-align:left!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article>span{
  display:block!important;
  margin:0!important;
  padding: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;
  text-align:left!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article h4 br{
  display:block!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article h4{
  margin:22px 0 0!important;
  padding:0!important;
  max-width:25ch!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;
  text-align:left!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article p{
  margin:12px 0 0!important;
  padding:0 68px 0 0!important;
  max-width:38ch!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;
  text-align:left!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article .hm-ds-icon{
  position:absolute!important;
  right:0!important;
  bottom:24px!important;
  display:block!important;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1px!important;
  opacity:1!important;
  transform:none!important;
}

/* 02.2 + 04.2 — blue statement treatment without the leading rule. */
html body.aimmo-graphic-page :is(#data,#direction) .aimmo-direction-statement{
  padding:0!important;
  border-top:0!important;
}
html body.aimmo-graphic-page :is(#data,#direction) .aimmo-direction-statement p{
  max-width:980px!important;
  margin:0!important;
}
html body.aimmo-graphic-page :is(#data,#direction) .aimmo-direction-statement strong{
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:clamp(30px,3.2vw,54px)!important;
  font-weight:500!important;
  font-variation-settings:"wght" 500!important;
  line-height:1.24!important;
  letter-spacing:-.055em!important;
  word-break:keep-all!important;
}
html body.aimmo-graphic-page #direction .aimmo-final-direction small{
  display:block!important;
  margin-top:32px!important;
  color:rgba(255,255,255,.50)!important;
  font-family:var(--hm-font-en)!important;
  font-size:12px!important;
  font-weight:300!important;
  line-height:1.4!important;
  letter-spacing:var(--hm-track-note)!important;
}

/* 04.1 — impact evidence: three equally strong qualitative signals. */
html body.aimmo-graphic-page #direction .aimmo-impact-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  width:100%!important;
}
html body.aimmo-graphic-page #direction .aimmo-impact-grid>article{
  min-width:0!important;
  min-height:300px!important;
  margin:0!important;
  padding:28px 0 32px!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.30)!important;
  background:transparent!important;
}
html body.aimmo-graphic-page #direction .aimmo-impact-grid>article>strong{
  display:block!important;
  margin:0!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:64px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
html body.aimmo-graphic-page #direction .aimmo-impact-grid>article h4{
  margin:44px 0 0!important;
  max-width:24ch!important;
  color:#fff!important;
  font-family:var(--hm-font-ko)!important;
  font-size:22px!important;
  font-weight:300!important;
  line-height:1.35!important;
  word-break:keep-all!important;
}
html body.aimmo-graphic-page #direction .aimmo-impact-grid>article p{
  margin:12px 0 0!important;
  max-width:34ch!important;
  color:var(--hm-description-color)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:14px!important;
  font-weight:300!important;
  line-height:1.55!important;
  word-break:keep-all!important;
}
html body.aimmo-graphic-page #direction .aimmo-impact-source{
  margin-top:20px!important;
}

@media(min-width:781px){
  html body.aimmo-graphic-page #data .data-list>.data-card:first-child .data-card-head .desc{
    max-width:none!important;
    white-space:nowrap!important;
  }
}

@media(max-width:780px){
  html body.aimmo-graphic-page{
    --hm-ds-media-carousel-ratio:16/9;
  }
  html body.aimmo-graphic-page #brand .aimmo-graphic-signal-grid{
    grid-template-columns:1fr!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow{
    display:none!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow article{
    width:min(320px,88vw)!important;
    margin-inline:auto!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow article h4{
    font-size:22px!important;
  }
  html body.aimmo-graphic-page #brand .aimmo-business-flow article p{
    font-size:12px!important;
  }
  html body.aimmo-graphic-page .aimmo-wide-gallery .hm-ds-media-gallery__item{
    aspect-ratio:16/9!important;
  }
  html body.aimmo-graphic-page #data .aimmo-company-signals,
  html body.aimmo-graphic-page #direction .aimmo-impact-grid{
    grid-template-columns:1fr!important;
  }
  html body.aimmo-graphic-page #data .aimmo-company-signals>article{
    min-height:300px!important;
  }
  html body.aimmo-graphic-page #data .data-list>.data-card:first-child .data-card-head .desc{
    white-space:normal!important;
  }
  html body.aimmo-graphic-page :is(#data,#direction) .aimmo-direction-statement strong{
    font-size:clamp(28px,9vw,42px)!important;
  }
  html body.aimmo-graphic-page #direction .aimmo-impact-grid>article{
    min-height:0!important;
  }
  html body.aimmo-graphic-page #direction .aimmo-impact-grid>article>strong{
    font-size:54px!important;
  }
}

/* AIMMO Graphic detail refinements — 2026-09-17 v6 */

/* 01.2 — fourth problem state becomes the terminal red state. */
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4){
  background:var(--hm-red,#D30202)!important;
  border-color:var(--hm-red,#D30202)!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4)>span,
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4)>h4{
  color:#fff!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4)>p{
  color:rgba(255,255,255,.60)!important;
}

/* 02.1 — keep the requested 80px breathing room between copy and the icon. */
html body.aimmo-graphic-page #data .aimmo-company-signals>article p{
  padding-right:0!important;
}
html body.aimmo-graphic-page #data .aimmo-company-signals>article .hm-ds-icon{
  position:static!important;
  display:block!important;
  margin:80px 0 0 auto!important;
}

/* 03.3 — one-stage carousel presentation; controls remain visible for the gallery contract. */
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__item{
  position:relative!important;
}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav{
  position:absolute!important;
  z-index:4!important;
  top:50%!important;
  width:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.34)!important;
  transform:translateY(-50%)!important;
  opacity:1!important;
  cursor:default!important;
}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav--prev{left:24px!important}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav--next{right:24px!important}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav--prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__nav--next::before{transform:translate(-65%,-50%) rotate(45deg)}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__item>figcaption>span{
  margin-bottom:10px!important;
  color:var(--hm-blue)!important;
  font-family:var(--hm-font-en)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.2!important;
}
html body.aimmo-graphic-page #journey .aimmo-carousel-gallery__item>figcaption>h4{
  font-size:22px!important;
}

/* 04.1 — evidence rules use the same standard divider opacity as the subsection rhythm. */
html body.aimmo-graphic-page #direction .aimmo-impact-grid>article{
  border-top:1px solid var(--hm-line-default)!important;
}


/* AIMMO Graphic page-only gallery contract — 2026-09-18 v7. */
html body.aimmo-graphic-page .hm-ds-media-gallery__item{
  aspect-ratio:16/9!important;
}


/* AIMMO Graphic 01.2 focus sequence — 2026-09-18 */
/*
  Default: four unfilled white circles (30% rule), white number/title and white arrows at 30%.
  Trigger: the owning .hm-reveal subsection receives .is-visible once from animation.js.
  Timing: 1300ms per circle; each next circle starts after 650ms (50% overlap).
  The final circle fills red while keeping number/title white and lifting body copy to 80% white.
*/
html body.aimmo-graphic-page #brand .aimmo-business-flow article{
  --aimmo-flow-duration:1300ms;
  --aimmo-flow-delay:0ms;
  border-color:rgba(255,255,255,.30)!important;
  background:transparent!important;
  transition:
    border-color var(--aimmo-flow-duration) cubic-bezier(.22,.61,.36,1) var(--aimmo-flow-delay),
    background-color var(--aimmo-flow-duration) cubic-bezier(.22,.61,.36,1) var(--aimmo-flow-delay)!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(1){--aimmo-flow-delay:0ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(2){--aimmo-flow-delay:650ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(3){--aimmo-flow-delay:1300ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4){--aimmo-flow-delay:1950ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow article:nth-of-type(4){
  border-color:rgba(255,255,255,.30)!important;
  background:transparent!important;
}

html body.aimmo-graphic-page #brand .aimmo-business-flow article>span,
html body.aimmo-graphic-page #brand .aimmo-business-flow article>h4{
  color:#fff!important;
  transition:color var(--aimmo-flow-duration) cubic-bezier(.22,.61,.36,1) var(--aimmo-flow-delay)!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow article>p{
  color:rgba(255,255,255,.60)!important;
  transition:color var(--aimmo-flow-duration) cubic-bezier(.22,.61,.36,1) var(--aimmo-flow-delay)!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow{
  --aimmo-arrow-delay:0ms;
  color:#fff!important;
  border-color:currentColor!important;
  opacity:.30!important;
  transition:
    color 1300ms cubic-bezier(.22,.61,.36,1) var(--aimmo-arrow-delay),
    opacity 1300ms cubic-bezier(.22,.61,.36,1) var(--aimmo-arrow-delay)!important;
}
html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow:nth-of-type(1){--aimmo-arrow-delay:0ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow:nth-of-type(2){--aimmo-arrow-delay:650ms}
html body.aimmo-graphic-page #brand .aimmo-business-flow>.hm-ds-gallery-arrow:nth-of-type(3){--aimmo-arrow-delay:1300ms}

html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow>.hm-ds-gallery-arrow{
  color:var(--hm-red,#D30202)!important;
  opacity:1!important;
}

/* 01 → 03: rule + number + title transition to red. */
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(-n+3){
  border-color:var(--hm-red,#D30202)!important;
}
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(-n+3)>span,
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(-n+3)>h4{
  color:var(--hm-red,#D30202)!important;
}

/* 04: terminal state fills red; number/title stay white; body rises to 80% white. */
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(4){
  border-color:var(--hm-red,#D30202)!important;
  background-color:var(--hm-red,#D30202)!important;
}
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(4)>span,
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(4)>h4{
  color:#fff!important;
}
html body.aimmo-graphic-page #brand .hm-subsection.hm-reveal.is-visible .aimmo-business-flow article:nth-of-type(4)>p{
  color:rgba(255,255,255,.80)!important;
}