/* LOGA V1.9.29 / Adaptive Brand Frames
   Thin, open, brand-colored technical frame. Only the outer portfolio detail changes. */
.portfolio-page .portfolio-detail {
  --bf-main:#DE241B;
  --bf-second:#F7A957;
  --bf-light:rgba(222,36,27,.25);
  --bf-second-light:rgba(247,169,87,.7);
  --bf-mark-a-x:77%;--bf-mark-b-x:10%;--bf-cross-x:9%;--bf-mark-c-x:88%;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  overflow:visible; isolation:isolate; position:relative;
  margin:16px 0 12px;
}
.portfolio-page .portfolio-detail .detail-shell {position:relative; z-index:0;}
.portfolio-page .portfolio-detail .detail-information,
.portfolio-page .portfolio-detail .detail-art {position:relative;z-index:2;}
.portfolio-page .portfolio-detail .detail-information {border-right-color:var(--bf-light);}
.portfolio-page .portfolio-detail .detail-accent {background:var(--bf-main);border-radius:1px;}
.portfolio-page .portfolio-detail .detail-meta-item > .icon {stroke:var(--bf-main);}
.portfolio-page .brand-frame-lines {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;}
.portfolio-page .bf-line,
.portfolio-page .bf-mark,
.portfolio-page .bf-cross,
.portfolio-page .bf-square {position:absolute;display:block;box-sizing:border-box;pointer-events:none;}
.portfolio-page .bf-line {background:var(--bf-light);}
.portfolio-page .bf-top{top:0;left:0;right:0;height:1px;}
.portfolio-page .bf-bottom{bottom:0;left:0;right:0;height:1px;}
.portfolio-page .bf-left{left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--bf-light) 0 54%,transparent 54% 79%,var(--bf-light) 79%);}
.portfolio-page .bf-right{right:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 0 11%,var(--bf-light) 11% 67%,transparent 67% 79%,var(--bf-light) 79%);}
.portfolio-page .bf-mark{height:4px;background:var(--bf-main);}
.portfolio-page .bf-mark-a{top:-1.5px;left:var(--bf-mark-a-x);width:75px;background:var(--bf-second);}
.portfolio-page .bf-mark-b{bottom:-1.5px;left:var(--bf-mark-b-x);width:63px;background:var(--bf-main);}
.portfolio-page .bf-mark-c{top:-1.5px;left:var(--bf-mark-c-x);width:23px;background:var(--bf-main);height:3px;}
.portfolio-page .bf-mark-d{bottom:-1.5px;right:15%;width:26px;background:var(--bf-second);height:3px;}
.portfolio-page .bf-cross{height:34px;width:1px;background:var(--bf-main);opacity:.8;}
.portfolio-page .bf-cross::after{content:"";position:absolute;width:32px;height:1px;background:currentColor;top:12px;left:-15px;color:var(--bf-main);}
.portfolio-page .bf-cross-a{top:-14px;left:var(--bf-cross-x);}
.portfolio-page .bf-cross-b{right:7%;bottom:-16px;height:31px;background:var(--bf-second);}
.portfolio-page .bf-cross-b::after{color:var(--bf-second)}
.portfolio-page .bf-square{right:0;top:0;width:6px;height:6px;background:var(--bf-main);transform:translate(50%,-50%);}
/* Five deliberate, repeatable structural motifs, with per-brand offsets assigned by JS. */
.portfolio-page .portfolio-detail[data-frame-layout="2"] .bf-cross-a{top:auto;bottom:-17px;}
.portfolio-page .portfolio-detail[data-frame-layout="2"] .bf-cross-b{bottom:auto;top:-14px;}
.portfolio-page .portfolio-detail[data-frame-layout="2"] .bf-mark-c{display:none;}
.portfolio-page .portfolio-detail[data-frame-layout="2"] .bf-square{top:auto;bottom:0;transform:translate(50%,50%)}
.portfolio-page .portfolio-detail[data-frame-layout="3"] .bf-mark-a{background:var(--bf-main);width:58px;}
.portfolio-page .portfolio-detail[data-frame-layout="3"] .bf-mark-b{background:var(--bf-second);width:82px;}
.portfolio-page .portfolio-detail[data-frame-layout="3"] .bf-cross-b{right:13%;}
.portfolio-page .portfolio-detail[data-frame-layout="3"] .bf-square{left:0;right:auto;top:0;transform:translate(-50%,-50%)}
.portfolio-page .portfolio-detail[data-frame-layout="4"] .bf-mark-c{top:auto;bottom:-2px;left:auto;right:24%;}
.portfolio-page .portfolio-detail[data-frame-layout="4"] .bf-cross-a{height:22px;top:-9px;}
.portfolio-page .portfolio-detail[data-frame-layout="4"] .bf-square{right:8%;}
.portfolio-page .portfolio-detail[data-frame-layout="5"] .bf-mark-b{left:auto;right:var(--bf-mark-b-x);}
.portfolio-page .portfolio-detail[data-frame-layout="5"] .bf-mark-d{display:none;}
.portfolio-page .portfolio-detail[data-frame-layout="5"] .bf-cross-b{right:2%;bottom:auto;top:-11px;}
.portfolio-page .portfolio-detail[data-frame-layout="5"] .bf-square{right:auto;left:0;top:auto;bottom:0;transform:translate(-50%,50%)}
/* Minimal, accessible X inside the top-right frame boundary. */
.portfolio-page .portfolio-detail .detail-close {
  top:5px;right:6px;z-index:12;width:44px;height:44px;
  border:0;border-radius:0;box-shadow:none;background:transparent;
  color:var(--bf-main);padding:0;display:grid;place-items:center;
  transition:color .18s ease,opacity .18s ease,background-color .18s ease;
}
.portfolio-page .portfolio-detail .detail-close .icon {width:17px;height:17px;stroke-width:1.3;stroke-linecap:square;}
.portfolio-page .portfolio-detail .detail-close:hover {transform:none;color:var(--bf-main);background:transparent;opacity:.55;}
.portfolio-page .portfolio-detail .detail-close:focus-visible {outline:2px solid var(--bf-main);outline-offset:-2px;}
/* The frame is a single clean surface; showcase cards and their positions stay untouched. */
@media(max-width:980px){
  .portfolio-page .portfolio-detail .detail-information {border-right:0;border-bottom:1px solid var(--bf-light);}
  .portfolio-page .portfolio-detail .detail-shell {padding-left:26px;padding-right:26px;}
  .portfolio-page .bf-cross-b {right:12%;}
}
@media(max-width:600px){
  .portfolio-page .portfolio-detail{margin:13px 0 15px;}
  .portfolio-page .portfolio-detail .detail-shell{padding:25px 20px 19px;}
  .portfolio-page .portfolio-detail .detail-close{top:1px;right:1px;}
  .portfolio-page .bf-mark-a{width:33px;}
  .portfolio-page .bf-mark-b{width:27px;}
  .portfolio-page .bf-mark-c{width:12px;}
  .portfolio-page .bf-mark-d{width:12px;}
  .portfolio-page .bf-cross{height:18px;}
  .portfolio-page .bf-cross::after{width:17px;left:-8px;top:9px;}
  .portfolio-page .bf-cross-b{bottom:-8px;}
  .portfolio-page .bf-square{width:4px;height:4px;}
}
@media(prefers-reduced-motion:reduce){.portfolio-page .portfolio-detail .detail-close{transition:none!important}}