@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root{
  --black:#050505;--cream:#f4f0e8;--gold:#e5b96d;--muted:#aaa49a;
  --line:#ffffff1b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:"DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.hero{
  position:relative;
  width:100%;
  aspect-ratio:1536/1024;
  min-height:680px;
  overflow:hidden;
  background:#050505;
}
.hero-image{
  position:absolute;inset:0;
  background-image:url("reference-hero.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.nav{
  position:absolute;z-index:5;left:0;right:0;top:0;height:11%;
  display:flex;align-items:center;justify-content:center;
}
.nav nav{
  display:flex;gap:3vw;font-size:15px;
}
.nav nav a{color:#eee9e0;transition:color .25s,transform .25s}
.nav nav a:hover{color:var(--gold);transform:translateY(-1px)}
.logo-hotspot{
  position:absolute;left:3.8%;top:2%;width:21%;height:8%;
}
.contact-hotspot{
  position:absolute;right:3.5%;top:2.8%;width:13.5%;height:5%;
  border-radius:50px;
}
.hero-ventures-hotspot{
  position:absolute;z-index:5;left:6.3%;top:53.5%;width:13%;height:5.4%;
  border-radius:50px;
}
.hero-learn-hotspot{
  position:absolute;z-index:5;left:20.7%;top:53.5%;width:10.5%;height:5.4%;
  border-radius:50px;
}
.scroll-hotspot{
  position:absolute;z-index:5;left:5.5%;bottom:6%;width:18%;height:10%;
}
.sheen{
  position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,#fff3c50d 49%,transparent 60%);
  transform:translateX(-120%);
  animation:sweep 12s ease-in-out infinite;
}
@keyframes sweep{0%,70%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

.content{
  max-width:1400px;margin:auto;padding:120px 8vw;
  display:grid;grid-template-columns:180px 1fr;gap:5vw;
  border-bottom:1px solid var(--line);
}
.section-label{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--gold);font-weight:700}
h2{font-size:clamp(44px,5vw,76px);line-height:.98;letter-spacing:-.055em;margin:0 0 30px}
h2 i{font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--gold)}
.content p:not(.eyebrow){color:var(--muted);font-size:18px;max-width:760px}
.venture{
  display:grid;grid-template-columns:70px 1fr 30px;gap:24px;align-items:center;
  border-top:1px solid #ffffff33;border-bottom:1px solid #ffffff33;
  padding:35px 0;margin-top:45px;transition:.3s;
}
.venture:hover{padding-left:15px;padding-right:15px;background:#ffffff06}
.icon{width:58px;height:58px;display:grid;place-items:center;color:var(--gold);font-weight:700}.icon img{width:58px;height:58px;object-fit:contain;display:block}
.venture small,.future small{display:block;font-size:9px;letter-spacing:.2em;color:var(--gold)}
.venture strong,.future strong{display:block;font-size:28px;margin:5px 0}.venture em,.future em{display:block;color:var(--muted);font-style:normal}.venture>b{font-size:24px}
.future{display:grid;grid-template-columns:1fr;gap:24px;padding:35px 0}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff22;margin-top:40px}
.focus-grid article{background:var(--black);padding:32px;min-height:220px;transition:.3s}.focus-grid article:hover{transform:translateY(-6px);background:#14110d}.focus-grid h3{font-size:27px;margin:25px 0 10px}.focus-grid p{font-size:14px!important;margin:0}
.contact{text-align:center;padding:135px 8vw;border-bottom:1px solid var(--line)}
.contact h2{font-size:clamp(58px,8vw,110px);margin:0}.contact p:not(.eyebrow){color:var(--muted);margin:30px 0 8px}.contact>a{font-size:20px;border-bottom:1px solid var(--gold);padding-bottom:4px}
footer{padding:35px 6vw;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#77736d;font-size:11px}footer i{color:var(--gold);font-style:normal}

@media(max-width:800px){
  .hero{aspect-ratio:auto;height:720px;min-height:0}
  .hero-image{background-position:56% top;background-size:auto 100%}
  .nav{height:70px;justify-content:flex-end;padding-right:7vw}
  .nav nav{display:none}
  .logo-hotspot{left:4%;top:1%;width:34%;height:10%}
  .contact-hotspot{right:4%;top:2%;width:23%;height:7%}
  .hero-ventures-hotspot{left:7%;top:52%;width:31%;height:7%}
  .hero-learn-hotspot{left:40%;top:52%;width:25%;height:7%}
  .scroll-hotspot{left:4%;bottom:7%;width:35%;height:12%}
  .content{grid-template-columns:1fr;padding:80px 7vw;gap:25px}
  .focus-grid{grid-template-columns:1fr}
  .venture{grid-template-columns:55px 1fr}
  .venture>b{display:none}
  .future{grid-template-columns:1fr}
  .contact{padding:100px 7vw}
  footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.sheen{animation:none}}

/* Exact-reference header fix: hide the header baked into the reference image
   while keeping the real HTML navigation visible and clickable. */

.nav{z-index:8}

/* Subtle moving light on the existing orbital path. The reference artwork
   itself remains unchanged, so no duplicate orbit is drawn. */
.orbit-animation{position:absolute;z-index:6;width:650px;height:305px;left:50.5%;top:25.5%;border:1px solid transparent;border-radius:50%;transform:rotate(-23deg);pointer-events:none}
.orbit-traveler{position:absolute;width:13px;height:13px;left:50%;top:-6.5px;margin-left:-6.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8dd 0 12%,#f4c86d 35%,#d08b31 62%,transparent 72%);box-shadow:0 0 5px #fff1bb,0 0 15px #e6a945,0 0 34px #c99a5566;animation:orbitTravel 8s linear infinite}
.orbit-traveler:after{content:"";position:absolute;width:48px;height:4px;right:6px;top:4px;border-radius:50%;background:linear-gradient(90deg,transparent,#f2c46f88,#fff1bd);filter:blur(2px);transform:rotate(-8deg);transform-origin:right center}
@keyframes orbitTravel{from{transform:rotate(0deg) translateX(325px) rotate(0deg)}to{transform:rotate(360deg) translateX(325px) rotate(-360deg)}}

@media(max-width:800px){
  
  .orbit-animation{width:470px;height:220px;left:50%;top:31%;transform:translateX(-50%) rotate(-23deg)}
  .orbit-traveler{animation-name:orbitTravelMobile}
}
@keyframes orbitTravelMobile{from{transform:rotate(0deg) translateX(235px) rotate(0deg)}to{transform:rotate(360deg) translateX(235px) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.orbit-traveler{animation:none}}

/* HEADER DUPLICATION FIX */
.header-cover{
  position:absolute;
  z-index:7;
  left:0;right:0;top:0;
  height:112px;
  background:#050505;
  pointer-events:none;
}
.nav{
  z-index:10;
  background:transparent;
}
/* Keep header logo/navigation proportions close to the reference. */
.nav nav{position:relative}
.logo-hotspot,.contact-hotspot{z-index:11}
@media(max-width:800px){
  .header-cover{height:82px}
}

/* === BRANDING ON THE MASKED HEADER === */
.brand-header{
  position:absolute;
  z-index:12;
  left:3.7%;
  top:17px;
  width:310px;
  height:68px;
  display:flex;
  align-items:center;
  gap:13px;
  transition:opacity .25s,transform .25s;
}
.brand-header:hover{opacity:.9;transform:translateY(-1px)}
.brand-mark{
  position:relative;
  width:70px;
  height:64px;
  flex:0 0 70px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-mark img{
  width:68px;
  height:64px;
  object-fit:contain;
  display:block;
}
.brand-type{
  display:block;
  min-width:0;
  line-height:1;
}
.brand-main{
  display:block;
  color:#f5f0e7;
  font-family:"Playfair Display",Georgia,serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:.205em;
  white-space:nowrap;
}
.brand-sub{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:9px;
  color:#d6a65a;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.40em;
  white-space:nowrap;
}
.brand-sub:before,.brand-sub:after{
  content:"";
  display:block;
  width:22px;
  height:1px;
  flex:0 0 22px;
  background:#d6a65a;
  opacity:.78;
}
@media(max-width:800px){
  .brand-header{left:4%;top:17px;width:34%;min-width:0}
  .brand-main{font-size:18px;letter-spacing:.13em}
  .brand-sub{font-size:9px;margin-top:5px;letter-spacing:.2em}
}

@media(max-width:800px){
  .brand-header{left:4%;top:12px;width:220px;height:55px;gap:8px}
  .brand-mark{width:49px;height:51px;flex-basis:49px}
  .brand-mark img{width:49px;height:51px}
  .brand-main{font-size:14px;letter-spacing:.15em}
  .brand-sub{font-size:6px;margin-top:6px;letter-spacing:.27em;gap:5px}
  .brand-sub:before,.brand-sub:after{width:14px;flex-basis:14px}
}

/* Use the actual Blendline Ventures B/V emblem from the original logo. */
.brand-mark{
  width:74px;
  height:68px;
  flex:0 0 74px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-mark img{
  width:74px;
  height:68px;
  object-fit:contain;
  display:block;
}
@media(max-width:800px){
  .brand-mark{width:52px;height:52px;flex-basis:52px}
  .brand-mark img{width:52px;height:52px}
}

/* === MOBILE RESPONSIVE HERO ===
   Desktop remains unchanged. On small screens we use a dedicated responsive
   composition so the desktop reference artwork is never horizontally cropped. */
.mobile-hero-content{display:none}
@media(max-width:800px){
  .hero{
    height:900px;
    min-height:0;
    aspect-ratio:auto;
    background:#050505 url("mobile-hero.png") center bottom/100% auto no-repeat;
    overflow:hidden;
  }
  .hero-image{display:none}
  .header-cover{height:82px;background:#050505}
  .brand-header{left:4%;top:12px;width:220px;height:55px;gap:8px}
  .brand-main{font-size:14px;letter-spacing:.15em}
  .brand-sub{font-size:6px;margin-top:6px;letter-spacing:.27em;gap:5px}
  .brand-sub:before,.brand-sub:after{width:14px;flex-basis:14px}
  .contact-hotspot{right:4%;top:17px;width:24%;height:42px;border:1px solid #e5b96d;border-radius:24px}
  .mobile-hero-content{
    display:block;
    position:absolute;
    z-index:9;
    left:7vw;
    right:7vw;
    top:108px;
  }
  .mobile-eyebrow{
    margin:0 0 17px;
    color:#e5b96d;
    font-size:10px;
    font-weight:700;
    letter-spacing:.24em;
  }
  .mobile-hero-content h1{
    margin:0;
    max-width:650px;
    color:#f4f0e8;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(42px,11vw,64px);
    line-height:.98;
    letter-spacing:-.045em;
  }
  .mobile-hero-content h1 i{color:#e5b96d;font-style:normal;font-weight:500}
  .mobile-description{
    margin:20px 0 0;
    max-width:540px;
    color:#d2cec6;
    font-size:14px;
    line-height:1.65;
  }
  .mobile-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
  .mobile-actions a{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:28px;font-size:13px;font-weight:600}
  .mobile-primary{background:#e5b96d;color:#090806;min-width:145px}
  .mobile-primary span{font-size:20px;margin-left:10px;line-height:1}
  .mobile-secondary{border:1px solid #d9d3c9;color:#f4f0e8;min-width:112px}
  .hero-ventures-hotspot,.hero-learn-hotspot{display:none}
  .scroll-hotspot{left:7%;bottom:5%;width:35%;height:9%}
  .orbit-animation{width:420px;height:195px;left:50%;top:51%;transform:translateX(-50%) rotate(-23deg)}
  .orbit-traveler{animation-name:orbitTravelMobile}
  .sheen{display:none}
}
@media(max-width:420px){
  .hero{height:820px;background-size:auto 820px;background-position:center bottom}
  .mobile-hero-content{top:100px}
  .mobile-eyebrow{font-size:9px;margin-bottom:14px}
  .mobile-hero-content h1{font-size:43px}
  .mobile-description{font-size:13px;line-height:1.55;margin-top:17px}
  .mobile-actions{margin-top:19px}
  .mobile-actions a{height:44px;padding:0 17px;font-size:12px}
  .contact-hotspot{width:25%;height:38px;top:17px}
  .orbit-animation{display:none}
}


/* === POLISHED MOBILE LAYOUT === */
@media (max-width: 800px){
  body{overflow-x:hidden}
  .hero{
    height:760px;
    min-height:760px;
    background:#050505;
    overflow:hidden;
  }
  .hero-image{display:none}
  .header-cover{height:78px;background:linear-gradient(180deg,#050505 78%,transparent)}
  .brand-header{left:20px;top:14px;width:205px;height:48px;gap:8px}
  .brand-mark,.brand-mark img{width:46px;height:46px}
  .brand-main{font-size:13px;letter-spacing:.14em}
  .brand-sub{font-size:5.5px;margin-top:5px;letter-spacing:.25em;gap:5px}
  .brand-sub:before,.brand-sub:after{width:12px;flex-basis:12px}
  .contact-hotspot{right:20px;top:18px;width:112px;height:38px;border:1px solid #e5b96d;border-radius:22px}
  .mobile-hero-content{
    display:block;
    position:absolute;
    z-index:9;
    left:24px;
    right:24px;
    top:101px;
  }
  .mobile-eyebrow{margin:0 0 15px;font-size:9px;letter-spacing:.22em}
  .mobile-hero-content h1{
    font-size:42px;
    line-height:1.02;
    letter-spacing:-.04em;
    max-width:330px;
  }
  .mobile-description{
    margin-top:17px;
    max-width:335px;
    font-size:13px;
    line-height:1.55;
    color:#bdb8ae;
  }
  .mobile-actions{margin-top:21px;gap:9px;flex-wrap:nowrap}
  .mobile-actions a{height:43px;padding:0 16px;font-size:11.5px;white-space:nowrap}
  .mobile-primary{min-width:139px}
  .mobile-secondary{min-width:101px}
  .mobile-primary span{font-size:17px;margin-left:8px}
  .mobile-visual{
    display:block;
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:-4px;
    height:375px;
    background:url("mobile-orbit-clean.png") center bottom / 100% auto no-repeat;
    pointer-events:none;
  }
  .scroll-hotspot{display:none}
  .hero-ventures-hotspot,.hero-learn-hotspot{display:none}
  .sheen{display:none}
  .content{grid-template-columns:1fr;padding:72px 24px;gap:20px}
  .content p:not(.eyebrow){font-size:16px;line-height:1.65}
  h2{font-size:43px;line-height:1.02}
  .venture{grid-template-columns:48px 1fr;gap:15px;padding:26px 0;margin-top:30px}
  .icon{width:48px;height:48px}.icon img{width:48px;height:48px}
  .venture strong,.future strong{font-size:23px}
  .focus-grid{grid-template-columns:1fr;gap:1px}
  .focus-grid article{min-height:180px;padding:25px}
  .contact{padding:90px 24px}
  .contact h2{font-size:52px}
  footer{padding:28px 24px;flex-direction:column;gap:10px}
}
@media (max-width:420px){
  .hero{height:735px;min-height:735px}
  .brand-header{left:16px}
  .contact-hotspot{right:16px;width:105px}
  .mobile-hero-content{left:20px;right:20px;top:96px}
  .mobile-hero-content h1{font-size:40px;max-width:310px}
  .mobile-description{max-width:315px}
  .mobile-actions a{padding:0 14px}
  .mobile-primary{min-width:134px}
  .mobile-secondary{min-width:96px}
  .mobile-visual{height:360px;background-size:auto 360px;background-position:center bottom}
}
@media (min-width:801px){.mobile-visual{display:none}}


/* === FINAL MOBILE INTEGRATED HERO ===
   The orbital artwork is treated as a transparent-looking atmospheric layer
   using screen blending + a soft mask, so it reads as part of the background
   rather than a separate rectangular image. Desktop remains unchanged. */
@media (max-width: 800px){
  .hero{
    height: 780px;
    min-height: 780px;
    background: #050505;
    position: relative;
  }

  .mobile-visual{
    display:block;
    position:absolute;
    z-index:2;
    left:-18%;
    right:-18%;
    bottom:-105px;
    width:136%;
    height:540px;
    background-image:url("mobile-orbit-clean.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    mix-blend-mode:screen;
    opacity:.88;
    -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 52%, #000 28%, rgba(0,0,0,.94) 48%, rgba(0,0,0,.5) 70%, transparent 91%);
    mask-image:radial-gradient(ellipse 68% 62% at 50% 52%, #000 28%, rgba(0,0,0,.94) 48%, rgba(0,0,0,.5) 70%, transparent 91%);
    pointer-events:none;
  }

  .mobile-hero-content{z-index:10;}
  .nav,.brand-header,.header-cover{z-index:12;}

  .contact-hotspot{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f4f0e8;
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
  }
  .contact-hotspot::after{content:"GET IN TOUCH  →";}

  /* Give the lower orbital layer a natural fade into the black page. */
  .hero::after{
    content:"";
    position:absolute;
    z-index:3;
    left:0;right:0;bottom:0;
    height:230px;
    background:linear-gradient(to bottom, transparent 0%, rgba(5,5,5,.08) 28%, rgba(5,5,5,.72) 82%, #050505 100%);
    pointer-events:none;
  }

  .mobile-actions{position:relative;z-index:11;}
}

@media (max-width:420px){
  .hero{height:760px;min-height:760px;}
  .mobile-visual{
    left:-30%;right:-30%;width:160%;
    height:490px;
    bottom:-70px;
    background-size:cover;
    opacity:.82;
  }
  .hero::after{height:200px;}
  .contact-hotspot{font-size:9px;width:105px;}
}