:root{
  --bg:#050505;
  --panel:#0a0a0a;
  --ink:#f2eee8;
  --muted:#aaa39b;
  --line:rgba(255,255,255,.12);
  --orange:#ff6b2c;
  --orange-2:#ff3d00;
  --blue:#5e6cff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

a{color:inherit}
::selection{background:var(--orange);color:#000}

.noise{
  position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; width:440px; height:440px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,rgba(255,107,44,.11) 0%,rgba(255,107,44,.055) 32%,transparent 70%);
  transform:translate(-50%,-50%) scale(.92); filter:blur(10px);
  opacity:.72; transition:opacity .28s ease, transform .28s ease, background .28s ease;
  will-change:left,top,transform;
}
.cursor-glow.is-nav{
  opacity:1; transform:translate(-50%,-50%) scale(1.12);
  background:radial-gradient(circle,rgba(255,107,44,.24) 0%,rgba(255,107,44,.095) 34%,transparent 70%);
}
.cursor-glow.is-interactive{opacity:.92;transform:translate(-50%,-50%) scale(1.02)}

.topbar{
  position:fixed; inset:0 0 auto; height:78px; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw;
  background:linear-gradient(to bottom,rgba(5,5,5,.9),rgba(5,5,5,.35),transparent);
  backdrop-filter:blur(8px);
}
.mini-brand{
  text-decoration:none; font-weight:900; letter-spacing:-.06em; font-size:1.05rem;
}
.mini-brand span{color:var(--orange); margin-left:2px}
.nav{display:flex;gap:30px}
.nav a{font-size:.78rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; color:#d5d0ca}
.top-cta{
  text-decoration:none; padding:11px 16px; border:1px solid var(--line); border-radius:999px;
  font-weight:600; font-size:.82rem;
}

.hero{
  min-height:100svh;
  padding:120px 4vw 50px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 80% 88%, rgba(255,107,44,.24), transparent 28%),
    #050505;
}
.hero-orbit{
  position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;
  filter:blur(.1px); transform:rotate(-14deg);
}
.orbit-a{width:48vw;height:48vw;right:-14vw;top:4vh}
.orbit-b{width:25vw;height:25vw;right:8vw;bottom:-10vw;border-color:rgba(255,107,44,.14)}

.hero-meta{
  display:flex; justify-content:space-between; gap:20px;
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  color:#a9a39c; margin-bottom:36px; position:relative; z-index:2;
}
.name-stack{position:relative;z-index:2}
.first-name{
  display:block; font-size:clamp(1.5rem,3vw,3rem); font-weight:300; letter-spacing:-.05em;
  margin-left:.25vw;
}
.last-name{
  margin:0;
  font-size:clamp(5.8rem,16.5vw,17rem);
  line-height:.75;
  letter-spacing:-.085em;
  font-weight:900;
  background:linear-gradient(100deg,#f4f0eb 0%,#bab8b7 54%,#ff6b2c 112%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-bottom{
  margin-top:70px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px;
  position:relative;z-index:2;
}
.hero-copy{max-width:670px; font-size:clamp(1rem,1.7vw,1.35rem); line-height:1.55; color:#d2ccc5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 22px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.85rem;letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.primary{background:var(--orange);color:#0a0a0a}
.ghost{border:1px solid var(--line);color:#fff}
.light{background:#f2eee8;color:#050505}
.scroll-note{margin-top:55px;font-size:.64rem;font-weight:700;letter-spacing:.14em;color:#777}

.panel{position:relative;z-index:1;padding:120px 4vw}
.eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.16em;color:var(--orange);margin-bottom:20px}
.eyebrow.light{color:#d5cec5}

.statement{background:#0a0a0a;border-top:1px solid var(--line)}
.statement-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
.statement h2,.section-head h2,.feature-copy h2,.launch h2,.process h2,.quote h2,.contact h2{
  margin:0; font-size:clamp(3rem,6vw,6.3rem); line-height:.94; letter-spacing:-.065em; font-weight:800;
}
.statement h2 span,.launch h2 span,.quote h2 span{color:var(--orange)}
.statement p,.section-head>p,.feature-copy p{
  color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:560px
}

.services{background:#080808}
.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;margin-bottom:55px}
.section-head>p{justify-self:end}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1200px}
.service-card{
  min-height:650px;
  padding:28px;border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg,#101010,#090909);
  display:flex;flex-direction:column;gap:26px;
  transform-style:preserve-3d; transition:transform .18s ease,border-color .18s ease;
}
.service-card:hover{border-color:rgba(255,107,44,.5)}
.accent-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,107,44,.20),transparent 28%),
    linear-gradient(180deg,#12100f,#090909);
}
.card-index{font-size:.72rem;font-weight:800;color:#6e6964}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:.63rem;font-weight:800;letter-spacing:.13em;color:#cbc5be}
.service-card h3{font-size:clamp(2.2rem,4vw,4.3rem);letter-spacing:-.06em;line-height:1;margin:20px 0 12px}
.service-card p{color:#aaa39b;line-height:1.6;max-width:420px}
.price{margin-top:auto;color:#8f8983;font-size:.82rem}
.price strong{display:block;color:#f3eee8;font-size:1.75rem;margin:4px 0}
.service-card ul{list-style:none;padding:20px 0 0;margin:0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:.88rem}
.service-card li:before{content:"—";margin-right:10px;color:var(--orange)}
.card-link{font-weight:700;text-decoration:none;margin-top:8px;font-size:.88rem}

.feature-work{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center;
  background:
    radial-gradient(circle at 78% 40%,rgba(94,108,255,.08),transparent 25%),
    #050505;
}
.media-stage{min-width:0}
.media-main{
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(circle at 70% 80%,rgba(255,107,44,.28),transparent 28%),
    linear-gradient(135deg,#111,#060606 62%);
  display:grid;place-items:center;position:relative;
}
.placeholder-label{position:absolute;left:18px;top:18px;font-size:.62rem;font-weight:800;letter-spacing:.13em;color:#9b958f}
.play{
  width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:1.15rem;background:rgba(255,255,255,.04);backdrop-filter:blur(7px);
}
.media-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.thumb{
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,#111,#080808);display:flex;align-items:flex-end;padding:12px
}
.thumb span{font-size:.7rem;font-weight:800;color:#777}

.launch{
  background:
    radial-gradient(circle at 72% 23%,rgba(255,107,44,.28),transparent 24%),
    linear-gradient(135deg,#ff6b2c 0%,#ff4e10 50%,#ea3500 100%);
  color:#090909;
}
.launch-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}
.launch .eyebrow{color:#1a120e}
.launch h2 span{color:#0b0b0b}
.launch p{max-width:580px;line-height:1.6;font-weight:400}
.launch-side{background:rgba(0,0,0,.82);color:#fff;border-radius:24px;padding:30px}
.launch-price small{display:block;color:#8f8983}
.launch-price strong{display:block;font-size:clamp(2.4rem,4vw,4rem);letter-spacing:-.055em;margin:6px 0}
.launch-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;border-top:1px solid var(--line);margin:25px 0;padding-top:22px}
.launch-list span{font-size:.84rem;color:#cbc5be}

.process{background:#080808}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:55px}
.step{padding:26px 22px 20px 0;border-right:1px solid var(--line);min-height:260px}
.step:not(:first-child){padding-left:22px}
.step:last-child{border-right:0}
.step>span{font-size:.72rem;font-weight:800;color:var(--orange)}
.step h3{font-size:1.35rem;margin:72px 0 10px}
.step p{color:#918b84;line-height:1.55;font-size:.9rem}

.quote{background:#050505;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote>p{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#7c766f;text-transform:uppercase}
.quote h2{max-width:1200px;margin-top:18px}

.contact{background:#050505;padding-bottom:45px}
.contact-top h2{max-width:1050px}
.contact-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border-top:1px solid var(--line)}
.contact-link{
  display:flex;align-items:center;justify-content:space-between;
  min-height:100px;padding:0 12px 0 0;
  text-decoration:none;font-size:1.45rem;font-weight:700;
  border-bottom:1px solid var(--line)
}
.contact-link:first-child{border-right:1px solid var(--line);padding-right:28px}
.contact-link:last-child{padding-left:28px}
.contact-link span{color:var(--orange)}
.contact-footer{display:flex;justify-content:space-between;gap:20px;margin-top:100px;color:#716b65;font-size:.68rem;font-weight:700;letter-spacing:.1em}

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)
}
.reveal.in{opacity:1;transform:none}

@media (max-width: 1000px){
  .nav{display:none}
  .statement-grid,.section-head,.feature-work,.launch-inner{grid-template-columns:1fr}
  .section-head>p{justify-self:start}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:auto}
  .hero-bottom{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .launch-list{grid-template-columns:1fr}
}

@media (max-width: 700px){
  .topbar{height:66px}
  .hero{padding-top:100px}
  .hero-meta{flex-direction:column;gap:7px}
  .first-name{font-size:1.45rem}
  .last-name{font-size:clamp(4.6rem,22vw,8rem);line-height:.8}
  .hero-bottom{margin-top:48px}
  .panel{padding:88px 5vw}
  .service-grid{gap:12px}
  .timeline{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .step:not(:first-child){padding-left:0}
  .step h3{margin-top:36px}
  .contact-actions{grid-template-columns:1fr}
  .contact-link:first-child{border-right:0;padding-right:0}
  .contact-link:last-child{padding-left:0}
  .contact-footer{flex-direction:column;margin-top:70px}
  .cursor-glow{display:none}
}


/* Theme controls */
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink);
  border-radius:999px;min-height:40px;padding:0 13px;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease
}
.theme-icon{font-size:1rem;line-height:1}
.theme-toggle:hover{background:rgba(255,255,255,.08)}

/* Light mode */
html[data-theme="light"]{
  --bg:#f3efe8;
  --panel:#ece7de;
  --ink:#0b0b0b;
  --muted:#625e58;
  --line:rgba(10,10,10,.14);
  --orange:#ff6422;
  --orange-2:#ef3f00;
  --blue:#6670ff;
}
html[data-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-theme="light"] .noise{opacity:.025;mix-blend-mode:multiply}
html[data-theme="light"] .cursor-glow{
  background:radial-gradient(circle,rgba(255,100,34,.13),transparent 68%)
}
html[data-theme="light"] .topbar{
  background:linear-gradient(to bottom,rgba(243,239,232,.95),rgba(243,239,232,.62),transparent)
}
html[data-theme="light"] .nav a{color:#3c3935}
html[data-theme="light"] .top-cta{background:#0b0b0b;color:#fff;border-color:#0b0b0b}
html[data-theme="light"] .theme-toggle{background:rgba(10,10,10,.04);color:#0b0b0b}
html[data-theme="light"] .theme-toggle:hover{background:rgba(10,10,10,.08)}
html[data-theme="light"] .hero{
  background:
    radial-gradient(circle at 80% 88%, rgba(255,107,44,.17), transparent 28%),
    #f3efe8;
}
html[data-theme="light"] .hero-meta{color:#67615b}
html[data-theme="light"] .last-name{
  background:linear-gradient(100deg,#111 0%,#5a5651 54%,#ff6422 112%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
html[data-theme="light"] .hero-copy{color:#3f3b37}
html[data-theme="light"] .ghost{color:#0b0b0b;border-color:rgba(10,10,10,.18)}
html[data-theme="light"] .scroll-note{color:#7c756f}
html[data-theme="light"] .statement{background:#ece7de;border-top-color:var(--line)}
html[data-theme="light"] .services{background:#f7f3ed}
html[data-theme="light"] .service-card{
  background:linear-gradient(180deg,#fff,#f0ebe4);
  border-color:rgba(10,10,10,.12);
  box-shadow:0 20px 55px rgba(23,18,12,.06)
}
html[data-theme="light"] .service-card:hover{border-color:rgba(255,100,34,.55)}
html[data-theme="light"] .accent-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,100,34,.16),transparent 28%),
    linear-gradient(180deg,#fff8f2,#f3ebe4)
}
html[data-theme="light"] .card-index{color:#847e77}
html[data-theme="light"] .pill{color:#4c4843;border-color:rgba(10,10,10,.15)}
html[data-theme="light"] .service-card p{color:#68625c}
html[data-theme="light"] .price{color:#736d66}
html[data-theme="light"] .price strong{color:#111}
html[data-theme="light"] .feature-work{
  background:
    radial-gradient(circle at 78% 40%,rgba(94,108,255,.07),transparent 25%),
    #f3efe8
}
html[data-theme="light"] .media-main{
  border-color:rgba(10,10,10,.12);
  background:
    radial-gradient(circle at 70% 80%,rgba(255,107,44,.20),transparent 28%),
    linear-gradient(135deg,#ddd7cf,#f6f2ec 62%)
}
html[data-theme="light"] .placeholder-label{color:#635e57}
html[data-theme="light"] .play{
  border-color:rgba(10,10,10,.18);
  background:rgba(255,255,255,.42);
  color:#111
}
html[data-theme="light"] .thumb{
  border-color:rgba(10,10,10,.12);
  background:linear-gradient(135deg,#e8e1d8,#f7f3ed)
}
html[data-theme="light"] .thumb span{color:#6f6962}
html[data-theme="light"] .process{background:#f7f3ed}
html[data-theme="light"] .step p{color:#706962}
html[data-theme="light"] .quote{
  background:#f3efe8;
  border-color:rgba(10,10,10,.12)
}
html[data-theme="light"] .quote>p{color:#77706a}
html[data-theme="light"] .contact{background:#0b0b0b;color:#fff}
html[data-theme="light"] .contact .eyebrow{color:#bbb5ae}
html[data-theme="light"] .contact-link{border-color:rgba(255,255,255,.13)}
html[data-theme="light"] .contact-footer{color:#817b75}

@media (max-width:700px){
  .theme-label{display:none}
  .theme-toggle{width:40px;padding:0;justify-content:center}
}

/* Portfolio edition */
.about{padding:clamp(80px,10vw,160px) 4vw;background:#090909;position:relative}
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:8vw;align-items:start;margin-top:55px}
.about h2{font-size:clamp(3.5rem,8vw,9rem);line-height:.95;letter-spacing:-.065em;font-weight:300;margin:0}
.about h2 span{font-weight:900;color:var(--orange,#ff6b2c)}
.about-copy{max-width:520px;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.65}
.about-copy p{margin:0 0 25px}
.discipline-note{margin:45px 0 0;color:#999;font-size:.9rem}
.contact-pending{color:#999;font-size:.8rem;margin:25px 0}
.contact-link[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
html[data-theme="light"] .about{background:#f3efe8}
html[data-theme="light"] .discipline-note,html[data-theme="light"] .contact-pending{color:#777}
@media(max-width:700px){.about-grid{grid-template-columns:1fr;gap:35px}.about{padding:80px 6vw}}

/* Portfolio V2 */
.feature-work{align-items:start}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.project-card{appearance:none;border:1px solid var(--line);padding:0;margin:0;background:#080808;color:var(--ink);border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;position:relative;min-width:0;transition:transform .25s ease,border-color .25s ease}
.project-card:hover{transform:translateY(-4px);border-color:rgba(255,107,44,.48)}
.project-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#050505}
.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 42%);pointer-events:none}
.project-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px}
.project-meta strong{font-size:.72rem;letter-spacing:.1em}
.project-meta em{font-size:.72rem;font-style:normal;font-weight:700;color:#ddd6ce}
.project-modal{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:3vw}
.project-modal.is-open{display:grid}
.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);cursor:pointer}
.modal-dialog{position:relative;z-index:1;width:min(1280px,94vw);background:#080808;border:1px solid rgba(255,255,255,.15);border-radius:18px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.55)}
.modal-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.modal-close{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;letter-spacing:0;text-transform:none}
.modal-video{display:block;width:100%;aspect-ratio:16/9;background:#000}
body.modal-open{overflow:hidden}
@media(max-width:1000px){.project-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.project-grid{grid-template-columns:1fr}.project-meta{padding:14px}.project-modal{padding:12px}.modal-dialog{width:100%}}

/* Portfolio V2.1 — one main project + interchangeable thumbnails */
.portfolio-showcase{min-width:0}
.main-project{appearance:none;border:1px solid var(--line);padding:0;margin:0;width:100%;background:#080808;color:var(--ink);border-radius:22px;overflow:hidden;cursor:pointer;text-align:left;position:relative;transition:transform .25s ease,border-color .25s ease}
.main-project:hover{transform:translateY(-3px);border-color:rgba(255,107,44,.48)}
.main-project-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#050505}
.main-project:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 38%);pointer-events:none}
.project-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.project-thumb{appearance:none;border:1px solid var(--line);padding:0;margin:0;background:#080808;color:var(--ink);border-radius:14px;overflow:hidden;cursor:pointer;position:relative;text-align:left;transition:border-color .2s ease,transform .2s ease,opacity .2s ease;opacity:.62}
.project-thumb:hover,.project-thumb:focus-visible{opacity:1;transform:translateY(-2px)}
.project-thumb.is-active{opacity:1;border-color:rgba(255,107,44,.8)}
.project-thumb video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#050505}
.project-thumb span{position:absolute;left:10px;bottom:9px;z-index:2;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-shadow:0 1px 8px #000}
.project-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);pointer-events:none}
@media(max-width:700px){.project-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.main-project{border-radius:16px}}



/* Pointer-following interaction system */
@media (pointer:fine){
  html, body, a, button, .main-project, .project-thumb{cursor:none !important}
  .custom-cursor-dot,.custom-cursor-ring{
    position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;z-index:2000;
    transform:translate(-50%,-50%);will-change:left,top,width,height,opacity,border-color,background;
  }
  .custom-cursor-dot{
    width:6px;height:6px;background:var(--orange);
    box-shadow:0 0 14px rgba(255,107,44,.52);
  }
  .custom-cursor-ring{
    width:28px;height:28px;border:1px solid rgba(255,255,255,.48);
    transition:width .18s ease,height .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease;
  }
  .custom-cursor-ring.is-hover{
    width:46px;height:46px;border-color:rgba(255,107,44,.72);background:rgba(255,107,44,.075);
  }
  .custom-cursor-ring.is-nav{
    width:38px;height:38px;border-color:rgba(255,107,44,.86);background:rgba(255,107,44,.06);
  }
}
@media (pointer:coarse), (max-width:700px){
  .custom-cursor-dot,.custom-cursor-ring{display:none!important}
  .cursor-glow{display:none!important}
}

html[data-theme="light"] .cursor-glow{
  background:radial-gradient(circle,rgba(255,100,34,.09) 0%,rgba(255,100,34,.04) 32%,transparent 70%);
}
html[data-theme="light"] .cursor-glow.is-nav{
  background:radial-gradient(circle,rgba(255,100,34,.18) 0%,rgba(255,100,34,.075) 34%,transparent 70%);
}
html[data-theme="light"] .custom-cursor-ring{border-color:rgba(10,10,10,.42)}

/* V2.4 — continuous page glow + topbar divider */
.cursor-glow{
  z-index:90;
  opacity:.58;
  width:460px;
  height:460px;
  mix-blend-mode:screen;
}
.topbar{
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,107,44,.025);
}
.cursor-glow.is-nav{
  opacity:.98;
  transform:translate(-50%,-50%) scale(1.08);
}
html[data-theme="light"] .cursor-glow{mix-blend-mode:multiply;opacity:.42}
html[data-theme="light"] .topbar{
  border-bottom-color:rgba(10,10,10,.12);
  box-shadow:0 1px 0 rgba(255,100,34,.035);
}
@media (pointer:coarse), (max-width:700px){
  .cursor-glow{display:none!important}
}

/* V2.5 — floating topbar hover */
.topbar{
  border-bottom:0 !important;
  box-shadow:none !important;
  transition:box-shadow .28s ease, background .28s ease, backdrop-filter .28s ease;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-22px;
  height:24px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(to bottom, rgba(255,107,44,.13), rgba(255,107,44,.045) 38%, transparent 100%);
  filter:blur(9px);
  transform:translateY(-7px) scaleY(.72);
  transform-origin:top;
  transition:opacity .28s ease, transform .28s ease;
}
.topbar.is-lifted{
  box-shadow:0 7px 22px rgba(255,107,44,.075), 0 2px 7px rgba(0,0,0,.20) !important;
}
.topbar.is-lifted::after{
  opacity:1;
  transform:translateY(0) scaleY(1);
}
html[data-theme="light"] .topbar{
  border-bottom:0 !important;
  box-shadow:none !important;
}
html[data-theme="light"] .topbar::after{
  background:linear-gradient(to bottom, rgba(255,100,34,.12), rgba(255,100,34,.035) 40%, transparent 100%);
}
html[data-theme="light"] .topbar.is-lifted{
  box-shadow:0 8px 24px rgba(255,100,34,.08), 0 2px 8px rgba(30,20,10,.10) !important;
}
@media (pointer:coarse), (max-width:700px){
  .topbar::after{display:none}
  .topbar.is-lifted{box-shadow:none !important}
}


/* Animated portfolio exchange */
.main-project,
.project-thumb{
  will-change:transform, opacity;
}
.main-project.is-swapping,
.project-thumb.is-swapping{
  opacity:.08;
  transform:scale(.985);
  transition:opacity .18s ease, transform .25s ease;
}
.project-swap-ghost{
  position:fixed !important;
  z-index:1200 !important;
  overflow:hidden;
  transform:none !important;
  opacity:1 !important;
  transition:
    left .58s cubic-bezier(.22,1,.36,1),
    top .58s cubic-bezier(.22,1,.36,1),
    width .58s cubic-bezier(.22,1,.36,1),
    height .58s cubic-bezier(.22,1,.36,1),
    border-radius .58s cubic-bezier(.22,1,.36,1),
    box-shadow .58s ease !important;
  box-shadow:0 20px 60px rgba(0,0,0,.28), 0 8px 30px rgba(255,107,44,.10);
}
.project-swap-ghost video{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (prefers-reduced-motion: reduce){
  .project-swap-ghost{transition:none !important}
  .main-project.is-swapping,.project-thumb.is-swapping{transition:none !important}
}


/* Case-study bubble over the featured project */
.main-project{position:relative}
.case-bubble{
  position:absolute;
  z-index:5;
  left:18px;
  bottom:58px;
  width:min(310px,calc(100% - 36px));
  padding:17px 18px 18px;
  text-align:left;
  color:#f2eee8;
  background:rgba(8,8,8,.88);
  border:1px solid rgba(255,255,255,.13);
  border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 8px 32px rgba(255,107,44,.09);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  opacity:0;
  transform:translateY(13px) scale(.975);
  transform-origin:left bottom;
  pointer-events:none;
  transition:opacity .36s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.case-bubble::before{
  content:"";
  position:absolute;
  left:-1px;top:-1px;bottom:-1px;width:3px;
  background:var(--orange);
  border-radius:4px 0 0 4px;
  opacity:.9;
}
.case-bubble.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.case-bubble-kicker{
  display:block;
  margin-bottom:8px;
  font-size:.57rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--orange);
}
.case-bubble-title{
  display:block;
  font-size:1.22rem;
  line-height:1;
  letter-spacing:-.035em;
}
.case-bubble-type{
  display:block;
  margin-top:5px;
  font-size:.67rem;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#aaa39b;
}
.case-bubble-desc{
  margin:12px 0 0;
  font-size:.75rem;
  line-height:1.5;
  color:#c7c0b9;
  font-weight:400;
}
html[data-theme="light"] .case-bubble{
  color:#111;
  background:rgba(244,239,232,.91);
  border-color:rgba(10,10,10,.14);
  box-shadow:0 18px 45px rgba(34,24,15,.15),0 8px 28px rgba(255,100,34,.08);
}
html[data-theme="light"] .case-bubble-type{color:#6f6962}
html[data-theme="light"] .case-bubble-desc{color:#49443f}

@media(max-width:700px){
  .case-bubble{
    left:10px;
    bottom:46px;
    width:min(260px,calc(100% - 20px));
    padding:13px 14px 14px;
  }
  .case-bubble-desc{font-size:.68rem;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){
  .case-bubble{transition:opacity .15s ease;transform:none}
}


/* Compact case-study footer: replaces the floating card visually */
.case-bubble{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  min-height:132px;
  padding:58px 20px 18px !important;
  display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-areas:
    "kicker title type"
    "desc desc desc";
  column-gap:10px;
  row-gap:7px;
  align-items:end;
  color:#f4f0eb !important;
  background:linear-gradient(
    to top,
    rgba(4,4,4,.92) 0%,
    rgba(4,4,4,.68) 35%,
    rgba(4,4,4,.22) 70%,
    rgba(4,4,4,0) 100%
  ) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:translateY(7px) !important;
  transform-origin:center bottom !important;
}
.case-bubble::before{display:none !important}
.case-bubble.is-visible{transform:translateY(0) !important}
.case-bubble-kicker{
  grid-area:kicker;
  margin:0 !important;
  font-size:.53rem !important;
  line-height:1;
  letter-spacing:.15em !important;
  white-space:nowrap;
}
.case-bubble-title{
  grid-area:title;
  font-size:.76rem !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap;
}
.case-bubble-type{
  grid-area:type;
  margin:0 !important;
  font-size:.53rem !important;
  line-height:1;
  letter-spacing:.08em !important;
  color:rgba(255,255,255,.58) !important;
  white-space:nowrap;
}
.case-bubble-desc{
  grid-area:desc;
  max-width:680px;
  margin:0 !important;
  font-size:.67rem !important;
  line-height:1.38 !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:400 !important;
}
html[data-theme="light"] .case-bubble{
  color:#fff !important;
  background:linear-gradient(
    to top,
    rgba(5,5,5,.86) 0%,
    rgba(5,5,5,.57) 38%,
    rgba(5,5,5,.16) 72%,
    rgba(5,5,5,0) 100%
  ) !important;
}
html[data-theme="light"] .case-bubble-type{color:rgba(255,255,255,.58) !important}
html[data-theme="light"] .case-bubble-desc{color:rgba(255,255,255,.78) !important}

@media(max-width:700px){
  .case-bubble{
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    min-height:112px;
    padding:45px 12px 12px !important;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "kicker title"
      "desc desc";
    column-gap:8px;
  }
  .case-bubble-type{display:none}
  .case-bubble-desc{
    max-width:100%;
    font-size:.61rem !important;
    line-height:1.32 !important;
  }
}


/* Case-study footer readability — desktop */
@media (min-width:701px){
  .case-bubble{
    padding:62px 22px 20px !important;
    row-gap:9px !important;
    column-gap:12px !important;
  }
  .case-bubble-kicker{
    font-size:.64rem !important;
    letter-spacing:.14em !important;
  }
  .case-bubble-title{
    font-size:.9rem !important;
  }
  .case-bubble-type{
    font-size:.62rem !important;
  }
  .case-bubble-desc{
    max-width:760px !important;
    font-size:.79rem !important;
    line-height:1.45 !important;
    color:rgba(255,255,255,.84) !important;
  }
}


/* Case-study footer — balanced left composition */
@media (min-width:701px){
  .case-bubble{
    bottom:28px !important;
    width:min(620px,68%) !important;
    right:auto !important;
    min-height:0 !important;
    padding:52px 22px 18px !important;
    grid-template-columns:auto auto 1fr !important;
    background:linear-gradient(
      to top,
      rgba(4,4,4,.82) 0%,
      rgba(4,4,4,.52) 42%,
      rgba(4,4,4,.12) 76%,
      rgba(4,4,4,0) 100%
    ) !important;
  }
  .case-bubble-desc{
    max-width:520px !important;
  }
}

/* Keep the mobile treatment compact, but lift it slightly too. */
@media (max-width:700px){
  .case-bubble{
    bottom:18px !important;
    width:92% !important;
    right:auto !important;
  }
}


/* Optional project info popup */
.case-info-control{
  position:absolute;
  z-index:7;
  left:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  pointer-events:none;
}
.case-info-toggle,
.case-bubble{
  pointer-events:auto;
}
.case-info-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#f4f0eb;
  font:inherit;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.62rem;
  font-weight:750;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.case-info-arrow{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:2px;
  font-size:1rem;
  line-height:1;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.case-info-toggle:hover .case-info-arrow{
  border-color:var(--orange);
  background:rgba(255,107,44,.14);
  transform:translateX(2px);
}
.case-bubble{
  position:absolute !important;
  left:0 !important;
  bottom:30px !important;
  width:min(360px,72vw) !important;
  min-height:0 !important;
  padding:16px 17px 17px !important;
  display:block !important;
  color:#f4f0eb !important;
  background:rgba(6,6,6,.94) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:5px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.34),0 8px 28px rgba(255,107,44,.08) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  opacity:0 !important;
  visibility:hidden;
  transform:translateY(8px) scale(.985) !important;
  transform-origin:left bottom !important;
  transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility .22s ease !important;
}
.case-bubble.is-visible{
  opacity:1 !important;
  visibility:visible;
  transform:translateY(0) scale(1) !important;
}
.case-bubble::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:14px;
  bottom:-7px;
  width:12px;
  height:12px;
  background:rgba(6,6,6,.94);
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:rotate(45deg);
}
.case-bubble-kicker{
  display:block !important;
  margin:0 0 8px !important;
  font-size:.62rem !important;
  letter-spacing:.14em !important;
}
.case-bubble-title{
  display:block !important;
  font-size:.92rem !important;
  margin:0 !important;
}
.case-bubble-type{
  display:block !important;
  margin:5px 0 0 !important;
  font-size:.62rem !important;
  color:rgba(255,255,255,.58) !important;
}
.case-bubble-desc{
  display:block !important;
  max-width:100% !important;
  margin:10px 0 0 !important;
  font-size:.78rem !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.82) !important;
}
html[data-theme="light"] .case-info-toggle{color:#fff}
html[data-theme="light"] .case-bubble{
  background:rgba(18,18,18,.94) !important;
}
html[data-theme="light"] .case-bubble::before{
  background:rgba(18,18,18,.94);
}
@media(max-width:700px){
  .case-info-control{
    left:10px;
    bottom:10px;
  }
  .case-info-toggle{
    font-size:.56rem;
  }
  .case-bubble{
    width:min(300px,84vw) !important;
    bottom:28px !important;
    padding:13px 14px 14px !important;
  }
  .case-bubble-desc{
    font-size:.68rem !important;
    line-height:1.38 !important;
  }
}


/* Fine-tune project info position */
@media (min-width:701px){
  .case-info-control{ bottom:30px !important; }
}
@media (max-width:700px){
  .case-info-control{ bottom:18px !important; }
}

/* More breathing room between project info and project name */
@media (min-width:701px){ .case-info-control{ bottom:48px !important; } }
@media (max-width:700px){ .case-info-control{ bottom:30px !important; } }

/* Copy refinement */
.hero-copy-sub{display:block;margin-top:12px;color:#a9a29b;font-size:.82em;line-height:1.55}
.service-card h4{margin:0 0 12px;font-size:1.02rem;line-height:1.35;font-weight:600;letter-spacing:-.015em;color:#e5dfd8}
.about-facts{margin:34px 0 26px;padding-top:20px;border-top:1px solid var(--line);font-size:.67rem;line-height:1.6;font-weight:800;letter-spacing:.12em;color:#8f8983}
.contact-intro{max-width:650px;margin:28px 0 0;color:#a9a29b;font-size:1rem;line-height:1.7}
html[data-theme="light"] .hero-copy-sub{color:#6f6861}
html[data-theme="light"] .service-card h4{color:#2b2825}
html[data-theme="light"] .about-facts{color:#746e68}
@media(max-width:700px){.service-card h4{font-size:.96rem}.contact-intro{font-size:.95rem}.about-facts{font-size:.62rem}}


/* Typographic balance: avoid short widows/orphans in prominent copy */
.hero-copy-main{display:block;max-width:670px;text-wrap:balance}
.hero-copy-sub{display:block;text-wrap:pretty}
.statement h2,.section-head h2,.services h2,.about h2,.contact-top h2{ text-wrap:balance; }
.statement p,.section-head p,.service-card p,.about-copy p,.contact-intro,.case-bubble-desc{ text-wrap:pretty; }
.top-cta,.btn,.contact-link{white-space:nowrap}
.contact-link{font-size:clamp(1.08rem,1.7vw,1.45rem)}
@media(max-width:700px){
  .hero-copy-main{max-width:24ch;text-wrap:balance}
  .hero-copy-sub{max-width:34ch}
  .contact-top h2{max-width:13ch}
  .contact-link{white-space:nowrap;font-size:clamp(.98rem,5vw,1.2rem)}
}


/* Mobile polish: keep surname fully visible + contact eyebrow consistent */
@media (max-width:700px){
  .name-stack{overflow:visible;}
  .last-name{
    font-size:clamp(4rem,18.5vw,7rem);
    line-height:.82;
    letter-spacing:-.085em;
    white-space:nowrap;
  }
}
.contact .eyebrow{
  background:transparent;
  color:var(--orange);
  padding:0;
  border-radius:0;
  text-transform:uppercase;
}

/* Mobile hero name: restore impact without clipping */
@media (max-width:700px){
  .last-name{
    font-size:clamp(4.45rem,20.5vw,7.35rem);
    line-height:.8;
    letter-spacing:-.09em;
    white-space:nowrap;
    max-width:100%;
  }
}


/* Hero alignment + intentional desktop headline wrap */
.first-name{margin-left:0;}
.last-name{position:relative;left:-.35vw;}
.hero-copy-break{display:inline;}
@media (max-width:700px){
  .last-name{left:-.15vw;}
  .hero-copy-break{display:none;}
}

/* Mobile hero rhythm: keep proposition to two intentional lines and tighten name-to-copy spacing */
@media (max-width:700px){
  .hero-bottom{margin-top:30px;}
  .hero-copy-main{max-width:none;text-wrap:initial;}
  .hero-copy-break{display:inline;}
}

/* Mobile section rhythm: consistent eyebrow → title → body/content spacing */
@media (max-width:700px){
  .panel .eyebrow{margin-bottom:16px;}

  /* Enfoque */
  .statement-grid{gap:24px;}

  /* Proyectos */
  .feature-work{gap:40px;}
  .feature-copy h2{margin-bottom:0;}
  .feature-copy p{margin:24px 0 0;}

  /* Servicios */
  .section-head{gap:24px;margin-bottom:40px;}
  .section-head>p{margin:0;}

  /* Sobre mí */
  .about-grid{margin-top:0;gap:24px;}

  /* Contacto */
  .contact-intro{margin-top:24px;}
  .contact-actions{margin-top:40px;}
}

/* Mobile: keep the three project selectors in a single row */
@media (max-width:700px){
  .project-thumbs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .project-thumb{border-radius:9px;}
  .project-thumb span{
    left:6px;
    bottom:6px;
    font-size:.48rem;
    letter-spacing:.05em;
  }
}

/* Hero background film */
.hero-background-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.34; filter:saturate(.78) contrast(1.08) brightness(.62);
  pointer-events:none;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.78) 0%,rgba(5,5,5,.48) 48%,rgba(5,5,5,.28) 100%),
             linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,.06) 48%,rgba(5,5,5,.52) 100%);
}
.hero-orbit{z-index:1}
@media (max-width:700px){
  .hero-background-video{opacity:.27; object-position:center center; filter:saturate(.72) contrast(1.08) brightness(.58)}
  .hero-video-overlay{background:linear-gradient(180deg,rgba(5,5,5,.48) 0%,rgba(5,5,5,.24) 45%,rgba(5,5,5,.64) 100%),linear-gradient(90deg,rgba(5,5,5,.58),rgba(5,5,5,.22))}
}
@media (prefers-reduced-motion:reduce){.hero-background-video{display:none}}
html[data-theme="light"] .hero-background-video{opacity:.18;filter:saturate(.55) contrast(1.02) brightness(.92)}
html[data-theme="light"] .hero-video-overlay{background:rgba(244,240,235,.56)}