/* OHLO Coming Soon — no framework, tracking, or JavaScript dependency for layout */
@font-face {
  font-family: 'Keep Calm';
  src: url('./fonts/KeepCalm-Medium.woff2') format('woff2'),
       url('./fonts/KeepCalm-Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #f4f0e9;
  --soft: #bebeb9;
  --orange: #7096ac;
  --hairline: rgba(244,240,233,.19);
  --bg: #000000;
  --font-head: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-logo: 'Keep Calm', 'Gill Sans', 'Lato', 'Trebuchet MS', sans-serif;
  --mx: 0px;
  --my: 0px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--paper); font-family: var(--font-head); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
button { font: inherit; }
::selection { background: var(--orange); color: #000000; }
.site { min-height: 100svh; position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; }
.backdrop, .backdrop__video, .backdrop__veil, .backdrop__texture, .backdrop__grid { position: absolute; inset: 0; pointer-events: none; }
.backdrop { z-index: -1; background: #000000; overflow: hidden; }
.backdrop__video { width: 100%; height: 100%; object-fit: cover; object-position: 59% 48%; opacity: .94; transform: scale(1.04) translate3d(var(--mx),var(--my),0); transition: transform .6s ease-out; }
.backdrop__veil { background: linear-gradient(90deg, #000000 0%, rgba(0,0,0,.97) 14%, rgba(0,0,0,.83) 35%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.24) 100%), linear-gradient(0deg, #000000 0%, transparent 30%, transparent 72%, rgba(0,0,0,.28) 100%); }
.backdrop__texture { opacity: .10; background-image: url('./grain.svg'); background-size: 180px 180px; mix-blend-mode: screen; }
.backdrop__grid { opacity: .34; background-image: linear-gradient(90deg,rgba(220,220,220,.08) 1px,transparent 1px); background-size: 25% 100%; mask-image: linear-gradient(to bottom, transparent, black 12%,black 89%,transparent); }
.frame { width: min(100% - 9.4vw, 1650px); margin-inline: auto; }
.header { min-height: 123px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--hairline); }
.brand { display: inline-flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.brand__name { font-family: var(--font-logo); font-size: clamp(2.15rem, 3vw, 3rem); font-weight: 700; line-height: .92; letter-spacing: -.055em; text-transform: uppercase; }
.brand__name .brand__period { color: var(--orange); }
.brand__subtitle { font-size: 9px; font-family: var(--font-mono); color: rgba(244,240,233,.5); letter-spacing: .16em; text-transform: uppercase; }
.header__right { display: inline-flex; align-items: center; gap: clamp(20px,5vw,82px); }
.header__domain { font: 10px var(--font-mono); letter-spacing: .2em; color: rgba(244,240,233,.67); text-transform: uppercase; white-space: nowrap; }
.header__link { display: inline-flex; align-items: center; gap: 18px; font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(244,240,233,.34); padding: 9px 9px 9px 19px; border-radius: 50px; transition: border .2s, background .2s, color .2s; white-space: nowrap; }
.header__link:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.circle-arrow { display: grid; place-items: center; background: var(--orange); color: #131313; border-radius: 50%; width: 31px; height: 31px; font: 21px/1 Arial,sans-serif; transform: none; }
.main { width: 100%; flex: 1; display: flex; align-items: center; position: relative; }
.hero { width: min(100% - 9.4vw, 1650px); position: relative; padding-top: clamp(58px,7.3vh,85px); padding-bottom: clamp(90px,10vh,140px); }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 29px; font-family: var(--font-mono); font-size: clamp(10px,.86vw,12px); letter-spacing: .13em; line-height: 1.5; color: #e7dfd7; text-transform: uppercase; }
.eyebrow__pulse { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(112,150,172,.13); animation: pulse 2.8s ease-in-out infinite; }
.hero__title { margin: 0; max-width: 1240px; font-family: var(--font-head); font-weight: 800; font-size: clamp(68px, 8.7vw, 152px); letter-spacing: -.087em; line-height: .92; text-transform: uppercase; }
.hero__line { display: block; width: max-content; max-width: 100%; opacity: 0; transform: translateY(26px); animation: reveal .95s cubic-bezier(.17,.75,.22,1) forwards; }
.hero__line:nth-child(2) { animation-delay: .11s; }
.hero__line:nth-child(3) { animation-delay: .22s; }
.hero__title .outline { color: transparent; -webkit-text-stroke: 1.65px var(--paper); paint-order: stroke fill; }
.hero__title .dot { color: var(--orange); -webkit-text-stroke: 0; }
.hero__bottom { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; justify-content: space-between; max-width: 740px; margin-top: clamp(29px, 5vh, 55px); opacity: 0; animation: fade .8s ease .7s forwards; }
.hero__description { max-width: 440px; margin: 0; font-weight: 400; color: #cfcbc5; font-size: clamp(15px,1.26vw,18px); line-height: 1.7; letter-spacing: -.015em; }
.hero__cta { display: inline-flex; gap: 23px; align-items: center; border-bottom: 1px solid var(--orange); padding: 11px 0; text-transform: uppercase; font: 11px var(--font-mono); letter-spacing: .07em; transition: color .2s, gap .2s; white-space: nowrap; }
.hero__cta:hover { color: var(--orange); gap: 30px; }
.hero__cta span:last-child { font-size: 22px; transform: translateY(-2px); }
.orbit-note { position: absolute; right: 0; bottom: 18%; display: flex; align-items: center; gap: 13px; text-transform: uppercase; color: #c6bcb3; font: 10px/1.8 var(--font-mono); letter-spacing: .16em; }
.orbit-note::before { content: ''; display: block; height: 1px; width: 32px; background: var(--orange); }
.lower { border-top: 1px solid var(--hairline); position: relative; }
.marquee { overflow: hidden; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.marquee__track { display: flex; width: max-content; animation: travel 29s linear infinite; }
.marquee__unit { display: inline-flex; align-items: center; gap: 30px; padding: 17px 30px 17px 0; font: 10px/1.4 var(--font-mono); text-transform: uppercase; color: rgba(244,240,233,.44); letter-spacing: .18em; }
.marquee__star { display: inline-block; color: var(--orange); font-size: 13px; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding-block: 21px 24px; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: rgba(244,240,233,.47); }
.footer__right { display: flex; gap: 28px; }
.footer a { color: rgba(244,240,233,.8); transition: color .2s; }
.footer a:hover { color: var(--orange); }
@keyframes travel { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(112,150,172,0); } }
@keyframes reveal { to { transform: translateY(0); opacity: 1; } }
@keyframes fade { to { opacity: 1; } }
@media (min-width:1650px) { .hero__title { font-size: 146px; } }
@media (max-width:1100px) {
  .frame, .hero { width: min(100% - 70px, 1650px); }
  .hero__title { font-size: clamp(67px, 10vw, 116px); }
  .backdrop__veil { background: linear-gradient(90deg, #000000 0%,rgba(0,0,0,.95) 29%,rgba(0,0,0,.34) 90%),linear-gradient(0deg,#000000 0%,transparent 38%); }
  .header__domain,.orbit-note { display:none; }
}
@media (max-width:650px) {
  .site { min-height: 100svh; }
  .frame, .hero { width: calc(100% - 38px); }
  .header { min-height: 94px; gap: 12px; }
  .brand__name { font-size: 35px; }
  .brand__subtitle { font-size: 7px; letter-spacing: .07em; }
  .header__link { font-size: 0; padding: 6px; gap: 0; border-color: rgba(244,240,233,.25); }
  .header__link .circle-arrow { width: 34px; height: 34px; font-size: 21px; }
  .main { align-items: flex-end; min-height: 510px; }
  .hero { padding: 72px 0 66px; }
  .eyebrow { margin-bottom: 27px; font-size: 9px; letter-spacing: .09em; }
  .hero__title { font-size: clamp(47px, 10vw, 68px); line-height: 1.02; letter-spacing: -.077em; }
  .hero__title .outline { -webkit-text-stroke-width: 1.2px; }
  .hero__bottom { margin-top: 34px; gap: 27px; }
  .hero__description { font-size: 15px; line-height: 1.55; max-width: 325px; }
  .hero__cta { font-size: 10px; }
  .backdrop__video { width: 100%; left: 0; object-position: 90% 45%; opacity: .72; }
  .backdrop__veil { background: linear-gradient(90deg,rgba(0,0,0,.81),rgba(0,0,0,.46)), linear-gradient(0deg,#000000 6%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.27) 90%,rgba(0,0,0,.52)); }
  .backdrop__grid { background-size: 50% 100%; }
  .marquee__unit { font-size: 9px; padding-block: 14px; }
  .footer { flex-direction: column; gap: 11px; padding-block: 18px 20px; font-size: 9px; }
  .footer__right { gap: 20px; }
}
@media (max-width:370px) { .hero__title { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hero__line, .hero__bottom { opacity: 1; transform: none; }
}