.portfolio-page{background:#fffafc;color:#111}
.portfolio-page main{overflow:hidden}
.portfolio-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:70px;align-items:end;padding-top:150px;padding-bottom:72px}
.portfolio-hero h1{margin:0;font-size:clamp(58px,7vw,96px);line-height:.94;letter-spacing:-.055em}
.portfolio-hero .script-accent{margin-top:8px;font-size:.88em;line-height:1.2}
.portfolio-hero-lead{max-width:480px;margin:0 0 10px;font-size:18px;line-height:1.55}
.portfolio-browser{padding-top:36px}
.portfolio-filter-wrap{margin-bottom:34px}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px}
.portfolio-filter{appearance:none;border:1px solid #dfd3d5;background:#fff;color:#111;border-radius:999px;padding:11px 15px;font:500 11px/1 Roboto,Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
.portfolio-filter:hover,.portfolio-filter.is-active{background:#EF2A58;border-color:#EF2A58;color:#fff}
.portfolio-filter:focus-visible{outline:3px solid #111;outline-offset:3px}
.portfolio-static-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.portfolio-card{min-width:0;margin:0}
.portfolio-card[hidden],.portfolio-video-card[hidden],.portfolio-social[hidden]{display:none!important}
.portfolio-card-media{margin:0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;background:#f1ece8}
.portfolio-card-media img{display:block;width:100%;height:100%;object-fit:contain}
.portfolio-card-meta{padding-top:13px;text-align:left}
.portfolio-card-meta span{display:block;margin:0 0 6px;color:#EF2A58;font:500 10px/1.25 Roboto,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.portfolio-card-meta h3{margin:0;color:#111;font:500 20px/1.25 Roboto,Arial,sans-serif;letter-spacing:-.02em}
.portfolio-social{margin-top:34px;padding-top:92px;background:linear-gradient(180deg,#fffafc 0,#fff5f7 100%)}
.portfolio-social-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:60px;align-items:end;margin-bottom:38px}
.portfolio-social-head h2{margin:0;font-size:clamp(48px,5.2vw,72px);line-height:.98;letter-spacing:-.045em}
.portfolio-social-head .script-accent{margin-top:4px;font-size:1em;line-height:1.25}
.portfolio-social-head>p{max-width:460px;margin:0 0 8px;font-size:16px;line-height:1.6}
.portfolio-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px;align-items:start}
.portfolio-video-card{min-width:0}
.portfolio-video-media{position:relative;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#111}
.portfolio-video{display:block;width:100%;height:100%;object-fit:contain;background:#111}
.portfolio-video-toggle{position:absolute;left:50%;top:50%;z-index:3;width:58px;height:58px;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid rgba(255,255,255,.78);border-radius:50%;background:rgba(17,17,17,.48);backdrop-filter:blur(4px);cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.portfolio-video-toggle span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff;margin-left:3px}
.portfolio-video-media.is-playing .portfolio-video-toggle{opacity:0}
.portfolio-video-media.is-playing:hover .portfolio-video-toggle,.portfolio-video-media.is-playing .portfolio-video-toggle:focus-visible{opacity:1}
.portfolio-video-media.is-playing .portfolio-video-toggle span{width:12px;height:16px;border:0;border-left:4px solid #fff;border-right:4px solid #fff;margin:0}
.portfolio-video-toggle:hover{transform:translate(-50%,-50%) scale(1.04)}
.portfolio-video-toggle:focus-visible{outline:3px solid #EF2A58;outline-offset:4px}
.portfolio-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;background:#EF2A58;border-radius:36px;margin-top:92px;margin-bottom:92px;padding:70px}
.portfolio-contact .eyebrow{color:#111}
.portfolio-contact h2{margin:0;font-size:clamp(48px,5vw,72px);line-height:.96}
.portfolio-contact .script-accent{color:#FFF9F7!important}
.portfolio-contact-copy p{margin:0 0 24px;max-width:470px;line-height:1.6}
.portfolio-contact .button{background:#fff;color:#111}

@media(max-width:950px){
  .portfolio-hero{grid-template-columns:1fr;gap:26px;padding-top:125px}
  .portfolio-hero-lead{max-width:620px}
  .portfolio-static-grid,.portfolio-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-social-head{grid-template-columns:1fr;gap:20px}
  .portfolio-contact{grid-template-columns:1fr;gap:32px;padding:52px 42px}
}
@media(max-width:620px){
  .portfolio-hero{padding-top:100px;padding-bottom:48px}
  .portfolio-hero h1{font-size:51px}
  .portfolio-browser{padding-top:20px}
  .portfolio-filters{gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:3px 2px 8px;scrollbar-width:thin}
  .portfolio-filter{flex:0 0 auto;padding:10px 13px;font-size:10px}
  .portfolio-static-grid,.portfolio-video-grid{grid-template-columns:1fr;gap:28px}
  .portfolio-card-media{border-radius:18px}
  .portfolio-card-meta h3{font-size:19px}
  .portfolio-social{padding-top:68px}
  .portfolio-social-head h2{font-size:43px}
  .portfolio-video-media{border-radius:20px;max-width:390px;margin-inline:auto}
  .portfolio-contact{margin-top:68px;margin-bottom:68px;padding:42px 22px;border-radius:28px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-video-toggle{transition:none}
}