/*!
Theme Name: pinpung
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pinpung
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

pinpung is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:root{--orange:#fb9b00;--orange2:#ffb32d;--orange3:#ffe0a8;--dark:#14161a;--muted:#69717d;--line:rgba(20,22,26,.09);--shadow:0 28px 80px rgba(20,22,26,.14);--soft:0 18px 42px rgba(20,22,26,.08);--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Inter","Noto Sans Thai",sans-serif;color:var(--dark);background:radial-gradient(circle at 84% 0%,rgba(251,155,0,.20),transparent 32%),radial-gradient(circle at 8% 36%,rgba(183,192,203,.30),transparent 28%),linear-gradient(180deg,#fff,#f7f9fb 52%,#fff);overflow-x:hidden}a{text-decoration:none;color:inherit}img,video{display:block;max-width:100%}
.navbar{position:fixed;top:0;left:0;width:100%;z-index:99;background:rgba(0,0,0,.90);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.nav-inner{width:min(1200px,calc(100% - 48px));height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between}.logo img{max-height:38px}.logo-fallback{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--orange2),var(--orange))}.menu{list-style:none;display:flex;gap:30px;margin:0;padding:0;align-items:center}.menu a{color:#fff;font-size:11px;font-weight:900;letter-spacing:.12em;position:relative}.menu a:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--orange2),var(--orange));transform:scaleX(0);transform-origin:right;transition:.3s}.menu a:hover,.menu a.active{color:var(--orange2)}.menu a:hover:after,.menu a.active:after{transform:scaleX(1);transform-origin:left}.contact-btn{padding:11px 22px;border-radius:999px;color:#fff!important;background:linear-gradient(135deg,#ffbc00,#ff721f);box-shadow:0 12px 28px rgba(251,155,0,.24)}.menu-toggle{display:none;width:46px;height:46px;border:0;border-radius:50%;background:#14161a;cursor:pointer}.menu-toggle span{display:block;width:18px;height:2px;margin:4px auto;border-radius:99px;background:var(--orange)}
.hero{position:relative;min-height:88vh;padding:150px 20px 98px;display:grid;place-items:center;overflow:hidden;color:#fff;background:#08090b;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-4;background:linear-gradient(120deg,rgba(0,0,0,.88),rgba(0,0,0,.50) 48%,rgba(0,0,0,.22)),url("https://pinpung.com/wp-content/uploads/2024/08/PPXU-27.jpg?auto=format&fit=crop&w=1800&q=85") center/cover;animation:heroBreath 14s ease-in-out infinite alternate}.hero:after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:-1;background:linear-gradient(to bottom,transparent,#fff)}.hero-orb{position:absolute;width:560px;height:560px;border-radius:50%;right:-130px;top:12%;z-index:-2;background:radial-gradient(circle,rgba(251,155,0,.44),transparent 66%);filter:blur(12px);animation:orbFloat 8s ease-in-out infinite alternate}.hero-grid{width:min(var(--max),calc(100% - 32px));display:grid;grid-template-columns:1.05fr .78fr;gap:clamp(34px,6vw,82px);align-items:center}.kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.kicker:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 8px rgba(251,155,0,.18)}h1{margin:24px 0 0;font-size:clamp(48px,7.5vw,108px);line-height:.9;letter-spacing:-.04em;font-weight:900}.gradient{display:inline-block;background:linear-gradient(100deg,#ff8a1f,#ffbc00,#ffe0a8,#fb9b00);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientRiver 4.2s linear infinite}.hero-copy{max-width:690px;margin:24px 0 0;color:rgba(255,255,255,.78);font-size:clamp(16px,1.8vw,20px);line-height:1.75;font-weight:600}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{min-height:54px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border-radius:999px;font-weight:900;transition:.25s;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;width:150%;height:150%;top:-25%;left:-170%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transform:rotate(20deg);transition:left .68s ease}.btn:hover:after{left:130%}.btn:hover{transform:translateY(-4px) scale(1.03)}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange));box-shadow:0 20px 44px rgba(251,155,0,.32)}.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.hero-showcase{position:relative;min-height:520px}.float-card{position:absolute;border-radius:32px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);background:#111;animation:floaty 6s ease-in-out infinite}.float-card img{width:100%;height:100%;object-fit:cover}.fc1{width:280px;height:370px;right:80px;top:20px;z-index:3}.fc2{width:210px;height:260px;left:20px;top:120px;z-index:2;animation-delay:-1.4s}.fc3{width:230px;height:180px;right:0;bottom:34px;z-index:4;animation-delay:-2.5s}.float-metric{position:absolute;left:70px;bottom:24px;z-index:5;min-width:190px;padding:18px;border-radius:26px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);box-shadow:0 22px 60px rgba(0,0,0,.22);animation:floaty 5.2s ease-in-out infinite reverse}.float-metric b{display:block;font-size:36px;letter-spacing:-.06em}.float-metric span{display:block;color:rgba(255,255,255,.72);font-size:12px;font-weight:900;letter-spacing:.1em}
.section{position:relative;padding:clamp(76px,9vw,126px) 20px;overflow:hidden}.inner{width:min(var(--max),calc(100% - 32px));margin:auto}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px}.section-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--orange);font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.section-kicker:before{content:"";width:30px;height:2px;background:currentColor}.section-title{margin:16px 0 0;font-size:clamp(36px,5.6vw,78px);line-height:1.06;letter-spacing:-.065em;font-weight:900}.section-copy{max-width:720px;margin:18px 0 0;color:var(--muted);font-size:17px;line-height:1.82}.filter-bar{display:flex;flex-wrap:wrap;gap:10px}.filter-btn{min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.82);font-weight:900;color:#4f5965;cursor:pointer;transition:.25s;box-shadow:0 12px 30px rgba(20,22,26,.05)}.filter-btn:hover,.filter-btn.active{color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange));transform:translateY(-3px);box-shadow:0 18px 42px rgba(251,155,0,.22)}
.featured{background:#fff}.featured-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.project-card{position:relative;overflow:hidden;border-radius:36px;min-height:360px;background:#111;color:#fff;box-shadow:var(--shadow);border:1px solid rgba(20,22,26,.08);transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s,filter .38s}.project-card:hover{transform:translateY(-12px);box-shadow:0 36px 92px rgba(20,22,26,.18),0 0 44px rgba(251,155,0,.14)}.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.85s cubic-bezier(.16,1,.3,1)}.project-card:hover img{transform:scale(1.12) rotate(.8deg);filter:saturate(1.12) contrast(1.08)}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.12) 58%,rgba(251,155,0,.16));z-index:1}.project-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,4vw,42px)}.tag{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(251,155,0,.92);color:#fff;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 30px rgba(251,155,0,.28)}.project-content h2{margin:18px 0 0;max-width:760px;font-size:clamp(32px,4.8vw,62px);line-height:.98;letter-spacing:-.06em}.project-content h3{margin:14px 0 0;font-size:26px;line-height:1.08;letter-spacing:-.04em}.project-content p{margin:12px 0 0;color:rgba(255,255,255,.74);line-height:1.65;font-weight:650}.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.meta span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);font-size:12px;font-weight:900;color:rgba(255,255,255,.82)}.feature-main{min-height:560px}.side-stack{display:grid;gap:18px}.side-stack .project-card{min-height:271px}
.case-section{background:radial-gradient(circle at 12% 10%,rgba(251,155,0,.15),transparent 30%),linear-gradient(135deg,#f8fafc,#fff)}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.case-card{position:relative;overflow:hidden;border-radius:32px;background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:var(--soft);backdrop-filter:blur(14px);transition:.35s cubic-bezier(.16,1,.3,1)}.case-card:hover{transform:translateY(-10px);border-color:rgba(251,155,0,.28);box-shadow:0 30px 80px rgba(20,22,26,.14),0 0 36px rgba(251,155,0,.12)}.case-image{position:relative;height:260px;overflow:hidden}.case-image img{width:100%;height:100%;object-fit:cover;transition:.75s cubic-bezier(.16,1,.3,1)}.case-card:hover img{transform:scale(1.11)}.case-body{padding:24px}.case-body small{color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.case-body h3{margin:10px 0 0;font-size:24px;line-height:1.15;letter-spacing:-.04em}.case-body p{margin:12px 0 0;color:var(--muted);line-height:1.72}.case-stats{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px;margin-top:18px;align-items:stretch}.case-stats>div{padding:12px;border-radius:18px;background:#f4f6f8}.case-stats b{display:block;color:var(--orange);font-size:22px;letter-spacing:-.05em}.case-stats span{display:block;margin-top:4px;font-size:14px;font-weight:900;color:#69717d;letter-spacing:.08em}.case-stats .case-view{position:relative;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 16px;border-radius:18px;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange));box-shadow:0 14px 30px rgba(251,155,0,.26);cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,filter .3s ease}.case-stats .case-view:before{content:"";position:absolute;z-index:-1;width:88px;height:88px;right:-28px;top:-34px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 68%)}.case-stats .case-view span{margin:0;color:#fff;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.case-stats .case-view i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:50%;font-style:normal;font-size:18px;line-height:1;color:var(--orange);background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.12);transition:transform .3s cubic-bezier(.16,1,.3,1)}.case-stats .case-view:hover{transform:translateY(-4px);filter:saturate(1.08);box-shadow:0 20px 40px rgba(251,155,0,.34)}.case-stats .case-view:hover i{transform:translate(2px,-2px) rotate(-8deg)}
.showreel-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,6vw,74px);align-items:center}.reel-panel{padding:34px;border-radius:38px;color:#fff;background:radial-gradient(circle at 78% 12%,rgba(251,155,0,.34),transparent 34%),linear-gradient(135deg,#101114,#20242b);box-shadow:var(--shadow);overflow:hidden}.reel-panel h2{margin:16px 0 0;font-size:48px;line-height:1;letter-spacing:-.06em}.reel-panel p{color:rgba(255,255,255,.72);line-height:1.8}.video-frame{position:relative;border-radius:38px;overflow:hidden;aspect-ratio:16/9;background:#111;box-shadow:var(--shadow);border:1px solid rgba(20,22,26,.08)}.video-frame video,.video-frame img{width:100%;height:100%;object-fit:cover}.video-frame:after{content:"PLAY SHOWREEL";position:absolute;left:24px;bottom:24px;padding:12px 16px;border-radius:999px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.12em;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16)}
.mosaic{background:#fff;padding-left:0;padding-right:0}.mosaic-head{width:min(var(--max),calc(100% - 36px));margin:0 auto 34px;text-align:center}.mosaic-track{display:flex;gap:16px;padding:0 16px 18px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}.mosaic-track::-webkit-scrollbar{display:none}.mosaic-column{display:grid;gap:16px;flex:0 0 auto}.mosaic-card{flex:0 0 auto;border-radius:30px;overflow:hidden;background:#eee;box-shadow:0 18px 52px rgba(20,22,26,.10);transition:.35s cubic-bezier(.16,1,.3,1)}.mosaic-card:hover{transform:translateY(-10px) rotate(.5deg);box-shadow:0 30px 80px rgba(20,22,26,.16)}.mosaic-card img{width:100%;height:100%;object-fit:cover;transition:.75s}.mosaic-card:hover img{transform:scale(1.12)}.mosaic-card.big{width:310px;height:420px}.mosaic-card.small{width:220px;height:202px}.mosaic-card.tall{width:220px;height:256px}.cta-box{padding:clamp(34px,5vw,58px);border-radius:40px;background:radial-gradient(circle at 80% 8%,rgba(251,155,0,.30),transparent 36%),linear-gradient(135deg,#101114,#20242b);color:#fff;box-shadow:var(--shadow);overflow:hidden}.cta-box .section-copy{color:rgba(255,255,255,.72)}.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.footer{padding:64px 20px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(251,155,0,.18),transparent 34%),linear-gradient(135deg,#fff,#edf1f5);border-top:1px solid var(--line)}.footer img{width:132px;margin:0 auto 24px}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin:0;padding:0;list-style:none}.footer-links a{color:#57616d;font-size:13px;font-weight:900;letter-spacing:.12em}.footer-links a:hover{color:var(--orange)}.footer p{margin:24px 0 0;color:var(--muted);font-size:13px}.contact-bubble{position:fixed;left:24px;bottom:24px;z-index:90;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:999px;background:rgba(20,22,26,.88);border:1px solid rgba(251,155,0,.22);backdrop-filter:blur(18px);box-shadow:0 18px 42px rgba(0,0,0,.22);color:white;transition:.28s}.contact-bubble:hover{transform:translateY(-4px) scale(1.03);background:linear-gradient(135deg,var(--orange2),var(--orange))}.bubble-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--orange2),var(--orange));font-weight:900}.bubble-text{display:flex;flex-direction:column;line-height:1.1}.bubble-text small{color:rgba(255,255,255,.58);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.bubble-text strong{margin-top:4px;font-size:15px;font-weight:900}
.reveal{opacity:0;transform:translate3d(0,44px,0) scale(.97);filter:blur(10px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .8s;transition-delay:var(--delay,0ms)}.reveal.visible{opacity:1;transform:none;filter:blur(0)}@keyframes gradientRiver{from{background-position:0% center}to{background-position:240% center}}@keyframes heroBreath{from{transform:scale(1.06);filter:saturate(1.03) contrast(1.02)}to{transform:scale(1.14) translate3d(-1%,1%,0);filter:saturate(1.18) contrast(1.08)}}@keyframes orbFloat{from{transform:translate3d(0,0,0) scale(.95);opacity:.7}to{transform:translate3d(-110px,120px,0) scale(1.15);opacity:1}}@keyframes floaty{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-16px,0) rotate(1.2deg)}}
@media(max-width:1080px){.hero-grid,.featured-grid,.showreel-grid{grid-template-columns:1fr}.hero-showcase{min-height:460px}.case-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.menu{display:none}.menu-toggle{display:block}.menu.is-open{position:absolute;top:78px;left:24px;right:24px;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}.menu.is-open a{display:block;color:#20242b;padding:14px 16px;border-radius:16px;background:rgba(20,22,26,.05)}.menu a:after{display:none}}@media(max-width:720px){.nav-inner{width:calc(100% - 24px)}.hero{min-height:auto;padding-top:128px}.hero-actions .btn{width:100%}.hero-showcase{min-height:420px;transform:scale(.86);transform-origin:center top;margin-bottom:-60px}.fc1{right:40px}.fc2{left:-4px}.fc3{right:-8px}.float-metric{left:18px}.section-head{display:block}.filter-bar{margin-top:22px}.case-grid{grid-template-columns:1fr}.mosaic-card.big{width:240px;height:340px}.mosaic-card.small{width:170px;height:162px}.mosaic-card.tall{width:170px;height:210px}.contact-bubble{left:16px;bottom:16px}}