/* Website Portfolio — extends meta-ads tokens; does not mutate meta-ads.css */
.website-portfolio-page{--wp-card-bg:linear-gradient(180deg,rgba(8,28,41,.98),rgba(4,15,23,.98))}
.website-portfolio-page .wp-hero{min-height:880px}
.website-portfolio-page .wp-hero-grid{grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr)}
.website-portfolio-page .ma-hero-proof b{font-size:clamp(.95rem,1.4vw,1.15rem);letter-spacing:-.02em}

/* Hero browser-frame cluster */
.wp-hero-cluster{position:relative;height:560px;perspective:1200px;filter:drop-shadow(0 28px 30px rgba(0,0,0,.55))}
.wp-frame{position:absolute;border:1px solid rgba(255,214,124,.38);border-radius:14px;overflow:hidden;background:#07141d;box-shadow:0 0 0 6px rgba(5,12,17,.4),0 22px 48px rgba(0,0,0,.5);transition:transform .45s ease,box-shadow .45s ease}
.wp-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.wp-frame-chrome{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;background:linear-gradient(180deg,rgba(7,18,26,.92),rgba(7,18,26,.55) 70%,transparent);pointer-events:none}
.wp-frame-chrome i{width:7px;height:7px;border-radius:50%;background:rgba(232,185,67,.55)}
.wp-frame-chrome i:nth-child(2){background:rgba(255,218,116,.75)}
.wp-frame-chrome i:nth-child(3){background:rgba(246,240,228,.45)}
.wp-frame-chrome em{margin-left:.45rem;color:rgba(238,228,200,.72);font:500 .48rem 'DM Mono',monospace;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.wp-frame--city{right:0;top:4%;width:min(92%,620px);aspect-ratio:1.55;transform:rotate(-1.5deg);opacity:.9}
.wp-frame--city img{object-position:center 30%;filter:saturate(.9) contrast(1.05)}
.wp-frame--city:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(3,11,18,.55));pointer-events:none}
.wp-frame--a{z-index:3;left:2%;top:6%;width:min(48%,290px);aspect-ratio:1.35;transform:rotate(-7deg)}
.wp-frame--b{z-index:4;right:6%;bottom:8%;width:min(52%,320px);aspect-ratio:1.4;transform:rotate(3.5deg);border-color:rgba(255,213,113,.55)}
.wp-frame--c{z-index:5;left:18%;bottom:2%;width:min(44%,270px);aspect-ratio:1.38;transform:rotate(-2deg)}
.wp-hero-cluster:hover .wp-frame--city{transform:rotate(0) translate3d(-4px,-6px,0);box-shadow:0 0 0 6px rgba(5,12,17,.4),0 0 60px rgba(224,159,48,.28)}
.wp-hero-cluster:hover .wp-frame--a{transform:rotate(-3deg) translate3d(6px,-10px,0)}
.wp-hero-cluster:hover .wp-frame--b{transform:rotate(0) translate3d(-6px,-12px,0);box-shadow:0 0 0 6px rgba(3,11,18,.42),0 28px 60px rgba(0,0,0,.55),0 0 24px rgba(232,185,67,.18)}
.wp-hero-cluster:hover .wp-frame--c{transform:rotate(0) translate3d(4px,-8px,0)}
.wp-hero-cluster .ma-script-note{right:3%;top:-2%}

/* Portfolio grid */
.wp-portfolio{position:relative;padding:clamp(4.5rem,9vw,8rem) 0 clamp(4rem,7vw,6.5rem);background:#050e16;overflow:hidden}
.wp-portfolio:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(239,178,64,.16),transparent 28%),linear-gradient(180deg,transparent 8%,rgba(3,9,14,.75));pointer-events:none}
.wp-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2vw,1.65rem)}
.wp-card{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--wp-card-bg);border:1px solid rgba(232,185,67,.28);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.28);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.wp-card:hover,.wp-card:focus-within{transform:translateY(-8px);border-color:rgba(255,211,113,.75);box-shadow:0 26px 58px rgba(0,0,0,.42),0 0 28px rgba(215,158,52,.16)}
.wp-card--featured{border-color:rgba(232,185,67,.48)}
.wp-browser{display:flex;flex-direction:column;min-height:0}
.wp-chrome{display:flex;align-items:center;gap:.38rem;padding:.55rem .75rem;background:rgba(5,14,22,.95);border-bottom:1px solid rgba(232,185,67,.18)}
.wp-chrome span{width:8px;height:8px;border-radius:50%;background:rgba(232,185,67,.45)}
.wp-chrome span:nth-child(2){background:rgba(255,218,116,.7)}
.wp-chrome span:nth-child(3){background:rgba(246,240,228,.4)}
.wp-chrome em{margin-left:.5rem;flex:1;min-width:0;color:rgba(184,185,181,.85);font:500 .52rem 'DM Mono',monospace;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wp-preview{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#0a1a26 0%,#132838 45%,#0c1822 100%)}
.wp-preview--local{isolation:isolate}
.wp-preview-track{position:absolute;inset:0 auto auto 0;width:100%;animation:wp-preview-scroll var(--preview-duration,16s) cubic-bezier(.42,0,.58,1) infinite alternate;animation-play-state:paused;will-change:transform}
.wp-preview-track img{width:100%;height:auto;max-width:none;display:block;object-fit:initial}
.wp-card:hover .wp-preview-track,.wp-preview.is-active .wp-preview-track{animation-play-state:running}
.wp-preview-label{position:absolute;z-index:2;left:.7rem;bottom:.7rem;padding:.4rem .55rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(16,18,20,.5);color:#fff;backdrop-filter:blur(10px);font:500 .48rem 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.75;pointer-events:none}
.wp-preview--local:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 18%,transparent 78%,rgba(0,0,0,.3));pointer-events:none}
@keyframes wp-preview-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--preview-distance,0px)),0)}}

.wp-preview--remote .wp-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .4s,transform .6s ease}
.wp-card:hover .wp-preview--remote .wp-shot:not(.is-failed){transform:scale(1.03)}
.wp-shot.is-failed{opacity:0;pointer-events:none}
.wp-fallback{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:
  radial-gradient(circle at 30% 20%,rgba(232,185,67,.22),transparent 45%),
  linear-gradient(145deg,#0a1a26,#153044 50%,#0c1822);transition:opacity .35s}
.wp-fallback.is-shown{opacity:1}
.wp-monogram{font:600 clamp(3rem,8vw,4.5rem)/1 'Playfair Display',Georgia,serif;color:rgba(232,185,67,.55);letter-spacing:-.04em;text-shadow:0 8px 30px rgba(0,0,0,.45)}

.wp-meta{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.15rem 1.25rem;flex:1}
.wp-index{color:#b5b7ae;font:500 .55rem 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.wp-title{margin:0;font:600 clamp(1.35rem,2.1vw,1.75rem)/1.05 'Playfair Display',Georgia,serif;letter-spacing:-.03em;color:var(--ma-ink)}
.wp-domain{margin:0;color:rgba(232,185,67,.72);font:500 .58rem 'DM Mono',monospace;letter-spacing:.04em;word-break:break-all}
.wp-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0 .55rem}
.wp-chip{display:inline-flex;align-items:center;padding:.28rem .48rem;border:1px solid rgba(232,185,67,.28);border-radius:999px;color:#d5d4cb;font:500 .48rem 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;background:rgba(232,185,67,.06)}
.wp-live{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;align-self:flex-start;color:#f7f2e6;font:500 .6rem 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(232,185,67,.45);padding-bottom:.2rem;transition:color .25s,border-color .25s,transform .25s}
.wp-live:hover,.wp-live:focus-visible{color:var(--ma-bright);border-color:var(--ma-gold);transform:translateY(-1px);outline:none}
.wp-card:focus-within{outline:none}
.wp-live:focus-visible{outline:2px solid var(--ma-gold);outline-offset:4px}

.website-portfolio-page .ma-header.is-scrolled{background:rgba(3,11,18,.92);backdrop-filter:blur(18px);border-bottom-color:rgba(237,189,84,.26)}

@media(max-width:1100px){
  .wp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .website-portfolio-page .wp-hero-grid{grid-template-columns:minmax(320px,.9fr) minmax(400px,1.1fr)}
  .wp-hero-cluster{transform:scale(.92);transform-origin:right center}
}
@media(max-width:800px){
  .website-portfolio-page .wp-hero{min-height:0;padding-bottom:1.5rem}
  .website-portfolio-page .wp-hero-grid{display:flex;flex-direction:column;gap:1.5rem;min-height:0}
  .wp-hero-cluster{width:100%;height:380px;transform:none;margin-top:.5rem}
  .wp-frame--city{width:90%;right:2%;top:8%}
  .wp-frame--a{left:3%;width:42%;min-width:140px}
  .wp-frame--b{right:3%;width:48%;bottom:6%}
  .wp-frame--c{left:16%;width:40%;bottom:0}
  .wp-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:1.5rem}
}
@media(max-width:480px){
  .wp-hero-cluster{height:300px}
  .wp-frame{border-radius:10px}
  .wp-meta{padding:1rem}
  .wp-title{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .wp-preview-track{animation:none!important;transform:none!important}
  .wp-card,.wp-frame,.wp-preview--remote .wp-shot,.wp-live{transition:none}
  .wp-card:hover,.wp-hero-cluster:hover .wp-frame--city,.wp-hero-cluster:hover .wp-frame--a,.wp-hero-cluster:hover .wp-frame--b,.wp-hero-cluster:hover .wp-frame--c{transform:none}
  .wp-card:hover .wp-preview--remote .wp-shot{transform:none}
}

/* Native document scroll on Home and Website Portfolio.
   scroll-behavior:smooth eases programmatic jumps; overflow-x:hidden on body
   computes overflow-y to auto and can steal the root scrollport. clip keeps
   the layout from spilling sideways without trapping the page scroll. */
html:has(body.website-portfolio-page),
html:has(body.home-2-page){scroll-behavior:auto}
body.website-portfolio-page,
body.home-2-page{overflow-x:clip;overflow-y:visible}