@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --sc-canvas: #120f17;
  --sc-surface: #1b1520;
  --sc-ink: #f8eee3;
  --sc-ink-soft: #cbb9ba;
  --sc-accent: #f1c68d;
  --sc-accent-ink: #21151b;
  --sc-font-display: Georgia, 'Times New Roman', serif;
  --sc-font-text: 'DM Sans', 'Manrope', Arial, sans-serif;
}

html { scroll-padding-top: 5rem; }
body { margin: 0; overflow-x: hidden; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 5px; }
::selection { background: #f1c68d; color: #23131e; }
.skip-link { position: fixed; z-index: 1000; top: -5rem; left: 1rem; padding: .7rem 1rem; background: #fff; color: #17121b; }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; z-index: 80; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 92px; padding: 18px clamp(22px, 5vw, 86px); border-bottom: 1px solid rgba(255, 234, 220, .16); }
.brand { display: block; width: clamp(142px, 13.5vw, 205px); line-height: 0; filter: drop-shadow(0 2px 9px rgba(10, 5, 10, .6)); }
.brand img { width: 100%; height: auto; }
.header-nav { display: flex; gap: clamp(18px, 3.4vw, 52px); margin-left: auto; padding-right: clamp(25px, 5vw, 72px); }
.header-nav a, .header-note, .hero-bottom, .section-kicker, .social-index, .site-footer { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.header-nav a { text-decoration: none; transition: color .25s ease; }
.header-nav a:hover { color: var(--sc-accent); }
.header-note { color: #e4cbb9; white-space: nowrap; }
.header-note span { padding-left: .5rem; color: var(--sc-accent); }

.hero { position: relative; }
.hero-stage { isolation: isolate; background: #160e17; }
.hero-image-plane, .hero-wash, .hero-light, .hero-grain { position: absolute; inset: 0; pointer-events: none; }
.hero-image-plane { z-index: -5; }
.hero-image { position: absolute; inset: -5% -2%; background-image: url('assets/boho-twilight.jpg'); background-size: cover; background-position: 52% center; transform: scale(calc(1.06 + var(--sc-p, 0) * .07)); will-change: transform; }
.hero-wash { z-index: -4; background: linear-gradient(90deg, rgba(20, 10, 25, .93) 0%, rgba(25, 11, 29, .79) 28%, rgba(28, 12, 29, .38) 58%, rgba(18, 10, 17, .10) 100%), linear-gradient(0deg, rgba(12, 8, 17, .85), transparent 27%, transparent 76%, rgba(13, 8, 19, .45)); }
.hero-light { z-index: -3; mix-blend-mode: screen; transition: background-position .25s ease; }
.hero-light-one { background: radial-gradient(circle at var(--pointer-x, 71%) var(--pointer-y, 28%), rgba(231, 155, 85, .17), transparent 28%); }
.hero-light-two { background: radial-gradient(circle at 83% 88%, rgba(141, 84, 132, .19), transparent 39%); }
.hero-grain { z-index: -2; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.orbit { position: absolute; z-index: -1; width: 47vw; aspect-ratio: 1; border: 1px solid rgba(247, 205, 170, .18); border-radius: 50%; left: 57%; top: 9%; transform: translate(-50%, calc(var(--sc-p, 0) * -7%)) scale(calc(1 + var(--sc-p, 0) * .12)); pointer-events: none; }
.orbit::after { content: '✦'; position: absolute; right: 5%; top: 19%; color: rgba(255, 231, 194, .75); font-size: 24px; text-shadow: 0 0 25px #f0bf89; }
.orbit-two { width: 64vw; left: 61%; top: -22%; opacity: .52; transform: translate(-50%, calc(var(--sc-p, 0) * 5%)); }
.orbit-two::after { right: 16%; top: 9%; font-size: 13px; }
.hero-content { position: absolute; left: clamp(24px, 7vw, 130px); top: 50%; width: min(52vw, 790px); transform: translateY(-43%); }
.eyebrow { margin: 0 0 clamp(20px, 3vw, 43px); color: #f2d1b5; font-size: clamp(9px, .85vw, 12px); font-weight: 700; letter-spacing: .31em; }
.hero h1 { margin: 0; max-width: 10ch; color: #fff8ef; font-family: var(--sc-font-display); font-size: clamp(64px, 8.1vw, 146px); font-weight: 400; line-height: .89; letter-spacing: -.065em; text-shadow: 0 3px 34px rgba(20, 8, 16, .32); }
.hero h1 em, .world-section h2 em, .connect-section h2 em { color: #f6d7b4; font-weight: 400; }
.hero-subtitle { max-width: 34ch; margin: clamp(25px, 3vw, 43px) 0 0; color: #f6e9df; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; text-shadow: 0 2px 15px #1a0d14; }
.hero-bottom { position: absolute; inset: auto clamp(22px, 5vw, 86px) 27px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: rgba(255, 236, 224, .83); }
.hero-symbol { color: #f6d7b4; font-size: 20px; animation: star-turn 15s linear infinite; }

.world-section { position: relative; padding: clamp(90px, 10vw, 164px) clamp(24px, 7vw, 130px) 0; overflow: hidden; background: #1b1520; }
.world-grid { max-width: 1460px; margin: auto; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(45px, 11vw, 180px); align-items: end; padding-bottom: clamp(85px, 11vw, 150px); }
.section-kicker { color: #eac69e; }
.world-section h2, .connect-section h2 { margin: 39px 0 0; font-family: var(--sc-font-display); font-size: clamp(51px, 6.1vw, 106px); font-weight: 400; line-height: .97; letter-spacing: -.06em; }
.world-copy { max-width: 52ch; padding-bottom: 6px; }
.world-copy p { margin: 0 0 1.3rem; color: #e7d9d4; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; }
.world-copy .disclosure { margin: 2.3rem 0 0; padding-left: 1.2rem; border-left: 1px solid #e6b987; color: #bca9aa; font-size: 13px; line-height: 1.65; }
.marquee { width: calc(100% + clamp(48px, 14vw, 260px)); margin-left: calc(-1 * clamp(24px, 7vw, 130px)); overflow: hidden; border-top: 1px solid rgba(239, 207, 179, .18); border-bottom: 1px solid rgba(239, 207, 179, .18); }
.marquee-track { display: inline-block; min-width: max-content; padding: 24px 0; color: rgba(249, 233, 219, .62); font-size: clamp(12px, 1.1vw, 17px); font-weight: 700; letter-spacing: .25em; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee span { padding: 0 2rem; color: #e6ba89; }

.connect-section { position: relative; overflow: hidden; min-height: 100svh; padding: clamp(70px, 8vw, 125px) clamp(24px, 7vw, 130px) 28px; background: #120f17; }
.connect-halo { position: absolute; width: min(70vw, 950px); aspect-ratio: 1; left: 50%; top: 2%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(121, 69, 101, .23) 0%, rgba(122, 65, 99, .08) 37%, transparent 68%); pointer-events: none; }
.connect-top, .connect-main, .social-list, .site-footer { position: relative; max-width: 1460px; margin-left: auto; margin-right: auto; }
.connect-top { display: flex; justify-content: space-between; align-items: center; }
.connect-star { font-size: 35px; color: #e9bb87; animation: star-turn 15s linear infinite; }
.connect-main { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-top: clamp(40px, 5vw, 80px); margin-bottom: clamp(58px, 6vw, 100px); }
.connect-main h2 { margin: 0; }
.connect-main p { max-width: 37ch; margin: 0 0 8px; color: #c9b6b7; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7; }
.social-list { border-top: 1px solid rgba(255, 237, 221, .28); }
.social-list a { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; min-height: clamp(80px, 7vw, 113px); border-bottom: 1px solid rgba(255, 237, 221, .28); text-decoration: none; transition: color .25s ease, padding .35s ease, background .35s ease; }
.social-list a:hover, .social-list a:focus-visible { padding-left: 17px; color: #f4cb9b; background: rgba(239, 192, 147, .045); }
.social-list a > span:nth-child(2) { font-family: var(--sc-font-display); font-size: clamp(32px, 3.7vw, 58px); font-weight: 400; letter-spacing: -.045em; }
.social-index { align-self: center; color: #ad9698; }
.social-arrow { font-size: clamp(24px, 2.5vw, 37px); font-weight: 300; transition: transform .3s ease; }
.social-list a:hover .social-arrow { transform: translate(5px, -5px); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(80px, 9vw, 135px); padding-top: 22px; border-top: 1px solid rgba(255, 237, 221, .14); color: #a99699; font-size: 9px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #f4cb9b; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes star-turn { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .site-header { min-height: 76px; padding: 13px 22px; }
  .brand { width: 132px; }
  .header-nav { padding: 0; gap: 20px; }
  .header-note { display: none; }
  .hero-image { background-position: 57% center; }
  .hero-wash { background: linear-gradient(0deg, rgba(16, 9, 19, .9) 0%, rgba(18, 10, 21, .75) 23%, rgba(18, 10, 21, .18) 65%, rgba(16, 9, 19, .28) 100%); }
  .hero-content { left: 25px; right: 25px; top: auto; bottom: 98px; width: auto; transform: none; }
  .hero h1 { font-size: clamp(58px, 12vw, 96px); }
  .hero-subtitle { margin-top: 20px; }
  .hero-bottom { inset: auto 25px 21px; }
  .hero-bottom span:last-child { display: none; }
  .orbit { left: 61%; top: 9%; width: 85vw; }
  .orbit-two { left: 58%; top: 0; width: 115vw; }
  .world-grid { grid-template-columns: 1fr; gap: 35px; }
  .world-section h2, .connect-section h2 { font-size: clamp(51px, 9vw, 77px); }
  .connect-main { display: block; }
  .connect-main p { margin-top: 25px; }
}

@media (max-width: 520px) {
  .site-header { min-height: 68px; }
  .brand { width: 114px; }
  .header-nav { gap: 15px; }
  .header-nav a { font-size: 9px; letter-spacing: .1em; }
  .hero-image { background-position: 53% center; }
  .hero-wash { background: linear-gradient(0deg, rgba(15, 8, 18, .98) 0%, rgba(17, 9, 20, .74) 34%, rgba(17, 9, 20, .04) 79%, rgba(17, 9, 20, .2) 100%); }
  .hero-content { bottom: 88px; }
  .hero h1 { font-size: clamp(55px, 13.2vw, 76px); }
  .eyebrow { font-size: 9px; letter-spacing: .2em; margin-bottom: 19px; }
  .hero-subtitle { font-size: 15px; }
  .hero-bottom { font-size: 8px; letter-spacing: .1em; }
  .world-section { padding-top: 88px; }
  .world-section h2, .connect-section h2 { margin-top: 25px; font-size: clamp(46px, 11vw, 62px); }
  .world-copy p { font-size: 16px; }
  .connect-section { padding-top: 78px; }
  .connect-main { margin: 43px auto 55px; }
  .social-list a { grid-template-columns: 45px 1fr auto; min-height: 81px; }
  .social-list a > span:nth-child(2) { font-size: 36px; }
  .site-footer { flex-wrap: wrap; line-height: 1.8; }
  .site-footer span:nth-child(2) { order: 3; width: 100%; }
}

@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-image-plane, .hero-image, .orbit, .orbit-two { transform: none !important; }
  [data-sc-cue], [data-sc-in] { opacity: 1 !important; transform: none !important; }
}