/* ── RESET & VARS ──────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:    #090908;
  --cream:  #eeebe3;
  --rust:   #c05a32;
  --sand:   #7a7670;
  --dim:    #1e1e1a;
  --dim2:   #2c2c28;
  --F:      'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --FC:     'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --FM:     'Space Mono', 'Courier New', monospace;
}
html { font-size:16px; }
body {
  background:var(--ink); color:var(--cream);
  font-family:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:300; overflow-x:hidden; cursor:none;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.028; pointer-events:none; z-index:9998;
}

/* ── CURSOR ─────────────────────────────────────────────────── */
#cursor {
  position:fixed; pointer-events:none; z-index:10000;
  width:8px; height:8px; background:var(--cream);
  border-radius:50%; transform:translate(-50%,-50%);
  transition:width .18s,height .18s,background .18s;
  mix-blend-mode:difference;
}
#cursor.hovering { width:44px; height:44px; background:var(--rust); mix-blend-mode:normal; }
#cursor.dragging { width:5px; height:5px; mix-blend-mode:normal; background:var(--rust); }

/* ── SITE ───────────────────────────────────────────────────── */
#site { opacity:1; }

/* ── HEADER ─────────────────────────────────────────────────── */
header {
  position:fixed; top:0; left:0; right:0; padding:1.8rem 3rem;
  display:flex; align-items:center; justify-content:space-between; z-index:500;
}
.logo {
  display:flex; align-items:center;
  text-decoration:none;
  opacity:.7; transition:opacity .3s;
}
.logo:hover { opacity:1; }
nav { display:flex; gap:2.5rem; }
nav a {
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; opacity:.35;
  transition:opacity .3s; position:relative;
}
nav a:hover, nav a.active { opacity:1; }
nav a.active::after {
  content:''; position:absolute; bottom:-.35rem; left:0; right:0;
  height:1px; background:var(--rust);
}

/* ── HERO ───────────────────────────────────────────────────── */
#hero {
  height:100vh; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 3rem 4rem;
}
#hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  opacity:.55;
}
#hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(9,9,8,.55) 100%);
  z-index:1; pointer-events:none;
}
.hero-content { position:relative; z-index:2; }

.hero-eyebrow {
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--rust);
  margin-bottom:1.2rem; opacity:0; transform:translateY(10px);
  animation:fadeUp .7s ease .5s forwards;
}
.hero-name {
  font-family:'Barlow Condensed',Helvetica,sans-serif;
  font-size:clamp(5rem,13.5vw,12rem);
  font-weight:900; line-height:.88;
  letter-spacing:-.03em; color:var(--cream);
  text-transform:uppercase;
  opacity:0; transform:translateY(28px);
  animation:fadeUp .9s ease .65s forwards;
}
.hero-name .outline {
  display:block; color:transparent;
  -webkit-text-stroke:1.5px var(--cream);
}
.hero-bottom {
  margin-top:2rem; display:flex; align-items:flex-end;
  justify-content:space-between;
  opacity:0; transform:translateY(10px);
  animation:fadeUp .7s ease .85s forwards;
}
.hero-role {
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); line-height:2.1;
}
.hero-hint {
  font-family:'Space Mono',monospace; font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--sand); text-align:right;
  border:1px solid var(--dim2); padding:.55rem 1rem;
  line-height:1.9;
}
.hero-hint em { color:var(--rust); font-style:normal; display:block; }
.hero-rule {
  position:absolute; bottom:0; left:3rem; right:3rem;
  height:1px; background:var(--dim2); z-index:2;
  opacity:0; animation:fadeIn .5s ease 1.1s forwards;
}

/* ── WORKS ──────────────────────────────────────────────────── */
#works { padding:6rem 3rem; }
.section-label {
  font-family:'Space Mono',monospace; font-size:13px;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--sand); margin-bottom:3.5rem;
  display:flex; align-items:center; gap:1.5rem;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--dim2); }

/* ── WORKS CARD GRID ─────────────────────────────────────────── */
.works-list { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:860px){ .works-list { grid-template-columns:repeat(2,1fr); } }

.work-item {
  position:relative; cursor:pointer;
  opacity:0; transform:translateY(18px);
  transition:opacity .65s ease, transform .65s ease;
}
.work-item.in-view { opacity:1; transform:translateY(0); }

/* 16:9 landscape thumb */
.work-thumb {
  position:relative; width:100%; padding-bottom:56.25%;
  overflow:hidden; background:var(--dim);
  border:1px solid var(--dim2);
}
.work-thumb img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.work-item:hover .work-thumb img { transform:scale(1.04); }

/* gradient overlay */
.work-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.88) 0%, rgba(10,9,8,.2) 50%, transparent 75%);
  z-index:1; pointer-events:none; transition:opacity .3s;
}
.work-item:hover .work-thumb::after { opacity:.7; }

/* play button */
.work-play {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.work-item:hover .work-play { opacity:1; }
.work-play-btn {
  width:52px; height:52px; border-radius:50%;
  background:rgba(192,90,50,.92); border:2px solid var(--rust);
  display:flex; align-items:center; justify-content:center;
  transform:scale(.85); transition:transform .3s;
}
.work-item:hover .work-play-btn { transform:scale(1); }
.work-play-btn svg { width:18px; height:18px; fill:var(--cream); margin-left:3px; }

/* label strip */
.work-label {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:.85rem .9rem .8rem;
}
.work-label-cat {
  font-family:'Space Mono',monospace; font-size:.46rem;
  color:var(--rust); letter-spacing:.18em; text-transform:uppercase; margin-bottom:.28rem;
}
.work-label-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1rem,1.8vw,1.3rem); font-weight:700;
  color:var(--cream); line-height:1.1; text-transform:uppercase;
  letter-spacing:-.01em; transition:letter-spacing .3s;
}
.work-item:hover .work-label-title { letter-spacing:.01em; }
.work-label-sub {
  font-family:'Space Mono',monospace; font-size:.44rem;
  color:rgba(238,235,227,.45); letter-spacing:.1em;
  margin-top:.26rem; text-transform:uppercase;
}

/* ── VIDEO MODAL ─────────────────────────────────────────────── */
#vmodal {
  position:fixed; inset:0; z-index:8000;
  background:rgba(9,9,8,0);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition:background .45s ease;
}
#vmodal.open {
  background:rgba(9,9,8,.96);
  pointer-events:all;
}
#vmodal-box {
  position:relative; width:min(88vw,1100px);
  opacity:0; transform:translateY(32px) scale(.97);
  transition:opacity .45s ease, transform .45s ease;
}
#vmodal.open #vmodal-box {
  opacity:1; transform:translateY(0) scale(1);
}
#vmodal-ratio {
  position:relative; width:100%; padding-bottom:56.25%;
  background:var(--dim); overflow:hidden;
  border:1px solid var(--dim2);
}
#vmodal-ratio iframe,
#vmodal-ratio video {
  position:absolute; inset:0; width:100%; height:100%;
  border:none;
}
#vmodal-ratio video { object-fit:contain; background:#000; }

#vmodal-meta {
  margin-top:1.5rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
}
#vmodal-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.4rem,3vw,2.2rem); font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--cream);
  line-height:1;
}
#vmodal-sub {
  font-family:'Space Mono',monospace; font-size:.6rem;
  letter-spacing:.14em; color:var(--rust); text-transform:uppercase;
  margin-top:.5rem;
}
#vmodal-close {
  flex-shrink:0; background:none; border:1px solid var(--dim2);
  color:var(--sand); font-family:'Space Mono',monospace;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1.2rem; cursor:none;
  transition:border-color .2s, color .2s;
  white-space:nowrap;
}
#vmodal-close:hover { border-color:var(--cream); color:var(--cream); }

/* ── ABOUT ───────────────────────────────────────────────────── */
#about {
  padding:8rem 3rem; border-top:1px solid var(--dim2);
  display:grid; grid-template-columns:320px 1fr 1fr; gap:5rem; align-items:start;
}
.about-photo {
  position:sticky; top:6rem;
  opacity:0; transform:translateY(22px);
  transition:opacity .9s, transform .9s;
}
.about-photo.in-view { opacity:1; transform:translateY(0); }
.about-photo img {
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top;
  display:block; filter:grayscale(100%) contrast(1.05);
  border:1px solid var(--dim2);
}
.about-photo-caption {
  font-family:'Space Mono',monospace; font-size:.5rem;
  letter-spacing:.16em; color:var(--rust); text-transform:uppercase;
  margin-top:.75rem;
}
@media(max-width:900px){
  #about { grid-template-columns:1fr; gap:3rem; }
  .about-photo { position:static; max-width:260px; }
}
.about-statement {
  font-family:'Barlow Condensed',Helvetica,sans-serif;
  font-size:clamp(2.2rem,4.2vw,3.8rem); font-weight:700;
  line-height:1.1; letter-spacing:-.02em; text-transform:uppercase;
  opacity:0; transform:translateY(22px);
  transition:opacity .8s, transform .8s;
}
.about-statement.in-view { opacity:1; transform:translateY(0); }
.about-statement em {
  font-style:italic; font-weight:300; color:var(--rust); text-transform:none;
}
.about-right {
  opacity:0; transform:translateY(22px);
  transition:opacity .8s .15s, transform .8s .15s;
}
.about-right.in-view { opacity:1; transform:translateY(0); }
.about-body { font-size:.92rem; font-weight:300; line-height:1.95; color:var(--sand); margin-bottom:3rem; }
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin-bottom:3rem; padding-top:2rem; border-top:1px solid var(--dim2);
}
.stat-n {
  font-family:'Barlow Condensed',sans-serif; font-size:3.5rem; font-weight:900;
  color:var(--cream); line-height:1; letter-spacing:-.04em;
}
.stat-label {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sand); margin-top:.4rem;
}
.tools-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.tool-tag {
  border:1px solid var(--dim2); padding:.3rem .85rem;
  font-family:'Space Mono',monospace; font-size:.55rem;
  letter-spacing:.1em; color:var(--sand); text-transform:uppercase;
  transition:border-color .22s, color .22s;
}
.tool-tag:hover { border-color:var(--rust); color:var(--cream); }

/* ── AI ─────────────────────────────────────────────────────── */
#ai-section { padding:6rem 3rem; border-top:1px solid var(--dim2); position:relative; overflow:hidden; }
.ai-bg-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(10rem,22vw,20rem);
  font-weight:900; color:rgba(238,235,227,.015);
  white-space:nowrap; pointer-events:none; letter-spacing:-.05em; text-transform:uppercase;
}
.ai-inner { position:relative; z-index:1; }
.ai-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3.5rem; gap:2rem; }
.ai-title {
  font-family:'Barlow Condensed',Helvetica,sans-serif;
  font-size:clamp(3rem,7vw,6rem); font-weight:900;
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  opacity:0; transform:translateY(18px); transition:opacity .7s, transform .7s;
}
.ai-title.in-view { opacity:1; transform:translateY(0); }
.ai-title span { color:var(--rust); display:block; }
.ai-desc {
  max-width:280px; font-size:.88rem; font-weight:300;
  color:var(--sand); line-height:1.85; text-align:right;
  opacity:0; transition:opacity .7s .2s;
}
.ai-desc.in-view { opacity:1; }

/* ── AI REEL SLIDER ───────────────────────────────────────────── */
.ai-reel-wrap { position:relative; }
.ai-reel {
  overflow:hidden;
  width:100%;
}
.ai-reel-track {
  display:flex; gap:1rem;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.ai-reel-card {
  position:relative; cursor:pointer;
  flex:0 0 calc((100vw - 6rem - 4.5 * 1rem) / 4);
  /* (viewport - section padding*2 - gaps between 4 cards) / 4 */
  min-width:0;
  opacity:1; transform:none;
  transition:opacity .3s ease;
}
.ai-reel-card.placeholder { cursor:default; }

/* slider nav buttons */
.ai-reel-nav {
  display:flex; gap:.75rem; margin-top:1.5rem; justify-content:flex-end;
}
.ai-reel-btn {
  width:44px; height:44px;
  border:1px solid var(--dim2); background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--sand);
  transition:border-color .2s, color .2s;
}
.ai-reel-btn:hover { border-color:var(--cream); color:var(--cream); }
.ai-reel-btn:disabled { opacity:.25; cursor:default; }
.ai-reel-btn:disabled:hover { border-color:var(--dim2); color:var(--sand); }
.ai-reel-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* counter */
.ai-reel-counter {
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.18em; color:var(--sand);
  display:flex; align-items:center; gap:.75rem; margin-top:1.5rem;
}
.ai-reel-counter-cur { color:var(--cream); }
.ai-reel-counter-sep { color:var(--rust); }
.ai-reel-nav-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1.5rem;
}

/* 9:16 vertical ratio */
.ai-reel-thumb {
  position:relative; width:100%; padding-bottom:177.78%;
  overflow:hidden; background:var(--dim);
  border:1px solid var(--dim2);
}
.ai-reel-thumb img,
.ai-reel-thumb video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.ai-reel-card:hover .ai-reel-thumb img { transform:scale(1.04); }

/* gradient overlay */
.ai-reel-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.85) 0%, rgba(10,9,8,.2) 45%, transparent 70%);
  z-index:1; pointer-events:none;
  transition:opacity .3s;
}
.ai-reel-card:hover .ai-reel-thumb::after { opacity:.7; }

/* play button overlay */
.ai-reel-play {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.ai-reel-card:hover .ai-reel-play { opacity:1; }
.ai-reel-play-btn {
  width:52px; height:52px; border-radius:50%;
  background:rgba(192,90,50,.92); border:2px solid var(--rust);
  display:flex; align-items:center; justify-content:center;
  transform:scale(.85); transition:transform .3s;
}
.ai-reel-card:hover .ai-reel-play-btn { transform:scale(1); }
.ai-reel-play-btn svg { width:18px; height:18px; fill:var(--cream); margin-left:3px; }

/* label at bottom */
.ai-reel-label {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:.9rem .85rem .85rem;
}
.ai-reel-num {
  font-family:'Space Mono',monospace; font-size:.48rem;
  color:var(--rust); letter-spacing:.18em; margin-bottom:.35rem;
}
.ai-reel-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700;
  color:var(--cream); line-height:1.1; text-transform:uppercase;
  letter-spacing:-.01em;
}
.ai-reel-sub {
  font-family:'Space Mono',monospace; font-size:.46rem;
  color:rgba(238,235,227,.5); letter-spacing:.1em; margin-top:.3rem;
  text-transform:uppercase;
}

/* ── VIDEO LIGHTBOX ───────────────────────────────────────────── */
#vl-modal {
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,9,8,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
#vl-modal.open { opacity:1; pointer-events:all; }
#vl-inner {
  position:relative;
  width:min(420px, 90vw);
  max-height:90vh;
}
#vl-ratio {
  position:relative; width:100%; padding-bottom:177.78%;
  background:#000; overflow:hidden;
}
#vl-ratio video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
#vl-meta {
  padding:.75rem 0 0;
  display:flex; justify-content:space-between; align-items:flex-start;
}
#vl-info {}
#vl-title-txt {
  font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700;
  color:var(--cream); text-transform:uppercase; letter-spacing:-.01em;
}
#vl-sub-txt {
  font-family:'Space Mono',monospace; font-size:.5rem;
  color:var(--sand); letter-spacing:.1em; text-transform:uppercase; margin-top:.25rem;
}
#vl-close {
  background:none; border:1px solid var(--dim2); color:var(--sand);
  font-family:'Space Mono',monospace; font-size:.52rem;
  letter-spacing:.1em; padding:.4rem .75rem; cursor:pointer;
  text-transform:uppercase; transition:border-color .2s, color .2s; flex-shrink:0;
}
#vl-close:hover { border-color:var(--cream); color:var(--cream); }
#vl-kling-link {
  display:block; text-align:center; margin-top:.6rem;
  font-family:'Space Mono',monospace; font-size:.5rem;
  letter-spacing:.1em; color:var(--rust); text-decoration:none;
  text-transform:uppercase; transition:opacity .2s;
}
#vl-kling-link:hover { opacity:.7; }

@media(max-width:768px){
  .ai-reel-card {
    flex: 0 0 calc((100vw - 3rem - 1rem) / 2);
    /* (viewport - section padding*2 - 1 gap) / 2 */
  }
}

/* Coming Soon card */
.ai-reel-thumb--empty {
  background: repeating-linear-gradient(
    45deg,
    var(--dim) 0px, var(--dim) 2px,
    var(--ink) 2px, var(--ink) 14px
  );
}
.ai-reel-coming-inner {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
}
.ai-reel-coming-icon {
  font-size:1.8rem; color:var(--rust); opacity:.5;
  animation: spin 8s linear infinite;
}
.ai-reel-coming-txt {
  font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:700;
  color:var(--sand); text-transform:uppercase; letter-spacing:.08em; text-align:center; line-height:1.1;
}
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── CLIENTS ─────────────────────────────────────────────────── */
#clients { padding:6rem 3rem; border-top:1px solid var(--dim2); }
.clients-marquee-wrap { overflow:hidden; margin-top:3rem; }
.clients-marquee {
  display:flex; gap:3.5rem;
  animation:marquee 24s linear infinite; white-space:nowrap;
}
.clients-marquee:hover { animation-play-state:paused; }
.client-name {
  font-family:'Barlow Condensed',Helvetica,sans-serif;
  font-size:2.4rem; font-weight:700; color:var(--dim2);
  letter-spacing:-.02em; text-transform:uppercase; flex-shrink:0;
  transition:color .3s; cursor:default;
}
.client-name:hover { color:var(--cream); }
.client-sep { font-size:.8rem; color:var(--rust); flex-shrink:0; align-self:center; }

/* ── CONTACT ─────────────────────────────────────────────────── */
#contact {
  padding:8rem 3rem; border-top:1px solid var(--dim2);
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:end;
}
.contact-cta {
  font-family:'Barlow Condensed',Helvetica,sans-serif;
  font-size:clamp(3.5rem,8vw,7rem); font-weight:900;
  line-height:.9; letter-spacing:-.04em; text-transform:uppercase; color:var(--cream);
  opacity:0; transform:translateY(28px); transition:opacity .8s, transform .8s;
}
.contact-cta.in-view { opacity:1; transform:translateY(0); }
.contact-cta em { color:var(--rust); font-style:italic; font-weight:300; }
.contact-right { opacity:0; transform:translateY(18px); transition:opacity .8s .2s, transform .8s .2s; }
.contact-right.in-view { opacity:1; transform:translateY(0); }
.contact-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 0; border-bottom:1px solid var(--dim2);
  font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.08em;
}
.contact-row-label { color:var(--sand); text-transform:uppercase; letter-spacing:.14em; }
.contact-row-val { color:var(--cream); text-decoration:none; transition:color .25s; }
.contact-row-val:hover { color:var(--rust); }
.contact-btn {
  display:inline-flex; align-items:center; gap:1rem; margin-top:2.5rem;
  border:1px solid var(--cream); padding:1rem 2rem;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); text-decoration:none;
  transition:background .3s, color .3s; cursor:none;
}
.contact-btn:hover { background:var(--cream); color:var(--ink); }
.contact-btn svg { transition:transform .3s; }
.contact-btn:hover svg { transform:translateX(4px); }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  padding:2rem 3rem; border-top:1px solid var(--dim2);
  display:flex; justify-content:space-between; align-items:center;
}
footer p { font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.12em; color:var(--sand); text-transform:uppercase; }

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes fadeUp  { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { to { opacity:1; } }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:768px){
  header,#hero,#works,#about,#ai-section,#clients,#contact{padding-left:1.5rem;padding-right:1.5rem;}
  #about,#contact{grid-template-columns:1fr;gap:3rem;}
  .ai-grid{grid-template-columns:repeat(2,1fr);}
  .hero-rule{left:1.5rem;right:1.5rem;}
}