/* Approved native dialog presentation from details.css + desktop-detail.css.
   All rules are isolated to the integration's .premium-detail dialogs. */
.premium-detail,.premium-detail *,.premium-detail *::before,.premium-detail *::after {box-sizing:border-box}
.premium-detail {position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface-bg, var(--detail-bg, #071c1e));
  color: var(--surface-ink, var(--detail-ink, #f2f1eb));
  font-family: inherit;
  overflow: hidden;
  overscroll-behavior: none;
  text-align: left;}
.premium-detail::backdrop {background: #050e11;}
.premium-detail :is(p, h2, h3, h4, ul, ol) {margin: 0;}
.premium-detail :is(ul, ol) {padding: 0; list-style: none;}
.premium-detail .project-detail-scroll {height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--surface-edge, #6faaa1) var(--surface-bg, var(--detail-bg));
  scrollbar-width: thin;
  scroll-padding-top: 96px;}
.premium-detail .project-detail-scroll:focus-visible {outline: 2px solid currentColor; outline-offset: -4px;}
.premium-detail .project-detail-header {position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--surface-bg, var(--detail-bg)) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-ink, var(--detail-ink)) 9%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);}
.premium-detail .project-detail-back {display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;}
.premium-detail .project-detail-back svg {width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.35;}
.premium-detail .project-detail-back:active svg {background: color-mix(in srgb, currentColor 12%, transparent);}
.premium-detail .project-detail-back:focus-visible {outline: 2px solid currentColor; outline-offset: 4px; border-radius: 24px;}
.premium-detail .project-detail-name {max-width: 42%; font-size: 11px; line-height: 1.3; color: var(--surface-muted, currentColor); text-align: right;}
.premium-detail .project-detail-hero {position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(150px, 23svh, 240px);
  background: radial-gradient(ellipse at 78% 5%, var(--surface-glow, #21746c55), transparent 65%);}
.premium-detail .project-detail-hero .project-scenery {position: absolute;
  z-index: -2;
  inset: -80px 0 auto;
  width: 100%;
  height: min(430px, 62svh);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);}
.premium-detail .project-detail-hero::after {content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70px, color-mix(in srgb, var(--surface-bg, var(--detail-bg)) 34%, transparent) 170px, var(--surface-bg, var(--detail-bg)) 480px);
  pointer-events: none;}
.premium-detail .project-detail-intro,
.premium-detail .project-detail-content {width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));}
.premium-detail .project-detail-intro {position: relative; padding-bottom: 12px;}
.premium-detail .project-detail-content {padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));}
.premium-detail .project-detail-content:empty {padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));}
.premium-detail .project-detail-logo {position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 198px;
  max-width: 82%;
  height: 85px;}
.premium-detail .project-detail-logo > img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center;}
.premium-detail[data-project-id="unipol"] .project-detail-logo {width: 172px; height: 78px;}
.premium-detail[data-project-id="unipol"] .project-detail-logo > img {filter: url(#brand-unipol-light);}
.premium-detail[data-project-id="tenute-del-cerro"] .project-detail-logo {width: 200px; height: 112px;}
.premium-detail[data-project-id="iqos"] .project-detail-logo {width: 195px; height: 90px; filter: drop-shadow(0 0 18px #78d9eb30);}
.premium-detail[data-project-id="iqos"] .project-detail-logo > img {filter: brightness(1.65) saturate(.85);}
.premium-detail[data-project-id="genertel"] .project-detail-logo {width: 194px;}
.premium-detail[data-project-id="reply"] .project-detail-logo {width: 170px;}
.premium-detail .project-detail-context {margin-top: 17px; font-size: 12px; line-height: 1.5; color: var(--surface-muted, currentColor);}
.premium-detail .project-detail-title {max-width: 25ch;
  margin-top: 13px;
  font-size: clamp(29px, 7.2vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.045em;
  overflow-wrap: break-word;}
.premium-detail .project-detail-description {max-width: 62ch;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--surface-muted, currentColor);}
.premium-detail .project-detail-section {margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--surface-ink, var(--detail-ink)) 20%, transparent);}
.premium-detail .project-detail-section-title {font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em;}
.premium-detail .project-detail-scope {display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 26px;}
.premium-detail .project-detail-group h4 {font-size: 16px; font-weight: 500; line-height: 1.35;}
.premium-detail .project-detail-list {margin-top: 9px;}
.premium-detail .project-detail-list li {position: relative;
  padding: 6px 0 6px 15px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--surface-muted, currentColor);
  overflow-wrap: break-word;}
.premium-detail .project-detail-list li::before {content: ''; position: absolute; left: 0; top: 16px; width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: .6;}
.premium-detail .project-detail-tech {margin-top: 20px;}
.premium-detail .project-detail-tech li {padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--surface-ink, var(--detail-ink)) 13%, transparent);}
.premium-detail .project-detail-tech-role {font-size: 12px; line-height: 1.5; color: var(--surface-muted, currentColor);}
.premium-detail .project-detail-tech-name {margin-top: 5px; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: break-word;}
.premium-detail .project-detail-tech--names .project-detail-tech-name {margin-top: 0;}
@media (min-width: 600px) {
.premium-detail .project-detail-header {padding-inline: max(28px, calc((100vw - 712px) / 2));}
.premium-detail .project-detail-hero {padding-top: clamp(190px, 28svh, 300px);}
.premium-detail .project-detail-hero .project-scenery {height: min(650px, 80svh);}
.premium-detail .project-detail-scope {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px;}
.premium-detail .project-detail-content {padding-bottom: 64px;}
.premium-detail .project-detail-logo {width: 230px; height: 100px;}
.premium-detail .project-detail-description {margin-top: 24px; font-size: 17px;}
}
@media (max-width: 360px) {
.premium-detail .project-detail-header {padding-inline: 16px; gap: 8px;}
.premium-detail .project-detail-back {gap: 8px; font-size: 11px;}
.premium-detail .project-detail-name {font-size: 10px;}
.premium-detail .project-detail-intro,
.premium-detail .project-detail-content {padding-inline: 20px;}
.premium-detail .project-detail-hero {padding-top: 142px;}
.premium-detail .project-detail-title {font-size: 28px;}
.premium-detail .project-detail-description {font-size: 15px; line-height: 1.65;}
}
@media (max-width: 899px) {
.premium-detail .project-detail-hero {padding-top: clamp(32px, 6svh, 56px);}
}
@media (prefers-reduced-motion: reduce) {
.premium-detail,
.premium-detail * {scroll-behavior: auto;}
}

/* Shared project desktop layout, preserving the approved Unipol composition. */
@media (min-width: 900px) {
.premium-detail[data-area] {--desktop-detail-gutter: clamp(36px, 5vw, 80px);
    --desktop-detail-width: 1120px;}
.premium-detail[data-area] .project-detail-header {min-height: 76px;
    padding: 12px max(var(--desktop-detail-gutter), calc((100% - var(--desktop-detail-width)) / 2));}
.premium-detail[data-area] .project-detail-back {gap: 12px;
    font-size: 13px;}
.premium-detail[data-area] .project-detail-back svg {width: 44px;
    height: 44px;
    padding: 12px;}
.premium-detail[data-area] .project-detail-name {font-size: 12px;}
.premium-detail[data-area] .project-detail-hero {padding-top: clamp(54px, 8svh, 90px);}
.premium-detail[data-area] .project-detail-hero .project-scenery {inset: 0;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(to bottom, #000, #000 55%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000, #000 55%, transparent);}
.premium-detail[data-area] .project-detail-hero::after {background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface-bg) 35%, transparent) 46%, var(--surface-bg));}
.premium-detail[data-area] :is(.project-detail-intro, .project-detail-content) {width: calc(100% - var(--desktop-detail-gutter) * 2);
    max-width: var(--desktop-detail-width);
    padding-inline: 0;}
.premium-detail[data-area] .project-detail-intro {padding-bottom: 22px;}
.premium-detail[data-area] .project-detail-logo {width: 226px;
    max-width: 100%;
    height: 102px;}
.premium-detail[data-area] .project-detail-context {margin-top: 20px;
    font-size: 13px;}
.premium-detail[data-area] .project-detail-title {max-width: 24ch;
    margin-top: 16px;
    font-size: clamp(38px, 3.8vw, 50px);
    line-height: 1.1;}
.premium-detail[data-area] .project-detail-description {max-width: 62ch;
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.7;}
.premium-detail[data-area] .project-detail-content {padding-bottom: 72px;}
.premium-detail[data-area] .project-detail-section {margin-top: 30px;
    padding-top: 26px;}
.premium-detail[data-area] .project-detail-section-title {font-size: 26px;}
.premium-detail[data-area] .project-detail-scope {margin-top: 28px;
    gap: 30px 36px;}
.premium-detail[data-area] .project-detail-group h4 {font-size: 17px;}
.premium-detail[data-area] .project-detail-list li {padding-block: 6px;
    font-size: 15px;
    line-height: 1.55;}
.premium-detail[data-area] .project-detail-tech {display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
    margin-top: 24px;}
.premium-detail[data-area] .project-detail-tech li {padding-block: 18px;}
.premium-detail[data-area] .project-detail-tech-role {font-size: 13px;}
.premium-detail[data-area] .project-detail-tech-name {max-width: 32ch;
    margin-top: 5px;
    font-size: 19px;
    line-height: 1.35;}
@media (min-width: 1024px) {
.premium-detail[data-area] .project-detail-intro {display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      column-gap: clamp(52px, 6vw, 88px);
      align-items: start;
      padding-bottom: 32px;}
.premium-detail[data-area] .project-detail-logo {grid-column: 1;
      grid-row: 1;
      width: 240px;
      height: 108px;}
.premium-detail[data-area] .project-detail-context {grid-column: 1;
      grid-row: 2;}
.premium-detail[data-area] .project-detail-title {grid-column: 1;
      grid-row: 3;}
.premium-detail[data-area] .project-detail-description {grid-column: 2;
      grid-row: 1 / 4;
      align-self: end;
      margin-top: 0;
      padding-bottom: 3px;
      font-size: clamp(17px, 1.3vw, 18px);}
.premium-detail[data-area] .project-detail-content {display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      column-gap: clamp(52px, 6vw, 88px);
      align-items: start;}
.premium-detail[data-area] .project-detail-scope {column-gap: clamp(30px, 3vw, 44px);}
.premium-detail[data-area] .project-detail-content > .project-detail-section:only-child {grid-column: 1 / -1;}
.premium-detail[data-area] .project-detail-tech {grid-template-columns: minmax(0, 1fr);}
}
}

/* Skill overlay: the project detail shell on the featured-skills green. */
.skill-detail {--surface-bg:#123f34;--surface-ink:#f2f1eb;--surface-muted:#c4d4cc;--surface-edge:#5c8f80;--surface-accent:#8fc3ae;--surface-line:rgb(242 241 235 / .16)}
.skill-detail .project-detail-header {padding-inline:max(20px, calc((100% - 1120px) / 2))}
.skill-detail .skill-detail-language {min-width:44px;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb, currentColor 38%, transparent);border-radius:100px;font-size:12px;letter-spacing:.04em}
.skill-detail .skill-detail-language:hover {background:color-mix(in srgb, currentColor 10%, transparent)}
.skill-detail :is(.skill-detail-language, .skill-project-open):focus-visible {outline:2px solid var(--surface-accent);outline-offset:4px}
.skill-detail .skill-detail-intro,
.skill-detail .skill-detail-projects {width:100%;max-width:1168px;margin-inline:auto;padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px))}
.skill-detail .skill-detail-intro {padding-top:clamp(32px, 7svh, 72px)}
.skill-detail .skill-detail-group {font-size:12px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--surface-accent)}
.skill-detail .skill-detail-heading {display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:14px}
.skill-detail .skill-detail-logo {display:inline-flex;align-items:center;height:44px;padding:0 14px;background:#f6f5ef;border-radius:3px}
.skill-detail .skill-detail-logo img {width:auto;height:20px}
.skill-detail .skill-detail-logo .theme-light {display:block}
.skill-detail .skill-detail-logo .theme-dark {display:none}
.skill-detail .skill-detail-title {font-size:clamp(34px, 8vw, 64px);font-weight:520;line-height:1.02;letter-spacing:-.05em;overflow-wrap:break-word}
.skill-detail .skill-detail-description {max-width:56ch;margin-top:18px;font-size:clamp(16px, 1.3vw, 19px);line-height:1.6;color:var(--surface-muted)}
.skill-detail .skill-detail-projects {margin-top:clamp(32px, 5vw, 56px);padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px))}
.skill-detail .skill-detail-related {display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--surface-line);font-size:clamp(20px, 2vw, 26px);font-weight:500;line-height:1.2;letter-spacing:-.035em}
.skill-detail .skill-detail-count {font:13px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:0;color:var(--surface-accent)}
.skill-detail .skill-project-list {display:grid;gap:14px;margin-top:22px}
.skill-detail .skill-project {--plate-w:136px;--plate-h:72px;--logo-scale:1;display:grid;grid-template-columns:var(--plate-w) minmax(0, 1fr);align-content:start;gap:16px 22px;padding:20px;border:1px solid var(--surface-line);border-radius:6px;background:rgb(255 255 255 / .035)}
/* One plate for every brand; each mark gets the width that gives it a comparable
   optical area (same principle as .brand-logo in sections.css), centred and contained. */
.skill-detail .skill-project-logo {display:flex;align-items:center;justify-content:center;width:var(--plate-w);height:var(--plate-h);padding:10px 12px;background:#fff;border-radius:3px}
.skill-detail .skill-project-logo img {display:block;width:calc(var(--logo-w, 72px) * var(--logo-scale));max-width:100%;height:auto;max-height:calc(48px * var(--logo-scale));object-fit:contain;object-position:center}
.skill-detail .skill-project[data-project-id="unipol"] {--logo-w:74px}
.skill-detail .skill-project[data-project-id="tenute-del-cerro"] {--logo-w:112px}
.skill-detail .skill-project[data-project-id="iqos"] {--logo-w:98px}
.skill-detail .skill-project[data-project-id="genertel"] {--logo-w:90px}
.skill-detail .skill-project[data-project-id="reply"] {--logo-w:90px}
.skill-detail .skill-project[data-project-id="bmw"] {--logo-w:47px}
.skill-detail .skill-project[data-project-id="prada"] {--logo-w:106px}
.skill-detail .skill-project[data-project-id="costa"] {--logo-w:58px}
.skill-detail .skill-project[data-project-id="infocamere"] {--logo-w:78px}
.skill-detail .skill-project[data-project-id="iball"] {--logo-w:48px}
.skill-detail .skill-project-area {font-size:11px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--surface-accent)}
.skill-detail .skill-project-name {margin-top:6px;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.035em}
.skill-detail .skill-project-title {margin-top:3px;font-size:14px;line-height:1.4;color:var(--surface-muted)}
.skill-detail .skill-project-use {margin-top:12px;font-size:15px;line-height:1.55}
.skill-detail .skill-project-open {grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding-top:14px;border-top:1px solid var(--surface-line);font-size:14px;text-align:left}
.skill-detail .skill-project-icon {display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;font-size:20px;line-height:1;transition:background-color .2s ease,color .2s ease}
.skill-detail .skill-project-open:hover .skill-detail .skill-project-icon {background:var(--surface-ink);color:var(--surface-bg)}
@media (min-width:768px) {
 .skill-detail .skill-project-list {grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:900px) {
 .skill-detail .project-detail-header {min-height:76px;padding:12px max(clamp(36px, 5vw, 80px), calc((100% - 1120px) / 2))}
 .skill-detail .project-detail-back {gap:12px;font-size:13px}
 .skill-detail .project-detail-back svg {width:44px;height:44px;padding:12px}
 .skill-detail .skill-detail-intro,
 .skill-detail .skill-detail-projects {width:calc(100% - clamp(36px, 5vw, 80px) * 2);max-width:1120px;padding-inline:0}
}
@media (min-width:1024px) {
 .skill-detail .skill-detail-intro {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:clamp(52px, 6vw, 88px);align-items:end}
 .skill-detail .skill-detail-group,
 .skill-detail .skill-detail-heading {grid-column:1}
 .skill-detail .skill-detail-description {grid-column:2;grid-row:1 / 3;margin-top:0;padding-bottom:6px}
}
@media (max-width:480px) {
 .skill-detail .skill-project {--plate-w:108px;--plate-h:60px;--logo-scale:.86;gap:12px 14px;padding:16px}
 .skill-detail .skill-project-logo {padding:6px 8px}
 .skill-detail .skill-project-name {font-size:20px}
}
/* A single project spans the row as one horizontal card instead of half a grid. */
@media (min-width:768px) {
 .skill-detail .skill-project-list:has(> .skill-project:only-child) {grid-template-columns:minmax(0, 1fr)}
 .skill-detail .skill-project:only-child {grid-template-columns:var(--plate-w) minmax(0, 1fr) minmax(200px, auto);align-items:center;column-gap:clamp(22px, 3vw, 40px);padding:24px clamp(22px, 3vw, 32px)}
 .skill-detail .skill-project:only-child .skill-project-open {grid-column:3;align-self:stretch;min-height:0;padding:0 0 0 clamp(22px, 3vw, 32px);border-top:0;border-left:1px solid var(--surface-line)}
}
/* Short overlays sit in the optical centre of tall screens rather than leaving the lower half empty. */
@media (min-width:900px) and (min-height:760px) {
 .skill-detail .project-detail-scroll {display:flex;flex-direction:column}
 .skill-detail .skill-detail-intro {margin-top:auto}
 .skill-detail .skill-detail-projects {margin-bottom:auto}
 .skill-detail .skill-detail-projects::after {content:'';display:block;height:clamp(0px, 6vh, 64px)}
}
@media (max-width:360px) {
 .skill-detail .skill-project {--plate-w:120px;--plate-h:60px;--logo-scale:.82;grid-template-columns:minmax(0, 1fr)}
}
@media (max-height:500px) {
 .skill-detail .skill-detail-intro {padding-top:24px}
 .skill-detail .skill-detail-title {font-size:40px}
 .skill-detail .skill-detail-projects {margin-top:24px}
}