.uk-quote-intro {
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:96px 48px;
  position:relative;
  z-index:4;
  background:var(--paper);
  color:var(--ink);
}
.uk-quote-intro blockquote {
  max-width:1040px;
  margin:0;
  font-size:clamp(28px,3.8vw,56px);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.035em;
  animation:uk-quote-arrive 1.8s cubic-bezier(.22,1,.36,1) both;
}
.uk-quote-intro strong { display:block; margin-top:24px; font-weight:600; }
.uk-quote-word { display:inline-block; white-space:nowrap; }
.uk-quote-letter {
  display:inline-block;
  animation:uk-letter-settle 1s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--letter-delay);
}
@keyframes uk-quote-arrive {
  from { transform:translateY(100svh); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
@keyframes uk-letter-settle {
  from { opacity:0; transform:translateY(var(--letter-y)) rotate(var(--letter-rotation)); }
  to { opacity:1; transform:translateY(0) rotate(0); }
}
.case-page.uk-intro-visible > .icon-menu { opacity:0; visibility:hidden; pointer-events:none; }
@media(max-width:700px) { .uk-quote-intro { padding:80px 32px; } }
@media(prefers-reduced-motion:reduce) {
  .uk-quote-intro blockquote,.uk-quote-letter { animation:none; }
}
@media print { .uk-quote-intro { display:none; } }

/* Soft lavender wash and the workboard's quiet grid. */
.uk-quote-intro {
  background-color: #f5f4f8;
  background-image:
    linear-gradient(#bdb5cd1c 1px, transparent 1px),
    linear-gradient(90deg, #bdb5cd1c 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #e6def0aa, transparent 76%),
    linear-gradient(180deg, #f0eaf6 0%, #f5f3f8 52%, #f0f1f7 100%);
  background-size: 80px 80px, 80px 80px, 100% 100%, 100% 100%;
}
[data-theme="dark"] .uk-quote-intro {
  background-color: #19191f;
  background-image:
    linear-gradient(#b2a6cb12 1px, transparent 1px),
    linear-gradient(90deg, #b2a6cb12 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #49364f66, transparent 76%),
    linear-gradient(180deg, #26212e 0%, #1e1c25 52%, #19191f 100%);
}

/* A pinned quote with two cards driven by the page's natural scroll. */
.uk-quote-intro {
  height: 240svh;
  padding: 0;
  display: block;
}
.uk-intro-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 48px;
  overflow: hidden;
}
.uk-intro-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 72vw, 54svh);
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid #ffffffb3;
  box-shadow: 0 16px 48px #352b451c;
  background: #f7f5fa;
  transform: translate(-50%, calc(-50% + 110svh));
  will-change: transform;
}
.uk-intro-card-first { z-index: 1; }
.uk-intro-card-second { z-index: 2; background: #ece5fa; }
[data-theme="dark"] .uk-intro-card { background: #302c39; border-color: #ffffff24; }
[data-theme="dark"] .uk-intro-card-second { background: #3c3549; }
@media(max-width:700px) { .uk-intro-stage { padding: 80px 32px; } }
@media(prefers-reduced-motion:reduce) { .uk-intro-card { will-change:auto; } }
@media print { .uk-quote-intro { display:none; } }

.uk-intro-card-first {
  display: flex;
  align-items: center;
  padding: 32px;
  color: var(--ink);
}
.uk-intro-card-first p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 500;
}
@media(max-width:700px) {
  .uk-intro-card-first { padding: 24px; }
}

.uk-intro-card-second {
  display: flex;
  align-items: center;
  padding: 32px;
  color: var(--ink);
}
.uk-intro-card-copy { width: 100%; }
.uk-intro-card-copy p {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
}
.uk-intro-card-copy p + p { margin-top: 16px; }
.uk-intro-card-copy p:first-child { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; }
.uk-intro-card-copy strong { display: inline; margin: 0; font-weight: 600; }
@media(max-width:700px) { .uk-intro-card-second { padding: 24px; } }

/* The question retains its larger typography after swapping card order. */
.uk-intro-card-second > p,
.uk-intro-card-third > p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 500;
}

/* Frost the quote behind the cards as the first card enters. */
.uk-intro-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(var(--uk-card-blur, 0px));
  -webkit-backdrop-filter: blur(var(--uk-card-blur, 0px));
  background: rgb(245 243 248 / var(--uk-card-glass, 0));
}
[data-theme="dark"] .uk-intro-stage::after {
  background: rgb(25 25 31 / var(--uk-card-glass, 0));
}

.uk-intro-card-third {
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 32px;
  color: var(--ink);
  background: #f0f2e8;
}
[data-theme="dark"] .uk-intro-card-third { background: #30342c; }
.uk-intro-card-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 600;
}
@media(max-width:700px) { .uk-intro-card-third { padding: 24px; } }

/* Shared editorial hierarchy for the three introduction cards. */
.uk-intro-card .uk-intro-card-copy > .uk-card-label {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .64;
}
.uk-intro-card .uk-intro-card-copy > h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 600;
}
.uk-intro-card .uk-intro-card-copy > p:not(.uk-card-label) {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
}
.uk-intro-card .uk-intro-card-copy > h2:last-child { margin-bottom: 0; }

/* Anchor card copy to the top-left corner inside the existing padding. */
.uk-intro-card-first,
.uk-intro-card-second,
.uk-intro-card-third {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* Wider centered cards, stacked one at a time; preserve the previous height. */
.uk-intro-card {
  width: min(704px, calc(100vw - 64px));
  height: min(450px, 67.5svh, 90vw);
  aspect-ratio: auto;
}
@media(max-width:700px) {
  .uk-intro-card { width: calc(100vw - 48px); }
}

/* Exposed 64px header strips let earlier cards remain accessible. */
.uk-card-tab {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.uk-card-tab:hover { text-decoration: underline; text-underline-offset: 4px; }
.uk-card-tab:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.uk-intro-card { height: min(450px, calc(100svh - 176px), 90vw); }

/* Equal heights based on the tallest text block, rounded to the 8px grid. */
.uk-intro-card {
  height: var(--uk-card-height, auto);
  min-height: 0;
}

.uk-intro-card .uk-intro-card-copy > p:not(.uk-card-label) {
  font-size: 18px;
}

/* More horizontal breathing room for the card copy. */
.uk-intro-card-first,
.uk-intro-card-second,
.uk-intro-card-third {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 700px) {
  .uk-intro-card-first,
  .uk-intro-card-second,
  .uk-intro-card-third {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Equal padding on all four sides. */
.uk-intro-card-first,
.uk-intro-card-second,
.uk-intro-card-third {
  padding: 48px;
}
@media (max-width: 700px) {
  .uk-intro-card-first,
  .uk-intro-card-second,
  .uk-intro-card-third {
    padding: 32px;
  }
}

.uk-intro-card .uk-intro-card-copy > p.uk-card-focus {
  margin-top: 24px;
}
.uk-intro-card .uk-card-focus strong { font-weight: 700; }

/* The original floating app showcase precedes the card stack. */
.case-page .uk-intro-stage > .uk-intro-mockup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(704px, calc(100vw - 48px));
  max-height: calc(100svh - 96px);
  margin: 0;
  padding: 32px;
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  visibility: hidden;
  transform: translate(-50%, 110svh);
}
.case-page .uk-intro-mockup .showcase-device {
  max-width: min(184px, 24svh);
}

/* Show the idea and the app together from the first view. */
.uk-intro-opening {
  width: min(1280px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}
.uk-intro-opening blockquote {
  width: 100%;
  font-size: clamp(28px, 3vw, 44px);
}
.case-page .uk-intro-opening > .uk-intro-mockup {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
  padding: 24px 0;
  margin: 0;
  visibility: visible;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.case-page .uk-intro-opening .showcase-device { max-width: min(160px, 22svh); }
@media(max-width:800px) {
  .uk-intro-stage { padding: 48px 32px; }
  .uk-intro-opening { grid-template-columns: 1fr; gap: 16px; }
  .uk-intro-opening blockquote { max-width: 600px; margin: auto; font-size: clamp(20px, 3.2vw, 28px); }
  .uk-intro-opening strong { margin-top: 16px; }
  .case-page .uk-intro-opening > .uk-intro-mockup { padding: 8px 0; gap: 16px; }
  .case-page .uk-intro-opening .showcase-device { max-width: min(112px, 14svh); }
  .case-page .uk-intro-opening .try-app { padding: 12px 16px; }
}

/* Shorter quote lines while retaining its existing left edge. */
@media (min-width: 801px) {
  .uk-intro-opening blockquote {
    width: 100%;
    max-width: 480px;
    justify-self: start;
  }
}

/* Carry the frosted layer across the entire grid, including its outer edges. */
.uk-intro-stage {
  width: 100%;
  max-width: none;
  isolation: isolate;
}
.uk-intro-stage::after {
  left: 50%;
  right: auto;
  top: -32px;
  bottom: -32px;
  width: calc(100vw + 64px);
  transform: translateX(-50%);
}

/* Softer shadows prevent dark buildup behind the frosted sides. */
.uk-intro-card {
  box-shadow: 0 8px 24px #352b450a;
}
.case-page .uk-intro-opening .showcase-device {
  box-shadow: inset 0 0 0 1px #ffffff35, 0 8px 20px #00000012;
}

/* Reference composition: floating phones left, quote right, project pills below. */
.uk-intro-opening {
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 64px;
  row-gap: 32px;
  align-items: center;
}
.uk-intro-opening blockquote {
  grid-column: 2;
  grid-row: 1;
  max-width: 480px;
  justify-self: end;
  text-align: right;
}
.case-page .uk-intro-opening > .uk-intro-mockup {
  grid-column: 1;
  grid-row: 1;
}
.uk-opening-badges {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.uk-opening-badges > a,
.case-page .uk-opening-badges > .uk-figma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  margin: 0;
  border: 1px solid #ffffff99;
  border-radius: 12px;
  background: #ffffff66;
  color: var(--ink);
  font: 14px/1.4 Arial, sans-serif;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}
.case-page .uk-opening-badges > .uk-figma-badge { width: 48px; padding: 12px; }
.uk-figma-badge svg { width: 16px; height: 24px; }
.uk-opening-badges > :is(a, button):hover { background: #ffffff99; }
.uk-opening-badges > :is(a, button):focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
[data-theme="dark"] .uk-opening-badges > a,
[data-theme="dark"] .uk-opening-badges > .uk-figma-badge { background: #ffffff12; border-color: #ffffff26; }
#uk-partner { scroll-margin-top: 96px; }
@media(max-width:800px) {
  .uk-intro-opening { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 16px; }
  .uk-intro-opening blockquote { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; }
  .case-page .uk-intro-opening > .uk-intro-mockup { grid-column: 1; grid-row: 2; }
  .uk-opening-badges { grid-column: 1; grid-row: 3; justify-content: center; gap: 8px; }
  .uk-opening-badges > a { padding: 8px 12px; }
}

/* Quote left, phones right, with the project pills closer to the quote. */
@media (min-width: 801px) {
  .uk-intro-opening {
    grid-template-columns: 1fr 1.05fr;
    row-gap: 16px;
  }
  .uk-intro-opening blockquote {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }
  .case-page .uk-intro-opening > .uk-intro-mockup {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .uk-opening-badges {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
}

/* Opening: centered phones with project buttons directly below. */
.uk-intro-opening {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: min(704px, 100%);
}
.case-page .uk-intro-opening > .uk-intro-mockup {
  width: 100%;
  padding: 16px 0;
}
.uk-opening-badges { justify-content: center; align-self: center; }
.uk-intro-stage > .uk-scroll-quote {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(1040px, calc(100vw - 96px));
  margin: 0;
  animation: none;
  visibility: hidden;
  transform: translate(-50%, 110svh);
}
.uk-intro-card-first { z-index: 2; }
.uk-intro-card-second { z-index: 3; }
.uk-intro-card-third { z-index: 4; }
@media(max-width:800px) {
  .uk-intro-opening { gap: 16px; }
  .uk-intro-stage > .uk-scroll-quote {
    width: calc(100vw - 64px);
    font-size: clamp(24px, 4vw, 32px);
  }
}

.uk-opening-badges > a,
.case-page .uk-opening-badges > .uk-figma-badge {
  border-radius: 999px;
}

.uk-figma-badge svg path,
.uk-figma-badge svg circle {
  fill: #000;
}

.uk-opening-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.12;
  letter-spacing: -.045em;
  font-weight: 600;
  text-align: center;
}

.uk-opening-subtitle {
  max-width: 560px;
  margin: -12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  opacity: .7;
}

.uk-opening-subtitle {
  font-size: 14px;
  margin-top: -16px;
}

.uk-intro-opening {
  transform: translateY(-32px);
}

.case-page .uk-intro-opening > .uk-intro-mockup,
.uk-intro-opening > .uk-opening-badges {
  transform: translateY(16px);
}

.uk-intro-stage > .uk-scroll-quote {
  font-size: 48px;
}

/* A more compact opening with clear space below the global menu. */
.uk-intro-opening {
  width: min(640px, 100%);
  gap: 20px;
  transform: translateY(16px);
}
.uk-opening-title { font-size: clamp(32px, 3.5vw, 48px); }
.case-page .uk-intro-opening .showcase-device {
  max-width: min(144px, 18svh);
}
.case-page .uk-intro-opening > .uk-intro-mockup,
.uk-intro-opening > .uk-opening-badges {
  transform: none;
}
.uk-opening-badges > a,
.case-page .uk-opening-badges > .uk-figma-badge {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media(max-width:800px) {
  .uk-intro-opening { gap: 16px; transform: translateY(16px); }
  .case-page .uk-intro-opening .showcase-device { max-width: min(112px, 14svh); }
}

/* Centered introduction with a cropped app sneak peek along the bottom edge. */
.uk-intro-opening {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  transform: none;
}
.uk-opening-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(704px, calc(100% - 64px));
  text-align: center;
  transform: translateY(-48px);
}
.uk-opening-copy .uk-opening-subtitle { margin: 0; }
.uk-opening-copy .uk-opening-badges { margin-top: 8px; }
.case-page .uk-intro-opening > .uk-intro-mockup {
  position: absolute;
  top: 72svh;
  left: 50%;
  width: min(800px, calc(100vw - 48px));
  padding: 16px 0;
  transform: translateX(-50%);
}
.case-page .uk-intro-opening .showcase-device {
  max-width: min(200px, 28svh);
}
@media(max-width:800px) {
  .uk-opening-copy { width: calc(100% - 48px); transform: translateY(-32px); }
  .case-page .uk-intro-opening > .uk-intro-mockup { top: 76svh; }
  .case-page .uk-intro-opening .showcase-device { max-width: min(136px, 20svh); }
}

/* Align every opening element to the same central axis. */
.uk-opening-copy > .uk-opening-title,
.uk-opening-copy > .uk-opening-subtitle {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-self: center;
}
.uk-opening-copy > .uk-opening-badges {
  width: 100%;
  justify-content: center;
  align-self: center;
}
.case-page .uk-intro-opening > .uk-intro-mockup {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.case-page .uk-intro-opening .device-showcase {
  width: 100%;
  justify-content: center;
}

/* Restore the opening title's earlier size. */
.uk-opening-copy > .uk-opening-title {
  font-size: clamp(32px, 4vw, 56px);
}
.uk-opening-copy > .uk-opening-subtitle {
  font-size: 14px;
}

/* Reset the earlier two-column grid so both elements use the full viewport. */
.uk-intro-stage > .uk-intro-opening {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}
.uk-opening-copy {
  flex: 0 0 auto;
  grid-area: auto;
  align-self: center;
}
.case-page .uk-intro-opening > .uk-intro-mockup {
  grid-area: auto;
  right: auto;
  bottom: auto;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

/* Anchor the intro copy just below the marked upper guide. */
.uk-opening-copy {
  position: absolute;
  top: 18svh;
  left: 50%;
  transform: translateX(-50%);
}
@media(max-width:800px) {
  .uk-opening-copy { top:18svh; transform:translateX(-50%); }
}

/* Lift the phone sneak peek slightly closer to the intro copy. */
.case-page .uk-intro-opening > .uk-intro-mockup {
  top: calc(72svh - 104px);
}
@media(max-width:800px) {
  .case-page .uk-intro-opening > .uk-intro-mockup {
    top: calc(76svh - 104px);
  }
}

.uk-opening-badges > .uk-walkthrough-trigger {
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:8px 20px;border:1px solid #ffffff99;border-radius:999px;
  background:#ffffff66;color:var(--ink);font:14px/1.4 Arial,sans-serif;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;
}
[data-theme="dark"] .uk-opening-badges > .uk-walkthrough-trigger {background:#ffffff12;border-color:#ffffff26}

.case-page .uk-opening-badges > .uk-opening-prototype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 8px 20px;
  border: 1px solid #ffffff99;
  border-radius: 999px;
  background: #ffffff66;
  color: var(--ink);
  font: 14px/1.4 Arial, sans-serif;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}
[data-theme="dark"] .uk-opening-badges > .uk-opening-prototype {
  background: #ffffff12;
  border-color: #ffffff26;
}

.uk-opening-prototype { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.uk-opening-prototype svg { width:18px; height:18px; flex-shrink:0; }

/* A quiet vertical project summary at the lower-left of the opening. */
.uk-opening-facts {
  position:absolute;
  left:48px;
  bottom:48px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:224px;
  margin:0;
  padding:0 0 0 16px;
  border-left:1px solid #6e63812e;
  color:var(--ink);
  text-align:left;
}
.uk-opening-facts dt { margin:0 0 4px; font:10px/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }
.uk-opening-facts dd { margin:0; font:12px/1.5 Arial,sans-serif; }
[data-theme="dark"] .uk-opening-facts { border-color:#ffffff26; }
@media(max-width:1000px) {
  .uk-opening-facts { left:32px; bottom:32px; width:184px; gap:16px; }
}
@media(max-width:600px) {
  .uk-opening-facts { left:24px; bottom:24px; width:160px; gap:12px; padding:12px; border:1px solid var(--navigation-glass-border); border-radius:16px; background:var(--navigation-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .uk-opening-facts dd { font-size:11px; }
  .uk-opening-facts dt { font-size:9px; }
}

/* Sketch 04: replace the introductory quote with project context. */
.uk-scroll-introduction h2 { margin:0 0 24px; font-size:48px; line-height:1.15; letter-spacing:-.04em; font-weight:700; }
.uk-scroll-introduction p { margin:0; max-width:800px; font-size:24px; line-height:1.6; font-weight:400; letter-spacing:normal; }
@media(max-width:800px) {
  .uk-scroll-introduction h2 { font-size:32px; }
  .uk-scroll-introduction p { font-size:18px; line-height:1.6; }
}

.uk-opening-badges .uk-opening-area {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; min-height:40px; box-sizing:border-box;
  border:1px solid var(--navigation-glass-border); border-radius:999px;
  background:var(--navigation-glass); color:var(--ink);
  font:14px/1.4 Arial,sans-serif; text-decoration:none; cursor:pointer;
  box-shadow:none;
}
.uk-opening-badges .uk-opening-area:hover { background:var(--navigation-glass-hover); }
.uk-opening-badges .uk-opening-area:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.uk-opening-badges { flex-wrap:wrap; gap:8px; justify-content:center; }

.uk-scroll-introduction p.uk-intro-role-note {
  margin-top:32px;
  max-width:800px;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
}
@media(max-width:800px) {
  .uk-scroll-introduction p.uk-intro-role-note { margin-top:24px; font-size:14px; }
}

.uk-opening-copy .uk-opening-meta {
  margin:0 0 12px;
  font-size:12px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
  opacity:.65;
}


/* A scroll-driven glass sheet above the final chapter section. */
.uk-project-ending { position:relative; z-index:5; }
.uk-ending-stage { position:sticky; top:var(--uk-ending-top, 0px); overflow:hidden; isolation:isolate; }
.uk-ending-stage > .uk-chapters-copy { position:relative; margin-top:0; }
.uk-project-outro { position:absolute; inset:auto 0 0; z-index:6; height:100svh; box-sizing:border-box; display:grid; align-items:center; padding:96px 48px; background:transparent; color:var(--ink); pointer-events:none; }
.uk-project-outro::before { content:""; position:absolute; inset:0; background:rgb(245 243 248 / var(--uk-ending-glass, 0)); backdrop-filter:blur(var(--uk-ending-blur, 0px)); -webkit-backdrop-filter:blur(var(--uk-ending-blur, 0px)); }
.uk-project-outro > .uk-scroll-introduction { position:relative; width:min(1040px, 100%); margin:0 auto; transform:translateY(110svh); visibility:hidden; }
[data-theme="dark"] .uk-project-outro::before { background:rgb(25 25 31 / var(--uk-ending-glass, 0)); }
@media(max-width:800px) { .uk-project-outro { padding:80px 32px; } }

.uk-project-outro .uk-about-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:32px; padding:12px 24px; border:1px solid var(--navigation-glass-border); border-radius:999px; background:var(--navigation-glass); box-shadow:var(--navigation-glass-shadow); color:var(--ink); font:16px/1.4 Arial,sans-serif; text-decoration:none; pointer-events:auto; }
.uk-project-outro .uk-about-link:hover { background:var(--navigation-glass-hover); }
.uk-project-outro .uk-about-link:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }