/* Approved experimental slider.css + surfaces.css + desktop.css, scoped for
   the portfolio. Only section geometry and the established 900px desktop
   boundary adapt the demo; GSAP remains the owner of all card transforms. */
.premium-slider {
 --scene:var(--surface-stage);--scene-ink:#f2f1eb;--scene-muted:#b2c7cb;--scene-line:#4d666d;
 --card-width:min(84vw,360px);--card-height:min(440px,calc(100svh - 158px));
 --premium-center:calc(51% + var(--header-h)/2);
 position:relative;width:100%;height:max(600px,calc(100svh - var(--header-h)));
 overflow:hidden;isolation:isolate;color:var(--scene-ink);
 font:16px/1.5 Inter,system-ui,sans-serif;color-scheme:dark;text-align:left;
 background:radial-gradient(ellipse at 18% 45%,#12352b66,transparent 48%),radial-gradient(ellipse at 90% 82%,#1a3d3238,transparent 45%),linear-gradient(165deg,#0e1c18,var(--scene) 49%,#060e0c);
}
.premium-slider,.premium-slider *,.premium-slider *::before,.premium-slider *::after {box-sizing:border-box}
.premium-slider :is(p,h3,h4,ul) {margin:0}
.premium-svg-defs {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

.premium-slider button {font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.premium-slider button:focus-visible {outline:2px solid currentColor;outline-offset:5px}
.premium-slider button:disabled {cursor:default}
.premium-slider .experiment-header {position:absolute;z-index:110;top:clamp(26px,5.5svh,48px);left:8vw;right:8vw;display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.premium-slider .experiment-heading {max-width:34ch}
.premium-slider .experiment-header h3 {font-size:clamp(25px,6.8vw,31px);font-weight:510;line-height:1.08;letter-spacing:-.045em}
.premium-slider .experiment-note {max-width:none;margin-top:14px;font-size:10px;line-height:1.65;letter-spacing:.105em;text-transform:uppercase;color:var(--scene-muted)}
.premium-slider .language-toggle {flex:none;width:44px;height:44px;padding:0;border:1px solid #617e87;border-radius:50%;background:#0a151d50;font-size:11px}
.premium-slider .cards {position:absolute;width:var(--card-width);height:var(--card-height);top:var(--premium-center);left:50%;transform:translate(-50%,-50%);padding:0;margin:0;list-style:none}
.premium-slider .project-card {position:absolute;inset:0 auto auto 0;width:var(--card-width);height:var(--card-height);list-style:none;padding:0;margin:0;border:1px solid var(--surface-edge,var(--card-ink));border-radius:28px;background:var(--surface-bg,var(--card-bg));color:var(--surface-ink,var(--card-ink));text-align:left;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff45,inset 0 0 24px var(--surface-glow),0 14px 40px #00000028}
.premium-slider .project-card::after {content:'';position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 24% 0%,#ffffff18,transparent 37%),linear-gradient(128deg,#ffffff08,transparent 38%,#00000012)}
.premium-slider .project-card-inner {position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;height:100%;padding:24px 23px}
.premium-slider .project-brand {flex:none;min-height:68px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.premium-slider .logo-plate {display:flex;align-items:center;justify-content:flex-start;width:190px;max-width:80%;height:68px;padding:0;background:none}
.premium-slider .logo-plate img {display:block;max-width:100%;width:auto;height:auto;max-height:64px;object-fit:contain;object-position:left center;user-select:none;-webkit-user-drag:none}
.premium-slider [data-project-id="unipol"] .logo-plate img {filter:url(#brand-unipol-light)}
.premium-slider [data-project-id="tenute-del-cerro"] .logo-plate {width:220px}
.premium-slider [data-project-id="iqos"] .logo-plate {width:214px}
.premium-slider [data-project-id="iqos"] .logo-plate img {filter:brightness(1.65) saturate(.85)}
.premium-slider .project-number {flex:none;margin-top:1px;font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--surface-ink)}
.premium-slider .project-brand-name {margin-top:-14px;font-size:11px;line-height:1.3;color:var(--surface-muted)}
.premium-slider .project-copy {flex:none;min-height:0}
.premium-slider .project-copy h4 {font-size:clamp(22px,5.8vw,26px);line-height:1.1;font-weight:510;letter-spacing:-.045em;overflow-wrap:break-word}
.premium-slider .project-summary {margin-top:12px;font-size:14px;line-height:1.5;color:var(--surface-muted)}
.premium-slider .project-technologies {display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:10.5px;line-height:1.2}
.premium-slider .project-technologies li {display:inline-flex;align-items:center;min-height:25px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--surface-ink) 30%,transparent);border-radius:100px;background:color-mix(in srgb,var(--surface-bg) 45%,transparent);white-space:nowrap}
.premium-slider .project-explore {display:flex;align-items:center;justify-content:space-between;flex:none;gap:16px;width:100%;min-height:44px;margin-top:18px;padding:0;border:0;border-radius:0;background:none;font-size:13px;line-height:1.3;text-align:left}
.premium-slider .project-action-icon {display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;background:color-mix(in srgb,var(--surface-bg) 65%,transparent);font-size:23px;line-height:1;transition:background-color .16s ease,transform .16s ease}
.premium-slider .project-select {display:none}
.premium-slider .project-explore:not(:disabled):active .project-action-icon {transform:scale(.92);background:color-mix(in srgb,var(--surface-accent) 24%,var(--surface-bg))}
.premium-slider .actions {position:absolute;z-index:110;left:8vw;right:8vw;top:calc(var(--premium-center) + var(--card-height)/2 + 32px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.premium-slider .slider-position {display:flex;align-items:center;gap:18px;flex:1;max-width:210px;min-width:0}
.premium-slider .slider-counter {flex:none;font-size:11px;line-height:1.3;letter-spacing:.025em;font-variant-numeric:tabular-nums}
.premium-slider .slider-counter-total {color:#a4bdc5}
.premium-slider .slider-progress {height:2px;flex:1;min-width:28px;background:#233c43;overflow:hidden}
.premium-slider .slider-progress i {display:block;height:100%;width:100%;background:#e9f2ef;transform:scaleX(var(--progress,.2));transform-origin:left center;transition:transform .22s ease}
.premium-slider .slider-arrows {display:flex;align-items:center;gap:12px}
.premium-slider .actions button {display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #708891;border-radius:50%;background:#07101455}
.premium-slider .actions button:active {background:#24444d}
.premium-slider .actions svg {width:21px;height:21px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.premium-slider .actions .prev svg {transform:rotate(180deg)}
.premium-slider .drag-proxy {visibility:hidden;position:absolute}
.premium-slider .vh {position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:360px) {
.premium-slider .project-card-inner {padding:20px 18px;gap:12px}
.premium-slider .project-brand {min-height:56px}
.premium-slider .logo-plate {height:56px;max-width:80%;width:164px}
.premium-slider .logo-plate img {max-height:52px}
.premium-slider .project-copy h4 {font-size:21px}
.premium-slider .project-summary {font-size:13.5px;line-height:1.45;margin-top:10px}
.premium-slider .project-technologies {font-size:10px;gap:5px}
.premium-slider .project-technologies li {padding:5px 6px;min-height:24px}
.premium-slider .project-explore {margin-top:12px;font-size:12px}
.premium-slider .project-action-icon {width:40px;height:40px;font-size:22px}
.premium-slider .project-card {border-radius:24px}
.premium-slider .slider-position {gap:12px}
.premium-slider .slider-arrows {gap:10px}
.premium-slider .actions {gap:16px}
}
@media(max-height:680px) {
.premium-slider {--premium-center:calc(50% + var(--header-h)/2)}
.premium-slider .experiment-header {top:max(16px,env(safe-area-inset-top))}
.premium-slider .experiment-header h3 {font-size:22px}
.premium-slider .experiment-note {display:none}
.premium-slider .language-toggle {width:44px;height:44px}
.premium-slider .cards {top:var(--premium-center)}
.premium-slider .actions {top:calc(var(--premium-center) + var(--card-height)/2 + 16px)}
}
@media(prefers-reduced-motion:reduce) {
.premium-slider .project-action-icon,
.premium-slider .slider-progress i {transition:none}
}

/* Approved static MarTech surfaces, also shared by native dialogs. */
:is(.premium-slider .project-card, .premium-detail)[data-project-id="unipol"] {--surface-bg: #062f31;
  --surface-ink: #f0f7f2;
  --surface-muted: #c5dcd5;
  --surface-edge: #4ab8ad;
  --surface-accent: #8ee3cf;
  --surface-glow: rgb(54 189 163 / .15);}
:is(.premium-slider .project-card, .premium-detail)[data-project-id="tenute-del-cerro"] {--surface-bg: #f1d3a6;
  --surface-ink: #30271d;
  --surface-muted: #5f4b35;
  --surface-edge: #d8b57d;
  --surface-accent: #795b31;
  --surface-glow: rgb(223 171 96 / .14);}
:is(.premium-slider .project-card, .premium-detail)[data-project-id="iqos"] {--surface-bg: #061d2d;
  --surface-ink: #eef6fa;
  --surface-muted: #c0d5df;
  --surface-edge: #4388a8;
  --surface-accent: #8edced;
  --surface-glow: rgb(60 145 190 / .15);}
:is(.premium-slider .project-card, .premium-detail)[data-project-id="genertel"] {--surface-bg: #eceae2;
  --surface-ink: #302529;
  --surface-muted: #68565b;
  --surface-edge: #c7b1b7;
  --surface-accent: #ad1545;
  --surface-glow: rgb(182 44 87 / .1);}
:is(.premium-slider .project-card, .premium-detail)[data-project-id="reply"] {--surface-bg: #dfe5dc;
  --surface-ink: #172b23;
  --surface-muted: #4b6254;
  --surface-edge: #a6baaa;
  --surface-accent: #196451;
  --surface-glow: rgb(29 108 75 / .12);}
.premium-slider .project-scenery,
.premium-detail .project-scenery {position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;}
.premium-slider .project-scenery::before,
.premium-detail .project-scenery::before,
.premium-slider .project-scenery::after,
.premium-detail .project-scenery::after {content: "";
  position: absolute;
  display: block;
  pointer-events: none;}
.premium-slider [data-project-id="unipol"] .project-scenery,
.premium-detail[data-project-id="unipol"] .project-scenery {background:
    radial-gradient(ellipse at 8% 101%, rgb(86 215 177 / .29), transparent 48%),
    radial-gradient(ellipse at 105% 67%, rgb(66 148 151 / .17), transparent 48%),
    linear-gradient(156deg, rgb(52 152 144 / .2), transparent 32%, rgb(0 14 20 / .16) 83%);}
.premium-slider [data-project-id="unipol"] .project-scenery::before,
.premium-detail[data-project-id="unipol"] .project-scenery::before {inset: 47% -12% -5% 12%;
  clip-path: polygon(0 76%, 100% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(91deg, transparent 0 22px, rgb(2 24 31 / .64) 23px 24px, transparent 25px 47px),
    repeating-linear-gradient(166deg, transparent 0 22px, rgb(99 180 179 / .18) 23px, rgb(1 24 29 / .4) 24px 25px, transparent 26px 45px),
    linear-gradient(142deg, rgb(32 127 136 / .13), rgb(40 115 128 / .61) 57%, rgb(4 43 52 / .72));
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 35%, #000 84%, transparent);}
.premium-slider [data-project-id="unipol"] .project-scenery::after,
.premium-detail[data-project-id="unipol"] .project-scenery::after {inset: 71% 31% -18% -37%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(143 215 172 / .22), rgb(88 177 143 / .08) 38%, transparent 70%);
  filter: blur(12px);}
.premium-slider [data-project-id="tenute-del-cerro"] .project-scenery,
.premium-detail[data-project-id="tenute-del-cerro"] .project-scenery {background:
    radial-gradient(ellipse at 96% 17%, rgb(255 241 214 / .7), transparent 47%),
    radial-gradient(ellipse at 8% 78%, rgb(226 166 81 / .2), transparent 50%),
    linear-gradient(163deg, rgb(255 241 218 / .34), transparent 45%, rgb(173 121 53 / .12));}
.premium-slider [data-project-id="tenute-del-cerro"] .project-scenery::before,
.premium-detail[data-project-id="tenute-del-cerro"] .project-scenery::before {inset: 56% -29% -14% -24%;
  border-radius: 48% 66% 0 0 / 40% 47% 0 0;
  background:
    repeating-conic-gradient(from 173deg at 53% -20%, transparent 0deg 3deg, rgb(100 91 45 / .16) 3.4deg 4.1deg, transparent 4.5deg 8deg),
    linear-gradient(175deg, rgb(177 141 79 / .16), rgb(187 146 79 / .24) 53%, rgb(219 180 118 / .11));
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 76%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 76%, transparent);}
.premium-slider [data-project-id="tenute-del-cerro"] .project-scenery::after,
.premium-detail[data-project-id="tenute-del-cerro"] .project-scenery::after {inset: 67% -43% -7% -22%;
  border-radius: 55% 48% 0 0 / 55% 54% 0 0;
  background:
    repeating-linear-gradient(106deg, transparent 0 22px, rgb(116 93 43 / .14) 23px 24px, transparent 25px 39px),
    linear-gradient(177deg, rgb(217 183 126 / .2), rgb(228 196 144 / .1));
  transform: rotate(7deg);
  -webkit-mask-image: linear-gradient(transparent, #000 31%, transparent 96%);
  mask-image: linear-gradient(transparent, #000 31%, transparent 96%);}
.premium-slider [data-project-id="iqos"] .project-scenery,
.premium-detail[data-project-id="iqos"] .project-scenery {background:
    radial-gradient(ellipse at 111% 58%, rgb(49 142 189 / .29), transparent 49%),
    radial-gradient(ellipse at -13% 92%, rgb(107 104 165 / .25), transparent 43%),
    linear-gradient(152deg, rgb(21 68 88 / .19), transparent 40%, rgb(0 9 19 / .22));}
.premium-slider [data-project-id="iqos"] .project-scenery::before,
.premium-detail[data-project-id="iqos"] .project-scenery::before {inset: 46% -55% -17% 31%;
  border: 1px solid rgb(144 218 241 / .24);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 41%, rgb(153 222 239 / .3), transparent 17%),
    linear-gradient(96deg, transparent 26%, rgb(51 121 161 / .15) 43%, rgb(118 197 223 / .22) 48%, rgb(35 92 133 / .12) 54%, transparent 65%);
  box-shadow: inset 10px 0 31px rgb(127 203 227 / .12), -10px 0 34px rgb(37 105 160 / .1);
  transform: rotate(28deg);
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 24%, #000 74%, transparent);}
.premium-slider [data-project-id="iqos"] .project-scenery::after,
.premium-detail[data-project-id="iqos"] .project-scenery::after {inset: 49% -36% -33% 6%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 109% 45%, transparent 0 35px, rgb(119 188 221 / .11) 38px, rgb(137 214 235 / .18) 39px, transparent 43px 67px);
  transform: rotate(-29deg);
  -webkit-mask-image: linear-gradient(transparent, #000 36%, transparent 92%);
  mask-image: linear-gradient(transparent, #000 36%, transparent 92%);}
.premium-slider [data-project-id="genertel"] .project-scenery,
.premium-detail[data-project-id="genertel"] .project-scenery {background:
    radial-gradient(ellipse at 104% 71%, rgb(205 131 151 / .19), transparent 51%),
    radial-gradient(ellipse at 4% 99%, rgb(192 118 138 / .14), transparent 41%),
    linear-gradient(143deg, rgb(255 255 255 / .31), transparent 51%, rgb(216 193 197 / .12));}
.premium-slider [data-project-id="genertel"] .project-scenery::before,
.premium-detail[data-project-id="genertel"] .project-scenery::before {inset: 46% -60% -48% -2%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 62% 73%, transparent 0 29px, rgb(156 31 73 / .15) 30px 31px, transparent 32px 47px);
  transform: rotate(-19deg);
  -webkit-mask-image: linear-gradient(transparent, #000 29%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 29%, #000 74%, transparent);}
.premium-slider [data-project-id="genertel"] .project-scenery::after,
.premium-detail[data-project-id="genertel"] .project-scenery::after {inset: 67% -4% -9% -32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(199 124 145 / .17), transparent 67%);
  filter: blur(10px);}
.premium-slider [data-project-id="reply"] .project-scenery,
.premium-detail[data-project-id="reply"] .project-scenery {background:
    radial-gradient(ellipse at 97% 74%, rgb(62 131 91 / .12), transparent 50%),
    radial-gradient(ellipse at 3% 100%, rgb(128 176 134 / .24), transparent 46%),
    linear-gradient(145deg, rgb(249 252 245 / .32), transparent 45%, rgb(134 165 139 / .08));}
.premium-slider [data-project-id="reply"] .project-scenery::before,
.premium-detail[data-project-id="reply"] .project-scenery::before {inset: 52% -42% -46% -20%;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(34 91 66 / .16) 32px 33px, transparent 34px 64px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(42 101 71 / .13) 28px 29px, transparent 30px 56px);
  transform: perspective(340px) rotateX(51deg) rotateZ(-19deg);
  transform-origin: center 23%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 15%, transparent 71%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 15%, transparent 71%);}
.premium-slider [data-project-id="reply"] .project-scenery::after,
.premium-detail[data-project-id="reply"] .project-scenery::after {inset: 71% -38% -12% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(84 155 108 / .18), transparent 64%);
  filter: blur(12px);}

/* Existing portfolio tablet boundary: keep the approved 360px controls centred. */
@media (min-width:600px) and (max-width:899px) {
 .premium-slider .actions {left:calc(50% - 180px);right:auto;width:360px}
}

/* Approved dedicated desktop composition. */
@media (min-width:900px) {
.premium-slider {--premium-center:calc(50% + 38px + var(--header-h)/2)}
.premium-slider {--desktop-gutter:clamp(36px,4.5vw,88px);
    --card-width:min(62vw,430px);
    --card-height:min(520px,calc(100svh - 260px));}
.premium-slider .experiment-header {top:28px;left:var(--desktop-gutter);right:var(--desktop-gutter)}
.premium-slider .experiment-heading {max-width:35ch}
.premium-slider .experiment-header h3 {font-size:30px}
.premium-slider .experiment-note {max-width:45ch;font-size:11px;line-height:1.75}
.premium-slider .cards {top:var(--premium-center)}
.premium-slider .project-card {border-radius:32px}
.premium-slider .project-card-inner {padding:28px;gap:18px}
.premium-slider .project-brand {min-height:78px}
.premium-slider .logo-plate {width:218px;height:78px}
.premium-slider .logo-plate img {max-height:74px}
.premium-slider [data-project-id="tenute-del-cerro"] .logo-plate {width:246px}
.premium-slider [data-project-id="iqos"] .logo-plate {width:238px}
.premium-slider .project-number {font-size:12px}
.premium-slider .project-brand-name {margin-top:-18px;font-size:12px}
.premium-slider .project-copy h4 {font-size:29px}
.premium-slider .project-summary {font-size:15.5px;line-height:1.55;margin-top:16px}
.premium-slider .project-technologies {gap:7px;font-size:11px}
.premium-slider .project-technologies li {min-height:29px;padding:6px 10px}
.premium-slider .project-explore {margin-top:20px;font-size:14px;min-height:48px}
.premium-slider .project-action-icon {width:48px;height:48px;font-size:25px}
.premium-slider .project-select:not([hidden]) {display:block;position:absolute;z-index:2;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;touch-action:pan-y}
.premium-slider .project-select:focus-visible {outline:3px solid var(--surface-ink);outline-offset:-7px}
.premium-slider .project-card.is-neighbor {cursor:pointer}
.premium-slider .project-card.is-neighbor .project-card-inner {pointer-events:none}
.premium-slider .actions {top:calc(var(--premium-center) + var(--card-height)/2 + 28px);left:calc(50% - var(--card-width)/2);width:var(--card-width);right:auto}
.premium-slider .slider-position {max-width:230px}
.premium-slider .slider-counter {font-size:12px}
.premium-slider .actions button {width:48px;height:48px}
.premium-slider .actions svg {width:22px;height:22px}
.premium-slider .slider-arrows {gap:12px}
}
@media (min-width:1024px) {
.premium-slider {--premium-center:calc(51% + var(--header-h)/2)}
.premium-slider {--card-width:clamp(430px,34vw,520px);
    --card-height:min(clamp(520px,43vw,650px),calc(100svh - 190px));}
.premium-slider .experiment-header {top:clamp(44px,6svh,72px)}
.premium-slider .experiment-heading {max-width:clamp(260px,24vw,350px)}
.premium-slider .experiment-header h3 {font-size:clamp(30px,2.55vw,42px);line-height:1.09}
.premium-slider .experiment-note {max-width:28ch;margin-top:22px;font-size:11.5px;line-height:1.85}
.premium-slider .language-toggle {width:48px;height:48px;font-size:12px}
.premium-slider .cards {left:58%;top:var(--premium-center)}
.premium-slider .project-card-inner {padding:clamp(30px,2.65vw,40px);gap:clamp(20px,1.7vw,26px)}
.premium-slider .project-brand {min-height:clamp(84px,6.65vw,102px)}
.premium-slider .logo-plate {width:clamp(222px,18vw,270px);height:clamp(84px,6.65vw,102px)}
.premium-slider .logo-plate img {max-height:96px}
.premium-slider [data-project-id="tenute-del-cerro"] .logo-plate {width:clamp(250px,20vw,304px)}
.premium-slider [data-project-id="iqos"] .logo-plate {width:clamp(242px,19.3vw,294px)}
.premium-slider .project-number {font-size:13px}
.premium-slider .project-brand-name {margin-top:calc(-1 * clamp(20px,1.7vw,26px));font-size:13px}
.premium-slider .project-copy h4 {font-size:clamp(30px,2.4vw,36px);line-height:1.1}
.premium-slider .project-summary {font-size:clamp(16px,1.22vw,18px);line-height:1.6;margin-top:18px}
.premium-slider .project-technologies {font-size:12px;gap:8px}
.premium-slider .project-technologies li {min-height:32px;padding:7px 11px}
.premium-slider .project-explore {font-size:15px;margin-top:24px}
.premium-slider .actions {top:auto;bottom:clamp(48px,8svh,96px);left:var(--desktop-gutter);right:auto;width:clamp(280px,26vw,350px)}
.premium-slider .slider-position {max-width:190px;gap:20px}
}
/* The portfolio header consumes viewport space in the compact desktop layout.
   Reserve its height plus the local heading and navigation before sizing cards. */
@media (min-width:900px) and (max-width:1023px) {
.premium-slider {--premium-center:calc(50% + 32px);--card-height:min(520px,calc(100svh - var(--header-h) - 248px))}
}
@media (min-width:900px) and (max-height:680px) {
.premium-slider {--premium-center:calc(50% + var(--header-h)/2)}
.premium-slider {--card-height:calc(100svh - 180px)}
.premium-slider .experiment-header {top:24px}
.premium-slider .experiment-header h3 {font-size:28px}
.premium-slider .experiment-note {display:none}
.premium-slider .cards {top:var(--premium-center)}
.premium-slider .project-card-inner {padding:24px 28px;gap:14px}
.premium-slider .project-brand {min-height:60px}
.premium-slider .logo-plate {height:60px}
.premium-slider .logo-plate img {max-height:58px}
.premium-slider .project-brand-name {margin-top:-14px}
.premium-slider .project-copy h4 {font-size:27px}
.premium-slider .project-summary {font-size:15px;margin-top:12px}
.premium-slider .project-explore {margin-top:10px}
.premium-slider .actions {bottom:28px;top:auto}
}
@media (min-width:900px) and (max-width:1023px) and (max-height:680px) {
.premium-slider {min-height:720px;--premium-center:calc(50% + 32px)}
.premium-slider .actions {top:calc(var(--premium-center) + var(--card-height)/2 + 24px);bottom:auto}
}
@media (min-width:1024px) {
.premium-slider[data-area="engineering"] .experiment-header h3 {font-size:clamp(28px,2.2vw,36px)}
.premium-slider[data-area="engineering"] .experiment-note {margin-top:16px}
}
@media (min-width:900px) and (hover:hover) {
.premium-slider .actions button:hover,
.premium-slider .language-toggle:hover {background:#24444d}
.premium-slider .project-explore:not(:disabled):hover .project-action-icon {background:color-mix(in srgb,var(--surface-accent) 20%,var(--surface-bg))}
.premium-slider .project-select:not(:disabled):hover {box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface-ink) 55%,transparent);background:color-mix(in srgb,var(--surface-ink) 3%,transparent)}
}

/* Mobile sections reserve their complete content height. Safari's small
   viewport can be shorter than the emulated screen: a fixed section height
   and percentage-centred absolute blocks cannot account for the intro,
   cards and navigation together. Keep the approved card size and animate
   its children as before; only these three outer blocks enter normal flow. */
@media (max-width:899px) {
 .premium-slider {
  display:flex;
  flex-direction:column;
  gap:32px;
  height:auto;
  min-height:0;
  padding-block:clamp(26px,5.5svh,48px) max(32px,env(safe-area-inset-bottom,0px));
 }
 .premium-slider .experiment-header {
  position:relative;
  inset:auto;
  flex:none;
  margin-inline:8vw;
 }
 /* The introduction must remain visible on short mobile viewports too. */
 .premium-slider .experiment-note {display:block}
 .premium-slider .cards {
  position:relative;
  inset:auto;
  flex:none;
  margin:0 auto;
  transform:none;
 }
 .premium-slider .actions {
  position:relative;
  inset:auto;
  flex:none;
  width:var(--card-width);
  max-width:calc(100% - 16vw);
  margin:0 auto;
 }
}

/* Short portrait phones: the controls sit below the fold on arrival, so the
   header states the gesture (the full hint stays in the controls for AT). */
.premium-slider .experiment-swipe {display:none}
@media (max-width:899px) and (orientation:portrait) and (max-height:700px) {
 .premium-slider .experiment-swipe {display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;line-height:1.3;color:var(--scene-muted)}
 .premium-slider .experiment-swipe-icon {display:flex;align-items:center;color:var(--scene-muted)}
 .premium-slider .experiment-swipe-icon::before {content:'';width:18px;height:1px;margin-right:-3px;background:currentColor}
 .premium-slider .experiment-swipe svg {width:14px;height:14px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
 .premium-slider {gap:24px}
}

/* Short landscape screens can scroll the section; the card must still fit its
   text, badges and permitted action. Keep the existing loop and portrait size. */
@media (max-width:899px) and (orientation:landscape) and (max-height:680px) {
 .premium-slider {--card-height:440px}
}
@media (min-width:900px) and (orientation:landscape) and (max-height:680px) {
 .premium-slider {--card-height:max(440px,calc(100svh - 180px))}
}