/* ============================================================
   OSW Portfolio — verbatim from the approved preview
   (new-sections-preview/optivro-new-sections.html, section .pf).
   Breakpoints match the home page: 1080 / 880 / 560.
   ============================================================ */

.ovs-portfolio{background:radial-gradient(ellipse 60% 50% at 80% 0%,rgba(196,131,90,.10),transparent 65%),var(--ovs-bg);overflow:clip;--ovs-ease:cubic-bezier(.2,.7,.2,1)}
.ovs-portfolio button{font-family:inherit;color:inherit}
/* core.css's `.ovs-scope a{color:inherit}` outranks .ovs-btn-primary; restore the source's dark button text */
.ovs-portfolio a.ovs-btn-primary,.ovs-pf-lb a.ovs-btn-primary{color:#221A0D}
.ovs-portfolio a.ovs-btn-ghost:hover,.ovs-pf-lb a.ovs-btn-ghost:hover{color:var(--ovs-champ)}

/* Header */
.ovs-pf-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.6rem 3rem}
.ovs-pf-head .ovs-section-h{margin-bottom:0;max-width:17ch}
.ovs-pf-head-side{max-width:44ch}
.ovs-pf-stats{display:flex;gap:2.2rem;margin-top:1.4rem}
.ovs-pf-stat strong{display:block;font-family:var(--ovs-display);font-weight:400;font-size:2.1rem;letter-spacing:.03em;color:var(--ovs-champ);line-height:1}
.ovs-pf-stat span{display:block;margin-top:.35rem;font-size:.68rem;color:var(--ovs-muted);letter-spacing:.08em;text-transform:uppercase}

/* Filters */
.ovs-pf-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:3rem 0 1.6rem}
.ovs-pf-filter{font-family:var(--ovs-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ovs-muted);border:1px solid var(--ovs-line);border-radius:99px;padding:.55rem .95rem;background:rgba(255,250,240,.02);cursor:pointer;transition:color .2s,border-color .2s,background .2s;line-height:1.3}
.ovs-portfolio .ovs-pf-filter{color:var(--ovs-muted)}
.ovs-pf-filter sup{font-size:.52rem;margin-left:.3rem;opacity:.7}
.ovs-portfolio .ovs-pf-filter:hover{color:var(--ovs-text);border-color:rgba(227,201,143,.24)}
.ovs-portfolio .ovs-pf-filter.ovs-on{color:var(--ovs-champ);border-color:var(--ovs-champ-border);background:var(--ovs-champ-dim)}

/* Showcase */
.ovs-pf-show{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:1.4rem;align-items:start}
.ovs-pf-index-col{position:sticky;top:90px}
.ovs-pf-index{display:grid;gap:.35rem}
.ovs-pf-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.95rem;width:100%;text-align:left;padding:1rem 1.1rem;border-radius:14px;border:1px solid transparent;background:none;cursor:pointer;transition:background .3s,border-color .3s;overflow:hidden;line-height:1.3}
.ovs-pf-row:hover{background:rgba(255,250,240,.025)}
.ovs-pf-row.ovs-on{background:var(--ovs-panel);border-color:var(--ovs-line)}
.ovs-pf-row[hidden]{display:none}
.ovs-pf-row-n{font-family:var(--ovs-mono);font-size:.62rem;letter-spacing:.14em;color:rgba(167,157,140,.6);transition:color .3s}
.ovs-pf-row.ovs-on .ovs-pf-row-n{color:var(--ovs-copper)}
.ovs-pf-row-t{min-width:0}
.ovs-pf-row-t b{display:block;font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;color:var(--ovs-text)}
.ovs-pf-row-t em{display:block;font-style:normal;font-size:.74rem;color:var(--ovs-muted);margin-top:.18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovs-pf-row.ovs-on .ovs-pf-row-t b{color:var(--ovs-champ)}
.ovs-pf-row-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);opacity:.35;transition:opacity .3s,box-shadow .3s}
.ovs-pf-row.ovs-on .ovs-pf-row-dot{opacity:1;box-shadow:0 0 14px 1px var(--acc)}
.ovs-pf-row-prog{position:absolute;left:1.1rem;right:1.1rem;bottom:0;height:2px;overflow:hidden;border-radius:2px}
.ovs-pf-row-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ovs-copper),var(--ovs-champ))}
.ovs-pf-row.ovs-on.ovs-timing .ovs-pf-row-prog i{animation:ovsPfProg var(--pf-dur,8s) linear forwards}
.ovs-pf-show.ovs-paused .ovs-pf-row.ovs-on.ovs-timing .ovs-pf-row-prog i{animation-play-state:paused}
@keyframes ovsPfProg{to{width:100%}}
.ovs-pf-index-foot{margin-top:1.1rem;padding:1.1rem;border-top:1px solid var(--ovs-line);font-size:.8rem;color:var(--ovs-muted);line-height:1.55}
.ovs-pf-index-foot a{color:var(--ovs-champ);border-bottom:1px solid var(--ovs-champ-border)}

/* Stage */
.ovs-pf-stage{position:relative;border-radius:24px;border:1px solid var(--ovs-line);background:linear-gradient(160deg,#131009,#0A0806);overflow:hidden;isolation:isolate}
.ovs-pf-glow{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse 50% 45% at 62% 30%,var(--acc,#E3C98F),transparent 70%);opacity:.16;transition:opacity .8s;filter:blur(20px)}
.ovs-pf-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(240,228,205,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(240,228,205,.03) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 20%,transparent 75%)}
.ovs-pf-slides{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.ovs-pf-slide{grid-area:1/1;padding:1.6rem 1.8rem 1.6rem;visibility:hidden;opacity:0;transition:opacity .6s var(--ovs-ease),visibility 0s .6s}
.ovs-pf-slide.ovs-on{visibility:visible;opacity:1;transition:opacity .6s var(--ovs-ease),visibility 0s}

/* Devices */
.ovs-pf-devices{position:relative;padding-right:9%;padding-bottom:1.2rem}
.ovs-pf-devices.ovs-no-phone{padding-right:0;padding-bottom:0}
.ovs-pf-browser{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(240,228,205,.14);background:#0B0906;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(227,201,143,.04) inset}
html.ovs-anim .ovs-pf-browser{transform:translateY(24px) scale(.98);opacity:0;transition:transform .9s var(--ovs-ease),opacity .9s var(--ovs-ease)}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-browser{transform:none;opacity:1}
.ovs-pf-bbar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;border-bottom:1px solid var(--ovs-line);background:rgba(255,250,240,.03)}
.ovs-md{width:9px;height:9px;border-radius:50%;flex:none}
.ovs-md.ovs-r{background:#E8695B}.ovs-md.ovs-y{background:var(--ovs-champ)}.ovs-md.ovs-g{background:var(--ovs-pine)}
.ovs-pf-url{margin-left:.5rem;flex:1;min-width:0;display:flex;align-items:center;gap:.45rem;background:rgba(6,5,4,.6);border:1px solid var(--ovs-line);border-radius:8px;padding:.3rem .7rem;font-family:var(--ovs-mono);font-size:.66rem;color:var(--ovs-muted);white-space:nowrap;overflow:hidden;line-height:1.4}
.ovs-pf-url svg{width:11px;height:11px;color:var(--ovs-pine);flex:none}
.ovs-pf-live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ovs-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ovs-pine)}
.ovs-pf-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ovs-pine);box-shadow:0 0 0 0 rgba(111,169,140,.6)}
html.ovs-anim .ovs-pf-live::before{animation:ovsPfPulse 2s infinite}
@keyframes ovsPfPulse{70%{box-shadow:0 0 0 7px rgba(111,169,140,0)}100%{box-shadow:0 0 0 0 rgba(111,169,140,0)}}
.ovs-pf-screen{position:relative;aspect-ratio:16/9;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;cursor:ns-resize;background:#0B0906}
.ovs-pf-screen::-webkit-scrollbar{display:none}
/* max-height/object-fit reset: the Renev theme ships img{max-height:100%} + img{object-fit:cover}, which clamps the tall capture to the screen box */
.ovs-portfolio .ovs-pf-screen img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:fill}
.ovs-pf-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;font-family:var(--ovs-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ovs-text);background:rgba(6,5,4,.78);border:1px solid var(--ovs-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:99px;padding:.45rem .85rem;pointer-events:none;transition:opacity .4s;white-space:nowrap;line-height:1.3}
.ovs-pf-hint svg{width:12px;height:12px;color:var(--ovs-champ)}
.ovs-pf-browser.ovs-scrolling .ovs-pf-hint{opacity:0}
.ovs-pf-phone{position:absolute;right:0;bottom:0;width:23%;min-width:120px;aspect-ratio:9/19;border-radius:26px;padding:7px;background:#16120C;border:1px solid rgba(240,228,205,.18);box-shadow:0 30px 70px rgba(0,0,0,.65),-10px 0 40px rgba(0,0,0,.35)}
html.ovs-anim .ovs-pf-phone{transform:translateY(40px) rotate(3deg);opacity:0;transition:transform 1s var(--ovs-ease) .12s,opacity 1s var(--ovs-ease) .12s}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-phone{transform:none;opacity:1}
.ovs-pf-phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:32%;height:13px;border-radius:99px;background:#050403;z-index:2}
.ovs-pf-phone-scr{position:relative;height:100%;border-radius:20px;overflow:hidden;background:#0B0906}
.ovs-portfolio .ovs-pf-phone-scr img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:fill;will-change:transform}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-phone-scr img.ovs-ready{animation:ovsPfPan var(--pf-pdur,26s) ease-in-out infinite alternate}
@keyframes ovsPfPan{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(var(--pf-pd,0px))}}

/* Meta */
.ovs-pf-meta{display:grid;grid-template-columns:1.25fr 1fr;gap:1.2rem 2.2rem;margin-top:1.1rem;padding-top:1.2rem;border-top:1px solid var(--ovs-line)}
html.ovs-anim .ovs-pf-meta > *{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ovs-ease),transform .7s var(--ovs-ease)}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-meta > *{opacity:1;transform:none}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-meta > *:nth-child(2){transition-delay:.08s}
html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-meta > *:nth-child(3){transition-delay:.16s}
.ovs-pf-count{font-family:var(--ovs-mono);font-size:.6rem;letter-spacing:.26em;color:var(--ovs-copper);text-transform:uppercase;margin-bottom:.55rem}
.ovs-portfolio .ovs-pf-name{font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:.02em;line-height:1.02;color:var(--ovs-text)}
.ovs-pf-where{margin-top:.45rem;font-size:.8rem;color:var(--ovs-muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ovs-pf-where svg{width:13px;height:13px;color:var(--ovs-champ)}
.ovs-pf-desc{margin-top:.7rem;font-size:.9rem;line-height:1.65;color:var(--ovs-muted)}
.ovs-portfolio .ovs-pf-built h4{font-family:var(--ovs-mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ovs-champ);margin-bottom:.8rem;font-weight:400}
.ovs-pf-built ul{display:grid;gap:.55rem}
.ovs-pf-built li{display:flex;gap:.6rem;font-size:.86rem;line-height:1.5;color:var(--ovs-text)}
.ovs-pf-built li::before{content:"";flex:none;width:5px;height:5px;margin-top:.55em;border-radius:50%;background:var(--acc)}
.ovs-pf-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.ovs-pf-tags span{font-family:var(--ovs-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ovs-champ);border:1px solid var(--ovs-champ-border);border-radius:99px;padding:.3rem .65rem;background:var(--ovs-champ-dim)}
.ovs-pf-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.ovs-pf-spacer{flex:1}
.ovs-pf-nav{display:flex;gap:.45rem}
.ovs-pf-arrow{width:44px;height:44px;border-radius:12px;border:1px solid var(--ovs-line);background:rgba(255,250,240,.02);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,color .2s;padding:0}
.ovs-pf-arrow:hover{border-color:var(--ovs-champ-border);color:var(--ovs-champ)}
.ovs-pf-arrow svg{width:17px;height:17px}

/* CTA strip */
.ovs-pf-cta{margin-top:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;padding:1.5rem 1.8rem;border-radius:var(--ovs-r);border:1px dashed var(--ovs-champ-border);background:var(--ovs-champ-dim)}
.ovs-pf-cta p{font-size:1.02rem;color:var(--ovs-muted);line-height:1.5}
.ovs-pf-cta p b{color:var(--ovs-text);font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.3rem;display:block;margin-bottom:.15rem}

/* Explorer (lightbox) — lives on <body> on the frontend */
.ovs-pf-lb{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:rgba(6,5,4,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);--ovs-ease:cubic-bezier(.2,.7,.2,1)}
.ovs-pf-lb[hidden]{display:none}
.ovs-pf-lb button{font-family:inherit;color:inherit}
.ovs-pf-lb-top{display:flex;align-items:center;gap:1rem;padding:.9rem 22px;border-bottom:1px solid var(--ovs-line);flex-wrap:wrap}
.ovs-pf-lb-title{font-family:var(--ovs-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.2rem;margin-right:auto;line-height:1.1}
.ovs-pf-lb-title small{display:block;font-family:var(--ovs-mono);font-size:.56rem;letter-spacing:.24em;color:var(--ovs-muted);margin-top:.2rem}
.ovs-pf-seg{display:flex;gap:.3rem;padding:.28rem;border:1px solid var(--ovs-line);border-radius:12px;background:rgba(6,5,4,.55)}
.ovs-pf-seg button{font-size:.76rem;font-weight:600;padding:.48rem .85rem;border-radius:9px;border:1px solid transparent;background:none;color:var(--ovs-muted);cursor:pointer;line-height:1.2}
.ovs-pf-lb .ovs-pf-seg button.ovs-on{background:var(--ovs-champ-dim);color:var(--ovs-champ);border-color:var(--ovs-champ-border)}
.ovs-pf-lb-close{width:42px;height:42px;border-radius:12px;border:1px solid var(--ovs-line);background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.ovs-pf-lb-close:hover{border-color:var(--ovs-champ-border);color:var(--ovs-champ)}
.ovs-pf-lb-close svg{width:18px;height:18px}
.ovs-pf-lb-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:2rem 22px 4rem}
.ovs-pf-lb-frame{margin:0 auto;width:min(100%,1100px);border-radius:14px;overflow:hidden;border:1px solid rgba(240,228,205,.14);box-shadow:0 40px 90px rgba(0,0,0,.55);transition:width .5s var(--ovs-ease)}
.ovs-pf-lb.ovs-mobile .ovs-pf-lb-frame{width:min(100%,390px);border-radius:30px;border-width:8px;border-color:#16120C}
.ovs-pf-lb.ovs-mobile .ovs-pf-lb-frame .ovs-pf-bbar{display:none}
.ovs-pf-lb .ovs-pf-lb-img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:fill}
.ovs-pf-lb-end{text-align:center;margin-top:2rem;color:var(--ovs-muted);font-size:.88rem;line-height:1.6}
.ovs-pf-lb-end .ovs-btn{margin-top:1rem}

/* Editor: the explorer never opens there, and nothing is sticky inside the canvas */
body.elementor-editor-active .ovs-pf-lb{display:none}
body.elementor-editor-active .ovs-pf-index-col{position:static}

/* ── Responsive ── */
@media(max-width:1080px){
  .ovs-pf-show{grid-template-columns:minmax(0,1fr)}
  .ovs-pf-show > *{min-width:0}
  .ovs-pf-index-col{position:static}
  .ovs-pf-index{grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem;scroll-snap-type:x mandatory}
  .ovs-pf-index::-webkit-scrollbar{display:none}
  .ovs-pf-row{scroll-snap-align:start;border-color:var(--ovs-line)}
  .ovs-pf-index-foot{display:none}
}
@media(max-width:880px){
  .ovs-pf-meta{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .ovs-pf-slide{padding:1.1rem 1.1rem 1.3rem}
  .ovs-pf-slide:not(.ovs-on){position:absolute;top:0;left:0;width:100%}
  .ovs-pf-devices{padding-right:0;padding-bottom:0}
  .ovs-pf-phone{display:none}
  .ovs-pf-screen{aspect-ratio:4/5}
  .ovs-pf-stats{gap:1.5rem}
  .ovs-pf-actions .ovs-btn{justify-content:center;padding:.85rem 1rem}
  .ovs-pf-actions .ovs-btn-primary{flex:1 1 100%}
  .ovs-pf-actions .ovs-pf-open{flex:1}
  .ovs-pf-spacer{display:none}
}
/* Touch: no inner scroll (it would trap page scrolling) — slow auto-pan instead; tap opens the explorer */
@media(pointer:coarse){
  .ovs-pf-screen{cursor:pointer;overflow:hidden}
  html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-screen img.ovs-ready{animation:ovsPfPan var(--pf-pdur,26s) ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-phone-scr img.ovs-ready,
  html.ovs-anim .ovs-pf-slide.ovs-on .ovs-pf-screen img.ovs-ready{animation:none}
}