/* =========================================================
   SUFYAN SHEIKH — PORTFOLIO DESIGN SYSTEM
   Deep black / charcoal base · neon green + white accents
   This stylesheet defines the visual language for the ENTIRE
   site. Reuse these variables/components on every future page.
   ========================================================= */

:root{
  /* ---- core palette ---- */
  --black:        #060607;
  --charcoal:     #101012;
  --charcoal-2:   #17181a;
  --charcoal-3:   #1f2022;
  --white:        #f5f6f5;
  --gray:         #a7abaa;
  --gray-dim:     #74797a;
  --neon:         #39ff8a;
  --neon-soft:    #39ff8a;
  --neon-dim:     #1f8a52;

  /* ---- rgba helpers ---- */
  --neon-rgb: 57,255,138;

  /* ---- type ---- */
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---- structure ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Site-wide safety net: the plain HTML `hidden` attribute is how JS shows
   and hides things everywhere on this site (the Admin Panel's dashboard,
   the lightbox's image/video swap, etc). Browsers hide [hidden] elements
   by default, but that default is a low-specificity rule — it's easy for
   an unrelated, more specific selector elsewhere (an ID, or a class+tag
   pair) to accidentally override it and make a "hidden" element show up
   anyway. This !important rule guarantees hidden always wins, everywhere,
   no matter what else targets that element. */
[hidden]{ display:none !important; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:0;
  line-height:1.15;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--neon); color:var(--black); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.accent{ color:var(--neon); }

/* =========================================================
   AMBIENT BACKGROUND — soft blurred drifting/pulsing blobs
   (no moving lines / no scanning bars, per spec)
   ========================================================= */
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  opacity:.55;
  will-change:transform,opacity;
}
.blob-1{
  width:620px; height:620px;
  top:-180px; left:-120px;
  background:radial-gradient(circle, rgba(var(--neon-rgb),.55), transparent 70%);
  animation:drift1 26s ease-in-out infinite;
}
.blob-2{
  width:520px; height:520px;
  top:20%; right:-160px;
  background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  animation:drift2 32s ease-in-out infinite;
}
.blob-3{
  width:680px; height:680px;
  bottom:-260px; left:10%;
  background:radial-gradient(circle, rgba(var(--neon-rgb),.35), transparent 70%);
  animation:drift3 30s ease-in-out infinite;
}
.blob-4{
  width:420px; height:420px;
  bottom:10%; right:8%;
  background:radial-gradient(circle, rgba(var(--neon-rgb),.22), transparent 70%);
  animation:drift4 24s ease-in-out infinite;
}
.noise-overlay{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@keyframes drift1{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.5; }
  50%{ transform:translate(60px,80px) scale(1.15); opacity:.7; }
}
@keyframes drift2{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.35; }
  50%{ transform:translate(-70px,50px) scale(1.1); opacity:.5; }
}
@keyframes drift3{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.4; }
  50%{ transform:translate(50px,-60px) scale(1.12); opacity:.6; }
}
@keyframes drift4{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.3; }
  50%{ transform:translate(-40px,-40px) scale(1.18); opacity:.5; }
}
@media (prefers-reduced-motion: reduce){
  .blob{ animation:none !important; }
}

main, header, footer{ position:relative; z-index:1; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  border-radius:100px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border:1.5px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--neon);
  color:#06110b;
  box-shadow:0 0 0 rgba(var(--neon-rgb),0), 0 8px 30px -8px rgba(var(--neon-rgb),.5);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px -6px rgba(var(--neon-rgb),.75);
}
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.18);
}
.btn-ghost:hover{
  border-color:var(--neon);
  color:var(--neon);
  transform:translateY(-3px);
}
.btn-outline{
  background:transparent;
  color:var(--neon);
  border-color:rgba(var(--neon-rgb),.5);
  padding:11px 24px;
  font-size:.88rem;
}
.btn-outline:hover{
  background:var(--neon);
  color:#06110b;
  border-color:var(--neon);
}
.btn-lg{ padding:18px 42px; font-size:1.02rem; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(6,6,7,0);
  backdrop-filter:blur(0px);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(6,6,7,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  padding-bottom:20px;
  gap:24px;
}
.logo{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.03em;
  flex-shrink:0;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:36px;
  margin-left:auto;
  margin-right:36px;
}
.main-nav a{
  position:relative;
  font-size:.92rem;
  font-weight:500;
  color:var(--gray);
  padding:6px 0;
  transition:color .3s var(--ease);
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--neon);
  transition:width .35s var(--ease);
}
.main-nav a:hover,
.main-nav a.active{ color:var(--white); }
.main-nav a.active::after,
.main-nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:transparent;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  margin:0 auto;
  background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .main-nav{
    position:fixed;
    top:76px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:rgba(8,8,9,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:8px 32px 20px;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .main-nav.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .main-nav a{ width:100%; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.05); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   SECTION SPACING / SHARED TITLES
   ========================================================= */
section{ padding:130px 0; position:relative; }
@media (max-width:700px){ section{ padding:90px 0; } }

.section-eyebrow{
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:14px;
}
.section-eyebrow.center{ text-align:center; }
.section-title{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight:700;
  color:var(--white);
  margin-bottom:60px;
}
.section-title.center{ text-align:center; }
.section-sub{
  color:var(--gray);
  max-width:56ch;
  margin:-32px auto 50px;
  font-size:1.02rem;
  line-height:1.65;
}
.section-sub.center{ text-align:center; }

/* ---- show reel (Home page intro video) ---- */
.showreel-frame{
  max-width:900px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(var(--neon-rgb),.22);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 70px -20px rgba(var(--neon-rgb),.2);
  background:var(--charcoal-2);
}
.showreel-frame iframe{
  width:100%; height:100%;
  display:block;
  border:0;
  background:#000;
}

/* self-hosted reel: native <video> under a cinematic play overlay */
.showreel-player{
  position:relative;
  width:100%; height:100%;
  background:#000;
}
.showreel-player video{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}
.showreel-player.is-playing video{ object-fit:contain; }

.showreel-play{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px;
  width:100%; height:100%;
  padding:0;
  border:0;
  cursor:pointer;
  color:var(--white);
  /* A vignette so the button stays legible over any cover image. It has to
     hold up over a bright one (the reel's own end card is yellow on purple),
     not just over dark footage — hence the weight at the centre. */
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.72) 100%);
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
/* Once playing, the overlay gets out of the way completely so the native
   controls underneath stay clickable. */
.showreel-player.is-playing .showreel-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.showreel-play-ring{
  display:grid; place-items:center;
  width:86px; height:86px;
  border-radius:50%;
  /* Near-solid dark fill rather than a neon tint: a translucent green ring
     disappears against a yellow cover. Dark + neon edge reads on anything. */
  background:rgba(8,9,10,.62);
  border:1.5px solid rgba(var(--neon-rgb),.8);
  box-shadow:0 0 0 0 rgba(var(--neon-rgb),.35), 0 18px 50px -18px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.showreel-play-ring svg{
  width:34px; height:34px;
  margin-left:5px; /* optically centre the triangle inside the circle */
  color:var(--neon);
}
.showreel-play-label{
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--white);
  opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8);
}
.showreel-play:hover .showreel-play-ring,
.showreel-play:focus-visible .showreel-play-ring{
  transform:scale(1.08);
  background:rgba(8,9,10,.78);
  border-color:var(--neon);
  box-shadow:0 0 0 14px rgba(var(--neon-rgb),.08), 0 18px 50px -18px rgba(0,0,0,.9);
}
.showreel-play:focus-visible{ outline:2px solid var(--neon); outline-offset:-4px; }

@media (max-width:700px){
  .showreel-frame{ border-radius:var(--radius-md); }
  .showreel-play-ring{ width:66px; height:66px; }
  .showreel-play-ring svg{ width:26px; height:26px; }
  .showreel-play-label{ font-size:.68rem; letter-spacing:.18em; }
}
@media (prefers-reduced-motion: reduce){
  .showreel-play, .showreel-play-ring{ transition:none; }
}

/* scroll reveal defaults (JS toggles .is-visible) */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}
/* stagger children within a revealed group */
.services-grid .service-card,
.work-grid .work-item,
.stats-grid .stat-card,
.portfolio-grid .project-card,
.timeline .timeline-item,
.skills-list .skill-row,
.pricing-grid .price-card,
.contact-grid > *{
  transition-delay:calc(var(--i, 0) * 90ms);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:160px;
  padding-bottom:80px;
}
.hero-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:64px;
}

.hero-photo-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-self:center;
}
.hero-photo-glow{
  position:absolute;
  width:110%; height:110%;
  top:-5%; left:-5%;
  background:radial-gradient(circle, rgba(var(--neon-rgb),.35), transparent 65%);
  filter:blur(50px);
  border-radius:50%;
  animation:pulseGlow 5s ease-in-out infinite;
  z-index:0;
}
@keyframes pulseGlow{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.06); }
}
.hero-photo-frame{
  position:relative;
  z-index:1;
  width:min(380px, 78vw);
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1.5px solid rgba(var(--neon-rgb),.45);
  box-shadow:
    0 0 0 6px rgba(var(--neon-rgb),.06),
    0 30px 70px -20px rgba(0,0,0,.7),
    0 0 60px -10px rgba(var(--neon-rgb),.35);
}
.hero-photo{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hero-photo-wipe{
  position:absolute;
  inset:0;
  background:var(--charcoal);
  z-index:2;
  transform-origin:left;
  animation:photoWipe 1.3s .3s var(--ease) forwards;
}
@keyframes photoWipe{
  0%{ transform:scaleX(1); }
  100%{ transform:scaleX(0); }
}
.hero-photo-tag{
  margin-top:22px;
  font-size:.8rem;
  color:var(--gray);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hero-photo-tag::before{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 10px 2px rgba(var(--neon-rgb),.7);
  animation:blinkDot 2s ease-in-out infinite;
}
@keyframes blinkDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.eyebrow{
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:18px;
}
.hero-name{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  font-weight:800;
  color:var(--white);
  margin-bottom:20px;
}
.hero-tagline{
  font-family:var(--font-head);
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  font-weight:500;
  color:var(--neon);
  margin-bottom:20px;
  max-width:36ch;
}
.hero-sub{
  color:var(--gray);
  font-size:1.02rem;
  max-width:52ch;
  margin-bottom:38px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

/* reveal-item: hero content staggered entrance on load */
.reveal-item{
  opacity:0;
  transform:translateY(24px);
  animation:heroIn .9s var(--ease) forwards;
}
.reveal-item:nth-child(1){ animation-delay:.15s; }
.reveal-item:nth-child(2){ animation-delay:.3s; }
.reveal-item:nth-child(3){ animation-delay:.45s; }
.reveal-item:nth-child(4){ animation-delay:.6s; }
.reveal-item:nth-child(5){ animation-delay:.75s; }
@keyframes heroIn{
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gray-dim);
  opacity:0;
  animation:heroIn .9s var(--ease) 1s forwards;
}
.scroll-cue span{
  width:1px; height:34px;
  background:linear-gradient(to bottom, var(--neon), transparent);
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%{ opacity:0; transform:scaleY(.4); transform-origin:top; }
  50%{ opacity:1; transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(.4); transform-origin:bottom; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:48px; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-tagline{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
}

/* =========================================================
   STATS
   ========================================================= */
.stats{ padding-top:60px; padding-bottom:60px; }
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.stat-card{
  text-align:center;
  padding:42px 20px;
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--charcoal), rgba(16,16,18,.4));
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.stat-card:hover{
  border-color:rgba(var(--neon-rgb),.4);
  transform:translateY(-6px);
}
.stat-number{
  font-family:var(--font-head);
  font-size:clamp(2.2rem, 4vw, 3rem);
  font-weight:800;
  color:var(--neon);
  text-shadow:0 0 30px rgba(var(--neon-rgb),.35);
  margin-bottom:10px;
}
.stat-label{
  color:var(--gray);
  font-size:.92rem;
  letter-spacing:.02em;
}
.stats-note{
  text-align:center;
  margin-top:36px;
  color:var(--gray-dim);
  font-size:.9rem;
}
@media (max-width:800px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.service-card{
  padding:38px 32px;
  border-radius:var(--radius-md);
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(var(--neon-rgb),.4);
  background:var(--charcoal-2);
}
.service-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  color:var(--neon);
  margin-bottom:22px;
  filter:drop-shadow(0 0 10px rgba(var(--neon-rgb),.35));
}
.service-icon svg{ width:32px; height:32px; }
.service-card h3{
  font-size:1.15rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:10px;
}
.service-card p{
  color:var(--gray);
  font-size:.92rem;
}
@media (max-width:900px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .services-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   FEATURED WORK
   ========================================================= */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-bottom:56px;
}
.work-item{
  position:relative;
  display:block;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:5/3.2;
  border:1px solid rgba(255,255,255,.08);
}
.work-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.work-overlay{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding:22px;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.work-overlay span{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--white);
  font-size:1.05rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.work-overlay span::after{
  content:'↗';
  color:var(--neon);
}
.work-item:hover img{
  transform:scale(1.08);
}
.work-item:hover .work-overlay{ opacity:1; }
.center-cta{ text-align:center; }

@media (max-width:900px){
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .work-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonial-slider{
  max-width:720px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.testimonial-track{
  display:flex;
  transition:transform .6s var(--ease);
}
.testimonial-card{
  flex:0 0 100%;
  padding:48px 44px;
  border-radius:var(--radius-lg);
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
}
.quote-mark{
  font-family:var(--font-head);
  font-size:3.4rem;
  color:var(--neon);
  line-height:1;
  margin-bottom:6px;
  opacity:.85;
}
.quote-text{
  font-size:1.15rem;
  color:var(--white);
  line-height:1.6;
  margin-bottom:26px;
}
.quote-author{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.author-name{ font-family:var(--font-head); font-weight:600; color:var(--white); }
.author-role{ font-size:.85rem; color:var(--gray-dim); }
.quote-stars{ color:var(--neon); letter-spacing:3px; font-size:.95rem; }

.testimonial-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:30px;
}
.t-arrow{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.t-arrow svg{ width:18px; height:18px; }
.t-arrow:hover{ border-color:var(--neon); color:var(--neon); }
.t-dots{ display:flex; gap:9px; }
.t-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.t-dot.active{ background:var(--neon); transform:scale(1.3); }

@media (max-width:600px){
  .testimonial-card{ padding:36px 24px; }
  /* Every card is as tall as the longest quote, because they sit in one
     flex row. The longest real review runs to about 80 words, which at the
     desktop size would fill a whole phone screen and leave the one-line
     reviews floating in empty space — so tighten the type on narrow
     screens rather than truncating anyone's words. */
  .quote-text{ font-size:1rem; line-height:1.55; margin-bottom:22px; }
  .quote-mark{ font-size:2.6rem; }
}

/* =========================================================
   BRANDS MARQUEE
   ========================================================= */
.brands{ padding-top:70px; padding-bottom:70px; }
.marquee-wrap{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex;
  gap:70px;
  width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-track span{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:.06em;
  color:var(--gray-dim);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.marquee-track span:hover{ color:var(--neon); }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   CLOSING CTA
   ========================================================= */
.cta-box{
  text-align:center;
  padding:80px 40px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--charcoal), var(--charcoal-2));
  border:1px solid rgba(var(--neon-rgb),.18);
  position:relative;
  overflow:hidden;
}
.cta-box::before{
  content:'';
  position:absolute;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(var(--neon-rgb),.25), transparent 70%);
  filter:blur(80px);
  top:-200px; left:50%;
  transform:translateX(-50%);
  animation:pulseGlow 6s ease-in-out infinite;
}
.cta-title{
  position:relative;
  font-size:clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight:700;
  color:var(--white);
  margin:18px 0 16px;
}
.cta-sub{
  position:relative;
  color:var(--gray);
  max-width:46ch;
  margin:0 auto 34px;
}
.cta-box .btn{ position:relative; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:70px;
}
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
}
.footer-brand p{
  color:var(--gray-dim);
  margin-top:14px;
  max-width:32ch;
  font-size:.92rem;
}
.footer-links h4,
.footer-social h4{
  font-family:var(--font-head);
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-dim);
  margin-bottom:18px;
}
.footer-links{ display:flex; flex-direction:column; }
.footer-links a{
  color:var(--gray);
  padding:6px 0;
  font-size:.94rem;
  transition:color .3s var(--ease);
  width:fit-content;
}
.footer-links a:hover{ color:var(--neon); }

.social-icons{ display:flex; gap:14px; }
.social-icon{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray);
  transition:all .3s var(--ease);
}
.social-icon svg{ width:19px; height:19px; }
.social-icon:hover{
  color:var(--black);
  background:var(--neon);
  border-color:var(--neon);
  transform:translateY(-4px);
  box-shadow:0 8px 22px -6px rgba(var(--neon-rgb),.6);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:24px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray-dim);
  font-size:.85rem;
}
@media (max-width:800px){
  .footer-inner{ grid-template-columns:1fr; text-align:left; }
}

/* =========================================================
   PORTFOLIO PAGE
   ========================================================= */

/* ---- page header ---- */
.page-header{
  padding-top:180px;
  padding-bottom:40px;
  text-align:center;
}
.page-title{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  font-weight:800;
  color:var(--white);
  margin-bottom:18px;
}
.page-sub{
  color:var(--gray);
  max-width:56ch;
  margin:0 auto;
  font-size:1.02rem;
}
.page-header .eyebrow{ text-align:center; }

/* ---- filter tabs ---- */
.portfolio-filter{ padding-top:40px; }
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-bottom:56px;
}
.filter-tab{
  padding:12px 24px;
  border-radius:100px;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.14);
  color:var(--gray);
  font-family:var(--font-head);
  font-weight:500;
  font-size:.9rem;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.filter-tab:hover{
  border-color:rgba(var(--neon-rgb),.5);
  color:var(--white);
  transform:translateY(-2px);
}
.filter-tab.active{
  background:var(--neon);
  border-color:var(--neon);
  color:#06110b;
  box-shadow:0 8px 26px -8px rgba(var(--neon-rgb),.55);
}

/* ---- project grid ---- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  padding-bottom:20px;
}
.project-card{
  display:block;
  width:100%;
  text-align:left;
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  overflow:hidden;
  padding:0;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease);
}
.project-card:hover{
  transform:translateY(-8px);
  border-color:rgba(var(--neon-rgb),.4);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.6), 0 0 40px -14px rgba(var(--neon-rgb),.3);
}
.project-card:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:3px;
}
/* filtering transition state, toggled by JS */
.project-card.filtering-out{
  opacity:0;
  transform:translateY(14px) scale(.97);
  pointer-events:none;
}

.project-thumb{
  display:block;
  position:relative;
  aspect-ratio:5/3.2;
  overflow:hidden;
}
.project-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.project-card:hover .project-thumb img{
  transform:scale(1.08);
}
.project-thumb::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.project-card:hover .project-thumb::after{ opacity:1; }

.project-info{
  display:block;
  padding:22px 24px 26px;
}
.project-tag{
  display:inline-block;
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:10px;
}
.project-title{
  display:block;
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:8px;
}
.project-desc{
  display:block;
  color:var(--gray);
  font-size:.9rem;
  line-height:1.55;
}
.portfolio-empty{
  text-align:center;
  color:var(--gray-dim);
  padding:40px 0 20px;
}

@media (max-width:960px){
  .portfolio-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .portfolio-grid{ grid-template-columns:1fr; }
  .page-header{ padding-top:150px; }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s linear 0s;
}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,5,.85);
  backdrop-filter:blur(14px);
}
.lightbox-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:920px;
  max-height:88vh;
  overflow-y:auto;
  background:var(--charcoal-2);
  border:1px solid rgba(var(--neon-rgb),.22);
  border-radius:var(--radius-lg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), 0 0 70px -20px rgba(var(--neon-rgb),.25);
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.lightbox.open .lightbox-content{
  transform:translateY(0) scale(1);
  opacity:1;
}
.lightbox-media{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.lightbox-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.lightbox-media iframe{
  width:100%; height:100%;
  display:block;
  border:0;
  background:#000;
}

/* play badge — shown on any thumbnail (featured work or portfolio project)
   that has a video attached, so visitors know it's playable */
.play-badge{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(6,6,7,.55);
  border:1.5px solid rgba(var(--neon-rgb),.6);
  display:flex; align-items:center; justify-content:center;
  color:var(--neon);
  z-index:2;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.play-badge svg{ width:20px; height:20px; margin-left:3px; }
.work-item:hover .play-badge,
.project-card:hover .play-badge{
  transform:translate(-50%,-50%) scale(1.12);
  background:rgba(6,6,7,.8);
}
@media (max-width:640px){
  .play-badge{ width:46px; height:46px; }
  .play-badge svg{ width:17px; height:17px; }
}
.lightbox-details{
  padding:30px 36px 36px;
}
.lightbox-details h3{
  font-family:var(--font-head);
  font-size:1.4rem;
  font-weight:700;
  color:var(--white);
  margin:8px 0 12px;
}
.lightbox-details p{
  color:var(--gray);
  font-size:.98rem;
  line-height:1.65;
  max-width:60ch;
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(6,6,7,.6);
  backdrop-filter:blur(8px);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.lightbox-close svg,
.lightbox-nav svg{ width:18px; height:18px; }
.lightbox-close:hover{
  border-color:var(--neon);
  color:var(--neon);
}
.lightbox-nav:hover{
  border-color:var(--neon);
  color:var(--neon);
  transform:translateY(-50%) scale(1.08);
}
.lightbox-close{ top:16px; right:16px; }
.lightbox-prev,
.lightbox-next{
  top:50%;
  transform:translateY(-50%);
}
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }

@media (max-width:640px){
  .lightbox{ padding:14px; }
  .lightbox-details{ padding:22px 20px 28px; }
  .lightbox-close,
  .lightbox-nav{ width:38px; height:38px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* ---- narrative / story ---- */
.narrative{ padding-top:20px; }
.narrative-grid{
  max-width:720px;
  margin:0 auto;
}
.narrative-text p{
  color:var(--gray);
  font-size:1.05rem;
  line-height:1.85;
  margin-bottom:24px;
}
.narrative-text p:first-of-type{
  color:var(--white);
  font-size:1.15rem;
}
.pull-quote{
  position:relative;
  margin:44px 0;
  padding:8px 0 8px 32px;
  border-left:2px solid var(--neon);
}
.pull-quote p{
  font-family:var(--font-head);
  font-size:1.35rem;
  font-weight:500;
  font-style:italic;
  color:var(--white);
  line-height:1.5;
  margin:0;
}
.narrative-signoff{
  margin-top:40px;
  color:var(--gray);
  font-size:1.05rem;
  line-height:1.85;
}

/* ---- timeline ---- */
.timeline-section{ padding-top:40px; }
.timeline{
  max-width:720px;
  margin:0 auto;
  position:relative;
}
.timeline::before{
  content:'';
  position:absolute;
  left:9px;
  top:6px;
  bottom:6px;
  width:2px;
  background:rgba(255,255,255,.1);
}
.timeline-item{
  position:relative;
  padding-left:44px;
  padding-bottom:44px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  left:0; top:4px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--charcoal);
  border:2px solid rgba(var(--neon-rgb),.4);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.timeline-item.is-visible .timeline-dot{
  border-color:var(--neon);
  background:var(--neon);
  box-shadow:0 0 18px 2px rgba(var(--neon-rgb),.55);
}
/* the segment of line ABOVE each dot grows in as that milestone reveals,
   giving the timeline a sense of progress without any sweeping/scanning
   light effect — just a soft, one-time height transition per segment */
.timeline-item::before{
  content:'';
  position:absolute;
  left:9px;
  top:-44px;
  width:2px;
  height:0;
  background:var(--neon);
  transition:height .7s var(--ease);
}
.timeline-item:first-child::before{ display:none; }
.timeline-item.is-visible::before{ height:44px; }

.timeline-year{
  display:inline-block;
  font-family:var(--font-head);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:8px;
}
.timeline-item h3{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:8px;
}
.timeline-item p{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.6;
  max-width:50ch;
}

/* ---- skills ---- */
.skills-section{ padding-top:40px; }
.skills-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.skill-row{}
.skill-row-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
}
.skill-name{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--white);
  font-size:1rem;
}
.skill-percent{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--neon);
  font-size:.95rem;
}
.skill-track{
  position:relative;
  width:100%;
  height:10px;
  border-radius:100px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.skill-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:100px;
  background:linear-gradient(90deg, var(--neon-dim), var(--neon));
  box-shadow:0 0 14px 0 rgba(var(--neon-rgb),.5);
  transition:width 1.4s cubic-bezier(.16,.85,.3,1);
}

@media (max-width:640px){
  .timeline-item{ padding-left:36px; padding-bottom:36px; }
  .timeline-item::before{ top:-36px; }
  .timeline-item.is-visible::before{ height:36px; }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.service-block{
  padding:64px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.service-block:first-of-type{ border-top:none; padding-top:30px; }

.service-block-head{
  display:flex;
  align-items:flex-start;
  gap:22px;
  max-width:760px;
  margin:0 auto 50px;
  text-align:left;
}
.service-block-icon{
  flex:none;
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md);
  background:var(--charcoal);
  border:1px solid rgba(var(--neon-rgb),.25);
  color:var(--neon);
  filter:drop-shadow(0 0 10px rgba(var(--neon-rgb),.35));
}
.service-block-icon svg{ width:34px; height:34px; }
.service-block-text h2{
  font-family:var(--font-head);
  font-size:1.5rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:8px;
}
.service-block-text p{
  color:var(--gray);
  font-size:.98rem;
  line-height:1.7;
  max-width:64ch;
}

/* ---- pricing grid ---- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
}
.price-card{
  display:flex;
  flex-direction:column;
  padding:36px 30px;
  border-radius:var(--radius-md);
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.price-card:hover{
  transform:translateY(-8px);
  border-color:rgba(var(--neon-rgb),.45);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.65), 0 0 40px -14px rgba(var(--neon-rgb),.3);
}
.price-card.featured{
  background:var(--charcoal-2);
  border:1.5px solid rgba(var(--neon-rgb),.5);
  box-shadow:0 0 0 1px rgba(var(--neon-rgb),.12), 0 24px 60px -24px rgba(0,0,0,.7), 0 0 46px -14px rgba(var(--neon-rgb),.35);
}
.price-card.featured:hover{
  transform:translateY(-10px);
  box-shadow:0 0 0 1px rgba(var(--neon-rgb),.18), 0 28px 64px -22px rgba(0,0,0,.75), 0 0 56px -12px rgba(var(--neon-rgb),.45);
}
.price-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  background:var(--neon);
  color:#06110b;
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:100px;
  box-shadow:0 8px 20px -6px rgba(var(--neon-rgb),.6);
  white-space:nowrap;
}
.price-tier{
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:14px;
}
.price-amount{
  font-family:var(--font-head);
  font-size:2.3rem;
  font-weight:800;
  color:var(--white);
  margin-bottom:22px;
  line-height:1;
}
.price-amount span{
  font-size:.95rem;
  font-weight:500;
  color:var(--gray);
  margin-left:4px;
}
.price-features{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:flex;
  flex-direction:column;
  gap:13px;
  flex:1;
}
.price-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--gray);
  font-size:.9rem;
  line-height:1.5;
}
.price-features li svg{
  flex:none;
  width:17px; height:17px;
  margin-top:2px;
  color:var(--neon);
}
.price-card .btn{ width:100%; justify-content:center; text-align:center; }

@media (max-width:960px){
  .pricing-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
  .service-block-head{ flex-direction:column; align-items:center; text-align:center; }
  .service-block-text p{ max-width:none; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-section{ padding-top:20px; }
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}

/* ---- info panel ---- */
.contact-info{
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
  padding:44px 38px;
}
.contact-info h2{
  font-family:var(--font-head);
  font-size:1.4rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:14px;
}
.contact-info > p{
  color:var(--gray);
  font-size:.96rem;
  line-height:1.7;
  margin-bottom:32px;
}
.contact-detail{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:24px;
}
.contact-detail-icon{
  flex:none;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(var(--neon-rgb),.08);
  border:1px solid rgba(var(--neon-rgb),.28);
  color:var(--neon);
}
.contact-detail-icon svg{ width:22px; height:22px; }
.contact-detail-label{
  display:block;
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-dim);
  margin-bottom:4px;
}
.contact-detail-value{
  color:var(--white);
  font-size:.98rem;
  word-break:break-word;
}
.contact-detail-value a{ color:var(--white); transition:color .3s var(--ease); }
.contact-detail-value a:hover{ color:var(--neon); }

.contact-social{
  display:flex;
  gap:14px;
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.08);
}
.social-icon-lg{ width:52px; height:52px; }
.social-icon-lg svg{ width:23px; height:23px; }

/* ---- form ---- */
.contact-invite{
  color:var(--gray);
  font-size:1.02rem;
  line-height:1.7;
  margin-bottom:28px;
  max-width:56ch;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.form-field label{
  font-family:var(--font-head);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--gray);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:var(--charcoal);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  color:var(--white);
  font-family:var(--font-body);
  font-size:.95rem;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.form-field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--gray-dim); }
.form-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%2339ff8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px;
  padding-right:44px;
  cursor:pointer;
}
.form-field select:invalid{ color:var(--gray-dim); }
.form-field select option{ background:var(--charcoal); color:var(--white); }

/* smooth animated focus glow — no scanning/sweeping effect, just a soft
   one-time highlight on the field itself as the visitor clicks in */
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{
  border-color:rgba(var(--neon-rgb),.35);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--neon);
  background:var(--charcoal-2);
  box-shadow:0 0 0 4px rgba(var(--neon-rgb),.14), 0 0 24px -6px rgba(var(--neon-rgb),.45);
}

.contact-submit{ align-self:flex-start; margin-top:6px; }

.form-success{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  padding:16px 20px;
  border-radius:var(--radius-sm);
  background:rgba(var(--neon-rgb),.08);
  border:1px solid rgba(var(--neon-rgb),.35);
  color:var(--white);
  font-size:.94rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.form-success.is-visible{ opacity:1; transform:translateY(0); }
.form-error{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  padding:16px 20px;
  border-radius:var(--radius-sm);
  background:rgba(255,107,107,.08);
  border:1px solid rgba(255,107,107,.35);
  color:var(--white);
  font-size:.94rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
/* width/height are required here, not optional: this SVG has no
   intrinsic size, so without them it falls back to the CSS default
   300x150 replaced-element size. That pushed the error text off the
   right edge and gave the whole contact page ~31px of horizontal
   scroll on narrow viewports even while the message was hidden
   (.form-error is hidden with opacity, so it still takes up layout).
   Matches .form-success svg below. */
.form-error svg{ color:#ff6b6b; flex:none; width:20px; height:20px; }
.form-error.is-visible{ opacity:1; transform:translateY(0); }
.contact-submit:disabled{ opacity:.6; cursor:not-allowed; }
.form-success svg{ flex:none; width:20px; height:20px; color:var(--neon); }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* =========================================================
   AWARDS & ACHIEVEMENTS (About page)
   ========================================================= */
.awards-section{ padding-top:20px; }
.awards-list{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.award-card{
  display:flex;
  gap:18px;
  padding:28px 26px;
  background:var(--charcoal);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.award-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--neon-rgb),.4);
}
.award-icon{
  flex:none;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--neon-rgb),.08);
  border:1px solid rgba(var(--neon-rgb),.28);
  color:var(--neon);
}
.award-icon svg{ width:24px; height:24px; }
.award-card h3{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:4px;
}
.award-meta{
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--neon);
  margin-bottom:8px;
  display:block;
}
.award-card p{
  color:var(--gray);
  font-size:.9rem;
  line-height:1.6;
}
.awards-empty{
  text-align:center;
  color:var(--gray-dim);
  padding:20px 0;
}
@media (max-width:700px){
  .awards-list{ grid-template-columns:1fr; }
}