/* Private / Commercial welcome screen + nav switch (from the "Faux Creative Welcome" prototype).
   Every class is prefixed fw- so nothing collides with the Webflow stylesheet. */
:root {
  --fw-bg: #171717;
  --fw-panel: #1e1e1e;
  --fw-fg: #f2f2f2;
  --fw-muted: #bdbdbd;
  --fw-soft: #d6d6d6;
  --fw-line: rgba(255, 255, 255, 0.18);
  --fw-plate: rgba(23, 23, 23, 0.45);
  --fw-gold: #E1B001;
  --fw-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --fw-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Welcome screen ---------- */
.fw-splash { display: none; }
html.fw-open, html.fw-open body { overflow: hidden; }
html.fw-open .fw-splash { display: block; }
.fw-splash { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: var(--fw-bg); color: var(--fw-fg); font-family: var(--fw-body); transition: opacity 0.8s ease; }
.fw-splash.is-leaving { opacity: 0; pointer-events: none; }
.fw-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.fw-photo { position: absolute; top: 0; left: 0; width: 1800px; height: 2700px; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
.fw-dim { background: #000; will-change: opacity; }
.fw-biz-clip { overflow: hidden; will-change: transform; border-left: 1px solid var(--fw-line); box-sizing: border-box; transform: translate3d(50%, 0, 0); }
.fw-biz-inner { background: var(--fw-panel); will-change: transform; transform: translate3d(-50%, 0, 0); }
.fw-label-wrap { pointer-events: none; will-change: transform; }
#fwLabelP { transform: translate3d(-25%, 0, 0); }
#fwLabelB { transform: translate3d(25%, 0, 0); }
.fw-label-h { position: absolute; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 18px; white-space: nowrap; color: var(--fw-fg); }
.fw-word-wrap { display: inline-flex; flex-direction: column; gap: 14px; }
.fw-word { font-family: var(--fw-display); font-size: 1.4rem; line-height: 1.2; letter-spacing: 0.36em; margin-right: -0.36em; text-transform: uppercase; }
.fw-underline { display: block; height: 1px; background: var(--fw-fg); transform: scaleX(0); will-change: transform; }
.fw-sub { font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.24em; margin-right: -0.24em; text-transform: uppercase; color: var(--fw-soft); opacity: 0; will-change: transform, opacity; }
.fw-label-v { position: absolute; top: 50%; left: 50%; white-space: nowrap; font-family: var(--fw-display); font-size: 1rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--fw-muted); opacity: 0; }
#fwLabelP .fw-label-v { transform: translate(-50%, -50%) rotate(-90deg); }
#fwLabelB .fw-label-v { transform: translate(-50%, -50%) rotate(90deg); }

.fw-plate { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 36px 48px; background: var(--fw-plate); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 0 40px rgba(255, 244, 220, 0.05); pointer-events: none; opacity: 0; }
.fw-plate img { display: block; width: 240px; max-width: none; height: auto; }
.fw-glint { position: absolute; inset: -1px; padding: 1px; box-sizing: border-box; pointer-events: none;
  background: conic-gradient(from 300deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(255,244,220,0.25) 305deg, rgba(255,250,238,0.95) 330deg, rgba(255,244,220,0.25) 348deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

.fw-hit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
#fwHitP { transform: translate3d(-50%, 0, 0); }
#fwHitB { transform: translate3d(50%, 0, 0); }
.fw-hit:focus { outline: none; }
.fw-hit:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -10px; }

/* Phones held upright: stack the two sides top and bottom */
.fw-splash.is-vertical .fw-biz-clip { border-left: 0; border-top: 1px solid var(--fw-line); transform: translate3d(0, 50%, 0); }
.fw-splash.is-vertical .fw-biz-inner { transform: translate3d(0, -50%, 0); }
.fw-splash.is-vertical .fw-label-wrap { transform: none !important; }
.fw-splash.is-vertical .fw-label-v { display: none; }
.fw-splash.is-vertical #fwLabelP .fw-label-h { top: calc(28px + env(safe-area-inset-top, 0px)); bottom: auto; }
.fw-splash.is-vertical #fwLabelB .fw-label-h { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.fw-splash.is-vertical .fw-word { font-size: 1.05rem; }
.fw-splash.is-vertical .fw-sub { font-size: 10px; letter-spacing: 0.2em; }
.fw-splash.is-vertical #fwHitP { transform: translate3d(0, -50%, 0); }
.fw-splash.is-vertical #fwHitB { transform: translate3d(0, 50%, 0); }
@media (max-width: 600px) {
  .fw-plate { padding: 22px 30px; }
  .fw-plate img { width: 170px; }
}

/* Cinematic overlay (grain, vignette, flicker) — lives inside the welcome screen */
.fw-cine { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fw-cine span { position: absolute; inset: 0; display: block; }
.fw-cine-vignette { box-shadow: inset 0 0 200px 60px rgba(0, 0, 0, 0.55); }
.fw-cine-flicker { background: #000; opacity: 0.03; }
.fw-cine canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.fw-cine-grain { opacity: 0.2; }

/* ---------- Nav switch (mini split) under the logo ---------- */
.fw-brand-wrap { display: flex; flex-direction: column; align-items: center; }
.fw-brand-mobile-wrap { display: none; }
@media screen and (max-width: 991px) {
  .fw-brand-mobile-wrap { display: flex; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; }
  .fw-brand-mobile-wrap .brand-mobile { margin: 0; }
  .fw-brand-wrap { display: none; }
}
.fw-switch { position: relative; display: flex; width: 184px; height: 30px; margin: 6px 0 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: rgba(23, 23, 23, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 30px rgba(255, 244, 220, 0.04); overflow: hidden; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: border-color 0.45s ease, box-shadow 0.45s ease; }
@media (hover: hover) {
  .fw-switch:hover { border-color: rgba(225, 176, 1, 0.6); box-shadow: 0 0 18px rgba(225, 176, 1, 0.24), inset 0 0 12px rgba(225, 176, 1, 0.07); }
  .fw-switch:hover .fw-seg.is-open { background: rgba(225, 176, 1, 0.12); }
  .fw-switch:hover .fw-seg-b { border-left-color: rgba(225, 176, 1, 0.35); }
  .fw-switch:hover .fw-seg-label { color: var(--fw-gold); }
}
.fw-switch:focus-visible { border-color: rgba(225, 176, 1, 0.6); box-shadow: 0 0 18px rgba(225, 176, 1, 0.24); outline: 1px solid var(--fw-fg); outline-offset: 3px; }
.fw-seg { position: relative; display: block; height: 100%; overflow: hidden; background: rgba(255, 255, 255, 0); transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1), background 0.5s ease; }
.fw-seg.is-open { background: rgba(255, 255, 255, 0.09); }
.fw-seg-p { width: 90%; }
.fw-seg-b { width: 10%; border-left: 1px solid rgba(255, 255, 255, 0.18); box-sizing: border-box; transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1), background 0.5s ease, border-color 0.45s ease; }
.fw-seg-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 0.22em; font: 600 9px/1 var(--fw-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fw-fg); white-space: nowrap; opacity: 0; transition: opacity 0.3s ease, color 0.45s ease; }
.fw-seg.is-open .fw-seg-label { opacity: 1; transition-delay: 0.25s; }
/* Before the script runs, paint the saved side so the switch doesn't jump */
html:not([data-view="commercial"]) .fw-switch:not(.is-ready) .fw-seg-p { background: rgba(255, 255, 255, 0.09); }
html[data-view="commercial"] .fw-switch:not(.is-ready) .fw-seg-p { width: 10%; background: transparent; }
html[data-view="commercial"] .fw-switch:not(.is-ready) .fw-seg-b { width: 90%; background: rgba(255, 255, 255, 0.09); }
html:not([data-view="commercial"]) .fw-switch:not(.is-ready) .fw-seg-p .fw-seg-label,
html[data-view="commercial"] .fw-switch:not(.is-ready) .fw-seg-b .fw-seg-label { opacity: 1; transition: none; }