.work-showcase{position:relative;overflow:hidden;padding:64px 0 76px;color:#0a1740;background:radial-gradient(ellipse 46% 56% at 52% 4%,rgba(39,130,255,.23),transparent 70%),radial-gradient(ellipse 54% 62% at 100% 66%,rgba(86,161,255,.21),transparent 72%),linear-gradient(145deg,#eef6ff 0%,#f8fbff 46%,#eaf4ff 100%)}
.site-2026 #examples.work-showcase{background:radial-gradient(ellipse 46% 56% at 52% 4%,rgba(39,130,255,.23),transparent 70%),radial-gradient(ellipse 54% 62% at 100% 66%,rgba(86,161,255,.21),transparent 72%),linear-gradient(145deg,#eef6ff 0%,#f8fbff 46%,#eaf4ff 100%)}
.work-showcase:before,.work-showcase:after{content:"";position:absolute;pointer-events:none;border-radius:50%;border:1px solid rgba(45,124,238,.1)}
.work-showcase:before{width:720px;height:720px;left:-370px;top:-480px;box-shadow:0 0 0 80px rgba(184,218,255,.11),0 0 0 180px rgba(184,218,255,.07)}
.work-showcase:after{width:560px;height:560px;right:-360px;bottom:-400px;box-shadow:0 0 0 90px rgba(184,218,255,.1)}
.showcase-shell{position:relative;z-index:1;width:min(1420px,calc(100% - 64px));margin:0 auto}
.showcase-intro{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:265px;padding:22px 0 34px;gap:24px}
.work-intro-copy{position:relative;z-index:2;max-width:780px}
.work-intro-copy h2{margin:0;color:#09183c;font-family:Inter,'Noto Sans Thai',sans-serif;font-size:clamp(42px,5.4vw,78px);font-weight:900;letter-spacing:-.055em;line-height:1.12}
.work-intro-copy h2 span{color:#0758ed}
.work-intro-copy p{margin:13px 0 0;color:#344d75;font-size:clamp(17px,1.75vw,24px);font-weight:500;line-height:1.4}
.work-mascot{position:absolute;z-index:1;right:17%;bottom:-22px;width:clamp(220px,27vw,365px);height:auto;filter:drop-shadow(0 16px 23px rgba(37,97,188,.14));pointer-events:none}
.showcase-all{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:16px;justify-content:center;min-height:54px;padding:0 24px;border:1.5px solid #3177fa;border-radius:999px;background:rgba(255,255,255,.88);color:#0758ed;font-weight:800;text-decoration:none;box-shadow:0 8px 25px rgba(36,103,202,.09);transition:transform .2s,background .2s}
.showcase-all:hover{transform:translateY(-3px);background:#fff}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.showcase-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(117,169,241,.25);border-radius:25px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 17px 36px rgba(38,87,155,.1);transition:transform .25s,box-shadow .25s}
.showcase-card:hover{transform:translateY(-6px);box-shadow:0 23px 44px rgba(38,87,155,.18)}
.showcase-card:focus-visible,.showcase-all:focus-visible,.showcase-toggle:focus-visible{outline:3px solid #0758ed;outline-offset:4px}
.showcase-card[hidden]{display:none!important}
.showcase-photo{position:relative;height:300px;overflow:hidden;background:#dcecff}
.showcase-photo:after{content:"";position:absolute;inset:auto 0 0;height:35%;background:linear-gradient(transparent,rgba(11,38,75,.1));pointer-events:none}
.showcase-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.showcase-card:hover .showcase-photo img{transform:scale(1.035)}
.showcase-tag{position:absolute;z-index:1;top:18px;left:18px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.94);color:#095ae8;font-size:13px;font-weight:800;box-shadow:0 6px 17px rgba(28,71,123,.13)}
.showcase-info{flex:1;min-height:114px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 23px}
.showcase-info h3{margin:0 0 4px;color:#0a1942;font-size:clamp(19px,1.75vw,24px);font-weight:800;line-height:1.25}
.showcase-info p{margin:0;color:#61718b;font-size:14px;line-height:1.4}
.showcase-arrow{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e8f1ff;color:#0861f5;font-size:29px;line-height:1;transition:background .2s,color .2s}
.showcase-card:hover .showcase-arrow{background:#0861f5;color:#fff}
.showcase-card--wide{grid-column:1/-1;display:grid;grid-template-columns:1.25fr .75fr}
.showcase-card--wide .showcase-photo{height:280px}
.showcase-card--wide .showcase-info{padding:30px 36px}
.showcase-card--wide .showcase-info h3{font-size:29px}
.showcase-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px auto 0;padding:12px 24px;border:1px solid #9abdf8;border-radius:999px;background:rgba(255,255,255,.78);color:#0758ed;font:800 15px Inter,'Noto Sans Thai',sans-serif;cursor:pointer;box-shadow:0 9px 24px rgba(42,103,197,.08)}
.showcase-toggle:hover{background:#fff}
.showcase-toggle .examples-toggle-triangle{display:block;width:0;height:0;border:6px solid transparent;border-top:8px solid currentColor;transform:translateY(4px)}
.showcase-toggle[aria-expanded="true"] .examples-toggle-triangle{transform:rotate(180deg) translateY(4px)}
.work-showcase--full{padding-top:52px}
.work-showcase--full .showcase-intro{min-height:260px}
.work-showcase--full .work-mascot{right:12%}
@media(max-width:1050px){.showcase-intro{min-height:240px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-card--wide{grid-column:1/-1}.work-mascot{right:7%;opacity:.9}.showcase-all{align-self:flex-end}}
@media(max-width:700px){.work-showcase{padding:46px 0 55px}.showcase-shell{width:min(100% - 32px,520px)}.showcase-intro{display:block;min-height:225px;padding:0 0 24px}.work-intro-copy{max-width:95%}.work-intro-copy h2{font-size:clamp(36px,9vw,49px)}.work-intro-copy p{max-width:300px;font-size:16px}.work-mascot,.work-showcase--full .work-mascot{width:185px;right:-16px;bottom:0;opacity:.72}.showcase-all{margin-top:20px;min-height:44px;padding:0 17px;font-size:13px}.showcase-grid{grid-template-columns:1fr;gap:16px}.showcase-photo,.showcase-card--wide .showcase-photo{height:250px}.showcase-card--wide{display:flex;grid-column:auto}.showcase-card--wide .showcase-info{padding:20px 23px}.showcase-card--wide .showcase-info h3{font-size:22px}.showcase-info{min-height:104px}.showcase-info p{font-size:13px}.work-showcase--full .showcase-intro{min-height:215px}}
@media(prefers-reduced-motion:reduce){.showcase-card,.showcase-photo img,.showcase-arrow,.showcase-all{transition:none}}
.work-showcase{padding-top:43px;padding-bottom:54px}
.work-showcase .showcase-intro{min-height:190px;padding-top:0;padding-bottom:22px}
.work-showcase .work-intro-copy h2{font-size:clamp(36px,4.3vw,61px)}
.work-showcase .work-intro-copy p{margin-top:18px;font-size:clamp(15px,1.35vw,19px)}
.work-showcase .work-mascot{width:clamp(170px,20vw,280px);bottom:-18px}
.work-showcase .showcase-photo{height:235px}
.work-showcase .showcase-card--wide .showcase-photo{height:235px}
.work-showcase--full{padding-top:46px}
.work-showcase--full .showcase-intro{min-height:190px}
@media(max-width:700px){.work-showcase{padding-top:36px;padding-bottom:44px}.site-2026 #examples.work-showcase{padding:36px 0 44px}.work-showcase .showcase-intro,.work-showcase--full .showcase-intro{min-height:180px;padding-bottom:20px}.work-showcase .work-intro-copy h2{font-size:clamp(32px,8.2vw,43px)}.work-showcase .work-intro-copy p{max-width:260px;margin-top:14px;font-size:14px}.work-showcase .work-mascot,.work-showcase--full .work-mascot{width:150px;right:-12px}.work-showcase .showcase-photo,.work-showcase .showcase-card--wide .showcase-photo{height:215px}}

/* Keep the homepage preview short; the full gallery remains on portfolio.html. */
.site-2026 #examples.work-showcase{padding:22px 0 30px}
.site-2026 #examples .showcase-intro{min-height:0;align-items:center;padding:0 0 15px}
.site-2026 #examples .work-intro-copy h2{font-size:clamp(28px,3.3vw,46px);line-height:1.15}
.site-2026 #examples .work-intro-copy p{margin-top:5px;font-size:clamp(13px,1.05vw,16px);line-height:1.35}
.site-2026 #examples .showcase-all{min-height:40px;padding:0 16px;font-size:13px}
.site-2026 #examples .showcase-grid{gap:12px}
.site-2026 #examples .showcase-card{border-radius:18px}
.site-2026 #examples .showcase-photo,.site-2026 #examples .showcase-card--wide .showcase-photo{height:168px}
.site-2026 #examples .showcase-tag{top:10px;left:10px;padding:5px 11px;font-size:11px}
.site-2026 #examples .showcase-info{min-height:76px;padding:12px 15px}
.site-2026 #examples .showcase-info h3{font-size:18px}
.site-2026 #examples .showcase-info p{font-size:12px}
.site-2026 #examples .showcase-arrow{width:34px;height:34px;font-size:22px}
.site-2026 #examples .showcase-toggle{margin-top:14px;padding:9px 18px;font-size:13px}
.portfolio-page .work-showcase--full .work-mascot{width:clamp(130px,14vw,190px);right:11%;bottom:-8px}
@media(max-width:700px){
  .site-2026 #examples.work-showcase{padding:20px 0 24px}
  .site-2026 #examples .showcase-intro{display:flex;flex-wrap:wrap;gap:9px;padding-bottom:12px}
  .site-2026 #examples .work-intro-copy{max-width:100%}
  .site-2026 #examples .work-intro-copy h2{font-size:clamp(27px,7vw,36px)}
  .site-2026 #examples .work-intro-copy p{max-width:none;margin-top:3px;font-size:12px}
  .site-2026 #examples .showcase-all{margin-top:0;min-height:34px;padding:0 12px;font-size:11px}
  .site-2026 #examples .showcase-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 8px;scrollbar-width:none}
  .site-2026 #examples .showcase-grid::-webkit-scrollbar{display:none}
  .site-2026 #examples .showcase-card,.site-2026 #examples .showcase-card--wide{flex:0 0 min(78vw,330px);display:flex;flex-direction:column;scroll-snap-align:start}
  .site-2026 #examples .showcase-photo,.site-2026 #examples .showcase-card--wide .showcase-photo{height:155px}
  .site-2026 #examples .showcase-info,.site-2026 #examples .showcase-card--wide .showcase-info{min-height:75px;padding:10px 13px}
  .site-2026 #examples .showcase-card--wide .showcase-info h3{font-size:18px}
}
@media(max-width:700px){.portfolio-page .work-showcase--full .work-mascot{width:110px;right:0;bottom:3px;opacity:.8}}