/* =========================================================
   WESLEYNRZ — Portfolio v1
   Static build made for simple Hostinger hosting.
   ========================================================= */

:root{
  --bg:#071525;
  --bg-deep:#030913;
  --surface:#0c1b2e;
  --surface-2:#0f2137;
  --purple:#7034a1;
  --violet:#58008b;
  --magenta:#b03b68;
  --white:#e7e7e7;
  --muted:#a7afbd;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --container:1280px;
  --radius:18px;
  --ease:cubic-bezier(.22,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}

a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}

::selection{background:rgba(176,59,104,.35);color:#fff}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.035;
  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='.9'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.container{
  width:min(calc(100% - 64px),var(--container));
  margin-inline:auto;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg,var(--magenta),transparent);
}

.site-header{
  position:fixed;
  top:0;
  inset-inline:0;
  z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(3,9,19,.74);
  backdrop-filter:blur(16px);
  border-color:var(--border);
}
.nav-wrap{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.wordmark{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  font-size:.95rem;
}
.desktop-nav{
  display:flex;
  gap:34px;
}
.desktop-nav a,.social-link{
  color:var(--muted);
  font-size:.86rem;
  transition:color .2s ease;
}
.desktop-nav a:hover,.social-link:hover{color:var(--white)}
.nav-actions{display:flex;align-items:center;gap:16px}

.language-switch{
  display:flex;
  align-items:center;
  gap:5px;
  color:rgba(231,231,231,.38);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
}
.language-option{
  appearance:none;
  border:0;
  padding:6px 2px;
  background:transparent;
  color:rgba(231,231,231,.38);
  font:inherit;
  cursor:pointer;
  transition:color .2s ease,opacity .2s ease;
}
.language-option:hover{color:var(--muted)}
.language-option.active,
.language-option[aria-pressed="true"]{color:var(--white)}
.menu-toggle{
  width:42px;height:42px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.menu-toggle span{
  width:17px;height:1px;background:var(--white);
  transition:transform .25s ease;
}
.menu-toggle.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{display:none}

.hero{
  min-height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 55% 5%,rgba(112,52,161,.14),transparent 32%),
    linear-gradient(180deg,var(--bg) 0%,#061321 68%,var(--bg) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:9vw 100%;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 70%);
  opacity:.23;
}
.hero-inner{
  position:relative;
  padding-top:120px;
  padding-bottom:100px;
}
.language-switch-featured{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(3,9,19,.42);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.language-switch-featured .language-option{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  letter-spacing:.08em;
}
.language-switch-featured .language-option:hover{
  color:var(--white);
  background:rgba(255,255,255,.035);
}
.language-switch-featured .language-option.active,
.language-switch-featured .language-option[aria-pressed="true"]{
  color:var(--white);
  border-color:rgba(112,52,161,.42);
  background:linear-gradient(135deg,rgba(112,52,161,.18),rgba(176,59,104,.10));
  box-shadow:0 0 24px rgba(112,52,161,.10);
}
.mobile-language-switch{
  margin-top:16px;
  align-self:flex-start;
}

.language-flag{
  font-size:1rem;
  line-height:1;
  filter:saturate(.9);
}

.hero-title{
  margin:28px 0 42px;
  max-width:1000px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(4.5rem,8.8vw,8.25rem);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:600;
}
.hero-title span{
  color:transparent;
  -webkit-text-stroke:1px rgba(231,231,231,.75);
}
.hero-bottom{
  display:grid;
  grid-template-columns:minmax(280px,510px) auto;
  gap:48px;
  align-items:end;
}
.hero-bottom p{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.45vw,1.25rem);
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:600;
  font-size:.92rem;
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--violet) 58%,var(--magenta));
  box-shadow:0 16px 45px rgba(88,0,139,.18);
}
.btn-primary:hover{box-shadow:0 18px 60px rgba(176,59,104,.22)}
.btn-secondary{
  border-color:var(--border);
  background:rgba(255,255,255,.015);
}
.btn-secondary:hover{border-color:var(--border-strong);background:rgba(255,255,255,.04)}

.hero-glow{
  position:absolute;
  z-index:-2;
  filter:blur(30px);
  border-radius:50%;
  pointer-events:none;
  animation:floatGlow 20s ease-in-out infinite alternate;
}
.glow-a{
  width:460px;height:460px;
  top:-110px;right:-100px;
  background:radial-gradient(circle,rgba(112,52,161,.30),rgba(88,0,139,.08) 50%,transparent 70%);
}
.glow-b{
  width:380px;height:380px;
  bottom:-160px;left:-130px;
  background:radial-gradient(circle,rgba(176,59,104,.22),transparent 68%);
  animation-duration:26s;
}
@keyframes floatGlow{
  to{transform:translate3d(60px,35px,0) scale(1.08)}
}

.orbit-mark{
  position:absolute;
  width:min(46vw,650px);
  right:-7%;
  top:50%;
  transform:translateY(-48%);
  opacity:.11;
  z-index:-1;
  overflow:visible;
}
.orbit-mark circle{
  fill:none;
  stroke:rgba(231,231,231,.75);
  stroke-width:3;
}
.orbit-mark .dot{fill:var(--white);stroke:none}
.orbit-mark .dot-a{animation:orbitA 20s linear infinite;transform-origin:280px 280px}
.orbit-mark .dot-b{animation:orbitB 29s linear infinite reverse;transform-origin:280px 280px}
@keyframes orbitA{to{transform:rotate(360deg)}}
@keyframes orbitB{to{transform:rotate(360deg)}}

.scroll-cue{
  position:absolute;
  bottom:18px;
  right:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:.66rem;
  letter-spacing:.2em;
}
.scroll-cue i{
  display:block;
  width:48px;height:1px;background:var(--border-strong);position:relative;overflow:hidden
}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:var(--white);
  transform:translateX(-100%);
  animation:scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue{50%,100%{transform:translateX(100%)}}

.section{padding:150px 0}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:76px;
}
.section-heading h2,.about-intro h2,.contact-copy h2{
  margin:18px 0 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(2.8rem,5vw,5.25rem);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:600;
}
.section-heading h2 span{color:var(--magenta)}
.section-heading p{
  max-width:420px;
  margin:0;color:var(--muted)
}
.section-heading.compact{margin-bottom:42px}

.work-section{
  background:linear-gradient(180deg,var(--bg),#081829 50%,var(--bg));
}
.work-heading-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:24px;
}
.carousel-controls{
  display:flex;
  gap:10px;
}
.carousel-btn{
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  display:grid;
  place-items:center;
  color:var(--white);
  cursor:pointer;
  font-size:1.15rem;
  transition:transform .22s var(--ease),border-color .22s ease,background .22s ease,opacity .22s ease;
}
.carousel-btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:rgba(112,52,161,.75);
  background:rgba(112,52,161,.10);
}
.carousel-btn:disabled{
  opacity:.28;
  cursor:default;
}
.work-carousel-wrap{
  position:relative;
}
.work-carousel-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:-2px;
  width:90px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,21,37,.88));
  opacity:.8;
}
.work-grid{
  display:flex;
  gap:28px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  padding:2px 8vw 10px 0;
}
.work-grid::-webkit-scrollbar{display:none}
.project-card{
  position:relative;
  flex:0 0 min(78vw, 960px);
  min-width:0;
  cursor:pointer;
  scroll-snap-align:start;
}
.project-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#0a1727;
}
.project-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease),filter .5s ease;
}
.project-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(1,5,10,.35));
  opacity:.75;
  transition:opacity .3s ease;
}
.project-card:hover .project-media img{transform:scale(1.025);filter:saturate(1.08)}
.project-card:hover .project-media::after{opacity:.35}
.project-open{
  position:absolute;
  right:18px;top:18px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(3,9,19,.55);
  backdrop-filter:blur(10px);
  display:grid;place-items:center;
  z-index:2;
  transform:translateY(8px);
  opacity:0;
  transition:.3s var(--ease);
}
.project-card:hover .project-open{transform:none;opacity:1}
.project-info{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  padding-top:18px;
}
.project-info h3{
  margin:0;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.25rem,1.7vw,1.65rem);
  font-weight:500;
  letter-spacing:-.025em;
}
.project-meta{
  text-align:right;
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}


.vertical-section{
  position:relative;
  padding-top:120px;
  background:
    radial-gradient(circle at 12% 28%,rgba(176,59,104,.08),transparent 24%),
    linear-gradient(180deg,var(--bg),#071422 52%,var(--bg));
}
.vertical-carousel-wrap{
  position:relative;
}
.vertical-carousel-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:-2px;
  width:80px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,21,37,.9));
}
.vertical-grid{
  display:flex;
  gap:22px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  padding:2px 8vw 12px 0;
}
.vertical-grid::-webkit-scrollbar{display:none}
.vertical-card{
  position:relative;
  flex:0 0 clamp(240px,24vw,330px);
  min-width:0;
  cursor:pointer;
  scroll-snap-align:start;
}
.vertical-card .project-media{
  aspect-ratio:9/16;
}
.vertical-card .project-info{
  display:block;
  padding-top:16px;
}
.vertical-card .project-info h3{
  font-size:clamp(1.05rem,1.45vw,1.35rem);
}
.vertical-card .project-meta{
  margin-top:7px;
  text-align:left;
}
.vertical-card:hover .project-open{
  transform:none;
  opacity:1;
}

/* O modal muda de composição quando o projeto é vertical */
.project-modal.vertical-project .modal-panel{
  width:min(980px,100%);
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr;
  overflow:hidden;
}
.project-modal.vertical-project .modal-media{
  aspect-ratio:9/16;
  height:min(78svh,760px);
  width:auto;
  max-width:100%;
  align-self:center;
  justify-self:center;
}
.project-modal.vertical-project .modal-content{
  align-self:center;
  padding:44px 42px;
}

.about-section{position:relative}
.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:11vw;
  align-items:start;
}
.about-copy{max-width:720px}
.about-copy p{color:var(--muted);font-size:1.02rem}
.about-copy .lead{
  color:var(--white);
  font-size:clamp(1.5rem,2.4vw,2.25rem);
  line-height:1.35;
  letter-spacing:-.025em;
}
.tag-list{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px
}
.tag-list span,.modal-tech span{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.expertise-section{padding-top:80px}
.expertise-list{border-top:1px solid var(--border)}
.expertise-row{
  display:grid;
  grid-template-columns:80px minmax(220px,.7fr) 1fr;
  gap:40px;
  align-items:center;
  padding:34px 0;
  border-bottom:1px solid var(--border);
}
.expertise-num{color:var(--magenta);font-size:.76rem;letter-spacing:.1em}
.expertise-row h3{
  margin:0;font-family:"Space Grotesk";font-size:clamp(1.6rem,2.6vw,2.55rem);font-weight:500;letter-spacing:-.03em
}
.expertise-row p{margin:0;color:var(--muted);max-width:560px}

.contact-section{
  position:relative;
  overflow:hidden;
  padding:170px 0;
  background:linear-gradient(180deg,var(--bg),#050c16);
  border-top:1px solid var(--border);
}
.contact-glow{
  position:absolute;
  width:700px;height:700px;
  right:-260px;bottom:-400px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(176,59,104,.18),rgba(88,0,139,.08) 40%,transparent 70%);
  filter:blur(20px);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
  position:relative;
}
.contact-copy p{color:var(--muted);margin:28px 0 34px}
.contact-links{display:flex;flex-wrap:wrap;gap:18px 26px}
.contact-links a{
  color:var(--muted);border-bottom:1px solid var(--border);
  padding-bottom:4px;transition:color .2s ease,border-color .2s ease
}
.contact-links a:hover{color:var(--white);border-color:var(--magenta)}

.contact-form{display:grid;gap:22px}
.field{position:relative}
.field label{
  display:block;
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px
}
.field input,.field textarea{
  width:100%;
  color:var(--white);
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  padding:15px 16px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field input{height:54px}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field textarea:focus{
  border-color:rgba(112,52,161,.8);
  box-shadow:0 0 0 3px rgba(112,52,161,.10);
  background:rgba(255,255,255,.035)
}
.field.invalid input,.field.invalid textarea{border-color:rgba(255,100,120,.7)}
.field-error{
  display:none;
  color:#f39aaa;
  font-size:.74rem;
  margin-top:6px
}
.field.invalid .field-error{display:block}
.form-submit{justify-content:space-between;width:100%;margin-top:4px}
.form-submit i{font-style:normal;font-size:1.2rem}
.form-status{min-height:24px;margin:0;color:var(--muted);font-size:.85rem}

.site-footer{
  padding:34px 0;
  border-top:1px solid var(--border);
  background:var(--bg-deep)
}
.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:end}
.footer-inner strong{font-family:"Space Grotesk";letter-spacing:.08em}
.footer-inner>div:first-child{display:grid;gap:4px}
.footer-inner span{color:var(--muted);font-size:.78rem}
.footer-right{display:flex;gap:24px;align-items:center;font-size:.8rem}
.footer-right a{color:var(--muted)}
.footer-right a:hover{color:var(--white)}

.project-modal{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:30px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.project-modal.open{opacity:1;visibility:visible}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(1,5,10,.82);backdrop-filter:blur(12px)
}
.modal-panel{
  position:relative;
  width:min(1060px,100%);
  max-height:90svh;
  overflow:auto;
  background:#071321;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 40px 120px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.985);
  transition:transform .32s var(--ease);
}
.project-modal.open .modal-panel{transform:none}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(3,9,19,.7);
  backdrop-filter:blur(12px);
  cursor:pointer;
  font-size:1.5rem;line-height:1
}
.modal-media{aspect-ratio:16/9;background:#03070c}
.modal-media iframe{width:100%;height:100%;border:0;display:block}
.modal-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 25% 25%,rgba(112,52,161,.2),transparent 28%),
    radial-gradient(circle at 78% 78%,rgba(176,59,104,.13),transparent 28%),
    #06111e;
  color:var(--muted);font-size:.72rem;letter-spacing:.18em
}
.modal-content{padding:34px 38px 42px}
.modal-meta{display:flex;gap:14px;color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.modal-content h2{
  font-family:"Space Grotesk";font-size:clamp(2rem,4vw,4rem);line-height:1;margin:14px 0 20px;letter-spacing:-.045em
}
.modal-content p{color:var(--muted);max-width:720px}
.modal-tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media(max-width:900px){
  .container{width:min(calc(100% - 40px),var(--container))}
  .desktop-nav,.hide-mobile{display:none}
  .menu-toggle{display:flex}
  .mobile-menu{
    display:grid;
    position:absolute;
    top:78px;left:20px;right:20px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(3,9,19,.96);
    backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:.25s var(--ease)
  }
  .mobile-menu.open{opacity:1;visibility:visible;transform:none}
  .mobile-menu>a{
    padding:14px 4px;
    border-bottom:1px solid var(--border);
    font-family:"Space Grotesk";
    font-size:1.25rem
  }
  .mobile-social{display:flex;gap:20px;padding-top:16px;color:var(--muted);font-size:.85rem}
  .hero-title{font-size:clamp(4.2rem,13vw,7rem)}
  .hero-bottom{grid-template-columns:1fr;align-items:start}
  .hero-ctas{justify-content:flex-start}
  .orbit-mark{width:70vw;right:-28%;opacity:.08}
  .section{padding:110px 0}
  .section-heading{display:grid;gap:28px;margin-bottom:54px}
  .work-heading-side{
    align-items:flex-start;
  }
  .work-grid{
    gap:20px;
    padding-right:12vw;
  }
  .project-card{
    flex-basis:min(84vw,760px);
  }
  .project-card .project-media{aspect-ratio:16/10}
  .about-grid{grid-template-columns:1fr;gap:56px}
  .expertise-row{grid-template-columns:50px 1fr;gap:20px}
  .expertise-row p{grid-column:2}
  .contact-grid{grid-template-columns:1fr;gap:70px}
}

@media(max-width:560px){
  .language-switch-featured{
    gap:5px;
  }
  .language-switch-featured .language-option{
    min-height:36px;
    padding:0 10px;
  }
  .container{width:min(calc(100% - 32px),var(--container))}
  .nav-wrap{min-height:70px}
  .mobile-menu{top:70px;left:16px;right:16px}
  .hero-inner{padding-top:105px;padding-bottom:72px}
  .hero-title{font-size:clamp(3.4rem,17.2vw,5.4rem);margin:24px 0 34px}
  .hero-bottom{gap:28px}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1}
  .scroll-cue{display:none}
  .section{padding:90px 0}
  .section-heading h2,.about-intro h2,.contact-copy h2{font-size:clamp(2.7rem,14vw,4rem)}
  .section-heading{margin-bottom:44px}
  .work-heading-side{gap:18px}
  .carousel-btn{width:46px;height:46px}
  .work-carousel-wrap::after{width:44px}
  .work-grid{
    gap:16px;
    margin-right:-16px;
    padding-right:18vw;
  }
  .project-card{flex-basis:88vw}
  .project-media{border-radius:14px}
  .project-info{display:grid;gap:8px}
  .project-meta{text-align:left}
  .project-open{opacity:1;transform:none}
  .about-copy .lead{font-size:1.35rem}
  .expertise-row{padding:28px 0}
  .contact-section{padding:100px 0}
  .footer-inner{display:grid;gap:28px}
  .footer-right{justify-content:space-between}
  .project-modal{padding:12px}
  .modal-panel{border-radius:16px}
  .modal-content{padding:26px 22px 30px}
}


@media(max-width:900px){
  .vertical-grid{
    gap:18px;
    padding-right:12vw;
  }
  .vertical-card{
    flex-basis:clamp(220px,42vw,300px);
  }
  .project-modal.vertical-project .modal-panel{
    display:block;
    overflow:auto;
  }
  .project-modal.vertical-project .modal-media{
    width:min(100%,420px);
    height:auto;
    margin-inline:auto;
  }
  .project-modal.vertical-project .modal-content{
    padding:30px 28px 36px;
  }
}

@media(max-width:560px){
  .vertical-section{padding-top:80px}
  .vertical-carousel-wrap::after{width:36px}
  .vertical-grid{
    gap:14px;
    margin-right:-16px;
    padding-right:20vw;
  }
  .vertical-card{
    flex-basis:min(72vw,280px);
  }
  .vertical-card .project-info{
    padding-top:13px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
  .reveal{opacity:1;transform:none}
}

.site-header .language-switch-featured{
  padding:4px;
  gap:5px;
}
.site-header .language-switch-featured .language-option{
  min-height:34px;
  padding:0 9px;
}


/* Personal brand + Versline affiliation */
.brand-cluster{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-divider{
  width:1px;
  height:28px;
  flex:0 0 auto;
  background:linear-gradient(180deg,transparent,var(--border-strong),transparent);
}
.versline-affiliation{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.versline-founder{
  color:rgba(231,231,231,.42);
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.16em;
  white-space:nowrap;
}
.versline-wordmark{
  display:block;
  width:auto;
  height:25px;
  max-width:118px;
  object-fit:contain;
  opacity:.78;
  transition:opacity .2s ease;
}
.versline-affiliation:hover .versline-wordmark{
  opacity:1;
}

@media(max-width:1180px){
  .versline-founder{
    display:none;
  }
  .versline-wordmark{
    height:23px;
    max-width:106px;
  }
}

@media(max-width:900px){
  .brand-cluster{
    gap:9px;
  }
  .brand-divider{
    height:24px;
  }
  .versline-wordmark{
    height:21px;
    max-width:96px;
  }
}

@media(max-width:480px){
  .brand-divider,
  .versline-affiliation{
    display:none;
  }
}



.copyright-line{
  white-space:nowrap;
}

@media(max-width:680px){
  .footer-right{
    flex-wrap:wrap;
    row-gap:8px;
  }
  .copyright-line{
    white-space:normal;
  }
}


.work-grid .project-card,
.vertical-grid .vertical-card{
  scroll-snap-stop:always;
}


/* Invisible reposition used by the infinite carousels.
   It prevents the browser from animating the clone reset backwards. */
.work-grid.carousel-jump,
.vertical-grid.carousel-jump{
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}


/* =========================================================
   Carousel focus + centered navigation
   Layout-only refinement for Selected Work and Vertical Work.
   ========================================================= */
.carousel-stage{
  position:relative;
  overflow:visible;
}

/* Keep the selected card centered while the neighboring cards remain
   naturally beside it — no overlap. */
.work-grid,
.vertical-grid{
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
}

.work-grid{
  padding-left:11vw;
  padding-right:11vw;
}

.vertical-grid{
  padding-left:calc(50% - min(12vw,165px));
  padding-right:calc(50% - min(12vw,165px));
}

.work-grid .project-card,
.vertical-grid .vertical-card{
  scroll-snap-align:center;
  transform:scale(.92);
  opacity:.54;
  filter:saturate(.78) brightness(.78);
  transform-origin:center center;
  transition:
    transform .48s var(--ease),
    opacity .34s ease,
    filter .34s ease;
}

.work-grid .project-card.is-active,
.vertical-grid .vertical-card.is-active{
  transform:scale(1);
  opacity:1;
  filter:none;
}

/* The arrows now sit beside the video area, one on each side. */
.carousel-side-arrow{
  position:absolute;
  z-index:20;
  width:54px;
  height:54px;
  background:rgba(3,9,19,.72);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 42px rgba(0,0,0,.24);
}

.carousel-side-arrow--prev{left:10px}
.carousel-side-arrow--next{right:10px}

.work-carousel-wrap .carousel-side-arrow{
  top:clamp(155px,24.4vw,300px);
  transform:translateY(-50%);
}

.vertical-carousel-wrap .carousel-side-arrow{
  top:clamp(213px,21.3vw,293px);
  transform:translateY(-50%);
}

.carousel-side-arrow:hover:not(:disabled){
  transform:translateY(-50%) scale(1.05);
}

/* Remove the old right-edge fade because the centered layout already
   communicates that there are projects on both sides. */
.work-carousel-wrap::after,
.vertical-carousel-wrap::after{
  display:none;
}

@media(max-width:900px){
  .work-grid{
    padding-left:8vw;
    padding-right:8vw;
  }

  .vertical-grid{
    padding-left:calc(50% - min(21vw,150px));
    padding-right:calc(50% - min(21vw,150px));
  }

  .carousel-side-arrow{
    width:50px;
    height:50px;
  }

  .work-carousel-wrap .carousel-side-arrow{
    top:clamp(170px,26.25vw,238px);
  }

  .vertical-carousel-wrap .carousel-side-arrow{
    top:clamp(196px,37.3vw,267px);
  }
}

@media(max-width:560px){
  .work-carousel-wrap,
  .vertical-carousel-wrap{
    margin-inline:-16px;
  }

  .work-grid{
    margin-right:0;
    padding-left:6vw;
    padding-right:6vw;
  }

  .vertical-grid{
    margin-right:0;
    padding-left:14vw;
    padding-right:14vw;
  }

  .work-grid .project-card,
  .vertical-grid .vertical-card{
    transform:scale(.94);
    opacity:.48;
  }

  .work-grid .project-card.is-active,
  .vertical-grid .vertical-card.is-active{
    transform:scale(1);
    opacity:1;
  }

  .carousel-side-arrow{
    width:44px;
    height:44px;
  }

  .carousel-side-arrow--prev{left:8px}
  .carousel-side-arrow--next{right:8px}

  .work-carousel-wrap .carousel-side-arrow{
    top:clamp(145px,27.5vw,185px);
  }

  .vertical-carousel-wrap .carousel-side-arrow{
    top:clamp(196px,64vw,249px);
  }
}


/* =========================================================
   Carousel usability refinement
   - one selected project centered
   - neighboring projects can extend to the viewport edges
   ========================================================= */
.work-carousel-wrap.carousel-stage,
.vertical-carousel-wrap.carousel-stage{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:0;
}

/* The repeated project sets already provide content on both sides,
   so inner padding is not needed to manufacture empty edge space. */
.work-carousel-wrap.carousel-stage .work-grid,
.vertical-carousel-wrap.carousel-stage .vertical-grid{
  width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

/* Since the stage is now viewport-wide, the existing side arrows
   naturally sit beside the videos at the real left/right screen edges. */
.work-carousel-wrap.carousel-stage .carousel-side-arrow--prev,
.vertical-carousel-wrap.carousel-stage .carousel-side-arrow--prev{
  left:clamp(10px,2vw,30px);
}

.work-carousel-wrap.carousel-stage .carousel-side-arrow--next,
.vertical-carousel-wrap.carousel-stage .carousel-side-arrow--next{
  right:clamp(10px,2vw,30px);
}


/* Carousel rendering stability after opening/closing video modals. */
html{
  scrollbar-gutter:stable;
}

.work-grid .project-card,
.vertical-grid .vertical-card{
  isolation:isolate;
  contain:paint;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.work-grid .project-media,
.vertical-grid .project-media,
.work-grid .project-media img,
.vertical-grid .project-media img{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* Final accent treatment */
.accent{
  color:var(--magenta);
}

/* Subtle edge fade for both project carousels.
   The cards fade only near the viewport edges; arrows stay fully visible. */
.work-carousel-wrap.carousel-stage::before,
.work-carousel-wrap.carousel-stage::after,
.vertical-carousel-wrap.carousel-stage::before,
.vertical-carousel-wrap.carousel-stage::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(72px,5.5vw,108px);
  pointer-events:none;
  z-index:12;
  display:block;
}

.work-carousel-wrap.carousel-stage::before,
.vertical-carousel-wrap.carousel-stage::before{
  left:0;
  background:linear-gradient(
    90deg,
    var(--bg) 0%,
    rgba(7,21,37,.78) 34%,
    rgba(7,21,37,.34) 68%,
    transparent 100%
  );
}

.work-carousel-wrap.carousel-stage::after,
.vertical-carousel-wrap.carousel-stage::after{
  right:0;
  background:linear-gradient(
    270deg,
    var(--bg) 0%,
    rgba(7,21,37,.78) 34%,
    rgba(7,21,37,.34) 68%,
    transparent 100%
  );
}

.work-carousel-wrap.carousel-stage .carousel-side-arrow,
.vertical-carousel-wrap.carousel-stage .carousel-side-arrow{
  z-index:20;
}

@media(max-width:560px){
  .work-carousel-wrap.carousel-stage::before,
  .work-carousel-wrap.carousel-stage::after,
  .vertical-carousel-wrap.carousel-stage::before,
  .vertical-carousel-wrap.carousel-stage::after{
    width:64px;
  }
}.carousel-side-arrow span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  line-height:1;
  font-size:1.15rem;
}

.carousel-side-arrow--prev span{
  transform:rotate(180deg);
}