/* ==================================================================
   Portfolio — bespoke layout + interactions (2024 refresh)
   ================================================================== */

body.portfolio-page{
  background-color:var(--taupe);
  background-image:none;
  color:var(--slate);
  min-height:100vh;
}

body.portfolio-page::before{opacity:.6;}
body.portfolio-page::after{opacity:.42;}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

body.portfolio-page main{
  padding-top:var(--nav-h);
}

.portfolio-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--nav-h));
  padding:clamp(96px, 12vh, 160px) 0 120px;
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid rgba(43,47,51,.08);
  box-shadow:0 34px 70px rgba(0,0,0,.08);
}
.portfolio-hero::after{content:none;}

.hero-background{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.flux-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter:saturate(0.92) contrast(0.98);
}

.hero-gradient{
  position:absolute;
  inset:auto -12% -52% -12%;
  height:52%;
  background:linear-gradient(180deg, rgba(244,239,230,0) 0%, rgba(244,239,230,.8) 46%, rgba(254,252,247,.96) 100%);
  z-index:-1;
}

.portfolio-sections{
  position:relative;
  margin-top:-60px;
  padding:140px 0 160px;
  background:var(--taupe);
  color:var(--slate);
  z-index:1;
  overflow:hidden;
}
.portfolio-sections::before{content:none;}

.hero-layout{
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(0, 360px);
  align-items:start;
  gap:clamp(40px, 6vw, 96px);
}

@media (max-width:1024px){
  .hero-layout{grid-template-columns:1fr;}
  .portfolio-hero{padding-bottom:80px;}
}

.hero-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.hero-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2.7rem, 6vw, 4.6rem);
  color:var(--slate-strong);
}

.hero-subtitle{
  font-size:clamp(1.05rem, 2.4vw, 1.4rem);
  max-width:52ch;
  margin:0;
  color:rgba(43,47,51,.72);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px clamp(16px, 4vw, 36px);
}

.hero-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 34px;
  border-radius:999px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.08em;
  border:0;
  background:var(--accent-sheen);
  color:#fff;
  box-shadow:0 24px 48px var(--accent-halo);
  transition:transform .25s ease, box-shadow .25s ease, background-position .35s ease;
  background-size:140% 140%;
}

.hero-button .arrow{transition:transform .25s ease;}

.hero-button:hover{
  transform:translateY(-2px);
  box-shadow:0 32px 64px var(--accent-halo-strong);
  background-position:20% 50%;
}

.hero-button:hover .arrow{transform:translateX(4px);}

.hero-scroll-hint{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color:rgba(43,47,51,.55);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-scroll-hint .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(43,47,51,.28);
  position:relative;
  overflow:hidden;
}

.hero-scroll-hint .dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(43,47,51,.8);
  animation:pulse 2.6s ease-in-out infinite;
}

@keyframes pulse{
  0%, 20%{transform:scale(.2);opacity:0;}
  45%{transform:scale(1);opacity:.85;}
  100%{transform:scale(1.7);opacity:0;}
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-content:start;
  padding:26px;
  border-radius:26px;
  background:var(--surface-strong);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(10px);
}

.hero-stats .stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(240,236,228,.9), rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.hero-stats .stat-value{
  font-size:2.2rem;
  font-weight:800;
  color:var(--slate-strong);
}

.hero-stats .stat-label{
  font-size:.95rem;
  color:rgba(43,47,51,.6);
}

@media (max-width:1024px){
  .hero-stats{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width:640px){
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .hero-button{width:100%;justify-content:center;}
  .hero-scroll-hint{padding-top:8px;}
  .hero-stats{margin-top:16px;padding:20px;}
}
.portfolio-sections > *{
  position:relative;
  z-index:1;
}

.category-block{
  position:relative;
  padding:96px 0;
}

.category-block:nth-of-type(even){background:transparent;}

.section-heading{
  position:relative;
  z-index:1;
  max-width:720px;
  margin-bottom:38px;
}

.section-heading h2{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2rem, 4vw, 3.1rem);
  color:var(--slate-strong);
}

.section-heading p{
  margin:0;
  font-size:1.05rem;
  color:rgba(43,47,51,.65);
}

.portfolio-sections .section-heading h2{color:var(--slate-strong);}
.portfolio-sections .section-heading p{color:rgba(43,47,51,.7);}

.project-rail{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.rail-window{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:18px;
  margin:0 -24px;
  padding-left:24px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:20px;
}
.rail-window::-webkit-scrollbar{height:0;}

@media (min-width:960px){
  .rail-window{margin:0; padding-left:0;}
}

.rail-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, clamp(320px, 32vw, 420px));
  gap:clamp(18px, 4vw, 36px);
  scroll-snap-align:start;
}

.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface-strong);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  min-height:100%;
  scroll-snap-align:start;
  border:1px solid var(--card-border);
  transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
}

.project-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 68%, rgba(0,0,0,.08) 100%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  border-radius:inherit;
}

.project-card:focus-within::after,
.project-card:hover::after{opacity:1;}

.project-card.is-active,
.project-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--card-shadow-strong);
}

.project-media{
  aspect-ratio:4/3;
  background:#f4f1eb;
  overflow:hidden;
  position:relative;
}

.project-media--live {
  --live-scale: 0.3;
  aspect-ratio: 16 / 10;
}

.project-media--live iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--live-scale));
  height: calc(100% / var(--live-scale));
  transform: scale(var(--live-scale));
  transform-origin: top left;
  border: 0;
  border-radius: inherit;
}

@media (max-width: 1080px) {
  .project-media--live {
    --live-scale: 0.26;
  }
}

@media (max-width: 760px) {
  .project-media--live {
    --live-scale: 0.22;
  }
}

@media (max-width: 520px) {
  .project-media--live {
    --live-scale: 0.18;
  }
}

.project-media img,
.project-media model-viewer{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.project-media--viewer model-viewer{
  --poster-color:transparent;
  --model-viewer-interaction-prompt-color:rgba(255,255,255,.92);
  background:var(--viewer-bg, var(--viewer-bg-solid, #5f6b78));
}

.project-media--viewer model-viewer::part(interaction-prompt){
  color:rgba(255,255,255,.92);
}

.project-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 26px 28px;
  color:var(--slate);
}

.project-kicker{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--slate-strong);
}

.project-summary{
  margin:0;
  color:rgba(43,47,51,.68);
  font-size:.98rem;
  line-height:1.6;
}

#automotive .project-summary{
  max-height:132px;
  overflow-y:auto;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(244,241,235,.86), rgba(255,255,255,.72));
  border:1px solid rgba(43,47,51,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}

.portfolio-modal[data-category="automotive"] .portfolio-modal__summary,
.portfolio-modal[data-category="automotive"] .modal-description{
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(244,241,235,.86), rgba(255,255,255,.72));
  border:1px solid rgba(43,47,51,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.portfolio-modal[data-category="automotive"] .modal-description{
  overflow-y:auto;
  max-height:clamp(280px, 48vh, 520px);
  overscroll-behavior:contain;
}

/* NEW: match automotive styling for electrical modals */
.portfolio-modal[data-category="electrical"] .portfolio-modal__summary,
.portfolio-modal[data-category="electrical"] .modal-description{
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(244,241,235,.86), rgba(255,255,255,.72));
  border:1px solid rgba(43,47,51,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.portfolio-modal[data-category="electrical"] .modal-description{
  overflow-y:auto;
  max-height:clamp(280px, 48vh, 520px);
  overscroll-behavior:contain;
}

#automotive .project-summary::-webkit-scrollbar{
  width:8px;
}
#automotive .project-summary::-webkit-scrollbar-thumb{
  background:rgba(43,47,51,.25);
  border-radius:999px;
}

.project-action{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  background:transparent;
  border:2px solid color-mix(in srgb, var(--accent-strong) 65%, transparent);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-strong);
  box-shadow:0 12px 28px var(--accent-halo);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease;
  cursor:pointer;
}

.project-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.project-action--link{
  text-decoration:none;
}

.project-action span[aria-hidden="true"]{transition:transform .25s ease;}

.project-action:hover{
  transform:translateY(-1px);
  background:var(--accent-strong);
  color:#fff;
  border-color:color-mix(in srgb, var(--accent-strong) 88%, white);
  box-shadow:0 18px 40px var(--accent-halo-strong);
}

.project-action:hover span[aria-hidden="true"]{transform:translateX(3px);}

.rail-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 4px;
}

.rail-label{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  color:rgba(43,47,51,.75);
  white-space:nowrap;
}

.rail-buttons{
  display:flex;
  gap:12px;
}

.rail-buttons button{
  width:52px;
  height:52px;
  border-radius:50%;
  border:0;
  background:var(--accent-soft, #c0121d);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow:0 16px 28px rgba(0,0,0,.16);
}

.rail-buttons button:hover{
  transform:translateY(-2px);
  background:color-mix(in oklab, var(--accent-soft, #c0121d) 88%, black);
  box-shadow:0 20px 36px rgba(0,0,0,.18);
  color:#fff;
}

.rail-buttons button:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px color-mix(in oklab, var(--accent-soft, #c0121d) 70%, white);
}

.rail-buttons button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.rail-progress{
  position:relative;
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(43,47,51,.12);
  overflow:hidden;
}

.rail-progress__bar{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(43,47,51,.2), rgba(43,47,51,.72));
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .3s ease;
}

@media (max-width:680px){
  .rail-controls{flex-direction:column;align-items:flex-start;gap:16px;}
  .rail-label{letter-spacing:.2em;}
  .rail-progress{width:100%;}
}

.footer{margin-top:80px;}

/* ============================= Modal ============================= */

body.modal-open{
  overflow:hidden;
}

.portfolio-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(10,14,18,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:120;
}

.portfolio-modal.open{
  opacity:1;
  pointer-events:auto;
}

.portfolio-modal__backdrop{
  position:absolute;
  inset:0;
}

.portfolio-modal__dialog{
  position:relative;
  width:min(1080px, 92vw);
  max-height:min(92vh, 960px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:linear-gradient(180deg, #ffffff 0%, #f7f4ed 100%);
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(8,12,20,.45);
  transform:translateY(32px) scale(.98);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}

.portfolio-modal.open .portfolio-modal__dialog{
  transform:translateY(0) scale(1);
}

.portfolio-modal__close{
  position:absolute;
  top:22px;
  right:24px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(24,28,34,.08);
  color:rgba(24,28,34,.8);
  font-size:1.5rem;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.portfolio-modal__close:hover,
.portfolio-modal__close:focus-visible{
  background:var(--slate-strong, #2b2f33);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(12,17,24,.25);
  outline:0;
}

.portfolio-modal__header{
  padding:clamp(32px, 6vw, 48px);
  padding-bottom:clamp(24px, 5vw, 32px);
  background:linear-gradient(135deg, rgba(240,235,224,.95), rgba(255,255,255,.9));
  border-bottom:1px solid rgba(24,28,34,.08);
}

.portfolio-modal__kicker{
  margin:0;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(24,28,34,.52);
}

.portfolio-modal__header h2{
  margin:14px 0 12px;
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.12;
  color:var(--slate-strong, #2b2f33);
}

.portfolio-modal__summary{
  margin:0;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(24,28,34,.72);
  max-width:65ch;
}

.portfolio-modal__body{
  position:relative;
  overflow-y:auto;
  padding:clamp(24px, 5vw, 40px);
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,242,235,.92) 100%);
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 4vw, 36px);
  scroll-padding:clamp(24px, 5vw, 40px);
}

.portfolio-modal__body > *{
  flex:0 0 auto;
}

.portfolio-modal__columns{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 4vw, 36px);
}

.portfolio-modal__columns > *{
  flex:0 0 auto;
}

.portfolio-modal__column{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 3.6vw, 32px);
}

.portfolio-modal__body::-webkit-scrollbar{
  width:12px;
}
.portfolio-modal__body::-webkit-scrollbar-thumb{
  background:rgba(36,42,50,.25);
  border-radius:999px;
}

.modal-card{
  position:relative;
  background:#fff;
  border-radius:28px;
  padding:clamp(22px, 3vw, 32px);
  box-shadow:0 24px 52px rgba(12,18,26,.16);
  border:1px solid rgba(24,28,34,.06);
  display:flex;
  flex-direction:column;
  gap:clamp(16px, 3vw, 24px);
  overflow:hidden;
}

.modal-card__header{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.modal-card__label{
  margin:0;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(24,28,34,.5);
}

.modal-card__title{
  margin:0;
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(1.3rem, 2.8vw, 1.9rem);
  line-height:1.25;
  color:var(--slate-strong, #2b2f33);
}

.modal-card__intro{
  margin:0;
  font-size:.95rem;
  line-height:1.6;
  color:rgba(24,28,34,.64);
}

/* -------- gallery card (Highlights) ---------- */
.modal-gallery{
  background:linear-gradient(140deg, rgba(255,255,255,.96), rgba(234,229,218,.9));
  overflow:hidden;
  position:relative;
}

.modal-gallery::before,
.modal-gallery::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  pointer-events:none;
  z-index:1;
}
.modal-gallery::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}
.modal-gallery::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}

/* upgraded rail (kept horizontal scroll, better cards) */
.modal-gallery__rail{
  position:relative;
  z-index:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:clamp(16px, 3vw, 24px);
  overflow-x:auto;
  overflow-y:hidden;
  padding-inline:clamp(12px, 3vw, 24px);
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:rgba(36,42,50,.35) transparent;
}
.modal-gallery__rail::-webkit-scrollbar{height:10px;}
.modal-gallery__rail::-webkit-scrollbar-thumb{
  background:rgba(36,42,50,.3);
  border-radius:999px;
}

.modal-gallery__item{
  margin:0;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  scroll-snap-align:center;
  aspect-ratio:3 / 2;
  min-height:clamp(220px, 36vw, 420px);
  width:clamp(240px, 52vw, 460px);
  flex:0 0 clamp(240px, 52vw, 460px);
  box-shadow:0 22px 48px rgba(10,16,24,.22);
  display:flex;
  transition:transform .4s ease, box-shadow .4s ease;
}

.modal-gallery__item--viewer{
  background:linear-gradient(160deg, rgba(28,34,42,.92), rgba(17,20,24,.82));
  padding:clamp(14px, 3vw, 20px);
}

.modal-gallery__item--live{
  --live-scale:0.48;
  aspect-ratio:16 / 10;
  background:linear-gradient(160deg, rgba(24,28,36,.94), rgba(14,18,26,.88));
  padding:clamp(16px, 3vw, 24px);
  display:flex;
  align-items:stretch;
}

.modal-gallery__live-frame{
  position:relative;
  flex:1;
  border-radius:clamp(16px, 3vw, 22px);
  overflow:hidden;
  background:radial-gradient(circle at 18% 12%, rgba(58,64,78,.45), rgba(14,16,22,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.modal-gallery__item--live iframe{
  position:absolute;
  top:0;
  left:0;
  width:calc(100% / var(--live-scale));
  height:calc(100% / var(--live-scale));
  transform:scale(var(--live-scale));
  transform-origin:top left;
  border:0;
  border-radius:inherit;
  background:#0f141b;
  transition:transform .45s ease, box-shadow .45s ease;
  box-shadow:0 18px 48px rgba(6,10,18,.38);
}

.modal-gallery__item--live:hover iframe{
  transform:scale(calc(var(--live-scale) * 1.04));
  box-shadow:0 26px 60px rgba(6,10,18,.48);
}

.modal-gallery__live-hint{
  position:absolute;
  left:clamp(18px, 3vw, 28px);
  bottom:clamp(18px, 3vw, 28px);
  padding:12px 16px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:color-mix(in oklab, rgba(10,14,22,.92) 82%, transparent);
  color:#fff;
  pointer-events:none;
  box-shadow:0 16px 32px rgba(5,8,14,.4);
  text-shadow:0 2px 6px rgba(4,7,12,.6);
}

.modal-gallery__live-hint strong{
  font-size:.95rem;
  letter-spacing:.02em;
}

.modal-gallery__live-hint span{
  font-size:.85rem;
  opacity:.88;
}

.modal-gallery__image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.modal-gallery__item--viewer model-viewer{
  width:100%;
  height:100%;
  border-radius:18px;
  background:var(--viewer-bg, color-mix(in srgb, #58606b 72%, #0d1117));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s ease, box-shadow .4s ease;
}

.modal-gallery__item:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 58px rgba(8,12,20,.28);
}
.modal-gallery__item:hover .modal-gallery__image{
  transform:scale(1.03);
}

.modal-gallery__item--viewer:hover model-viewer{
  transform:scale(1.02);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}

@media (max-width: 960px){
  .modal-gallery__item--live{--live-scale:0.42;}
}

@media (max-width: 720px){
  .modal-gallery__item--live{--live-scale:0.36;}
}

.modal-gallery__caption{
  position:absolute;
  left:clamp(12px, 3vw, 20px);
  right:clamp(12px, 3vw, 20px);
  bottom:clamp(12px, 3vw, 20px);
  margin:0;
  padding:12px 16px;
  border-radius:16px;
  background:color-mix(in oklab, rgba(14,18,24,.9) 85%, transparent);
  color:#fff;
  font-size:.9rem;
  line-height:1.4;
  box-shadow:0 12px 24px rgba(0,0,0,.32);
}

.modal-gallery__viewer-fallback{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:8px;
  width:100%;
  padding:clamp(18px, 4vw, 28px);
  background:linear-gradient(155deg, rgba(22,26,32,.92), rgba(41,47,56,.88));
  color:#fff;
  text-align:left;
}

.modal-gallery__viewer-fallback strong{
  font-size:1rem;
  letter-spacing:.02em;
}

.modal-gallery__viewer-fallback p{
  margin:0;
  font-size:.9rem;
  opacity:.85;
}

/* gallery scroll buttons (red circles) */
.modal-gallery__control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft, #c0121d);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
  box-shadow:0 16px 32px color-mix(in oklab, var(--accent-soft, #c0121d) 62%, transparent);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .25s ease;
}
.modal-gallery__control:hover,
.modal-gallery__control:focus-visible{
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 22px 42px color-mix(in oklab, var(--accent-soft, #c0121d) 72%, transparent);
  background:color-mix(in oklab, var(--accent-soft, #c0121d) 88%, black);
  outline:0;
}
.modal-gallery__control--prev{left:clamp(12px, 3vw, 24px);}
.modal-gallery__control--next{right:clamp(12px, 3vw, 24px);}

.modal-description{
  background:linear-gradient(165deg, rgba(255,255,255,.98), rgba(244,241,232,.9));
}

.modal-description__content{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  font-size:1rem;
  color:rgba(24,28,34,.78);
  line-height:1.7;
}
.modal-description__content p{margin:0;}

.modal-actions{
   background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,237,228,.88));
}

.modal-actions__list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:stretch;
}
.modal-actions__list .btn-primary{
  flex:1 1 200px;
  min-width:160px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px clamp(24px, 5vw, 32px);
  border-radius:999px;
  box-shadow:0 16px 34px rgba(12,18,26,.2);
  transition:transform .25s ease, box-shadow .25s ease;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}
.modal-actions__list .btn-primary:hover,
.modal-actions__list .btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(12,18,26,.26);
  outline:0;
}

.modal-collection{
  background:linear-gradient(150deg, rgba(255,255,255,.97), rgba(238,235,226,.9));
}
.modal-collection__list{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:flex-start;
  justify-content:flex-start;
}
.modal-collection__btn{
  border:1px solid rgba(24,28,34,.18);
  border-radius:999px;
  padding:10px 20px;
  background:rgba(255,255,255,.86);
  color:var(--slate-strong, #2b2f33);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.modal-collection__btn::after{
  content:'\2192';
  font-size:1rem;
  transition:transform .25s ease;
}
.modal-collection__btn:hover,
.modal-collection__btn:focus-visible{
  background:var(--slate-strong, #2b2f33);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(12,18,26,.22);
  outline:0;
}
.modal-collection__btn:hover::after,
.modal-collection__btn:focus-visible::after{
  transform:translateX(4px);
}

/* viewer card */
.modal-viewer{
  background:linear-gradient(160deg, rgba(32,38,48,.96), rgba(18,24,34,.9));
  color:#fff;
}
.modal-viewer .modal-card__label{color:rgba(255,255,255,.6);}
.modal-viewer .modal-card__title{color:#fff;}
.modal-viewer .modal-card__intro{color:rgba(255,255,255,.88);}

/* expanded stage like you wanted */
.modal-viewer__stage{
  flex:0 0 auto;
  min-height:clamp(340px, 50vh, 560px);
  display:flex;
  align-items:stretch;
  padding:clamp(8px, 1.8vw, 16px);
  background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(10,16,26,.45));
  border-radius:24px;
}
.modal-viewer model-viewer,
.modal-viewer .viewer-placeholder{
  width:100%;
  border-radius:18px;
}
.modal-viewer model-viewer{
  background:var(--viewer-bg, rgba(255,255,255,.08));
  flex:1 1 auto;
  min-height:clamp(320px, 48vh, 540px);
}

.viewer-placeholder{
  padding:clamp(32px, 4vw, 48px);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.8);
}
.viewer-placeholder strong{
  font-size:1.3rem;
  color:#fff;
}
.viewer-placeholder__status{
  margin:0;
  font-size:.95rem;
  line-height:1.6;
}
.viewer-placeholder__refs{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:"JetBrains Mono","Courier New",monospace;
  font-size:.85rem;
}
.viewer-placeholder__ref-status{
  font-weight:700;
  margin-left:4px;
  text-transform:uppercase;
}
.viewer-placeholder__ref-status[data-status="missing"]{color:#ffb3b3;}
.viewer-placeholder__ref-status[data-status="found"]{color:#85f0c7;}
.viewer-placeholder__ref-status[data-status="check manually"],
.viewer-placeholder__ref-status[data-status="unknown"]{color:#ffd591;}

/* Two-column layout for modal cards */
@media (min-width:900px){
  .portfolio-modal__columns{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(24px, 4vw, 40px);
    row-gap:clamp(20px, 4vw, 36px);
    align-items:start;
  }

  .portfolio-modal__column{
    gap:clamp(18px, 3.4vw, 30px);
  }
}

@media (max-width:900px){
  .modal-actions__list{flex-direction:column;}
  .modal-actions__list .btn-primary{width:100%;}
}

@media (max-width:720px){
  .portfolio-modal__dialog{
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  .portfolio-modal__header{padding-top:72px;}
}

@media (max-width:600px){
  /* rail already flex, so just tighten overlay width */
  .modal-gallery::before,
  .modal-gallery::after{
    width:48px;
  }
}

@media (prefers-reduced-motion:reduce){
  .portfolio-modal{
    transition:none;
  }
  .portfolio-modal__dialog{
    transform:none;
    transition:none;
  }
  .modal-gallery__image,
  .modal-actions__list .btn-primary,
  .modal-collection__btn{
    transition:none;
  }
}