/* Automatic typographic variations and illustrated product details. */
.gallery-heading{align-items:center;padding-bottom:12px}
.product-poster{container-type:size}
.type-stage{margin-top:16px;margin-bottom:15px}
.product-intro{max-height:150px;opacity:1;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
.is-revealed .product-intro{max-height:0;opacity:0;overflow:hidden}
.is-revealed .type-stage{min-height:64px;margin-top:10px;margin-bottom:10px}
.product-poster .poster-actions{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin-top:14px;border-block:1px solid var(--rule)}
.poster-actions .inspect-toggle,.demo-action{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;height:69px;padding:10px 14px 10px 0;text-align:left;font:400 11px/1.5 'IBM Plex Sans Thai',Manrope,sans-serif}
.demo-action{padding-left:16px;padding-right:0;border-left:1px solid var(--rule)}
.action-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.action-kicker{font:600 21px/1 Manrope,sans-serif;letter-spacing:-.065em;transition:letter-spacing .35s}
.demo-action .action-kicker{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.04em}
.poster-actions .inspect-label{white-space:nowrap;font-size:10px}
.poster-actions .inspect-symbol{font:300 26px/1 Manrope,sans-serif;flex:none}
.action-arrow{position:relative;display:block;width:34px;height:34px;flex:none;overflow:hidden;border-radius:50%;border:1px solid var(--ink);transition:color .25s,background .25s}
.action-arrow>span{position:absolute;inset:0;display:grid;place-items:center;font:22px/1 Manrope,sans-serif;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.action-arrow>span:last-child{transform:translate(-100%,100%)}
.demo-action:hover .action-arrow,.demo-action:focus-visible .action-arrow{background:var(--ink);color:var(--paper)}
.demo-action:hover .action-arrow>span:first-child,.demo-action:focus-visible .action-arrow>span:first-child{transform:translate(100%,-100%)}
.demo-action:hover .action-arrow>span:last-child,.demo-action:focus-visible .action-arrow>span:last-child{transform:translate(0,0)}
.poster-actions>button::after,.demo-action::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.poster-actions>button:hover::after,.poster-actions>button:focus-visible::after,.demo-action:hover::after,.demo-action:focus-visible::after{transform:scaleX(1)}
.poster-actions>button:hover .action-kicker{letter-spacing:-.025em}
.is-revealed .product-status{visibility:hidden}
.product-poster .type-face{opacity:0;transform:none;pointer-events:none;transition:opacity .27s;will-change:auto}
.type-line{display:block;white-space:nowrap;line-height:inherit}
.type-word{display:block;transform:translate3d(0,24px,0);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .32s}
.line-1 .type-word{transition-delay:.045s}.line-2 .type-word{transition-delay:.09s}.line-3 .type-word{transition-delay:.135s}
.product-poster[data-type-style="0"] .type-primary,.product-poster[data-type-style="1"] .type-alternate,.product-poster[data-type-style="2"] .type-third{opacity:1;transform:none}
[data-type-style="0"] .type-primary .type-word,[data-type-style="1"] .type-alternate .type-word,[data-type-style="2"] .type-third .type-word{opacity:1;transform:translate3d(0,0,0)}
.poster-a7 .type-third{font-family:'Barlow Condensed',Impact,sans-serif;font-size:min(31cqw,31cqh);font-weight:800;line-height:.95;letter-spacing:-.025em}
.poster-a7 .type-third em{font-family:inherit;font-weight:800;font-style:normal;font-size:.78em}
.poster-a8 .type-third{font-family:'Bodoni Moda',Georgia,serif;font-size:min(24cqw,23.5cqh);font-style:italic;font-weight:600;line-height:.96;letter-spacing:-.06em}
.poster-s18 .type-third{font-family:Manrope,sans-serif;font-size:min(24cqw,23.5cqh);font-style:normal;font-weight:800;line-height:.96;letter-spacing:-.075em}
.poster-s18 .type-third em{font-family:inherit;font-weight:350;font-style:normal;font-size:1em}
.product-poster.is-revealed .type-face{display:grid;grid-template-columns:max-content max-content;column-gap:.14em;align-content:start;font-size:min(14cqw,47cqh);line-height:.98}
.poster-a7.is-revealed .type-line.line-2{grid-column:1/-1}
.poster-a7.is-revealed .type-line.line-2 em{font-size:1em}
.poster-a8.is-revealed .type-primary{font-size:min(19cqw,47cqh)}
.poster-s18.is-revealed .type-alternate{font-size:min(12.4cqw,47cqh)}
/* Details behave like a small, illustrated index rather than a static list. */
.reveal-inner{max-height:min(42cqh,260px);scrollbar-width:thin;scrollbar-gutter:stable}
.detail-audience{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:10px;line-height:1.6;padding:8px 0}
.detail-audience>span{font-family:'IBM Plex Sans Thai',Manrope,sans-serif;color:var(--muted);font-size:9px}
.detail-audience strong{font-weight:500}
.journey-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.journey-tabs button{position:relative;display:flex;gap:7px;align-items:center;text-align:left;padding:10px 0;font:400 12px/1.4 'IBM Plex Sans Thai',Manrope,sans-serif;color:var(--muted);transition:color .2s}
.journey-tabs button>span{font:9px 'Courier New',monospace;opacity:.6}
.journey-tabs button::after{position:absolute;content:'';height:2px;background:var(--ink);left:0;right:12px;bottom:-1px;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.journey-tabs button[aria-selected=true]{color:var(--ink)}.journey-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.journey-tabs button:hover{color:var(--ink)}
.journey-scene{display:grid;grid-template-columns:66px minmax(0,1fr);gap:18px;padding:11px 0 10px;min-height:98px;outline-offset:-2px}
.journey-visual{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;animation:scene-in .48s cubic-bezier(.16,1,.3,1) both}
.journey-visual svg{width:54px;height:54px;overflow:visible;flex:none}
.journey-visual svg path,.journey-visual svg circle{stroke-linejoin:round;stroke-linecap:round}
.journey-visual svg path:not(.diagram-fill){stroke-dasharray:1;animation:draw-path .65s cubic-bezier(.2,.8,.2,1) both}
.journey-visual svg path:nth-child(2){animation-delay:.07s}.journey-visual svg path:nth-child(3){animation-delay:.14s}
.diagram-fill{fill:currentColor}.diagram-heavy{stroke-width:2.7}
.journey-visual>span{font:9px/1 'Courier New',monospace;color:var(--muted);letter-spacing:.06em}
.journey-copy{align-self:center;animation:scene-in .55s .045s cubic-bezier(.16,1,.3,1) both}
.journey-copy h4{font-family:'IBM Plex Sans Thai',Manrope,sans-serif;font-weight:400;font-size:18px;letter-spacing:-.02em;line-height:1.4;margin:0 0 7px}
.journey-copy p{font-size:11px;line-height:1.85;color:var(--muted)}
.detail-colophon{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--rule);font-size:9px;color:var(--muted)}
.detail-colophon>span{font-size:8px}.detail-colophon button{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:10px;min-height:25px}
.detail-colophon button>span{font-size:16px;line-height:1;transition:transform .3s}.detail-colophon button[aria-expanded=true]>span{transform:rotate(45deg)}
.demo-note{padding:9px 0 12px;margin-top:0}
.product-intro h3{transition:letter-spacing .5s}.is-revealed .product-intro h3{letter-spacing:-.04em}
.poster-meta a{background-image:linear-gradient(var(--ink),var(--ink));background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .4s}
.poster-meta a:hover{background-size:100% 1px;text-decoration:none}
/* Small motion on service rows follows the same rule-and-type language. */
.service-specimen::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.service-specimen:hover::after,.service-specimen:focus-visible::after{transform:scaleX(1)}
.service-specimen .service-number{transition:transform .35s,color .35s}.service-specimen:hover .service-number{transform:translateY(4px);color:var(--ink)}
.service-specimen .service-cta{transition:letter-spacing .35s}.service-specimen:hover .service-cta{letter-spacing:.02em}
@keyframes scene-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw-path{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:1000px){.gallery-heading .scroll-hint{display:none}}
@media(max-width:600px){.gallery-heading{padding-bottom:10px;gap:12px}.gallery-heading h1{font-size:21px}.type-stage{margin-top:13px;margin-bottom:13px}.reveal-inner{max-height:min(38dvh,300px)}.detail-audience{font-size:10px;padding-top:12px}.journey-tabs button{font-size:10px;gap:4px;min-height:44px;padding:10px 0}.journey-tabs button>span{font-size:8px}.journey-tabs button::after{right:8px}.journey-scene{grid-template-columns:47px minmax(0,1fr);gap:12px;padding:16px 0;min-height:145px}.journey-visual svg{width:45px;height:45px}.journey-visual{justify-content:center;gap:14px}.journey-visual>span{font-size:8px}.journey-copy h4{font-size:16px;line-height:1.5}.journey-copy p{font-size:11px;line-height:1.8}.detail-colophon{gap:5px;align-items:flex-start}.detail-colophon>span{font-size:7px;padding-top:7px}.detail-colophon button{font-size:9px;gap:4px}.poster-a7 .type-third{font-size:min(31cqw,31cqh)}}
@media(max-width:360px){.gallery-heading h1{font-size:19px}}
@media(max-height:650px){.type-stage{margin-top:10px;margin-bottom:10px}.reveal-inner{max-height:42cqh}.journey-scene{min-height:108px;padding:10px 0;gap:12px}.journey-visual svg{width:52px;height:52px}.journey-copy h4{font-size:16px}.journey-copy p{font-size:10px}.detail-audience{padding-top:8px}}
@media(prefers-reduced-motion:reduce){.type-word,.journey-visual,.journey-copy{animation:none!important;transition:none!important;transform:none!important}.service-specimen::after,}

@media(max-width:600px){.poster-actions .inspect-toggle,.demo-action{height:65px;gap:6px;padding-right:10px}.demo-action{padding-left:10px;padding-right:0}.action-kicker{font-size:18px}.poster-actions .inspect-label{font-size:8px}.demo-action .action-copy>span:last-child{font-size:9px}.action-arrow{width:26px;height:26px}.action-arrow>span{font-size:19px}.poster-actions .inspect-symbol{font-size:21px}}

/* Let the content, rather than an empty title box, occupy an open specimen. */
.product-poster.is-revealed .type-stage{flex:0 0 clamp(80px,21cqh,128px);min-height:0;margin-bottom:8px}
.product-poster.is-revealed .product-reveal{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
.product-poster.is-revealed .reveal-inner{display:flex;flex-direction:column;max-height:none;min-height:0}
.is-revealed .detail-audience{font-size:12px;padding:10px 0 13px;flex:none}
.is-revealed .detail-audience>span{font-size:10px}
.is-revealed .journey-tabs{flex:none}
.is-revealed .journey-tabs button{font-size:13px;min-height:44px}
.is-revealed .journey-scene{flex:1;grid-template-columns:86px minmax(0,1fr);gap:22px;min-height:145px;padding:20px 0}
.is-revealed .journey-visual{justify-content:center;gap:16px}
.is-revealed .journey-visual svg{width:78px;height:78px}
.is-revealed .journey-copy h4{font-size:23px;line-height:1.45;margin-bottom:10px}
.is-revealed .journey-copy p{font-size:13px;line-height:1.85}
.is-revealed .detail-colophon{flex:none;padding:9px 0}
.is-revealed .detail-colophon>span{font-size:9px}
.is-revealed .detail-colophon button{font-size:11px;min-height:30px}
.is-revealed .demo-note{flex:none}
@media(max-width:600px){.product-poster.is-revealed .type-stage{flex-basis:clamp(72px,18cqh,112px)}.is-revealed .detail-audience{font-size:10px;padding:8px 0 10px;gap:6px}.is-revealed .detail-audience>span{font-size:8px}.is-revealed .journey-tabs button{font-size:10px}.is-revealed .journey-scene{grid-template-columns:1fr;gap:13px;min-height:175px;padding:15px 0}.is-revealed .journey-visual{flex-direction:row;justify-content:space-between;gap:12px}.is-revealed .journey-visual svg{width:57px;height:57px}.is-revealed .journey-copy h4{font-size:18px;margin-bottom:7px}.is-revealed .journey-copy p{font-size:11px}.is-revealed .detail-colophon{padding:7px 0;gap:5px}.is-revealed .detail-colophon>span{font-size:7px}.is-revealed .detail-colophon button{font-size:9px}}
@media(max-height:700px){.product-poster.is-revealed .type-stage{flex-basis:clamp(65px,18cqh,98px)}.is-revealed .journey-scene{min-height:110px;grid-template-columns:54px minmax(0,1fr);gap:12px;padding:10px 0}.is-revealed .journey-visual{flex-direction:column;justify-content:center;gap:9px}.is-revealed .journey-visual svg{width:48px;height:48px}.is-revealed .journey-copy h4{font-size:17px;margin-bottom:5px}.is-revealed .journey-copy p{font-size:11px;line-height:1.7}.is-revealed .detail-colophon{padding:5px 0}.is-revealed .detail-audience{padding:8px 0;font-size:10px}}