.template-hub { background: #11120f; }
.hub-header { position: sticky; top: 0; }
.hub-back { margin-left: auto; margin-right: 15px; color: #92988e; font: 10px var(--mono); text-transform: uppercase; transition: color .3s; }
.hub-back:hover { color: var(--acid); }
.hub-hero { padding-top: 115px; padding-bottom: 78px; }
.hub-hero .eyebrow { margin-bottom: 28px; }
.hub-hero-row { display: flex; justify-content: space-between; gap: 60px; align-items: end; }
.hub-hero h1 { font-size: clamp(64px, 9vw, 128px); margin: 0; }
.hub-hero-row > p { width: 235px; color: #92998e; font-size: 14px; line-height: 1.65; margin: 0 0 7px; }
.hub-filter { border-top: 1px solid var(--line); margin-top: 85px; padding-top: 17px; display: flex; justify-content: space-between; align-items: center; color: #686e64; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.hub-filter > div { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.filter-button { border: 1px solid transparent; color: #7e8579; background: transparent; padding: 8px 10px; font: 10px var(--mono); text-transform: uppercase; cursor: pointer; transition: color .3s, border-color .3s, background .3s; }
.filter-button b { color: #5c6358; font-weight: 400; margin-left: 4px; }
.filter-button:hover, .filter-button.is-active { color: var(--acid); border-color: rgba(216,255,101,.4); background: rgba(216,255,101,.04); }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 65px 18px; padding-bottom: 150px; }
.hub-card { display: block; min-width: 0; }
.hub-card.is-filtered { display: none; }
.hub-card-top { display: flex; justify-content: space-between; color: #6e756b; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 13px; }
.hub-card-top span:last-child { color: #a0a79a; }
.hub-preview { height: 540px; position: relative; overflow: hidden; transition: transform .55s var(--ease); }
.hub-card:hover .hub-preview { transform: translateY(-8px); }
.hub-preview small { position: absolute; left: 24px; bottom: 22px; font: 9px/1.45 var(--mono); letter-spacing: .09em; }
.hub-card-bottom { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding-top: 17px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.hub-card-bottom h2 { font: 500 25px var(--display); letter-spacing: -.07em; margin: 0 0 4px; }
.hub-card-bottom p { color: #7e857a; font-size: 12px; margin: 0; }
.hub-card-bottom > span { color: #858d80; font: 9px var(--mono); text-transform: uppercase; margin-top: 8px; transition: color .3s; }
.hub-card:hover .hub-card-bottom > span { color: var(--acid); }
.hub-preview-luxury { background: #ece9dd; color: #20221e; }
.hub-luxury-arch { position: absolute; width: 53%; height: 84%; right: -4%; bottom: -13%; border-radius: 240px 240px 0 0; border: 1px solid #a89a73; background: linear-gradient(135deg, rgba(180,168,129,.32), rgba(95,92,64,.48)), repeating-linear-gradient(90deg, transparent 0 26px, rgba(32,34,30,.16) 27px 28px); }
.hub-luxury-arch::before { content: ''; position: absolute; inset: 26px 21px 0; border: 1px solid rgba(32,34,30,.4); border-bottom: 0; border-radius: 200px 200px 0 0; }
.hub-luxury-copy { position: absolute; top: 29%; left: 7%; font: 500 clamp(55px, 8vw, 103px)/.79 var(--display); letter-spacing: -.12em; z-index: 1; }
.hub-luxury-copy em { font: 400 clamp(50px, 7vw, 90px)/.88 var(--serif); letter-spacing: -.13em; }
.hub-preview-luxury small { color: #736b53; }
.hub-preview-tech { background: #10191e; color: #b8e9e0; }
.hub-tech-grid { position: absolute; inset: 0; background: linear-gradient(rgba(125,229,214,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(125,229,214,.11) 1px, transparent 1px); background-size: 42px 42px; }
.hub-tech-logo { position: absolute; top: 28px; left: 25px; font: 13px var(--mono); color: #7de5d6; }
.hub-tech-copy { position: absolute; top: 27%; left: 7%; font: 500 clamp(67px, 9vw, 110px)/.78 var(--display); letter-spacing: -.13em; z-index: 1; }
.hub-tech-copy strong { color: #d5fa55; font-weight: 500; }
.hub-tech-orbit { position: absolute; right: 12%; bottom: 17%; color: #d5fa55; font-size: 140px; line-height: 1; opacity: .8; text-shadow: 0 0 35px rgba(213,250,85,.4); animation: orbitPulse 5s ease-in-out infinite; }
.hub-preview-tech small { color: #6eb5aa; }
.hub-preview-creative { background: #f1eddf; color: #ed5b42; }
.hub-creative-copy { position: absolute; left: 7%; top: 15%; font: 500 clamp(70px, 9vw, 117px)/.74 var(--display); letter-spacing: -.15em; z-index: 2; }
.hub-creative-copy i { color: #2b56bb; font: 400 clamp(57px, 8vw, 100px)/.95 var(--serif); }
.hub-creative-sun { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; background: #f5b52f; right: -3%; bottom: -6%; }
.hub-creative-sun::after { content: ''; position: absolute; inset: 24%; border: 1px solid #f1eddf; border-radius: 50%; box-shadow: 0 0 0 18px rgba(241,237,223,.3), 0 0 0 37px rgba(241,237,223,.2); }
.hub-creative-shape { position: absolute; right: 22%; top: 8%; width: 30px; height: 260px; background: #2b56bb; transform: rotate(37deg); }
.hub-creative-sticker { position: absolute; z-index: 3; right: 12%; top: 22%; width: 85px; height: 85px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #2b56bb; color: #f1eddf; transform: rotate(12deg); font: 10px/1.1 var(--mono); }
.hub-preview-creative small { color: #e75940; }
.hub-preview-business { background: #dbe6f2; color: #1a344d; }
.hub-business-logo { position: absolute; left: 7%; top: 28px; font: 500 14px var(--display); }
.hub-business-logo span { color: #67829a; font: 9px var(--mono); }
.hub-business-copy { position: absolute; left: 7%; top: 27%; font: 500 clamp(58px, 8vw, 100px)/.77 var(--display); letter-spacing: -.13em; z-index: 1; }
.hub-business-copy em { font: 400 clamp(50px, 7vw, 90px)/.9 var(--serif); letter-spacing: -.13em; }
.hub-business-panel { position: absolute; right: 8%; bottom: 20%; width: 190px; padding: 18px; background: #1a344d; color: #e5eef7; box-shadow: 15px 15px 0 rgba(122,167,201,.35); display: grid; gap: 6px; }
.hub-business-panel span, .hub-business-panel i { color: #a8c4da; font: 9px var(--mono); text-transform: uppercase; font-style: normal; }
.hub-business-panel strong { font: 31px var(--display); letter-spacing: -.08em; } .hub-business-panel div { height: 38px; margin-top: 7px; background: linear-gradient(155deg, transparent 0 22%, #9ed0ea 23% 24%, transparent 25% 39%, #9ed0ea 40% 41%, transparent 42% 53%, #9ed0ea 54% 55%, transparent 56% 68%, #9ed0ea 69% 70%, transparent 71%); }
.hub-preview-business small { color: #607990; }
.hub-preview-ecommerce { background: #d5dfb7; color: #273529; }
.hub-shop-logo { position: absolute; left: 7%; top: 28px; font: 500 14px var(--display); letter-spacing: -.04em; }
.hub-shop-logo span { display: block; color: #6c846d; font: 9px var(--mono); letter-spacing: .08em; }
.hub-shop-copy { position: absolute; left: 7%; top: 28%; font: 500 clamp(66px, 9vw, 114px)/.75 var(--display); letter-spacing: -.14em; z-index: 2; }
.hub-shop-copy em { font: 400 clamp(57px, 8vw, 102px)/.92 var(--serif); letter-spacing: -.13em; }
.hub-shop-product { position: absolute; right: 7%; bottom: -9%; width: 46%; height: 71%; border-radius: 180px 180px 25px 25px; background: #e85e3e; transform: rotate(-11deg); box-shadow: inset 28px 0 rgba(124,64,48,.17), 22px 25px 34px rgba(57,66,46,.14); }
.hub-shop-product::before { content: ''; position: absolute; width: 54%; height: 39%; top: -28%; left: 21%; border: 1px solid #273529; border-bottom: 0; border-radius: 100px 100px 0 0; }
.hub-shop-price { position: absolute; left: 7%; bottom: 23px; font: 10px var(--mono); line-height: 1.4; } .hub-shop-price b { font: 23px var(--display); }
.hub-preview-ecommerce small { color: #67806b; }
.hub-cta { border-top: 1px solid var(--line); padding-top: 78px; padding-bottom: 145px; display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.hub-cta h2 { font-size: clamp(52px, 6vw, 80px); }
.hub-footer { border-top: 1px solid var(--line); color: #656c61; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.hub-footer .container { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.hub-footer a { color: #9ca599; transition: color .3s; } .hub-footer a:hover { color: var(--acid); }

/* Independent template demos */
.demo-page { --demo-ink: #1c1d19; --demo-paper: #f2efe5; background: var(--demo-paper); color: var(--demo-ink); }
.demo-page .site-header { position: absolute; top: 0; left: 0; right: 0; color: inherit; border-bottom: 1px solid transparent; }
.demo-page .site-nav { min-height: 90px; }
.demo-page .demo-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.demo-page .demo-nav a { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: inherit; opacity: .7; transition: opacity .3s; }
.demo-page .demo-nav a:hover { opacity: 1; }
.demo-page .demo-menu { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 0; background: transparent; cursor: pointer; color: inherit; }
.demo-main { overflow: hidden; }
.demo-hero { min-height: 850px; padding-top: 170px; position: relative; }
.demo-eyebrow { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; opacity: .58; }
.demo-button { display: inline-flex; align-items: center; gap: 30px; min-height: 52px; padding: 0 18px; border: 1px solid currentColor; font: 10px var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }
.demo-button:hover { background: var(--demo-ink); color: var(--demo-paper); transform: translateY(-3px); }
.demo-section { padding: 140px 0; }
.demo-section-title { font: 500 clamp(48px, 6vw, 85px)/.9 var(--display); letter-spacing: -.11em; margin: 0; }
.demo-section-title em { font: 400 .9em var(--serif); letter-spacing: -.12em; }
.demo-footer { padding: 28px 0; border-top: 1px solid currentColor; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; opacity: .7; }

/* Luxury */
.luxury-page { --demo-ink: #20221d; --demo-paper: #ece9dd; --gold: #a99563; }
.luxury-page .demo-logo { font: 500 17px var(--serif); letter-spacing: .1em; }
.luxury-page .demo-logo span { display: block; font: 8px var(--mono); letter-spacing: .16em; color: var(--gold); text-align: center; margin-top: 3px; }
.luxury-hero { min-height: 900px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.luxury-hero-copy { position: relative; z-index: 2; }
.luxury-hero h1 { font: 500 clamp(73px, 10vw, 145px)/.78 var(--display); letter-spacing: -.13em; margin: 25px 0 30px; }
.luxury-hero h1 em { display: block; font: 400 .84em var(--serif); letter-spacing: -.14em; }
.luxury-hero p { max-width: 270px; font: 14px/1.6 var(--serif); color: #767463; margin-bottom: 35px; }
.luxury-stage { height: 610px; position: relative; }
.luxury-frame { position: absolute; inset: 0 10% 0 5%; border: 1px solid #aa9b73; border-radius: 280px 280px 0 0; background: linear-gradient(140deg, rgba(165,148,102,.38), rgba(78,74,50,.5)), repeating-linear-gradient(90deg, transparent 0 28px, rgba(37,37,29,.13) 29px 30px); box-shadow: 18px 18px 0 rgba(169,149,99,.15); }
.luxury-frame::before { content: ''; position: absolute; inset: 29px 23px 0; border: 1px solid rgba(32,34,29,.45); border-bottom: 0; border-radius: 250px 250px 0 0; }
.luxury-frame::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: #ece9dd; top: 22%; left: 31%; box-shadow: 0 0 0 32px rgba(236,233,221,.14), 0 0 0 66px rgba(236,233,221,.1); }
.luxury-stage-label { position: absolute; right: 0; bottom: 10%; writing-mode: vertical-rl; font: 9px var(--mono); color: #827d69; letter-spacing: .1em; text-transform: uppercase; }
.luxury-scroll { position: absolute; left: 5%; bottom: 12%; display: flex; align-items: center; gap: 12px; font: 9px var(--mono); text-transform: uppercase; color: #817c69; } .luxury-scroll i { width: 50px; height: 1px; background: var(--gold); }
.luxury-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; border-top: 1px solid rgba(32,34,29,.25); }
.luxury-intro p { max-width: 430px; font: 28px/1.18 var(--serif); letter-spacing: -.03em; margin: 0; }
.luxury-intro small { font: 9px var(--mono); color: #827d69; text-transform: uppercase; }
.luxury-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 76px; }
.luxury-room { min-height: 300px; padding: 18px; position: relative; display: flex; align-items: end; overflow: hidden; color: #f3f0e6; }
.luxury-room::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(50,54,39,.25), rgba(22,22,18,.8)), repeating-linear-gradient(90deg, transparent 0 28px, rgba(234,228,202,.11) 29px 30px); transition: transform .7s var(--ease); }
.luxury-room:hover::before { transform: scale(1.1); }
.luxury-room:nth-child(1) { background: #777d61; } .luxury-room:nth-child(2) { background: #9b8b67; } .luxury-room:nth-child(3) { background: #555d58; }
.luxury-room > * { position: relative; z-index: 1; } .luxury-room strong { font: 21px var(--serif); } .luxury-room span { margin-left: auto; font: 9px var(--mono); color: #d6d2bd; }
.luxury-quote { background: #20221d; color: #ece9dd; text-align: center; padding: 135px 10%; } .luxury-quote p { max-width: 850px; margin: 0 auto 30px; font: 400 clamp(35px, 5vw, 67px)/.98 var(--serif); letter-spacing: -.06em; } .luxury-quote small { color: var(--gold); font: 9px var(--mono); text-transform: uppercase; }
.luxury-cta { text-align: center; } .luxury-cta p { font: 18px var(--serif); color: #767463; margin: 20px auto 30px; }

/* Tech */
.tech-page { --demo-ink: #e6f1ea; --demo-paper: #091116; --neon: #aefc54; --cyan: #79e4d3; background: var(--demo-paper); color: var(--demo-ink); }
.tech-page .site-header { color: var(--demo-ink); } .tech-page .demo-logo { font: 15px var(--mono); color: var(--cyan); } .tech-page .demo-logo b { color: var(--neon); font-weight: 400; }
.tech-page .demo-nav a, .tech-page .demo-menu { color: var(--demo-ink); } .tech-page .demo-button:hover { background: var(--neon); color: #08110c; }
.tech-hero { min-height: 900px; padding-top: 180px; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.tech-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(121,228,211,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(121,228,211,.07) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.tech-kicker { color: var(--cyan); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tech-hero h1 { position: relative; font: 500 clamp(72px, 10vw, 144px)/.77 var(--display); letter-spacing: -.14em; margin: 25px 0 34px; }
.tech-hero h1 span { color: var(--neon); } .tech-hero h1 em { font: 400 .8em var(--serif); letter-spacing: -.14em; }
.tech-hero p { max-width: 310px; color: #8ba79c; font-size: 14px; line-height: 1.65; margin-bottom: 36px; }
.tech-signal { height: 535px; position: relative; display: grid; place-items: center; }
.signal-orb { width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(121,228,211,.5); box-shadow: 0 0 0 35px rgba(121,228,211,.05), 0 0 0 70px rgba(121,228,211,.04), inset 0 0 55px rgba(121,228,211,.11); position: relative; animation: signalFloat 7s ease-in-out infinite; }
.signal-orb::before, .signal-orb::after { content: ''; position: absolute; inset: 27%; border-radius: 50%; border: 1px dashed var(--neon); transform: rotate(28deg); } .signal-orb::after { inset: 42%; border-style: solid; border-color: var(--cyan); }
.signal-core { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 35px rgba(174,252,84,.8); }
.signal-label { position: absolute; font: 9px var(--mono); color: #729e93; text-transform: uppercase; } .signal-label-one { top: 13%; left: 0; } .signal-label-two { bottom: 17%; right: 0; color: var(--neon); }
.tech-bar { border-top: 1px solid rgba(121,228,211,.2); border-bottom: 1px solid rgba(121,228,211,.2); display: flex; justify-content: space-between; padding: 18px 0; font: 9px var(--mono); color: #6c9186; text-transform: uppercase; }
.tech-bar b { color: var(--neon); font-weight: 400; } .tech-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: 14%; } .tech-story p { max-width: 530px; font: 29px/1.17 var(--display); letter-spacing: -.06em; margin: 0; } .tech-story p em { color: var(--neon); font: 400 1em var(--serif); }
.tech-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 82px; } .tech-metric { min-height: 180px; border: 1px solid rgba(121,228,211,.2); padding: 18px; position: relative; } .tech-metric small { color: #719b8f; font: 9px var(--mono); } .tech-metric strong { display: block; margin-top: 45px; color: var(--neon); font: 500 40px var(--display); letter-spacing: -.1em; } .tech-metric span { display: block; color: #78938b; font: 9px var(--mono); margin-top: 3px; }
.tech-interface { padding: 0; } .tech-interface-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 35px; } .tech-interface small { color: #70958a; font: 9px var(--mono); } .tech-panel { min-height: 430px; border: 1px solid rgba(121,228,211,.25); background: #0d1a1d; padding: 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; } .tech-terminal { border: 1px solid rgba(121,228,211,.19); padding: 18px; font: 10px/1.9 var(--mono); color: #6caa9a; } .tech-terminal strong { color: var(--neon); font-weight: 400; } .terminal-chart { height: 170px; margin-top: 26px; background: linear-gradient(160deg, transparent 0 33%, #79e4d3 34% 34.6%, transparent 35% 47%, #aefc54 48% 48.6%, transparent 49% 60%, #79e4d3 61% 61.6%, transparent 62% 75%, #aefc54 76% 76.6%, transparent 77%); opacity: .7; } .tech-feed { border-left: 1px solid rgba(121,228,211,.19); padding-left: 18px; } .feed-item { border-bottom: 1px solid rgba(121,228,211,.16); padding: 15px 0; display: flex; justify-content: space-between; gap: 12px; font: 10px var(--mono); color: #799a91; } .feed-item b { color: var(--neon); font-weight: 400; } .tech-cta { background: var(--neon); color: #091116; text-align: center; } .tech-cta p { font: 400 clamp(38px, 5vw, 66px)/.95 var(--display); letter-spacing: -.1em; margin: 0 auto 36px; } .tech-cta .demo-button { border-color: #091116; } .tech-cta .demo-button:hover { background: #091116; color: var(--neon); }
@keyframes signalFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(8deg); } }

/* Creative */
.creative-page { --demo-ink: #ef5d40; --demo-paper: #f1ecdf; --blue: #2c58b7; --yellow: #f6b735; background: var(--demo-paper); color: var(--demo-ink); }
.creative-page .demo-logo { font: 600 17px var(--display); letter-spacing: -.08em; } .creative-page .demo-logo span { color: var(--blue); } .creative-page .demo-nav a, .creative-page .demo-menu { color: var(--demo-ink); }
.creative-hero { min-height: 900px; padding-top: 140px; position: relative; } .creative-hero::before { content: '✦'; position: absolute; right: 4%; top: 16%; color: var(--blue); font-size: 42px; animation: creativeSpin 10s linear infinite; }
.creative-hero h1 { position: relative; z-index: 2; font: 500 clamp(105px, 18vw, 245px)/.69 var(--display); letter-spacing: -.17em; color: var(--demo-ink); margin: 45px 0 0; }
.creative-hero h1 span { display: block; color: var(--blue); font: 400 .82em var(--serif); letter-spacing: -.16em; margin-left: 11%; } .creative-hero h1 i { color: var(--demo-ink); font-style: normal; } .creative-hero p { position: absolute; bottom: 19%; left: 1%; max-width: 180px; color: #5d6a9d; font: 15px/1.25 var(--serif); }
.creative-disc { position: absolute; width: 350px; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); right: 9%; top: 28%; } .creative-disc::before { content: ''; position: absolute; inset: 22%; border: 1px solid var(--demo-paper); border-radius: 50%; box-shadow: 0 0 0 28px rgba(241,236,223,.35), 0 0 0 58px rgba(241,236,223,.23); } .creative-tape { position: absolute; right: 24%; top: 21%; width: 26px; height: 420px; background: var(--blue); transform: rotate(36deg); }
.creative-sticker { position: absolute; right: 11%; bottom: 19%; z-index: 3; width: 105px; height: 105px; display: grid; place-content: center; text-align: center; background: var(--blue); color: var(--demo-paper); border-radius: 50%; transform: rotate(13deg); font: 11px/1.1 var(--mono); }
.creative-marquee { overflow: hidden; border-top: 1px solid rgba(44,88,183,.4); border-bottom: 1px solid rgba(44,88,183,.4); color: var(--blue); } .creative-marquee div { width: max-content; display: flex; gap: 27px; align-items: center; padding: 15px 0; animation: ticker 26s linear infinite; font: 11px var(--mono); text-transform: uppercase; } .creative-marquee i { color: var(--demo-ink); font-style: normal; }
.creative-about { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12%; } .creative-about p { max-width: 540px; font: 36px/.99 var(--display); letter-spacing: -.1em; margin: 0; } .creative-about p i { color: var(--blue); font: 400 1em var(--serif); }
.creative-works { display: grid; grid-template-columns: .8fr 1.2fr; gap: 15px; align-items: start; } .creative-works-title { padding-bottom: 22px; } .creative-work-list { display: grid; gap: 12px; } .creative-work { min-height: 150px; padding: 17px; display: flex; align-items: end; justify-content: space-between; transition: transform .4s var(--ease); } .creative-work:hover { transform: translateX(8px); } .creative-work h3 { font: 500 30px var(--display); letter-spacing: -.1em; margin: 0; } .creative-work span { font: 9px var(--mono); } .creative-work:nth-child(1) { background: var(--demo-ink); color: var(--demo-paper); } .creative-work:nth-child(2) { background: var(--yellow); color: var(--blue); } .creative-work:nth-child(3) { background: var(--blue); color: var(--demo-paper); } .creative-work:nth-child(4) { background: #d8d7cd; color: var(--demo-ink); }
.creative-note { text-align: center; background: var(--demo-ink); color: var(--demo-paper); } .creative-note p { font: 400 clamp(50px, 8vw, 112px)/.8 var(--serif); letter-spacing: -.12em; margin: 0; } .creative-note span { display: block; color: var(--yellow); font: 9px var(--mono); text-transform: uppercase; margin-top: 28px; }
@keyframes creativeSpin { to { transform: rotate(360deg); } }

/* Business */
.business-page { --demo-ink: #17344d; --demo-paper: #edf2f5; --blue: #2f6e9d; --pale-blue: #d8e7f0; background: var(--demo-paper); color: var(--demo-ink); }
.business-page .demo-logo { font: 600 17px var(--display); letter-spacing: -.05em; } .business-page .demo-logo span { color: #7892a8; font: 8px var(--mono); letter-spacing: .08em; } .business-page .demo-nav a, .business-page .demo-menu { color: var(--demo-ink); } .business-page .demo-button { border-color: var(--demo-ink); } .business-page .demo-button:hover { background: var(--demo-ink); color: var(--demo-paper); }
.business-hero { min-height: 835px; padding-top: 175px; position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 11%; } .business-hero h1 { font: 500 clamp(65px, 8vw, 116px)/.77 var(--display); letter-spacing: -.14em; margin: 25px 0 31px; } .business-hero h1 em { display: block; font: 400 .8em var(--serif); letter-spacing: -.13em; } .business-hero p { max-width: 280px; color: #71889a; font-size: 14px; line-height: 1.65; margin-bottom: 35px; }
.business-dashboard { height: 440px; background: var(--pale-blue); padding: 22px; box-shadow: 22px 22px 0 #bdd2e0; position: relative; } .dashboard-head { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(23,52,77,.2); padding-bottom: 14px; font: 9px var(--mono); color: #658196; text-transform: uppercase; } .dashboard-head b { color: var(--blue); font-weight: 400; } .dashboard-main { padding: 33px 0; display: grid; grid-template-columns: 1fr .8fr; gap: 18px; } .dashboard-main small { color: #7890a1; font: 9px var(--mono); } .dashboard-main strong { display: block; font: 500 57px var(--display); letter-spacing: -.12em; margin: 13px 0 10px; } .dashboard-main i { color: #4f8f72; font: 10px var(--mono); font-style: normal; } .dashboard-chart { height: 160px; border-bottom: 1px solid rgba(23,52,77,.3); background: linear-gradient(160deg, transparent 0 23%, #2f6e9d 24% 25%, transparent 26% 41%, #86b5cf 42% 43%, transparent 44% 60%, #2f6e9d 61% 62%, transparent 63% 74%, #86b5cf 75% 76%, transparent 77%); } .dashboard-side { border-left: 1px solid rgba(23,52,77,.2); padding-left: 18px; } .dashboard-side span { color: #7890a1; font: 9px var(--mono); } .dashboard-side ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; } .dashboard-side li { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(23,52,77,.13); padding-bottom: 8px; font: 11px var(--sans); } .dashboard-side li b { font: 10px var(--mono); font-weight: 400; color: #4f8f72; }
.business-position { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; border-top: 1px solid rgba(23,52,77,.2); } .business-position p { max-width: 500px; font: 30px/1.12 var(--display); letter-spacing: -.08em; margin: 0; } .business-position p em { font: 400 1em var(--serif); } .business-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 80px; } .business-service { border-top: 2px solid var(--blue); padding-top: 13px; min-height: 160px; } .business-service span { color: #7890a1; font: 9px var(--mono); } .business-service h3 { font: 500 21px var(--display); letter-spacing: -.06em; margin: 35px 0 0; }
.business-insights { background: var(--demo-ink); color: var(--demo-paper); } .business-insights .demo-section-title { color: var(--demo-paper); } .insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 65px; } .insight-card { border-top: 1px solid rgba(237,242,245,.3); padding-top: 15px; } .insight-card small { color: #97b4c8; font: 9px var(--mono); } .insight-card h3 { font: 500 26px/1 var(--display); letter-spacing: -.08em; margin: 50px 0 18px; } .insight-card a { color: #9dc5df; font: 9px var(--mono); text-transform: uppercase; }
.business-cta { text-align: center; } .business-cta p { max-width: 480px; margin: 24px auto 32px; color: #71889a; font: 18px var(--serif); }

/* Ecommerce */
.ecommerce-page { --demo-ink: #29352b; --demo-paper: #f4f0e6; --orange: #ec6848; --green: #b4ca91; background: var(--demo-paper); color: var(--demo-ink); }
.ecommerce-page .demo-logo { font: 600 17px var(--display); letter-spacing: -.05em; } .ecommerce-page .demo-logo span { display: block; color: #7f946d; font: 8px var(--mono); letter-spacing: .1em; } .ecommerce-page .demo-nav a, .ecommerce-page .demo-menu { color: var(--demo-ink); } .ecommerce-page .demo-button { border-color: var(--demo-ink); } .ecommerce-page .demo-button:hover { background: var(--demo-ink); color: var(--demo-paper); }
.shop-hero { min-height: 850px; padding-top: 165px; position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 10%; } .shop-hero h1 { font: 500 clamp(77px, 10vw, 140px)/.73 var(--display); letter-spacing: -.16em; margin: 25px 0 32px; } .shop-hero h1 em { display: block; font: 400 .82em var(--serif); letter-spacing: -.15em; } .shop-hero p { max-width: 270px; color: #7a8875; font-size: 14px; line-height: 1.6; margin-bottom: 34px; }
.shop-stage { height: 500px; background: var(--green); position: relative; overflow: hidden; } .shop-stage::before { content: 'SS / 24'; position: absolute; left: 25px; top: 24px; font: 9px var(--mono); color: #6d805f; } .shop-stage::after { content: 'MORROW / 001'; position: absolute; right: 25px; bottom: 24px; font: 9px var(--mono); color: #6d805f; } .shop-product { position: absolute; width: 43%; height: 67%; left: 29%; bottom: -6%; background: var(--orange); border-radius: 190px 190px 28px 28px; transform: rotate(-12deg); box-shadow: inset 30px 0 rgba(130,70,56,.14), 27px 25px 35px rgba(63,78,50,.18); } .shop-product::before { content: ''; position: absolute; width: 56%; height: 40%; left: 22%; top: -28%; border: 1px solid var(--demo-ink); border-bottom: 0; border-radius: 100px 100px 0 0; } .shop-product::after { content: 'morrow'; position: absolute; left: 18%; top: 44%; color: #f9d3c4; font: 17px var(--serif); transform: rotate(90deg); }
.shop-strip { background: var(--demo-ink); color: var(--demo-paper); display: flex; justify-content: space-between; padding: 17px 0; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .shop-strip span:last-child { color: var(--green); }
.shop-about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 13%; } .shop-about p { font: 34px/1 var(--display); letter-spacing: -.1em; margin: 0; max-width: 520px; } .shop-about p em { font: 400 1em var(--serif); } .shop-about small { color: #819178; font: 9px var(--mono); text-transform: uppercase; }
.shop-products { background: #e8e4d8; } .shop-products-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 58px; } .shop-products-head a { color: #718369; font: 9px var(--mono); text-transform: uppercase; border-bottom: 1px solid #9caf8a; padding-bottom: 6px; } .product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .product-card { min-height: 450px; position: relative; padding: 17px; display: flex; align-items: end; color: var(--demo-ink); overflow: hidden; } .product-card:nth-child(1) { background: #cbd5ab; } .product-card:nth-child(2) { background: #eab29a; } .product-card:nth-child(3) { background: #b4c8ca; } .product-figure { position: absolute; width: 54%; height: 63%; top: 16%; left: 23%; background: var(--orange); border-radius: 120px 120px 20px 20px; box-shadow: inset 20px 0 rgba(124,64,48,.16), 17px 20px 30px rgba(43,53,37,.12); transition: transform .5s var(--ease); } .product-card:hover .product-figure { transform: rotate(5deg) translateY(-9px); } .product-card:nth-child(2) .product-figure { background: #5f7372; border-radius: 50%; } .product-card:nth-child(3) .product-figure { background: #f1d4ac; width: 42%; left: 29%; transform: rotate(-20deg); } .product-card:hover:nth-child(3) .product-figure { transform: rotate(-14deg) translateY(-9px); } .product-card figcaption { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 100%; font: 12px var(--display); } .product-card figcaption span { color: #62735f; font: 9px var(--mono); }
.shop-editorial { display: grid; grid-template-columns: 1fr 1fr; min-height: 490px; } .shop-editorial-visual { background: #c6d1a5; position: relative; overflow: hidden; } .shop-editorial-visual::before { content: ''; position: absolute; width: 360px; height: 520px; right: 5%; bottom: -17%; background: #e86a49; border-radius: 190px 190px 0 0; transform: rotate(13deg); } .shop-editorial-copy { padding: 70px 10%; display: flex; flex-direction: column; justify-content: center; } .shop-editorial-copy p { font: 37px/.98 var(--display); letter-spacing: -.1em; margin: 20px 0 30px; } .shop-editorial-copy p em { font: 400 1em var(--serif); } .shop-editorial-copy small { color: #78906f; font: 9px var(--mono); text-transform: uppercase; }
.shop-cta { background: var(--orange); color: #f8e7dd; text-align: center; } .shop-cta p { font: 400 clamp(44px, 7vw, 98px)/.82 var(--display); letter-spacing: -.13em; margin: 0 auto 33px; } .shop-cta .demo-button { border-color: #f8e7dd; } .shop-cta .demo-button:hover { background: #f8e7dd; color: var(--orange); }
.shop-toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; background: var(--demo-ink); color: var(--demo-paper); padding: 13px 16px; font: 10px var(--mono); transform: translateY(120px); transition: transform .45s var(--ease); } .shop-toast.is-visible { transform: translateY(0); }

@media (max-width: 800px) { .hub-hero { padding-top: 90px; } .hub-hero-row { display: block; } .hub-hero-row > p { margin-top: 30px; } .hub-filter { display: block; } .hub-filter > div { justify-content: start; margin-top: 15px; } .hub-grid { display: block; padding-bottom: 95px; } .hub-card { margin-bottom: 55px; } .hub-preview { height: 480px; } .hub-cta { display: block; padding-bottom: 90px; } .hub-cta .button { margin-top: 35px; } .hub-footer .container { flex-wrap: wrap; } .demo-nav { display: none !important; } .demo-page .site-nav { min-height: 74px; } .demo-page .demo-menu { display: block; margin-left: auto; } .demo-hero, .luxury-hero, .tech-hero, .business-hero, .shop-hero { display: block; min-height: auto; padding-top: 145px; padding-bottom: 100px; } .luxury-stage, .tech-signal { margin-top: 70px; height: 500px; } .luxury-frame { inset: 0 10% 0 0; } .tech-hero h1, .business-hero h1, .shop-hero h1 { font-size: clamp(70px, 17vw, 114px); } .luxury-intro, .tech-story, .creative-about, .business-position, .shop-about { display: block; } .luxury-intro p, .tech-story p, .creative-about p, .business-position p, .shop-about p { margin-top: 32px; } .luxury-rooms, .tech-metrics, .business-services, .insight-grid, .product-grid { grid-template-columns: 1fr; } .luxury-room { min-height: 250px; } .tech-panel { grid-template-columns: 1fr; } .tech-feed { border-left: 0; border-top: 1px solid rgba(121,228,211,.19); padding: 18px 0 0; } .creative-hero h1 { font-size: clamp(93px, 24vw, 170px); } .creative-disc { width: 250px; right: 0; top: 40%; } .creative-tape { right: 25%; top: 27%; height: 300px; } .creative-hero p { position: relative; bottom: auto; left: auto; margin-top: 80px; } .creative-works { display: block; } .creative-work-list { margin-top: 50px; } .business-dashboard { margin-top: 60px; height: 420px; } .dashboard-main { grid-template-columns: 1fr; } .dashboard-side { display: none; } .shop-stage { margin-top: 60px; } .shop-editorial { display: block; } .shop-editorial-visual { min-height: 370px; } .shop-editorial-copy { min-height: 330px; padding: 50px 9%; } .demo-section { padding: 95px 0; } .demo-footer { display: grid; gap: 12px; } }
@media (max-width: 520px) { .hub-preview { height: 380px; } .hub-luxury-copy, .hub-tech-copy, .hub-business-copy, .hub-shop-copy { font-size: 54px; } .hub-luxury-copy em, .hub-business-copy em, .hub-shop-copy em { font-size: 47px; } .hub-tech-orbit { font-size: 90px; } .hub-business-panel { width: 150px; } .hub-shop-product { width: 47%; } .luxury-stage, .tech-signal { height: 390px; } .signal-orb { width: 250px; height: 250px; } .luxury-hero h1 { font-size: 74px; } .luxury-frame { inset: 0 2% 0 0; } .business-dashboard { padding: 16px; } .shop-hero h1 { font-size: 78px; } .product-card { min-height: 350px; } }
.product-card figcaption button { display: block; border: 0; background: none; padding: 6px 0 0; color: var(--demo-ink); cursor: pointer; font: 9px var(--mono); text-transform: uppercase; text-align: left; opacity: .7; transition: color .3s, opacity .3s; }
.product-card figcaption button:hover { color: var(--orange); opacity: 1; }
@media (max-width: 800px) { .demo-page.demo-menu-open .demo-nav { display: grid !important; position: absolute; top: 74px; left: 18px; right: 18px; gap: 0; padding: 10px 14px; background: var(--demo-paper); border: 1px solid currentColor; z-index: 5; } .demo-page.demo-menu-open .demo-nav a { padding: 13px 0; border-bottom: 1px solid currentColor; opacity: .75; } .demo-page.demo-menu-open .demo-nav a:last-child { border-bottom: 0; } }

/* Six distinct demo directions */
.hub-preview-cafe { background: #f2d8b8; color: #2e201b; }
.hub-cafe-copy { position: absolute; left: 7%; top: 19%; font: 700 clamp(46px, 7vw, 90px)/.77 "Fraunces", var(--serif); letter-spacing: -.1em; z-index: 2; }
.hub-cafe-copy em { color: #d9583f; font-style: italic; font-weight: 400; }
.hub-cafe-cup { position: absolute; right: 8%; bottom: 11%; width: 42%; height: 44%; border-radius: 28px 28px 45% 45%; background: #d9583f; box-shadow: inset 18px -12px rgba(79,42,31,.15), 12px 18px 0 rgba(103,61,45,.13); transform: rotate(-8deg); }
.hub-cafe-cup::before { content: ''; position: absolute; top: -13%; left: 14%; width: 72%; height: 20%; border-radius: 50%; background: #321f1a; border: 10px solid #f2d8b8; box-shadow: inset 0 0 0 2px #a54335; }
.hub-cafe-cup::after { content: ''; position: absolute; right: -24%; top: 16%; width: 35%; height: 45%; border: 14px solid #d9583f; border-left: 0; border-radius: 0 50% 50% 0; }
.hub-cafe-steam { position: absolute; right: 29%; top: 25%; width: 13px; height: 150px; border-left: 2px solid rgba(255,255,255,.75); border-radius: 50%; transform: rotate(11deg); animation: hubSteam 3.4s ease-in-out infinite; }
.hub-preview-cafe small { color: #9d4c39; }
.hub-preview-inn { background: #d9e3dd; color: #254338; }
.hub-inn-mountain { position: absolute; inset: 28% -7% -5% 0; background: #547b70; clip-path: polygon(0 68%, 22% 32%, 37% 55%, 58% 8%, 76% 49%, 100% 22%, 100% 100%, 0 100%); }
.hub-inn-mountain::after { content: ''; position: absolute; inset: 17% 0 0; background: #375b53; opacity: .8; clip-path: polygon(0 58%, 30% 24%, 50% 60%, 67% 35%, 100% 66%, 100% 100%, 0 100%); }
.hub-inn-sun { position: absolute; top: 18%; right: 14%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #e8a968; box-shadow: 0 0 0 23px rgba(232,169,104,.15), 0 0 0 46px rgba(232,169,104,.1); animation: innSun 7s ease-in-out infinite; }
.hub-inn-copy { position: absolute; top: 12%; left: 7%; font: 600 clamp(45px, 6.5vw, 83px)/.75 "Playfair Display", var(--serif); letter-spacing: -.1em; z-index: 2; }
.hub-inn-copy em { color: #b55c3e; font-weight: 400; }
.hub-preview-inn small { color: #52766a; }
.hub-preview-restaurant { background: #381613; color: #f7e7d0; }
.hub-restaurant-plate { position: absolute; right: 9%; bottom: 10%; width: 51%; aspect-ratio: 1; border-radius: 50%; background: #f3deba; box-shadow: 0 0 0 16px #d95734, 0 0 0 30px #f3deba; animation: plateTurn 11s linear infinite; }
.hub-restaurant-plate::before { content: ''; position: absolute; inset: 19%; border-radius: 50%; background: radial-gradient(circle at 37% 28%, #e44b2f 0 9%, transparent 10%), radial-gradient(circle at 62% 59%, #809652 0 10%, transparent 11%), #d6a54f; }
.hub-restaurant-copy { position: absolute; left: 7%; top: 18%; font: 500 clamp(45px, 6.5vw, 84px)/.78 "Italiana", var(--serif); letter-spacing: -.08em; z-index: 2; }
.hub-restaurant-copy em { color: #e35b3a; font-style: normal; }
.hub-restaurant-stamp { position: absolute; top: 11%; right: 10%; border: 1px solid #e8b66d; border-radius: 50%; width: 71px; height: 71px; display: grid; place-content: center; text-align: center; color: #e8b66d; font: 8px/1.1 var(--mono); transform: rotate(12deg); }
.hub-preview-restaurant small { color: #d79560; }
.hub-preview-shop-v2 { background: #cbd9a8; color: #203329; }
.hub-shop-v2-copy { position: absolute; left: 7%; top: 19%; font: 800 clamp(53px, 8vw, 102px)/.76 "Syne", var(--display); letter-spacing: -.14em; z-index: 2; }
.hub-shop-v2-copy em { color: #e36543; font-weight: 500; }
.hub-shop-v2-product { position: absolute; right: 12%; bottom: -12%; width: 41%; height: 70%; background: #edf0df; border: 1px solid #3c5945; border-radius: 50% 50% 12px 12px; transform: rotate(8deg); box-shadow: 13px 13px 0 rgba(55,87,65,.2); }
.hub-shop-v2-product::before { content: ''; position: absolute; top: -18%; left: 17%; width: 66%; height: 24%; border: 2px solid #3c5945; border-bottom: 0; border-radius: 50% 50% 0 0; }
.hub-preview-shop-v2 small { color: #53775c; }
.hub-preview-signal { background: #071323; color: #e1f1ff; }
.hub-signal-grid { position: absolute; inset: 0; background: linear-gradient(rgba(96,210,206,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(96,210,206,.12) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent); }
.hub-signal-radar { position: absolute; right: 11%; bottom: 10%; width: 46%; aspect-ratio: 1; border: 1px solid rgba(141,243,213,.55); border-radius: 50%; box-shadow: 0 0 0 22px rgba(141,243,213,.08), 0 0 0 45px rgba(141,243,213,.05); animation: radarPulse 4s ease-in-out infinite; }
.hub-signal-radar::after { content: ''; position: absolute; left: 50%; top: 50%; height: 50%; border-left: 1px solid #c5fc65; transform-origin: top; animation: radarSweep 4s linear infinite; }
.hub-signal-copy { position: absolute; left: 7%; top: 19%; font: 600 clamp(45px, 6.8vw, 88px)/.76 "Space Grotesk", var(--display); letter-spacing: -.13em; z-index: 2; }
.hub-signal-copy em { color: #c5fc65; font-style: normal; }
.hub-preview-signal small { color: #72aaa8; }
.hub-preview-finance { background: #e8e2d5; color: #122319; }
.hub-finance-lines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 34px, rgba(31,114,86,.09) 35px 36px); }
.hub-finance-copy { position: absolute; left: 7%; top: 18%; font: 700 clamp(44px, 6.3vw, 80px)/.78 "Manrope", var(--display); letter-spacing: -.13em; z-index: 2; }
.hub-finance-copy em { color: #1f8061; font-weight: 500; font-style: normal; }
.hub-finance-stat { position: absolute; right: 9%; bottom: 17%; padding: 17px; background: #1d6d52; color: #eef2de; font: 700 25px "Manrope", var(--display); box-shadow: 10px 10px 0 rgba(35,111,83,.18); }
.hub-finance-stat small { display: block; color: #b9d4c1; font: 8px var(--mono); margin-top: 6px; }
.hub-preview-finance small { color: #5e796d; }

.cafe-page { --demo-ink: #2e201b; --demo-paper: #f2e3cc; --cafe-red: #d9583f; --cafe-gold: #f0b65f; background: var(--demo-paper); color: var(--demo-ink); font-family: "DM Sans", var(--sans); }
.cafe-page .site-header { color: var(--demo-ink); }
.cafe-page .demo-nav a, .cafe-page .demo-menu { color: var(--demo-ink); }
.cafe-brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; font: 600 18px/1 "DM Sans", var(--sans); letter-spacing: -.08em; }
.cafe-brand span:last-child { color: var(--cafe-red); font: 400 17px "Fraunces", var(--serif); letter-spacing: -.08em; }
.cafe-brand-dot { width: 9px; height: 9px; background: var(--cafe-red); border-radius: 50%; box-shadow: 0 0 0 5px rgba(217,88,63,.16); }
.cafe-hero { min-height: 870px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7%; position: relative; padding-top: 135px; }
.cafe-kicker { color: var(--cafe-red); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cafe-hero h1 { font: 700 clamp(78px, 11vw, 162px)/.73 "DM Sans", var(--display); letter-spacing: -.14em; margin: 28px 0 30px; }
.cafe-hero h1 em { display: block; color: var(--cafe-red); font: 400 .78em/.86 "Fraunces", var(--serif); letter-spacing: -.13em; }
.cafe-hero-copy p { max-width: 300px; color: #7f6155; font-size: 14px; line-height: 1.65; margin-bottom: 32px; }
.cafe-button { border-color: var(--cafe-red); color: var(--cafe-red); }
.cafe-button:hover { background: var(--cafe-red); color: var(--demo-paper); }
.cafe-counter { height: 540px; position: relative; background: var(--cafe-red); color: #f8e3c3; padding: 22px; overflow: hidden; transform: rotate(3deg); box-shadow: 18px 22px 0 rgba(109,56,39,.13); }
.cafe-counter::before { content: ''; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(242,227,204,.35); border-radius: 50%; left: -100px; bottom: -105px; box-shadow: 0 0 0 28px rgba(242,227,204,.06), 0 0 0 56px rgba(242,227,204,.05); }
.cafe-counter-top { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(242,227,204,.4); padding-bottom: 14px; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.cafe-counter-top b { color: #482b24; font-weight: 400; }
.cafe-cup { position: absolute; left: 19%; bottom: 17%; width: 58%; height: 42%; border-radius: 30px 30px 44% 44%; background: #e9b563; box-shadow: inset 26px -22px rgba(123,62,39,.16), 15px 19px 0 rgba(91,43,32,.14); animation: cafeCupFloat 5s ease-in-out infinite; }
.cafe-cup::before { content: ''; position: absolute; top: -12%; left: 13%; width: 74%; height: 22%; border-radius: 50%; background: #36231d; border: 11px solid var(--cafe-red); box-shadow: inset 0 0 0 2px #b67d48; }
.cafe-cup-handle { position: absolute; right: -21%; top: 16%; width: 31%; height: 48%; border: 18px solid #e9b563; border-left: 0; border-radius: 0 50% 50% 0; }
.cafe-cup span { position: absolute; top: 14%; left: 29%; width: 40%; height: 4px; background: rgba(75,42,32,.25); border-radius: 50%; transform: rotate(-8deg); }
.cafe-steam { position: absolute; bottom: 58%; width: 24px; height: 125px; border-left: 2px solid rgba(255,242,211,.75); border-radius: 50%; transform-origin: bottom; animation: cafeSteam 3.2s ease-in-out infinite; }
.cafe-steam-one { left: 36%; transform: rotate(11deg); }.cafe-steam-two { left: 49%; height: 145px; animation-delay: .7s; }.cafe-steam-three { left: 60%; height: 112px; transform: rotate(-10deg); animation-delay: 1.3s; }
.cafe-counter-note { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: end; font: 9px var(--mono); text-transform: uppercase; }
.cafe-counter-note strong { color: #40251e; font: 500 24px/.9 "Fraunces", var(--serif); text-align: right; letter-spacing: -.07em; }
.cafe-stamp { position: absolute; right: 43%; bottom: 8%; z-index: 3; width: 92px; height: 92px; display: grid; place-content: center; text-align: center; color: var(--cafe-red); background: var(--cafe-gold); border-radius: 50%; transform: rotate(-13deg); font: 9px/1.1 var(--mono); box-shadow: 4px 7px 0 rgba(109,56,39,.1); }
.cafe-stamp b { color: #5b3329; font: 500 19px "Fraunces", var(--serif); }
.cafe-marquee { overflow: hidden; background: #2e201b; color: #f1bc69; border-top: 1px solid #2e201b; border-bottom: 1px solid #2e201b; }
.cafe-marquee div { width: max-content; display: flex; align-items: center; gap: 27px; padding: 16px 0; font: 10px var(--mono); text-transform: uppercase; animation: cafeMarquee 24s linear infinite; }
.cafe-marquee i { color: #f3e1c5; font-style: normal; }
.cafe-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10%; padding-top: 140px; padding-bottom: 150px; }
.cafe-section-label { display: flex; gap: 14px; color: #9a7567; font: 9px var(--mono); text-transform: uppercase; }.cafe-section-label span:first-child { color: var(--cafe-red); }
.cafe-lead { max-width: 620px; font: 500 clamp(36px, 5vw, 67px)/.98 "Fraunces", var(--serif); letter-spacing: -.07em; margin: 0; }.cafe-lead em { color: var(--cafe-red); }
.cafe-menu-section { background: #e9ceb0; padding: 140px 0 150px; }
.cafe-menu-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 68px; }.cafe-menu-head h2 { color: #2e201b; font: 700 clamp(54px, 7vw, 100px)/.75 "DM Sans", var(--display); letter-spacing: -.14em; margin: 24px 0 0; }.cafe-menu-head h2 em { color: var(--cafe-red); font: 400 .84em "Fraunces", var(--serif); letter-spacing: -.12em; }.cafe-menu-note { color: #8a6355; font: 10px/1.45 var(--mono); text-align: right; text-transform: uppercase; }
.cafe-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(46,32,27,.35); }.cafe-menu-item { min-height: 245px; padding: 19px 20px; border-bottom: 1px solid rgba(46,32,27,.35); position: relative; transition: background .35s, padding .35s; }.cafe-menu-item:nth-child(odd) { border-right: 1px solid rgba(46,32,27,.35); }.cafe-menu-item:hover { background: rgba(242,227,204,.45); padding-left: 28px; }.cafe-item-number { color: var(--cafe-red); font: 9px var(--mono); text-transform: uppercase; }.cafe-menu-item h3 { margin: 45px 0 8px; color: #2e201b; font: 500 30px "Fraunces", var(--serif); letter-spacing: -.05em; }.cafe-menu-item p { color: #886453; font-size: 12px; max-width: 220px; margin: 0; }.cafe-menu-item strong { position: absolute; right: 20px; bottom: 19px; color: var(--cafe-red); font: 500 19px "Fraunces", var(--serif); }.cafe-menu-item-featured { background: var(--cafe-red); color: #f9e8ca; }.cafe-menu-item-featured h3, .cafe-menu-item-featured p { color: #f9e8ca; }.cafe-menu-item-featured .cafe-item-number, .cafe-menu-item-featured strong { color: #512b23; }.cafe-menu-item-featured i { position: absolute; right: 20px; top: 19px; color: #f6c777; font: 9px var(--mono); text-transform: uppercase; }
.cafe-photo-band { height: 470px; position: relative; display: flex; align-items: end; justify-content: space-between; padding: 30px max(5%, calc((100% - 1180px) / 2)); overflow: hidden; color: #f6e5c6; background: radial-gradient(circle at 62% 44%, #eaa95a 0 9%, transparent 10%), radial-gradient(circle at 44% 51%, #b24f35 0 16%, transparent 17%), linear-gradient(130deg, #6f352c, #b95339 56%, #2c211b); }
.cafe-photo-band::before { content: ''; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(242,227,204,.35); border-radius: 50%; right: 15%; top: -150px; box-shadow: 0 0 0 32px rgba(242,227,204,.08), 0 0 0 64px rgba(242,227,204,.05); animation: cafeOrbit 16s linear infinite; }.cafe-photo-band::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,238,206,.07) 81px 82px); transform: skewX(-17deg) scale(1.4); }.cafe-photo-band span, .cafe-photo-band b { position: relative; z-index: 1; }.cafe-photo-band span { font: 500 27px/.9 "Fraunces", var(--serif); }.cafe-photo-band b { font: 9px var(--mono); color: #f0b65f; text-transform: uppercase; }
.cafe-visit { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10%; align-items: center; padding-top: 140px; padding-bottom: 160px; }.cafe-visit-card h2 { color: #2e201b; font: 700 clamp(55px, 7vw, 94px)/.75 "DM Sans", var(--display); letter-spacing: -.14em; margin: 28px 0; }.cafe-visit-card h2 em { color: var(--cafe-red); font: 400 .82em "Fraunces", var(--serif); }.cafe-visit-card p { color: #866658; font: 14px/1.7 "Fraunces", var(--serif); margin-bottom: 28px; }.cafe-map { height: 400px; position: relative; overflow: hidden; background-color: #d9b794; background-image: linear-gradient(26deg, transparent 0 42%, rgba(46,32,27,.22) 43% 43.5%, transparent 44%), linear-gradient(112deg, transparent 0 56%, rgba(46,32,27,.14) 57% 57.5%, transparent 58%); }.cafe-map::before { content: ''; position: absolute; inset: 13% 14%; border: 1px solid rgba(46,32,27,.28); border-radius: 50% 41% 53% 44%; transform: rotate(21deg); }.cafe-map-road { position: absolute; height: 1px; background: rgba(46,32,27,.25); transform-origin: left; }.cafe-map-road-a { width: 90%; left: 3%; top: 46%; transform: rotate(-16deg); }.cafe-map-road-b { width: 85%; left: 17%; top: 61%; transform: rotate(34deg); }.cafe-map-road-c { width: 65%; left: 19%; top: 29%; transform: rotate(74deg); }.cafe-map-dot { position: absolute; left: 53%; top: 48%; width: 18px; height: 18px; border-radius: 50%; background: var(--cafe-red); box-shadow: 0 0 0 8px rgba(217,88,63,.18); animation: mapPulse 2s ease-in-out infinite; z-index: 2; }.cafe-map-label { position: absolute; left: 57%; top: 44%; color: #2e201b; font: 10px var(--mono); }

.inn-page { --demo-ink: #254338; --demo-paper: #e9e4d5; --inn-rust: #b55c3e; --inn-sage: #6e9485; background: var(--demo-paper); color: var(--demo-ink); font-family: "DM Sans", var(--sans); }.inn-page .site-header { color: var(--demo-ink); }.inn-page .demo-nav a, .inn-page .demo-menu { color: var(--demo-ink); }.inn-brand { display: flex; align-items: center; gap: 9px; color: inherit; }.inn-brand span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--demo-ink); border-radius: 50%; font: 10px var(--mono); }.inn-brand b { font: 500 15px/.8 "Playfair Display", var(--serif); letter-spacing: -.04em; }.inn-brand b::first-line { font-style: italic; }
.inn-hero { min-height: 900px; position: relative; overflow: hidden; background: #b9c9c1; }.inn-hero-visual { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #cad7d0 0 42%, #90a99c 43% 58%, #5f8276 59% 100%); }.inn-hero-visual::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(31,71,58,.08) 55px 56px); transform: skewX(-15deg) scale(1.4); }.inn-sun { position: absolute; left: 58%; top: 22%; width: 150px; aspect-ratio: 1; background: #e7b277; border-radius: 50%; box-shadow: 0 0 0 27px rgba(231,178,119,.16), 0 0 0 58px rgba(231,178,119,.08); animation: innSun 8s ease-in-out infinite; }.inn-mountain { position: absolute; bottom: 0; width: 120%; left: -10%; clip-path: polygon(0 100%, 0 58%, 14% 46%, 26% 61%, 43% 18%, 58% 51%, 77% 29%, 100% 62%, 100% 100%); }.inn-mountain-back { height: 62%; background: #78988c; opacity: .75; transform: translateX(-4%); }.inn-mountain-front { height: 51%; background: #456c60; clip-path: polygon(0 100%, 0 58%, 18% 26%, 32% 57%, 50% 41%, 67% 11%, 83% 48%, 100% 31%, 100% 100%); }.inn-cabin { position: absolute; right: 17%; bottom: 23%; width: 160px; height: 120px; background: #7f543f; transform: rotate(-2deg); box-shadow: 18px 16px 0 rgba(37,67,56,.16); }.inn-cabin::before { content: ''; position: absolute; left: -17px; top: -52px; border-left: 97px solid transparent; border-right: 97px solid transparent; border-bottom: 62px solid #44352d; }.inn-cabin span { position: absolute; top: 39%; left: 18%; width: 28px; height: 37px; background: #e9bc74; box-shadow: 64px 0 #e9bc74; }.inn-cabin i { position: absolute; right: 12%; bottom: 0; width: 28px; height: 52px; background: #583c32; }.inn-hero-caption { position: absolute; bottom: 27px; left: 5%; right: 5%; z-index: 2; display: flex; justify-content: space-between; color: #e9e4d5; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.inn-hero-copy { position: relative; z-index: 2; padding-top: 260px; color: #f4efe2; }.inn-kicker { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .7; }.inn-hero h1 { font: 500 clamp(82px, 12vw, 172px)/.74 "DM Sans", var(--display); letter-spacing: -.15em; margin: 27px 0; }.inn-hero h1 em { display: block; color: #f0bd7c; font: 400 .74em/.88 "Playfair Display", var(--serif); letter-spacing: -.12em; }.inn-hero-copy p { max-width: 310px; color: #e6e9dc; font: 15px/1.55 "Playfair Display", var(--serif); margin-bottom: 29px; }.inn-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 50px; padding: 0 16px; border: 1px solid currentColor; color: inherit; font: 10px var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }.inn-button:hover { background: #f0bd7c; color: #254338; transform: translateY(-3px); }.inn-scroll-mark { position: absolute; z-index: 2; right: 5%; bottom: 75px; writing-mode: vertical-rl; color: #f0bd7c; font: 9px var(--mono); text-transform: uppercase; }.inn-scroll-mark span { height: 53px; border-left: 1px solid #f0bd7c; display: block; margin: 0 auto 10px; }
.inn-intro { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10%; position: relative; padding-top: 145px; padding-bottom: 150px; }.inn-side-label { display: flex; gap: 16px; color: #748b7c; font: 9px var(--mono); text-transform: uppercase; }.inn-side-label span:first-child { color: var(--inn-rust); }.inn-lead { max-width: 620px; margin: 0; font: 500 clamp(39px, 5.2vw, 72px)/.98 "Playfair Display", var(--serif); letter-spacing: -.07em; }.inn-lead em { color: var(--inn-rust); }.inn-intro-note { grid-column: 2; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(37,67,56,.25); padding-top: 18px; margin-top: 42px; color: #708478; font: 9px var(--mono); text-transform: uppercase; }.inn-intro-note p { max-width: 290px; margin: 0; color: #637a6c; font: 13px/1.6 "DM Sans", var(--sans); text-transform: none; }.inn-rooms { padding: 135px 0 150px; background: #d8e3dd; overflow: hidden; }.inn-rooms-header { display: grid; grid-template-columns: .7fr 1fr .65fr; gap: 7%; align-items: end; }.inn-rooms-header h2 { color: #254338; font: 500 clamp(54px, 7vw, 99px)/.74 "DM Sans", var(--display); letter-spacing: -.14em; margin: 23px 0 0; }.inn-rooms-header h2 em { color: var(--inn-rust); font: 400 .8em "Playfair Display", var(--serif); }.inn-rooms-header p { color: #6a8376; font: 14px/1.5 "Playfair Display", var(--serif); margin: 0; }.inn-room-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 72px; }.inn-room { min-width: 0; }.inn-room-art { height: 350px; position: relative; overflow: hidden; transition: transform .6s; }.inn-room:hover .inn-room-art { transform: translateY(-8px); }.inn-room-art::before { content: ''; position: absolute; left: 17%; right: 17%; top: 15%; bottom: 0; border: 1px solid rgba(243,239,226,.5); border-bottom: 0; border-radius: 160px 160px 0 0; }.inn-room-window { position: absolute; left: 31%; right: 31%; top: 25%; bottom: 0; border: 10px solid rgba(243,239,226,.58); border-bottom: 0; border-radius: 120px 120px 0 0; background: linear-gradient(160deg, rgba(219,229,217,.25), rgba(35,77,65,.5)); }.inn-room-sage .inn-room-art { background: linear-gradient(145deg, #95ad9b, #436b5e); }.inn-room-amber .inn-room-art { background: linear-gradient(145deg, #c99563, #7c5945); }.inn-room-night .inn-room-art { background: linear-gradient(145deg, #425b60, #1d3339); }.inn-room-meta { border-bottom: 1px solid rgba(37,67,56,.25); padding: 16px 1px 18px; position: relative; }.inn-room-meta > span { color: #7a9383; font: 9px var(--mono); text-transform: uppercase; }.inn-room-meta h3 { color: #254338; font: 500 25px "Playfair Display", var(--serif); letter-spacing: -.05em; margin: 17px 0 6px; }.inn-room-meta p { color: #718879; font-size: 12px; margin: 0 0 16px; }.inn-room-meta b { color: var(--inn-rust); font: 9px var(--mono); text-transform: uppercase; }.inn-ritual { display: grid; grid-template-columns: .3fr 1fr .3fr; gap: 8%; align-items: start; padding-top: 145px; padding-bottom: 145px; }.inn-ritual-mark { color: var(--inn-rust); font: 60px "Playfair Display", var(--serif); line-height: .7; }.inn-ritual p { max-width: 620px; margin: 27px 0 0; font: 500 clamp(30px, 4vw, 52px)/1.03 "Playfair Display", var(--serif); letter-spacing: -.06em; }.inn-ritual-index { color: #7a8f82; font: 9px var(--mono); text-align: right; margin-top: 9px; }.inn-booking { background: #254338; color: #eee8d8; padding: 130px 0; }.inn-booking-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 11%; align-items: center; }.inn-booking h2 { font: 500 clamp(58px, 7vw, 100px)/.74 "DM Sans", var(--display); letter-spacing: -.14em; margin: 25px 0; }.inn-booking h2 em { color: #f0bd7c; font: 400 .83em "Playfair Display", var(--serif); }.inn-booking p { color: #b8c8bd; max-width: 270px; font: 14px/1.6 "Playfair Display", var(--serif); }.inn-booking-form { display: grid; gap: 15px; border: 1px solid rgba(234,228,212,.28); padding: 25px; }.inn-booking-form label { display: grid; gap: 8px; color: #9fb8a8; font: 9px var(--mono); text-transform: uppercase; }.inn-booking-form input, .inn-booking-form select { min-height: 43px; padding: 0 12px; border: 1px solid rgba(234,228,212,.28); background: transparent; color: #eee8d8; font: 12px var(--sans); }.inn-booking-form option { color: #254338; }.inn-booking-form .inn-button { margin-top: 10px; color: #254338; background: #f0bd7c; border-color: #f0bd7c; justify-content: space-between; }.inn-booking-form .inn-button:hover { background: #eee8d8; }

.restaurant-page { --demo-ink: #331312; --demo-paper: #f3e9d6; --restaurant-red: #d95335; --restaurant-orange: #ef9d4f; background: var(--demo-paper); color: var(--demo-ink); font-family: "DM Sans", var(--sans); }.restaurant-page .site-header { color: #f7ebd7; }.restaurant-page .demo-nav a, .restaurant-page .demo-menu { color: #f7ebd7; }.restaurant-brand { color: inherit; font: 500 17px "Italiana", var(--serif); letter-spacing: .03em; }.restaurant-brand span { color: var(--restaurant-orange); font-size: 23px; }.restaurant-brand i { color: var(--restaurant-red); font-style: normal; }.restaurant-hero { min-height: 860px; position: relative; overflow: hidden; background: #331312; color: #f7ebd7; }.restaurant-hero::before { content: ''; position: absolute; inset: 0 47% 0 0; background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(243,233,214,.08) 45px 46px); transform: skewX(-15deg) scale(1.2); }.restaurant-hero-copy { position: relative; z-index: 2; padding-top: 240px; }.restaurant-kicker { color: var(--restaurant-orange); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.restaurant-hero h1 { font: 500 clamp(84px, 12vw, 176px)/.7 "DM Sans", var(--display); letter-spacing: -.16em; margin: 26px 0 30px; }.restaurant-hero h1 em { color: var(--restaurant-red); font: 400 .73em "Italiana", var(--serif); letter-spacing: -.1em; }.restaurant-hero-copy p { max-width: 280px; color: #d5c5ac; font: 14px/1.6 "DM Sans", var(--sans); margin-bottom: 32px; }.restaurant-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 50px; padding: 0 17px; border: 1px solid currentColor; color: inherit; font: 10px var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }.restaurant-button:hover { background: var(--restaurant-orange); color: var(--demo-ink); transform: translateY(-3px); }.restaurant-plate { position: absolute; z-index: 1; right: -2%; top: 13%; width: min(56vw, 700px); aspect-ratio: 1; border-radius: 50%; background: #f3e9d6; box-shadow: 0 0 0 28px rgba(243,233,214,.15), 0 0 0 57px rgba(243,233,214,.08); display: grid; place-items: center; animation: plateHover 7s ease-in-out infinite; }.restaurant-plate-inner { width: 71%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c8a25b 0 8%, transparent 9%), radial-gradient(circle at 67% 48%, #718a56 0 11%, transparent 12%), radial-gradient(circle at 50% 70%, #e45734 0 9%, transparent 10%), #db8e49; position: relative; box-shadow: inset 0 0 0 17px rgba(51,19,18,.1); }.restaurant-sauce { position: absolute; width: 37%; height: 30%; left: 32%; top: 37%; border-radius: 50%; background: #6e2c22; filter: blur(2px); }.restaurant-herb { position: absolute; width: 8px; height: 34px; background: #496c4f; border-radius: 100% 0; transform-origin: bottom; }.herb-a { left: 24%; top: 19%; transform: rotate(-34deg); }.herb-b { left: 66%; top: 22%; transform: rotate(49deg); }.herb-c { left: 73%; top: 71%; transform: rotate(117deg); }.restaurant-hero-stamp { position: absolute; right: 7%; bottom: 13%; z-index: 3; width: 105px; height: 105px; display: grid; place-content: center; text-align: center; border: 1px solid var(--restaurant-orange); border-radius: 50%; color: var(--restaurant-orange); transform: rotate(14deg); font: 9px/1.1 var(--mono); }.restaurant-hero-stamp b { color: #f4d4a5; font: 500 22px "Italiana", var(--serif); }.restaurant-marquee { overflow: hidden; background: var(--restaurant-red); color: #f8e4bf; }.restaurant-marquee div { width: max-content; display: flex; gap: 27px; align-items: center; padding: 17px 0; font: 10px var(--mono); text-transform: uppercase; animation: restaurantMarquee 22s linear infinite; }.restaurant-marquee i { color: #381715; font-style: normal; }.restaurant-philosophy { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10%; padding-top: 145px; padding-bottom: 150px; }.restaurant-section-label { display: flex; gap: 15px; color: #a46b58; font: 9px var(--mono); text-transform: uppercase; }.restaurant-section-label span:first-child { color: var(--restaurant-red); }.restaurant-lead { max-width: 680px; margin: 0; font: 500 clamp(37px, 5.2vw, 74px)/.98 "Italiana", var(--serif); letter-spacing: -.05em; }.restaurant-lead em { color: var(--restaurant-red); font-style: normal; }.restaurant-origin { grid-column: 2; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(51,19,18,.24); padding-top: 17px; margin-top: 45px; color: #a46b58; font: 9px var(--mono); text-transform: uppercase; }.restaurant-origin p { max-width: 300px; margin: 0; color: #86665d; font: 13px/1.6 var(--sans); text-transform: none; }.restaurant-menu { padding: 135px 0 145px; background: #331312; color: #f5e6ce; }.restaurant-menu-head { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 7%; align-items: end; }.restaurant-menu-head h2 { color: #f5e6ce; font: 500 clamp(57px, 7vw, 100px)/.75 "DM Sans", var(--display); letter-spacing: -.15em; margin: 24px 0 0; }.restaurant-menu-head h2 em { color: var(--restaurant-orange); font: 400 .8em "Italiana", var(--serif); letter-spacing: -.08em; }.restaurant-menu-date { color: #b78a72; font: 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; }.restaurant-dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 74px; }.restaurant-dish { min-height: 295px; padding: 17px; position: relative; border: 1px solid rgba(245,230,206,.3); transition: background .35s, transform .4s; }.restaurant-dish:hover { background: #4a1c18; transform: translateY(-8px); }.restaurant-dish > span { color: var(--restaurant-orange); font: 9px var(--mono); text-transform: uppercase; }.restaurant-dish h3 { margin: 49px 0 10px; font: 400 28px/1.02 "Italiana", var(--serif); letter-spacing: -.04em; }.restaurant-dish p { color: #b78a72; font-size: 12px; }.restaurant-dish strong { position: absolute; right: 17px; bottom: 17px; color: var(--restaurant-orange); font: 500 23px "Italiana", var(--serif); }.restaurant-dish strong::after { content: ' lei'; font: 9px var(--mono); }.restaurant-dish-hot { background: var(--restaurant-red); border-color: var(--restaurant-red); }.restaurant-dish-hot > span, .restaurant-dish-hot strong { color: #401917; }.restaurant-dish-hot p { color: #f2c3a1; }.restaurant-menu-footer { display: flex; justify-content: space-between; border-top: 1px solid rgba(245,230,206,.28); padding-top: 17px; margin-top: 15px; color: #bf9b80; font: 9px var(--mono); text-transform: uppercase; }.restaurant-menu-footer a { color: #f1bc76; }.restaurant-gallery { display: grid; grid-template-columns: 1fr 1.25fr 1fr; min-height: 470px; background: #b85538; }.restaurant-gallery-card { position: relative; min-height: 420px; overflow: hidden; }.restaurant-gallery-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(113deg, transparent 0 31px, rgba(252,235,198,.12) 32px 34px); transform: scale(1.4); }.restaurant-gallery-card::after { content: ''; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: #e7ae61; left: 26%; top: 27%; box-shadow: 0 0 0 13px rgba(51,19,18,.2), 0 0 0 25px rgba(245,230,206,.15); }.restaurant-gallery-card-b { background: #331312; }.restaurant-gallery-card-b::after { width: 245px; height: 245px; background: #d95335; left: 20%; top: 19%; }.restaurant-gallery-card-c { background: #e3a15b; }.restaurant-gallery-card-c::after { width: 170px; height: 240px; border-radius: 50% 50% 12px 12px; background: #4a1c18; left: 32%; top: 20%; }.restaurant-gallery-card span { position: absolute; z-index: 2; left: 20px; bottom: 20px; color: #f6e3c5; font: 9px var(--mono); text-transform: uppercase; }.restaurant-reserve { background: var(--restaurant-orange); color: var(--demo-ink); padding: 130px 0; }.restaurant-reserve-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 13%; align-items: center; }.restaurant-reserve h2 { font: 500 clamp(59px, 7vw, 103px)/.73 "DM Sans", var(--display); letter-spacing: -.15em; margin: 24px 0; }.restaurant-reserve h2 em { color: #f7e9d5; font: 400 .8em "Italiana", var(--serif); }.restaurant-reserve p { max-width: 280px; color: #74402c; font-size: 14px; line-height: 1.6; }.restaurant-reserve-form { display: grid; gap: 15px; border: 1px solid rgba(51,19,18,.4); padding: 24px; }.restaurant-reserve-form label { display: grid; gap: 7px; color: #78402b; font: 9px var(--mono); text-transform: uppercase; }.restaurant-reserve-form input, .restaurant-reserve-form select { min-height: 43px; padding: 0 12px; border: 1px solid rgba(51,19,18,.35); background: transparent; color: var(--demo-ink); font: 12px var(--sans); }.restaurant-reserve-form .restaurant-button { color: var(--demo-ink); border-color: var(--demo-ink); margin-top: 9px; }.restaurant-reserve-form .restaurant-button:hover { background: #f7e9d5; }

.shop-page { --demo-ink: #1c3028; --demo-paper: #eef0e5; --shop-orange: #e56b45; --shop-lime: #cbd99f; background: var(--demo-paper); color: var(--demo-ink); font-family: "DM Sans", var(--sans); }.shop-page .site-header { color: var(--demo-ink); }.shop-page .demo-nav a { color: var(--demo-ink); }.shop-brand { color: var(--demo-ink); font: 800 20px "Syne", var(--display); letter-spacing: -.13em; }.shop-brand span { display: block; color: #71886e; font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }.shop-cart { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: inherit; font: 10px var(--mono); text-transform: uppercase; cursor: pointer; }.shop-cart span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #eef0e5; background: var(--shop-orange); }.shop-cart b { color: var(--shop-orange); font-size: 16px; font-weight: 400; }.shop-hero { min-height: 840px; padding-top: 150px; }.shop-hero-top { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(28,48,40,.25); color: #77907a; font: 9px var(--mono); text-transform: uppercase; }.shop-kicker { color: var(--shop-orange); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.shop-hero-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: center; padding-top: 85px; }.shop-hero-copy h1 { color: var(--shop-ink); font: 800 clamp(94px, 14vw, 190px)/.7 "Syne", var(--display); letter-spacing: -.17em; margin: 0 0 32px; }.shop-hero-copy h1 em { color: var(--shop-orange); font-weight: 500; }.shop-hero-copy p { max-width: 260px; color: #6c826f; font-size: 14px; line-height: 1.55; margin-bottom: 30px; }.shop-button { display: inline-flex; align-items: center; gap: 28px; min-height: 50px; padding: 0 15px; border: 1px solid var(--demo-ink); color: var(--demo-ink); font: 10px var(--mono); text-transform: uppercase; }.shop-button:hover { background: var(--shop-orange); color: #eef0e5; border-color: var(--shop-orange); }.shop-hero-product { min-height: 520px; position: relative; background: var(--shop-lime); overflow: hidden; }.shop-hero-product::before { content: 'NOMA'; position: absolute; right: 19px; top: 17px; color: #6e825a; font: 9px var(--mono); letter-spacing: .1em; }.shop-hero-product::after { content: ''; position: absolute; inset: 11%; border: 1px solid rgba(28,48,40,.16); border-radius: 50%; transform: rotate(-23deg); }.shop-hero-sculpture { position: absolute; z-index: 1; left: 29%; top: 18%; width: 36%; height: 66%; background: #f1f1e8; border: 1px solid #526c52; border-radius: 46% 46% 13px 13px; transform: rotate(11deg); box-shadow: 21px 23px 0 rgba(61,91,65,.14); animation: shopFloat 6s ease-in-out infinite; }.shop-hero-sculpture::before { content: ''; position: absolute; left: 16%; top: -17%; width: 68%; height: 27%; border: 2px solid #526c52; border-bottom: 0; border-radius: 50% 50% 0 0; }.shop-hero-sculpture span { position: absolute; left: 20%; right: 20%; top: 18%; height: 2px; background: #526c52; box-shadow: 0 13px #526c52, 0 26px #526c52; opacity: .55; }.shop-hero-product-label { position: absolute; z-index: 2; left: 23px; bottom: 22px; right: 23px; display: flex; justify-content: space-between; color: #4d6b50; font: 9px var(--mono); text-transform: uppercase; }.shop-hero-product-label b { color: #1c3028; font-weight: 400; text-align: right; }.shop-categories { border-top: 1px solid rgba(28,48,40,.25); border-bottom: 1px solid rgba(28,48,40,.25); }.shop-categories .container { display: flex; align-items: center; gap: 7px; min-height: 66px; }.shop-filter { border: 1px solid transparent; background: transparent; color: #769078; padding: 8px 10px; font: 9px var(--mono); text-transform: uppercase; cursor: pointer; }.shop-filter span { color: #a2b39f; margin-left: 3px; }.shop-filter:hover, .shop-filter.is-active { border-color: var(--shop-orange); color: var(--shop-orange); }.shop-category-note { margin-left: auto; color: #769078; font: 9px var(--mono); text-transform: uppercase; }.shop-catalog { padding-top: 145px; padding-bottom: 155px; }.shop-catalog-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 73px; }.shop-catalog-head h2 { color: #1c3028; font: 800 clamp(60px, 8vw, 113px)/.72 "Syne", var(--display); letter-spacing: -.17em; margin: 24px 0 0; }.shop-catalog-head h2 em { color: var(--shop-orange); font-weight: 500; }.shop-catalog-head p { color: #79907b; font: 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; }.shop-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; align-items: start; }.shop-product-card { min-width: 0; }.shop-product-card.is-shop-filtered { display: none; }.shop-product-card-offset { margin-top: 65px; }.shop-product-art { height: 320px; position: relative; overflow: hidden; background: #d5dfb7; }.shop-product-art::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(28,48,40,.18); border-radius: 50%; }.shop-art-keta { background: #e6a261; }.shop-art-keta span { position: absolute; left: 27%; top: 18%; width: 46%; height: 70%; border-radius: 46% 46% 13px 13px; background: #f1f1e8; border: 1px solid #4e6d51; transform: rotate(10deg); box-shadow: 10px 12px 0 rgba(84,86,53,.14); }.shop-art-keta span::before { content: ''; position: absolute; left: 14%; top: -18%; width: 70%; height: 25%; border: 2px solid #4e6d51; border-bottom: 0; border-radius: 50% 50% 0 0; }.shop-art-nori { background: #a8bd91; }.shop-art-nori span { position: absolute; left: 19%; top: 31%; width: 62%; height: 33%; border: 9px solid #e7e8dc; border-radius: 50%; transform: rotate(-9deg); box-shadow: inset 0 0 0 1px #526952; }.shop-art-aki { background: #edc5a7; }.shop-art-aki span { position: absolute; left: 27%; top: 20%; width: 46%; height: 67%; background: #e45e43; border-radius: 50% 50% 10px 10px; transform: rotate(-13deg); }.shop-art-aki span::before { content: ''; position: absolute; left: 18%; top: -22%; width: 64%; height: 25%; border: 3px solid #6c3f36; border-bottom: 0; border-radius: 50% 50% 0 0; }.shop-art-mori { background: #ced2b7; }.shop-art-mori span { position: absolute; left: 24%; top: 28%; width: 54%; height: 44%; background: #e5e6dc; border: 1px solid #4d6850; transform: skewY(-9deg) rotate(-16deg); box-shadow: 13px 15px 0 rgba(57,84,63,.18); }.shop-product-card:hover .shop-product-art { transform: translateY(-7px); }.shop-product-art { transition: transform .5s cubic-bezier(.2,.75,.25,1); }.shop-product-meta { display: flex; justify-content: space-between; margin-top: 14px; color: #78907d; font: 9px var(--mono); text-transform: uppercase; }.shop-product-meta strong { color: var(--shop-orange); font-weight: 400; }.shop-product-card h3 { color: #1c3028; font: 500 22px "Syne", var(--display); letter-spacing: -.08em; margin: 9px 0 17px; }.shop-product-card button { border: 0; padding: 0; background: transparent; color: #769078; font: 9px var(--mono); text-transform: uppercase; cursor: pointer; }.shop-product-card button span { color: var(--shop-orange); font-size: 15px; margin-left: 7px; }.shop-story { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 620px; background: #243b30; color: #eef0e5; }.shop-story-shape { min-height: 540px; position: relative; background: radial-gradient(circle at 43% 42%, #e26e49 0 14%, transparent 15%), linear-gradient(135deg, #b3c48e, #6d846a); overflow: hidden; }.shop-story-shape::before { content: ''; position: absolute; width: 360px; height: 470px; left: 36%; top: 11%; border: 1px solid rgba(235,239,224,.7); border-radius: 50% 50% 8px 8px; transform: rotate(20deg); box-shadow: 18px 17px 0 rgba(36,65,48,.19); }.shop-story-shape::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.1) 61px 62px); transform: skewX(17deg) scale(1.2); }.shop-story-copy { align-self: center; padding: 80px 11%; }.shop-story-copy h2 { font: 800 clamp(53px, 6vw, 85px)/.75 "Syne", var(--display); letter-spacing: -.15em; margin: 25px 0; }.shop-story-copy h2 em { color: var(--shop-orange); font-weight: 500; }.shop-story-copy p { max-width: 260px; color: #aabfaf; font-size: 14px; line-height: 1.6; margin-bottom: 25px; }.shop-story-copy a { color: var(--shop-lime); font: 9px var(--mono); text-transform: uppercase; }.shop-newsletter { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10%; padding-top: 140px; padding-bottom: 150px; }.shop-newsletter h2 { color: #1c3028; font: 800 clamp(53px, 7vw, 98px)/.74 "Syne", var(--display); letter-spacing: -.16em; margin: 24px 0 0; }.shop-newsletter h2 em { color: var(--shop-orange); font-weight: 500; }.shop-newsletter form { align-self: end; display: flex; border-bottom: 1px solid rgba(28,48,40,.4); }.shop-newsletter input { flex: 1; min-width: 0; min-height: 55px; border: 0; outline: 0; background: transparent; color: var(--demo-ink); font: 13px var(--sans); }.shop-newsletter button { border: 0; background: transparent; color: var(--shop-orange); font: 9px var(--mono); text-transform: uppercase; cursor: pointer; }.shop-toast { position: fixed; z-index: 9; right: 20px; bottom: 20px; padding: 14px 18px; background: #1c3028; color: #eef0e5; font: 10px var(--mono); text-transform: uppercase; transform: translateY(120%); transition: transform .4s; }.shop-toast.is-visible { transform: translateY(0); }
.shop-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.signal-page { --demo-ink: #e7f3f0; --demo-paper: #071221; --signal-cyan: #7be5d2; --signal-lime: #c8f75b; background: var(--demo-paper); color: var(--demo-ink); font-family: "DM Sans", var(--sans); }.signal-page .site-header { color: var(--demo-ink); }.signal-page .demo-nav a, .signal-page .demo-menu { color: var(--demo-ink); }.signal-brand { color: var(--signal-cyan); font: 600 17px "Space Grotesk", var(--display); letter-spacing: -.07em; }.signal-brand i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-lime); margin-right: 6px; box-shadow: 0 0 16px var(--signal-lime); }.signal-brand span { color: #6e9695; font: 8px var(--mono); margin-left: 7px; }.signal-hero { min-height: 850px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 7%; align-items: center; padding-top: 145px; position: relative; }.signal-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(123,229,210,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(123,229,210,.09) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }.signal-kicker { color: var(--signal-cyan); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.signal-hero-copy { position: relative; z-index: 2; }.signal-hero h1 { font: 600 clamp(85px, 12vw, 174px)/.71 "Space Grotesk", var(--display); letter-spacing: -.16em; margin: 29px 0 31px; }.signal-hero h1 em { color: var(--signal-lime); font-style: normal; }.signal-hero-copy p { max-width: 295px; color: #8aa8a6; font-size: 14px; line-height: 1.62; margin-bottom: 34px; }.signal-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; min-height: 50px; padding: 0 16px; border: 1px solid var(--signal-cyan); color: var(--signal-cyan); font: 10px var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }.signal-button:hover { background: var(--signal-lime); color: #071221; border-color: var(--signal-lime); transform: translateY(-3px); }.signal-visual { height: 525px; position: relative; display: grid; place-items: center; }.signal-radar { width: min(35vw, 410px); aspect-ratio: 1; border: 1px solid rgba(123,229,210,.6); border-radius: 50%; position: relative; box-shadow: 0 0 0 44px rgba(123,229,210,.05), 0 0 0 89px rgba(123,229,210,.035), 0 0 0 135px rgba(123,229,210,.02); }.signal-radar::before, .signal-radar::after { content: ''; position: absolute; inset: 16%; border: 1px solid rgba(123,229,210,.25); border-radius: 50%; }.signal-radar::after { inset: 50% 0 auto; border-radius: 0; border: 0; border-top: 1px solid rgba(123,229,210,.3); }.signal-sweep { position: absolute; left: 50%; top: 50%; width: 1px; height: 50%; background: linear-gradient(var(--signal-lime), transparent); transform-origin: top; animation: signalSweep 4s linear infinite; }.radar-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--signal-lime); box-shadow: 0 0 19px var(--signal-lime); animation: radarPoint 2.8s ease-in-out infinite; }.radar-point-a { top: 27%; left: 59%; }.radar-point-b { top: 62%; left: 27%; animation-delay: .8s; }.radar-point-c { top: 73%; left: 70%; animation-delay: 1.4s; }.radar-center { position: absolute; inset: 42%; display: grid; place-items: center; border: 1px solid var(--signal-lime); border-radius: 50%; color: var(--signal-lime); font: 9px var(--mono); background: rgba(7,18,33,.8); }.signal-visual-label { position: absolute; color: #7da7a4; font: 9px/1.35 var(--mono); text-transform: uppercase; }.signal-visual-label b { color: var(--signal-lime); font-weight: 400; }.signal-visual-label-a { right: 3%; top: 22%; }.signal-visual-label-b { left: 8%; bottom: 18%; }.signal-status { border-top: 1px solid rgba(123,229,210,.22); border-bottom: 1px solid rgba(123,229,210,.22); }.signal-status .container { display: flex; justify-content: space-between; padding: 17px 0; color: #6e9695; font: 9px var(--mono); text-transform: uppercase; }.signal-status span:first-child { color: var(--signal-cyan); }.signal-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-lime); margin-right: 6px; box-shadow: 0 0 10px var(--signal-lime); }.signal-story { display: grid; grid-template-columns: .65fr 1.35fr .25fr; gap: 8%; padding-top: 145px; padding-bottom: 150px; }.signal-lead { max-width: 660px; margin: 0; font: 500 clamp(39px, 5.4vw, 75px)/.95 "Space Grotesk", var(--display); letter-spacing: -.09em; }.signal-lead em { color: var(--signal-lime); font-style: normal; }.signal-side-note { color: #739593; font: 9px/1.5 var(--mono); text-transform: uppercase; text-align: right; }.signal-side-note b { display: block; color: var(--signal-lime); font-size: 22px; margin-top: 13px; }.signal-workspace { padding-bottom: 155px; }.signal-workspace-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 65px; }.signal-workspace-head h2 { color: #e7f3f0; font: 600 clamp(56px, 7vw, 101px)/.74 "Space Grotesk", var(--display); letter-spacing: -.15em; margin: 24px 0 0; }.signal-workspace-head h2 em { color: var(--signal-lime); font-style: normal; }.signal-workspace-version { color: #6e9695; font: 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; }.signal-bento { display: grid; grid-template-columns: 1.4fr .6fr; grid-template-rows: 245px 170px; gap: 12px; }.signal-terminal { grid-row: 1 / span 2; border: 1px solid rgba(123,229,210,.27); background: #0b1929; }.signal-terminal-top { display: flex; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid rgba(123,229,210,.2); color: #7da7a4; font: 9px var(--mono); }.signal-terminal-top b { color: var(--signal-lime); font-size: 8px; letter-spacing: 4px; }.signal-terminal-body { padding: 21px 18px; color: #78a19b; font: 10px/2 var(--mono); }.signal-terminal-body p { margin: 0; }.signal-terminal-body p span { display: inline-block; width: 32px; color: #4e7777; }.signal-terminal-body b { float: right; color: var(--signal-cyan); font-weight: 400; }.signal-terminal-body strong { float: right; color: var(--signal-lime); font-weight: 400; }.signal-terminal-wave { height: 125px; margin-top: 15px; background: linear-gradient(157deg, transparent 0 27%, var(--signal-cyan) 28% 28.6%, transparent 29% 41%, var(--signal-lime) 42% 42.6%, transparent 43% 55%, var(--signal-cyan) 56% 56.6%, transparent 57% 69%, var(--signal-lime) 70% 70.6%, transparent 71%); opacity: .65; }.signal-cursor { color: var(--signal-lime); animation: cursorBlink 1s step-end infinite; }.signal-insight, .signal-metric { border: 1px solid rgba(123,229,210,.27); background: #0b1929; padding: 17px; }.signal-insight-label, .signal-metric span { color: #719b98; font: 9px var(--mono); text-transform: uppercase; }.signal-insight strong { display: block; margin-top: 28px; font: 500 25px/1 "Space Grotesk", var(--display); letter-spacing: -.1em; }.signal-insight strong em { color: var(--signal-lime); font-style: normal; }.signal-sparkline { display: flex; align-items: end; gap: 5px; height: 23px; margin-top: 19px; }.signal-sparkline i { width: 12%; background: var(--signal-cyan); }.signal-sparkline i:nth-child(1) { height: 35%; }.signal-sparkline i:nth-child(2) { height: 48%; }.signal-sparkline i:nth-child(3) { height: 39%; }.signal-sparkline i:nth-child(4) { height: 65%; }.signal-sparkline i:nth-child(5) { height: 57%; }.signal-sparkline i:nth-child(6) { height: 82%; }.signal-sparkline i:nth-child(7) { height: 66%; }.signal-sparkline i:nth-child(8) { height: 100%; background: var(--signal-lime); }.signal-insight small, .signal-metric small { color: #769a98; font: 9px var(--mono); }.signal-metric { display: grid; align-content: space-between; }.signal-metric strong { color: var(--signal-cyan); font: 500 40px "Space Grotesk", var(--display); letter-spacing: -.13em; }.signal-metric-lime strong { color: var(--signal-lime); }.signal-metric strong em { font-size: .55em; font-style: normal; }.signal-principles { background: #0b1929; padding: 135px 0 145px; border-top: 1px solid rgba(123,229,210,.2); }.signal-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 70px; }.signal-principle-grid article { min-height: 190px; border-top: 1px solid rgba(123,229,210,.24); padding-top: 15px; }.signal-principle-grid b { color: var(--signal-lime); font: 9px var(--mono); }.signal-principle-grid h3 { color: #e7f3f0; font: 500 27px "Space Grotesk", var(--display); letter-spacing: -.1em; margin: 50px 0 9px; }.signal-principle-grid p { max-width: 200px; color: #799a96; font-size: 12px; line-height: 1.5; }.signal-cta { min-height: 590px; position: relative; overflow: hidden; display: flex; align-items: center; background: var(--signal-lime); color: #071221; }.signal-cta-grid { position: absolute; inset: 0; background: linear-gradient(rgba(7,18,33,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(7,18,33,.16) 1px, transparent 1px); background-size: 75px 75px; transform: perspective(500px) rotateX(55deg) scale(1.5) translateY(16%); transform-origin: bottom; }.signal-cta .container { position: relative; z-index: 2; }.signal-cta .signal-kicker { color: #4d6b42; }.signal-cta h2 { font: 600 clamp(63px, 9vw, 125px)/.71 "Space Grotesk", var(--display); letter-spacing: -.16em; margin: 28px 0 34px; }.signal-cta h2 em { color: #31523f; font-style: normal; }.signal-cta .signal-button { border-color: #071221; color: #071221; }.signal-cta .signal-button:hover { background: #071221; color: var(--signal-lime); }.signal-cta-orb { position: absolute; width: 430px; aspect-ratio: 1; border: 1px solid rgba(7,18,33,.28); border-radius: 50%; right: 12%; top: 8%; box-shadow: 0 0 0 34px rgba(7,18,33,.06), 0 0 0 69px rgba(7,18,33,.04); animation: signalOrb 7s ease-in-out infinite; }

.finance-page { --demo-ink: #122319; --demo-paper: #eeece5; --finance-green: #20785c; --finance-mint: #c7d9c5; background: var(--demo-paper); color: var(--demo-ink); font-family: "Manrope", var(--sans); }.finance-page .site-header { color: var(--demo-ink); }.finance-page .demo-nav a, .finance-page .demo-menu { color: var(--demo-ink); }.finance-brand { display: flex; align-items: center; gap: 8px; color: inherit; }.finance-brand span { width: 28px; height: 28px; display: grid; place-items: center; background: var(--finance-green); color: #eef1df; font: 8px var(--mono); border-radius: 50%; }.finance-brand b { font: 700 15px/.76 "Manrope", var(--display); letter-spacing: -.08em; }.finance-brand b i { color: var(--finance-green); font-size: 10px; font-style: normal; font-weight: 500; }.finance-hero { min-height: 870px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 8%; align-items: center; padding-top: 140px; }.finance-kicker { color: var(--finance-green); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.finance-hero h1 { font: 800 clamp(83px, 11vw, 161px)/.72 "Manrope", var(--display); letter-spacing: -.17em; margin: 28px 0 31px; }.finance-hero h1 em { display: block; color: var(--finance-green); font: 500 .78em/.85 "Manrope", var(--display); letter-spacing: -.15em; }.finance-hero-copy p { max-width: 300px; color: #728074; font-size: 14px; line-height: 1.62; margin-bottom: 33px; }.finance-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 50px; padding: 0 16px; border: 1px solid var(--finance-green); color: var(--finance-green); font: 10px var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }.finance-button:hover { background: var(--finance-green); color: #eef1df; transform: translateY(-3px); }.finance-orbit-board { width: min(40vw, 520px); aspect-ratio: 1; justify-self: end; position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--finance-mint); box-shadow: 25px 25px 0 rgba(32,120,92,.12); }.finance-orbit-board::before { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(18,35,25,.25); border-radius: 50%; }.finance-orbit-board::after { content: ''; position: absolute; inset: 23%; border: 1px solid rgba(18,35,25,.22); border-radius: 50%; }.finance-orbit-ring { position: absolute; border: 1px solid var(--finance-green); border-radius: 50%; transform: rotate(-27deg); animation: financeOrbit 13s linear infinite; }.finance-ring-one { inset: 9% 27%; }.finance-ring-two { inset: 27% 9%; transform: rotate(49deg); animation-duration: 17s; animation-direction: reverse; }.finance-orbit-core { position: relative; z-index: 2; width: 38%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--finance-green); color: #eef1df; box-shadow: 0 0 0 14px rgba(32,120,92,.14); }.finance-orbit-core span { font: 9px var(--mono); }.finance-orbit-core b { display: block; margin-top: 11px; font: 700 37px "Manrope", var(--display); letter-spacing: -.14em; }.finance-orbit-core small { color: #c3dfc6; font: 8px var(--mono); text-transform: uppercase; }.finance-board-label { position: absolute; z-index: 3; color: #56725e; font: 9px var(--mono); text-transform: uppercase; }.finance-board-label-a { top: 13%; left: 15%; }.finance-board-label-b { right: 12%; top: 28%; }.finance-board-label-c { bottom: 12%; left: 46%; color: var(--finance-green); }.finance-ticker { overflow: hidden; background: var(--finance-green); color: #e7eedf; }.finance-ticker-track { width: max-content; display: flex; gap: 20px; align-items: center; padding: 15px 0; font: 10px var(--mono); text-transform: uppercase; animation: financeTicker 24s linear infinite; }.finance-ticker-track b { color: #bfe2aa; font-weight: 400; }.finance-thesis { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10%; padding-top: 145px; padding-bottom: 140px; }.finance-section-label { display: flex; gap: 14px; color: #819183; font: 9px var(--mono); text-transform: uppercase; }.finance-section-label span:first-child { color: var(--finance-green); }.finance-lead { max-width: 700px; margin: 0; font: 600 clamp(36px, 5vw, 69px)/.98 "Manrope", var(--display); letter-spacing: -.12em; }.finance-lead em { color: var(--finance-green); font-style: normal; }.finance-proof-row { display: flex; gap: 35px; border-top: 1px solid rgba(18,35,25,.22); padding-top: 17px; margin-top: 55px; color: var(--finance-green); font: 9px var(--mono); text-transform: uppercase; }.finance-portfolio { background: #dbe6d6; padding: 135px 0 150px; }.finance-portfolio-head { display: grid; grid-template-columns: .7fr 1fr .55fr; gap: 6%; align-items: end; }.finance-portfolio-head h2 { font: 800 clamp(55px, 7vw, 98px)/.74 "Manrope", var(--display); letter-spacing: -.16em; margin: 24px 0 0; }.finance-portfolio-head h2 em { color: var(--finance-green); font: 500 .8em "Manrope", var(--display); letter-spacing: -.13em; }.finance-head-note { color: #657a6a; font: 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; }.finance-table { margin-top: 73px; border-top: 1px solid rgba(18,35,25,.3); }.finance-table-head, .finance-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr .8fr; gap: 20px; align-items: center; }.finance-table-head { padding: 13px 0; color: #829385; font: 9px var(--mono); text-transform: uppercase; }.finance-row { min-height: 85px; border-top: 1px solid rgba(18,35,25,.23); transition: padding .35s, background .35s; }.finance-row:hover { padding-left: 15px; background: rgba(255,255,255,.28); }.finance-row b { color: #173525; font: 600 17px "Manrope", var(--display); letter-spacing: -.07em; }.finance-row > span { color: #6d806e; font: 11px var(--sans); }.finance-row i { display: flex; align-items: center; gap: 10px; font-style: normal; }.finance-row i strong { color: var(--finance-green); font: 10px var(--mono); }.finance-row i em { width: 70px; height: 5px; background: linear-gradient(90deg, var(--finance-green) 0 75%, #afc6ad 76%); border-radius: 10px; }.finance-row:nth-child(3) i em { background: linear-gradient(90deg, var(--finance-green) 0 62%, #afc6ad 63%); }.finance-row:nth-child(4) i em { background: linear-gradient(90deg, var(--finance-green) 0 48%, #afc6ad 49%); }.finance-row:nth-child(5) i em { background: linear-gradient(90deg, var(--finance-green) 0 35%, #afc6ad 36%); }.finance-principles { padding-top: 140px; padding-bottom: 150px; }.finance-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 70px; }.finance-principle-grid article { min-height: 210px; border-top: 2px solid var(--finance-green); padding-top: 14px; }.finance-principle-grid strong { color: var(--finance-green); font: 9px var(--mono); }.finance-principle-grid h3 { color: var(--demo-ink); font: 600 26px "Manrope", var(--display); letter-spacing: -.1em; margin: 52px 0 9px; }.finance-principle-grid p { max-width: 230px; color: #728074; font-size: 12px; line-height: 1.55; }.finance-contact { position: relative; overflow: hidden; background: var(--finance-green); color: #edf1df; padding: 130px 0; }.finance-contact h2 { font: 800 clamp(67px, 9vw, 125px)/.72 "Manrope", var(--display); letter-spacing: -.17em; margin: 27px 0 34px; }.finance-contact h2 em { color: #cde3b8; font-weight: 500; }.finance-contact .finance-kicker { color: #bfe2aa; }.finance-contact .finance-button { border-color: #edf1df; color: #edf1df; }.finance-contact .finance-button:hover { background: #edf1df; color: var(--finance-green); }.finance-contact-stamp { position: absolute; right: 13%; top: 24%; width: 210px; height: 210px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(237,241,223,.4); border-radius: 50%; transform: rotate(15deg); color: #c9dda9; font: 10px/1.2 var(--mono); }.finance-contact-stamp b { font: 500 28px "Manrope", var(--display); letter-spacing: -.1em; }

@keyframes hubSteam { 0%, 100% { opacity: .1; transform: translateY(18px) rotate(11deg); } 50% { opacity: .8; transform: translateY(-9px) rotate(-8deg); } }
@keyframes innSun { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.05); } }
@keyframes plateTurn { to { transform: rotate(360deg); } }
@keyframes radarPulse { 0%, 100% { transform: scale(.96); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes cafeCupFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes cafeSteam { 0%, 100% { opacity: 0; transform: translateY(15px) scaleX(.8) rotate(8deg); } 45% { opacity: .9; } 75% { opacity: .2; transform: translateY(-24px) scaleX(1.15) rotate(-8deg); } }
@keyframes cafeMarquee { to { transform: translateX(-50%); } }
@keyframes cafeOrbit { to { transform: rotate(360deg); } }
@keyframes mapPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(217,88,63,.18); } 50% { box-shadow: 0 0 0 15px rgba(217,88,63,.08); } }
@keyframes plateHover { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-15px) rotate(3deg); } }
@keyframes restaurantMarquee { to { transform: translateX(-50%); } }
@keyframes shopFloat { 0%, 100% { transform: rotate(11deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-13px); } }
@keyframes signalSweep { to { transform: rotate(360deg); } }
@keyframes radarPoint { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes signalOrb { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(7deg) scale(1.05); } }
@keyframes financeOrbit { to { transform: rotate(333deg); } }
@keyframes financeTicker { to { transform: translateX(-50%); } }

@media (max-width: 800px) {
  .hub-preview { height: 460px; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card-bottom h2 { font-size: 22px; }
  .cafe-hero, .finance-hero, .signal-hero, .shop-hero-layout, .inn-booking-inner, .restaurant-reserve-inner { display: block; }
  .cafe-hero, .finance-hero, .signal-hero { padding-top: 125px; padding-bottom: 90px; min-height: auto; }
  .cafe-counter, .finance-orbit-board, .signal-visual { margin-top: 70px; }
  .cafe-counter { height: 480px; }.cafe-stamp { right: 24%; bottom: 11%; }
  .cafe-menu-head, .shop-catalog-head, .signal-workspace-head { display: block; }.cafe-menu-note, .shop-catalog-head p, .signal-workspace-version { display: block; text-align: left; margin-top: 28px; }
  .cafe-menu-grid, .restaurant-dishes, .finance-principle-grid, .signal-principle-grid { grid-template-columns: 1fr; }.cafe-menu-item:nth-child(odd) { border-right: 0; }
  .cafe-story, .cafe-visit, .inn-intro, .restaurant-philosophy, .finance-thesis, .signal-story, .shop-newsletter { display: block; }.cafe-lead, .inn-lead, .restaurant-lead, .finance-lead, .signal-lead { margin-top: 34px; }.cafe-visit, .inn-intro, .restaurant-philosophy, .finance-thesis, .signal-story, .shop-newsletter { padding-top: 95px; padding-bottom: 100px; }.cafe-map { margin-top: 50px; }.cafe-section-label, .inn-side-label, .restaurant-section-label, .finance-section-label { margin-bottom: 30px; }.cafe-photo-band { height: 380px; }
  .inn-hero { min-height: 800px; }.inn-hero-copy { padding-top: 200px; }.inn-hero h1 { font-size: clamp(72px, 18vw, 124px); }.inn-hero-caption { display: grid; gap: 8px; }.inn-sun { left: 62%; top: 30%; width: 105px; }.inn-cabin { right: 11%; bottom: 24%; transform: scale(.72); transform-origin: bottom right; }.inn-intro-note { display: block; }.inn-intro-note p { margin-top: 23px; }.inn-rooms { padding-top: 95px; }.inn-rooms-header { display: block; }.inn-rooms-header p { margin-top: 28px; }.inn-room-rail { display: block; margin-top: 50px; }.inn-room + .inn-room { margin-top: 45px; }.inn-room-art { height: 300px; }.inn-ritual { display: grid; grid-template-columns: auto 1fr; gap: 18px; }.inn-ritual-index { grid-column: 2; text-align: left; }
  .restaurant-hero { min-height: 850px; }.restaurant-hero-copy { padding-top: 210px; }.restaurant-hero h1 { font-size: clamp(72px, 18vw, 125px); }.restaurant-plate { width: 490px; right: -190px; top: 38%; opacity: .92; }.restaurant-hero-stamp { right: 8%; bottom: 9%; }.restaurant-menu-head, .restaurant-reserve-inner { display: block; }.restaurant-menu-date { display: block; text-align: left; margin-top: 28px; }.restaurant-dishes { margin-top: 50px; }.restaurant-dish { min-height: 245px; }.restaurant-gallery { grid-template-columns: 1fr; }.restaurant-gallery-card { min-height: 280px; }.restaurant-reserve-form { margin-top: 50px; }
  .shop-hero { padding-top: 120px; min-height: auto; padding-bottom: 90px; }.shop-hero-layout { padding-top: 55px; }.shop-hero-copy h1 { font-size: clamp(83px, 22vw, 145px); }.shop-hero-product { margin-top: 55px; min-height: 420px; }.shop-categories .container { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }.shop-category-note { width: 100%; margin: 8px 0 0; }.shop-catalog { padding-top: 95px; padding-bottom: 105px; }.shop-product-grid { grid-template-columns: 1fr 1fr; }.shop-product-card-offset { margin-top: 0; }.shop-product-art { height: 260px; }.shop-story { display: block; }.shop-story-shape { min-height: 370px; }.shop-story-copy { min-height: 360px; padding: 70px 9%; }.shop-newsletter form { margin-top: 55px; }
  .signal-hero { padding-bottom: 65px; }.signal-hero h1 { font-size: clamp(82px, 21vw, 135px); }.signal-visual { height: 390px; }.signal-radar { width: 270px; }.signal-status .container { flex-wrap: wrap; gap: 12px 22px; }.signal-status span:last-child { width: 100%; }.signal-story { grid-template-columns: 1fr; }.signal-side-note { text-align: left; margin-top: 30px; }.signal-bento { display: block; }.signal-terminal, .signal-insight, .signal-metric { min-height: 180px; margin-bottom: 12px; }.signal-terminal { min-height: 410px; }.signal-cta { min-height: 550px; }.signal-cta-orb { width: 270px; right: -55px; top: 48%; }
  .finance-hero { padding-bottom: 95px; }.finance-hero h1 { font-size: clamp(80px, 20vw, 135px); }.finance-orbit-board { width: min(100%, 480px); }.finance-proof-row { flex-wrap: wrap; gap: 15px 25px; }.finance-portfolio-head { display: block; }.finance-head-note { display: block; text-align: left; margin-top: 28px; }.finance-table { overflow-x: auto; }.finance-table-head, .finance-row { min-width: 650px; }.finance-contact-stamp { width: 150px; height: 150px; right: -10px; top: auto; bottom: 20px; }.finance-contact { padding-bottom: 240px; }
}
@media (max-width: 520px) {
  .hub-preview { height: 390px; }.hub-cafe-copy, .hub-inn-copy, .hub-restaurant-copy, .hub-shop-v2-copy, .hub-signal-copy, .hub-finance-copy { font-size: 54px; }.hub-restaurant-copy { font-size: 46px; }.hub-finance-stat { right: 7%; bottom: 15%; }
  .cafe-counter { height: 395px; }.cafe-cup { left: 15%; width: 65%; }.cafe-stamp { width: 73px; height: 73px; font-size: 7px; }.cafe-stamp b { font-size: 16px; }.cafe-menu-item h3 { font-size: 25px; }.cafe-menu-item { min-height: 210px; }.cafe-photo-band span { font-size: 22px; }
  .inn-hero { min-height: 730px; }.inn-hero-copy { padding-top: 165px; }.inn-hero h1 { font-size: 76px; }.inn-hero-copy p { font-size: 13px; }.inn-room-art { height: 250px; }.inn-booking-form { padding: 17px; }
  .restaurant-hero { min-height: 760px; }.restaurant-hero-copy { padding-top: 170px; }.restaurant-hero h1 { font-size: 75px; }.restaurant-plate { width: 400px; top: 43%; right: -185px; }.restaurant-hero-stamp { width: 78px; height: 78px; font-size: 7px; }.restaurant-menu, .restaurant-reserve { padding-top: 95px; padding-bottom: 105px; }
  .shop-product-grid { display: block; }.shop-product-card + .shop-product-card { margin-top: 43px; }.shop-product-art { height: 330px; }.shop-hero-product { min-height: 350px; }.shop-hero-sculpture { width: 42%; left: 28%; }
  .signal-visual { height: 310px; }.signal-radar { width: 210px; }.signal-visual-label { font-size: 8px; }.signal-workspace-head h2 { font-size: 58px; }.signal-terminal-body { font-size: 8px; padding: 14px; }.signal-terminal-wave { height: 95px; }
  .finance-hero h1 { font-size: 76px; }.finance-orbit-board { margin-top: 50px; }.finance-orbit-core b { font-size: 28px; }.finance-proof-row { display: grid; grid-template-columns: 1fr 1fr; }.finance-principles { padding-top: 95px; padding-bottom: 100px; }
}