/* ── LANDING / HOLDING PAGE ──────────────────────────────
   Styles specific to the temporary holding page (index.html).
   Remove or replace when full site launches.
───────────────────────────────────────────────────────── */

main {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Lockup: CREATIVE + carousel + logo, centred, 1/3 down */
.lockup {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  width: min(calc(100vw - clamp(10rem, 22vw, 22rem)), 1400px);
  gap: 0.36em;
  font-size: clamp(1.55rem, 3.6vw, 4.25rem);
  line-height: 1;
}

.text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1;
}

.label-creative {
  font-size: 1.15em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--carousel-color);
  white-space: nowrap;
  margin-bottom: 0.08em;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
  transition: color 3s ease;
}

.carousel-wrap {
  position: relative;
  height: 1.15em;
  overflow: visible;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.7s ease 0.5s forwards;
}

.carousel-wrap span {
  position: absolute;
  bottom: 0; right: 0;
  font-size: 1.15em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1),
              color 3s ease;
  pointer-events: none;
  color: var(--carousel-color);
}
.carousel-wrap span.active { opacity: 1; transform: translateY(0); }

/* Logo: inline SVG, max 58% width to match reference proportions */
.logo-wrap {
  flex: 1;
  min-width: 0;
  max-width: 58%;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s cubic-bezier(0.22,1,0.36,1) 0.35s forwards;
}

.logo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tagline block: motto + byline + sector, 2/3 down */
.tagline-wrap {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - clamp(10rem, 22vw, 22rem)), 1400px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
  gap: 0.22em;
}

.tagline {
  font-size: clamp(1.55rem, 3.6vw, 4.25rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: left;
  color: inherit;
  margin-bottom: 0.3em;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease 0.75s forwards;
}

.tagline-sub {
  font-size: clamp(0.9rem, 1.52vw, 1.24rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: left;
  color: inherit;
  opacity: 0;
  transform: translateY(20px);
  word-break: keep-all;
  overflow-wrap: normal;
}
.tagline-sub:nth-child(2) { animation: fadeUp 0.8s ease 0.9s forwards; }
.tagline-sub:nth-child(3) { animation: fadeUp 0.8s ease 1.0s forwards; }

.accent-dot { color: var(--carousel-color); transition: color 3s ease; }
.pipe { font-weight: 400; margin: 0 0.45em; opacity: 0.45; }
.nobr { white-space: nowrap; }

@media (max-width: 600px) {
  .lockup { top: 30%; width: calc(100vw - 3rem); font-size: clamp(1.2rem, 7vw, 2rem); }
  .tagline-wrap { top: 62%; width: calc(100vw - 3rem); padding-left: 0 !important; }
  .tagline { font-size: clamp(1.2rem, 7vw, 2rem); }
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }