@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Quicksand:wght@300..700&display=swap');

/* ============================================================
   POWER TALENT — DESIGN SYSTEM
   Concept: "The Registration Sheet" — an editorial, print-shop
   inspired layout. Registration marks (alignment crosshairs)
   and halftone dot screens are borrowed directly from the
   serigraphy/print production process and used as the page's
   one recurring signature, instead of generic decoration.
   ============================================================ */

:root {
  --ink: #0A1F2E;       /* dominant dark background / primary text   */
  --signal: #00AFEB;    /* primary brand accent                       */
  --kiln: #FF6A00;      /* secondary brand accent, used sparingly     */
  --paper: #F7F8FA;     /* warm off-white light section background   */
  --mist: #E4E8EC;      /* hairline borders on light sections         */
  --ink-soft: #486577;  /* muted body text on dark                    */
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Quicksand", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

::selection {
  background-color: #00b0eb2a;
  color: var(--ink);
}

/* ---------- Type ---------- */
h1, h2, h3, h4, .font-display {
  font-family: "Google Sans Flex", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

p, a, li, button, input, textarea, select, address, label, .font-body {
  font-family: "Quicksand", sans-serif;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Signature: registration mark ---------- */
.reg-mark {
  display: inline-flex;
  flex-shrink: 0;
}

.reg-mark svg { display: block; }

/* ---------- Signature: halftone dot screen ---------- */
.halftone {
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 10px 10px;
}

.halftone-fade {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

/* ============================================================
   NAV
   Transparent + white text over the hero; flips to a white,
   blurred bar with ink text once .scrolled is toggled by JS.
   Single source of truth — do not add a second .site-nav block.
   ============================================================ */
.site-nav {
  background-color: transparent;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(10, 31, 46, 0.08), 0 12px 24px -18px rgba(10, 31, 46, 0.25);
}

.site-nav img[alt="Power Talent"] {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.site-nav.scrolled img[alt="Power Talent"] {
  filter: none;
}

.nav-link,
.site-nav #menuToggle {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link.active {
  color: var(--signal);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--signal);
  border-radius: 2px;
}

.site-nav.scrolled .nav-link,
.site-nav.scrolled #menuToggle {
  color: var(--ink-soft);
}

.site-nav.scrolled .nav-link:hover {
  color: var(--ink);
}

.site-nav.scrolled .nav-link.active {
  color: var(--signal); /* stays brand-blue in both scroll states */
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: small;
  border-radius: 0.6rem;
  padding: 0.5rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.btn-signal {
  background: var(--signal);
  color: white;
}

.btn-signal:hover {
  background: #0099cf;
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgba(0, 175, 235, 0.55);
}

.btn-ghost-dark {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost-dark:hover {
  border-color: white;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: white;
  transform: translateY(-2px);
}

/* ---------- Cards & panels ---------- */
.panel {
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}

.panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(10, 31, 46, 0.25);
}

.img-zoom { overflow: hidden; }

.img-zoom img {
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}

.img-zoom:hover img {
  transform: scale(1.06);
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.mobile-menu.open {
  transform: translateX(0);
}

/* ---------- FAQ accordion ---------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer { max-height: 24rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s ease; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Editorial helpers ---------- */
.rotated-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.proof-index {
  font-family: "Google Sans Flex", sans-serif;
  font-weight: 700;
  color: var(--signal);
  opacity: 0.35;
}


/* ---------- Work filter pills ---------- */
.filter-btn {
  background: var(--mist);
  color: var(--ink-soft);
}

.filter-btn:hover {
  background: #d8dee4;
}

.filter-btn.active {
  background: var(--ink);
  color: white;
}

/* ---------- Testimonial scroll strip ---------- */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}