[hidden] { display: none !important; }
.logo img[src*="bold-clear-c"] { object-fit: cover; object-position: center center; }
.service-detail { display: block; min-height: 0px; padding: 0px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 65%); }
.service-detail-copy { max-width: none; padding: clamp(1.35rem, 3vw, 2rem); border-bottom: 1px solid rgba(232, 185, 78, 0.14); }
.service-detail h3 { font-size: clamp(1.8rem, 4vw, 3rem); }
.service-detail-description { max-width: 52rem !important; }
.service-showrooms { padding: clamp(1rem, 2.5vw, 1.55rem); transition: height 380ms cubic-bezier(0.22, 0.8, 0.24, 1); }
.showroom-panel { animation: 320ms cubic-bezier(0.22, 0.8, 0.24, 1) 0s 1 normal both running showroom-arrive; }
.showroom-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.showroom-kicker { display: block; margin-bottom: 0.25rem; color: rgb(217, 180, 95); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.17em; text-transform: uppercase; }
.showroom-heading h4, .brand-stage-heading h5, .digital-stage-title { margin: 0px; color: var(--cream); font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -0.025em; }
.showroom-heading h4 { font-size: clamp(1.6rem, 3.5vw, 2.35rem); }
.showroom-heading p, .brand-stage-heading p { margin: 0.3rem 0px 0px; color: rgb(191, 179, 156); line-height: 1.55; }
.showroom-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.45rem 0.65rem; color: rgb(217, 200, 158); border: 1px solid rgba(232, 185, 78, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.024); font-size: 0.75rem; font-weight: 750; cursor: pointer; user-select: none; transition: color 180ms, border-color 180ms, background 180ms, box-shadow 180ms, filter 180ms, transform 180ms; }
.showroom-status > span { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: rgb(237, 200, 111); box-shadow: rgba(237, 200, 111, 0.7) 0px 0px 0.65rem; }
.showroom-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 0.65rem; margin-bottom: 0.9rem; }
.showroom-option, .brand-category, .digital-action, .card-style, .format-button, .gateway-choice, .device-toggle { cursor: pointer; transition: transform 180ms cubic-bezier(0.2, 0.75, 0.2, 1), border-color 180ms, box-shadow 180ms, filter 180ms, background 180ms; }
.showroom-option { min-width: 0px; padding: 0.42rem; color: rgb(221, 209, 184); border: 1px solid rgba(232, 185, 78, 0.25); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.016); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.78rem; font-weight: 760; text-align: center; }
.showroom-option > span:last-child { display: block; padding: 0.44rem 0.2rem 0.25rem; }
.showroom-option:hover, .showroom-option:focus-visible, .showroom-option.is-selected, .brand-category:hover, .brand-category:focus-visible, .brand-category.is-selected, .digital-action:hover, .digital-action:focus-visible, .digital-action.is-selected, .card-style:hover, .card-style:focus-visible, .card-style.is-selected, .gateway-choice:hover, .gateway-choice:focus-visible, .gateway-choice.is-selected { transform: translateY(-5px) scale(1.012); border-color: rgba(255, 220, 134, 0.86); box-shadow: rgba(255, 223, 144, 0.28) 0px 0px 0px 1px, rgba(0, 0, 0, 0.32) 0px 0.85rem 1.8rem, rgba(232, 185, 78, 0.18) 0px 0px 1.2rem; filter: brightness(1.045); }
.showroom-option:active, .brand-category:active, .digital-action:active, .card-style:active, .gateway-choice:active, .format-button:active, .device-toggle:active { transform: translateY(-1px) scale(0.985); }
.touch-pop-active { animation: 360ms cubic-bezier(0.2, 0.8, 0.25, 1) 0s 1 normal none running touch-pop; }
.mini-site { position: relative; min-height: 7.1rem; display: block; overflow: hidden; padding: 1.7rem 0.65rem 0.65rem; color: white; border-radius: 0.62rem; background: linear-gradient(135deg, rgb(23, 38, 63), rgb(7, 16, 31) 68%); text-align: left; }
.mini-site::before { content: ""; position: absolute; inset: 0px 0px auto; height: 1.12rem; background: rgba(3, 4, 5, 0.58); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mini-site::after { content: ""; position: absolute; width: 5.4rem; height: 5.4rem; right: -1.1rem; bottom: -1.45rem; border-radius: 50%; background: radial-gradient(circle at 38% 35%, var(--mini-accent, #ddae50), transparent 66%); opacity: 0.62; }
.mini-site i { position: absolute; z-index: 1; top: 0.34rem; left: 0.42rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--mini-accent, #efc970); box-shadow: 0 0 0.6rem var(--mini-accent, #efc970); }
.mini-site b { position: relative; z-index: 1; display: block; max-width: 9rem; font-family: Georgia, "Times New Roman", serif; font-size: 0.96rem; font-weight: 500; line-height: 1.07; }
.mini-site em { position: relative; z-index: 1; display: inline-block; margin-top: 0.65rem; padding: 0.25rem 0.38rem; color: rgb(28, 18, 4); border-radius: 0.25rem; background: var(--mini-accent, #efc970); font-size: 0.55rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.theme-restaurant .mini-site { --mini-accent: #e3a84f; background: linear-gradient(135deg, rgb(48, 28, 17), rgb(13, 9, 6) 70%); }
.theme-barber .mini-site { --mini-accent: #c9b08b; background: linear-gradient(135deg, rgb(44, 42, 41), rgb(8, 8, 8) 70%); }
.theme-professional .mini-site { --mini-accent: #6aa4d7; background: linear-gradient(135deg, rgb(34, 61, 93), rgb(238, 244, 248) 72%); color: rgb(255, 255, 255); }
.theme-home .mini-site { --mini-accent: #d89958; background: linear-gradient(135deg, rgb(241, 231, 216), rgb(121, 69, 42) 78%); color: rgb(36, 23, 14); }
.theme-modern .mini-site { --mini-accent: #e3bd64; }
.theme-warm .mini-site { --mini-accent: #f0aa52; background: linear-gradient(135deg, rgb(75, 42, 22), rgb(18, 37, 29) 75%); }
.theme-bold .mini-site { --mini-accent: #f04bd3; background: linear-gradient(135deg, rgb(43, 14, 78), rgb(6, 17, 31) 70%); }
.theme-luxury .mini-site { --mini-accent: #e9c16c; background: linear-gradient(135deg, rgb(45, 33, 23), rgb(9, 7, 5) 70%); }
.comparison-stage { --preview-accent: #d8a04a; position: relative; min-height: clamp(20rem, 42vw, 28rem); overflow: hidden; border: 1px solid rgba(238, 196, 99, 0.48); border-radius: 1.05rem; background: rgb(239, 233, 221); box-shadow: rgba(0, 0, 0, 0.32) 0px 1.3rem 3rem; isolation: isolate; }
.comparison-stage[data-theme="barber"] { --preview-accent: #c3a77e; }
.comparison-stage[data-theme="professional"] { --preview-accent: #5c9bd2; }
.comparison-stage[data-theme="home"] { --preview-accent: #d38347; }
.comparison-layer { position: absolute; inset: 0px; }
.comparison-before { z-index: 2; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison-after { z-index: 1; }
.mock-site { position: absolute; inset: 0px; }
.mock-site-after { color: white; background: linear-gradient(125deg, rgb(7, 19, 31), rgb(11, 30, 47) 54%, rgb(21, 57, 91)); }
.mock-site-after::after { content: ""; position: absolute; inset: 3rem 0px 0px 55%; background: linear-gradient(145deg, transparent, color-mix(in srgb, var(--preview-accent) 40%, transparent)), radial-gradient(circle at 70% 35%, var(--preview-accent), transparent 42%); opacity: 0.52; }
.mock-nav { position: relative; z-index: 1; min-height: 3rem; display: flex; align-items: center; gap: 1rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: rgba(3, 6, 9, 0.5); }
.mock-nav strong { margin-right: auto; color: var(--preview-accent); font-family: Georgia, serif; }
.mock-nav span { color: rgb(220, 228, 232); font-size: 0.65rem; }
.mock-nav b { padding: 0.38rem 0.56rem; color: rgb(22, 16, 6); border-radius: 0.3rem; background: var(--preview-accent); font-size: 0.63rem; text-transform: uppercase; }
.mock-hero { position: relative; z-index: 1; max-width: 55%; padding: clamp(2.2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.2rem); }
.mock-hero .mock-eyebrow { color: var(--preview-accent); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.16em; }
.mock-hero h5 { margin: 0.55rem 0px; color: white; font-family: Georgia, serif; font-size: clamp(1.45rem, 4vw, 3rem); font-weight: 500; line-height: 0.98; }
.mock-hero p { max-width: 24rem; margin: 0px 0px 1rem; color: rgb(209, 216, 218); font-size: clamp(0.7rem, 1.5vw, 0.9rem); line-height: 1.45; }
.mock-cta { display: inline-block; padding: 0.55rem 0.75rem; color: rgb(23, 16, 6); border-radius: 0.35rem; background: var(--preview-accent); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; }
.mock-feature-row { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 0.7rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.mock-feature-row span { padding: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 0.4rem; background: rgba(0, 0, 0, 0.2); color: rgb(233, 230, 220); font-size: 0.65rem; text-align: center; }
.mock-site-before { color: rgb(36, 50, 72); background: rgb(217, 217, 217); font-family: Arial, sans-serif; }
.legacy-title { padding: 0.7rem; color: rgb(39, 79, 134); border-bottom: 5px solid rgb(157, 157, 157); background: rgb(239, 239, 239); font-size: clamp(1rem, 2.5vw, 1.6rem); font-weight: 800; }
.legacy-layout { display: grid; grid-template-columns: 7.5rem 1fr; min-height: calc(100% - 3.2rem); }
.legacy-nav { padding: 0.8rem; color: rgb(18, 42, 78); background: rgb(174, 189, 208); font-size: 0.7rem; line-height: 2.1; text-decoration: underline; }
.legacy-copy { padding: clamp(1rem, 3vw, 2rem); background: rgb(244, 244, 244); }
.legacy-copy h5 { margin: 0px 0px 0.8rem; color: rgb(17, 17, 17); font-family: Arial, sans-serif; font-size: clamp(1.2rem, 3.2vw, 2rem); }
.legacy-copy p { max-width: 27rem; color: rgb(51, 51, 51); font-size: 0.75rem; line-height: 1.35; }
.legacy-copy span { display: block; width: 78%; height: 0.5rem; margin: 0.65rem 0px; background: rgb(213, 213, 213); }
.comparison-label { position: absolute; z-index: 4; top: 0.75rem; padding: 0.35rem 0.62rem; border-radius: 999px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.before-label { left: 0.75rem; color: white; background: rgb(37, 37, 37); }
.after-label { right: 0.75rem; color: rgb(23, 16, 6); background: var(--preview-accent); }
.comparison-range { position: absolute; z-index: 6; inset: 0px; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: ew-resize; }
.comparison-handle { position: absolute; z-index: 5; top: 50%; left: var(--split); width: 3rem; height: 3rem; display: grid; place-items: center; color: rgb(28, 18, 4); border: 2px solid rgb(255, 240, 189); border-radius: 50%; background: linear-gradient(135deg, rgb(246, 223, 162), rgb(189, 140, 54)); box-shadow: rgba(232, 185, 78, 0.5) 0px 0px 1.4rem; font-size: 1.15rem; font-weight: 900; transform: translate(-50%, -50%); }
.comparison-handle::before { content: ""; position: absolute; width: 2px; height: 50rem; top: 50%; left: 50%; z-index: -1; background: linear-gradient(transparent, rgb(245, 217, 143) 12%, rgb(245, 217, 143) 88%, transparent); transform: translate(-50%, -50%); }
.benefit-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.benefit-chips span { flex: 1 1 7rem; padding: 0.58rem 0.65rem; color: rgb(228, 216, 191); border: 1px solid rgba(232, 185, 78, 0.22); border-radius: 0.68rem; background: rgba(255, 255, 255, 0.02); font-size: 0.75rem; font-weight: 730; text-align: center; }
.benefit-chip { cursor: pointer; user-select: none; transition: transform 180ms, border-color 180ms, box-shadow 180ms, filter 180ms; }
.launch-preview { --launch-accent: #d9b45f; overflow: hidden; padding: 0.75rem; border: 1px solid rgba(238, 196, 99, 0.45); border-radius: 1.05rem; background: linear-gradient(145deg, rgba(24, 18, 10, 0.9), rgba(4, 4, 3, 0.98)); box-shadow: rgba(0, 0, 0, 0.3) 0px 1.3rem 3rem; }
.launch-preview[data-style="warm"] { --launch-accent: #e19a55; }
.launch-preview[data-style="bold"] { --launch-accent: #e35bcf; }
.launch-preview[data-style="luxury"] { --launch-accent: #d2b074; }
.preview-toolbar { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.7rem; }
.device-toggle { min-width: 7rem; padding: 0.48rem 0.75rem; color: rgb(203, 191, 168); border: 1px solid rgba(232, 185, 78, 0.22); background: transparent; }
.device-toggle:first-child { border-radius: 999px 0px 0px 999px; }
.device-toggle:nth-child(2) { border-radius: 0px 999px 999px 0px; }
.device-toggle.is-selected { color: rgb(23, 16, 6); background: linear-gradient(135deg, rgb(244, 221, 160), rgb(197, 150, 64)); box-shadow: rgba(232, 185, 78, 0.2) 0px 0px 1rem; }
.preview-dots { display: flex; gap: 0.4rem; margin-left: auto; }
.preview-dots i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: rgb(74, 68, 56); transition: background 220ms, box-shadow 220ms, transform 220ms; }
.launch-preview[data-device="desktop"] .preview-dot-desktop, .launch-preview[data-device="mobile"] .preview-dot-mobile { background: var(--launch-accent); box-shadow: 0 0 0.8rem color-mix(in srgb, var(--launch-accent) 62%, transparent); transform: scale(1.18); }
.device-previews { position: relative; min-height: clamp(20rem, 43vw, 29rem); perspective: 1200px; }
.site-window { overflow: hidden; border: 0.35rem solid rgb(220, 226, 227); border-radius: 0.7rem; background: rgb(237, 242, 242); box-shadow: rgba(0, 0, 0, 0.35) 0px 1rem 2rem; transition: transform 360ms, opacity 360ms, filter 360ms; }
.desktop-window { position: absolute; inset: 0px 18% 0px 0px; }
.mobile-window { position: absolute; right: 0px; bottom: 0px; width: 24%; height: 88%; border-width: 0.28rem; }
.new-site-nav { min-height: 2.7rem; display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.65rem; color: rgb(18, 33, 58); background: rgb(247, 250, 248); }
.new-site-nav img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.new-site-nav span { color: rgb(26, 39, 64); font-family: Georgia, serif; font-weight: 800; }
.new-site-nav small { margin-left: auto; font-size: clamp(0.48rem, 1vw, 0.65rem); }
.new-site-hero { min-height: 67%; padding: clamp(1.2rem, 4vw, 3rem); color: rgb(21, 35, 60); background: radial-gradient(circle at 86% 55%, color-mix(in srgb, var(--launch-accent) 58%, white), transparent 30%), linear-gradient(135deg, #f7faf8, #dce8ed); }
.new-site-hero > span { color: rgb(126, 99, 50); font-size: 0.56rem; font-weight: 850; letter-spacing: 0.14em; }
.new-site-hero h5 { max-width: 12ch; margin: 0.65rem 0px; color: rgb(19, 36, 61); font-family: Georgia, serif; font-size: clamp(1.35rem, 4vw, 3rem); font-weight: 500; line-height: 0.98; }
.new-site-hero p { max-width: 25rem; color: rgb(56, 71, 91); font-size: clamp(0.65rem, 1.25vw, 0.82rem); line-height: 1.4; }
.new-site-hero b { display: inline-block; margin-top: 0.4rem; padding: 0.55rem 0.75rem; color: rgb(23, 16, 6); border-radius: 0.3rem; background: var(--launch-accent); font-size: 0.65rem; text-transform: uppercase; }
.new-site-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; padding: 0.7rem; color: rgb(33, 50, 74); background: white; font-size: 0.68rem; text-align: center; }
.new-site-features span + span { border-left: 1px solid rgb(217, 220, 224); }
.new-site-features small { color: rgb(107, 115, 126); }
.mobile-window .new-site-nav span { font-size: 0.65rem; }
.mobile-window .new-site-hero { padding: 1rem 0.72rem; }
.mobile-window .new-site-hero h5 { font-size: clamp(1rem, 2vw, 1.45rem); }
.mobile-window .new-site-hero p { font-size: 0.6rem; }
.launch-preview[data-style="warm"] .new-site-hero { color: rgb(36, 24, 14); background: radial-gradient(circle at 80% 28%, rgb(229, 168, 93), transparent 31%), linear-gradient(135deg, rgb(247, 234, 212), rgb(173, 193, 166)); }
.launch-preview[data-style="bold"] .new-site-hero { color: white; background: radial-gradient(circle at 78% 50%, rgb(233, 78, 206), transparent 28%), linear-gradient(135deg, rgb(32, 12, 67), rgb(6, 26, 47)); }
.launch-preview[data-style="bold"] .new-site-hero h5, .launch-preview[data-style="bold"] .new-site-hero p { color: white; }
.launch-preview[data-style="luxury"] .new-site-hero { background: radial-gradient(circle at 82% 45%, rgb(169, 134, 97), transparent 35%), linear-gradient(135deg, rgb(21, 16, 11), rgb(61, 48, 36)); }
.launch-preview[data-style="luxury"] .new-site-hero h5, .launch-preview[data-style="luxury"] .new-site-hero p { color: rgb(247, 234, 210); }
.launch-preview[data-device="mobile"] .desktop-window { opacity: 0.38; filter: blur(1px) saturate(0.5); transform: translateX(-6%) scale(0.9); }
.launch-preview[data-device="mobile"] .mobile-window { z-index: 2; width: 42%; height: 100%; right: 29%; transform: scale(1.03); }
.digital-heading { margin-bottom: 0.8rem; text-align: center; }
.digital-heading > div { width: 100%; }
.digital-actions { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0.55rem; margin-bottom: 0.7rem; }
.digital-action { min-height: 6rem; display: grid; place-items: center; align-content: center; gap: 0.35rem; padding: 0.65rem; color: rgb(221, 209, 184); border: 1px solid rgba(232, 185, 78, 0.24); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.016); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.75rem; font-weight: 780; line-height: 1.22; text-align: center; }
.digital-action-icon { min-height: 1.45rem; color: rgb(245, 216, 135); font-size: 1.55rem; line-height: 1; }
.qr-mini { width: 1.35rem; height: 1.35rem; background: linear-gradient(90deg, currentcolor 28%, transparent 28%, transparent 36%, currentcolor 36%, currentcolor 64%, transparent 64%, transparent 72%, currentcolor 72%), linear-gradient(currentcolor 28%, transparent 28%, transparent 36%, currentcolor 36%, currentcolor 64%, transparent 64%, transparent 72%, currentcolor 72%); }
.digital-stage { position: relative; overflow: hidden; padding: clamp(0.8rem, 2vw, 1.1rem); border: 1px solid rgba(238, 196, 99, 0.43); border-radius: 1.05rem; background: radial-gradient(circle at 50% 0px, rgba(232, 185, 78, 0.08), transparent 18rem), rgb(8, 7, 4); box-shadow: rgba(0, 0, 0, 0.32) 0px 1.4rem 3rem; perspective: 1300px; }
.digital-stage::before, .digital-stage::after { content: "↻"; position: absolute; top: 50%; z-index: 4; color: rgba(239, 200, 108, 0.38); font-size: 1.4rem; pointer-events: none; }
.digital-stage::before { left: 0.25rem; transform: rotate(90deg); }
.digital-stage::after { right: 0.25rem; transform: rotate(-90deg); }
.digital-stage-title { margin-bottom: 0.8rem; font-size: clamp(1.45rem, 3vw, 2rem); text-align: center; }
.digital-stage-flip { transform-style: preserve-3d; }
.digital-stage-flip.is-flipping { animation: 420ms cubic-bezier(0.45, 0.05, 0.25, 1) 0s 1 normal none running stage-flip; }
.digital-view { animation: 260ms ease 0s 1 normal both running showroom-arrive; }
.stage-intro { margin: 0px 0px 0.75rem; color: rgb(200, 188, 165); text-align: center; }
.live-card { width: min(100%, 42rem); min-height: clamp(15rem, 36vw, 22rem); display: block; margin: 0px auto; padding: 0px; border: 0px; border-radius: 1rem; background: transparent; cursor: pointer; perspective: 1200px; }
.live-card-inner { position: relative; width: 100%; min-height: inherit; display: block; transform-style: preserve-3d; transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.live-card.is-flipped .live-card-inner { transform: rotateY(180deg); }
.live-card-face { position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.38rem; padding: clamp(1.2rem, 4vw, 2.6rem); overflow: hidden; color: white; border: 1px solid rgba(246, 211, 128, 0.75); border-radius: 1rem; background: radial-gradient(circle at 15% 18%, rgba(232, 185, 78, 0.16), transparent 12rem), linear-gradient(135deg, rgb(17, 16, 15), rgb(2, 2, 2) 68%); box-shadow: rgba(0, 0, 0, 0.45) 0px 1.5rem 3rem, rgba(232, 185, 78, 0.12) 0px 0px 1rem; backface-visibility: hidden; text-align: left; }
.live-card-face::after { content: ""; position: absolute; inset: -30% -15% auto 55%; height: 180%; border-left: 2px solid rgb(216, 173, 81); background: linear-gradient(135deg, transparent 38%, rgba(217, 181, 95, 0.15) 39%, rgba(217, 181, 95, 0.15) 48%, transparent 49%); transform: skewX(-14deg); }
.live-card-face img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; }
.live-card-face small { color: rgb(231, 198, 111); font-weight: 850; letter-spacing: 0.17em; }
.live-card-face strong { margin-top: 0.6rem; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.live-card-face em { color: rgb(213, 201, 180); font-style: normal; }
.live-card-face b { margin-top: 1rem; color: rgb(232, 198, 110); font-family: Georgia, serif; font-weight: 500; }
.live-card-back { align-items: center; transform: rotateY(180deg); text-align: center; }
.live-card-back::after { display: none; }
.tap-to-flip { margin: 0.65rem 0px 0.8rem; color: rgb(231, 198, 111); font-size: 0.82rem; text-align: center; }
.tap-to-flip span { display: inline-block; margin-right: 0.3rem; }
.contact-actions { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 0.45rem; }
.contact-action { min-width: 0px; display: grid; place-items: center; gap: 0.25rem; padding: 0.55rem 0.25rem; color: rgb(215, 203, 179); border: 1px solid rgba(232, 185, 78, 0.18); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.02); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.64rem; font-weight: 750; text-decoration: none; cursor: default; transition: transform 160ms, box-shadow 160ms, border-color 160ms, color 160ms, background 160ms; }
.contact-action span { width: 2rem; height: 2rem; display: grid; place-items: center; color: rgb(242, 210, 124); border: 1px solid rgba(232, 185, 78, 0.3); border-radius: 50%; font-size: 1rem; }
.contact-action:hover, .contact-action:focus-visible { color: rgb(255, 241, 199); transform: translateY(-3px); border-color: rgba(255, 222, 139, 0.7); background: rgba(232, 185, 78, 0.055); box-shadow: rgba(232, 185, 78, 0.2) 0px 0px 1rem; }
.contact-action:disabled { opacity: 0.72; cursor: not-allowed; transform: none; }
.demo-contact-note { margin: 0.65rem 0px 0px; color: rgb(149, 139, 121); font-size: 0.68rem; text-align: center; }
.qr-view { min-height: 28rem; display: grid; place-items: center; align-content: center; }
.qr-view[hidden] { display: none; }
.qr-pulse-frame { position: relative; width: min(65vw, 19rem); display: block; padding: 0.65rem; border: 1px solid rgb(240, 203, 115); border-radius: 1rem; background: rgb(255, 255, 255); box-shadow: rgba(232, 185, 78, 0.35) 0px 0px 1.4rem; }
.qr-pulse-frame::before, .qr-pulse-frame::after { content: ""; position: absolute; inset: -0.55rem; z-index: -1; border: 1px solid rgba(232, 185, 78, 0.5); border-radius: 1.3rem; animation: 2.4s ease-out 0s infinite normal none running qr-frame-pulse; }
.qr-pulse-frame::after { animation-delay: 1.2s; }
.qr-pulse-frame img, .qr-pulse-frame canvas { display: block; width: 100%; height: auto; background: rgb(255, 255, 255); image-rendering: pixelated; }
.qr-note { margin: 1.1rem 0px 0px; color: rgb(215, 189, 123); font-size: 0.78rem; text-align: center; }
.studio-topline { display: grid; grid-template-columns: minmax(0px, 1.25fr) minmax(8rem, 0.62fr) minmax(12rem, 1fr); gap: 0.65rem; }
.studio-card-preview, .studio-qr-preview, .studio-contact-details { min-width: 0px; padding: 0.62rem; border: 1px solid rgba(232, 185, 78, 0.2); border-radius: 0.72rem; background: rgba(255, 255, 255, 0.016); }
.studio-label { display: block; margin-bottom: 0.48rem; color: rgb(242, 231, 210); font-size: 0.75rem; font-weight: 850; text-transform: uppercase; }
.studio-card-art { --card-bg: linear-gradient(135deg, #17253a, #050607 72%); min-height: 11rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.2rem; padding: 0.75rem; overflow: hidden; color: white; border: 1px solid rgba(246, 211, 128, 0.6); border-radius: 0.65rem; background: var(--card-bg); box-shadow: rgba(0, 0, 0, 0.28) 0px 0.75rem 1.6rem; }
.studio-card-art img { width: 2.5rem; height: 2.5rem; margin-bottom: auto; border-radius: 50%; object-fit: cover; }
.studio-card-art > span { color: rgb(228, 195, 106); font-family: Georgia, serif; font-size: 0.75rem; letter-spacing: 0.11em; }
.studio-card-art strong { font-size: 0.88rem; }
.studio-card-art small { color: rgb(215, 203, 183); font-size: 0.62rem; }
.studio-card-preview[data-card-style="minimal"] .studio-card-art { --card-bg: linear-gradient(135deg, #fff, #eae7df); color: rgb(33, 23, 11); }
.studio-card-preview[data-card-style="bold"] .studio-card-art { --card-bg: linear-gradient(135deg, #28104e, #0788d7 68%, #f244bd); }
.studio-card-preview[data-card-style="warm"] .studio-card-art { --card-bg: linear-gradient(135deg, #fff2df, #c37c63); color: rgb(74, 37, 26); }
.studio-card-preview[data-card-style="dark"] .studio-card-art { --card-bg: linear-gradient(135deg, #121212, #010101 65%, #78551d); }
.studio-card-preview[data-card-style="social"] .studio-card-art { --card-bg: linear-gradient(135deg, #12194a, #5832d7 55%, #ed3bc2); }
.studio-qr-preview img, .studio-qr-preview canvas { width: min(100%, 9rem); height: auto; display: block; margin: 0px auto; padding: 0.3rem; border-radius: 0.4rem; background: rgb(255, 255, 255); image-rendering: pixelated; }
.studio-contact-details { display: grid; align-content: start; gap: 0.42rem; }
.studio-contact-details > span:not(.studio-label) { overflow: hidden; padding: 0.5rem 0.55rem; color: rgb(216, 205, 183); border: 1px solid rgba(232, 185, 78, 0.12); border-radius: 0.45rem; background: rgba(0, 0, 0, 0.2); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.card-style-heading { display: flex; justify-content: space-between; gap: 1rem; margin: 0.8rem 0px 0.55rem; color: rgb(241, 229, 207); font-size: 0.8rem; }
.card-style-heading span { color: rgb(169, 158, 139); }
.card-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0.55rem; }
.card-style { min-width: 0px; padding: 0.45rem; color: rgb(230, 219, 197); border: 1px solid rgba(232, 185, 78, 0.2); border-radius: 0.65rem; background: transparent; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.65rem; font-weight: 740; }
.card-style i { min-height: 5rem; display: grid; place-items: center; margin-bottom: 0.4rem; overflow: hidden; border-radius: 0.45rem; color: rgb(239, 203, 114); background: linear-gradient(135deg, rgb(23, 36, 59), rgb(3, 3, 3)); font-family: Georgia, serif; font-size: 2rem; font-style: normal; }
.style-minimal i { color: rgb(65, 42, 24); background: linear-gradient(135deg, rgb(255, 255, 255), rgb(231, 225, 215)); }
.style-bold i { color: rgb(247, 220, 140); background: linear-gradient(135deg, rgb(36, 6, 77), rgb(22, 124, 214) 60%, rgb(230, 63, 192)); }
.style-warm i { color: rgb(154, 90, 66); background: linear-gradient(135deg, rgb(255, 241, 221), rgb(216, 147, 120)); }
.style-dark i { background: linear-gradient(135deg, rgb(21, 21, 21), rgb(1, 1, 1) 70%, rgb(143, 107, 39)); }
.style-social i { background: linear-gradient(135deg, rgb(20, 19, 76), rgb(91, 44, 200) 55%, rgb(238, 58, 187)); }
.use-style-button { width: 100%; min-height: 3.2rem; margin-top: 0.75rem; color: rgb(26, 17, 4); border: 1px solid rgb(244, 214, 139); border-radius: 0.65rem; background: linear-gradient(135deg, rgb(247, 223, 160), rgb(200, 151, 64)); box-shadow: rgba(0, 0, 0, 0.25) 0px 0.8rem 1.7rem, rgba(232, 185, 78, 0.12) 0px 0px 1.1rem; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 900; cursor: pointer; }
.brand-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.55rem; margin-bottom: 0.8rem; }
.brand-category { min-height: 3.9rem; display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; color: rgb(221, 209, 184); border: 1px solid rgba(232, 185, 78, 0.22); border-radius: 0.78rem; background: rgba(255, 255, 255, 0.016); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.78rem; font-weight: 780; text-align: left; }
.brand-category > span { width: 2rem; height: 2rem; display: grid; place-items: center; color: rgb(239, 203, 114); border: 1px solid rgba(232, 185, 78, 0.25); border-radius: 0.5rem; font-size: 1.1rem; }
.brand-stage { padding: clamp(0.8rem, 2vw, 1.1rem); border: 1px solid rgba(232, 185, 78, 0.25); border-radius: 1rem; background: radial-gradient(circle at 50% 0px, rgba(232, 185, 78, 0.07), transparent 16rem), rgba(1, 1, 1, 0.28); }
.brand-stage-heading { margin-bottom: 0.75rem; }
.brand-stage-heading h5 { font-size: clamp(1.45rem, 3vw, 2rem); }
.brand-preview { animation: 260ms ease 0s 1 normal both running showroom-arrive; }
.social-format-set { min-height: 20rem; display: grid; grid-template-columns: 1fr 1.08fr 0.92fr; align-items: end; gap: 0.7rem; padding: 0.7rem 0.4rem; }
.social-art { min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; padding: 1rem; overflow: hidden; color: white; border: 1px solid rgba(238, 196, 99, 0.62); border-radius: 0.65rem; background: radial-gradient(circle at 75% 30%, rgba(238, 173, 78, 0.55), transparent 30%), linear-gradient(145deg, rgb(30, 53, 28), rgb(9, 8, 5) 74%); box-shadow: rgba(0, 0, 0, 0.32) 0px 1rem 2rem; transition: transform 250ms, box-shadow 250ms, filter 250ms; }
.social-art:nth-child(2) { min-height: 18rem; background: radial-gradient(circle at 70% 34%, rgba(222, 139, 67, 0.5), transparent 28%), linear-gradient(145deg, rgb(38, 59, 36), rgb(9, 8, 6) 74%); }
.social-art:nth-child(3) { min-height: 19.5rem; background: radial-gradient(circle at 62% 35%, rgba(198, 142, 61, 0.46), transparent 26%), linear-gradient(145deg, rgb(16, 41, 38), rgb(7, 7, 5) 74%); }
.social-art:not(.is-featured) { filter: brightness(0.78); transform: scale(0.94); }
.social-art.is-featured { transform: translateY(-5px) scale(1.02); box-shadow: rgba(232, 185, 78, 0.22) 0px 0px 1.4rem, rgba(0, 0, 0, 0.4) 0px 1.2rem 2.4rem; }
.social-art small { color: rgb(242, 209, 123); font-weight: 850; letter-spacing: 0.12em; }
.social-art strong { font-family: Georgia, serif; font-size: clamp(1rem, 2.2vw, 1.55rem); line-height: 1.02; }
.social-art span { align-self: flex-start; padding: 0.38rem 0.55rem; color: rgb(24, 17, 6); border-radius: 999px; background: rgb(232, 197, 109); font-size: 0.58rem; font-weight: 900; }
.format-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.format-button { min-height: 2.8rem; color: rgb(215, 204, 183); border: 1px solid rgba(232, 185, 78, 0.22); border-radius: 0.65rem; background: transparent; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.75rem; font-weight: 760; }
.format-button.is-selected { color: rgb(255, 243, 208); border-color: rgb(230, 189, 92); box-shadow: rgba(232, 185, 78, 0.18) 0px 0px 1rem; transform: translateY(-2px); }
.brand-kit-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem; margin-top: 0.8rem; padding: 0.75rem; border: 1px solid rgba(232, 185, 78, 0.18); border-radius: 0.72rem; background: rgba(255, 255, 255, 0.016); }
.brand-kit-logo { display: flex; align-items: center; gap: 0.5rem; color: rgb(240, 209, 128); font-size: 0.7rem; font-weight: 850; }
.brand-kit-logo b { font-size: 1.5rem; }
.brand-swatches { display: flex; gap: 0.35rem; }
.brand-swatches i { width: 1.45rem; height: 1.45rem; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: rgb(82, 98, 59); }
.brand-swatches i:nth-child(2) { background: rgb(183, 119, 63); }
.brand-swatches i:nth-child(3) { background: rgb(244, 230, 200); }
.brand-swatches i:nth-child(4) { background: rgb(21, 21, 18); }
.brand-type { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: 0.1rem 0.45rem; color: rgb(191, 179, 156); font-size: 0.58rem; }
.brand-type b { color: white; font-family: Georgia, serif; font-size: 1.15rem; }
.logo-concepts, .flyer-set { min-height: 19rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.logo-concepts > div, .flyer-set article { display: grid; place-items: center; align-content: center; gap: 0.5rem; min-width: 0px; padding: 0.8rem; color: rgb(230, 214, 181); border: 1px solid rgba(232, 185, 78, 0.35); border-radius: 0.75rem; background: linear-gradient(145deg, rgb(24, 41, 29), rgb(8, 8, 6)); text-align: center; }
.logo-concepts b { color: rgb(236, 203, 116); font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 4.2rem); }
.flyer-set article:nth-child(2) { background: linear-gradient(145deg, rgb(84, 42, 29), rgb(19, 7, 6)); }
.flyer-set article:nth-child(3) { background: linear-gradient(145deg, rgb(36, 57, 86), rgb(7, 10, 16)); }
.flyer-set small { color: rgb(232, 198, 110); letter-spacing: 0.1em; }
.flyer-set strong { font-family: Georgia, serif; font-size: clamp(1.2rem, 3vw, 2rem); }
.flyer-set span { padding: 0.35rem 0.5rem; color: rgb(27, 18, 5); border-radius: 999px; background: rgb(230, 196, 110); font-size: 0.65rem; }
.banner-set { display: grid; gap: 0.7rem; }
.banner-set article { min-height: 8rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: white; border: 1px solid rgba(232, 185, 78, 0.35); border-radius: 0.75rem; background: radial-gradient(circle at 82% 45%, rgb(131, 98, 52), transparent 24%), linear-gradient(125deg, rgb(23, 50, 31), rgb(7, 7, 5)); }
.banner-set article:nth-child(2) { background: radial-gradient(circle at 82% 45%, rgb(90, 119, 166), transparent 24%), linear-gradient(125deg, rgb(43, 23, 47), rgb(7, 5, 7)); }
.banner-set small { color: rgb(233, 200, 111); letter-spacing: 0.12em; }
.banner-set strong { margin-top: 0.45rem; font-family: Georgia, serif; font-size: clamp(1.2rem, 3vw, 2.2rem); }
.project-reveal-button { position: relative; width: calc(100% - clamp(2rem, 5vw, 3.1rem)); min-height: 4.35rem; margin: 0px clamp(1rem, 2.5vw, 1.55rem) clamp(1rem, 2.5vw, 1.55rem); overflow: hidden; border: 1px solid rgba(246, 211, 128, 0.76); border-radius: 48% / 38%; background: radial-gradient(at 50% 0px, rgba(232, 185, 78, 0.13), transparent 58%), linear-gradient(rgb(24, 17, 7), rgb(7, 6, 4)); box-shadow: rgba(255, 226, 150, 0.1) 0px -0.2rem 1.2rem, rgba(0, 0, 0, 0.32) 0px 0.95rem 2rem, rgba(255, 239, 196, 0.15) 0px 1px inset, rgba(162, 112, 32, 0.32) 0px -1px inset; font-size: 1rem; }
.project-reveal-button::after { content: ""; position: absolute; inset: 0.38rem 8%; border-block: 1px solid rgba(241, 203, 111, 0.16); border-radius: 50%; pointer-events: none; }
.contact-card { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; transition: min-height 420ms, padding 420ms; }
.gateway-intro { grid-column: 1; }
.gateway-actions { position: relative; z-index: 2; grid-column: 2; display: grid; justify-items: stretch; gap: 0.6rem; min-width: min(100%, 18rem); }
.contact-card .gateway-trigger { min-width: 17rem; min-height: 4.2rem; border: 1px solid rgba(246, 211, 128, 0.62); border-radius: 48% / 40%; box-shadow: rgba(60, 34, 3, 0.22) 0px 0.9rem 2rem, rgba(255, 239, 196, 0.16) 0px 1px inset; }
.gateway-trigger.is-pressing { animation: 420ms ease 0s 1 normal none running gateway-press; }
.gateway-help-link { min-height: 2.75rem; padding: 0.55rem 0.45rem; display: inline-flex; align-items: center; justify-content: center; color: rgb(63, 42, 16); border: 0px; background: transparent; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.78rem; font-weight: 720; text-decoration: underline; text-underline-offset: 0.2rem; cursor: pointer; }
.gateway-panel { position: relative; z-index: 3; grid-column: 1 / -1; max-height: 0px; margin-top: 0px; overflow: hidden; opacity: 0; transform: translateY(0.7rem); transition: max-height 760ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 300ms, transform 500ms, margin-top 500ms; }
.contact-card.is-open { align-items: start; }
.contact-card.is-open .gateway-actions { opacity: 0; pointer-events: none; transform: scale(0.97); transition: opacity 180ms, transform 180ms; }
.contact-card.is-open .gateway-panel { max-height: 90rem; margin-top: 1.25rem; opacity: 1; transform: none; }
.gateway-form { position: relative; min-height: 28rem; padding: clamp(1rem, 3vw, 1.6rem); overflow: hidden; color: rgb(246, 238, 223); border: 1px solid rgba(246, 211, 128, 0.55); border-radius: 1.1rem; background: radial-gradient(circle at 50% 0px, rgba(232, 185, 78, 0.13), transparent 18rem), linear-gradient(145deg, rgb(23, 16, 6), rgb(5, 4, 3) 76%); box-shadow: rgba(70, 42, 6, 0.28) 0px 1.5rem 3.2rem; }
.gateway-doors { position: absolute; z-index: 8; inset: 0px; display: flex; pointer-events: none; }
.gateway-door { width: 50%; display: grid; place-items: center; color: rgba(239, 198, 99, 0.5); border: 1px solid rgba(246, 211, 128, 0.52); background: linear-gradient(145deg, rgb(23, 18, 11), rgb(5, 4, 3)); font-family: Georgia, serif; font-size: clamp(3rem, 9vw, 7rem); transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 280ms; }
.gateway-door-left { border-radius: 1.1rem 0px 0px 1.1rem; transform-origin: left center; }
.gateway-door-right { border-radius: 0px 1.1rem 1.1rem 0px; transform-origin: right center; }
.contact-card.doors-open .gateway-door-left { transform: perspective(900px) rotateY(86deg); opacity: 0.16; }
.contact-card.doors-open .gateway-door-right { transform: perspective(900px) rotateY(-86deg); opacity: 0.16; }
.gateway-form-head { position: relative; text-align: center; }
.gateway-close { position: absolute; top: 0; right: 0; min-height: 2.75rem; padding: 0.55rem 0.8rem; color: rgb(209, 194, 162); border: 1px solid rgba(232, 185, 78, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 0.7rem; font-weight: 760; }
.gateway-close:hover, .gateway-close:focus-visible { color: rgb(255, 239, 194); border-color: rgba(246, 211, 128, 0.56); }
.gateway-form-head h3 { margin: 0px; color: var(--cream); font-family: Georgia, serif; font-size: clamp(1.55rem, 3.5vw, 2.35rem); font-weight: 500; }
.gateway-progress { max-width: 31rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 1rem auto 1.2rem; padding: 0px; list-style: none; }
.gateway-progress li { position: relative; display: grid; place-items: center; gap: 0.25rem; color: rgb(133, 123, 104); font-size: 0.7rem; font-weight: 760; }
.gateway-progress li:not(:last-child)::after { content: ""; position: absolute; top: 0.8rem; left: calc(50% + 1.1rem); width: calc(100% - 2.2rem); height: 1px; background: rgb(75, 68, 55); pointer-events: none; }
.gateway-progress li.is-active { color: rgb(240, 206, 121); }
.gateway-progress li.is-complete { color: rgb(205, 189, 153); }
.gateway-progress button { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; min-width: 3.25rem; min-height: 2.75rem; margin: 0; border: 0; border-radius: 0; padding: 0.25rem; display: grid; place-items: center; gap: 0.25rem; color: inherit; background: transparent; background-color: transparent; box-shadow: none; filter: none; font: inherit; cursor: pointer; touch-action: manipulation; }
.gateway-progress button:hover, .gateway-progress button:active { border: 0; background: transparent; background-color: transparent; box-shadow: none; filter: none; }
.gateway-progress button:focus-visible { outline: 2px solid rgb(244, 214, 139); outline-offset: 0.25rem; border-radius: 0.25rem; }
.gateway-progress button b { max-width: 7.5rem; font: inherit; line-height: 1.15; text-align: center; }
.gateway-progress span { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border: 1px solid rgb(89, 81, 66); border-radius: 50%; background: rgb(12, 10, 7); }
.gateway-progress li.is-active span { color: rgb(24, 16, 6); border-color: rgb(244, 214, 139); background: linear-gradient(135deg, rgb(248, 229, 171), rgb(201, 154, 67)); box-shadow: rgba(232, 185, 78, 0.32) 0px 0px 1rem; }
.gateway-step { animation: 280ms ease 0s 1 normal both running showroom-arrive; }
.gateway-step h4 { margin: 0px 0px 0.35rem; color: rgb(255, 244, 216); font-family: Georgia, serif; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 500; text-align: center; }
.gateway-step-copy { margin: 0px 0px 0.9rem; color: rgb(189, 177, 154); font-size: 0.82rem; text-align: center; }
.gateway-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.65rem; }
.gateway-choice { min-height: 4.7rem; display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem; color: rgb(222, 210, 188); border: 1px solid rgba(232, 185, 78, 0.2); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.02); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.8rem; font-weight: 780; text-align: left; }
.gateway-choice > span { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 auto; color: rgb(239, 202, 112); border: 1px solid rgba(232, 185, 78, 0.25); border-radius: 0.5rem; }
.gateway-recommender { margin-top: 0.85rem; padding: 0.85rem; border: 1px solid rgba(232, 185, 78, 0.2); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); }
.gateway-recommender h5 { margin: 0px 0px 0.65rem; color: rgb(241, 209, 122); font-family: Georgia, serif; font-size: 1.15rem; }
.recommender-grid, .gateway-fields { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.65rem; }
.gateway-recommender label, .gateway-fields label { display: grid; gap: 0.35rem; color: rgb(222, 211, 191); font-size: 0.76rem; font-weight: 720; }
.gateway-recommender select, .gateway-fields input, .gateway-fields select, .gateway-fields textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.75rem; color: rgb(255, 248, 233); border: 1px solid rgba(232, 185, 78, 0.24); border-radius: 0.65rem; background: rgb(8, 7, 5); outline: none; }
.gateway-recommender select:focus-visible, .gateway-fields input:focus-visible, .gateway-fields select:focus-visible, .gateway-fields textarea:focus-visible { border-color: rgb(246, 211, 128); outline: 3px solid rgb(246, 211, 128); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(232, 185, 78, 0.12); }
.gateway-fields textarea { min-height: 6rem; resize: vertical; }
.gateway-fields input[type="file"] { padding: 0.63rem; color: rgb(201, 189, 167); }
.gateway-fields label > span { color: rgb(142, 132, 114); font-weight: 500; }
.gateway-fields .gateway-file-note { color: rgb(184, 173, 151); font-size: 0.72rem; font-weight: 500; line-height: 1.45; }
.gateway-field-full { grid-column: 1 / -1; }
.contact-card .recommender-button { width: 100%; min-height: 3rem; margin-top: 0.65rem; color: rgb(26, 16, 2); border-color: rgb(237, 209, 136); background: linear-gradient(135deg, rgb(248, 232, 173) 0%, rgb(220, 184, 94) 50%, rgb(157, 116, 45) 100%); }
.recommendation-result { min-height: 1.2rem; margin: 0.55rem 0px 0px; color: rgb(233, 207, 137); font-size: 0.8rem; text-align: center; }
.gateway-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.9rem; }
.gateway-nav-forward { justify-content: flex-end; }
.contact-card .gateway-nav .button { min-width: 8.5rem; }
.contact-card .gateway-nav .button.primary { color: rgb(26, 16, 2); border-color: rgb(237, 209, 136); background: linear-gradient(135deg, rgb(248, 232, 173) 0%, rgb(220, 184, 94) 50%, rgb(157, 116, 45) 100%); }
.gateway-privacy { margin: 0.8rem 0px 0px; color: rgb(158, 148, 130); font-size: 0.74rem; text-align: center; }
.gateway-email-fallback { margin-top: 0.75rem; padding: 0.75rem; color: rgb(190, 179, 155); border: 1px solid rgba(232, 185, 78, 0.22); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.025); text-align: center; }
.gateway-email-fallback > p { margin: 0; font-size: 0.74rem; line-height: 1.45; }
.gateway-email-fallback-actions { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 0.55rem; }
.gateway-email-fallback-actions a { color: rgb(244, 209, 118); font-size: 0.78rem; font-weight: 760; overflow-wrap: anywhere; }
.gateway-email-fallback-actions button { min-height: 2.75rem; padding: 0.55rem 0.8rem; color: rgb(255, 239, 194); border: 1px solid rgba(246, 211, 128, 0.45); border-radius: 999px; background: rgba(232, 185, 78, 0.08); font: inherit; font-size: 0.72rem; font-weight: 780; cursor: pointer; }
.gateway-email-fallback-actions button:hover, .gateway-email-fallback-actions button:focus-visible { border-color: rgb(246, 211, 128); box-shadow: 0 0 1rem rgba(232, 185, 78, 0.16); }
.gateway-email-fallback .gateway-copy-status { min-height: 1.1rem; margin-top: 0.4rem; color: rgb(233, 207, 137); font-size: 0.72rem; }
.gateway-validation { animation: 320ms ease 0s 1 normal none running validation-shake; }
@keyframes showroom-arrive { 
  0% { opacity: 0; transform: translateY(0.45rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes touch-pop { 
  0% { transform: translateY(0px) scale(1); }
  52% { transform: translateY(-7px) scale(1.025); }
  100% { transform: translateY(-4px) scale(1.012); }
}
@keyframes stage-flip { 
  0% { opacity: 1; transform: rotateX(0deg); }
  48% { opacity: 0.2; transform: rotateX(82deg) scale(0.985); }
  52% { opacity: 0.2; transform: rotateX(-82deg) scale(0.985); }
  100% { opacity: 1; transform: rotateX(0deg); }
}
@keyframes qr-frame-pulse { 
  0% { opacity: 0.65; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes hand-bob { 
  0% { transform: translateY(-1px); }
  100% { transform: translateY(5px); }
}
@keyframes gateway-press { 
  0%, 100% { transform: scale(1); }
  45% { transform: translateY(3px) scale(0.985); }
}
@keyframes validation-shake { 
  0%, 100% { transform: translateX(0px); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}
@media (max-width: 980px) {
  .showroom-option-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .contact-card { grid-template-columns: 1fr; }
  .gateway-intro, .gateway-actions { grid-column: 1; }
  .gateway-actions { width: min(100%, 23rem); margin-top: 0.9rem; }
  .contact-card.is-open { row-gap: 0.75rem; }
  .contact-card.is-open .gateway-actions { display: none; }
  .contact-card.is-open .gateway-panel { margin-top: 0.25rem; }
}
@media (max-width: 760px) {
  .service-detail-copy { padding: 1.15rem; }
  .service-showrooms { padding: 0.8rem; }
  .showroom-heading { align-items: flex-start; flex-direction: column; }
  .showroom-status { align-self: flex-start; }
  .mini-site { min-height: 6.6rem; }
  .comparison-stage { min-height: 22rem; }
  .mock-nav span { display: none; }
  .mock-hero { max-width: 68%; }
  .legacy-layout { grid-template-columns: 5.5rem 1fr; }
  .device-previews { min-height: 21rem; }
  .desktop-window { right: 13%; }
  .mobile-window { width: 31%; }
  .digital-actions { gap: 0.38rem; }
  .digital-action { min-height: 5.4rem; padding: 0.45rem; font-size: 0.65rem; }
  .studio-topline { grid-template-columns: 1.35fr 0.75fr; }
  .studio-contact-details { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .studio-contact-details .studio-label { grid-column: 1 / -1; }
  .social-format-set { min-height: 17rem; gap: 0.4rem; }
  .social-art { min-height: 13rem; padding: 0.7rem; }
  .social-art:nth-child(2) { min-height: 15rem; }
  .social-art:nth-child(3) { min-height: 16rem; }
  .brand-kit-strip { grid-template-columns: 1fr 1fr; }
  .brand-type { grid-column: 1 / -1; justify-content: start; }
  .project-reveal-button { width: calc(100% - 1.6rem); margin: 0px 0.8rem 0.8rem; }
}
@media (max-width: 560px) {
  .showroom-heading h4 { font-size: 1.55rem; }
  .showroom-heading p { font-size: 0.86rem; }
  .showroom-option-grid { gap: 0.46rem; }
  .showroom-option { padding: 0.32rem; font-size: 0.68rem; }
  .mini-site { min-height: 5.7rem; padding: 1.42rem 0.45rem 0.45rem; }
  .mini-site b { font-size: 0.72rem; }
  .mini-site em { margin-top: 0.42rem; font-size: 0.46rem; }
  .comparison-stage { min-height: 19rem; }
  .mock-hero { max-width: 72%; padding: 3.4rem 0.75rem 2rem; }
  .mock-hero h5 { font-size: 1.35rem; }
  .mock-feature-row { left: 0.55rem; right: 0.55rem; }
  .mock-feature-row span { padding: 0.38rem 0.2rem; font-size: 0.52rem; }
  .legacy-layout { grid-template-columns: 4.7rem 1fr; }
  .legacy-nav { padding: 0.45rem; font-size: 0.55rem; }
  .legacy-copy { padding: 3.5rem 0.6rem 1rem; }
  .comparison-handle { width: 2.5rem; height: 2.5rem; }
  .benefit-chips span { flex-basis: 5rem; padding-inline: 0.35rem; font-size: 0.65rem; }
  .preview-toolbar { flex-wrap: wrap; }
  .device-toggle { min-width: 5.6rem; }
  .device-previews { min-height: 17rem; }
  .desktop-window { right: 15%; }
  .mobile-window { width: 31%; height: 90%; }
  .new-site-nav { min-height: 2rem; padding: 0.3rem; }
  .new-site-nav span { font-size: 0.58rem; }
  .new-site-hero { padding: 1.1rem 0.65rem; }
  .new-site-hero h5 { font-size: 1.1rem; }
  .new-site-hero p { font-size: 0.53rem; }
  .new-site-features { padding: 0.42rem; font-size: 0.52rem; }
  .digital-stage { padding: 0.68rem; }
  .digital-actions { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .digital-action { min-height: 5rem; font-size: 0.58rem; }
  .digital-action-icon { font-size: 1.25rem; }
  .live-card { min-height: 14rem; }
  .live-card-face { padding: 1rem; }
  .live-card-face img { width: 3.1rem; height: 3.1rem; }
  .contact-actions { grid-template-columns: repeat(3, 1fr); }
  .studio-topline { grid-template-columns: 1fr 0.62fr; gap: 0.45rem; }
  .studio-contact-details { grid-template-columns: 1fr; }
  .studio-contact-details .studio-label { grid-column: auto; }
  .studio-card-art { min-height: 9rem; }
  .card-style-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .card-style i { min-height: 4.5rem; }
  .brand-category { min-height: 3.5rem; padding: 0.55rem; font-size: 0.68rem; }
  .brand-category > span { width: 1.7rem; height: 1.7rem; }
  .social-format-set { min-height: 14.5rem; }
  .social-art { min-height: 10.5rem; padding: 0.5rem; }
  .social-art:nth-child(2) { min-height: 12rem; }
  .social-art:nth-child(3) { min-height: 13.5rem; }
  .social-art small { font-size: 0.42rem; }
  .social-art strong { font-size: 0.72rem; }
  .social-art span { padding: 0.22rem 0.3rem; font-size: 0.42rem; }
  .brand-kit-strip { gap: 0.45rem; padding: 0.55rem; }
  .brand-kit-logo { font-size: 0.55rem; }
  .brand-swatches i { width: 1.15rem; height: 1.15rem; }
  .logo-concepts, .flyer-set { min-height: 14rem; gap: 0.4rem; }
  .banner-set article { min-height: 6.5rem; }
  .project-reveal-button { min-height: 4.2rem; font-size: 0.92rem; }
  .contact-card { padding: 1rem; }
  .gateway-actions { width: 100%; min-width: 0px; }
  .contact-card .gateway-trigger { min-width: 0px; width: 100%; }
  .gateway-form { padding: 0.8rem; }
  .gateway-choice-grid, .recommender-grid, .gateway-fields { grid-template-columns: 1fr; }
  .gateway-field-full { grid-column: auto; }
  .gateway-choice { min-height: 4.1rem; }
  .gateway-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .gateway-nav-forward { grid-template-columns: 1fr; }
  .contact-card .gateway-nav .button { min-width: 0px; width: 100%; }
  .gateway-email-fallback-actions { align-items: stretch; flex-direction: column; }
  .gateway-email-fallback-actions button { width: 100%; }
  .gateway-close { position: static; width: 100%; margin-bottom: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showroom-panel, .touch-pop-active, .digital-stage-flip.is-flipping, .qr-pulse-frame::before, .qr-pulse-frame::after, .gateway-trigger.is-pressing, .gateway-step { animation: auto ease 0s 1 normal none running none !important; }
  .live-card-inner { transition: none; }
  .gateway-door { transition-duration: 0.01ms; }
}

.gateway-noscript {
  margin-block: 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(201, 173, 104, .58);
  border-radius: 1rem;
  background: rgba(201, 173, 104, .08);
  color: var(--text, #f5f0e4);
}

.gateway-noscript strong,
.gateway-noscript span {
  display: block;
}

.gateway-noscript span {
  margin-top: .4rem;
}

.gateway-noscript a {
  color: var(--gold, #d9bc73);
  text-underline-offset: .18em;
}


/* v2.88 — one cancellable service transition, no competing CSS entrance. */
.service-showrooms { transition: none; }
.showroom-panel { animation: none; }
.digital-stage-flip.is-flipping { animation-duration: 520ms; }
:is(.showroom-option, .brand-category, .digital-action, .card-style, .format-button, .gateway-choice, .device-toggle).is-selected {
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.showroom-option, .brand-category, .digital-action, .card-style, .format-button, .gateway-choice, .device-toggle):hover {
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.showroom-option, .brand-category, .digital-action, .card-style, .format-button, .gateway-choice, .device-toggle) {
    transform: none !important;
  }
}