/* ===== ESTATE ANTHEM ===== */
:root {
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --line: rgba(255, 255, 255, 0.10);
  --fg: #ffffff;
  --muted: #8a8a8a;
  --muted-2: #5a5a5a;
  --accent: #ffffff;
  --max: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* Film grain overlay */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: screen;
  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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cursor-following spotlight (desktop only, set via JS) */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 56px);
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.nav__brand {
  display: flex;
  align-items: center;
}
.nav__logo {
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav__brand:hover .nav__logo {
  transform: scale(1.07) rotate(-2deg);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}
.nav__links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: var(--muted);
}
.nav__links a { transition: color 0.3s var(--ease); }
.nav__links a:hover { color: var(--fg); }
.nav__cta {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all 0.3s var(--ease);
}
.nav__cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px clamp(20px, 5vw, 56px) 80px;
}
.hero__glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 70vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(255,255,255,0.055) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  /* Ambient drift: visible motion on every device, including touch */
  animation: heroDrift 11s ease-in-out infinite;
}
@keyframes heroDrift {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50%  { transform: translate(-46%, -54%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}
.hero__pill .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.hero__headline {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 8.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.hero__headline .accent,
.section-title .accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  text-stroke: 1.5px var(--fg);
}
.hero__sub {
  margin-top: 26px;
  max-width: 540px;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--muted);
  font-weight: 300;
}
.hero__actions {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,255,255,0.18); }
.btn--ghost { color: var(--fg); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.btn--lg { padding: 18px 34px; font-size: 17px; }
.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.96); }

/* ===== MARQUEE ===== */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  animation: scroll 28s linear infinite;
  font-family: "Anton", sans-serif;
  font-size: clamp(20px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.marquee__track .dot { color: var(--muted-2); }
/* Pause on hover only where hover truly exists. On touch, :hover sticks after
   a tap and would freeze the marquee. */
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== SECTIONS ===== */
.eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.section-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 72px);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.5px;
}

.manifesto {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 160px) clamp(20px, 5vw, 56px);
}
.manifesto__text {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.5px;
  max-width: 980px;
}
.muted { color: var(--muted); }

/* ===== WORK / CARDS ===== */
.work {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vh, 100px) clamp(20px, 5vw, 56px);
}
.work__head { margin-bottom: 56px; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 28px 38px;
  background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.card > * { position: relative; z-index: 1; }
/* Spotlight that follows the cursor inside each card */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
/* .cards ancestor raises specificity above .reveal.in { transform: none } */
.cards .card:hover,
.cards .card.touch-active {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}
.cards .card:hover::after,
.cards .card.touch-active::after { opacity: 1; }
.card__num {
  font-family: "Anton", sans-serif;
  font-size: 15px;
  color: var(--muted-2);
  letter-spacing: 1px;
}
.card h3 {
  font-size: 23px;
  font-weight: 600;
  margin: 16px 0 12px;
}
.card p {
  font-size: 15px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}

/* ===== STATS ===== */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  flex: 1 1 220px;
  text-align: center;
  padding: 20px;
}
.stat__num {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: clamp(48px, 9vw, 88px);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ===== CTA ===== */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(110px, 18vh, 200px) clamp(20px, 5vw, 56px);
  overflow: hidden;
}
.cta__glow {
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vw;
  max-width: 900px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 58%);
  filter: blur(50px);
  pointer-events: none;
  animation: ctaDrift 13s ease-in-out infinite;
}
@keyframes ctaDrift {
  0%   { transform: translateX(-50%) scale(1); opacity: 0.8; }
  50%  { transform: translateX(-54%) scale(1.1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
}
.cta__title {
  position: relative;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 9vw, 110px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.cta__sub {
  position: relative;
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
}
.cta__actions {
  position: relative;
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== CONTACT FORM ===== */
.contact {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 42px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact__row {
  display: flex;
  gap: 12px;
}
.contact__row .contact__input { flex: 1; }
.contact__input {
  width: 100%;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.contact__input::placeholder { color: var(--muted-2); }
.contact__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}
.contact__textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.contact__submit {
  margin-top: 4px;
  justify-content: center;
  width: 100%;
}
.contact__submit[disabled] { opacity: 0.55; pointer-events: none; }
.contact__status {
  min-height: 20px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}
.contact__status.ok { color: #6ee7a8; }
.contact__status.err { color: #ff8585; }

@media (max-width: 560px) {
  .contact__row { flex-direction: column; }
}

/* ===== FOOTER ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 34px clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
}
.footer__logo {
  height: 48px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.footer__brand:hover .footer__logo {
  opacity: 1;
  transform: scale(1.06) rotate(-2deg);
}
.footer__links { display: flex; gap: 24px; }
.footer__links a { transition: color 0.3s var(--ease); }
.footer__links a:hover { color: var(--fg); }
.footer__copy { color: var(--muted-2); }

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/*
  NOTE: We intentionally do NOT disable the marquee, scroll-reveals, ambient
  glow, or pulse under prefers-reduced-motion. Motion is core to this brand and
  the owner wants it visible on every device (many phones have "Reduce Motion"
  on by default, which was silently killing all animation). The motion here is
  gentle/non-flashing. The cursor-trailing glow + magnetic buttons remain
  desktop-only (no cursor on touch).
*/

/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
  .cards { grid-template-columns: 1fr; }
  .nav__links { display: none; }
}