/* ============================================================
   HVN LABS — SITE STYLES
   Design system extracted from the HVN Labs Framer site:
   pure black base, Univers Light text, flat 5px radii,
   particle hero, 15px nav, 22px body, 50px H2, 70px contact H1.
   The one deck import: bold gradient titles + cyan eyebrow
   (electric cyan -> violet -> magenta).
   ============================================================ */

/* Univers — self-hosted Light (same webfont the Framer site serves),
   Bold via locally-installed faces with Helvetica Neue fallback. */
@font-face{font-family:"Univers";font-style:normal;font-weight:300;font-display:swap;
  src:local("Univers Light"),local("Univers-Light"),url("../assets/fonts/univers-light.woff2") format("woff2");}
@font-face{font-family:"Univers";font-style:normal;font-weight:400;font-display:swap;
  src:local("Univers"),local("Univers Regular"),local("Univers-Roman"),url("../assets/fonts/univers-light.woff2") format("woff2");}
@font-face{font-family:"Univers";font-style:normal;font-weight:700;font-display:swap;
  src:local("Univers Bold"),local("Univers-Bold"),local("UniversBold"),local("Univers 65 Bold");}
/* display bold — isolated family holding ONLY the real Univers Bold faces, so a
   failed local lookup falls through to Helvetica Neue's true bold (never the light file) */
@font-face{font-family:"Univers Display";font-style:normal;font-weight:700;font-display:swap;
  src:local("Univers Bold"),local("Univers-Bold"),local("UniversBold"),local("Univers 65 Bold"),local("Univers LT Std 65 Bold");}

:root{
  /* palette — from the live site */
  --bg:#000000;
  --ink:#FFFFFF;
  --text:rgba(255,255,255,.75);
  --text-muted:#999999;
  --line:rgba(255,255,255,.12);
  --field:#0d0d0d;
  /* deck import — gradient titles + cyan eyebrow */
  --c-cyan:#37E1F0;
  --grad:linear-gradient(100deg,#37E1F0 0%,#6E7BFF 48%,#FF3D7F 100%);
  /* type — Univers Light everywhere, Bold for titles */
  --font:"Univers","Univers LT Std","Helvetica Neue","Helvetica",Arial,sans-serif;
  --font-display:"Univers Display","Helvetica Neue","Helvetica",Arial,sans-serif;
  --fs-body:clamp(17px,1.6vw,22px);        /* site: 22px / 300 / -0.01em     */
  --fs-h1:clamp(45px,5.4vw,70px);          /* site: 70 -> 56 -> 45, -2.2px   */
  --fs-h2:clamp(28px,3.8vw,50px);          /* site: 50 -> 40 -> 28, -0.04em  */
  --fs-name:23px;                          /* site: team names               */
  --fs-label:16px;                         /* site: roles / form labels      */
  /* spacing scale — consistent everywhere */
  --sect:clamp(80px,11vh,130px);
  --gap-title:24px;
  --gap-para:16px;
  --gap-media:44px;
  --radius:5px;
  --nav-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); font-weight:300; background:var(--bg); color:var(--text);
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(55,225,240,.28); color:#fff}
img,video,canvas{display:block; max-width:100%}
/* hide Safari's paused-video overlay glyph on background videos */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
a{color:inherit; text-decoration:none}
button,input,textarea{font-family:var(--font)}

/* ---------- display titles + gradient emphasis (the deck import) ----------
   Deck pattern: the title is bold white, ONE key word carries the gradient. */
.hd{font-family:var(--font-display); font-weight:700; color:var(--ink)}
.grad{
  font-family:var(--font-display); font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--c-cyan);
  padding-bottom:.12em;   /* background clips to the box — keep descenders (y, g) inside the paint area */
}

/* ---------- layout primitives ---------- */
.wrap{width:min(1100px,88vw); margin-inline:auto}
.section{padding:var(--sect) 0}
.section--tight{padding-top:0}
.h1{font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.035em}
.h2{font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.04em}
.body{font-weight:300; font-size:var(--fs-body); line-height:1.5; letter-spacing:-.01em; color:var(--text)}
.body + .body{margin-top:var(--gap-para)}
.eyebrow{font-family:var(--font-display); font-weight:700; font-size:clamp(11px,1vw,13px);
  letter-spacing:.32em; text-transform:uppercase; color:var(--c-cyan)}

/* ---------- nav — site: 15px, grey -> white ---------- */
.nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px); border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease}
.nav.scrolled{background:rgba(0,0,0,.8); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav__brand img{height:30px; width:auto; opacity:.95}
.nav__links{display:flex; align-items:center; gap:clamp(20px,3vw,40px)}
.nav__links a{font-size:15px; font-weight:400; letter-spacing:-.01em; color:var(--text-muted);
  transition:color .25s}
.nav__links a:hover,.nav__links a.active{color:#fff}
.nav__burger{display:none; width:38px; height:38px; border:1px solid var(--line);
  border-radius:var(--radius); background:transparent; cursor:pointer; color:#fff; place-items:center}
.nav__burger svg{width:20px;height:20px}

/* ---------- particle hero (site: "Particles holder", 45% opacity) ---------- */
.hero{position:relative; display:grid; place-items:center; overflow:hidden; text-align:center;
  padding:calc(var(--nav-h) + 40px) 0 70px; min-height:72vh}
.hero--full{min-height:100vh}
.hero__particles{position:absolute; inset:0; z-index:0; opacity:.45; pointer-events:none}
.hero__particles canvas{width:100%; height:100%}
.hero__inner{position:relative; z-index:2; display:grid; justify-items:center}
.hero__logo{width:clamp(180px,24vw,300px); height:auto; margin-bottom:clamp(30px,5vh,48px)}
.hero__logo--solo{width:clamp(240px,32vw,420px); margin:0}   /* logo alone, centred in the viewport */
.hero__inner .eyebrow{margin-bottom:28px}

/* scroll-down cue — fades out via JS as the page scrolls */
.scroll-cue{position:absolute; left:50%; bottom:clamp(26px,5vh,46px); transform:translateX(-50%);
  z-index:3; color:rgba(255,255,255,.75); transition:color .25s;
  animation:cueIn 1s ease .7s backwards}
.scroll-cue:hover{color:#fff}
.scroll-cue svg{width:32px; height:32px; display:block; animation:cueBob 2.4s ease-in-out infinite}
@keyframes cueIn{from{opacity:0}to{opacity:1}}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* videos that the browser refuses to autoplay (e.g. Safari Low Power Mode)
   fade out entirely — WebKit's play overlay goes with them, keeping text clean */
video{transition:opacity .6s ease}
video.video-blocked{opacity:0}
.hero__title{margin-bottom:26px}
.hero__sub{font-weight:300; font-size:clamp(20px,2.6vw,34px); line-height:1.2; letter-spacing:-.04em;
  color:var(--ink); max-width:26ch}
.hero__sub--wide{max-width:34ch}

/* video hero variant (events page) */
.hero--video .hero__bg{position:absolute; inset:0; z-index:0;
  background:#000 url("../assets/parham-still.jpg") center/cover no-repeat}
.hero--video .hero__bg video{width:100%; height:100%; object-fit:cover}
.hero--video .hero__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.8) 100%)}
.hero--video .hero__title{font-size:clamp(56px,9vw,110px); line-height:1; letter-spacing:-.03em;
  margin-bottom:14px;   /* .grad bottom padding supplies the rest of the 26px gap */
  filter:drop-shadow(0 0 40px rgba(110,123,255,.28))}
.hero--video .hero__sub{font-size:clamp(18px,2.4vw,33px); line-height:1.15; letter-spacing:-.045em;
  max-width:38ch; text-shadow:0 1px 4px rgba(0,0,0,.6)}
.hero__sub + .hero__sub{margin-top:18px}

/* ---------- home: video showcase with "Find Out More" ---------- */
.showcase{position:relative; min-height:88vh; display:grid; place-items:center; overflow:hidden;
  background:#000 url("../assets/hero-still.jpg") center/cover no-repeat}
.showcase video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.showcase::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.6) 100%)}
.showcase__inner{position:relative; z-index:2; display:grid; justify-items:center;
  gap:clamp(34px,6vh,56px); text-align:center}
.showcase__link{position:relative; z-index:2; font-weight:300; font-size:clamp(32px,3.2vw,40px);
  letter-spacing:-.03em; color:var(--ink); text-align:center; padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .3s, color .3s}
.showcase__link:hover{border-color:var(--c-cyan); color:var(--c-cyan)}

/* ---------- feature sections (events page) ---------- */
.feature__head{margin-bottom:var(--gap-media)}
.feature__head .h2{margin-bottom:var(--gap-title)}
.feature__head .body{max-width:34ch}
.feature__media{border-radius:var(--radius); overflow:hidden; background:var(--field)}
.feature__media img{width:100%; height:auto}
.intro .body{max-width:40ch}

/* ---------- about ---------- */
/* hero carries title + sub + intro copy under one particle field,
   so hero -> copy -> team reads as one continuous flow */
.hero--about{min-height:auto; padding-bottom:clamp(64px,9vh,100px)}
.about-lead{margin-top:clamp(40px,6vh,60px); text-align:center}
.about-lead .body{max-width:52ch; margin-inline:auto}
.about-lead .body + .body{margin-top:var(--gap-para)}

/* sequential appear — matches the live site's effect: fade + slight rise, staggered */
.seq > *{opacity:0; transform:translateY(12px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1)}
.seq.in > *{opacity:1; transform:none}

/* light-trails banner — full-bleed loop under the About intro */
.trails{width:100%; overflow:hidden; line-height:0;
  background:url("../assets/trails-still.jpg") center/cover no-repeat}
.trails video{width:100%; height:auto}
.seq.in > *:nth-child(1){transition-delay:.3s}
.seq.in > *:nth-child(2){transition-delay:.55s}
.seq.in > *:nth-child(3){transition-delay:.8s}
.seq.in > *:nth-child(4){transition-delay:1.05s}
.seq.in > *:nth-child(n+5){transition-delay:1.3s}

/* team grid — site: photo, 23px name, 16px 75%-white role */
.team{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px); margin-top:clamp(44px,6vh,64px)}
.member{display:grid; gap:0; text-align:left}
.member__photo{border-radius:var(--radius); overflow:hidden; background:var(--field);
  aspect-ratio:1/1; margin-bottom:14px}
.member__photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(8%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.member:hover .member__photo img{transform:scale(1.04)}
.member__name{font-weight:400; font-size:var(--fs-name); letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); margin-bottom:4px}
.member__role{font-weight:300; font-size:var(--fs-label); letter-spacing:-.02em; line-height:1.4;
  color:var(--text)}
.member__li{margin-top:8px; justify-self:start; opacity:.75; transition:opacity .25s}
.member__li:hover{opacity:1}
.member__li img{width:18px; height:18px}

/* ---------- image blended into the page background ----------
   Photo sits behind the content at low opacity, edge-masked so it
   fades into the black canvas instead of reading as a framed box. */
.bleed{position:relative; overflow:hidden}
.bleed__bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; opacity:.34;
  -webkit-mask-image:radial-gradient(92% 86% at 50% 50%, #000 28%, transparent 98%);
  mask-image:radial-gradient(92% 86% at 50% 50%, #000 28%, transparent 98%)}
.bleed__bg--soft{opacity:.26}
.bleed__bg--video{opacity:.55; background:url("../assets/hero-still.jpg") center/cover no-repeat}
.bleed__bg video{width:100%; height:100%; object-fit:cover}
.bleed > .wrap{position:relative; z-index:2}

/* rows — heading left, copy right (site layout) */
.row{display:grid; grid-template-columns:minmax(170px,.9fr) 1.5fr;
  column-gap:clamp(32px,7vw,110px); align-items:start;
  padding:clamp(30px,5vh,52px) 0}
.row:first-child{padding-top:0}
.row:last-child{padding-bottom:0}
.row__title{font-size:clamp(24px,2.6vw,32px); line-height:1.1; letter-spacing:-.03em}
.row__text .body{max-width:44ch}
.row__text .body + .body{margin-top:var(--gap-para)}

/* ---------- contact ---------- */
.contact-sub{font-weight:300; font-size:var(--fs-label); line-height:1.5; color:var(--text)}
.contact-email{display:grid; justify-items:center; gap:6px; margin:clamp(36px,5vh,56px) auto}
.contact-email__label{font-weight:300; font-size:var(--fs-label); color:var(--text)}
.contact-email__addr{font-weight:400; font-size:var(--fs-label); letter-spacing:-.02em; color:var(--ink)}
.contact-email__addr:hover{color:var(--c-cyan)}

.form{width:min(640px,100%); margin-inline:auto; display:grid; gap:18px; text-align:left}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form__group{display:grid; gap:8px}
.form__label{font-weight:400; font-size:var(--fs-label); letter-spacing:-.02em; color:var(--text)}
.form input,.form textarea{
  width:100%; background:var(--field); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; font-weight:300; font-size:16px; letter-spacing:-.01em; color:var(--ink);
  transition:border-color .25s; outline:none}
.form input:focus,.form textarea:focus{border-color:rgba(255,255,255,.45)}
.form textarea{min-height:140px; resize:vertical}
.form__submit{justify-self:start; font-weight:400; font-size:15px; letter-spacing:-.01em;
  color:#000; background:#fff; border:1px solid #fff; border-radius:var(--radius);
  padding:13px 30px; cursor:pointer; transition:background .25s, color .25s}
.form__submit:hover{background:transparent; color:#fff}

/* ---------- CTA (events) ---------- */
.cta{text-align:center; border-top:1px solid var(--line)}
.cta__title{font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.04em; margin-bottom:16px}
.cta__sub{font-weight:300; font-size:var(--fs-label); letter-spacing:0; color:var(--text);
  margin-bottom:36px}
.btn{display:inline-block; font-weight:300; font-size:16px; letter-spacing:-.01em;
  color:var(--ink); padding:13px 30px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.45); background:transparent; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s}
.btn:hover{background:#fff; border-color:#fff; color:#000}

/* ---------- footer — site: LinkedIn icon, 14px links, © line ---------- */
.footer{padding:clamp(40px,6vh,60px) 0 36px; border-top:1px solid var(--line); text-align:center}
.footer__social{display:inline-block; margin-bottom:22px; opacity:.85; transition:opacity .25s}
.footer__social:hover{opacity:1}
.footer__social img{width:30px; height:30px; border-radius:6px}
.footer__links{display:flex; justify-content:center; gap:28px; margin-bottom:20px}
.footer__links a{font-weight:300; font-size:14px; letter-spacing:0; color:var(--text-muted);
  transition:color .25s}
.footer__links a:hover{color:#fff}
.footer__copy{font-weight:300; font-size:14px; letter-spacing:0; color:var(--text)}

/* ---------- legal pages (privacy / terms) ---------- */
.legal{padding:calc(var(--nav-h) + clamp(48px,8vh,84px)) 0 var(--sect)}
.legal__updated{font-weight:300; font-size:var(--fs-label); color:var(--text-muted);
  margin:14px 0 clamp(36px,5vh,56px)}
.legal__body{max-width:70ch}
.legal__body h2{font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(20px,2vw,24px); letter-spacing:-.02em; margin:40px 0 12px}
.legal__body h3{font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:17px; letter-spacing:-.02em; margin:26px 0 10px}
.legal__body p,.legal__body li{font-weight:300; font-size:17px; line-height:1.6; color:var(--text)}
.legal__body p{margin-bottom:12px}
.legal__body ul{margin:0 0 12px 22px}
.legal__body li{margin-bottom:6px}
.legal__body strong{font-weight:400; color:var(--ink)}
.legal__body a{color:var(--ink); border-bottom:1px solid rgba(255,255,255,.35);
  transition:color .25s, border-color .25s}
.legal__body a:hover{color:var(--c-cyan); border-color:var(--c-cyan)}

/* ---------- cookie consent banner ---------- */
.cookie{position:fixed; inset:auto 0 0 0; z-index:200; background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:18px clamp(20px,4vw,48px)}
.cookie__inner{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  justify-content:space-between; width:min(1100px,100%); margin-inline:auto}
.cookie__text{font-weight:300; font-size:14px; line-height:1.5; color:var(--text); max-width:62ch}
.cookie__text a{color:var(--ink); border-bottom:1px solid rgba(255,255,255,.35);
  transition:color .25s, border-color .25s}
.cookie__text a:hover{color:var(--c-cyan); border-color:var(--c-cyan)}
.cookie__actions{display:flex; gap:12px}
.btn--sm{padding:9px 22px; font-size:14px}
.btn--solid{background:#fff; border-color:#fff; color:#000}
.btn--solid:hover{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .seq > *{opacity:1;transform:none;filter:none;transition:none}
  .hero__particles{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav__links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(0,0,0,.95); backdrop-filter:blur(16px); padding:6px 24px 22px;
    border-bottom:1px solid var(--line); transform:translateY(-120%);
    transition:transform .38s cubic-bezier(.2,.7,.2,1); pointer-events:none}
  .nav__links.open{transform:none; pointer-events:auto}
  .nav__links a{padding:15px 2px; border-bottom:1px solid var(--line); font-size:16px; text-align:center}
  .nav__burger{display:grid}
  .intro,.feature__head{text-align:center}
  .intro .body,.feature__head .body{margin-inline:auto}
  .form__row{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .member__name{font-size:19px}
  .row{grid-template-columns:1fr; row-gap:12px}
  .bleed__bg{opacity:.24}
}