/* ═══════════════════════════════════════════════════════
   DIGITAL FOXY — Shared Styles
   ═══════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────── */
:root{
  --bg:       #0c0c0e;
  --bright:   #f0f0f0;
  --dim:      #28282f;
  --mid:      #6a6a72;
  --label:    #55555e;
  --line:     rgba(240,240,240,.1);
  --orange:   #f0f0f0;
  --card:     #111116;
  --card-h:   #16161c;
  --surface:  #0f0f13;
}

/* ─── RESET ──────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:auto; -webkit-font-smoothing:antialiased }
body{
  background:var(--bg);
  color:var(--bright);
  font-family:"Clash Display","Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}

/* ─── AMBIENT GLOW ───────────────────────────────────── */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 40% at 12% 52%, rgba(240,240,240,.05) 0%, transparent 65%),
    radial-gradient(40% 30% at 88% 80%, rgba(240,240,240,.03) 0%, transparent 60%);
}
.z{ position:relative; z-index:1 }

/* ─── TYPOGRAPHY ─────────────────────────────────────── */
.mono{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
.eyebrow{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--label);
}

/* ─── NAV ────────────────────────────────────────────── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 36px;
  transition:background .3s, backdrop-filter .3s;
}
nav.scrolled{
  background:rgba(12,12,14,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.nav-logo img{
  height:28px; width:auto;
}
.nav-logo span{
  font-weight:600; font-size:18px; letter-spacing:.04em;
  color:var(--bright);
}
.nav-links{
  display:flex; gap:28px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.nav-links a{
  color:var(--mid); text-decoration:none;
  transition:color .22s; position:relative;
}
.nav-links a:hover,
.nav-links a.active{ color:var(--bright) }

/* mobile hamburger */
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:4px }
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--bright);
  margin:5px 0; transition:transform .3s, opacity .2s;
}

/* ─── HOME HERO ──────────────────────────────────────── */
.hero{
  min-height:100vh;          /* fallback for old browsers */
  min-height:100svh;         /* respects mobile browser address bar */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(22px,6vw,80px) clamp(40px,8vh,90px);
}

/* ─── PAGE HERO (reusable) ───────────────────────────── */
.page-hero{
  min-height:50vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(22px,6vw,80px) clamp(40px,6vh,70px);
  padding-top:120px;
}
.page-hero-title{
  font-weight:600;
  font-size:clamp(48px,10vw,120px);
  line-height:.92; letter-spacing:-.02em;
  color:var(--bright);
}
.page-hero-sub{
  margin-top:20px;
  font-size:clamp(15px,1.5vw,19px); color:var(--mid);
  max-width:56ch; line-height:1.6; font-weight:400;
}

/* ─── SECTIONS ───────────────────────────────────────── */
.section{
  padding:clamp(60px,12vh,130px) clamp(22px,6vw,80px);
}
.section-label{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--label); margin-bottom:clamp(28px,5vh,56px);
}
.section-divider{
  border:none; border-top:1px solid var(--line); margin:0;
}

/* ─── CARDS ──────────────────────────────────────────── */
.card{
  background:var(--card);
  border-top:1px solid var(--line);
  padding:32px 28px 28px;
  cursor:default; position:relative; overflow:hidden;
  transition:background .25s;
  scroll-margin-top:110px;   /* keep anchored cards below the fixed nav */
}
a.card{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
}
.card-flash{
  animation:cardFlash 1.5s ease;
}
@keyframes cardFlash{
  0%,100%{ background:var(--card) }
  20%{ background:var(--card-h); box-shadow:inset 0 0 0 1px var(--bright) }
}
.card:hover{ background:var(--card-h) }
.card-num{
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px; letter-spacing:.1em; color:var(--label);
  margin-bottom:20px;
}
.card-title{
  font-weight:600;
  font-size:clamp(22px,2.8vw,36px);
  letter-spacing:-.01em; line-height:1.1;
  color:var(--bright); margin-bottom:10px;
}
.card-desc{
  font-size:14px; color:var(--mid); line-height:1.55;
  max-width:38ch;
}
.card-arrow{
  position:absolute; right:24px; top:28px;
  width:32px; height:32px; border:1px solid var(--line);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--mid);
  transition:border-color .25s, color .25s, transform .25s;
}
.card:hover .card-arrow{
  border-color:var(--orange); color:var(--orange); transform:rotate(45deg);
}

/* ─── GRID LAYOUTS ───────────────────────────────────── */
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));
  gap:2px;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:2px;
}

/* ─── TEAM ───────────────────────────────────────────── */
.team-member{
  padding:28px 24px;
  background:var(--card);
  border-top:1px solid var(--line);
}
.team-name{
  font-weight:600; font-size:20px;
  letter-spacing:-.01em; color:var(--bright);
  margin-bottom:6px;
}
.team-role{
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mid);
}

/* ─── VALUES ─────────────────────────────────────────── */
.value-block{
  padding:clamp(28px,4vh,48px) 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  align-items:start;
}
.value-num{
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px; color:var(--label); padding-top:4px;
}
.value-title{
  font-weight:600; font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.01em; color:var(--bright); margin-bottom:8px;
}
.value-desc{
  font-size:15px; color:var(--mid); line-height:1.6;
  max-width:48ch;
}

/* ─── CLIENTS MARQUEE ────────────────────────────────── */
.clients-marquee{
  overflow:hidden;
  padding:clamp(28px,5vh,52px) 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{
  display:flex; gap:clamp(20px,3vw,40px);
  align-items:center; width:max-content;
  animation:marquee 45s linear infinite;
}
.clients-marquee:hover .clients-track{ animation-play-state:paused }
@keyframes marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
.client-slot{
  flex-shrink:0;
  width:clamp(195px,22vw,255px);
  height:clamp(105px,13vh,138px);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  transition:transform .25s, opacity .25s;
  opacity:.85;
}
.client-slot:hover{
  transform:translateY(-3px);
  opacity:1;
}
.client-slot img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  display:block;
}

/* ─── CTA BANNER ─────────────────────────────────────── */
.cta-banner{
  padding:clamp(60px,12vh,120px) clamp(22px,6vw,80px);
  border-top:1px solid var(--line);
}
.cta-head{
  font-weight:600;
  font-size:clamp(42px,8vw,110px);
  line-height:.92; letter-spacing:-.02em;
  color:var(--bright); margin-bottom:28px;
}
.cta-head span{ color:var(--orange) }
.cta-link{
  display:inline-flex; align-items:center; gap:14px;
  font-weight:500; font-size:clamp(16px,2vw,22px);
  color:var(--mid); text-decoration:none;
  transition:color .22s;
}
.cta-link:hover{ color:var(--bright) }
.cta-link .arr{
  display:inline-block; width:32px; height:1px;
  background:currentColor; position:relative;
  transition:width .3s;
}
.cta-link .arr::after{
  content:""; position:absolute; right:0; top:-3px;
  border:4px solid transparent; border-left:6px solid currentColor;
}
.cta-link:hover .arr{ width:50px }

/* ─── CONTACT INFO ───────────────────────────────────── */
.contact-block{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,48px);
}
.contact-item-label{
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label); margin-bottom:12px;
}
.contact-item-value{
  font-weight:500; font-size:clamp(16px,1.8vw,22px);
  color:var(--bright);
}
.contact-item-value a{
  color:var(--bright); text-decoration:none;
  transition:color .22s;
}
.contact-item-value a:hover{ color:var(--orange) }

/* ─── FOOTER ─────────────────────────────────────────── */
footer{
  padding:22px clamp(22px,6vw,80px);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
footer span, footer a{
  font-family:ui-monospace,Menlo,monospace;
  font-size:11px; letter-spacing:.1em; color:var(--label);
  text-transform:uppercase; text-decoration:none;
}
footer a:hover{ color:var(--bright) }
.footer-links{ display:flex; gap:20px }

/* ─── SCROLL REVEAL (homepage only) ──────────────────── */
.runway{ height:520vh; position:relative }
.stage{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
  padding:0 clamp(22px,6vw,80px);
}
.reveal-copy{
  font-weight:500;
  font-size:clamp(26px,4.8vw,64px);
  line-height:1.2; letter-spacing:-.01em;
  max-width:20ch;
}
.tok{
  display:inline-block; opacity:0; white-space:pre;
  will-change:transform,opacity,filter;
}
.tok.word{ color:var(--dim) }

/* ─── PROSE ──────────────────────────────────────────── */
.prose{
  font-size:clamp(16px,1.6vw,20px); color:var(--mid);
  line-height:1.65; max-width:60ch; font-weight:400;
}
.prose + .prose{ margin-top:1.2em }
.prose strong{ color:var(--bright); font-weight:600 }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:768px){
  nav{ padding:16px 20px }
  .nav-links{
    position:fixed; inset:0;
    width:100%; height:100vh; height:100svh;
    background:var(--bg);
    z-index:60;
    transform:translateX(100%);
    flex-direction:column; justify-content:center; align-items:center;
    gap:36px; font-size:18px; letter-spacing:.18em;
    transition:transform .35s ease;
  }
  .nav-links.open{ transform:translateX(0) }
  .nav-toggle{ display:block; position:relative; z-index:70 }
  /* hamburger morphs into an X when open */
  .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) }
  body.menu-open{ overflow:hidden }
  .hero{
    justify-content:center;     /* center text instead of bottom-anchoring */
    padding-top:100px;          /* clear the fixed nav */
    padding-bottom:60px;
  }
  .page-hero{ padding-top:100px }
  .section{ padding:48px 20px }
  .cta-banner{ padding:48px 20px }
  footer{ padding:18px 20px }
  .value-block{ grid-template-columns:1fr }
  .contact-block{ gap:28px }
}

/* ─── REDUCED MOTION ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .tok{ opacity:1!important; transform:none!important; filter:none!important; color:var(--bright)!important }
  [data-animate]{ opacity:1!important; transform:none!important }
}