/* KGByDesign static portfolio styles
   Generated from the original WordPress Custom HTML file.
*/

/* KG quick performance patch — safe for WordPress Custom HTML block */
.pg-root img { max-width: 100%; }
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  #pg-network-canvas,
  #ptWaveCanvas,
  #ptParticleCanvas {
    display: none !important;
  }
  .pg-kg-halo,
  .pg-kg-glow {
    display: none !important;
  }
}

/* ---- extracted style block ---- */
html, body {
  margin: 0;
  padding: 0;
  background: #0d1230;
  width: 100%;
  overflow-x: hidden;
}
.pg-root {
  position: relative;
  width: 100%;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
}

/* ---- extracted style block ---- */
/* MOBILE ONLY — shrink hero stats so all fit on one screen */
@media (max-width: 680px) {
  .pg-hero-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 26px 0 26px !important;
    align-items: start !important;
  }

  .pg-stat-block {
    min-width: 0 !important;
    margin-right: 0 !important;
    padding: 0 12px !important;
    border-right: 1px solid rgba(180,150,90,0.26) !important;
  }

  .pg-stat-block:last-child {
    border-right: none !important;
    padding-right: 0 !important;
  }

  .pg-stat-num {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 0.95 !important;
  }

  .pg-stat-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
  }

  .pg-hero-left {
    max-width: 100% !important;
  }
}

/* ---- extracted style block ---- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
}

body.page,
body.page-template,
body.logged-in {
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
}

.wp-site-blocks,
.site,
.site-content,
.site-main,
.wp-block-post-content,
.entry-content,
.content-area,
.is-layout-constrained,
.is-layout-flow,
.wp-block-group,
main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.wp-block-post-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-post-content {
  background: #000 !important;
}

:root {
  --wp--style--root--padding-top: 0px !important;
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-bottom: 0px !important;
  --wp--style--root--padding-left: 0px !important;
}

/* ---- extracted style block ---- */
.wp-block-post-title,
.entry-title,
.page-title,
.post-thumbnail,
.wp-block-post-featured-image {
  display: none !important;
}

.wp-block-post-content,
.entry-content,
.site-main,
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---- extracted style block ---- */
/* ── WordPress full-width breakout ── */
.wp-block-html,
.entry-content .wp-block-html,
.wp-block-group,
.wp-block-columns,
.entry-content,
.post-content,
.page-content,
.elementor-widget-container,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Target the custom HTML block wrapper itself */
.wp-block-html > * {
  max-width: none !important;
}

/* Pull the pg-root full width regardless of parent */
.pg-root {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ---- extracted style block ---- */
/* ── Reset scoped to our wrapper only ── */
.pg-root *, .pg-root *::before, .pg-root *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

.pg-root {
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  overflow-x: hidden;
  background: #0d1230;
}

/* ════════════════════════════
   HERO
════════════════════════════ */
/* ═══════════════════════════════════════════
   HERO — Enterprise Search Architect style
═══════════════════════════════════════════ */
.pg-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d1230;
}

/* Cinematic background — dark moody city bokeh */
.pg-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 70% at 70% 50%, rgba(160,100,30,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 40%, rgba(180,120,40,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 60% 70%, rgba(120,70,20,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 20% 60%, rgba(80,50,15,0.12) 0%, transparent 50%),
    linear-gradient(160deg, #0d0b08 0%, #120e08 30%, #0f0c07 60%, #090806 100%);
}

/* Bokeh particle overlay */
.pg-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 3px at 62% 35%, rgba(200,150,60,0.5) 0%, transparent 100%),
    radial-gradient(circle 5px at 75% 28%, rgba(180,130,50,0.35) 0%, transparent 100%),
    radial-gradient(circle 2px at 80% 55%, rgba(220,170,70,0.4) 0%, transparent 100%),
    radial-gradient(circle 8px at 68% 45%, rgba(160,110,40,0.2) 0%, transparent 100%),
    radial-gradient(circle 4px at 88% 38%, rgba(200,150,60,0.3) 0%, transparent 100%),
    radial-gradient(circle 6px at 55% 65%, rgba(180,120,45,0.25) 0%, transparent 100%),
    radial-gradient(circle 3px at 92% 62%, rgba(220,160,55,0.35) 0%, transparent 100%),
    radial-gradient(circle 12px at 73% 30%, rgba(140,100,35,0.15) 0%, transparent 100%),
    radial-gradient(circle 20px at 65% 50%, rgba(160,110,40,0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* Left-side dark fade to keep text readable */
.pg-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.75) 40%, rgba(10,8,6,0.2) 75%, transparent 100%),
    linear-gradient(to top, rgba(13,12,11,1) 0%, rgba(13,12,11,0.92) 8%, rgba(13,12,11,0.6) 18%, transparent 38%);
  pointer-events: none;
}

/* Bottom bleed — hero fades cleanly into carousel darkness */
.pg-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(13,12,11,0.55) 35%,
    rgba(13,12,11,0.88) 65%,
    #0d0d0d 100%
  );
  z-index: 4;
  pointer-events: none;
}

/* ── TOP NAV ── */
.pg-nav {
  position: relative; z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 44px;
  border-bottom: 1px solid rgba(180,150,90,0.1);
}

/* Horizontal rule under nav */
.pg-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 44px; right: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(180,150,90,0.25), transparent);
}

.pg-nav-menu {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
}
.pg-nav-menu span {
  display: block; width: 22px; height: 1.5px;
  background: rgba(255,255,255,0.55); border-radius: 2px;
  transition: background 0.2s;
}
.pg-nav-menu:hover span { background: rgba(200,165,90,0.8); }

/* Center pill — CASE STUDIES */
.pg-nav-pill {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent   0%,
    transparent  25%,
    #0d1230      55%,
    #0d1230     100%
  );
  border: 1px solid rgba(180,150,90,0.45);
  color: rgba(220,185,130,0.9);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 8px 22px; border-radius: 40px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pg-nav-pill:hover {
  background: rgba(180,150,90,0.1);
  border-color: rgba(200,165,100,0.7);
}

/* Right nav links */
.pg-nav-right {
  display: flex; gap: 36px; align-items: center;
}
.pg-nav-right a {
  color: rgba(200,185,165,0.55);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; transition: color 0.2s;
}
.pg-nav-right a:hover { color: rgba(220,185,130,0.9); }

/* ── HERO BODY ── */
.pg-hero-body {
  position: relative; z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 40px 44px 70px;
  gap: 40px;
}

.pg-hero-left { max-width: 720px; }

/* Eyebrow — hidden in new design */
.pg-eyebrow { display: none; }

/* Main title — unified serif headline for perfect alignment */
.pg-hero-title-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 300;
  font-style: normal;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin: 0 0 32px;
  padding: 0;
  text-indent: 0;
  opacity: 0;
  animation: pgFadeUp 0.9s ease 0.25s forwards;
}

/* Gold subtitle line */
.pg-hero-gold-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  color: #c9963f;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: 10px;
  opacity: 0;
  animation: pgFadeUp 0.8s ease 0.5s forwards;
}
.pg-hero-gold-sub strong { color: #e0b060; font-weight: 700; }

/* ── STATS ROW ── */
.pg-hero-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 36px 0 40px;
  opacity: 0;
  animation: pgFadeUp 0.8s ease 0.65s forwards;
}
.pg-stat-block {
  padding: 0 44px 0 0;
  border-right: 1px solid rgba(180,150,90,0.3);
  margin-right: 44px;
}
.pg-stat-block:last-child {
  border-right: none; margin-right: 0; padding-right: 0;
}
.pg-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 600;
  color: #c9963f;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pg-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(200,185,165,0.6);
  margin-top: 8px; line-height: 1.5;
}

/* Body desc */
.pg-hero-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 300; line-height: 1.8;
  color: rgba(200,185,165,0.65);
  max-width: 620px; margin-bottom: 40px;
  opacity: 0;
  animation: pgFadeUp 0.8s ease 0.75s forwards;
}

/* Horizontal rule */
.pg-hero-rule { display: none; }

/* CTA button */
.pg-hero-cta {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(200,165,90,0.5);
  color: rgba(220,190,140,0.9);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 30px;
  text-decoration: none; cursor: pointer;
  background: transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  opacity: 0;
  animation: pgFadeUp 0.8s ease 0.88s forwards;
}
.pg-hero-cta:hover {
  background: rgba(200,165,90,0.1);
  border-color: rgba(200,165,90,0.8);
  color: #e0c070;
}
.pg-hero-cta-arrow {
  font-size: 13px; transition: transform 0.2s;
}
.pg-hero-cta:hover .pg-hero-cta-arrow { transform: translateX(4px); }

/* ── KG MONOGRAM — right side ── */
.pg-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: pgMonogramAppear 1.8s ease 1.8s forwards;
}

@keyframes pgMonogramAppear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.pg-kg-wrap {
  position: relative;
  width: clamp(300px, 32vw, 480px);
  height: clamp(300px, 32vw, 480px);
}

/* Outer ring — draws in */
.pg-kg-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
}
.pg-kg-ring svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.pg-kg-ring-circle {
  fill: none;
  stroke: url(#kgGoldGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 628;
  stroke-dashoffset: 628;
  animation: kgRingDraw 1.8s cubic-bezier(0.4,0,0.2,1) 1.8s forwards;
}
@keyframes kgRingDraw {
  0%   { stroke-dashoffset: 628; opacity: 0.3; }
  30%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Inner glow fill */
.pg-kg-inner {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, rgba(160,110,30,0.18) 0%, rgba(10,8,5,0.85) 70%);
  border: 1px solid rgba(180,140,60,0.12);
  display: flex; align-items: center; justify-content: center;
}

/* KG text */
.pg-kg-letters {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(100px, 11vw, 160px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(145deg, #e0c06a 0%, #c9963f 35%, #f0d080 55%, #b8841e 80%, #d4a840 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: kgLettersFade 0.8s ease 3.0s forwards;
}
@keyframes kgLettersFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Subtle rotating outer halo */
.pg-kg-halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(200,160,60,0.08);
  animation: kgHaloSpin 18s linear infinite;
  opacity: 0;
  animation-delay: 3.5s;
  animation-fill-mode: forwards;
}
.pg-kg-halo::before {
  content: '';
  position: absolute;
  top: 10%; left: -1px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(220,170,60,0.6);
  box-shadow: 0 0 6px rgba(220,170,60,0.8);
}
@keyframes kgHaloSpin {
  0%   { opacity: 0; transform: rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(360deg); }
}

/* Glow pulse behind circle */
.pg-kg-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180,130,40,0.12) 0%, transparent 70%);
  opacity: 0;
  animation: kgGlowPulse 3s ease 3.5s infinite alternate;
}
@keyframes kgGlowPulse {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* ── Design By line + text — shoots out from circle ── */
.pg-kg-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* SVG line that draws leftward from circle */
.pg-kg-line-svg {
  position: absolute;
  /* sits to the left of the circle, extends from its edge */
  right: clamp(300px, 32vw, 480px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 340px);
  height: 80px;
  overflow: visible;
  pointer-events: none;
}

.pg-kg-line-path {
  fill: none;
  stroke: url(#kgGoldGrad2);
  stroke-width: 1.5;
  stroke-linecap: round;
  /* total length approx 400 */
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  opacity: 0;
  animation: kgLineExtend 1.0s cubic-bezier(0.4,0,0.2,1) 0.9s forwards;
}
@keyframes kgLineExtend {
  0%   { stroke-dashoffset: 420; opacity: 0; }
  8%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* "Design by" text above the line */
.pg-kg-design-by {
  position: absolute;
  right: clamp(300px, 32vw, 480px);
  top: 50%;
  transform: translateY(-100%);
  width: clamp(180px, 22vw, 340px);
  text-align: right;
  padding-right: 8px;
  padding-bottom: 8px;
  pointer-events: none;
  opacity: 0;
  animation: kgDesignByFade 0.7s ease 0.2s forwards;
}
@keyframes kgDesignByFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.pg-kg-design-by span {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 300;
  font-style: italic;
  background: linear-gradient(130deg, #e8c860 0%, #c9963f 40%, #f0d880 65%, #b8841e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .pg-kg-line-svg, .pg-kg-design-by { display: none; }
}

@media (max-width: 800px) {
  .pg-hero-body { grid-template-columns: 1fr; }
  .pg-hero-right { display: none; }
  .pg-nav { padding: 18px 20px; }
  .pg-hero-body { padding: 20px 20px 50px; }
  .pg-nav-pill { position: static; transform: none; }
  .pg-nav::after { left: 20px; right: 20px; }
}

/* ── Digital network visualization — center hero ── */
#pg-network-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  display: block;
  opacity: 0;
  animation: pgNetFadeIn 2.5s ease 0.5s forwards;
}
@keyframes pgNetFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Keyframes ── */
@keyframes pgFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════
   CAROUSEL SECTION
════════════════════════════ */
.pg-carousel-section {
  background: linear-gradient(160deg, #0d0d0d 0%, #161210 50%, #0d0d0d 100%);
  padding: 60px 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
  position: relative;
}

/* Top fade — carousel eases in from hero's black */
.pg-carousel-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, #0d0d0d 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Header block ── */
.pg-carousel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
  width: 100%;
  padding: 0 40px;
}

.pg-carousel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  margin: 0;
  position: relative;
  display: inline-block;
  /* Base gold color */
  color: #c9a96e;
  background: linear-gradient(
    105deg,
    #b8924a 0%,
    #c9a96e 30%,
    #f0d898 48%,
    #fffbe0 52%,
    #f0d898 56%,
    #c9a96e 70%,
    #b8924a 100%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shine sweeps across on trigger */
.pg-carousel-title.pg-shine-active {
  animation: pgShine 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pgShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

/* ruled line with centered text */
.pg-carousel-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 500px;
}

.pg-carousel-rule::before,
.pg-carousel-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196,163,100,0.5), rgba(196,163,100,0.5));
}

.pg-carousel-rule::after {
  background: linear-gradient(to left, transparent, rgba(196,163,100,0.5), rgba(196,163,100,0.5));
}

.pg-carousel-rule span {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(196,163,100,0.7);
  white-space: nowrap;
}



/* Hide tag pill, view project row, and CTA button */
.pc-card-tag { display: none !important; }
.pc-price-row { display: none !important; }
.pc-cta { display: none !important; }

/* ── Carousel vars ── */
.pg-carousel-section {
  --pc-card-w: 180px;
  --pc-card-h: 300px;
  --pc-active-w: 240px;
  --pc-active-h: 380px;
  --pc-gap: 14px;
  --pc-radius: 22px;
  --pc-ease: 0.55s cubic-bezier(0.34, 1.1, 0.64, 1);
}

.pc-wrap {
  position: relative;
  height: calc(var(--pc-active-h) + 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

.pc-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-gap);
  padding: 20px 10px;
  pointer-events: none;
  width: 100%;
}

/* Re-enable clicks on the cards inside the track */
.pc-track .pc-card {
  pointer-events: all;
}

.pc-card {
  position: relative;
  width: var(--pc-card-w);
  height: var(--pc-card-h);
  border-radius: var(--pc-radius);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: width var(--pc-ease), height var(--pc-ease), transform var(--pc-ease), box-shadow var(--pc-ease), opacity 0.3s ease;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
  opacity: 0.88;
  z-index: 1;
}

/* Ensure non-active cards are still above the section bg and clickable */
.pc-card:not(.pc-active) { z-index: 2; }
.pc-card.pc-active       { z-index: 3; }

/* All internal layers must NEVER block clicks — only the card itself gets clicks */
.pc-card-img,
.pc-card-overlay,
.pc-card-tint,
.pc-card-tag,
.pc-card-vlabel,
.pc-card-info,
.pc-card-info *,
.pc-cta {
  pointer-events: none;
}

.pc-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
  z-index: 3;
}

.pc-card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  display: block;
  transition: transform var(--pc-ease);
  filter: brightness(0.92) contrast(1.04);
}

/* Tint overlay — removed */
.pc-card-tint { display: none; }

.pc-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.45) 100%);
  transition: background var(--pc-ease);
  z-index: 1;
}

.pc-card-tag {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(40,32,28,0.8);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.7);
  z-index: 4;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pc-card-vlabel {
  position: absolute;
  right: 13px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  z-index: 4;
  transition: opacity 0.3s ease;
}

.pc-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 20px 56px;
  z-index: 4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}

.pc-card-info .pc-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 400;
  color: rgba(255,255,255,0.95);
  line-height: 1.2; margin: 0 0 3px;
}

.pc-card-info .pc-sub {
  font-size: 9.5px; font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 10px;
}

.pc-card-info .pc-price-row { display: flex; align-items: baseline; gap: 6px; }

.pc-card-info .pc-from {
  font-size: 9px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.pc-card-info .pc-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 500;
  color: rgba(255,255,255,0.95);
}

.pc-cta {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 7px;
  background: rgba(180,155,110,0.22);
  border: 1px solid rgba(210,185,145,0.45);
  backdrop-filter: blur(8px);
  color: rgba(220,200,160,0.95);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 40px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 5; opacity: 0;
  transition: opacity 0.3s ease 0.18s, transform 0.3s ease 0.18s, background 0.2s;
}
.pc-cta { pointer-events: all; }
.pc-cta:hover { background: rgba(180,155,110,0.38); }
.pc-cta svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* Active */
.pc-card.pc-active {
  width: var(--pc-active-w);
  height: var(--pc-active-h);
  transform: translateY(-4px);
  opacity: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.pc-card.pc-active .pc-card-img   { transform: scale(1.03); }
.pc-card.pc-active .pc-card-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%); }
.pc-card.pc-active .pc-card-tag   { opacity: 1; transform: translateY(0); }
.pc-card.pc-active .pc-card-vlabel { opacity: 0; }
.pc-card.pc-active .pc-card-info  { opacity: 1; transform: translateY(0); }
.pc-card.pc-active .pc-cta        { opacity: 1; transform: translateX(-50%) translateY(0); }
.pc-card:not(.pc-active):hover     { opacity: 1; transform: scale(1.03) translateY(-2px); }

/* Dots */
.pc-dots { display:flex; gap:8px; align-items:center; margin-top: 8px; }
.pc-dot {
  width:6px;height:6px;border-radius:3px;
  background:rgba(210,185,145,0.2);
  cursor:pointer; border:none; padding:0;
  transition: width 0.35s ease, background 0.35s ease;
}
.pc-dot.pc-active { width:24px; background:rgba(210,185,145,0.65); }

/* ── Responsive ── */
@media (max-width: 680px) {
  .pg-hero-body { grid-template-columns: 1fr; }
  .pg-hero-right { display: none; }
  .pg-nav { padding: 18px 20px; }
  .pg-hero-body { padding: 10px 20px 50px; }
}

/* ════════════════════════════
   LIGHTBOX
════════════════════════════ */
.pc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.pc-lightbox.pc-lb-open {
  opacity: 1;
  pointer-events: all;
}

.pc-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}

.pc-lightbox-inner {
  position: relative;
  z-index: 2;
  max-width: min(86vw, 680px);
  max-height: 88vh;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  transform: scale(0.88) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pc-lightbox.pc-lb-open .pc-lightbox-inner {
  transform: scale(1) translateY(0);
}

.pc-lightbox-inner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}

.pc-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.pc-lightbox-close:hover {
  background: rgba(255,255,255,0.28);
}

.pc-lightbox-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 3;
}

.pc-lightbox-label .pc-lb-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
}

.pc-lightbox-label .pc-lb-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
}

/* ════════════════════════════
   WEB DESIGNS SECTION
════════════════════════════ */
.wd-section {
  padding: 70px 40px 80px;
  position: relative;
  background: linear-gradient(
    to bottom,
    #f7f6f4   0%,
    #f7f6f4  55%,
    #f0ead8  75%,
    #e8dfc4  88%,
    #ede5d0 100%
  );
}

.wd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

.wd-header-left {}

.wd-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 500;
  color: #1a1714;
  line-height: 1.1;
  margin-bottom: 6px;
}

.wd-subtitle {
  font-size: 12px;
  font-weight: 300;
  color: rgba(30,24,18,0.5);
  max-width: 340px;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

/* Filter pills */
.wd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.wd-filter {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(30,24,18,0.55);
  background: rgba(30,24,18,0.06);
  border: 1px solid rgba(30,24,18,0.1);
  border-radius: 40px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.wd-filter:hover,
.wd-filter.wd-filter-active {
  background: #1a1714;
  color: rgba(255,255,255,0.88);
  border-color: #1a1714;
}

/* Grid */
.wd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.wd-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}

/* Video wrapper */
.wd-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #1a1714;
}

.wd-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wd-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fallback color blocks when no video src */
.wd-video-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-play-badge {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.28);
  z-index: 2;
  cursor: pointer;
  transition: background 0.2s;
}
.wd-play-badge:hover {
  background: rgba(0,0,0,0.42);
}
.wd-play-badge-inner {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: transform 0.18s, background 0.18s;
}
.wd-play-badge:hover .wd-play-badge-inner {
  transform: scale(1.1);
  background: #fff;
}
.wd-play-badge svg {
  width: 18px; height: 18px;
  fill: #1a1714;
  margin-left: 3px; /* optical center for play triangle */
}
.wd-video-wrap.playing .wd-play-badge {
  display: none;
}

/* Card body */
.wd-card-body {
  padding: 16px 18px 18px;
}

.wd-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  color: #1a1714;
  line-height: 1.3;
  margin-bottom: 4px;
}

.wd-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.wd-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 300;
  color: rgba(30,24,18,0.5);
  letter-spacing: 0.04em;
}

.wd-card-meta svg {
  width: 11px; height: 11px;
  fill: none;
  stroke: rgba(30,24,18,0.4);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(30,24,18,0.07);
  padding-top: 12px;
  margin-top: 4px;
}

.wd-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  color: #1a1714;
}

.wd-price-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: rgba(30,24,18,0.45);
  letter-spacing: 0.06em;
}

.wd-view-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30,24,18,0.7);
  background: rgba(30,24,18,0.06);
  border: 1px solid rgba(30,24,18,0.12);
  border-radius: 30px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}

.wd-view-btn:hover {
  background: #1a1714;
  color: #fff;
  border-color: #1a1714;
}

/* Star rating */
.wd-stars {
  color: #d4a84b;
  font-size: 11px;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .wd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .wd-grid { grid-template-columns: 1fr; }
  .wd-section { padding: 50px 20px 60px; }
}

/* ════════════════════════════
   PARTNERS / TESTIMONIALS
════════════════════════════ */
.pt-section {
  padding: 0px 40px 340px;
  overflow: visible;
  position: relative;
  margin-top: -60px;
  background: linear-gradient(
    to bottom,
    #ede5d0  0%,
    #ede5d0 26%,
    #e3dcc8 34%,
    #d4cec2 41%,
    #c8c2cc 47%,
    #b2b0cc 53%,
    #9aa2c4 59%,
    #7280b8 65%,
    #5868a8 70%,
    #405296 75%,
    #2c3e84 80%,
    #1a2c6a 86%,
    #111e52 92%,
    #0d1230 100%
  );
}

/* Top radial glow — wide warm arc from above */
.pt-section::before { display: none; }

/* Central gold hot-spot */
.pt-section::after { display: none; }


/* PT bottom fade removed */
.pt-bottom-fade { display: none; }

.pt-wave-wrap,.pt-wave-svg,#ptParticleCanvas,#ptWaveCanvas { display:none; }

/* ── Mosaic: 3-column layout — left photos | center text | right photos ── */
.pt-mosaic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 80px;
  margin-top: -20px;
  z-index: 20;
}

/* Three (or more) supplier cards row */
.pt-three-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 920px;
  flex-wrap: wrap;
  /* lighting layers handle the glow now */
  filter: none;
  position: relative;
}

/* ── GLOSSY FLOOR SYSTEM — layered reflective surface ── */

/* Layer A: ambient rear bloom — wide, very low, surrounds the whole row */
.pt-three-row::before {
  content: '';
  position: absolute;
  inset: -30px -30% -60px -30%;
  background:
    radial-gradient(ellipse 65% 55% at 50% 55%,
      rgba(222,182,52,0.13) 0%,
      rgba(200,158,38,0.05) 55%,
      transparent 78%
    );
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

/* Layer B: primary floor bloom — elliptical, directly below card bases */
.pt-three-row::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: -18%; right: -18%;
  height: 100px;
  background:
    /* four card hotspots — each card has a pool of light */
    radial-gradient(ellipse 18% 50% at 14% 0%, rgba(252,218,82,0.36) 0%, transparent 72%),
    radial-gradient(ellipse 18% 50% at 37% 0%, rgba(255,225,90,0.36) 0%, transparent 72%),
    radial-gradient(ellipse 18% 50% at 63% 0%, rgba(255,225,90,0.36) 0%, transparent 72%),
    radial-gradient(ellipse 18% 50% at 86% 0%, rgba(252,218,82,0.36) 0%, transparent 72%),
    /* shared wide floor wash behind hotspots */
    radial-gradient(ellipse 88% 40% at 50% 0%, rgba(238,195,60,0.18) 0%, rgba(215,168,40,0.06) 55%, transparent 80%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 3;
}

.pt-three-row .pt-photo {
  height: 174px;
  width: 100%;
}

/* Make logo tiles clickable */
.pt-photo {
  border-radius: 18px;
  overflow: visible;
  background: none; /* unique per-card backgrounds set via inline style */
  /* glowing edge border — bright on sides, stronger at mid-edges */
  /* Gold metal frame: sharp inner edge + outer glow */
  border: 2px solid rgba(218,172,42,0.95);
  outline: 1px solid rgba(255,235,120,0.55);
  outline-offset: -4px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  box-shadow:
    /* sharp outer frame edge — defines the metal trim */
    0 0 0 1px rgba(255,220,80,0.90),
    /* tight bright glow just outside frame — makes it feel lit */
    0 0 6px  2px rgba(255,205,60,0.60),
    0 0 18px 4px rgba(240,180,40,0.30),
    0 0 40px 8px rgba(220,160,25,0.15),
    /* inner frame highlight — top edge brightest like light hitting metal */
    inset 0  1px  0   rgba(255,252,200,0.90),
    inset 0  2px  6px rgba(255,245,170,0.40),
    /* side and bottom inner edge glow — frame feels 3D */
    inset 0 -1px  0   rgba(200,155,30,0.70),
    inset  1px 0  0   rgba(255,235,130,0.55),
    inset -1px 0  0   rgba(255,235,130,0.55),
    /* subtle center ambient */
    inset 0 0 30px rgba(255,248,205,0.18);
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}






.pt-photo:hover {
  box-shadow:
    0 0 0 1.5px rgba(255,215,65,1.00),
    0 0 12px  3px  rgba(255,218,72,0.80),
    0 0 30px  6px  rgba(245,192,52,0.45),
    0 0 60px 12px  rgba(230,170,30,0.22),
    inset 0  2px 10px rgba(255,252,190,0.60),
    inset 0 -2px 14px rgba(255,225,80,0.55),
    inset  2px 0 12px rgba(255,228,95,0.45),
    inset -2px 0 12px rgba(255,228,95,0.45),
    inset 0 0 32px rgba(255,252,215,0.30);
  transform: translateY(-4px);
}

.pt-photo.pt-visible { opacity: 1; transform: translateY(0); }
.pt-photo.pt-visible:hover { transform: translateY(-3px); }

.pt-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* lighten logos so they read on dark gold bg */
  filter: brightness(1.15) contrast(0.95);
  position: relative; z-index: 1;
}

/* Center — pill + heading */
.pt-heading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 20px 10px;
  z-index: 200;
  position: relative;
}

.pt-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(30,24,18,0.75);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(180,130,20,0.22);
  border-radius: 40px;
  padding: 7px 22px;
  box-shadow: 0 2px 12px rgba(160,100,10,0.12);
  backdrop-filter: blur(4px);
}

.pt-main-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 500;
  color: #1a1208;
  text-align: center;
  line-height: 1.15;
}

.pt-main-heading span {
  font-weight: 300;
  font-style: italic;
  color: rgba(50,30,8,0.55);
}


.pt-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}

.pt-tcard {
  padding: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.pt-tcard.pt-visible { opacity: 1; transform: translateY(0); }
.pt-tcard:nth-child(1) { transition-delay: 0.1s; }
.pt-tcard:nth-child(2) { transition-delay: 0.22s; }
.pt-tcard:nth-child(3) { transition-delay: 0.34s; }

.pt-stars {
  color: #f4a623;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.pt-quote {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(30,24,18,0.72);
  margin-bottom: 20px;
}

.pt-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pt-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e0dbd5;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pt-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pt-author-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1714;
}

.pt-author-role {
  font-size: 11px;
  font-weight: 300;
  color: rgba(30,24,18,0.45);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

@media (max-width: 900px) {
  .pt-mosaic { grid-template-columns: 1fr 1.4fr 1fr; gap: 0 10px; }
  .pt-testimonials { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .pt-section { padding: 50px 20px 60px; }

  .pt-mosaic { grid-template-columns: 1fr; min-height: auto; }
  .pt-main-heading { font-size: 26px; }
  .pt-testimonials { grid-template-columns: 1fr; }
}
/* ════════════════════════════
   TRIPTYCH CARD MODAL
════════════════════════════ */

/* Stage — dark blurred backdrop */
.cs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(14,12,10,0);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.55s ease;
  gap: 24px;
  padding-bottom: 80px;
  box-sizing: border-box;
}
.cs-overlay.cs-open {
  display: flex;
  background: rgba(14,12,10,0.88);
}

/* Triptych row */
.cs-triptych {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  flex-shrink: 0;
}

/* ── Individual card ── */
.cs-page {
  background: #f5f3f0;
  flex: 0 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  cursor: pointer;
  position: relative;
  will-change: transform, opacity;
  transition: box-shadow 0.3s ease;
}

/* Center card — wider */
.cs-page-center {
  width: clamp(300px, 36vw, 500px);
  z-index: 3;
  transform: translateY(110%) rotateX(10deg);
  opacity: 0;
  transform-origin: bottom center;
  transition: transform 0.85s cubic-bezier(0.22,1,0.36,1),
              opacity   0.5s ease;
}

/* Side cards — narrower */
.cs-page-left,
.cs-page-right {
  width: clamp(220px, 26vw, 340px);
  z-index: 2;
  opacity: 0;
}
.cs-page-left {
  transform: translateX(-130%) translateY(30px) rotateY(14deg);
  transform-origin: right center;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.07s,
              opacity   0.5s ease 0.07s;
}
.cs-page-right {
  transform: translateX(130%) translateY(30px) rotateY(-14deg);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.07s,
              opacity   0.5s ease 0.07s;
}

/* Open */
.cs-overlay.cs-open .cs-page-center {
  transform: translateY(0) rotateX(0deg);
  opacity: 1;
}
.cs-overlay.cs-open .cs-page-left {
  transform: translateX(0) translateY(0) rotateY(0deg);
  opacity: 1;
}
.cs-overlay.cs-open .cs-page-right {
  transform: translateX(0) translateY(0) rotateY(0deg);
  opacity: 1;
}

/* Hover lift */
.cs-overlay.cs-open .cs-page:hover {
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  z-index: 10;
}
.cs-overlay.cs-open .cs-page-center:hover { transform: translateY(-8px) scale(1.012); }
.cs-overlay.cs-open .cs-page-left:hover   { transform: translateX(3px) translateY(-8px) scale(1.012); }
.cs-overlay.cs-open .cs-page-right:hover  { transform: translateX(-3px) translateY(-8px) scale(1.012); }

/* ── Card photo ── */
.cs-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  background: #ddd8d0;
}
.cs-page:hover .cs-card-photo { transform: scale(1.06); }

/* ── Card body ── */
.cs-card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-card-logo {
  height: 28px;
  max-width: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 2px;
}

.cs-card-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(30,24,18,0.38); margin: 0;
}

.cs-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 500; color: #1a1714;
  line-height: 1.2; margin: 0;
}

.cs-card-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px; font-weight: 300;
  line-height: 1.75; color: rgba(30,24,18,0.65);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.cs-card-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 400;
  color: rgba(30,24,18,0.6);
  background: #fff;
  border: 1px solid rgba(30,24,18,0.14);
  border-radius: 30px; padding: 4px 14px;
}

/* "View Project" link on side cards */
.cs-card-link {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1714; text-decoration: none;
  cursor: pointer;
}
.cs-card-link span { font-size: 16px; transition: transform 0.2s ease; }
.cs-page:hover .cs-card-link span { transform: translateX(4px); }

/* ── Close X — top right corner ── */
.cs-close {
  position: fixed;
  top: 20px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer; font-size: 16px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 9100;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s ease 0.75s, transform 0.3s ease 0.75s, background 0.2s;
}
.cs-overlay.cs-open .cs-close { opacity: 1; transform: scale(1); }
.cs-close:hover { background: rgba(255,255,255,0.22); }

/* ── Dot nav ── */
.cs-dots {
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
  z-index: 9100;
  opacity: 0;
  transition: opacity 0.3s ease 0.8s;
}
.cs-overlay.cs-open .cs-dots { opacity: 1; }
.cs-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.cs-dot.cs-dot-active {
  background: #fff;
  transform: scale(1.3);
}

/* ── "View Full Project" bar ── */
.cs-view-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9100;
  opacity: 0;
  transition: opacity 0.3s ease 0.85s;
}
.cs-overlay.cs-open .cs-view-bar { opacity: 1; }
.cs-view-btn {
  display: flex; align-items: center; gap: 14px;
  background: rgba(22,18,14,0.92);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 14px 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
}
.cs-view-btn:hover {
  background: rgba(201,169,110,0.18);
  border-color: rgba(201,169,110,0.5);
}
.cs-view-btn-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.cs-view-btn:hover .cs-view-btn-arrow { transform: translateX(4px); }

/* ── Spotlight ── */
.cs-spotlight {
  position: absolute;
  width: 1000px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(201,169,110,0.1) 0%, transparent 65%);
  pointer-events: none; top: -100px;
  opacity: 0; transition: opacity 0.8s ease 0.3s;
}
.cs-overlay.cs-open .cs-spotlight { opacity: 1; }

/* ── Closing ── */
.cs-overlay.cs-closing .cs-page-center {
  transform: translateY(90%) scale(0.93) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(0.4,0,1,1) !important, opacity 0.28s ease !important;
}
.cs-overlay.cs-closing .cs-page-left {
  transform: translateX(-110%) translateY(20px) !important;
  opacity: 0 !important;
  transition: transform 0.36s cubic-bezier(0.4,0,1,1) !important, opacity 0.26s ease !important;
}
.cs-overlay.cs-closing .cs-page-right {
  transform: translateX(110%) translateY(20px) !important;
  opacity: 0 !important;
  transition: transform 0.36s cubic-bezier(0.4,0,1,1) !important, opacity 0.26s ease !important;
}
.cs-overlay.cs-closing {
  background: rgba(14,12,10,0) !important;
  transition: background 0.42s ease !important;
}

/* ════════════════════════════
   EXPANDED VIEW (full screen card)
════════════════════════════ */
.cs-expand-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(4,3,2,0);
  align-items: center;
  justify-content: center;
  padding: 32px 24px 32px;
  transition: background 0.4s ease;
  overflow-y: auto;
  box-sizing: border-box;
}
.cs-expand-overlay.cs-expand-open {
  display: flex;
  background: rgba(4,3,2,0.96);
}

.cs-expand-sheet {
  background: #f5f3f0;
  width: min(760px, 92vw);
  border-radius: 20px;
  box-shadow: 0 50px 120px rgba(0,0,0,0.65),
              0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transform: scale(0.84) translateY(36px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
              opacity   0.38s ease;
  will-change: transform, opacity;
}
.cs-expand-overlay.cs-expand-open .cs-expand-sheet {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.cs-expand-close {
  position: fixed;
  top: 20px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.22);
  cursor: pointer; font-size: 16px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 9600;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s, background 0.2s;
}
.cs-expand-overlay.cs-expand-open .cs-expand-close { opacity: 1; transform: scale(1); }
.cs-expand-close:hover { background: rgba(255,255,255,0.2); }

.cs-expand-inner { display: flex; flex-direction: column; }

/* Big photo */
.cs-expand-photo {
  width: 100%;
  height: clamp(260px, 38vw, 420px);
  object-fit: cover;
  display: block;
  border-radius: 20px 20px 0 0;
}

/* Body */
.cs-expand-body {
  padding: 36px 44px 44px;
  display: flex; flex-direction: column; gap: 16px;
}

.cs-expand-logo {
  height: 36px; max-width: 150px;
  object-fit: contain; display: block;
}

.cs-expand-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(30,24,18,0.36); margin: 0;
}

.cs-expand-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.8vw, 46px);
  font-weight: 500; color: #1a1714; line-height: 1.15; margin: 0;
}

.cs-expand-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 300;
  line-height: 1.85; color: rgba(30,24,18,0.68); margin: 0;
}

.cs-expand-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-expand-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  color: rgba(30,24,18,0.6); background: #fff;
  border: 1px solid rgba(30,24,18,0.14);
  border-radius: 30px; padding: 6px 18px;
}

/* Closing */
.cs-expand-overlay.cs-expand-closing .cs-expand-sheet {
  transform: scale(0.88) translateY(28px) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.4,0,1,1) !important,
              opacity   0.22s ease !important;
}
.cs-expand-overlay.cs-expand-closing {
  background: rgba(4,3,2,0) !important;
  transition: background 0.32s ease !important;
}


/* Spotlight */
.cs-spotlight {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(201,169,110,0.14) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}
.cs-overlay.cs-open .cs-spotlight { opacity: 1; }

/* ── Credit banner ── */
.cs-credit-banner {
  width: 100%;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
}
.cs-overlay.cs-open .cs-credit-banner {
  opacity: 1;
  transform: translateY(0);
}

.cs-credit-name {
  display: inline;
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  color: rgba(255,255,255,0.92);
}
.cs-overlay.cs-open .cs-credit-name {
  animation: csNameShimmer 1.4s ease-in-out 1.3s 1 forwards;
}
@keyframes csNameShimmer {
  0%   {
    -webkit-text-fill-color: rgba(255,255,255,0.92);
  }
  40%  {
    -webkit-text-fill-color: rgba(255,255,255,0.92);
    text-shadow: 0 0 12px rgba(255,210,120,0.0);
  }
  55%  {
    -webkit-text-fill-color: #fff;
    text-shadow:
      0 0 8px  rgba(255,220,140,1),
      0 0 20px rgba(255,200,100,0.7),
      0 0 40px rgba(255,180,60,0.4);
  }
  100% {
    -webkit-text-fill-color: rgba(255,255,255,0.92);
    text-shadow: none;
  }
}

/* ── Coming Soon ribbon ── */
/* Only logo tiles need visible overflow for the ribbon */
.pt-photo { position: relative; overflow: visible !important; }

/* Card pages must clip their photo correctly */
.cs-page { overflow: hidden; }

/* Photo wrapper clips the image within rounded corners */
.cs-card-photo-wrap {
  width: 100%;
  height: clamp(160px, 22vw, 280px);
  min-height: clamp(160px, 22vw, 280px);
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #ddd8d0;
  flex-shrink: 0;
}

.cs-ribbon {
  position: absolute;
  top: 14px;
  right: -28px;
  width: 110px;
  background: #cc1111;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
  transform: rotate(35deg);
  box-shadow: 0 2px 10px rgba(160,0,0,0.45);
  pointer-events: none;
  z-index: 10;
  clip-path: none;
}
.cs-ribbon::before,
.cs-ribbon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  background: #a80e0e;
}
.cs-ribbon::before { left: 0; }
.cs-ribbon::after  { right: 0; }

/* ════════════════════════════════════════
   TECHNICAL SKILLS SECTION
════════════════════════════════════════ */
.kp-section {
  position: relative; width: 100%;
  padding: 0; font-family: 'DM Sans', sans-serif;
  margin-top: -60px;
  z-index: 50;
  background: transparent;
}
.kp-bg-base {
  position: absolute; inset: 0; z-index: 0;
  background: transparent;
}

/* Top transparent — blend is handled by the gradient on kp-section itself */
.kp-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}
.kp-bg-left { display:none; }
.kp-bg-right { display:none; }
.kp-hex-grid { display:none; }
.kp-scanlines { display: none; }
.kp-light-streak { display:none; }
.kp-streak-1 { width:60%;bottom:28%;left:-10%;background:linear-gradient(90deg,transparent,rgba(255,140,40,0.8),rgba(255,80,20,0.4),transparent);transform:rotate(-8deg);animation:kpStreak 4s ease-in-out infinite alternate; }
.kp-streak-2 { width:50%;bottom:22%;left:5%;background:linear-gradient(90deg,transparent,rgba(255,160,60,0.5),transparent);transform:rotate(-6deg);animation:kpStreak 5s ease-in-out 1s infinite alternate; }
.kp-streak-3 { width:40%;bottom:18%;right:0%;background:linear-gradient(90deg,transparent,rgba(80,140,255,0.4),transparent);transform:rotate(-4deg);animation:kpStreak 6s ease-in-out 2s infinite alternate; }
@keyframes kpStreak { from{opacity:0.6;transform:rotate(-8deg) scaleX(0.9);} to{opacity:1;transform:rotate(-8deg) scaleX(1.05);} }

.kp-nav { position:relative;z-index:10;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:20px 40px 0; }
.kp-nav-link { font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.75);text-decoration:none;transition:color 0.2s; }
.kp-nav-link:hover { color:#fff; }
.kp-nav-div { color:rgba(255,255,255,0.25);font-size:11px; }

..kp-inner { position:relative;z-index:100;max-width:960px;width:100%;margin:0 auto;padding:80px 40px 80px;display:flex;flex-direction:column;align-items:center;gap:20px;background:none;border:none;box-shadow:none; }

/* Header */
.kp-header { text-align:center; border:none; box-shadow:none; outline:none; padding:0;width:100%; }
.kp-name { font-family:'Cormorant Garamond',serif;font-size:clamp(38px,6.5vw,84px);font-weight:700;letter-spacing:0.06em;color:#fff;margin:0;text-shadow:0 0 40px rgba(255,255,255,0.15);font-style:italic;white-space:nowrap; }
.kp-name-accent { background:linear-gradient(90deg,#e8c87a,#fff,#e8c87a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.kp-role { font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin:6px 0 20px; }
.kp-tagline { font-family:'DM Sans',sans-serif;font-size:clamp(24px,4.5vw,52px);font-weight:900;letter-spacing:0.05em;text-transform:uppercase;margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,0.5); }
.kp-tag-white { color:#fff; }
.kp-tag-blue  { color:#5ba3ff; }
.kp-sub { font-size:14px;color:rgba(255,255,255,0.65);margin:0; }
.kp-sub strong { color:rgba(255,255,255,0.9); }
.kp-sub em { color:#5ba3ff;font-style:normal; }
.kp-sub-bottom { margin-top:0;color:rgba(255,255,255,0.6);font-size:15px; }

/* Stat bar */
.kp-stat-bar { display:flex;align-items:center;justify-content:space-evenly;flex-wrap:nowrap;gap:0;width:100vw;position:relative;left:50%;transform:translateX(-50%);background:rgba(8,10,28,0.45);border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);border-left:none;border-right:none;border-radius:0;box-shadow:none;padding:22px 60px;margin:12px 0 16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-sizing:border-box; }
.kp-stat-pill { display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 28px; }
.kp-stat-num { font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,46px);font-weight:700;font-style:italic;line-height:1;background:linear-gradient(135deg,#e86020,#5ba3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 6px rgba(0,0,0,0.9)); }
.kp-stat-label { font-size:9.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#fff;text-align:center;max-width:120px;text-shadow:0 1px 6px rgba(0,0,0,0.95); }
.kp-stat-sep { width:1px;height:48px;background:rgba(255,255,255,0.12);flex-shrink:0; }
@media(max-width:600px){.kp-stat-bar{gap:16px;}.kp-stat-sep{display:none;}.kp-stat-pill{padding:0 12px;}}

/* Badges */
.kp-badges { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.kp-badge { font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;border-radius:4px;padding:10px 18px;line-height:1.3;display:flex;align-items:center;gap:6px; }
.kp-badge-orange { background:linear-gradient(135deg,#c94a10,#e86020);color:#fff;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);padding-right:22px; }
.kp-badge-num { font-size:26px;font-weight:900;line-height:1; }
.kp-badge-label { font-size:11px; }
.kp-badge-dark { background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff; }
.kp-badge-blue { background:linear-gradient(135deg,#1a3a8a,#2a5ac4);color:#fff;clip-path:polygon(10% 0,100% 0,100% 100%,10% 100%,0 50%);padding-left:22px; }
.kp-skills-title { margin-left:auto;font-size:14px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.8); }

/* Main grid: skills left | popup right */
.kp-main { display:grid;grid-template-columns:1fr;gap:0; }

/* Left skills list */
.kp-skills-left { display:flex;flex-direction:column;gap:10px;padding-right:0; }
.kp-sl-group-label { font-size:12px;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.45);padding:10px 0 12px 6px; }
.kp-sl-item { display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);transition:background 0.2s,border-color 0.25s; }
.kp-sl-item:hover { background:transparent; }

.kp-sl-icon { width:54px;height:54px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900; }
.kp-icon-html     { background:#e34c26;color:#fff;font-family:monospace; }
.kp-icon-data     { background:linear-gradient(135deg,#6c3483,#9b59b6);color:#fff; }
.kp-icon-search   { background:linear-gradient(135deg,#1a5276,#2e86c1);color:#fff; }
.kp-icon-platform { background:linear-gradient(135deg,#1e8449,#27ae60);color:#fff; }
.kp-sl-text { flex:1;min-width:0; }
.kp-sl-name { font-size:17px;font-weight:700;color:#fff;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kp-sl-sub  { font-size:13px;color:rgba(255,255,255,0.5);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kp-sl-arrow { font-size:18px;color:rgba(255,255,255,0.2);transition:color 0.2s,transform 0.2s;flex-shrink:0; }
.kp-sl-item:hover .kp-sl-arrow,.kp-sl-item.active .kp-sl-arrow { color:#e86020;transform:translateX(3px); }

/* Right: connector + popup */
.kp-skills-right { position:relative;display:flex;align-items:center;align-self:stretch; }
.kp-connector-svg { position:absolute;left:0;top:0;width:80px;height:100%;pointer-events:none;z-index:2;overflow:visible; }
.kp-popup-wrap { position:absolute;left:72px;right:0;top:50%;transform:translateY(-50%) translateX(10px);display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;z-index:3; }
.kp-popup-wrap.kp-visible { opacity:1;transform:translateY(-50%) translateX(0); }
.kp-popup-box { background:rgba(8,14,24,0.95);border:1px solid rgba(91,163,255,0.35);border-radius:14px;padding:20px 20px 18px;backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(91,163,255,0.12);position:relative; }
.kp-popup-tags-box { background:rgba(8,14,24,0.92);border:1px solid rgba(232,96,32,0.35);border-radius:14px;padding:16px 18px;backdrop-filter:blur(12px);box-shadow:0 0 24px rgba(232,96,32,0.1);position:relative; }
.kp-tags-label { font-size:9px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(232,96,32,0.7);margin-bottom:10px; }
.kp-popup-corner { position:absolute;width:10px;height:10px;border-color:#5ba3ff;border-style:solid; }
.kp-popup-tags-box .kp-popup-corner { border-color:#e86020; }
.kp-corner-tl { top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:3px 0 0 0; }
.kp-corner-tr { top:-1px;right:-1px;border-width:2px 2px 0 0;border-radius:0 3px 0 0; }
.kp-corner-bl { bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-radius:0 0 0 3px; }
.kp-corner-br { bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 3px 0; }
.kp-popup-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.kp-popup-icon { width:32px;height:32px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#e86020,#5ba3ff);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff; }
.kp-popup-title { font-size:14px;font-weight:700;color:#fff;letter-spacing:0.06em; }
.kp-popup-tags { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.kp-popup-tag { font-size:9.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(91,163,255,0.12);border:1px solid rgba(91,163,255,0.25);color:#5ba3ff; }
.kp-popup-desc { font-size:12px;line-height:1.7;color:rgba(255,255,255,0.55);margin:0; }
@keyframes kpPathDraw      { to { stroke-dashoffset:0; } }
@keyframes kpPathDrawSlow  { to { stroke-dashoffset:0; } }
@keyframes kpPathDrawFast  { to { stroke-dashoffset:0; } }
/* Electric pulse: brightness ripples along the line after draw */
@keyframes kpElecPulse {
  0%   { stroke-opacity:0.5; stroke-width:8; }
  30%  { stroke-opacity:0.85; stroke-width:11; }
  55%  { stroke-opacity:0.4; stroke-width:7; }
  75%  { stroke-opacity:0.75; stroke-width:10; }
  100% { stroke-opacity:0.55; stroke-width:8; }
}
@keyframes kpCorePulse {
  0%   { stroke-opacity:1; stroke-width:1.5; }
  40%  { stroke-opacity:1; stroke-width:2.5; }
  70%  { stroke-opacity:0.85; stroke-width:1.5; }
  100% { stroke-opacity:1; stroke-width:1.8; }
}
/* Spark dot travel: moves along the path via cx, handled in JS with SMIL */
@keyframes kpSparkFade {
  0%   { opacity:0; r:2; }
  15%  { opacity:1; r:4; }
  80%  { opacity:0.9; r:3.5; }
  100% { opacity:0; r:2; }
}
.kp-path-animate       { animation:kpPathDraw 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-animate-slow  { animation:kpPathDrawSlow 0.55s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-animate-fast  { animation:kpPathDrawFast 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-pulse-halo    { animation:kpElecPulse 1.8s ease-in-out infinite; }
.kp-path-pulse-core    { animation:kpCorePulse 1.4s ease-in-out infinite; }


/* Impact section */
.kp-impact { display:flex;flex-direction:column;gap:18px; }
.kp-impact-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.kp-impact-item { display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px 16px; }
.kp-impact-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;background:linear-gradient(135deg,#e86020,#5ba3ff);box-shadow:0 0 8px rgba(232,96,32,0.6); }
.kp-impact-item p { font-size:12px;line-height:1.65;color:rgba(255,255,255,0.62);margin:0; }
.kp-impact-item p strong { color:rgba(255,255,255,0.9); }

/* CTA */
.kp-cta { text-align:center;display:flex;flex-direction:column;gap:16px; }
.kp-cta-divider { display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.8); }
.kp-cta-divider::before,.kp-cta-divider::after { content:'';flex:1;height:1px;background:rgba(255,255,255,0.2); }
.kp-cta-divider span { font-size:14px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;white-space:nowrap; }
.kp-cta-sub { font-size:13px;color:rgba(255,255,255,0.45);margin:0; }
.kp-cta-btns { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }
.kp-btn { font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;padding:14px 36px;border-radius:4px;transition:opacity 0.2s,transform 0.2s;display:inline-block; }
.kp-btn:hover { opacity:0.85;transform:translateY(-2px); }
.kp-btn-blue { background:linear-gradient(135deg,#1a3a8a,#2a5ac4);color:#fff; }
.kp-btn-red  { background:linear-gradient(135deg,#c0392b,#e74c3c);color:#fff; }
.kp-socials { display:flex;gap:12px;justify-content:center; }
.kp-social { width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background 0.2s; }
.kp-social:hover { background:rgba(91,163,255,0.3); }

@media(max-width:680px){
  .kp-main { grid-template-columns:1fr; }
  .kp-skills-right { display:none; }
  .kp-inner { padding:24px 20px 48px; }
  .kp-skills-title { display:none; }
}

/* ════════════════════════════════════════
   CARD STAGE LIGHTING — floor-powered
════════════════════════════════════════ */

.pt-card-wrap {
  position: relative;
  flex: 1;
  min-width: 162px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

/* LAYER 1 — rear halo: faint warmth only at very bottom of card back */
.pt-card-wrap::before {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 45%;
  background: radial-gradient(
    ellipse 90% 100% at 50% 95%,
    rgba(222,178,52,0.22) 0%,
    rgba(200,155,35,0.08) 50%,
    transparent 72%
  );
  filter: blur(16px);
  z-index: 0;
  pointer-events: none;
}

/* LAYER 2 — base uplight: bright, just outside the card bottom edge */
.pt-card-wrap::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 5%; right: 5%;
  height: 32px;
  background: radial-gradient(
    ellipse 88% 100% at 50% 0%,
    rgba(255,238,145,0.82) 0%,
    rgba(248,212,82,0.46) 35%,
    rgba(225,178,48,0.16) 68%,
    transparent 85%
  );
  filter: blur(5px);
  z-index: 3;
  pointer-events: none;
}

/* Card photo sits above all light */
.pt-card-wrap .pt-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: unset;
  min-width: unset;
  max-width: unset;
}

/* LAYER 3 — icy showroom floor reflection */
.pt-card-floor {
  position: absolute;
  bottom: -48px;
  left: 5%; right: 5%;
  height: 44px;
  /* cool blue-silver reflection fading into floor */
  background: linear-gradient(
    to bottom,
    rgba(200,215,245,0.28) 0%,
    rgba(180,200,240,0.14) 40%,
    rgba(160,185,230,0.05) 70%,
    transparent 100%
  );
  filter: blur(6px);
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%);
}

/* LAYER 4 — contact shadow: dark line at card base anchors reflection */
.pt-card-shadow {
  position: absolute;
  bottom: -3px;
  left: 10%; right: 10%;
  height: 8px;
  background: radial-gradient(
    ellipse 88% 100% at 50% 0%,
    rgba(30,15,0,0.28) 0%,
    rgba(15,8,0,0.12) 55%,
    transparent 80%
  );
  filter: blur(3px);
  pointer-events: none;
  z-index: 2;
}

/* LAYER 5 — shared floor: the main event.
   One long elegant reflective shelf under the whole row.
   Three-part structure: primary beam + secondary haze + deep fade */
.pt-shelf-glow {
  position: absolute;
  bottom: -28px;
  left: -25%; right: -25%;
  height: 1px;          /* zero height — light is in pseudo-elements */
  pointer-events: none;
  z-index: 0;
}

/* Primary reflective beam — thin bright horizontal line */
.pt-shelf-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%; right: 5%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(220,185,65,0.20) 8%,
    rgba(240,205,80,0.55) 20%,
    rgba(255,228,110,0.80) 35%,
    rgba(255,240,150,0.95) 50%,
    rgba(255,228,110,0.80) 65%,
    rgba(240,205,80,0.55) 80%,
    rgba(220,185,65,0.20) 92%,
    transparent 100%
  );
  filter: blur(2px);
  border-radius: 50%;
}

/* Secondary haze — soft glow spreading below the beam */
.pt-shelf-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 60px;
  background:
    radial-gradient(ellipse 30% 100% at 14% 0%,  rgba(240,200,65,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 38% 0%,  rgba(245,210,75,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 62% 0%,  rgba(245,210,75,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 86% 0%,  rgba(240,200,65,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 0%,   rgba(235,192,58,0.22) 0%, rgba(210,165,38,0.06) 55%, transparent 80%);
  filter: blur(10px);
  pointer-events: none;
}



/* Layer C: glossy reflective streak — thinner, brighter, hugs card bases */
.pt-three-row .pt-card-wrap::after {
  /* override the base glow with a stronger version */
  bottom: -10px;
  left: 8%; right: 8%;
  height: 22px;
  background: radial-gradient(
    ellipse 88% 100% at 50% 0%,
    rgba(255,240,150,0.70) 0%,
    rgba(245,210,80,0.32) 38%,
    rgba(220,180,48,0.08) 70%,
    transparent 88%
  );
  filter: blur(5px);
}

/* Layer D removed — reflection handled above */

/* ── Cinematic horizon flare under card row ── */
.pt-horizon-flare {
  position: absolute;
  bottom: -28px;
  left: 0; right: 0;
  height: 32px;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

/* Central white-hot beam */
.pt-horizon-flare::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(
    to right,
    transparent            0%,
    rgba(180,200,255,0.08) 5%,
    rgba(220,230,255,0.18) 18%,
    rgba(255,252,240,0.45) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,252,240,0.45) 65%,
    rgba(220,230,255,0.18) 82%,
    rgba(180,200,255,0.08) 95%,
    transparent           100%
  );
  filter: blur(1px);
  border-radius: 50%;
}

/* Wide atmospheric bloom spreading up and down from beam */
.pt-horizon-flare::after {
  content: '';
  position: absolute;
  top: 50%; left: -5%; right: -5%;
  height: 60px;
  transform: translateY(-50%);
  background:
    /* bright center core */
    radial-gradient(ellipse 25% 100% at 50% 50%,
      rgba(255,248,220,0.22) 0%,
      rgba(220,230,255,0.08) 45%,
      transparent 72%
    ),
    /* left satellite flare */
    radial-gradient(ellipse 10% 80% at 22% 50%,
      rgba(255,240,200,0.15) 0%,
      transparent 68%
    ),
    /* right satellite flare */
    radial-gradient(ellipse 10% 80% at 78% 50%,
      rgba(255,240,200,0.15) 0%,
      transparent 68%
    ),
    /* full-width haze band */
    radial-gradient(ellipse 100% 60% at 50% 50%,
      rgba(200,215,255,0.06) 0%,
      transparent 70%
    );
  filter: blur(5px);
}

/* Pulsing animation — slow cinematic breathe */
@keyframes ptFlareBreath {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.40; }
}
.pt-horizon-flare {
  animation: ptFlareBreath 4s ease-in-out infinite;
}

/* ── Logo floor reflections ── */
.pt-logo-reflection {
  position: absolute;
  bottom: -68px;
  left: 8%; right: 8%;
  height: 55px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  /* flip vertically to mirror the card */
  transform: scaleY(-1);
  /* fade out quickly — only top portion visible when flipped */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.18) 40%, transparent 80%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.18) 40%, transparent 80%);
}

.pt-logo-reflection img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* desaturate + darken slightly so it reads as a shadow/reflection */
  filter: blur(1.5px) saturate(0.5) brightness(0.75) opacity(0.55);
  display: block;
}
/* ════════════════════════════════════════
   TECHNICAL SKILLS SECTION
════════════════════════════════════════ */
.kp-section {
  position: relative; width: 100%; overflow: hidden;
  padding: 0; font-family: 'DM Sans', sans-serif;
  margin-top: -260px;
  z-index: 15;
  background: linear-gradient(
    to bottom,
    transparent       0%,
    transparent      18%,
    rgba(42,48,90,0.6)  28%,
    #252a50          40%,
    #1a1f3e          52%,
    #111428          65%,
    #080a14          80%,
    #0a0806         100%
  );
}
.kp-bg-base {
  position: absolute; inset: 0; z-index: 0;
  background: transparent;
}

/* Top transparent — blend is handled by the gradient on kp-section itself */
.kp-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
}
.kp-bg-left { display:none; }
.kp-bg-right { display:none; }
.kp-hex-grid { position:absolute;inset:0;z-index:2;opacity:0.12;background-image:linear-gradient(60deg,rgba(255,255,255,0.15) 1px,transparent 1px),linear-gradient(-60deg,rgba(255,255,255,0.15) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,0.1) 1px,transparent 1px);background-size:60px 104px,60px 104px,60px 52px; }
.kp-scanlines { display: none; }
.kp-light-streak { position:absolute;z-index:3;pointer-events:none;height:2px;border-radius:2px;filter:blur(3px); }
.kp-streak-1 { width:60%;bottom:28%;left:-10%;background:linear-gradient(90deg,transparent,rgba(255,140,40,0.8),rgba(255,80,20,0.4),transparent);transform:rotate(-8deg);animation:kpStreak 4s ease-in-out infinite alternate; }
.kp-streak-2 { width:50%;bottom:22%;left:5%;background:linear-gradient(90deg,transparent,rgba(255,160,60,0.5),transparent);transform:rotate(-6deg);animation:kpStreak 5s ease-in-out 1s infinite alternate; }
.kp-streak-3 { width:40%;bottom:18%;right:0%;background:linear-gradient(90deg,transparent,rgba(80,140,255,0.4),transparent);transform:rotate(-4deg);animation:kpStreak 6s ease-in-out 2s infinite alternate; }
@keyframes kpStreak { from{opacity:0.6;transform:rotate(-8deg) scaleX(0.9);} to{opacity:1;transform:rotate(-8deg) scaleX(1.05);} }

.kp-nav { position:relative;z-index:10;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:20px 40px 0; }
.kp-nav-link { font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.75);text-decoration:none;transition:color 0.2s; }
.kp-nav-link:hover { color:#fff; }
.kp-nav-div { color:rgba(255,255,255,0.25);font-size:11px; }

.kp-inner { position:relative;z-index:20;max-width:900px;margin:0 auto;padding:10px 40px 60px;display:flex;flex-direction:column;gap:28px; }

/* Header */
.kp-header { text-align:center; }
.kp-name { font-family:'Cormorant Garamond',serif;font-size:clamp(42px,8vw,90px);font-weight:700;letter-spacing:0.06em;color:#fff;margin:0;text-shadow:0 0 40px rgba(255,255,255,0.15);font-style:italic; }
.kp-name-accent { background:linear-gradient(90deg,#e8c87a,#fff,#e8c87a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.kp-role { font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin:6px 0 20px; }
.kp-tagline { font-family:'DM Sans',sans-serif;font-size:clamp(24px,4.5vw,52px);font-weight:900;letter-spacing:0.05em;text-transform:uppercase;margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,0.5); }
.kp-tag-white { color:#fff; }
.kp-tag-blue  { color:#5ba3ff; }
.kp-sub { font-size:14px;color:rgba(255,255,255,0.65);margin:0; }
.kp-sub strong { color:rgba(255,255,255,0.9); }
.kp-sub em { color:#5ba3ff;font-style:normal; }
.kp-sub-bottom { margin-top:0;color:rgba(255,255,255,0.45);font-size:13px; }

/* Stat bar */
.kp-stat-bar { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:20px 10px;margin:20px 0 16px; }
.kp-stat-pill { display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 28px; }
.kp-stat-num { font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,46px);font-weight:700;font-style:italic;line-height:1;background:linear-gradient(135deg,#e86020,#5ba3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.kp-stat-label { font-size:9.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);text-align:center;max-width:120px; }
.kp-stat-sep { width:1px;height:48px;background:rgba(255,255,255,0.12);flex-shrink:0; }
@media(max-width:600px){.kp-stat-bar{gap:16px;}.kp-stat-sep{display:none;}.kp-stat-pill{padding:0 12px;}}

/* Badges */
.kp-badges { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.kp-badge { font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;border-radius:4px;padding:8px 14px;line-height:1.3;display:flex;align-items:center;gap:4px; }
.kp-badge-orange { background:linear-gradient(135deg,#c94a10,#e86020);color:#fff;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);padding-right:22px; }
.kp-badge-num { font-size:22px;font-weight:900;line-height:1; }
.kp-badge-label { font-size:9px; }
.kp-badge-dark { background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff; }
.kp-badge-blue { background:linear-gradient(135deg,#1a3a8a,#2a5ac4);color:#fff;clip-path:polygon(10% 0,100% 0,100% 100%,10% 100%,0 50%);padding-left:22px; }
.kp-skills-title { margin-left:auto;font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.8); }

/* Main grid: skills left | popup right */
.kp-main { display:grid;grid-template-columns:1fr;gap:0; }

/* Left skills list */
.kp-skills-left { display:flex;flex-direction:column;gap:10px;padding-right:0; }
.kp-sl-group-label { font-size:12px;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.45);padding:10px 0 12px 6px; }
.kp-sl-item { display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);transition:background 0.2s,border-color 0.25s; }
.kp-sl-item:hover { background:transparent; }

.kp-sl-icon { width:54px;height:54px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900; }
.kp-icon-html     { background:#e34c26;color:#fff;font-family:monospace; }
.kp-icon-data     { background:linear-gradient(135deg,#6c3483,#9b59b6);color:#fff; }
.kp-icon-search   { background:linear-gradient(135deg,#1a5276,#2e86c1);color:#fff; }
.kp-icon-platform { background:linear-gradient(135deg,#1e8449,#27ae60);color:#fff; }
.kp-sl-text { flex:1;min-width:0; }
.kp-sl-name { font-size:17px;font-weight:700;color:#fff;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kp-sl-sub  { font-size:13px;color:rgba(255,255,255,0.5);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kp-sl-arrow { font-size:18px;color:rgba(255,255,255,0.2);transition:color 0.2s,transform 0.2s;flex-shrink:0; }
.kp-sl-item:hover .kp-sl-arrow,.kp-sl-item.active .kp-sl-arrow { color:#e86020;transform:translateX(3px); }

/* Right: connector + popup */
.kp-skills-right { position:relative;display:flex;align-items:center;align-self:stretch; }
.kp-connector-svg { position:absolute;left:0;top:0;width:80px;height:100%;pointer-events:none;z-index:2;overflow:visible; }
.kp-popup-wrap { position:absolute;left:72px;right:0;top:50%;transform:translateY(-50%) translateX(10px);display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;z-index:3; }
.kp-popup-wrap.kp-visible { opacity:1;transform:translateY(-50%) translateX(0); }
.kp-popup-box { background:rgba(8,14,24,0.95);border:1px solid rgba(91,163,255,0.35);border-radius:14px;padding:20px 20px 18px;backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(91,163,255,0.12);position:relative; }
.kp-popup-tags-box { background:rgba(8,14,24,0.92);border:1px solid rgba(232,96,32,0.35);border-radius:14px;padding:16px 18px;backdrop-filter:blur(12px);box-shadow:0 0 24px rgba(232,96,32,0.1);position:relative; }
.kp-tags-label { font-size:9px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(232,96,32,0.7);margin-bottom:10px; }
.kp-popup-corner { position:absolute;width:10px;height:10px;border-color:#5ba3ff;border-style:solid; }
.kp-popup-tags-box .kp-popup-corner { border-color:#e86020; }
.kp-corner-tl { top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:3px 0 0 0; }
.kp-corner-tr { top:-1px;right:-1px;border-width:2px 2px 0 0;border-radius:0 3px 0 0; }
.kp-corner-bl { bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-radius:0 0 0 3px; }
.kp-corner-br { bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 3px 0; }
.kp-popup-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.kp-popup-icon { width:32px;height:32px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#e86020,#5ba3ff);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff; }
.kp-popup-title { font-size:14px;font-weight:700;color:#fff;letter-spacing:0.06em; }
.kp-popup-tags { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.kp-popup-tag { font-size:9.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(91,163,255,0.12);border:1px solid rgba(91,163,255,0.25);color:#5ba3ff; }
.kp-popup-desc { font-size:12px;line-height:1.7;color:rgba(255,255,255,0.55);margin:0; }
@keyframes kpPathDraw      { to { stroke-dashoffset:0; } }
@keyframes kpPathDrawSlow  { to { stroke-dashoffset:0; } }
@keyframes kpPathDrawFast  { to { stroke-dashoffset:0; } }
/* Electric pulse: brightness ripples along the line after draw */
@keyframes kpElecPulse {
  0%   { stroke-opacity:0.5; stroke-width:8; }
  30%  { stroke-opacity:0.85; stroke-width:11; }
  55%  { stroke-opacity:0.4; stroke-width:7; }
  75%  { stroke-opacity:0.75; stroke-width:10; }
  100% { stroke-opacity:0.55; stroke-width:8; }
}
@keyframes kpCorePulse {
  0%   { stroke-opacity:1; stroke-width:1.5; }
  40%  { stroke-opacity:1; stroke-width:2.5; }
  70%  { stroke-opacity:0.85; stroke-width:1.5; }
  100% { stroke-opacity:1; stroke-width:1.8; }
}
/* Spark dot travel: moves along the path via cx, handled in JS with SMIL */
@keyframes kpSparkFade {
  0%   { opacity:0; r:2; }
  15%  { opacity:1; r:4; }
  80%  { opacity:0.9; r:3.5; }
  100% { opacity:0; r:2; }
}
.kp-path-animate       { animation:kpPathDraw 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-animate-slow  { animation:kpPathDrawSlow 0.55s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-animate-fast  { animation:kpPathDrawFast 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }
.kp-path-pulse-halo    { animation:kpElecPulse 1.8s ease-in-out infinite; }
.kp-path-pulse-core    { animation:kpCorePulse 1.4s ease-in-out infinite; }


/* Impact section */
.kp-impact { display:flex;flex-direction:column;gap:18px; }
.kp-impact-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.kp-impact-item { display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px 16px; }
.kp-impact-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;background:linear-gradient(135deg,#e86020,#5ba3ff);box-shadow:0 0 8px rgba(232,96,32,0.6); }
.kp-impact-item p { font-size:12px;line-height:1.65;color:rgba(255,255,255,0.62);margin:0; }
.kp-impact-item p strong { color:rgba(255,255,255,0.9); }

/* CTA */
.kp-cta { text-align:center;display:flex;flex-direction:column;gap:16px; }
.kp-cta-divider { display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.8); }
.kp-cta-divider::before,.kp-cta-divider::after { content:'';flex:1;height:1px;background:rgba(255,255,255,0.2); }
.kp-cta-divider span { font-size:14px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;white-space:nowrap; }
.kp-cta-sub { font-size:13px;color:rgba(255,255,255,0.45);margin:0; }
.kp-cta-btns { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }
.kp-btn { font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;padding:14px 36px;border-radius:4px;transition:opacity 0.2s,transform 0.2s;display:inline-block; }
.kp-btn:hover { opacity:0.85;transform:translateY(-2px); }
.kp-btn-blue { background:linear-gradient(135deg,#1a3a8a,#2a5ac4);color:#fff; }
.kp-btn-red  { background:linear-gradient(135deg,#c0392b,#e74c3c);color:#fff; }
.kp-socials { display:flex;gap:12px;justify-content:center; }
.kp-social { width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background 0.2s; }
.kp-social:hover { background:rgba(91,163,255,0.3); }

@media(max-width:680px){
  .kp-main { grid-template-columns:1fr; }
  .kp-skills-right { display:none; }
  .kp-inner { padding:24px 20px 48px; }
  .kp-skills-title { display:none; }
}

/* ---- extracted style block ---- */
/* MOBILE ONLY — trusted logos stack vertically and technical skills sits below */
@media (max-width: 620px) {
  .pt-heading-overlay {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pt-main-heading {
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.12 !important;
  }

  .pt-three-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-bottom: 28px !important;
  }

  .pt-three-row::before,
  .pt-three-row::after {
    left: 0 !important;
    right: 0 !important;
  }

  .pt-three-row .pt-card-wrap,
  .pt-three-row .pt-photo {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pt-three-row .pt-photo {
    height: 165px !important;
    min-height: 165px !important;
    padding: 20px 16px !important;
  }

  .kp-section {
    margin-top: 36px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .kp-inner {
    padding-top: 0 !important;
  }
}

/* ════════════════════════════
   FEATURED SOFTWARE PROJECTS
════════════════════════════ */
.sp-section {
  position: relative;
  overflow: hidden;
  padding: 88px 40px 96px;
  background:
    radial-gradient(ellipse 70% 70% at 82% 18%, rgba(201,150,63,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 46% 50% at 12% 90%, rgba(87,104,168,0.18) 0%, transparent 62%),
    linear-gradient(160deg, #0d0d0d 0%, #111735 46%, #0d1230 100%);
  color: #fff;
}
.sp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13,13,13,0.2) 18%, transparent 50%, rgba(13,18,48,0.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.sp-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 76%);
  opacity: 0.4;
  z-index: 0;
}
.sp-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}
.sp-kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(224,176,96,0.92);
  margin-bottom: 14px;
}
.sp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}
.sp-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0 0 14px;
  color: #fff;
}
.sp-subtitle {
  max-width: 660px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(215,205,188,0.68);
}
.sp-note {
  max-width: 230px;
  border: 1px solid rgba(201,150,63,0.28);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(215,205,188,0.58);
  text-align: right;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.sp-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,150,63,0.28);
  border-radius: 26px;
  padding: 30px;
  background: linear-gradient(150deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 100%);
  box-shadow: 0 20px 80px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sp-card::after {
  content: '';
  position: absolute;
  right: -20%;
  top: -30%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201,150,63,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.sp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(224,176,96,0.55);
  box-shadow: 0 26px 90px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
}
.sp-card-topline {
  position: relative;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(224,176,96,0.75);
  margin-bottom: 18px;
}
.sp-card h3 {
  position: relative;
  z-index: 1;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff;
}
.sp-card p {
  position: relative;
  z-index: 1;
  min-height: 88px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(215,205,188,0.68);
  margin-bottom: 20px;
}
.sp-tech {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.sp-tech span {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.045);
}
.sp-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 10px 16px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sp-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.36);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sp-btn-gold {
  border-color: rgba(201,150,63,0.62);
  color: rgba(245,214,150,0.95);
  background: rgba(201,150,63,0.09);
}
.sp-btn-gold:hover {
  border-color: rgba(245,214,150,0.86);
  background: rgba(201,150,63,0.18);
}
@media (max-width: 860px) {
  .sp-section { padding: 70px 22px 78px; }
  .sp-header { display: block; }
  .sp-note { text-align: left; max-width: 100%; margin-top: 18px; border-radius: 18px; }
  .sp-grid { grid-template-columns: 1fr; }
  .sp-card p { min-height: 0; }
}