*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none;}
:root{
  --navy:#0b1c35;--navy2:#0f2347;--navy3:#132d54;
  --gold:#c9972a;--gold2:#f0b429;
  --cream:#f8f5ef;--cream2:#ede8de;
}
html,body{height:100%;font-size:16px;}
body{
  font-family:'Outfit',sans-serif;
  background:var(--cream);
  color:var(--navy);
  overflow-x:hidden;
  min-height:100vh;
}

/* LAYOUT */
.wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:101vh; /* inkl. fixem Header = 101vh */
}

/* LEFT PANEL */
.left{
  background:var(--navy);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:52px 48px 48px;
}

/* Sky gradient */
.left::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, #1a3a6e 0%, var(--navy) 70%);
}

/* Stars */
.stars{position:absolute;inset:0;pointer-events:none;}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d) ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:var(--a);}50%{opacity:calc(var(--a)*.2);}}

/* Ground */
.ground{
  position:absolute;bottom:0;left:0;right:0;height:38%;
  background:linear-gradient(to top, #0a1a30 0%, transparent 100%);
}

/* SVG illustration */
.illustration{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  flex:1;padding-bottom:0;
  animation:illuFloat 6s ease-in-out infinite;
}
@keyframes illuFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* Left bottom text */
.left-bottom{position:relative;z-index:2;}
.left-eyebrow{
  font-size:10px;font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
  opacity:0;animation:sUp .7s .2s forwards;
}
.left-heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,3vw,40px);font-weight:300;
  color:var(--cream);line-height:1.15;
  overflow:hidden;margin:0;
}
.left-heading .ln{display:block;overflow:hidden;}
.left-heading .ln span{display:block;animation:rU .8s cubic-bezier(.16,1,.3,1) both;}
.left-heading .ln:nth-child(1) span{animation-delay:.3s;}
.left-heading .ln:nth-child(2) span{animation-delay:.44s;}
.left-heading em{font-style:italic;color:var(--gold2);}

/* RIGHT PANEL */
.right{
  background:var(--cream);
  display:flex;flex-direction:column;
  justify-content:center;
  padding:64px 56px;
  position:relative;
  overflow:hidden;
}

/* Decorative circle bg */
.right::before{
  content:'';position:absolute;
  top:-120px;right:-120px;
  width:400px;height:400px;
  border:1px solid rgba(201,151,42,.1);
  border-radius:50%;
}
.right::after{
  content:'';position:absolute;
  bottom:-80px;left:-80px;
  width:260px;height:260px;
  border:1px solid rgba(201,151,42,.08);
  border-radius:50%;
}

.right-inner{position:relative;z-index:1;max-width:440px;}

/* Logo */
.logo{
  font-family:'Cormorant Garamond',serif;
  font-size:15px;font-weight:600;letter-spacing:.08em;
  color:var(--navy);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:40px;
  opacity:0;animation:sUp .6s .1s forwards;
}
.logo-dot{
  width:6px;height:6px;background:var(--gold);border-radius:50%;
}

.right-eyebrow{
  font-size:10px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
  opacity:0;animation:sUp .7s .25s forwards;
}
.right-eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--gold);}

.right-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,3.5vw,52px);font-weight:300;
  line-height:1.1;margin-bottom:10px;
  opacity:0;animation:sUp .8s .38s forwards;
}
.right-title em{font-style:italic;color:var(--gold);}

.right-sub{
  font-size:14px;font-weight:300;
  color:rgba(11,28,53,.55);line-height:1.8;
  margin-bottom:40px;
  opacity:0;animation:sUp .7s .5s forwards;
}

/* Contact cards */
.contact-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;}

.cc{
  display:flex;align-items:center;gap:18px;
  padding:18px 22px;
  background:#fff;
  border:1px solid rgba(11,28,53,.07);
  text-decoration:none;color:var(--navy);
  position:relative;overflow:hidden;
  opacity:0;
  animation:sUp .7s both;
  transition:border-color .3s,color .3s;
}
.cc:nth-child(1){animation-delay:.6s;}
.cc:nth-child(2){animation-delay:.72s;}
.cc:nth-child(3){animation-delay:.84s;}

.cc::before{
  content:'';position:absolute;inset:0;
  background:var(--navy);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.cc:hover::before{transform:scaleX(1);}
.cc:hover{color:var(--cream);}
.cc:hover .cc-icon{background:var(--gold);}
.cc:hover .cc-icon svg{stroke:var(--navy);}
.cc:hover .cc-lbl{color:rgba(248,245,239,.5);}
.cc:hover .cc-arr{opacity:1;transform:translateX(0);}
.cc:hover .cc-val{color:var(--cream);}

.cc-icon{
  width:42px;height:42px;flex-shrink:0;
  background:var(--cream2);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  transition:background .3s;
}
.cc-icon svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.cc-body{flex:1;position:relative;z-index:1;}
.cc-lbl{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:2px;transition:color .3s;}
.cc-val{font-size:15px;font-weight:300;color:var(--navy);transition:color .3s;}
.cc-arr{
  position:relative;z-index:1;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s;
}
.cc-arr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* Person chip */
.person-chip{
  display:flex;align-items:center;gap:16px;
  padding-top:28px;
  border-top:1px solid rgba(11,28,53,.08);
  opacity:0;animation:sUp .7s .95s forwards;
}
.person-av{
  width:52px;height:52px;flex-shrink:0;
  border-radius:50%;
  background:var(--navy);
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:400;color:var(--gold);
}
.person-name{font-size:15px;font-weight:400;margin-bottom:2px;}
.person-role{font-size:10.5px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,28,53,.45);}

/* Gold accent bar top of right */
.right-accent{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),transparent);
  transform-origin:left;transform:scaleX(0);
  animation:barIn .9s .1s forwards cubic-bezier(.16,1,.3,1);
}
@keyframes barIn{to{transform:scaleX(1);}}

/* ANIMATIONS */
@keyframes sUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes rU{from{transform:translateY(110%);}to{transform:translateY(0);}}

/* RESPONSIVE */
@media(max-width:820px){
  .wrap{grid-template-columns:1fr;min-height:auto;}
  .left{min-height:60vw;padding:36px 24px 32px;}
  .left-heading{font-size:clamp(22px,5vw,32px);}
  .right{padding:44px 24px 52px;}
  .right-inner{max-width:100%;}
  .right-title{font-size:clamp(30px,7vw,44px);}
  .right-accent{display:none;}
}
@media(max-width:480px){
  .left{min-height:55vw;padding:28px 18px 28px;}
  .right{padding:36px 18px 48px;}
  .logo{margin-bottom:28px;}
  .right-title{font-size:clamp(28px,8vw,38px);}
  .cc{padding:15px 16px;gap:14px;}
  .cc-icon{width:38px;height:38px;}
  .cc-icon svg{width:14px;height:14px;}
  .cc-val{font-size:14px;}
  .person-chip{padding-top:22px;}
  .person-av{width:44px;height:44px;font-size:15px;}
  .contact-stack{margin-bottom:28px;}
}