/* ─── Golden Key Studio — Custom CSS v4 ─── */

/* Reset & base */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: hsl(0 0% 4%);
  --fg: hsl(40 14% 90%);
  --card: hsl(0 0% 7%);
  --border: hsl(40 8% 16%);
  --muted: hsl(40 6% 50%);
  --gold: hsl(43 74% 49%);
  --gold-light: hsl(43 74% 62%);
  --gold-dark: hsl(43 74% 36%);
  --radius: .375rem;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.serif { font-family: 'Playfair Display', serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* Text helpers */
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted); }
.text-gold-gradient {
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.label-gold {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(43 74% 49% / .4), transparent);
}

/* Cursor */
.key-cursor, .key-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9952b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cline x1='11.5' y1='11.5' x2='22' y2='22'/%3E%3Cline x1='18' y1='22' x2='22' y2='22'/%3E%3Cline x1='22' y1='18' x2='22' y2='22'/%3E%3C/svg%3E") 4 4, auto;
}

/* ─── Buttons ─── */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 2.5rem;
  background: var(--gold); color: var(--bg);
  font-weight: 600; font-size: .875rem;
  border: none; border-radius: var(--radius);
  transition: all .2s;
  box-shadow: 0 4px 15px hsl(43 74% 49% / .1);
}
.btn-gold:hover { background: var(--gold-light); box-shadow: 0 4px 20px hsl(43 74% 49% / .2); }
.btn-gold:active { transform: scale(.97); }
.btn-gold svg { display: inline; vertical-align: middle; }

.btn-gold-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 2.5rem;
  background: transparent; color: var(--gold);
  font-size: .875rem; font-weight: 500;
  border: 1px solid hsl(43 74% 49% / .4);
  border-radius: var(--radius);
  transition: all .3s;
}
.btn-gold-outline:hover { background: hsl(43 74% 49% / .1); border-color: var(--gold); }
.btn-gold-outline svg { display: inline; vertical-align: middle; }

/* ─── Nav ─── */
.gks-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all .5s;
}
.gks-nav.scrolled {
  background: hsl(0 0% 4% / .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.nav-brand { font-size: 1.25rem; letter-spacing: .05em; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--muted); transition: color .3s;
}
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-cta {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .15em;
  padding: .5rem 1.25rem;
  border: 1px solid hsl(43 74% 49% / .4); color: var(--gold);
  border-radius: 2px; transition: all .3s;
}
.nav-cta:hover { background: hsl(43 74% 49% / .1); border-color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; color: var(--fg); }
.nav-mobile { display: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-mobile.open {
    display: flex; flex-direction: column; gap: 1.5rem;
    padding: 2rem 1.5rem;
    background: hsl(0 0% 4% / .95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
}

/* ─── Cards ─── */
.card {
  padding: 2rem;
  border-radius: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  transition: all .5s;
}
.card-hover:hover {
  border-color: hsl(43 74% 49% / .3);
  box-shadow: 0 0 40px -5px hsl(43 74% 49% / .25);
}

/* ─── Grids ─── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Portfolio Grid ─── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.portfolio-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* square */
  border-radius: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .5s, box-shadow .5s;
}
.portfolio-item:hover {
  border-color: hsl(43 74% 49% / .3);
  box-shadow: 0 0 40px -5px hsl(43 74% 49% / .25);
}
.portfolio-text {
  position: absolute;
  inset: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .4s ease, transform .4s ease;
  z-index: 2;
}
.portfolio-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 1;
}
.portfolio-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(0 0% 4% / .8) 0%, hsl(0 0% 4% / .2) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.portfolio-item:hover .portfolio-text {
  opacity: 0;
  transform: translateY(-10px);
}
.portfolio-item:hover .portfolio-image {
  opacity: 1;
  transform: scale(1);
}

/* ─── Forms ─── */
.form-label {
  display: block; margin-bottom: .5rem;
  font-size: .75rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  font-family: 'Inter', sans-serif;
}
.form-input {
  width: 100%; padding: .75rem 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--fg);
  font-family: 'Inter', sans-serif; font-size: .875rem;
  transition: border-color .3s;
  outline: none;
}
.form-input:focus { border-color: hsl(43 74% 49% / .5); }
.form-input::placeholder { color: var(--muted); }
.form-textarea { min-height: 160px; resize: vertical; }

/* Chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .5rem 1rem; font-size: .875rem;
  border: 1px solid var(--border); color: var(--muted);
  background: transparent; border-radius: 2px;
  transition: all .3s; font-family: 'Inter', sans-serif;
}
.chip:hover { border-color: hsl(43 74% 49% / .3); color: var(--fg); }
.chip.active { border-color: var(--gold); background: hsl(43 74% 49% / .1); color: var(--gold); }

/* Tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  padding: 1rem; text-align: left;
  border: 1px solid var(--border); border-radius: .5rem;
  background: transparent; color: var(--fg);
  transition: all .3s; font-family: inherit;
}
.tier:hover { border-color: hsl(43 74% 49% / .3); }
.tier.active {
  border-color: var(--gold); background: hsl(43 74% 49% / .1);
  box-shadow: 0 0 30px -5px hsl(43 74% 49% / .15);
}
.tier.active .serif { color: var(--gold); }

/* Icon circle */
.icon-circle {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid hsl(43 74% 49% / .3);
  display: flex; align-items: center; justify-content: center;
}

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, hsl(43 74% 49% / .04) 0%, transparent 70%);
}

/* ─── Footer ─── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 4rem 0;
}
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-heading {
  font-size: .8rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--gold);
  margin-bottom: 1rem; font-family: 'Inter', sans-serif; font-weight: 500;
}
.footer-links { display: flex; flex-direction: column; gap: .75rem; }
.footer-links a { font-size: .875rem; color: var(--muted); transition: color .3s; }
.footer-links a:hover { color: var(--fg); }

/* ─── Toast ─── */
.gks-toast {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 9999; display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.gks-toast-item {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  font-size: .875rem;
  animation: toast-in .3s ease-out forwards;
  pointer-events: auto;
  max-width: 360px;
}
.gks-toast-item.success { background: hsl(142 71% 45%); color: #fff; }
.gks-toast-item.error { background: hsl(0 84% 60%); color: #fff; }
@keyframes toast-in {
  from { opacity:0; transform: translateY(1rem); }
  to { opacity:1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity:1; transform: translateY(0); }
  to { opacity:0; transform: translateY(1rem); }
}

/* ─── Scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1),
              filter .7s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.stagger-children > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger-children > .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger-children > .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger-children > .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger-children > .reveal:nth-child(6) { transition-delay: 400ms; }
.stagger-children > .reveal:nth-child(7) { transition-delay: 480ms; }
.stagger-children > .reveal:nth-child(8) { transition-delay: 560ms; }
.stagger-children > .reveal:nth-child(9) { transition-delay: 640ms; }
.stagger-children > .reveal:nth-child(10) { transition-delay: 720ms; }

/* WordPress custom logo */
.custom-logo-link img { height: 2.5rem; width: auto; }