/* ==========================================================
   Portfolio Page — migrated from ZIP1, scoped to .portfolio-page
   ZIP2 remains the master design system.
   ========================================================== */

.portfolio-page {
  --portfolio-orange: #FF5B00;
  --portfolio-orange-dark: #e85200;
  --portfolio-navy: #0C3440;
  --portfolio-text: #0a1117;
  --portfolio-muted: #5f7186;
  --portfolio-warm: #fffaf6;
  --portfolio-border: #e6e9ed;
  background: #fff;
  color: var(--portfolio-text);
  overflow-x: hidden;
  max-width: 100%;
}

.portfolio-page .portfolio-intro{
  position:relative;
  min-height:610px;
  background:
    linear-gradient(90deg, rgba(10,17,23,0.82) 0%, rgba(10,17,23,0.66) 38%, rgba(10,17,23,0.36) 58%, rgba(10,17,23,0.12) 100%),
    url('portfolio/port.jpg') center center / cover no-repeat;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.portfolio-page .intro-content{
  position:relative;
  z-index:2;
  width:min(1385px,calc(100% - 48px));
  margin-inline:auto;
  padding:96px 24px 120px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.portfolio-page .intro-copy{
  max-width:680px;
  text-align:left;
}
.portfolio-page .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,91,0,.10);
  border:1px solid rgba(255,91,0,.18);
  color:#fff;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
}
.portfolio-page .intro-content h1,
.portfolio-page .intro-content h2{
  margin:22px 0 0;
  font-family:var(--font-display,'Poppins',sans-serif);
  font-size:clamp(34px, 4vw, 62px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-2.2px;
  color:#fff;
}
.portfolio-page .intro-content h1 span,
.portfolio-page .intro-content h2 span{color:#ff9b5a}
.portfolio-page .intro-content p{
  max-width:620px;
  margin:26px 0 0;
  font-size:18px;
  line-height:1.65;
  color:rgba(255,255,255,.88);
}
.portfolio-page .red-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--portfolio-orange);
  color:#fff;
  width:270px;
  height:86px;
  border-radius:19px;
  margin-top:42px;
  font-weight:700;
  font-size:16px;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow:0 15px 30px rgba(255,91,0,.18);
}
.portfolio-page .red-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 35px rgba(255,91,0,.2);
  background:var(--portfolio-orange-dark);
}
.portfolio-page .red-btn span{font-size:19px}

.portfolio-page .decor{position:absolute;pointer-events:none}
.portfolio-page .decor-top-left{
  width:340px;height:160px;left:-80px;top:-65px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,91,0,.09),transparent 68%)
}
.portfolio-page .decor-top-right{
  width:270px;height:270px;right:-75px;top:-80px;
  border:2px solid rgba(255,91,0,.08);border-radius:50%;
  box-shadow:0 0 0 12px rgba(255,91,0,.035),0 0 0 25px rgba(255,91,0,.025)
}
.portfolio-page .decor-bottom-left{
  width:680px;max-width:100vw;height:240px;left:-190px;bottom:-120px;
  border-top:3px solid rgba(255,91,0,.08);border-radius:50%;transform:rotate(12deg);
  box-shadow:0 -14px 0 -11px rgba(255,91,0,.06),0 -28px 0 -25px rgba(255,91,0,.05),0 -42px 0 -39px rgba(255,91,0,.04)
}
.portfolio-page .decor-dots{
  right:120px;bottom:30px;width:390px;height:210px;
  background-image:radial-gradient(rgba(255,91,0,.10) 1.5px,transparent 1.5px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 30%,black,transparent);
  mask-image:linear-gradient(90deg,transparent,black 30%,black,transparent)
}

.portfolio-page .featured{
  width:min(1385px,calc(100% - 48px));
  margin-inline:auto;
  padding:4px 0 60px;
}
.portfolio-page .section-heading h2{
  text-align:center;
  font-family:var(--font-display,'Poppins',sans-serif);
  font-size:43px;
  font-weight:800;
  margin:0;
}
.portfolio-page .filters{
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:63px;
}
.portfolio-page .filter{
  height:60px;
  padding:0 34px;
  border-radius:32px;
  background:#fff;
  border:1px solid #e5e7eb;
  font-size:16px;
  font-weight:700;
  color:#111;
  cursor:pointer;
  transition:transform .3s ease,border-color .3s ease,color .3s ease,background .3s ease,box-shadow .3s ease;
}
.portfolio-page .filter.active{
  background:var(--portfolio-orange);
  border-color:var(--portfolio-orange);
  color:#fff;
  box-shadow:0 8px 20px rgba(255,91,0,.12);
}
.portfolio-page .filter:hover{
  transform:translateY(-3px);
  border-color:var(--portfolio-orange);
  color:var(--portfolio-orange);
}
.portfolio-page .filter.active:hover{color:#fff}

.portfolio-page .projects{
  width:min(1385px,calc(100% - 48px));
  margin-inline:auto;
  padding:92px 0 105px;
}
.portfolio-page .project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.portfolio-page .project-card{
  border:1px solid var(--portfolio-border);
  background:#fff;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(16,24,40,.05);
  transition:transform .35s ease,box-shadow .35s ease,opacity .3s ease;
}
.portfolio-page .project-card.hidden{display:none}
.portfolio-page .project-card:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 45px rgba(16,24,40,.11);
}
.portfolio-page .project-visual{
  height:270px;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  background:#fff7f0;
}
.portfolio-page .project-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 50%);
  pointer-events:none;
}
.portfolio-page .project-visual img,
.portfolio-page .project-visual video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.portfolio-page .project-card:hover .project-visual img,
.portfolio-page .project-card:hover .project-visual video{
  transform:scale(1.045);
  filter:saturate(1.03);
}
.portfolio-page .project-body{padding:25px 26px 28px}
.portfolio-page .category{
  display:inline-flex;
  padding:7px 12px;
  border-radius:20px;
  background:#fff2ea;
  color:var(--portfolio-orange);
  font-size:11px;
  font-weight:700;
}
.portfolio-page .project-body h3{
  font-family:var(--font-display,'Poppins',sans-serif);
  font-size:22px;
  line-height:1.25;
  margin:15px 0 0;
}
.portfolio-page .project-body p{
  font-size:14px;
  line-height:1.65;
  color:#667085;
  margin:10px 0 0;
}
.portfolio-page .tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.portfolio-page .tags span{
  font-size:10px;
  padding:6px 9px;
  border-radius:14px;
  background:#f5f6f8;
  color:#4b5563;
  font-weight:700;
}
.portfolio-page .project-body h3 a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}
.portfolio-page .project-body h3 a:hover{
  color:var(--portfolio-orange);
}
.portfolio-page a.project-visual{
  display:block;
  text-decoration:none;
  cursor:pointer;
}
.portfolio-page .case-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid #f1f2f4;
  color:var(--portfolio-orange);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  transition:color .2s ease;
}
.portfolio-page .case-link:hover{
  color:var(--portfolio-orange-dark);
}
.portfolio-page .case-link span:last-child{font-size:18px;transition:transform .3s ease}
.portfolio-page .project-card:hover .case-link span:last-child{transform:translateX(5px)}

.portfolio-page .bottom-cta{
  width:min(1385px,calc(100% - 48px));
  margin-inline:auto;
  padding:0 0 95px;
}
.portfolio-page .bottom-card{
  background:var(--portfolio-orange);
  color:#fff;
  border-radius:38px;
  text-align:center;
  padding:58px 25px;
}
.portfolio-page .bottom-card h2{
  font-family:var(--font-display,'Poppins',sans-serif);
  font-size:34px;
  margin:0;
}
.portfolio-page .bottom-card p{margin:10px 0 0;font-size:16px}
.portfolio-page .bottom-card .white-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#0a1117;
  border-radius:18px;
  min-width:240px;
  height:56px;
  font-size:15px;
  font-weight:700;
  margin-top:25px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.portfolio-page .bottom-card .white-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(0,0,0,.13);
}
.portfolio-page .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease,transform .8s ease;
}
.portfolio-page .reveal.visible{opacity:1;transform:none}
.portfolio-page .project-card.reveal:nth-child(2){transition-delay:.08s}
.portfolio-page .project-card.reveal:nth-child(3){transition-delay:.16s}

@media(max-width:1250px){
  .portfolio-page .intro-content{width:min(1180px,calc(100% - 40px))}
  .portfolio-page .featured,.portfolio-page .projects,.portfolio-page .bottom-cta{width:min(1180px,calc(100% - 40px))}
}
@media(max-width:1000px){
  .portfolio-page .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .portfolio-page .intro-content{width:calc(100% - 32px);padding:85px 12px}
  .portfolio-page .portfolio-intro{min-height:530px}
  .portfolio-page .intro-content h2{font-size:34px;letter-spacing:-1px}
  .portfolio-page .intro-content p{font-size:14px;margin-top:34px}
  .portfolio-page .red-btn{height:64px;width:235px;margin-top:55px}
  .portfolio-page .featured{width:calc(100% - 32px);padding-bottom:42px}
  .portfolio-page .section-heading h2{font-size:32px}
  .portfolio-page .filters{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:5px 2px 12px;
    margin-top:34px;
    gap:10px;
    scrollbar-width:none;
  }
  .portfolio-page .filters::-webkit-scrollbar{display:none}
  .portfolio-page .filter{height:52px;padding:0 21px;font-size:13px;white-space:nowrap}
  .portfolio-page .projects{width:calc(100% - 32px);padding:60px 0 70px}
  .portfolio-page .project-grid{grid-template-columns:1fr;gap:22px}
  .portfolio-page .project-visual{height:245px}
  .portfolio-page .project-body{padding:22px}
  .portfolio-page .project-body h3{font-size:20px}
  .portfolio-page .bottom-cta{width:calc(100% - 32px);padding-bottom:65px}
  .portfolio-page .bottom-card{border-radius:26px;padding:45px 18px}
  .portfolio-page .bottom-card h2{font-size:26px}
  .portfolio-page .decor-dots{right:-90px;bottom:30px}
}
@media(max-width:390px){
  .portfolio-page .intro-content h2{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-page .project-card,
  .portfolio-page .project-visual img,
  .portfolio-page .filter,
  .portfolio-page .red-btn,
  .portfolio-page .case-link span{transition:none !important}
  .portfolio-page .reveal{opacity:1;transform:none;transition:none}
}