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

/* ── FILM GRAIN + VIGNETTE ────────────────────────────────── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
  opacity:1;
  animation:grain 0.8s steps(1) infinite;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(232,25,44,0.07) 100%);
}
@keyframes grain{
  0%,100%{background-position:0 0}
  10%{background-position:-5% -10%}
  20%{background-position:-15% 5%}
  30%{background-position:7% -25%}
  40%{background-position:-5% 25%}
  50%{background-position:-15% 10%}
  60%{background-position:15% 0%}
  70%{background-position:0 15%}
  80%{background-position:3% 35%}
  90%{background-position:-10% 10%}
}
:root{--black:#000;--red:#E8192C;--red-dim:rgba(232,25,44,0.12);--white:#F5F5F0;--grey:#888;--muted:#333;--border:rgba(255,255,255,0.08);--font-display:"Cormorant Garamond",serif;--font-body:"Space Grotesk",sans-serif;--font-heading:"Bebas Neue",sans-serif}
html{scroll-behavior:smooth;font-size:16px}
/* body{background:var(--black);color:var(--white);font-family:var(--font-body);overflow-x:hidden;cursor:none} */
body{background:var(--black);color:var(--white);font-family:var(--font-body);overflow-x:hidden;cursor:none; transition: background-color 0.8s ease, color 0.8s ease}
body *, .nav, .nav-logo a, .section-heading, .about-bio, .aq-val, .timeline-desc, .timeline-role, .timeline-company, .service-card, .service-card-title, .work-overlay, .stat-num, .stat-label {
  transition: background-color 0.8s ease, color 0.8s ease, border-color 0.8s ease;
}

body.light-mode {
  --black: #E8E8E3;
  --white: #0A0A0A;
  --grey: #555555;
  --muted: #C0C0C0;
  --border: rgba(0, 0, 0, 0.15);
  --red-dim: rgba(232, 25, 44, 0.06);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.red{color:var(--red)}

/* CURSOR */
.cursor{position:fixed;width:8px;height:8px;background:var(--red);border-radius:50%;pointer-events:none;z-index:999999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
.cursor-follower{position:fixed;width:36px;height:36px;border:1px solid rgba(232,25,44,0.5);border-radius:50%;pointer-events:none;z-index:999998;transform:translate(-50%,-50%);transition:transform .08s ease-out,width .2s,height .2s}
body:hover .cursor{opacity:1}
a:hover~.cursor,.btn-red:hover~.cursor{width:16px;height:16px}

/* LOADER */
.loader{position:fixed;inset:0;background:var(--black);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-text{font-family:var(--font-heading);font-size:8rem;line-height:1;color:var(--white);display:block}
.loader-bar{width:200px;height:1px;background:var(--muted);margin:1rem auto;overflow:hidden}
.loader-progress{height:100%;background:var(--red);width:0;transition:width .05s linear}
.loader-percent{font-size:.75rem;letter-spacing:.2em;color:var(--grey);font-family:var(--font-body)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.5rem;mix-blend-mode:normal}
.nav-logo a{font-family:var(--font-heading);font-size:1.8rem;letter-spacing:.1em;color:var(--white)}
.nav-tagline{font-size:.65rem;letter-spacing:.25em;color:var(--grey);text-transform:uppercase}
.nav-menu-btn{background:none;border:1px solid var(--border);color:var(--white);cursor:none;padding:.6rem .9rem;display:flex;flex-direction:column;gap:5px;border-radius:2px;transition:border-color .3s}
.nav-menu-btn:hover{border-color:var(--red)}
.nav-menu-btn span{display:block;width:22px;height:1px;background:var(--white);transition:background .3s}
.nav-menu-btn:hover span{background:var(--red)}

/* MENU OVERLAY */
.menu-overlay{position:fixed;inset:0;background:var(--black);z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-close{position:absolute;top:1.5rem;right:2.5rem;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:none;transition:color .3s}
.menu-close:hover{color:var(--red)}
.menu-nav{display:flex;flex-direction:column;align-items:center;gap:.25rem}

/* ── SPLIT-TEXT MENU ANIMATION ──────────────────────────────── */
.menu-link{
  font-family:var(--font-heading);
  font-size:clamp(3rem,8vw,5.5rem);
  line-height:1;
  letter-spacing:.05em;
  color:var(--white);
  position:relative;
  display:flex;
  align-items:center;
  gap:1.5rem;
  overflow:hidden;
  padding:.15rem 0;
  transition:color .4s ease;
  cursor:none;
}
.menu-link:hover{ color:transparent; }

/* Number label */
.ml-num{
  font-family:var(--font-body);
  font-size:.65rem;
  color:var(--red);
  letter-spacing:.1em;
  flex-shrink:0;
  transition:opacity .4s;
}

/* Text wrapper */
.ml-text{
  position:relative;
  display:inline-block;
  overflow:hidden;
}

/* Top half — clips top 50% */
.ml-text::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:var(--white);
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
  transform:translateY(0) skewX(0deg);
  transition:transform .55s cubic-bezier(.16,1,.3,1), color .4s;
  pointer-events:none;
}

/* Bottom half — clips bottom 50% */
.ml-text::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:var(--white);
  clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);
  transform:translateY(0) skewX(0deg);
  transition:transform .55s cubic-bezier(.16,1,.3,1), color .4s;
  pointer-events:none;
}

/* Hover: top half flies up-left, bottom half flies down-right */
.menu-link:hover .ml-text::before{
  transform:translateY(-110%) skewX(-8deg);
  color:var(--red);
}
.menu-link:hover .ml-text::after{
  transform:translateY(110%) skewX(8deg);
  color:var(--red);
}

/* Underlying ghost text becomes red outline on hover */
.menu-link:hover .ml-text{
  -webkit-text-stroke:1px var(--red);
  color:transparent;
}
.menu-socials{display:flex;gap:2rem;margin-top:2rem}
.menu-socials a{font-size:.75rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;transition:color .3s}
.menu-socials a:hover{color:var(--red)}
.menu-footer-text{position:absolute;bottom:2rem;font-size:.7rem;color:var(--muted);letter-spacing:.15em}

/* SIDE NAV */
.side-nav{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:100;width:2.5rem}
.side-nav-items{display:flex;flex-direction:column;gap:.2rem}
.side-nav-item{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;transition:all .3s;opacity:.4}
.side-nav-item:hover,.side-nav-item.active{opacity:1}
.side-num{font-family:var(--font-body);font-size:.6rem;color:var(--red);writing-mode:horizontal-tb}
.side-label{font-size:.45rem;letter-spacing:.15em;color:var(--grey);opacity:0;transition:opacity .3s;white-space:nowrap}
.side-nav-item:hover .side-label,.side-nav-item.active .side-label{opacity:1}

/* HERO */
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-placeholder-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1a0000 0%,#000 70%)}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}

/* HERO IMAGES */
.hero-image-wrap {
  position: absolute;
  right: 12%;
  bottom: 0;
  width: 52%;
  max-width: 750px;
  height: 95%;
  z-index: 3;
  pointer-events: none;
}
.hero-img-real {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 1;
}

/* TICKER */
.ticker-wrap{position:absolute;width:140%;left:-20%;overflow:hidden;z-index:2;transform:rotate(-8deg);pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 52%,transparent 68%);mask-image:linear-gradient(to right,transparent 0%,black 8%,black 52%,transparent 68%)}
.ticker-1{top:30%}
.ticker-2{top:55%}
.ticker-track{display:flex;gap:2rem;white-space:nowrap;animation:ticker 22s linear infinite;font-family:var(--font-heading);font-size:1rem;letter-spacing:.2em;color:var(--red);background:rgba(232,25,44,.08);padding:.4rem 0;border-top:1px solid rgba(232,25,44,.3);border-bottom:1px solid rgba(232,25,44,.3)}
.ticker-reverse{animation-direction:reverse;animation-duration:28s}
.ticker-track span{padding:0 .5rem}
.dot{color:var(--red);opacity:.5}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SOUND TOGGLE ────────────────────────────────────────────── */
.sound-toggle {
  position: fixed;
  bottom: 2rem;
  left: 2.5rem;
  z-index: 1000;
  background: none;
  border: none;
  color: var(--grey);
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}
.sound-toggle:hover {
  color: var(--white);
}
.sound-toggle.playing {
  color: var(--red);
}
.sound-icon {
  font-size: 1.2rem;
  line-height: 1;
}

/* HERO CONTENT */
.hero-content{position:relative;z-index:5;padding:0 4rem 0 4rem;margin-top:2rem}
.hero-label{font-size:.7rem;letter-spacing:.3em;color:var(--grey);text-transform:uppercase;margin-bottom:1.5rem}
.hero-name{font-family:var(--font-heading);font-size:clamp(6rem,15vw,14rem);line-height:.9;letter-spacing:.02em}
.hero-name-line{display:block}
.hero-name-red{color:var(--red)}
.hero-role{font-size:.75rem;letter-spacing:.25em;color:var(--grey);margin-top:2rem;display:flex;align-items:center;gap:.75rem}
.hero-role-icon{color:var(--red);font-size:.5rem}
.hero-ghost{position:absolute;bottom:-2rem;left:0;right:0;font-family:var(--font-heading);font-size:clamp(5rem,18vw,18rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);letter-spacing:.05em;line-height:1;pointer-events:none;z-index:1;white-space:nowrap;overflow:hidden}
.hero-bottom{position:absolute;bottom:2rem;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2.5rem}
.hero-socials{display:flex;flex-direction:column;gap:.5rem}
.hero-social-link{font-size:.65rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;transition:color .3s}
.hero-social-link:hover{color:var(--red)}
.hero-scroll-hint{font-size:.65rem;letter-spacing:.2em;color:var(--grey);animation:bounce 2s infinite}
.scroll-arrow{display:inline-block;animation:arrowBounce 2s infinite}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero-avail{font-size:.6rem;letter-spacing:.2em;color:var(--grey);writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg)}

/* MANIFESTO */
.manifesto{position:relative;padding:10rem 4rem;overflow:hidden}
.manifesto-grain{position:absolute;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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.4}
.manifesto-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto}
.manifesto-label{font-size:.7rem;letter-spacing:.3em;color:var(--red);margin-bottom:3rem;text-transform:uppercase}
.manifesto-lines{display:flex;flex-direction:column;gap:.2rem}
.manifesto-line{font-family:var(--font-display);font-size:clamp(2rem,5vw,4.5rem);font-weight:700;line-height:1.1;color:var(--white)}
.manifesto-line-red{color:var(--red)}
.manifesto-divider{width:60px;height:1px;background:var(--border);margin:2rem 0}
.stats-bar{display:flex;align-items:center;gap:0;margin-top:6rem;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.stat-item{flex:1;padding:2.5rem 2rem;text-align:center;position:relative;transition:background .4s}
.stat-item:hover{background:rgba(232,25,44,0.04)}
.stat-num{font-family:var(--font-heading);font-size:3.5rem;color:var(--white);line-height:1;display:block}
.stat-plus{font-family:var(--font-heading);font-size:2.5rem;color:var(--red)}
.stat-label{display:block;font-size:.6rem;letter-spacing:.25em;color:var(--grey);margin-top:.5rem;text-transform:uppercase}
.stat-divider{width:1px;height:80px;background:var(--border);flex-shrink:0}

/* SECTION COMMON */
.section-label{font-size:.65rem;letter-spacing:.3em;color:var(--red);text-transform:uppercase;margin-bottom:1.5rem}
.section-heading{font-family:var(--font-heading);font-size:clamp(3rem,8vw,7rem);line-height:.95;letter-spacing:.03em}

/* ABOUT */
.about{padding:8rem 4rem;border-top:1px solid var(--border)}
.about-inner{display:grid;grid-template-columns:1fr 1.6fr;gap:6rem;max-width:1300px;margin:0 auto;align-items:start}
.about-photo-wrap{position:relative;margin-bottom:2rem}
.about-photo-placeholder{width:100%;aspect-ratio:3/4;background:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.75rem;letter-spacing:.2em;color:var(--grey);text-align:center;position:relative;z-index:1}
.about-photo-border{position:absolute;inset:-8px;border:1px solid var(--red);z-index:0;opacity:.4}
.about-quick{display:flex;flex-direction:column;gap:.75rem}
.about-quick-item{display:flex;gap:1rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border)}
.aq-label{font-size:.6rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;width:80px;flex-shrink:0}
.aq-val{font-size:.8rem;color:var(--white)}
.aq-available{color:#00c864}
.about-bio{font-size:1rem;line-height:1.8;color:var(--grey);margin:1.5rem 0 2rem}

/* TIMELINE */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;margin:2rem 0}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--border)}
.timeline-item{padding:1.5rem 0 1.5rem 1.5rem;border-left:1px solid transparent;position:relative;transition:border-color .3s}
.timeline-item:hover{border-left-color:var(--border)}
.timeline-current{border-left-color:var(--red)!important}
.timeline-current .timeline-role{color:var(--red)}
.timeline-badge{display:inline-block;font-size:.55rem;letter-spacing:.2em;color:var(--red);border:1px solid var(--red);padding:.2rem .6rem;border-radius:20px;margin-bottom:.5rem;text-transform:uppercase}
.timeline-role{font-size:1rem;font-weight:600;color:var(--white);margin-bottom:.2rem}
.timeline-company{font-size:.8rem;color:var(--grey)}
.timeline-date{font-size:.65rem;color:var(--red);letter-spacing:.1em;margin:.2rem 0}
.timeline-desc{font-size:.8rem;color:var(--muted);margin-top:.4rem;line-height:1.6}

/* SKILLS */
.skills-wrap{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.skills-group-label{font-size:.6rem;letter-spacing:.2em;color:var(--red);margin-bottom:.5rem;text-transform:uppercase}
.skills-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.skills-tags span{font-size:.7rem;letter-spacing:.1em;color:var(--grey);border:1px solid var(--border);padding:.3rem .7rem;border-radius:2px;transition:all .3s;text-transform:uppercase}
.skills-tags span:hover{border-color:var(--red);color:var(--white)}

/* BUTTONS */
.btn-red{display:inline-flex;align-items:center;gap:.75rem;background:var(--red);color:var(--white);padding:1rem 2rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;border:none;cursor:none;transition:background .3s,transform .2s;margin-top:1rem}
.btn-red:hover{background:#c0111f;transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:.75rem;background:transparent;color:var(--white);padding:1rem 2rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--border);transition:all .3s}
.btn-outline:hover{border-color:var(--red);color:var(--red)}

/* WORK */
.work{padding:8rem 4rem;border-top:1px solid var(--border)}
.work-inner{max-width:1300px;margin:0 auto}
.work-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}
.work-all-link{font-size:.7rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;transition:color .3s;white-space:nowrap}
.work-all-link:hover{color:var(--red)}
.projects-list{display:flex;flex-direction:column;gap:0}
.project-item{display:grid;grid-template-columns:80px 1fr 1fr;gap:3rem;align-items:center;padding:4rem 0;border-bottom:1px solid var(--border);transition:background .3s}
.project-item:hover{background:rgba(255,255,255,.01)}
.project-item-reverse{grid-template-columns:80px 1fr 1fr}
.project-num{font-family:var(--font-heading);font-size:3rem;color:var(--muted);line-height:1}
.project-image{overflow:hidden}
.project-img-placeholder{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:.65rem;letter-spacing:.15em;color:var(--grey);text-align:center;text-transform:uppercase;transition:transform .4s ease}
.project-placeholder-1{background:linear-gradient(135deg,#0d0d0d,#1a0000)}
.project-placeholder-2{background:linear-gradient(135deg,#0d0d0d,#00001a)}
.project-placeholder-3{background:linear-gradient(135deg,#0d0d0d,#0a0a00)}
.project-item:hover .project-img-placeholder{transform:scale(1.03)}
.project-tags{display:flex;gap:.5rem;margin-bottom:.75rem}
.project-tags span{font-size:.55rem;letter-spacing:.15em;color:var(--red);border:1px solid rgba(232,25,44,.3);padding:.2rem .5rem;text-transform:uppercase}
.project-title{font-family:var(--font-heading);font-size:2rem;margin-bottom:.75rem;line-height:1.1}
.project-desc{font-size:.85rem;color:var(--grey);line-height:1.7;margin-bottom:1rem}
.project-link{font-size:.65rem;letter-spacing:.2em;color:var(--red);text-transform:uppercase;transition:opacity .3s}
.project-link:hover{opacity:.7}

/* BLOG */
.blog{padding:8rem 4rem;border-top:1px solid var(--border);background:rgba(255,255,255,.01)}
.blog-inner{max-width:1300px;margin:0 auto}
.blog-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blog-card{border:1px solid var(--border);transition:border-color .3s,transform .3s}
.blog-card:hover{border-color:var(--red);transform:translateY(-4px)}
.blog-card-img{overflow:hidden}
.blog-img-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#111,#1a0000)}
.blog-card-body{padding:1.5rem}
.blog-tag{font-size:.55rem;letter-spacing:.2em;color:var(--red);text-transform:uppercase}
.blog-title{font-size:1rem;font-weight:600;margin:.75rem 0 .5rem;line-height:1.4}
.blog-excerpt{font-size:.8rem;color:var(--grey);line-height:1.6}
.blog-meta{display:flex;justify-content:space-between;margin-top:1rem;font-size:.65rem;color:var(--muted);letter-spacing:.1em}

/* TOOLS */
.tools-section{padding:8rem 4rem;border-top:1px solid var(--border)}
.tools-inner{max-width:1300px;margin:0 auto}
.tools-scroll-row{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1rem;margin:3rem 0;scrollbar-width:none}
.tools-scroll-row::-webkit-scrollbar{display:none}
.tool-card{flex-shrink:0;width:180px;border:1px solid var(--border);padding:1.5rem;text-align:center;transition:all .3s;cursor:default}
.tool-card:hover{border-color:var(--red);transform:translateY(-4px)}
.tool-icon{font-family:var(--font-heading);font-size:2.5rem;color:var(--white);margin-bottom:.75rem}
.tool-name{font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.tool-cat{font-size:.55rem;letter-spacing:.15em;color:var(--grey);text-transform:uppercase;margin-bottom:.75rem}
.tool-badge{font-size:.6rem;color:var(--red);letter-spacing:.1em}
.tools-cta{margin-top:2rem;text-align:center}

/* CONTACT */
.contact{position:relative;padding:10rem 4rem;border-top:1px solid var(--border);overflow:hidden}
.contact-bg-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(232,25,44,.08) 0%,transparent 70%);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.contact-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;text-align:left}
.contact-heading{font-family:var(--font-heading);font-size:clamp(3rem,8vw,7rem);line-height:.95;letter-spacing:.03em;margin:1rem 0}
.contact-sub{font-size:.9rem;color:var(--grey);margin:1.5rem 0 3rem}
.contact-form{text-align:left;display:flex;flex-direction:column;gap:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
.form-group label{font-size:.6rem;letter-spacing:.2em;color:var(--grey);text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{background:transparent;border:1px solid var(--border);color:var(--white);padding:.85rem 1rem;font-family:var(--font-body);font-size:.9rem;transition:border-color .3s;outline:none;-webkit-appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red)}
.form-group select option{background:#111;color:var(--white)}
.form-group textarea{resize:vertical}
.btn-submit{width:100%;justify-content:center;font-size:.8rem;padding:1.2rem}
.form-success{display:none;text-align:center;color:#00c864;font-size:.8rem;letter-spacing:.1em;padding:1rem;border:1px solid #00c864}
.form-success.show{display:block}
.contact-or{text-align:center;font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin:2rem 0}
.contact-direct{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.contact-email,.contact-phone{font-size:1.1rem;color:var(--grey);transition:color .3s;letter-spacing:.05em}
.contact-email:hover,.contact-phone:hover{color:var(--red)}

/* FOOTER */
.footer{padding:4rem;border-top:1px solid var(--border)}
.footer-inner{max-width:1300px;margin:0 auto}
.footer-top{display:flex;align-items:center;gap:2rem;margin-bottom:2rem}
.footer-logo{font-family:var(--font-heading);font-size:3rem;color:var(--white)}
.footer-tagline{font-size:.75rem;color:var(--muted);letter-spacing:.1em}
.footer-links,.footer-socials{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1.5rem}
.footer-links a,.footer-socials a{font-size:.7rem;letter-spacing:.15em;color:var(--grey);text-transform:uppercase;transition:color .3s}
.footer-links a:hover,.footer-socials a:hover{color:var(--red)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:1.5rem;font-size:.65rem;color:var(--muted);letter-spacing:.1em}
.footer-top-btn{color:var(--red);transition:opacity .3s}
.footer-top-btn:hover{opacity:.7}

/* ANIMATIONS */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal-up.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}

/* ── DIAGONAL MARQUEE RIBBON ──────────────────────────────── */
.marquee-ribbon{
  position:relative;
  width:120%;
  left:-10%;
  overflow:hidden;
  padding:.6rem 0;
  background:var(--red);
  transform:rotate(-2.5deg);
  z-index:2;
  margin:4rem 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.marquee-ribbon-inner{
  display:flex;
  gap:3rem;
  white-space:nowrap;
  animation:marquee-scroll 18s linear infinite;
  font-family:var(--font-heading);
  font-size:1.1rem;
  letter-spacing:.3em;
  color:var(--white);
}
.marquee-ribbon.reverse .marquee-ribbon-inner{animation-direction:reverse}
.marquee-ribbon-sep{opacity:.5;margin:0 .5rem}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* RESPONSIVE */
@media(max-width:1024px){
  .about-inner{grid-template-columns:1fr}
  .project-item{grid-template-columns:60px 1fr}
  .project-item .project-info{grid-column:2}
}
@media(max-width:768px){
  .nav{padding:1rem 1.5rem}
  .nav-tagline{display:none}
  .side-nav{display:none}
  .hero-content{padding:0 1.5rem}
  .hero-name{font-size:clamp(4rem,18vw,8rem)}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:1rem;bottom:4rem;padding:0 1.5rem}
  .hero-avail{writing-mode:horizontal-tb;transform:none}
  .manifesto,.about,.work,.blog,.tools-section,.contact{padding:5rem 1.5rem}
  .manifesto-line{font-size:clamp(1.5rem,6vw,2.5rem)}
  .stats-bar{flex-direction:column}
  .stat-divider{width:80%;height:1px}
  .blog-grid{grid-template-columns:1fr}
  .project-item{grid-template-columns:1fr;gap:1rem}
  .project-num{display:none}
  .form-row{grid-template-columns:1fr}
  .menu-link{font-size:3rem}
}

/* REAL PHOTO STYLING */
.about-photo-wrap img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top center;
  display:block;
  filter:grayscale(10%) contrast(1.05);
  transition:filter .4s ease, transform .4s ease;
}
.about-photo-wrap:hover img{
  filter:grayscale(0%) contrast(1.1);
  transform:scale(1.02);
}