/* Six visual stories per audience; cards are editorial, never simulated controls. */
@font-face { font-family:'Sriracha Audience'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/sriracha-audience.ttf') format('truetype'); }
body.frontdoor-preview .section-settings,
body.frontdoor-preview.frontdoor-light .section-settings { --section-surface:#fff; }
.audience-bento { color:#213e60; color-scheme:light; padding:40px 0 48px; scroll-margin-top:88px; }
.bento-wrap { width:calc(100% - 48px); max-width:1040px; margin:auto; }
.bento-heading-row { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:28px; margin-bottom:48px; }
.audience-bento .bento-brand-heading { display:flex; align-items:center; justify-content:center; gap:18px; margin:0; color:#213e60; font-size:56px; line-height:1.4; letter-spacing:0; }
.bento-brand-heading>span { font-family:'Sriracha Audience',Anuphan,sans-serif; font-weight:400; white-space:nowrap; }
.bento-brand-heading>img { display:block; flex:none; width:144px; height:auto; }
.bento-tabs { display:flex; justify-content:center; width:100%; max-width:440px; gap:4px; padding:5px; border:1px solid #e3e9f0; border-radius:999px; background:#f0f3f7; }
.bento-tab { appearance:none; flex:1; min-width:0; padding:12px 16px; min-height:44px; border:0; border-radius:999px; background:transparent; color:#566c86; font:500 15px/1.3 Anuphan,sans-serif; white-space:nowrap; cursor:pointer; transition:color 180ms ease-in-out,background-color 180ms ease-in-out,box-shadow 180ms ease-in-out; }
.bento-tab:hover { color:#213e60; background:#e4ebf4; }
.bento-tab[aria-selected="true"] { color:#fff; background:#213e60; box-shadow:0 2px 5px rgba(33,62,96,.18); }
.audience-bento :is(button,a,[role="tabpanel"]):focus-visible { outline:3px solid #94b6ef; outline-offset:4px; }
.bento-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; animation:bento-enter 180ms ease-in-out; }
.bento-grid-facilities { grid-template-areas:"hero hero hero hero hero hero hero assist assist assist assist assist" "people people people progress progress progress calendar calendar calendar returning returning returning"; grid-template-rows:auto 230px; }
.bento-grid-agency { grid-template-areas:"hero hero hero hero hero assist assist assist assist returning returning returning" "people people people people progress progress progress progress calendar calendar calendar calendar"; grid-template-rows:280px 230px; }
.bento-grid-provider { grid-template-areas:"hero hero hero hero hero hero search search search fulltime fulltime fulltime" "people people people people progress progress progress progress calendar calendar calendar calendar"; grid-template-rows:280px 230px; }
.bento-tile { min-width:0; position:relative; overflow:hidden; border:0; border-radius:20px; background:#f4f2ef; color:#213e60; cursor:default; box-shadow:none; }
.bento-hero { grid-area:hero; overflow:visible; background:transparent; color:#fff; isolation:isolate; }
.bento-hero-photo { position:absolute; right:0; bottom:0; width:100%; height:126%; object-fit:cover; pointer-events:none; }
/* The stage and people share one 3:2 asset. Preserve that ratio; its upper fifth
   sits above the tile. Let the row follow the artwork instead of stretching it. */
.bento-grid-facilities .bento-hero { aspect-ratio:1.889 / 1; }
.bento-grid-facilities .bento-hero-photo { width:100%; height:auto; object-fit:contain; }
.bento-hero-copy { position:relative; z-index:1; padding:28px; height:100%; display:flex; align-items:center; width:53%; }
.audience-bento .bento-hero h3 { margin:0; font-size:30px; font-weight:600; line-height:1.32; letter-spacing:-.6px; color:inherit; }
.bento-art { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; pointer-events:none; }
.bento-copy { position:relative; z-index:1; padding:22px 24px; }
.audience-bento .bento-copy h3 { margin:0; color:inherit; font-size:25px; line-height:1.3; font-weight:600; letter-spacing:-.4px; }
.audience-bento .bento-mini h3 { font-size:20px; }
.bento-mini .bento-copy { padding:18px 20px; }
.bento-assist { grid-area:assist; background:#dce9fc; }
.bento-assist .bento-art { object-position:center bottom; }
.bento-assist .bento-copy { padding:24px 28px; }
.bento-people { grid-area:people; }
.bento-progress { grid-area:progress; background:#d1e4ff; }
.bento-calendar { grid-area:calendar; }
.bento-returning { grid-area:returning; background:#213e60; color:#fff; }
.bento-search { grid-area:search; }
.bento-fulltime { grid-area:fulltime; background:#d1e4ff; }
.bento-scene { position:absolute; width:174px; height:174px; max-width:100%; bottom:-7px; left:50%; transform:translateX(-50%); background-image:url('assets/bento/feature-scenes.webp'); background-repeat:no-repeat; background-size:300% 209.41%; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse at center,#000 56%,transparent 74%); mask-image:radial-gradient(ellipse at center,#000 56%,transparent 74%); }
.scene-people { background-position:0 0; }
.scene-progress { background-position:50% 0; width:220px; height:190px; bottom:-6px; }
.scene-calendar { background-position:100% 0; }
.scene-returning { background-position:0 100%; background-size:300% 191.4%; width:176px; height:176px; }
.scene-search { background-position:50% 100%; background-size:300% 191.4%; width:208px; height:208px; }
.scene-fulltime { background-position:100% 100%; background-size:300% 191.4%; width:208px; height:208px; }
.bento-grid-agency .bento-hero { overflow:hidden; background:#f4f2ef; color:#213e60; }
.bento-grid-agency .bento-hero-photo { width:58%; height:100%; object-fit:cover; object-position:center top; -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%); mask-image:linear-gradient(90deg,transparent,#000 16%); }
.bento-grid-agency .bento-hero-copy { width:60%; padding:24px; }
.bento-grid-agency .bento-hero h3 { font-size:32px; line-height:1.14; }
.bento-grid-agency .bento-assist .bento-art { object-fit:contain; object-position:center bottom; }
.bento-grid-agency .bento-assist h3 { font-size:22px; }
.bento-grid-agency .scene-returning { width:215px; height:215px; bottom:-10px; }
.bento-grid-provider .bento-hero { overflow:hidden; background:#94b6ef; color:#213e60; }
.bento-grid-provider .bento-hero-photo { width:100%; height:100%; object-fit:cover; object-position:center top; }
.bento-grid-provider .bento-hero-copy { width:60%; }
.bento-actions { display:flex; justify-content:center; margin-top:24px; }
.bento-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:12px 28px; border:0; border-radius:99px; background:#e68c3a; color:#14283e; font:600 14px/1.3 Anuphan,sans-serif; text-decoration:none; cursor:pointer; transition:background 180ms ease-in-out; }
.bento-cta:hover { background:#d97d2b; }
.bento-cta .icon { width:16px; height:16px; }
@keyframes bento-enter { from { opacity:.5; } to { opacity:1; } }
@media(max-width:1000px) and (min-width:681px) {
 .bento-grid { grid-template-rows:260px 212px; gap:10px; }
 .bento-grid-facilities { grid-template-rows:auto 212px; }
 .bento-hero-copy,.bento-copy,.bento-assist .bento-copy { padding:20px; }
 .audience-bento .bento-hero h3 { font-size:26px; }
 .audience-bento .bento-copy h3 { font-size:23px; }
 .audience-bento .bento-mini h3 { font-size:18px; }
 .bento-mini .bento-copy { padding:16px; }
 .bento-grid-agency .bento-hero h3 { font-size:27px; }
 .bento-grid-agency .bento-assist h3 { font-size:20px; }
 .bento-scene { width:160px; height:160px; }
 .scene-progress { width:195px; height:177px; }
 .scene-search,.scene-fulltime,.bento-grid-agency .scene-returning { width:190px; height:190px; }
}
@media(max-width:680px) {
 .audience-bento { padding:32px 0; scroll-margin-top:80px; }
 .bento-wrap { width:calc(100% - 32px); max-width:480px; }
 .bento-heading-row { gap:20px; margin-bottom:40px; }
 .audience-bento .bento-brand-heading { gap:12px; font-size:clamp(32px,8.5vw,44px); }
 .bento-brand-heading>img { width:clamp(84px,24vw,120px); }
 .bento-tabs { gap:2px; padding:4px; }
 .bento-tab { font-size:clamp(13px,3.5vw,14px); padding:12px 4px; }
 .bento-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; grid-template-areas:"hero hero" "assist assist" "people progress" "calendar returning"; grid-template-rows:214px 210px 190px 190px; }
 .bento-grid-facilities { grid-template-rows:auto 210px 190px 190px; }
 .bento-grid-agency { grid-template-areas:"hero hero" "assist assist" "returning people" "progress calendar"; }
 .bento-grid-provider { grid-template-areas:"hero hero" "search fulltime" "people progress" "calendar calendar"; grid-template-rows:214px 190px 190px 158px; }
 .bento-hero-copy,.bento-grid-provider .bento-hero-copy { padding:20px; width:58%; }
 .audience-bento .bento-hero h3 { font-size:24px; }
 .bento-grid-agency .bento-hero-copy { padding:22px; width:60%; }
 .bento-grid-agency .bento-hero h3 { font-size:30px; }
 .bento-grid-agency .bento-hero-photo { width:54%; }
 .bento-copy,.bento-mini .bento-copy { padding:16px; }
 .audience-bento .bento-copy h3 { font-size:23px; }
 .audience-bento .bento-mini h3 { font-size:18px; letter-spacing:-.3px; }
 .bento-assist .bento-copy { padding:20px 22px; }
 .bento-assist .bento-art { width:78%; left:auto; right:0; object-fit:cover; }
 .bento-grid-agency .bento-assist h3 { font-size:20px; }
 .bento-grid-agency .bento-assist .bento-art { width:74%; object-fit:cover; }
 .bento-scene,.scene-returning,.scene-search,.scene-fulltime,.bento-grid-agency .scene-returning { width:140px; height:140px; bottom:-8px; }
 .scene-progress { width:170px; height:146px; }
 .bento-grid-provider .bento-calendar .bento-copy { padding:24px; }
 .bento-grid-provider .bento-calendar .bento-scene { left:auto; right:4px; transform:none; width:158px; height:158px; bottom:0; }
}
@media(max-width:380px) {
 .bento-grid { grid-template-rows:200px 194px 180px 180px; }
 .bento-grid-facilities { grid-template-rows:auto 194px 180px 180px; }
 .bento-grid-provider { grid-template-rows:200px 180px 180px 150px; }
 .audience-bento .bento-hero h3 { font-size:21px; }
 .bento-grid-agency .bento-hero h3 { font-size:27px; }
 .bento-grid-agency .bento-hero-copy { padding:18px; }
 .bento-grid-provider .bento-hero-copy { padding:18px; width:62%; }
 .bento-mini .bento-copy { padding:14px; }
 .audience-bento .bento-mini h3 { font-size:16px; }
 .bento-grid-agency .bento-assist h3 { font-size:18px; }
 .bento-scene,.scene-returning,.scene-search,.scene-fulltime,.bento-grid-agency .scene-returning { width:130px; height:130px; }
 .scene-progress { width:150px; height:138px; }
}
@media(prefers-reduced-motion:reduce) { .bento-grid { animation:none; } .bento-tab,.bento-cta { transition:none; } }