:root {
  color-scheme: dark;
  --ral-9005: rgb(10, 12, 16);
  --white: rgb(255, 255, 255);
  --soft-white: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.34);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--ral-9005);
  color: var(--white);
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page-shell { min-height: 100svh; overflow-x: clip; background: var(--ral-9005); }
.landing {
  width: min(100%, 1720px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 5.25rem) clamp(1.4rem, 6vw, 8rem) 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The source marks have black PNG canvases. Screen blending removes the canvas,
   letting the exact RAL 9005 field show through. */
.brand-sequence {
  width: min(100%, 1060px);
  height: clamp(8.5rem, 21vw, 17.5rem);
  position: relative;
  margin-top: clamp(.25rem, 2vw, 1.5rem);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16,.84,.22,1), filter .55s ease;
}
.brand-logo {
  position: absolute;
  top: 50%; left: 50%;
  display: block;
  height: auto;
  object-fit: contain;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.12));
  transform-origin: center;
}
.logo-icon { width: min(17.5rem, 29vw); transform: translate(-50%, -50%) scale(.55); animation: icon-forge 1.15s cubic-bezier(.16,.84,.22,1) .15s both; }
.logo-wordmark { width: min(44rem, 76vw); transform: translate(-50%, -50%) translateX(4rem); opacity: 0; animation: wordmark-lock 1.15s cubic-bezier(.16,.84,.22,1) 1.05s both; }
.logo-combination { width: min(66rem, 94vw); transform: translate(-50%, -50%) scale(.96); opacity: 0; animation: combination-forge 1.35s cubic-bezier(.16,.84,.22,1) 2.05s both; }

.content {
  width: min(100%, 1020px);
  margin: clamp(3.5rem, 7vh, 6.5rem) auto clamp(2.4rem, 5vh, 4rem);
  text-align: center;
  position: relative;
}
.content::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(38rem, 86vw); aspect-ratio: 1;
  top: -7rem; left: 50%;
  transform: translateX(-50%) scale(.82);
  background: radial-gradient(circle, rgba(206,225,238,.12), transparent 66%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16,.84,.22,1);
}
h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 5.65rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
  text-transform: uppercase;
  text-wrap: balance;
  cursor: default;
  transform: translate3d(var(--lift-x, 0), var(--lift-y, 0), 0);
  transition: transform .25s ease-out, color .35s ease, text-shadow .4s ease, letter-spacing .4s ease;
}
h1:hover, h1:focus-visible, h1.is-engaged {
  --lift-y: -10px;
  color: #fff;
  letter-spacing: -.035em;
  text-shadow: 0 9px 22px rgba(210,231,244,.19), 0 1px 0 rgba(255,255,255,.32);
  outline: none;
}
.content:has(h1:hover)::before, .content:has(h1.is-engaged)::before { opacity: 1; transform: translateX(-50%) scale(1); }
.rule { width: clamp(3.75rem, 7vw, 6.25rem); height: 2px; margin: clamp(2rem, 4vw, 3.25rem) auto; background: var(--line); }
.canadian-statement { position: relative; width: fit-content; max-width: calc(100% - clamp(3.9rem, 7vw, 6.5rem)); margin: clamp(1.35rem, 2.4vw, 2rem) auto 0; padding: clamp(.7rem, 1.6vw, 1.2rem) 0; outline: none; transition: transform .4s cubic-bezier(.16,.84,.22,1); }
.intro { max-width: 48rem; margin: 0; color: var(--soft-white); font-size: clamp(1.06rem, 1.75vw, 1.46rem); line-height: 1.55; text-wrap: balance; transition: color .35s ease, transform .35s ease; }
.canada-mark { position: absolute; left: calc(100% + clamp(.65rem, 1.35vw, 1.1rem)); top: 50%; display: grid; place-items: center; width: clamp(3.7rem, 6.3vw, 5.3rem); aspect-ratio: 1; transform: translateY(-50%); }
.canada-mark::before { content: ""; position: absolute; inset: -80%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 0, 0, .22), transparent 63%); opacity: .48; transform: scale(.7); animation: canada-pulse 3.4s ease-in-out 4.7s infinite; }
.canada-mark img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 10px rgba(255, 0, 0, .18)); animation: canada-reveal 1s cubic-bezier(.16,.84,.22,1) 3.85s forwards; transition: transform .4s cubic-bezier(.16,.84,.22,1), filter .4s ease; }
.canadian-statement:hover, .canadian-statement:focus-visible { transform: translateY(-4px); }
.canadian-statement:hover .intro, .canadian-statement:focus-visible .intro { color: #fff; }
.canadian-statement:hover .canada-mark img, .canadian-statement:focus-visible .canada-mark img { transform: translateY(-3px) rotate(14deg) scale(1.08); filter: drop-shadow(0 0 19px rgba(255, 0, 0, .48)); }
.smelting { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 3vw, 3.25rem); margin: clamp(3rem, 6vw, 5rem) auto 0; padding: clamp(.9rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem); text-align: left; transition: transform .4s cubic-bezier(.16,.84,.22,1); outline: none; }
.smelting:hover, .smelting:focus-visible { transform: translateY(-7px); }
.furnace { width: clamp(7rem, 12vw, 10.5rem); height: clamp(7rem, 12vw, 10.5rem); object-fit: contain; mix-blend-mode: lighten; filter: drop-shadow(0 0 12px rgba(255,255,255,.11)); animation: furnace-glow 3.5s ease-in-out 3.9s infinite; }
.smelting:hover .furnace, .smelting:focus-visible .furnace { animation: furnace-engage .8s cubic-bezier(.16,.84,.22,1) both; }
.smelting-title { margin: 0; font-size: clamp(1rem, 1.75vw, 1.42rem); font-weight: 700; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; }
.smelting-copy { margin: .65rem 0 0; color: var(--soft-white); font-size: clamp(.94rem, 1.4vw, 1.16rem); line-height: 1.5; }
.smelting-copy span { display: block; }
.launch-timing { margin-top: .08rem; color: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; font-size: inherit; white-space: nowrap; }
.footer { width: 100%; margin-top: auto; padding-top: 1.7rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; color: rgba(255,255,255,.67); font-size: .83rem; letter-spacing: .03em; }
.footer-item { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.footer-item svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-email { justify-self: start; }
.footer-copyright { text-align: center; white-space: nowrap; }
.footer-location { justify-self: end; }
.landing.is-scrolled .brand-sequence { opacity: .08; transform: translateY(-3rem) scale(.86); filter: blur(4px); }

.reveal { opacity: 0; transform: translateY(22px); animation: reveal .8s cubic-bezier(.16,.84,.22,1) forwards; }
.reveal-1 { animation-delay: 3.1s; }.reveal-2 { animation-delay: 3.28s; }.reveal-3 { animation-delay: 3.45s; }.reveal-4 { animation-delay: 3.65s; }.reveal-5 { animation-delay: 3.82s; }
@keyframes icon-forge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); filter: blur(10px); } 40%, 58% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); filter: blur(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
@keyframes wordmark-lock { 0% { opacity: 0; transform: translate(-50%, -50%) translateX(5rem); filter: blur(8px); } 34%, 58% { opacity: 1; transform: translate(-50%, -50%) translateX(0); filter: blur(0); } 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-1.5rem); } }
@keyframes combination-forge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.91); filter: blur(12px) brightness(2.4); } 58% { opacity: 1; transform: translate(-50%, -50%) scale(1.015); filter: blur(0) brightness(1.3); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1); } }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes furnace-glow { 50% { transform: scale(1.035); filter: drop-shadow(0 0 24px rgba(255,255,255,.26)); } }
@keyframes furnace-engage { 0% { transform: scale(1); } 35% { transform: scale(1.1) rotate(-2deg); filter: drop-shadow(0 0 30px rgba(255,255,255,.52)); } 100% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(255,255,255,.3)); } }
@keyframes canada-reveal { from { opacity: 0; transform: translateX(12px) rotate(18deg) scale(.82); } to { opacity: 1; transform: translateX(0) rotate(18deg) scale(1); } }
@keyframes canada-pulse { 50% { opacity: .85; transform: scale(1.08); } }

@media (max-width: 620px) {
  .landing { padding-inline: 1.35rem; }
  .brand-sequence { height: 8rem; }
  h1 { font-size: clamp(2.05rem, 10.5vw, 3.5rem); }
  h1 br { display: none; }
  .content { margin-top: 3.3rem; }
  .canadian-statement { display: flex; flex-direction: column; align-items: center; max-width: 100%; gap: 1.15rem; }
  .canada-mark { position: relative; inset: auto; width: 3.65rem; order: -1; transform: none; }
  .smelting { flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
  .furnace { width: 5.2rem; height: 5.2rem; }
  .smelting-copy { font-size: .72rem; line-height: 1.45; }
  .footer { grid-template-columns: 1fr; justify-items: center; gap: .7rem; font-size: .75rem; }
  .footer-email, .footer-location { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }