:root { --navy: #103562; --orange: #f5a012; --paper: #fffdf8; --muted: #657184; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--navy); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.holding-page { min-height: 100vh; width: min(1280px, calc(100% - 72px)); margin: auto; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; }.brand-mark { width: 35px; height: 42px; position: relative; display: inline-block; color: var(--orange); font: 700 33px/1 'Space Grotesk', sans-serif; transform: skew(-5deg); }.brand-mark span { position: absolute; left: 0; top: 5px; transform: rotate(-16deg) scaleX(1.1); }.brand-mark i, .monogram i { position: absolute; width: 11px; height: 41px; background: var(--navy); border-radius: 10px; right: 2px; top: 0; transform: rotate(-27deg); }
.brand-name { font: 700 25px/1 'Space Grotesk', sans-serif; letter-spacing: -.09em; }.brand-name span { display: block; color: var(--orange); font: 500 8px/1.1 'DM Sans', sans-serif; letter-spacing: .17em; text-transform: uppercase; margin: 3px 0 0 2px; }
.status { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }.status span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--orange); border-radius: 50%; }
.message { width: 540px; max-width: 100%; padding: 13vh 0 14vh; position: relative; z-index: 1; }.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.eyebrow span { width: 22px; height: 2px; background: var(--orange); }
h1 { margin: 0 0 27px; color: var(--navy); font: 600 clamp(48px, 7vw, 86px)/.94 'Space Grotesk', sans-serif; letter-spacing: -.075em; }h1 em { color: var(--orange); font-style: normal; }.intro { max-width: 420px; margin: 0 0 35px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.contact-box { border-left: 2px solid var(--orange); padding-left: 19px; }.contact-box p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }.contact-links { display: flex; flex-wrap: wrap; gap: 17px 27px; }.contact-links a { font: 600 15px 'Space Grotesk', sans-serif; border-bottom: 1px solid rgba(16, 53, 98, .3); padding-bottom: 2px; transition: color .2s, border-color .2s; }.contact-links a:hover { color: var(--orange); border-color: var(--orange); }.contact-links span { color: var(--orange); margin-left: 3px; }
.decoration { position: absolute; right: 5%; top: 50%; width: 445px; height: 445px; transform: translateY(-50%); border: 1px solid rgba(16, 53, 98, .16); border-radius: 50%; display: grid; place-items: center; }.decoration:before, .decoration:after { content: ''; position: absolute; border-radius: 50%; }.decoration:before { inset: 35px; border: 1px solid rgba(245, 160, 18, .35); }.decoration:after { inset: 70px; border: 1px solid rgba(16, 53, 98, .12); }.circle { position: absolute; width: 370px; height: 370px; border-radius: 50%; background: rgba(245, 160, 18, .08); }.monogram { position: relative; width: 132px; height: 145px; color: var(--orange); font: 700 118px/.8 'Space Grotesk', sans-serif; transform: skew(-5deg); }.monogram span { position: absolute; transform: rotate(-16deg) scaleX(1.1); }.monogram i { width: 40px; height: 143px; right: 6px; }.decoration p { position: absolute; right: 55px; bottom: 70px; color: var(--orange); font: 600 16px/1 'Space Grotesk', sans-serif; letter-spacing: -.03em; text-align: right; text-transform: lowercase; }
footer { margin-top: auto; padding: 22px 0 27px; border-top: 1px solid rgba(16, 53, 98, .15); color: var(--muted); font-size: 11px; }footer span { margin: 0 6px; color: var(--orange); }
@media (max-width: 850px) { .holding-page { width: min(100% - 38px, 600px); }.topbar { height: 82px; }.status { font-size: 9px; }.message { padding: 10vh 0 12vh; }.decoration { position: relative; right: auto; top: auto; transform: none; width: min(390px, 90vw); height: min(390px, 90vw); margin: 0 auto 64px; }.circle { width: 78%; height: 78%; }.decoration p { right: 12%; bottom: 16%; } }
@media (max-width: 480px) { .brand-name { font-size: 21px; }.status { display: none; }h1 { font-size: 49px; }.intro { font-size: 15px; }.contact-links { display: grid; gap: 10px; }.decoration { width: 300px; height: 300px; }.monogram { transform: scale(.75) skew(-5deg); }.decoration p { right: 11%; bottom: 13%; font-size: 13px; } }