:root {
  --yellow: #ffd22f;
  --orange: #f27122;
  --red: #d33a23;
  --ink: #18253a;
  --sky: #26aee8;
  --white: #ffffff;
  --comic: "Arial Black", "Arial Rounded MT Bold", Impact, sans-serif;
}

* { box-sizing: border-box; }

html,
body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  background: var(--sky);
  font-family: Arial, Helvetica, sans-serif;
}

.construction-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--sky);
}

.scene,
.sky-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene {
  z-index: -3;
  background: url("cleasby-construction.webp") center center / cover no-repeat;
  animation: scene-in 1s ease-out both;
}

.sky-glow {
  z-index: -2;
  background: linear-gradient(180deg, rgba(38, 174, 232, .12) 0%, transparent 39%, rgba(24, 37, 58, .08) 100%);
}

.header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(25px, 4vw, 64px);
  animation: drop-in .65s ease-out both;
}

.caution-badge,
.hard-hat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 rgba(24, 37, 58, .3);
  font-family: var(--comic);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.caution-badge span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--red);
  font-size: 16px;
}

.hard-hat {
  color: var(--white);
  background: var(--orange);
  transform: rotate(2deg);
}

.headline {
  position: relative;
  z-index: 1;
  width: min(900px, 80vw);
  margin: clamp(8px, 2vh, 26px) auto 0;
  text-align: center;
  animation: title-in .8s .08s cubic-bezier(.2, .8, .2, 1) both;
}

.kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  font-family: var(--comic);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--comic);
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

h1 span {
  display: inline-block;
  -webkit-text-stroke: clamp(2px, .2vw, 4px) var(--ink);
  paint-order: stroke fill;
  text-shadow: 7px 8px 0 rgba(24, 37, 58, .28);
}

h1 .setup {
  color: var(--white);
  font-size: clamp(42px, 5.6vw, 88px);
  letter-spacing: -.04em;
  line-height: .9;
}

h1 .punchline {
  margin-top: 9px;
  color: var(--yellow);
  font-size: clamp(48px, 6.5vw, 104px);
  letter-spacing: -.035em;
  line-height: .82;
  transform: rotate(1deg);
}

.speech-bubble {
  position: absolute;
  right: 7vw;
  bottom: 25vh;
  z-index: 2;
  padding: 13px 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  box-shadow: 4px 5px 0 rgba(24, 37, 58, .2);
  font-family: var(--comic);
  font-size: 12px;
  transform: rotate(5deg);
  animation: bubble-in .7s .6s ease-out both;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -13px;
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--white);
  transform: rotate(35deg) skew(-10deg, -10deg);
}

.work-tape {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-top: 4px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  font-family: var(--comic);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.work-tape p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 8px 16px;
  background: var(--yellow);
}

.tape-stripes {
  position: absolute;
  inset: 0;
  opacity: .2;
  background: repeating-linear-gradient(120deg, var(--ink) 0 28px, transparent 28px 55px);
}

@keyframes scene-in {
  from { opacity: .65; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes title-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bubble-in {
  from { opacity: 0; transform: scale(.5) rotate(5deg); }
  to { opacity: 1; transform: scale(1) rotate(5deg); }
}

@media (max-width: 700px) {
  .scene { background-position: 50% bottom; background-size: auto 100%; }
  .header { padding: 20px 16px; }
  .caution-badge,
  .hard-hat { padding: 7px 9px; border-width: 2px; font-size: 8px; box-shadow: 3px 3px 0 rgba(24, 37, 58, .3); }
  .caution-badge span { width: 18px; height: 18px; font-size: 11px; }
  .headline { width: 94vw; margin-top: 5vh; }
  h1 span { text-shadow: 5px 6px 0 rgba(24, 37, 58, .28); }
  h1 .setup { font-size: clamp(34px, 10vw, 54px); }
  h1 .punchline { margin-top: 8px; font-size: clamp(39px, 11.5vw, 62px); line-height: .86; }
  .speech-bubble { display: none; }
  .work-tape { height: 52px; font-size: 8px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}