/* First screen (2026-10-16): every page says what ium Labs does before the first scroll.
   Overrides only, linked from every Nuxt page head (scripts/lib/head-tags.mjs), so they hold
   from the first paint; later page overrides live here too (/services, home, case pages).
   Photos and films are untouched: the scrims lie over them, behind the type. */

/* /services, /work and /contact (and /about, below): the Header component is 90svh with its
   tagline at the foot, which left a phone's first screen mostly blank. Below 1024px it was
   half a screen (2026-10-16), which still opened on some 230px of white above the headline;
   since 2026-10-18 it is 30% of the screen, the tagline about 60px under the header and the
   start of the page (the services index, the first /work slide) high in view. Desktop keeps
   the full-height header. */
@media (max-width: 1023px) {
  .page section.header-section[data-v-7d982150] {
    height: auto;
    min-height: 30svh;
    min-height: calc(var(--svh, 1svh) * 30);
    padding-top: calc(var(--header-height) + 6rem);
  }
}

/* /about (2026-10-17): the ium mark in particles fills the blank above the statement
   (static/motion/about-hero.js, a canvas behind it). Below 1024px the header gives the mark
   room: 80% of the screen rather than half, the statement still at its foot and the start
   of the page still in view. Here, not in the script, so the first paint has the height. */
.about__wrapper > section.header-section {
  position: relative;
}
.about__wrapper > section.header-section > .tagline__wrapper {
  position: relative;
  z-index: 1;
}
@media (max-width: 1023px) {
  .page .about__wrapper > section.header-section[data-v-7d982150] {
    min-height: 80svh;
    min-height: calc(var(--svh, 1svh) * 80);
  }
}

/* /services: the template's Capabilities section listed the nine services again, right
   above the services index (static/motion/services-catalog.js), so it is hidden (founder,
   2026-10-17). Hidden here rather than by the script, so the first paint never shows it.
   Until the index stands after it, the empty section keeps a screen of room: the sections
   below stay out of view instead of painting in the index's place and jumping away (a
   layout shift of .5 on phones), and the film below does not start loading at the top. */
.services__wrapper > section:has(.capabilities-list__wrapper) {
  height: 100vh;
}
.services__wrapper > section:has(.capabilities-list__wrapper) > * {
  display: none;
}
.services__wrapper > section:has(.capabilities-list__wrapper):has(+ .ium-svc) {
  display: none;
}

/* Home: the caption under the mark is one sentence (hero_tagline_1; hero_tagline_2 is
   empty) at the tagline size, with "Let's talk" to /contact after it
   (static/motion/first-screen.js). Phone: the link sits under the sentence, the scroll
   arrow stays at the right. Desktop: the link takes the second caption's place. */
.page-home .hero .bottom {
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 1.4rem;
}
.page-home .hero .taglines {
  flex: 1 1 100%;
}
.page-home .hero .taglines > p:first-child {
  max-width: 34rem;
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -.039rem;
  line-height: 2.8rem;
}
.page-home .hero .taglines > p:empty {
  display: none;
}
.page-home .hero .ium-hero-cta {
  margin-right: auto;
  font-size: 1.6rem;
  line-height: 1.14;
  opacity: 0;
  transform: translate3d(0, -.6em, 0);
  transition: opacity 1.2s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.page-home .hero .ium-hero-cta.is-in {
  opacity: 1;
  transform: none;
}
@media (max-width: 1023px) {
  /* On short phones the mark gives up width so the sentence and the link still fit. */
  .page-home .hero .logo-wrapper {
    width: min(100%, calc((var(--svh, 1svh) * 100 - var(--header-height) - 16rem) * .597));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .page-home .hero .bottom {
    flex-wrap: nowrap;
  }
  .page-home .hero .taglines {
    flex: 0 1 auto;
  }
  .page-home .hero .taglines > p:first-child {
    max-width: none;
  }
  .page-home .hero .ium-hero-cta {
    margin: 0 auto .3rem 6.9rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero .ium-hero-cta {
    transform: none;
    transition: opacity .4s linear;
  }
}

/* Home, "Selected work" (2026-10-18): the template set it 30rem under "Our approach" and
   closed it with 22rem of black before the white Glance section, two near-empty thirds of a
   desktop screen. 20rem above and 12rem below (the Glance section opens with 12rem of white,
   so the colour change sits in the middle of the pause); phones 12rem above instead of 18rem. */
.page-home .featured-works[data-v-49fbfaaa] {
  margin-top: 12rem;
}
@media (min-width: 1024px) {
  .page-home .featured-works[data-v-49fbfaaa] {
    margin-top: 20rem;
    padding-bottom: 12rem;
  }
}

/* Home, "Reach the right people in Korea.": below 768px the template keeps two columns (the
   label on columns 1-2 of six, the paragraph on 4-6), which squeezed the paragraph into ten
   short lines at 390px. There the label stacks above the paragraph, both across the row.
   The "Our services" list further down is the same component (restyled by how-we-work.js),
   so only this block is matched, by its parent's scope. */
@media (max-width: 767px) {
  .page-home .key-value[data-v-b64cf357] .item .title,
  .page-home .key-value[data-v-b64cf357] .item .content {
    grid-column: 1 / -1;
  }
  .page-home .key-value[data-v-b64cf357] .item .content {
    margin-top: 2rem;
  }
}

/* /work, desktop: the slide title (62px) and its line sit centred over full-screen photos,
   and over bright ones (World, peaq, Tria, SynFutures) white type nearly vanished. A soft
   dark ellipse behind the type, never under 1240x400px so long lines stay covered, and a
   halo on the type. Measured at the brightest 5% behind the text: titles 3.6:1 or more,
   lines 4.8:1 or more (were 1.3:1 and 1.6:1). Phones and tablets set the type at the foot
   of each slide, where it already reads at 6:1 or more, so they keep the photo as is.
   Darkened a step on 2026-10-17 (.56/.38/.12 to .64/.46/.16): the audit against rejouice.com
   still saw titles competing with the photos' own signage (Sahara AI, peaq "002", Polygon). */
@media (min-width: 1024px) {
  .slides .slide.--img {
    isolation: isolate;
  }
  .slides .slide.--img > a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 53%;
    z-index: 1;
    width: max(84%, 1240px);
    height: max(48%, 400px);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .46) 45%, rgba(0, 0, 0, .16) 75%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .slides .slide.--img .text-wrapper,
  .slides .slide.--img .index {
    z-index: 2;
  }
  .slides .slide.--img .text-wrapper h2 {
    text-shadow: 0 0 34px rgba(0, 0, 0, .4), 0 0 3px rgba(0, 0, 0, .3);
  }
  .slides .slide.--img .text-wrapper .ium-proof-work {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 0, 0, .8), 0 0 3px rgba(0, 0, 0, .6);
  }
}

/* Case pages (2026-10-17): the hero showed only its headline ("A community built around
   participation."), so a visitor met the client's name about 1.4 screens down. The page's
   h1, the client name, was visually hidden since trust pass T3; it now sits over the
   headline at the template's label size, on the headline's left edge, and comes in as the
   headline's words start rising (fade and rise, like the home "Let's talk" link). Still
   the only h1. */
.work-hero .hero-inner > .project-name {
  position: relative; /* over the hero picture, which is absolute */
  z-index: 0; /* holds its scrim */
  margin: 0 0 1.2rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -.016rem;
  line-height: 1.75rem;
  text-shadow: 0 0 12px rgba(0, 0, 0, .7), 0 0 3px rgba(0, 0, 0, .5);
  animation: ium-case-name 1.2s cubic-bezier(.16, 1, .3, 1) .5s backwards;
}
/* Small white type over bright stills and films (peaq's robot, SynFutures) measured 2.8:1
   at the brightest 5% behind it. A soft ellipse behind the name, like the /work title
   scrim, and the halo bring every case to 4.7:1 or more; photos are untouched. */
.work-hero .hero-inner > .project-name::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1em -1.6em;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
@keyframes ium-case-name {
  from {
    opacity: 0;
    transform: translate3d(0, .6em, 0);
  }
}
@keyframes ium-case-name-fade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-hero .hero-inner > .project-name {
    animation: ium-case-name-fade .4s linear .5s backwards;
  }
}
/* Phones and tablets set the headline at the foot of the hero (absolute, 4rem up, 1rem in);
   the hero becomes a column ending there, so the name stacks above a headline of any
   length and the headline keeps its place. */
@media (max-width: 1023px) {
  .work-hero .hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 1rem 4rem;
  }
  .work-hero .hero-inner > .copy-hero {
    position: relative;
    bottom: auto;
    left: auto;
  }
}
/* Desktop: the headline sits at the foot of a 12-column grid (columns 7 to 12); the name
   takes a row above it in the same columns. */
@media (min-width: 1024px) {
  .work-hero .hero-inner {
    grid-template-rows: 1fr auto;
  }
  .work-hero .hero-inner > .project-name {
    grid-column: 7 / span 6;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    margin-bottom: 1.6rem;
    font-size: 2rem;
    letter-spacing: -.02rem;
    line-height: 2.4rem;
  }
  .work-hero .hero-inner > .copy-hero {
    grid-row: 2;
  }
}

/* Case pages, "Project scope & evidence": the template marks each item with two dots that
   swap places on hover, which read as a doubled bullet ("••"). One dot, at rest. */
.project-awards .award-item .dots-container > .dot:nth-child(n+2) {
  display: none;
}
.project-awards .award-item:hover .dots-container > .dot {
  transform: none;
}

/* Home reel (2026-10-18): the film's own first frame lies under the video, so the reel is not
   an empty box between the preloader and the moment its film loads through the video gate
   (preload none; seconds on a slow phone). Framed like the video (object-fit: cover, centred);
   the video covers it once it draws. Browsers skip background images of the hidden cut, so a
   phone loads only the tall frame (47 KB) and a desktop only the wide one (91 KB). */
.hero-reel .video-wrapper.-lg .media {
  background: url(/assets/ium/poster-v1/reel-short-first-eab98526b0c0.jpg) 50% 50% / cover no-repeat;
}
.hero-reel .video-wrapper.-mb .media {
  background: url(/assets/ium/poster-v1/reel-mobile-first-74469ee791a8.jpg) 50% 50% / cover no-repeat;
}

/* /contact (2026-10-18): the brief form (static/motion/contact-brief.js) mounts between the
   header and the contact details. Until it is there the details stay hidden, so they never
   show in its place and jump down when it arrives (on phones they start in view). A 3 s
   fallback shows them if the script never runs. */
.page-contact > .contact-header + .contact-informations {
  visibility: hidden;
  animation: ium-brief-wait 0s linear 3s forwards;
}
@keyframes ium-brief-wait { to { visibility: visible; } }