/*!
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;
  --gold: #ffd46a;
  --dark: #14161a;
  --muted: #69717d;
  --silver: #f4f6f8;
  --line: rgba(20,22,26,.08);
  --shadow: 0 30px 90px rgba(20,22,26,.14);
  --soft: 0 18px 46px 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 88% 4%, rgba(251,155,0,.18), transparent 32%),
    radial-gradient(circle at 8% 35%, rgba(183,192,203,.22), transparent 30%),
    linear-gradient(180deg, #fff, #f8fafc 50%, #fff);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
}

.nav-inner {
  width: min(1200px, calc(100% - 48px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo img { max-height: 38px; object-fit: contain; }

.logo-fallback {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--orange2), var(--orange));
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  transition: .25s;
}

.menu a:hover, .menu a.active { color: var(--orange2); }

.contact-btn {
  padding: 12px 20px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange2), var(--orange));
  box-shadow: 0 14px 34px rgba(251,155,0,.26);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: #15171b;
  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: 100vh;
  display: grid;
  place-items: end center;
  padding: 150px 20px 86px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: #050608;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(105deg, rgba(0,0,0,.92), rgba(0,0,0,.62) 48%, rgba(0,0,0,.20)),
    url("https://pinpung.com/wp-content/uploads/2025/08/Sunlight-x-BBQ-4-e1754554665364-1024x922.jpg") center/cover;
  animation: heroBreath 13s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(18px);
  z-index: -2;
  animation: orbFloat 9s ease-in-out infinite alternate;
}

.orb-1 {
  width: 420px;
  height: 420px;
  top: 12%;
  right: 8%;
  background: radial-gradient(circle, rgba(251,155,0,.32), transparent 68%);
}

.orb-2 {
  width: 340px;
  height: 340px;
  left: 4%;
  bottom: 22%;
  background: radial-gradient(circle, rgba(255,212,106,.20), transparent 70%);
  animation-delay: -3s;
}

.hero-grid {
  width: min(var(--max), calc(100% - 32px));
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(34px, 6vw, 76px);
  align-items: end;
}

.kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker::before,
.section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

h1 {
  margin: 20px 0 0;
  max-width: 900px;
  font-size: clamp(52px, 8vw, 112px);
  line-height: .88;
  letter-spacing: -.04em;
  font-weight: 900;
  text-shadow: 0 22px 74px rgba(0,0,0,.58);
}

.gradient {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, var(--orange2), var(--orange), var(--gold));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientRun 3.8s linear infinite;
}

.hero-copy {
  max-width: 680px;
  margin: 26px 0 0;
  color: rgba(255,255,255,.80);
  font-size: clamp(17px, 1.85vw, 21px);
  line-height: 1.72;
  font-weight: 650;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.tags span {
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
}

.hero-card {
  position: relative;
  padding: 18px;
  border-radius: 38px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 32px 86px rgba(0,0,0,.25);
}

.hero-card img {
  width: 100%;
  aspect-ratio: 1.04 / 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.hero-card-info {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  padding: 18px;
  border-radius: 24px;
  color: #fff;
  background: rgba(20,22,26,.72);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
}

.hero-card-info b {
  display: block;
  font-size: 36px;
  line-height: .9;
  letter-spacing: -.06em;
}

.hero-card-info span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.section {
  position: relative;
  padding: clamp(74px, 9vw, 122px) 20px;
  isolation: isolate;
}

.inner {
  width: min(var(--max), 100%);
  margin: 0 auto;
}

.section-title {
  margin: 14px 0 0;
  font-size: clamp(38px, 5.8vw, 78px);
  line-height: 1.02;
  letter-spacing: -.07em;
  font-weight: 900;
}

.section-copy {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 550;
}

.overview {
  width: min(980px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(64px, 8vw, 100px) 0;
}

.lead {
  margin: 0;
  color: #303741;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.54;
  letter-spacing: -.035em;
  font-weight: 850;
}

.story-body {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 36px;
  margin-top: 42px;
  align-items: start;
}

.story-body p {
  margin: 0;
  color: #434b55;
  font-size: 18px;
  line-height: 1.9;
  font-weight: 550;
}

.mission-box {
  padding: 28px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 100% 0%, rgba(251,155,0,.16), transparent 38%),
    rgba(255,255,255,.82);
  border: 1px solid var(--line);
  box-shadow: var(--soft);
}

.mission-box small {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mission-box h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .95;
  letter-spacing: -.07em;
}

.mission-box span {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 650;
}

.video-section {
  background:
    radial-gradient(circle at 12% 14%, rgba(251,155,0,.13), transparent 32%),
    linear-gradient(180deg, #fff, #f7f9fb);
  overflow: hidden;
}

.video-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.video-card {
  position: relative;
  transition: .34s cubic-bezier(.16,1,.3,1);
}

.video-card:nth-child(even) {
  margin-top: 56px;
}

.video-card:hover {
  transform: translateY(-10px);
}

.phone-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(145deg, #fff, #dfe5eb 36%, #8d96a2 74%, #343941);
  box-shadow:
    0 26px 74px rgba(20,22,26,.16),
    inset 0 0 0 1px rgba(255,255,255,.6);
}

.phone-frame::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 4;
  width: 72px;
  height: 22px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #08090b;
}

.phone-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  background: #111;
}
.phone-frame iframe,
.phone-frame .ig-phone-link {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 25px;
  background: #111;
}

.embed-phone {
  background:
    radial-gradient(circle at 100% 0%, rgba(251,155,0,.22), transparent 28%),
    linear-gradient(145deg, #ffffff, #e1e6ec 34%, #9fa8b4 72%, #1d2026);
}

.embed-phone::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  border-radius: 25px;
  background:
    linear-gradient(to top, rgba(0,0,0,.28), transparent 42%),
    radial-gradient(circle at 78% 12%, rgba(251,155,0,.2), transparent 28%);
}

.youtube-phone iframe {
  background: #000;
}

.ig-phone-link {
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.ig-phone-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .7s cubic-bezier(.16,1,.3,1);
}

.instagram-phone:hover .ig-phone-link img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.04);
}

.ig-phone-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 58%);
}

.ig-phone-overlay b {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.05em;
}

.ig-phone-overlay em {
  margin-top: 10px;
  color: var(--orange-2);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}


.play-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 4;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20,22,26,.78);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.video-caption {
  padding: 16px 4px 0;
}

.video-caption small {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.video-caption h3 {
  margin: 8px 0 0;
  color: #242a31;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.035em;
}



/* Social embed showcase: YouTube + Instagram, same PinPung portfolio mood */
.embed-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(251,155,0,.14), transparent 34%),
    radial-gradient(circle at 12% 80%, rgba(183,192,203,.18), transparent 34%),
    linear-gradient(180deg, #f7f9fb, #fff);
  overflow: hidden;
}

.embed-shell {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
  margin-top: 38px;
}

.embed-intro-card {
  position: sticky;
  top: 110px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 42px);
  border-radius: 40px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(251,155,0,.5), transparent 34%),
    linear-gradient(135deg, #15171b, #2b3038 58%, #111216);
  box-shadow: var(--shadow);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}

.embed-intro-card::before {
  content: "";
  position: absolute;
  inset: -80px -110px auto auto;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,155,0,.42), transparent 66%);
  filter: blur(8px);
  z-index: -1;
  animation: floatGlow 7s ease-in-out infinite alternate;
}

.embed-intro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 68% 24%, #000, transparent 68%);
  pointer-events: none;
}

.embed-intro-card small,
.embed-card small {
  color: var(--orange-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.embed-intro-card h2 {
  margin: 14px 0 0;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .94;
  letter-spacing: -.075em;
}

.embed-intro-card p {
  max-width: 430px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-weight: 650;
}

.embed-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.embed-platforms span {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.embed-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 34px;
}

.embed-stats div {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}

.embed-stats b {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.055em;
}

.embed-stats span {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.embed-content-grid {
  display: grid;
  gap: 18px;
}

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.embed-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
  box-shadow: var(--soft);
  backdrop-filter: blur(14px);
  transition: .36s cubic-bezier(.16,1,.3,1);
}

.embed-card:hover {
  transform: translateY(-10px);
  border-color: rgba(251,155,0,.28);
  box-shadow:
    0 34px 90px rgba(20,22,26,.15),
    0 0 34px rgba(251,155,0,.12);
}

.embed-frame {
  position: relative;
  overflow: hidden;
  background: #111;
}

.embed-frame.youtube {
  aspect-ratio: 16 / 9;
  border-radius: 34px 34px 0 0;
}

.embed-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.embed-meta {
  padding: 20px 22px 22px;
}

.embed-meta h3 {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.embed-meta p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.68;
  font-size: 15px;
  font-weight: 550;
}

.instagram-card {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: stretch;
}

.instagram-preview {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #15171b;
}

.instagram-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: .7s cubic-bezier(.16,1,.3,1);
}

.instagram-card:hover .instagram-preview img {
  transform: scale(1.08);
}

.instagram-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 14%, rgba(251,155,0,.26), transparent 34%),
    linear-gradient(to top, rgba(0,0,0,.68), transparent 60%);
}

.ig-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 10px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.44);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.instagram-embed-wrap {
  min-height: 430px;
  padding: 22px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(251,155,0,.12), transparent 34%),
    #fff;
}

.instagram-media {
  max-width: 540px !important;
  min-width: 260px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
}

.fallback-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(251,155,0,.24);
}

@keyframes floatGlow {
  from { transform: translate3d(0,0,0) scale(1); opacity: .7; }
  to { transform: translate3d(-70px, 90px, 0) scale(1.16); opacity: 1; }
}

.gallery {
  background: #fff;
}

.gallery-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 36px;
}

.image-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 40px;
  background: #111;
  box-shadow: var(--shadow);
}

.image-card.small {
  min-height: 250px;
}

.image-stack {
  display: grid;
  gap: 18px;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .7s cubic-bezier(.16,1,.3,1);
}

.image-card:hover img {
  transform: scale(1.07);
}

.image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 14%, rgba(251,155,0,.24), transparent 34%),
    linear-gradient(to top, rgba(0,0,0,.64), transparent 60%);
}

.image-card .caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  color: #fff;
}

.caption small {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.caption h3 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: .98;
  letter-spacing: -.065em;
}

.related {
  background:
    radial-gradient(circle at 12% 14%, rgba(251,155,0,.12), transparent 30%),
    linear-gradient(135deg, #f7f9fb, #fff);
}

.related .section-copy {
  max-width: 680px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.related-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);
}

.related-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);
}

.related-image {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--silver);
}

.related-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.34), transparent 58%),
    radial-gradient(circle at 84% 12%, rgba(251,155,0,.24), transparent 34%);
  opacity: .86;
  pointer-events: none;
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .75s cubic-bezier(.16,1,.3,1);
}

.related-card:hover .related-image img {
  transform: scale(1.11);
}

.related-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.related-body {
  padding: 24px;
}

.related-body small {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.related-body h3 {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.related-body p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.72;
  font-size: 15px;
  font-weight: 500;
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.case-stats div {
  padding: 12px;
  border-radius: 18px;
  background: #f4f6f8;
}

.case-stats b {
  display: block;
  color: var(--orange);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.05em;
}

.case-stats span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
  color: #69717d;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 20px;
  color: var(--dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: .25s;
}

.read-more span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--dark);
  transition: .25s;
}

.related-card:hover .read-more {
  color: var(--orange);
}

.related-card:hover .read-more span {
  background: var(--orange);
  transform: translateX(4px);
}

.footer {
  padding: 62px 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 rgba(20,22,26,.08);
}

.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;
  transition: .24s;
}

.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: 99;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 999px;
  color: #fff;
  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);
  transition: .28s;
}

.contact-bubble:hover {
  transform: translateY(-4px) scale(1.03);
  background: linear-gradient(135deg, var(--orange2), var(--orange));
  box-shadow: 0 22px 52px rgba(251,155,0,.34);
}

.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: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bubble-text strong {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(.985);
  filter: blur(10px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .82s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

@keyframes heroBreath {
  from { transform: scale(1); filter: saturate(1.05) contrast(1.04); }
  to { transform: scale(1.1) translate3d(-1.5%, 1%, 0); filter: saturate(1.2) contrast(1.1); }
}

@keyframes gradientRun {
  to { background-position: 220% center; }
}

@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-60px, 42px, 0) scale(1.14); }
}

@media (max-width: 1080px) {
  .hero-grid,
  .story-body,
  .gallery-layout {
    grid-template-columns: 1fr;
  }

  .video-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu { gap: 18px; }
}

@media (max-width: 780px) {
  .nav-inner {
    width: calc(100% - 24px);
    height: auto;
    min-height: 72px;
    padding: 12px 0;
    flex-wrap: wrap;
  }

  .navbar { background: rgba(255,255,255,.94); }

  .menu-toggle { display: block; }

  .menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transition: max-height .32s ease;
  }

  .menu.is-open {
    max-height: 520px;
    padding-top: 14px;
  }

  .menu a {
    display: block;
    padding: 14px 16px;
    border-radius: 18px;
    color: #343941;
    background: rgba(20,22,26,.045);
  }

  .contact-btn { text-align: center; }

  .hero {
    min-height: auto;
    padding-top: 128px;
  }

  .video-grid,
  .related-grid,
  .embed-shell,
  .youtube-grid,
  .instagram-card {
    grid-template-columns: 1fr;
  }

  .embed-intro-card {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .video-card:nth-child(even) {
    margin-top: 0;
  }

  .image-card,
  .image-card.small {
    min-height: 360px;
  }

  .contact-bubble {
    left: 16px;
    bottom: 16px;
  }
}


/* Make YouTube / Instagram area impossible to miss */
.quick-jump { margin-top: 28px; }
.quick-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #fff, #ffe1aa);
  box-shadow: 0 18px 45px rgba(251,155,0,.22);
  transition: .28s ease;
}
.quick-jump a:hover { transform: translateY(-4px); box-shadow: 0 26px 65px rgba(251,155,0,.32); }

.spotlight-embeds {
  padding-top: clamp(70px, 8vw, 110px);
  background:
    radial-gradient(circle at 18% 10%, rgba(251,155,0,.20), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255,179,45,.18), transparent 28%),
    linear-gradient(135deg, #fffaf2 0%, #ffffff 48%, #f5f7fa 100%);
  border-top: 1px solid rgba(251,155,0,.12);
  border-bottom: 1px solid rgba(20,22,26,.06);
}

.spotlight-embeds .section-kicker::after {
  content: "NEW";
  margin-left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 10px;
  box-shadow: 0 10px 24px rgba(251,155,0,.24);
}

.spotlight-embeds .embed-shell {
  margin-top: 34px;
  border: 1px solid rgba(251,155,0,.16);
  box-shadow: 0 30px 90px rgba(20,22,26,.10), 0 0 0 8px rgba(251,155,0,.035);
}



/* Cross-platform embeds use the exact TikTok card rhythm */
.social-head {
  align-items: flex-end;
  margin-bottom: 34px;
}

.social-phone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.social-phone-card:nth-child(even) {
  margin-top: 56px;
}

.social-phone-card .phone-frame {
  min-height: 520px;
}

.back-to-clips {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: #14161a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 18px 42px rgba(20,22,26,.12);
  transition: .28s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}

.back-to-clips:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 24px 54px rgba(251,155,0,.28);
}

.youtube-badge {
  background: rgba(255, 0, 0, .82);
}

.instagram-badge {
  background: linear-gradient(135deg, rgba(245,133,41,.88), rgba(221,42,123,.88), rgba(129,52,175,.88));
}

@media (max-width: 1080px) {
  .social-phone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .social-head {
    align-items: flex-start;
  }

  .social-phone-grid {
    grid-template-columns: 1fr;
  }

  .social-phone-card:nth-child(even) {
    margin-top: 0;
  }

  .social-phone-card .phone-frame {
    min-height: auto;
  }

  .back-to-clips {
    width: 100%;
  }
}

/* =========================================================
    FIX: YouTube + Instagram ใช้ rhythm เดียวกับ TikTok cards
    - กรอบมือถือแนวตั้งเท่ากัน
    - grid / gap / stagger เหมือนกัน
    - ไม่มี card กว้างแปลก ๆ หรือ iframe หลุดกรอบ
========================================================= */

#social-embeds {
  background:
    radial-gradient(circle at 12% 12%, rgba(251,155,0,.14), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(183,192,203,.20), transparent 34%),
    linear-gradient(180deg, #fff, #f7f9fb);
}

#social-embeds .video-head,
#tiktok-clips .video-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

#social-embeds .video-grid.social-phone-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

#social-embeds .video-card.social-phone-card {
  position: relative;
  margin-top: 0 !important;
  transition: .34s cubic-bezier(.16,1,.3,1);
}

#social-embeds .video-card.social-phone-card:nth-child(even) {
  margin-top: 56px !important;
}

#social-embeds .video-card.social-phone-card:hover {
  transform: translateY(-10px);
}

#social-embeds .phone-frame.embed-phone {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 34px !important;
  padding: 10px !important;
  background: linear-gradient(145deg, #fff, #dfe5eb 36%, #8d96a2 74%, #343941) !important;
  box-shadow:
    0 26px 74px rgba(20,22,26,.16),
    inset 0 0 0 1px rgba(255,255,255,.6) !important;
  transform: none !important;
}

#social-embeds .phone-frame.embed-phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 8;
  width: 72px;
  height: 22px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #08090b;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

#social-embeds .phone-frame.embed-phone iframe,
#social-embeds .phone-frame.embed-phone .ig-phone-link {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 25px !important;
  background: #111 !important;
  overflow: hidden !important;
}

#social-embeds .youtube-phone iframe {
  background: #000 !important;
}

#social-embeds .instagram-phone img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 25px !important;
}

#social-embeds .video-caption {
  padding: 16px 4px 0 !important;
  text-align: left !important;
}

#social-embeds .video-caption small {
  color: var(--orange) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

#social-embeds .video-caption h3 {
  margin: 8px 0 0 !important;
  color: #242a31 !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}

#social-embeds .play-badge {
  left: 20px !important;
  bottom: 20px !important;
  z-index: 10 !important;
}

#social-embeds .ig-phone-overlay {
  border-radius: 25px;
}

#social-embeds .social-filler-card {
  display: block;
}

@media (max-width: 1080px) {
  #social-embeds .video-grid.social-phone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #social-embeds .video-head,
  #tiktok-clips .video-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #social-embeds .video-grid.social-phone-grid {
    grid-template-columns: 1fr !important;
  }

  #social-embeds .video-card.social-phone-card:nth-child(even) {
    margin-top: 0 !important;
  }
}