/* Substantial visual upgrade — elevator identity, product-first, not a palette swap */
:root{
  --cream:#f4f7f8;
  --amber:#ffc36a;
  --metal:
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    linear-gradient(118deg, #3a444c 0%, #8b979e 18%, #4b5860 42%, #a7b2b8 68%, #2c363d 100%);
}
html{background:#0c1216}
body{
  color:var(--cream);
  background:
    radial-gradient(ellipse at 78% -8%, rgba(255,184,92,.18), transparent 32%),
    radial-gradient(ellipse at 6% 12%, rgba(70,150,176,.2), transparent 36%),
    radial-gradient(ellipse at 50% 70%, rgba(20,40,52,.55), transparent 48%),
    #0c1216;
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header.site-header{
  position:sticky;top:12px;z-index:20;
  height:78px;max-width:min(1480px, calc(100% - 32px));
  margin:12px auto 0;padding:0 18px 0 22px;
  border:1px solid rgba(210,226,234,.16);
  border-radius:999px;
  background:rgba(10,16,22,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(22px) saturate(150%);
}
.brand img{width:158px}
.main-nav{font-size:13px;font-weight:620;letter-spacing:.02em}
.header-cta,.button,.contact-button{
  min-height:44px;border-radius:999px;
  background:linear-gradient(120deg, #ffe0a8, #ffb45c 55%, #e0893a);
  color:#1a140c;border:0;font-weight:780;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px rgba(224,137,58,.28);
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.header-cta:hover,.button:hover,.contact-button:hover{transform:translateY(-2px);color:#1a140c}
.header-cta:active,.button:active{transform:scale(.98)}
.lobby{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:end;
  gap:28px;padding:28px 0 18px;
}
.lobby h1{
  font-size:clamp(56px,7vw,112px);line-height:.86;letter-spacing:-.08em;margin:10px 0 0;
  text-wrap:balance;
}
.lobby p{font-size:16px;line-height:1.55;color:#c9d6dc;max-width:38ch}
.lobby a{font-size:14px;font-weight:750;color:var(--amber)}
.experience{
  grid-template-columns:214px minmax(0,1fr);
  min-height:min(78dvh, 820px);
  margin:0;
}
.control-panel{
  margin-top:42px;padding:26px 18px 22px;
  border-radius:22px 8px 8px 22px;
  background:var(--metal);
  border:1px solid rgba(230,238,242,.28);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28), 16px 28px 70px rgba(0,0,0,.48);
}
.floor-button .number{
  width:50px;height:50px;font-size:23px;font-weight:750;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.floor-button:hover .number{transform:translateY(-2px) scale(1.04)}
.floor-button[aria-pressed=true] .number{
  color:#1a140c;background:radial-gradient(circle at 40% 30%, #ffe7b8, #ffb45c 70%);
  border-color:#fff3d2;box-shadow:0 0 22px rgba(255,180,92,.55);
}
.lintel{height:52px;border-radius:14px 14px 0 0}
.indicator{
  min-width:min(420px,92%);height:54px;margin-top:-14px;border-radius:999px;
  background:linear-gradient(#0b1419,#18242c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(0,0,0,.45);
  font-size:13px;
}
#floor-number{font-size:28px;color:#ffd28a}
.jamb{padding:10px 12px 0;border-radius:0 0 18px 18px}
.opening{
  min-height:min(64dvh, 700px);
  border-top:3px solid #e8f6ff;
  box-shadow:0 0 48px rgba(140,210,240,.16), inset 0 0 80px rgba(0,0,0,.28);
}
#project{padding:16px 18px 0}
#project-name{font-size:clamp(28px,2.6vw,40px);letter-spacing:-.055em}
.screen{
  height:clamp(480px,46vw,680px);
  border-radius:14px 14px 0 0;
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}
.opening[data-floor="1"] #project{background:radial-gradient(ellipse at 50% 0, rgba(40,120,170,.28), transparent 62%), #10222c}
.opening[data-floor="2"] #project{background:radial-gradient(ellipse at 50% 0, rgba(90,140,90,.26), transparent 62%), #142018}
.opening[data-floor="3"] #project{background:radial-gradient(ellipse at 50% 0, rgba(210,160,50,.22), transparent 62%), #1c1a12}
.opening[data-floor="4"] #project{background:radial-gradient(ellipse at 50% 0, rgba(90,190,200,.22), transparent 62%), #142226}
.opening[data-floor="5"] #project{background:radial-gradient(ellipse at 50% 0, rgba(255,140,60,.2), transparent 62%), #1c1612}
.opening[data-floor="6"] #project{background:radial-gradient(ellipse at 50% 0, rgba(70,110,80,.24), transparent 62%), #161c18}
.door{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, #2a353c, #c5d0d6 14%, #68757d 42%, #b7c3c9 82%, #334149);
}
.offer-panel,.contact-form,.product-stage,.compact-offer,.offer{
  border:1px solid rgba(200,220,230,.16);
  border-radius:20px;
  background:linear-gradient(165deg, rgba(70,88,98,.38), rgba(14,22,28,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.3);
}
.offer-panel{padding:24px 24px 18px;border-top:0}
.product-stage{padding:14px;border-radius:24px}
.product-frame{height:min(72dvh,760px);border-radius:0 0 16px 16px}
.case-hero h1{font-size:clamp(64px,8.4vw,128px);letter-spacing:-.085em;line-height:.86}
.home .services,.home .process,.home .contact-callout{margin-top:56px;padding:72px 0 24px}
@media(max-width:800px){
  header.site-header{top:8px;height:68px;border-radius:22px;max-width:calc(100% - 16px)}
  .lobby{display:block;padding:18px 0 12px}
  .lobby h1{font-size:clamp(42px,14vw,64px)}
  .experience{min-height:auto}
  .opening{min-height:auto}
  .screen{height:360px}
  .control-panel{margin-top:0;border-radius:16px}
}