/* Portfolio (merged from portfolio.killergrowth.com). Rules are scoped to .pf; the main site's header and footer are untouched. */
.pf { background: #121212; color: #fff; font-family: 'Kanit', sans-serif; min-height: 60vh; }
.pf h1, .pf h2, .pf h3, .pf h4 { font-family: 'Teko', sans-serif; }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf-hero { padding: 160px 24px 40px; text-align: center; background: #121212; }
.pf-hero h1 { font-family: 'Teko', sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: #fff; letter-spacing: -0.01em; margin: 0; }
.pf-hero h1 span { color: #C5FF00; }
.pf .page { padding: 140px 1.5rem 5rem; }
.pf .container { max-width: 64rem; margin: 0 auto; }
.pf a { text-decoration: none; }
.pf .filter-wrap {display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 3rem;}
.pf .filter-btn {position: relative;
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      font-family: 'Kanit', sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #71717a;
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.2s;}
.pf .filter-btn:hover {color: #fff;}
.pf .filter-btn.active {color: #C5FF00;}
.pf .filter-btn.active::after {content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: #C5FF00;
      border-radius: 1px;}
.pf .portfolio-section {max-width: 90rem;
      margin: 0 auto;
      padding: 0 1.5rem 5rem;}
.pf .grid {display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;}
@media (min-width: 640px) {
.pf .grid {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1024px) {
.pf .grid {grid-template-columns: repeat(3, 1fr);}
}
.pf .card {position: relative;
      display: block;
      overflow: hidden;
      border-radius: 0.5rem;
      aspect-ratio: 4/3;
      background: #18181b;
      text-decoration: none;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.5s ease, transform 0.5s ease;}
.pf .card.visible {opacity: 1; transform: translateY(0);}
.pf .card img {width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;}
.pf .card:hover img {transform: scale(1.1);}
.pf .card-placeholder {width: 100%; height: 100%;
      background: linear-gradient(135deg, #27272a, #18181b);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Teko', sans-serif;
      font-size: 4rem;
      font-weight: 700;
      color: rgba(197, 255, 0, 0.15);}
.pf .card-overlay {position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
      opacity: 0;
      transition: opacity 0.5s ease;}
.pf .card:hover .card-overlay {opacity: 1;}
.pf .card-content {position: absolute;
      inset: 0;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transform: translateY(1rem);
      opacity: 0;
      transition: transform 0.5s ease, opacity 0.5s ease;}
.pf .card:hover .card-content {transform: translateY(0); opacity: 1;}
.pf .card-cats {display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem;
      margin-bottom: 0.5rem;}
.pf .card-cat {color: #C5FF00;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;}
.pf .card-sep {color: #52525b; font-size: 0.7rem;}
.pf .card-title {color: #fff;
      font-family: 'Teko', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      line-height: 1.1;}
.pf .card-cta {display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #C5FF00;
      font-size: 0.8rem;
      font-weight: 500;}
.pf .card-corner {position: absolute;
      top: 1rem; right: 1rem;
      width: 2rem; height: 2rem;
      border-top: 2px solid #C5FF00;
      border-right: 2px solid #C5FF00;
      opacity: 0;
      transition: opacity 0.5s;}
.pf .card:hover .card-corner {opacity: 1;}
.pf .empty {text-align: center;
      padding: 5rem 0;
      display: none;}
.pf .empty.show {display: block;}
.pf .empty-icon {width: 5rem; height: 5rem;
      border-radius: 50%;
      background: rgba(39,39,42,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-size: 2rem;
      color: #C5FF00;}
.pf .empty h3 {color: #fff; font-size: 1.25rem; margin-bottom: 0.5rem;}
.pf .empty p {color: #71717a;}
.pf .center-screen {min-height: 100vh;
      display: flex; align-items: center; justify-content: center;}
.pf .spinner {width: 2.5rem; height: 2.5rem;
      border: 3px solid #27272a;
      border-top-color: #C5FF00;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }
.pf .back-link {display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: #71717a;
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      transition: color 0.2s;
      margin-bottom: 2rem;}
.pf .back-link:hover {color: #C5FF00;}
.pf .project-header {margin-bottom: 3rem;}
.pf .tag-row {display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;}
.pf .tag-cat {padding: 0.25rem 0.75rem;
      background: rgba(197,255,0,0.1);
      color: #C5FF00;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: 9999px;}
.pf .tag-misc {padding: 0.25rem 0.75rem;
      background: #27272a;
      color: #71717a;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: 9999px;}
.pf .project-title {font-size: clamp(2.5rem, 6vw, 4rem);
      font-weight: 700;
      color: #fff;
      line-height: 1;
      margin-bottom: 1.5rem;}
.pf .meta-row {display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;}
.pf .meta-item {display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #71717a;
      font-size: 0.85rem;}
.pf .meta-item svg {color: #C5FF00;}
.pf .main-image-wrap {border-radius: 1rem;
      overflow: hidden;
      background: #18181b;
      margin-bottom: 3rem;}
.pf .main-image-wrap img {width: 100%; height: auto; display: block;}
.pf .section {margin-bottom: 3rem;}
.pf .section-title {font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 1.5rem;}
.pf .description-text {color: #a1a1aa;
      font-size: 1rem;
      line-height: 1.8;
      white-space: pre-wrap;
      margin-bottom: 1.5rem;}
.pf .visit-btn {display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      background: #C5FF00;
      color: #000;
      font-weight: 600;
      font-family: 'Kanit', sans-serif;
      font-size: 0.9rem;
      text-decoration: none;
      border-radius: 0.5rem;
      transition: background 0.2s;}
.pf .visit-btn:hover {background: #d4ff33;}
.pf .gallery-grid {display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;}
@media (min-width: 768px) {
.pf .gallery-grid {grid-template-columns: repeat(2, 1fr);}
}
.pf .gallery-item {border-radius: 0.75rem;
      overflow: hidden;
      background: #18181b;
      cursor: pointer;
      position: relative;}
.pf .gallery-item img {width: 100%; height: auto; display: block; transition: transform 0.3s;}
.pf .gallery-item:hover img {transform: scale(1.05);}
.pf .gallery-item-overlay {position: absolute; inset: 0;
      background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.3s;}
.pf .gallery-item:hover .gallery-item-overlay {background: rgba(0,0,0,0.2);}
.pf .gallery-item-overlay svg {opacity: 0; transition: opacity 0.3s; color: #fff;}
.pf .gallery-item:hover .gallery-item-overlay svg {opacity: 1;}
.pf .video-item {border-radius: 0.75rem;
      overflow: hidden;
      background: #18181b;
      cursor: pointer;
      position: relative;
      aspect-ratio: 16/9;}
.pf .video-item img,
.pf .video-item video {width: 100%; height: 100%; object-fit: cover; display: block;}
.pf .video-placeholder {width: 100%; height: 100%;
      background: #27272a;
      display: flex; align-items: center; justify-content: center;}
.pf .video-overlay {position: absolute; inset: 0;
      background: rgba(0,0,0,0.3);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.3s;}
.pf .video-item:hover .video-overlay {background: rgba(0,0,0,0.5);}
.pf .play-btn {width: 4rem; height: 4rem;
      border-radius: 50%;
      background: #C5FF00;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s, opacity 0.3s;}
.pf .video-item:hover .play-btn {transform: scale(1.1);}
.pf .bottom-nav {margin-top: 4rem;
      padding-top: 3rem;
      border-top: 1px solid #27272a;
      display: flex;
      justify-content: center;}
.pf .all-projects-btn {display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      background: #27272a;
      color: #fff;
      font-weight: 500;
      font-size: 0.9rem;
      text-decoration: none;
      border-radius: 0.5rem;
      transition: background 0.2s;}
.pf .all-projects-btn:hover {background: #3f3f46;}
.pf .modal-backdrop {display: none;
      position: fixed; inset: 0; z-index: 50;
      background: rgba(0,0,0,0.95);
      align-items: center;
      justify-content: center;
      padding: 1rem;}
.pf .modal-backdrop.open {display: flex;}
.pf .modal-close {position: absolute;
      top: 1rem; right: 1rem;
      background: none; border: none; cursor: pointer;
      color: #fff; padding: 0.5rem;
      transition: color 0.2s;}
.pf .modal-close:hover {color: #C5FF00;}
.pf .modal-nav {position: absolute;
      top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      border: none; border-radius: 50%;
      width: 3rem; height: 3rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: #fff;
      transition: color 0.2s;}
.pf .modal-nav:hover {color: #C5FF00;}
.pf .modal-nav.prev {left: 1rem;}
.pf .modal-nav.next {right: 1rem;}
.pf .modal-img-wrap {position: relative;
      max-width: 90vw;
      max-height: 90vh;}
.pf .modal-img-wrap img {max-width: 100%;
      max-height: 90vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 0.5rem;
      display: block;}
.pf .modal-counter {position: absolute;
      bottom: 1rem; left: 50%; transform: translateX(-50%);
      padding: 0.25rem 1rem;
      background: rgba(0,0,0,0.7);
      color: #fff;
      border-radius: 9999px;
      font-size: 0.8rem;}
.pf .modal-video-wrap {position: relative;
      width: 90vw;
      max-width: 72rem;
      aspect-ratio: 16/9;}
.pf .modal-video-wrap iframe,
.pf .modal-video-wrap video {width: 100%; height: 100%;
      border-radius: 1rem;
      border: none;}