/* ===========================================================
   AVENUE STUDIO — stylesheet
   =========================================================== */

@font-face{
  font-family:'Alte Haas Grotesk';
  src:url('../fonts/AlteHaasGroteskRegular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Alte Haas Grotesk';
  src:url('../fonts/AlteHaasGroteskBold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#0b0b0d;
  --bg-soft:#141317;
  --bg-soft2:#1c1a20;
  --paper:#f4f1ea;
  --paper-dim:#e7e2d6;
  --fg:#f5f3ef;
  --muted:#9d988f;
  --muted-dark:#57534d;
  --line:rgba(245,243,239,.14);
  --line-dark:rgba(11,11,13,.12);
  --bordo:#7a1f2e;
  --celeste:#a9d8ef;
  --grad: linear-gradient(95deg, var(--bordo), var(--celeste) 85%);
  --grad-soft: linear-gradient(95deg, rgba(122,31,46,.22), rgba(169,216,239,.16));
  --display: 'Alte Haas Grotesk', sans-serif;
  --body: 'Alte Haas Grotesk', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
/* scroll-behavior:smooth here would fight with the GSAP ScrollTrigger pin
   below (any scroll correction it makes gets animated instead of applied
   instantly, which is what caused the black gap when scrolling back up
   through the process section) — smooth anchor-link scrolling is instead
   done in JS via scrollIntoView, see initSmoothAnchors() in main.js. */
html{scroll-behavior:auto; overflow-anchor:none;}
html,body{background:var(--bg); color:var(--fg);}
body{
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  overflow-anchor:none;
  cursor:none;
}
body.no-custom-cursor{cursor:auto;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
::selection{background:var(--celeste); color:var(--bg);}

.wrap{max-width:1400px; margin:0 auto; padding:0 6vw;}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--fg); pointer-events:none; z-index:9999; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease);
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--fg); pointer-events:none; z-index:9998; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cursor.grow{width:52px; height:52px; background:transparent; border:1px solid var(--fg);}
.cursor-ring.grow{width:14px; height:14px; opacity:0;}
@media (hover:none), (pointer:coarse){
  .cursor, .cursor-ring{display:none;}
  body{cursor:auto;}
}

/* ---------- scroll progress path ---------- */
.scroll-path{
  position:fixed; left:2.2vw; top:130px; bottom:110px; z-index:350;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  pointer-events:none;
}
.scroll-path-mark{
  pointer-events:auto; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(11,11,13,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.6rem; letter-spacing:.02em; color:var(--fg);
}
.scroll-path-track{
  position:relative; flex:1 1 auto; width:2px; border-radius:2px; background:var(--line);
  cursor:pointer; pointer-events:auto; overflow:visible;
}
.scroll-path-fill{
  position:absolute; left:0; top:0; width:100%; height:0%; border-radius:2px; background:var(--grad);
  box-shadow:0 0 10px rgba(169,216,239,.55), 0 0 20px rgba(122,31,46,.35);
}
.scroll-path-dot{
  position:absolute; left:50%; top:0%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:var(--fg); cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 4px rgba(245,243,239,.14), 0 0 16px rgba(169,216,239,.8);
  transition:box-shadow .3s;
}
.scroll-path-dot:hover, .scroll-path-dot:active{box-shadow:0 0 0 6px rgba(245,243,239,.2), 0 0 22px rgba(169,216,239,1); cursor:grabbing;}
.scroll-path-label{
  flex:0 0 auto; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.66rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase;
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; background:var(--bg); z-index:10000; overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.2rem;
}
#pl-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;}
#preloader::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 46% 38% at 50% 50%, rgba(11,11,13,.4), rgba(11,11,13,0) 100%);
}
#preloader .pl-word{
  position:relative; z-index:2;
  font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,4vw,2.4rem);
  letter-spacing:.08em; color:var(--fg);
}
#preloader .pl-bar{position:relative; z-index:2; width:min(46vw,320px); height:2px; background:var(--line); overflow:hidden;}
#preloader .pl-bar span{position:absolute; inset:0; width:0%; background:var(--grad);}

/* ---------- header ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 6vw; mix-blend-mode:difference;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.03em; color:var(--fg);
}
.logo span{color:var(--fg); opacity:.5;}
.header-right{display:flex; align-items:center; gap:1.6rem;}
.lang-toggle{
  display:flex; gap:.4rem; font-family:var(--body); font-size:.78rem; letter-spacing:.06em; color:var(--fg);
}
.lang-toggle button{opacity:.4; padding:.2rem .1rem; font-weight:400;}
.lang-toggle button.active{opacity:1; border-bottom:1px solid var(--fg);}
.burger{
  width:34px; height:20px; position:relative; display:flex; flex-direction:column; justify-content:space-between;
}
.burger span{display:block; height:1.5px; width:100%; background:var(--fg); transition:transform .4s var(--ease), opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ---------- nav overlay ---------- */
.nav-overlay{
  position:fixed; inset:0; background:var(--bg); z-index:400;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:6vw; gap:1.2rem;
  clip-path:circle(2% at 92% 4%); transition:clip-path .8s var(--ease);
  pointer-events:none;
}
.nav-overlay.open{clip-path:circle(150% at 92% 4%); pointer-events:auto;}
.nav-overlay [data-render="nav"]{display:flex; flex-direction:column; gap:.4rem;}
.nav-overlay a{
  font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,7vw,4.6rem); color:var(--fg);
  opacity:.35; transition:opacity .35s, transform .35s var(--ease); display:block;
}
.nav-overlay a:hover{opacity:1; transform:translateX(14px); background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.nav-overlay .nav-index{font-family:var(--body); font-size:.75rem; color:var(--muted); margin-right:1rem;}
.nav-foot{position:absolute; bottom:6vw; left:6vw; right:6vw; display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); flex-wrap:wrap; gap:.6rem;}

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative;
  isolation:isolate;
  padding:9rem 6vw 4rem; background:radial-gradient(ellipse 80% 60% at 30% 0%, rgba(169,216,239,.14), transparent 60%),
                                  radial-gradient(ellipse 70% 60% at 90% 90%, rgba(122,31,46,.16), transparent 60%);
}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none; opacity:.75;}
.hero-eyebrow{font-size:.85rem; letter-spacing:.14em; color:var(--muted); margin-bottom:1.4rem; text-transform:uppercase;}
.hero-brand{
  font-family:var(--display); font-weight:700; line-height:.94; letter-spacing:-.01em;
  font-size:clamp(3.2rem,13vw,9rem); text-transform:uppercase;
}
.hero-brand .outline{
  color:transparent; -webkit-text-stroke:1.5px var(--fg);
}
.hero-brand .fill{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-tagline{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.005em;
  font-size:clamp(1.3rem,3.2vw,2.1rem); margin-top:1.6rem; max-width:640px;
}
.hero-catch{max-width:480px; margin-top:1rem; color:var(--muted); font-size:1.05rem;}
.repel-word{display:inline-block; transition:transform .25s ease-out; will-change:transform;}
.hero-scroll{
  position:absolute; bottom:2.4rem; left:6vw; display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.8rem;
}
.hero-scroll .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--grad); animation:bob 1.6s infinite ease-in-out;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
.hero-tags{position:absolute; bottom:2.4rem; right:6vw; display:flex; gap:.6rem; flex-wrap:wrap; max-width:40vw; justify-content:flex-end;}
.hero-tags span{border:1px solid var(--line); border-radius:100px; padding:.35rem .9rem; font-size:.72rem; letter-spacing:.05em; color:var(--muted);}

/* ---------- marquee ---------- */
.marquee-band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:1.1rem 0; background:var(--bg-soft);
}
.marquee-band .track{display:flex; width:max-content; animation:marquee 26s linear infinite;}
.marquee-band.reverse .track{animation-direction:reverse; animation-duration:32s;}
.marquee-band span{
  font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,3vw,2.1rem); text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px var(--muted); padding:0 2rem; white-space:nowrap;
}
.marquee-band span:nth-child(odd){-webkit-text-stroke:0; color:var(--fg);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- section shells ---------- */
section{position:relative;}
.section-pad{padding:7.5rem 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3.4rem; flex-wrap:wrap;}
.section-kicker{display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.8rem;}
.section-kicker::before{content:''; width:26px; height:1px; background:var(--grad);}
.section-title{
  font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.6rem); text-transform:uppercase; line-height:1.02; max-width:820px;
}
.section-title em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.section-desc{max-width:420px; color:var(--muted); font-size:1rem;}

/* ---------- avenue story strip ---------- */
.story-wrap{padding:4.2rem 0;}
.story{
  background:var(--paper); color:var(--bg); border-radius:28px; margin:0 6vw; padding:3.2rem 6vw;
}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:center;}
.story .section-title{color:var(--bg);}
.story-letters{
  display:flex; align-items:baseline; gap:.4rem; font-family:var(--display); font-weight:700; font-size:clamp(3.2rem,8vw,6.4rem); line-height:.8;
}
.story-letters .a{color:var(--bordo);}
.story-letters .v{color:var(--celeste);}
.story-letters .plus{font-size:.35em; color:var(--muted-dark); align-self:center;}
.story-word{font-family:var(--body); letter-spacing:.3em; text-transform:uppercase; font-size:.85rem; color:var(--muted-dark); margin-top:.5rem;}
.story p{color:var(--muted-dark); font-size:1rem; line-height:1.55; margin-top:1rem;}
.story p strong{color:var(--bg);}

/* ---------- nuestro diferencial ---------- */
.diff{text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.diff-title{
  font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5.6vw,4.2rem); text-transform:uppercase; line-height:1.06;
  max-width:920px; margin:0 auto;
}
.diff-title em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.diff-copy{max-width:620px; margin:2rem auto 0;}
.diff-copy p{color:var(--muted); font-size:1.05rem; line-height:1.7; margin-top:.9rem;}
.diff-copy .diff-p1{color:var(--fg); opacity:.9;}
.diff-tags{display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-top:2.2rem;}
.diff-tags span{border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; font-size:.78rem; letter-spacing:.05em; color:var(--muted);}

/* ---------- about / quienes somos ---------- */
.about-person{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:center; padding:4.5rem 0; border-top:1px solid var(--line);
}
.about-person:last-child{border-bottom:1px solid var(--line);}
.about-person.reverse{grid-template-columns:1.2fr .8fr;}
.about-person.reverse .about-photo{order:2;}
.about-photo{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--bg-soft);}
.about-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .6s var(--ease);}
.about-photo:hover img{filter:grayscale(0);}
.about-tag{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.6rem;}
.about-name{font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.4vw,3.4rem); text-transform:uppercase; margin-bottom:1.3rem;}
.about-role{color:var(--muted); font-size:.95rem; margin-bottom:1.3rem;}
.about-bio{font-size:1.05rem; color:var(--fg); opacity:.92; margin-bottom:1.6rem; max-width:560px; line-height:1.6;}
.about-bio p + p{margin-top:.9rem;}
.about-meta{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;}
.about-meta.cols-3{grid-template-columns:1fr 1fr 1fr;}
.about-meta h5{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;}
.about-meta ul li{font-size:.88rem; padding:.25rem 0; border-bottom:1px dashed var(--line); color:var(--fg); opacity:.85;}

/* ---------- servicios ---------- */
.services-list{border-top:1px solid var(--line);}
.service-row{
  display:grid; grid-template-columns:.5fr 2fr 2.6fr; gap:2rem; padding:2.6rem 0; border-bottom:1px solid var(--line);
  align-items:start; transition:background .3s;
}
.service-row:hover{background:rgba(255,255,255,.02);}
.service-num{font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--muted);}
.service-name{font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.6vw,2rem); text-transform:uppercase;}
.service-body p{color:var(--muted); max-width:520px; margin-bottom:1rem;}
.service-chips{display:flex; flex-wrap:wrap; gap:.5rem;}
.service-chips span{font-size:.76rem; border:1px solid var(--line); border-radius:100px; padding:.3rem .8rem; color:var(--fg); opacity:.8;}

/* ---------- process (horizontal scroll) ---------- */
.process-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.process-track{display:flex; gap:2rem; padding:0 6vw;}
.process-card{
  flex:0 0 min(78vw,360px); background:var(--bg-soft); border:1px solid var(--line); border-radius:24px; padding:2.4rem;
  display:flex; flex-direction:column; gap:1.2rem; min-height:320px; justify-content:space-between;
}
.process-card .pn{font-family:var(--display); font-weight:700; font-size:2.6rem; color:transparent; -webkit-text-stroke:1px var(--muted);}
.process-card h4{font-family:var(--display); font-size:1.2rem; text-transform:uppercase;}
.process-card p{color:var(--muted); font-size:.92rem;}

/* ---------- portfolio ---------- */
.portfolio-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.6rem;}
.portfolio-filters button{
  border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; font-size:.82rem; color:var(--muted); transition:.25s;
}
.portfolio-filters button.active, .portfolio-filters button:hover{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.client-card{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; background:var(--bg-soft);
}
.client-card img{width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .7s var(--ease), filter .5s;filter:grayscale(.65) brightness(.85);}
.client-card:hover img{transform:scale(1.06); filter:grayscale(0) brightness(.95);}
.client-card .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem;
}
.client-card .ctag{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;}
.client-card h4{font-family:var(--display); font-size:1.25rem; text-transform:uppercase; margin-bottom:.4rem;}
.client-card .who{display:flex; gap:.35rem;}
.client-card .who span{width:8px; height:8px; border-radius:50%;}
.client-card .who .A{background:var(--bordo);}
.client-card .who .V{background:var(--celeste);}

/* ---------- packs ---------- */
.packs-filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.6rem;}
.packs-filters button{
  border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; font-size:.82rem; color:var(--muted); transition:.25s;
}
.packs-filters button.active, .packs-filters button:hover{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.packs-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
.pack-card{
  position:relative; border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.6rem; background:var(--bg-soft);
  display:flex; flex-direction:column; transition:border-color .3s;
}
.pack-card:hover{border-color:rgba(245,243,239,.3);}
.pack-card.featured{border-color:rgba(169,216,239,.4);}
.pack-badge{
  position:absolute; top:-11px; left:1.6rem; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg); background:var(--fg); border-radius:100px; padding:.26rem .7rem;
}
.pack-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;}
.pack-name{font-family:var(--display); font-size:1.02rem; text-transform:uppercase; line-height:1.25;}
.pack-price{
  flex:0 0 auto; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bg);
  background:var(--grad); border-radius:100px; padding:.34rem .7rem; white-space:nowrap;
  text-decoration:none; cursor:pointer; transition:filter .2s, transform .2s; display:inline-block;
}
.pack-price:hover{filter:brightness(1.12); transform:translateY(-1px);}
.pack-for{color:var(--muted); font-size:.8rem; line-height:1.5; margin-top:.65rem;}
.pack-time{color:var(--muted); font-size:.76rem; margin-top:.45rem;}
.pack-time span{color:var(--fg); opacity:.75;}
.pack-includes{
  display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .4s var(--ease), opacity .3s, margin-top .4s;
  overflow:hidden; margin-top:0;
}
.pack-includes > *{min-height:0;}
.pack-includes h5{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem;}
.pack-includes ul{overflow:hidden;}
.pack-includes li{
  font-size:.8rem; padding:.32rem 0 .32rem 1rem; position:relative; color:var(--fg); opacity:.9;
  line-height:1.35; border-bottom:1px dashed var(--line);
}
.pack-includes li::before{content:''; position:absolute; left:0; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--grad);}
.pack-includes li:last-child{border-bottom:none;}
.pack-card.open .pack-includes{grid-template-rows:1fr; opacity:1; margin-top:1rem;}
.pack-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1rem; padding-top:.9rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  width:100%; text-align:left;
}
.pack-toggle-icon{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease); font-size:.85rem;
}
.pack-card.open .pack-toggle-icon{transform:rotate(45deg);}
.pack-card:hover .pack-toggle{color:var(--fg);}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,6,7,.9); backdrop-filter:blur(6px); z-index:800;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s;
  padding:4vh 4vw;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:24px; width:min(1000px,94vw); height:min(720px,88vh);
  overflow:hidden; position:relative;
  transform:translateY(30px); transition:transform .4s var(--ease);
  display:grid; grid-template-columns:1fr 1fr;
}
.modal-backdrop.open .modal{transform:translateY(0);}
.modal-close{
  position:absolute; top:1.1rem; right:1.1rem; z-index:5;
  border:1px solid var(--line); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:rgba(11,11,13,.55); backdrop-filter:blur(6px); color:#fff;
}
.modal-photos{
  overflow-y:auto; height:100%; background:#050506; display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.modal-photos img{width:100%; height:auto; display:block; cursor:pointer;}
.modal-info{
  overflow-y:auto; height:100%; padding:2.6rem 2.4rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}

/* ---------- image lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(4,4,5,.96); z-index:900; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s; padding:4vh 4vw;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:100%; max-height:92vh; object-fit:contain; border-radius:8px;}
.lightbox-close{
  position:absolute; top:2rem; right:2rem; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--fg);
}
.modal-tag{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.modal-title{font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); text-transform:uppercase; margin:.3rem 0 1.2rem; line-height:1.1;}
.modal-desc{color:var(--muted); margin-bottom:1.8rem; line-height:1.6;}
.modal-services h5{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem;}
.modal-services ul{display:grid; grid-template-columns:1fr; gap:.5rem;}
.modal-services li{font-size:.88rem; padding-left:1rem; position:relative; color:var(--fg); opacity:.9; line-height:1.4;}
.modal-services li::before{content:''; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--grad);}
.modal-palette{display:flex; gap:.5rem; margin-top:1.4rem;}
.modal-palette span{width:26px; height:26px; border-radius:50%; border:1px solid var(--line);}

/* ---------- CTA / contact ---------- */
.cta{
  padding:8rem 0; text-align:center; position:relative;
}
.cta h2{
  font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,9vw,7rem); text-transform:uppercase; line-height:.96;
}
.cta h2 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta-sub{color:var(--muted); margin:1.6rem auto 2.6rem; max-width:560px;}
.btn{
  display:inline-flex; align-items:center; gap:.7rem; border:1px solid var(--fg); border-radius:100px; padding:1rem 2rem;
  font-size:.92rem; letter-spacing:.03em; font-weight:400; transition:.3s;
}
.btn:hover{background:var(--fg); color:var(--bg);}
.btn-grad{background:var(--grad); border:none; color:#0b0b0d; font-weight:400;}
.btn-grad:hover{filter:brightness(1.08); background:var(--grad); color:#0b0b0d;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:4rem 0 2.2rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; margin-bottom:3rem;}
.footer-logo{font-family:var(--display); font-weight:700; font-size:1.6rem; margin-bottom:1rem;}
.footer-col h5{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem;}
.footer-col a, .footer-col p{display:block; font-size:.92rem; padding:.3rem 0; color:var(--fg); opacity:.85;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); padding-top:1.6rem;}

/* ---------- reveal animation helper ---------- */
.reveal{opacity:0; transform:translateY(36px);}
.reveal.in{opacity:1; transform:translateY(0); transition:opacity .9s var(--ease), transform .9s var(--ease);}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed; bottom:2rem; right:2rem; z-index:600; width:56px; height:56px; border-radius:50%;
  background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.wa-float svg{width:26px; height:26px; fill:#0b0b0d;}

.back-to-top{
  position:fixed; bottom:2rem; left:2rem; z-index:600; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--line); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; color:var(--fg);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s, border-color .3s;
}
.back-to-top:hover{background:var(--grad); border-color:transparent; color:#0b0b0d;}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top svg{width:20px; height:20px;}

/* ---------- confetti ---------- */
.confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:9000; overflow:visible;}
.confetti-piece{
  position:fixed; top:0; left:0; opacity:0; border-radius:2px;
  animation:confetti-burst 1.5s cubic-bezier(.15,.8,.35,1) forwards;
}
@keyframes confetti-burst{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  65%{ opacity:1; }
  100%{ transform:translate(var(--tx), calc(var(--ty) + 280px)) rotate(var(--rot)); opacity:0; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .story-grid{grid-template-columns:1fr; gap:2.4rem;}
  .about-person, .about-person.reverse{grid-template-columns:1fr; gap:2rem;}
  .about-person.reverse .about-photo{order:0;}
  .about-photo{aspect-ratio:16/10;}
  .service-row{grid-template-columns:1fr; gap:.8rem;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-tags{max-width:100%; position:static; margin-top:2rem; justify-content:flex-start;}
  .hero-scroll{position:static; margin-top:1.4rem;}
  .modal{grid-template-columns:1fr; grid-template-rows:38vh 1fr; width:94vw; height:88vh;}
  .modal-photos{height:100%;}
  .packs-grid{grid-template-columns:1fr;}
  .scroll-path{display:none;}
}
@media (max-width:600px){
  .wrap{padding:0 5vw;}
  .portfolio-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .nav-overlay a{font-size:2.2rem;}
  .about-meta.cols-3{grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem;}
  .modal-info{padding:1.6rem 1.4rem;}
  .pack-card{padding:1.25rem 1.2rem;}
}