/* Ares Portfolio — Stylesheet
   ==============================
   Tokens → Reset → Base → Components → Layout → Responsive
*/

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}

/* ── Design Tokens ── */
:root{
  --bg:       #0b0b09;
  --bg-2:     #131311;
  --bg-3:     #1a1a17;
  --ink:      #eae6db;
  --ink-2:    #7c7870;
  --ink-3:    #3c3a36;
  --gold:     #c8a44a;
  --gold-dim: #664f1e;
  --gold-glow:rgba(200,164,74,.12);
  --border:   rgba(234,230,219,.07);
  --border-2: rgba(234,230,219,.14);
  --radius:   2px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --transition: 250ms var(--ease-out);
}

/* ── Base ── */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Mono',monospace;
  font-size:.875rem;
  line-height:1.65;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}

/* ── Grain overlay ── */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.032;
  pointer-events:none;
  z-index:8000;
  mix-blend-mode:luminosity;
}

/* ── Custom cursor ── */
#c-dot{
  position:fixed;width:7px;height:7px;
  background:var(--gold);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .18s,height .18s,background .18s;
  will-change:left,top;
}
#c-ring{
  position:fixed;width:34px;height:34px;
  border:1px solid rgba(200,164,74,.38);
  border-radius:50%;pointer-events:none;
  z-index:9998;transform:translate(-50%,-50%);
  will-change:left,top;
  transition:width .28s var(--ease-spring),height .28s var(--ease-spring),border-color .2s;
}
body.c-hover #c-dot{width:13px;height:13px}
body.c-hover #c-ring{width:52px;height:52px;border-color:rgba(200,164,74,.6)}
body.c-text #c-dot{width:2px;height:24px;border-radius:1px;background:var(--gold)}
body.c-text #c-ring{opacity:0}

/* ── Nav ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 60px;
  border-bottom:1px solid transparent;
  transition:background .5s,border-color .5s,padding .4s;
}
nav.stuck{
  background:rgba(11,11,9,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-color:var(--border);
  padding:16px 60px;
}
.logo{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;font-size:1.25rem;
  letter-spacing:.04em;color:var(--ink);
  text-decoration:none;display:flex;align-items:center;gap:2px;
}
.logo-dot{color:var(--gold)}
.nav-links{display:flex;gap:40px}
.nav-links a{
  font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;position:relative;
  transition:color var(--transition);
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 22px;
  border:1px solid var(--gold-dim);
  color:var(--gold);font-family:'DM Mono',monospace;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .25s,color .25s;
  cursor:none;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .35s var(--ease-out);
}
.nav-cta:hover{color:var(--bg)}
.nav-cta:hover::before{transform:translateY(0)}
.nav-cta span{position:relative;z-index:1}
/* Accessibility */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── Hero ── */
.hero{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:0 60px 80px;
  position:relative;overflow:hidden;
}
/* Grid lines bg */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(234,230,219,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(234,230,219,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 60%,black 20%,transparent 80%);
  will-change:transform;
}
/* Ambient glow */
.hero-aura{
  position:absolute;left:-5%;bottom:-15%;
  width:70vw;height:70vw;max-width:800px;max-height:800px;
  background:radial-gradient(ellipse,rgba(200,164,74,.065) 0%,transparent 65%);
  pointer-events:none;will-change:transform;
}
.hero-aura-2{
  position:absolute;right:-10%;top:10%;
  width:50vw;height:50vw;max-width:600px;max-height:600px;
  background:radial-gradient(ellipse,rgba(200,164,74,.03) 0%,transparent 65%);
  pointer-events:none;
}
/* Content */
.hero-content{
  align-self:end;
  padding-bottom:16px;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:14px;
  margin-bottom:28px;
}
.hero-eyebrow-line{width:36px;height:1px;background:var(--gold)}
.hero-eyebrow span{
  font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
/* Kinetic headline */
.hero-h{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(64px,11.5vw,168px);
  line-height:.88;letter-spacing:-.01em;
  overflow:visible;margin-bottom:0;
}
.hero-h .line{overflow:hidden;display:block}
.hero-h .word{display:inline-block;will-change:transform}
.hero-h .accent{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  color:var(--gold);
  font-size:.92em;
}
.hero-sub{
  max-width:400px;color:var(--ink-2);
  font-size:.8125rem;line-height:1.85;
  margin-top:32px;
}
.hero-actions{
  display:flex;align-items:center;gap:32px;
  margin-top:48px;
}
/* Primary CTA */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;background:var(--gold);
  color:var(--bg);font-family:'DM Mono',monospace;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s var(--ease-out);cursor:none;
}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.16);
  transform:translateX(-115%) skewX(-20deg);
  transition:transform .5s ease;
}
.btn-primary:hover::after{transform:translateX(115%) skewX(-20deg)}
.btn-text{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;transition:color var(--transition);cursor:none;
}
.btn-text:hover{color:var(--gold)}
/* Scroll indicator */
.hero-scroll{
  position:absolute;right:60px;bottom:80px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll-label{
  font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);writing-mode:vertical-rl;
}
.hero-scroll-track{
  width:1px;height:52px;
  background:linear-gradient(to bottom,var(--gold) 0%,transparent 100%);
  animation:scrollPulse 2.2s 2s infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:.25;transform:scaleY(.7);transform-origin:top}
  50%{opacity:1;transform:scaleY(1);transform-origin:top}
}
/* Floating availability badge */
.avail-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  border:1px solid var(--border-2);
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:32px;
}
.avail-dot{
  width:6px;height:6px;border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.15);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.15)}
  50%{box-shadow:0 0 0 6px rgba(74,222,128,.05)}
}

/* ── Stats bar ── */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin:0 60px;
}
.stat-item{
  padding:28px 0;
  border-right:1px solid var(--border);
}
.stat-item:last-child{border-right:none}
.stat-val{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:600;font-size:2.5rem;
  color:var(--ink);line-height:1;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:2px;
}
.stat-val em{color:var(--gold);font-style:normal;font-size:2rem}
.stat-key{
  font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-top:6px;
}

/* ── Section shared ── */
section{padding:108px 60px}
.s-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:22px;margin-bottom:64px;
}
.s-kicker{
  font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.s-title{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,4.5vw,56px);
  letter-spacing:-.01em;line-height:1;
}
.s-action{
  font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;display:flex;align-items:center;gap:7px;
  transition:color var(--transition);cursor:none;padding-bottom:2px;
}
.s-action:hover{color:var(--gold)}

/* ── Services ── */
#services{background:var(--bg)}
.svc-list{border-top:1px solid var(--border)}
.svc{
  display:grid;grid-template-columns:96px 1fr 180px;
  gap:40px;align-items:start;
  padding:40px 0;
  border-bottom:1px solid var(--border);
  transition:background .25s;cursor:default;
  position:relative;
}
.svc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s var(--ease-out);
}
.svc:hover::before{transform:scaleY(1)}
.svc:hover{background:rgba(200,164,74,.025)}
.svc:hover .svc-n{color:rgba(200,164,74,.15)}
.svc:hover .svc-arrow{opacity:1;transform:none}
.svc-n{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;font-size:4.5rem;
  line-height:1;color:rgba(234,230,219,.05);
  letter-spacing:-.02em;transition:color .3s;
  padding-top:4px;
}
.svc-tag{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.svc-name{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:12px;
}
.svc-desc{color:var(--ink-2);font-size:.8125rem;line-height:1.8;max-width:480px}
.svc-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.tag{
  font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--border-2);color:var(--ink-2);
  transition:border-color .2s,color .2s;
}
.tag:hover{border-color:var(--gold-dim);color:var(--ink)}
.svc-price-wrap{text-align:right}
.svc-from{font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.svc-price{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:600;font-size:1.625rem;letter-spacing:-.01em;
}
.svc-arrow{
  display:block;margin-top:8px;font-size:1.25rem;
  color:var(--gold);opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .25s,transform .3s var(--ease-spring);
}

/* ── Work ── */
#work{background:var(--bg-2)}
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
}
.wc{
  background:var(--bg-2);padding:40px 32px;
  position:relative;overflow:hidden;
  transition:background .25s;cursor:default;
}
.wc::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .5s var(--ease-out);
}
.wc:hover{background:var(--bg-3)}
.wc:hover::after{transform:scaleX(1)}
.wc-ghost{
  position:absolute;top:8px;right:16px;
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;font-size:5.5rem;
  color:rgba(234,230,219,.028);
  line-height:1;pointer-events:none;letter-spacing:-.02em;
}
.wc-tag{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.wc-name{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:600;font-size:1.375rem;letter-spacing:-.01em;margin-bottom:10px;
}
.wc-desc{color:var(--ink-2);font-size:.75rem;line-height:1.8}
.wc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}

/* ── Process ── */
#process{background:var(--bg)}
.proc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
}
.ps{background:var(--bg);padding:40px 28px;position:relative;overflow:hidden}
.ps::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.ps:hover::before{transform:scaleX(1)}
.ps-n{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;font-weight:700;
  font-size:3.5rem;letter-spacing:-.02em;
  color:rgba(200,164,74,.1);line-height:1;margin-bottom:22px;
}
.ps-title{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.005em;margin-bottom:10px;
}
.ps-desc{color:var(--ink-2);font-size:.75rem;line-height:1.8}

/* ── CTA ── */
#contact{
  background:var(--bg);text-align:center;
  padding:130px 60px;position:relative;overflow:hidden;
}
.cta-aura{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(200,164,74,.055) 0%,transparent 60%);
  pointer-events:none;
}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:24px;
}
.cta-h{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(52px,10vw,136px);
  line-height:.88;letter-spacing:-.01em;
  margin-bottom:44px;
}
.cta-h .accent{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;color:var(--gold);
}
.cta-socials{
  display:flex;align-items:center;justify-content:center;
  gap:36px;margin-top:52px;
}
.cta-link{
  font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
  transition:color var(--transition);cursor:none;
  position:relative;
}
.cta-link::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform .3s var(--ease-out);
}
.cta-link:hover{color:var(--gold)}
.cta-link:hover::after{transform:scaleX(1)}
.sep{width:1px;height:14px;background:var(--border-2)}

/* ── Footer ── */
footer{
  padding:28px 60px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.f-logo{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
}
.f-logo-dot{color:var(--gold)}
.f-copy{font-size:.625rem;color:var(--ink-2);letter-spacing:.05em}
.f-links{display:flex;gap:24px}
.f-links a{
  font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;transition:color var(--transition);cursor:none;
}
.f-links a:hover{color:var(--ink)}

/* ── Hamburger button ── */
.nav-ham{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;
  background:none;border:none;cursor:none;padding:4px;
  position:relative;z-index:600;
}
.ham-line{
  display:block;width:22px;height:1.5px;
  background:var(--ink);
  transition:transform .35s var(--ease-out),opacity .25s,background .25s;
  transform-origin:center;
}
.nav-ham[aria-expanded="true"] .ham-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham[aria-expanded="true"] .ham-line:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham[aria-expanded="true"] .ham-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Mobile menu ── */
.mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:490;
  background:rgba(11,11,9,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;justify-content:center;align-items:center;
  opacity:0;
  transition:opacity .35s var(--ease-out);
  pointer-events:none;
}
.mobile-menu.open{
  opacity:1;pointer-events:all;
}
.mobile-nav{
  display:flex;flex-direction:column;align-items:center;gap:0;
  width:100%;
}
.mobile-link{
  font-family:'Clash Display','Outfit','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;font-size:clamp(2rem,10vw,3.5rem);
  letter-spacing:-.01em;
  color:var(--ink-2);text-decoration:none;
  padding:14px 0;width:100%;text-align:center;
  border-bottom:1px solid var(--border);
  transition:color .25s var(--ease-out);
  opacity:0;transform:translateY(20px);
  transition:color .25s var(--ease-out),opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.mobile-link:first-child{border-top:1px solid var(--border)}
.mobile-link:hover{color:var(--ink)}
.mobile-link-cta{
  color:var(--gold);margin-top:32px;
  border:1px solid var(--gold-dim);
  padding:16px 48px;width:auto;
  font-size:clamp(1rem,4vw,1.25rem);
}
.mobile-link-cta:hover{color:var(--bg);background:var(--gold)}
.mobile-menu.open .mobile-link{opacity:1;transform:translateY(0)}
.mobile-menu.open .mobile-link:nth-child(1){transition-delay:.05s}
.mobile-menu.open .mobile-link:nth-child(2){transition-delay:.1s}
.mobile-menu.open .mobile-link:nth-child(3){transition-delay:.15s}
.mobile-menu.open .mobile-link:nth-child(4){transition-delay:.2s}
.mobile-menu.open .mobile-link:nth-child(5){transition-delay:.27s}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Responsive ── */
@media(max-width:1024px){
  nav,nav.stuck{padding:18px 36px}
  .hero{padding:0 36px 72px}
  .hero-scroll{right:36px;bottom:72px}
  section{padding:80px 36px}
  .stats{margin:0 36px}
  .svc{grid-template-columns:72px 1fr;gap:24px}
  .svc-price-wrap{display:none}
  .work-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav,nav.stuck{padding:16px 24px}.nav-links{display:none}.nav-cta{display:none}
  .nav-ham{display:flex}
  .mobile-menu{display:flex}
  .hero{padding:0 24px 64px}
  .hero-scroll{display:none}
  section{padding:64px 24px}
  .stats{grid-template-columns:1fr 1fr;margin:0 24px}
  .stat-item{border-right:none;border-bottom:1px solid var(--border)}
  .stat-item:nth-child(odd){border-right:1px solid var(--border)}
  .stat-item:nth-last-child(-n+2){border-bottom:none}
  .work-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  footer{flex-direction:column;gap:12px;text-align:center;padding:24px}
  .cta-socials{flex-wrap:wrap;gap:20px}.sep{display:none}
  .s-header{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:375px){
  .hero-h{font-size:52px}
  .proc-grid{grid-template-columns:1fr}
}

/* Safety: ensure words are visible even if GSAP/fonts fail */
@keyframes wordRevealFallback{to{transform:translateY(0);opacity:1}}
.hero-h.fonts-loaded .word,
.hero-h.gsap-done .word{transform:translateY(0)}
/* After 2.5s, force visible regardless */
.hero-h .word{animation:none}
.no-gsap .hero-h .word{transform:translateY(0)!important;opacity:1!important}