/* Honda uses the same article-width showcase composition as Maybank. */
.honda-case-study{min-width:0}
.honda-case-study{--hd-next:#e6eefc;--hd-next-line:#597cbb;--hd-next-ink:#204775}
:root[data-theme=dark] .honda-case-study{--hd-next:#1b2c43;--hd-next-line:#88a9de;--hd-next-ink:#c8ddff}
.honda-case-study .honda-bleed{width:100%;max-width:100%;margin-inline:0}
.honda-case-study section{margin-bottom:80px}
.honda-case-study section>h2:first-child{margin-top:0}
.honda-case-study .honda-anchor,.honda-case-study .honda-tabs{margin:28px 0 40px}
.honda-case-study .gate-locked>.honda-anchor:first-child{margin-top:0}
.honda-case-study .case-showcase{width:100%;max-width:644px;margin-inline:auto;box-sizing:border-box}
.honda-case-study .honda-tabs.honda-bleed>.case-showcase{max-width:644px}
.honda-case-study .case-showcase__content{padding:20px 24px 28px}
.honda-case-study .honda-anchor .case-showcase__content{display:grid;place-items:center;padding:32px 24px}
.honda-case-study .honda-tabs__lede{max-width:46ch;margin:0 auto 24px;font-size:13px;line-height:22px;text-align:center;color:var(--muted)}
.honda-case-study .honda-comparison-label{margin:28px 0 12px;font-size:14px;line-height:22px}
.honda-case-study .honda-comparison-label+.honda-anchor{margin-top:0}
.honda-case-study .honda-comparison__panels{display:grid;justify-items:center}
.honda-case-study .honda-comparison .honda-tabs__panel{width:100%;margin:0}
.honda-case-study .honda-comparison .case-showcase__content{padding:28px 24px}
.honda-case-study .honda-comparison .honda-device{width:min(300px,100%)}

/* Three source claims, drawn as Honda-red service, ownership and growth graphics. */
.honda-case-study .honda-problems{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;margin:32px 0;padding:0;counter-reset:none}
.honda-case-study .honda-problems>li{display:block;min-width:0;margin:0;padding:0}
.honda-case-study .honda-problems>li::before{display:none}
.honda-case-study .honda-problem-icon{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--hd-red);color:#fff;margin:8px 0 24px 8px}
.honda-case-study .honda-problem-icon::before{content:'';position:absolute;inset:-8px 8px 8px -8px;border:1px solid var(--muted);border-radius:50%;pointer-events:none}
.honda-case-study .honda-problem-art{display:block;width:32px;height:32px}
.case-study-page .case-study .prose .honda-problems h3{font:600 16px/26px var(--font-sans);letter-spacing:0;margin:0 0 8px}
.case-study-page .case-study .prose .honda-problems p{font:400 14px/22px var(--font-sans);color:var(--muted);margin:0}
@media(max-width:600px){.honda-case-study .honda-problems{grid-template-columns:minmax(0,1fr);gap:32px}}

/* The phone shell follows Maybank's mobile DeviceMockup proportions.
   Source recordings already have rounded corners; crop only their backdrop. */
.honda-device{position:relative;box-sizing:border-box;width:min(300px,100%);margin-inline:auto;padding:7px;border:1px solid #696c74;border-radius:35px;background:#17191d;box-shadow:inset 0 0 0 2px #41444b;line-height:0}
.honda-device__screen{position:relative;width:100%;aspect-ratio:520/1126;overflow:hidden;border-radius:28px;background:#fff;isolation:isolate}
.honda-case-study .honda-device__screen>video{position:absolute;display:block;max-width:none;width:207.69231%;height:106.57194%;left:-53.84615%;top:-3.28597%;object-fit:fill;border:0;border-radius:0;background:#fff}
.honda-case-study .honda-device--state .honda-device__screen>video{width:116.78832%;height:106.23946%;left:-8.39416%;top:-3.11973%}

/* One large phone, then its two pieces of context. No squeezed side columns. */
.honda-case-study .honda-tabs__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin:0;align-items:start}
.honda-case-study .honda-tabs__panels{grid-column:1/-1;grid-row:1;order:0;display:grid;width:min(300px,100%);max-width:none;margin:0 auto}
.honda-case-study .honda-tabs__panel{min-width:0}
.honda-case-study .honda-tabs__aside{padding:0;border:0;min-width:0;min-height:0;text-align:left;order:0}
.honda-case-study .honda-tabs__aside--left{grid-column:1;grid-row:2}
.honda-case-study .honda-tabs__aside--right{grid-column:2;grid-row:2}
.honda-case-study .honda-tabs__note span{padding:0;margin-bottom:6px;background:none;text-transform:none;letter-spacing:0;font-size:12px;line-height:20px}
.honda-case-study .honda-tabs__note p{font-size:13px;line-height:22px}
.honda-case-study .honda-tabs__note h4{font-size:14px;line-height:22px}
.honda-case-study [data-honda-tabs] [data-honda-panel]:not([data-active]){display:none}
.honda-case-study [role=tab]:focus-visible{outline:2px solid var(--text);outline-offset:-4px}

/* All five architecture columns stay legible in a scroll region inside the card. */
.honda-case-study .honda-ia{min-width:0;margin:28px 0 40px}
.honda-case-study .case-showcase .honda-ia{margin:0}
.honda-case-study .honda-ia__frame{min-width:0;padding:16px;border-radius:12px}
.honda-case-study .case-showcase .honda-ia__frame{padding:0;border:0;border-radius:0;background:none}
.honda-case-study .honda-ia__title{margin:0 0 16px;padding:0;border:0;text-transform:none;letter-spacing:0;font-size:13px;line-height:22px}
.honda-case-study .honda-ia__grid{display:grid;grid-auto-flow:column;grid-auto-columns:168px;grid-template-columns:none;gap:12px;max-width:100%;padding:2px 2px 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.honda-case-study .honda-ia__col{min-width:0;scroll-snap-align:start}
.honda-case-study .honda-ia__chip[data-child]{width:calc(100% - 12px)}
.honda-case-study .honda-ia__readout{margin:12px 0 0;font-size:12px;line-height:20px}
.honda-case-study .honda-ia__toggle{min-height:44px}

/* Keep the three input cards readable at the same width as their explanation. */
.honda-case-study .honda-inputs{--honda-tint:color-mix(in srgb,var(--hd-red) 8%,var(--bg));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 32px}
.honda-case-study .honda-input-card{display:flex;flex-direction:column;min-width:0;min-height:0;padding:24px 20px;background:var(--raised);border-radius:12px;overflow:hidden}
.case-study-page .case-study .prose .honda-input-card h4{margin:0 0 8px;font:600 16px/26px var(--font-sans);color:var(--text)}
.honda-case-study .honda-input-question{display:block;min-height:44px;font:400 14px/22px var(--font-sans);color:var(--muted)}
.case-study-page .case-study .prose .honda-input-card p{margin:16px 0 24px;font:400 14px/22px var(--font-sans);color:var(--muted)}
.honda-case-study .honda-input-art{display:block;width:calc(100% + 32px);max-width:none;aspect-ratio:1;height:auto;min-height:0;flex-shrink:0;align-self:center;margin-top:auto;background-image:url('/assets/projects/honda-indonesia/illustrations/ia-ecology-3d.png');background-repeat:no-repeat;background-size:300% auto;background-position:left bottom}
.honda-case-study .honda-input-art--context{background-position:center bottom}
.honda-case-study .honda-input-art--content{background-position:right bottom}
@media(max-width:600px){.honda-case-study .honda-inputs{grid-template-columns:minmax(0,1fr);gap:16px}.honda-case-study .honda-input-card{min-height:300px;padding:24px 24px 0}.honda-case-study .honda-input-question{min-height:0}}
.honda-case-study .honda-tilts{grid-template-columns:1fr;gap:0;border-block:1px solid var(--border);perspective:none}
.honda-case-study .honda-tilt{padding:20px 0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none!important;will-change:auto}
.honda-case-study .honda-tilt+.honda-tilt{border-top:1px solid var(--border)}
.honda-case-study .honda-tilt__glare{display:none}
.honda-case-study .honda-tilt [data-depth]{transform:none!important}
.honda-case-study .honda-tilt p{font-size:14px;line-height:24px}
.honda-case-study .honda-table-wrap{max-width:100%}

/* Optional native playback is available to readers who request less motion. */
.honda-platform-map{margin:28px 0;padding:20px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--raised)}
.honda-platform-map__surface{padding:24px 16px 12px;border-radius:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;background:var(--preview)}
.honda-platform-map__surface:focus-visible{outline:2px solid var(--hd-red);outline-offset:-3px}
.honda-case-study .honda-input-icon{display:block;order:-1;width:32px;height:32px;margin:0 0 20px;color:var(--hd-red)}
.honda-case-study .honda-input-question{min-height:0}
.case-study-page .case-study .prose .honda-input-card p{margin-bottom:0}
.honda-case-study .case-showcase{position:relative;isolation:isolate}
.honda-beam-host{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;overflow:hidden}
.honda-beam-host>div{width:100%;height:100%;border-radius:inherit}
.honda-beam-surface{width:100%;height:100%;border-radius:inherit;background:transparent}
@media(max-width:600px){.honda-case-study .honda-input-card{min-height:0;padding:24px}.honda-platform-map{padding:12px}.honda-platform-map__surface{padding:20px 12px 12px}}
.honda-platform-map__grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px 8px;min-width:560px;padding:0 0 12px}
.honda-platform-map__grid strong{text-align:center;font:500 12px/20px var(--font-sans);padding:0 4px 12px}
.honda-platform-map__grid>span{display:grid;place-items:center;padding:8px 10px;border-radius:24px;font:400 12px/20px var(--font-sans);text-align:center}
.honda-platform-map .channel-web{background:color-mix(in srgb,var(--hd-red) 8%,var(--bg));color:var(--text)}
.honda-platform-map .channel-app{background:color-mix(in srgb,#318778 12%,var(--bg));color:var(--text)}
.honda-platform-map .channel-dealer{background:var(--raised);color:var(--muted)}
.honda-case-study .honda-ia__frame[data-tree=expansion]{--hd-next:#e6eefc;--hd-next-line:#597cbb;--hd-next-ink:#204775}
.honda-case-study .honda-ia__frame[data-tree=expansion] .honda-ia__chip[data-kind=next]{border-style:dashed;border-width:1px;background:var(--hd-next);color:var(--hd-next-ink)}
.honda-case-study .honda-ia__frame[data-tree=expansion] .honda-ia__title{color:#3766a2}
.honda-case-study .honda-ia__chip[data-kind=new]{--hd-new:#fce2e4;--hd-new-line:#dd1723;--hd-new-ink:#a90d17}
:root[data-theme=dark] .honda-case-study .honda-ia__frame[data-tree=expansion]{--hd-next:#1b2c43;--hd-next-line:#88a9de;--hd-next-ink:#c8ddff}
.honda-archetypes{display:block;margin:-36px 0 28px}
.honda-archetypes summary{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font:400 14px/22px var(--font-sans);list-style:none}
.honda-archetypes summary::-webkit-details-marker{display:none}
.honda-archetypes summary::after{content:'+';font-size:20px}
.honda-archetypes details[open] summary::after{content:'−'}
.honda-archetypes__slides{display:flex;gap:16px;margin:20px 0 12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.honda-archetypes__profile{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:start;padding:0;background:#fff;border-radius:12px;overflow:hidden}
.honda-archetypes__image-link{display:block;border:0!important;text-decoration:none;cursor:zoom-in}
.honda-archetypes__image{display:block;width:100%;height:auto;aspect-ratio:1670/960;object-fit:contain;background:#fff}
.honda-archetypes__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.honda-archetypes__share{font:500 42px/1 var(--font-sans);letter-spacing:-2px;color:var(--hd-red)}
.case-study .honda-archetypes__profile h3{margin:0!important;font:600 18px/28px var(--font-sans)!important}
.case-study .honda-archetypes__profile p{margin:16px 0 0!important;font:400 14px/24px var(--font-sans)}
.honda-archetypes__axes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.honda-archetypes__axes span{display:block;font:400 12px/20px var(--font-sans);color:var(--muted)}
.honda-archetypes__axes b{display:block;font:500 14px/22px var(--font-sans);color:var(--text)}
.honda-archetypes__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;font:400 12px/20px var(--font-sans);color:var(--muted)}
.honda-archetypes__footer button{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--bg);color:var(--text);font:inherit;font-size:18px;cursor:pointer}
.honda-archetypes__footer button:disabled{opacity:.35;cursor:default}
.honda-archetypes :focus-visible{outline:2px solid var(--hd-red);outline-offset:3px}
.honda-archetypes__source{display:block;font:400 11px/18px var(--font-sans);color:var(--muted);margin-top:16px}
@media(max-width:600px){.honda-input-card .honda-input-art{width:min(260px,100%);height:auto;min-height:0}}

.honda-case-study[data-honda-reduced] .honda-device{width:min(520px,100%);padding:0;border:0;border-radius:8px;background:none;box-shadow:none}
.honda-case-study[data-honda-reduced] .honda-device__screen{aspect-ratio:1080/1200;border-radius:8px;background:none}
.honda-case-study[data-honda-reduced] .honda-device--state .honda-device__screen{aspect-ratio:640/1260}
.honda-case-study[data-honda-reduced] .honda-device__screen>video{position:static;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){
 .honda-case-study section{margin-bottom:64px}
 .honda-case-study .case-showcase__content{padding:16px 12px 24px}
 .honda-case-study .honda-anchor .case-showcase__content{padding:28px 14px}
 .honda-case-study .honda-tabs__stage{grid-template-columns:minmax(0,1fr);gap:20px}
 .honda-case-study .honda-tabs__aside--left{grid-column:1;grid-row:2}
 .honda-case-study .honda-tabs__aside--right{grid-column:1;grid-row:3}
 .honda-case-study .honda-tabs__lede{margin-bottom:20px}
 .honda-case-study .honda-ia__frame{padding:12px}
}
@media(prefers-reduced-motion:reduce){.honda-case-study *{scroll-behavior:auto!important;transition:none!important}}