@charset "utf-8";

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  background:#0f0f10;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{
  width:min(1440px, 100%);
  margin:0 auto;
  padding:0 40px;
}

/* Make images/video behave */
img, video{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   Top bar overlay (logo | nav | icons)
   ========================= */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:10;

  /* Controls how far the gradient fades down */
  height:120px;
}

/* Black (top) -> transparent (bottom) overlay */
.topbar::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0.0) 100%
  );

  pointer-events:none; /* so it doesn't block clicks */
}

.topbar__inner{
  position:relative;
  z-index:1;
  height:86px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:28px;
}

/* Tighten horizontal padding ONLY for the topbar */
.topbar .wrap{
  padding-left:8px;
  padding-right:8px;
}

.brand{ justify-self:start; }
.brand img{
  height:40px;
  width:auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
 transition: transform 0.1s ease;
}

.brand:hover img{
  transform: scale(1.1);
}

.nav{
  justify-self:right;
  display:flex;
  gap:30px;
  align-items:center;
  margin-right:24px;
}

.nav__link{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-size:16px;
  letter-spacing:1.2px;
  transition: transform 0.1s ease;
}
.nav__link:hover{
  transform: scale(1.12);
}

.nav__link.is-active{
  font-weight: 800;
}

/* Social icons */
.social{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:flex-end;
}

.social__icon{
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,0.92);
  display:grid;
  place-items:center;
  text-decoration:none;
  transition: transform 0.1s ease;
}

.social__icon:hover{
  transform: scale(1.18);
}

.social__icon img{
  width:24px;
  height:24px;
  filter:none;
  opacity:0.95;
}

/* =========================
   Hero (full-bleed video + diagonal cut)
   ========================= */
.page{ overflow:visible; }

.hero{
  position:relative;
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height:120vh;
  min-height:820px;
  overflow:hidden;
  background:#000;
  z-index:1;
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: top 90%;
}

/* subtle haze over video */
.hero__haze{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.08) 30%,
    rgba(0,0,0,0.00) 60%
  );
}

/* Center logo overlay on hero video (HARD SIZE LOCK) */
.hero__logo{
  width:800px;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -70%) !important; /* NO SCALE */
  transform-origin:center center;
  z-index:3;
  text-align:center;
  pointer-events:none;
}

/* =========================
   Hero logo responsive scaling
   (prevents topbar overlap)
   ========================= */

/* Medium screens / shorter viewports */
@media (max-width: 1200px){
  .hero__logo{ width:740px; }
}

/* Tablet / small desktop */
@media (max-width: 980px){
  .hero__logo{
    width:620px;
    transform: translate(-50%, -65%) !important;
  }
}

/* Mobile */
@media (max-width: 720px){
  .hero__logo{
    width:460px;
    transform: translate(-50%, -60%) !important;
  }
}

/* Small phones */
@media (max-width: 480px){
  .hero__logo{
    width:300px;
    transform: translate(-50%, -58%) !important;
  }
}

/* =========================
   HERO CUT (DESKTOP DEFAULT)
   Desktop stays EXACTLY like before.
   ========================= */
.hero__cut{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;

  /* DESKTOP DEFAULT HEIGHT (unchanged) */
  height:420px;

  background:#0f0f10;
  z-index:2;

  /* DESKTOP DEFAULT SHAPE (unchanged) */
  clip-path: polygon(
    0% 58%,
    34% 30%,
    87% 74%,
    100% 66%,
    100% 100%,
    0% 100%
  );
}

/* Tablet / small desktop */
@media (max-width: 980px){
  .hero__cut{
    height:280px;
    clip-path: polygon(
      0% 70%,
      34% 52%,
      87% 78%,
      100% 72%,
      100% 100%,
      0% 100%
    );
  }
}

/* Mobile */
@media (max-width: 720px){
  .hero__cut{
    height:220px;
    clip-path: polygon(
      0% 74%,
      34% 58%,
      87% 80%,
      100% 75%,
      100% 100%,
      0% 100%
    );
  }
}

/* Extra-small phones */
@media (max-width: 480px){
  .hero__cut{
    height:180px;
    clip-path: polygon(
      0% 78%,
      34% 64%,
      87% 82%,
      100% 78%,
      100% 100%,
      0% 100%
    );
  }
}

/* =========================
   Slant section (pins footer to bottom)
   ========================= */
.slant{
  position:relative;
  background:#0f0f10;
  z-index:3;
  min-height:100vh;
}

.slant__layout{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:70px;
}

/* =========================
   Home core (headline + bio + avatars)
   ========================= */
.home-core{
  flex:1;
  position:relative;

  padding-left:220px;
  padding-right:220px;
  padding-bottom:80px;

  overflow:visible;
}

.headline{
  margin:0;
  text-align:center;
  font-weight:800;
  letter-spacing:0.2px;
  font-size: clamp(44px, 4.2vw, 72px);
}

.bio{
  width: min(860px, 92%);
  margin: 22px auto 0;
  padding: 36px 48px;
  border-radius: 22px;
  background: rgba(85,85,85,0.62);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  text-align: center;

  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.65;
  letter-spacing: 0.2px;

  color: rgba(255,255,255,0.95);
}

/* =========================
   AVATARS SYSTEM
   ========================= */
:root{ --avatar-scale: 1; }
@media (max-width: 1200px){ :root{ --avatar-scale: 0.85; } }
@media (max-width: 1050px){ :root{ --avatar-scale: 0.72; } }

.avatars--desktop{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.avatars--mobile{
  display:none;
  pointer-events:none;
}

.avatars--desktop .avatars__left,
.avatars--desktop .avatars__right{
  position:absolute;
  inset:0;
  transform:none;
}

.avatars--desktop .av{
  position:absolute;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 18px 38px rgba(0,0,0,0.45);
}

.avatars--desktop .av--l1{
  width:  calc(320px * var(--avatar-scale));
  height: calc(320px * var(--avatar-scale));
  left: -150px;
  top:  -80px;
}
.avatars--desktop .av--l2{
  width:  calc(200px * var(--avatar-scale));
  height: calc(200px * var(--avatar-scale));
  left: 0px;
  top:  300px;
}
.avatars--desktop .av--r1{
  width:  calc(190px * var(--avatar-scale));
  height: calc(190px * var(--avatar-scale));
  right: 20px;
  top:  -120px;
}
.avatars--desktop .av--r2{
  width:  calc(300px * var(--avatar-scale));
  height: calc(300px * var(--avatar-scale));
  right: -120px;
  top:   40px;
}
.avatars--desktop .av--r3{
  width:  calc(200px * var(--avatar-scale));
  height: calc(200px * var(--avatar-scale));
  right: 50px;
  top:   350px;
}

@media (max-width: 1200px){
  .home-core{
    padding-left: 180px;
    padding-right: 180px;
  }
  .avatars--desktop .av--l1{ left: -100px; }
  .avatars--desktop .av--l2{ left: 25px; }
  .avatars--desktop .av--r1{ right: 10px; }
  .avatars--desktop .av--r2{ right: -80px; }
  .avatars--desktop .av--r3{ right: 20px; }
}

@media (max-width: 1050px){
  .home-core{
    padding-left: 150px;
    padding-right: 150px;
  }
  .avatars--desktop .av--l1{ left: -75px; top: -60px; }
  .avatars--desktop .av--l2{ left: 35px; }
  .avatars--desktop .av--r1{ right: 0px; top: -105px; }
  .avatars--desktop .av--r2{ right: -55px; top: 55px; }
  .avatars--desktop .av--r3{ right: 10px; top: 360px; }
}

@media (max-width: 980px){
  .avatars--desktop{ display:none; }

  .home-core{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 40px;
  }

  .bio{
    width:100%;
    max-width:none;
    margin: 16px 0 0;
  }

  .avatars--mobile{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top: 22px;
    margin-bottom: 46px;
  }

  .avatars__row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: clamp(8px, 2.2vw, 18px);
    margin-bottom: 14px;
  }

  .avatars--mobile .av{
    position:static;
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 18px 38px rgba(0,0,0,0.45);
  }

  .avatars--mobile .av--center{
    width: 96px;
    height: 96px;
    aspect-ratio: 1 / 1;
    border-radius:50%;
    object-fit:cover;
  }
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 720px){

  .wrap{ padding:0 18px; }

  .topbar__inner{
    height:64px;
    column-gap:14px;
  }
  .brand img{ height:28px; }
  .nav{ gap:14px; }
  .social{ gap:12px; }

  .hero{
    height:520px;
    min-height:520px;
  }
  .hero__video{
    object-position:center 85%;
  }

  .hero__logo img{
    width: clamp(95px, 18vw, 140px);
    margin-bottom: 8px;
  }
  .hero__logo h1,
  .hero__logo .hero__logo-title{
    font-size: clamp(34px, 9vw, 52px);
    letter-spacing: 1px;
  }

  .headline{
    text-align:center;
    font-size:38px;
    line-height:1.05;
    margin-top:10px;
  }

  .bio{
    padding:22px 18px;
    border-radius:18px;
  }

  .avatars--mobile{
    margin-top: 18px;
    margin-bottom: 46px;
  }

  .avatars__row{
    gap: 12px;
    margin-bottom: 14px;
  }

  .avatars--mobile .av{
    width: 68px;
    height: 68px;
  }

  .avatars--mobile .av--center{
    width: 92px;
    height: 92px;
  }

  .site-footer{
    padding:34px 0;
  }

  .site-footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .site-footer__right{
    margin-left:0;
    text-align:left;
  }

  .site-footer__label{
    font-size:34px;
  }
}

/* =========================
   Footer (visible + pinned)
   ========================= */
.site-footer{
  margin-top:auto;
  background:#0f0f10;
  padding:35px 0;
  color:#fff;
}

.site-footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
}

.site-footer__name{
  font-size:20px;
  font-weight:600;
}

.site-footer__right{
  margin-left:auto;
  text-align:right;
}

.site-footer__label{
  font-size:44px;
  font-weight:300;
  line-height:1;
}

.site-footer__email{
  display:inline-block;
  margin-top:10px;
  color: rgba(255,255,255,0.95);
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ✅ Your working logo size lock (keep this at the very bottom) */
.hero__logo img{
  width:110px !important;
  max-width:110px !important;
  height:auto !important;
}

/* =========================
   WORK PAGE (Squarespace-style layout)
   ========================= */
.workpage{
  background:#0f0f10;
}

/* LIGHT TOP SECTION */
.workpage__intro{
  position: relative;
  background:#e7e7e7;
  color:#101012;
  padding-top:120px;
  padding-bottom:320px; /* DESKTOP */
}

@media (max-width: 1200px){
  .workpage__intro{
    padding-bottom:260px;
  }
}

@media (max-width: 980px){
  .workpage__intro{
    padding-bottom:200px;
  }
}

@media (max-width: 720px){
  .workpage__intro{
    padding-bottom:120px;
  }
}



/* Intro layout: text left / reel right */
.work-intro{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:48px;
  align-items:center;
  padding-top:60px;
  padding-bottom:90px;
}

.work-intro__title{
  margin:0 0 18px;
  font-size: clamp(44px, 4vw, 64px);
  font-weight:800;
  letter-spacing:0.2px;
}

.work-intro__copy{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.55;
  color: rgba(16,16,18,0.92);
}

.work-intro__copy strong{
  font-weight:800;
}

.work-embed{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius: 0;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.work-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================
   ✅ WORK PAGE zigzag cut (FIXED)
   Desktop matches homepage; mobile independent.
   ========================= */

/* DESKTOP default */
.workpage__cut{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;      /* prevents grey seam */
  height:420px;     /* big homepage-style cut */
  background:#0f0f10;
  z-index:2;

  clip-path: polygon(
    0% 58%,
    34% 30%,
    87% 74%,
    100% 66%,
    100% 100%,
    0% 100%
  );
}

/* Tablet */
@media (max-width: 980px){
  .workpage__cut{
    height:280px;
    clip-path: polygon(
      0% 70%,
      34% 52%,
      87% 78%,
      100% 72%,
      100% 100%,
      0% 100%
    );
  }
}

/* Mobile */
@media (max-width: 720px){
  .workpage__cut{
    bottom:-1px;
    height:220px;
    clip-path: polygon(
      0% 74%,
      34% 58%,
      87% 80%,
      100% 75%,
      100% 100%,
      0% 100%
    );
  }
}

/* =========================
   DARK PROJECTS SECTION
   (reduced top padding to close the gap)
   ========================= */
.workpage__projects{
  background:#0f0f10;
  padding-top:36px;   /* was 70px */
  padding-bottom:90px;
}

.workpage__heading{
  margin: 0 0 24px;   /* tighter */
  font-size: 32px;
  font-weight:800;
  color:#fff;
}

.workpage__heading--spaced{
  margin-top: 90px;
}

/* alternating rows */
.work-row{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:56px;
  align-items:center;
  padding: 46px 0;
}

.work-row + .work-row{
  
}

/* flip makes MEDIA appear on the right */
.work-row--flip .work-row__media{ order:2; }
.work-row--flip .work-row__text{ order:1; text-align:right; }

.work-row__media img{
  width:100%;
  max-width: 620px;
  height:auto;
  display:block;
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.work-row__video{
  width:100%;
  max-width:620px;
  height:auto;
  display:block;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  background:#000;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

.work-row__text{
  max-width: 520px;
}

.work-row--flip .work-row__text{
  margin-left:auto;
}

.work-row__title{
  margin:0 0 6px;
  font-size:22px;
  font-weight:800;
  color:#fff;
}

.work-row__sub{
  font-style:italic;
  color: rgba(255,255,255,0.86);
  margin-bottom: 14px;
}

.work-row__desc{
  margin:0;
  color: rgba(255,255,255,0.92);
  font-size:18px;
  line-height:1.6;
}

/* smaller embeds inside rows */
.work-embed--small{
  max-width: 620px;
}

/* Responsive */
@media (max-width: 980px){
  .work-intro{
    grid-template-columns: 1fr;
    gap:26px;
    padding-top:34px;
    padding-bottom:70px;
  }

  .work-row{
    grid-template-columns: 1fr;
    gap:22px;
    padding: 34px 0;
  }

  .work-row--flip .work-row__media,
  .work-row--flip .work-row__text{
    order:unset;
    text-align:left;
  }

  .work-row__text,
  .work-row--flip .work-row__text{
    max-width:none;
    margin-left:0;
  }

  .workpage__projects{
    padding-top:28px; /* slightly tighter on tablet too */
  }
}

@media (max-width: 720px){
  .work-row__desc{
    font-size:16px;
  }

  .workpage__heading{
    font-size:28px;
  }

  .workpage__projects{
    padding-top:26px; /* tight on mobile */
  }
}

/* =========================
   ABOUT PAGE (matches screenshots)
   ========================= */

.aboutpage{
  background:#ffffff;
  color:#101012;
}

/* WHITE TOP SECTION */
.aboutpage__top{
  position:relative;
  background:#ffffff;
  padding-top:120px; /* clears the absolute topbar */
  padding-bottom:80px;
}

.about-hero{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:60px;
  align-items:start;
}

/* Left text */
.about-hero__title{
  margin: 0 0 22px;
  font-size: clamp(54px, 5vw, 92px);
  font-weight:900;
  letter-spacing:-0.5px;
  color:#101012;
}

.about-hero__p{
  margin: 0 0 18px;
  font-size:16px;
  line-height:1.55;
  color: rgba(16,16,18,0.88);
  max-width: 640px;
}

.about-hero__lists{
  margin-top: 54px;
}

.about-hero__h{
  margin: 0 0 10px;
  font-size:16px;
  font-weight:800;
  color:#101012;
}

.about-hero__h--spaced{
  margin-top: 26px;
}

.about-hero__list{
  margin: 0;
  padding-left: 22px;
  color: rgba(16,16,18,0.88);
  line-height: 1.9;
}

/* Right big circle image */
.about-hero__media{
  display:flex;
  justify-content:flex-end;
}

.about-hero__circle{
  width: min(860px, 56vw);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 22px 50px rgba(0,0,0,0.25);

  /* pushes circle toward the right like your screenshot */
  margin-left:auto;
}

.about-hero__circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Big white empty area before the CTA section */
.aboutpage__spacer{
  height: 360px;
  background:#ffffff;
}

/* LIGHT GREY CTA SECTION with slanted top/bottom */
.aboutpage__cta{
  position:relative;
  background:#d7d7d7;
  color:#101012;
  padding: 220px 0 260px;
}

/* Top slant (grey cutting into white) */
.aboutpage__cta-topcut{
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:160px;
  background:#d7d7d7;
  clip-path: polygon(
    0% 45%,
    50% 60%,
    100% 45%,
    100% 100%,
    0% 100%
  );
}

/* CTA text */
.about-cta{
  text-align:center;
  padding: 0 20px;
}

.about-cta__title{
  margin:0 0 18px;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight:800;
  color:#101012;
}

.about-cta__copy{
  margin:0;
  font-size:18px;
  color: rgba(16,16,18,0.85);
}

/* Bottom slant into the dark footer */
.aboutpage__cta-bottomcut{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:170px;
  background:#0f0f10;
  clip-path: polygon(
    0% 65%,
    50% 45%,
    100% 65%,
    100% 100%,
    0% 100%
  );
}

/* Responsive */
@media (max-width: 980px){
  .about-hero{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-hero__circle{
    width: min(720px, 92vw);
    margin: 0 auto;
  }

  .aboutpage__spacer{
    height: 220px;
  }

  .aboutpage__cta{
    padding: 180px 0 220px;
  }
}

@media (max-width: 720px){
  .aboutpage__top{
    padding-top: 96px;
    padding-bottom: 54px;
  }

  .about-hero__lists{
    margin-top: 34px;
  }

  .aboutpage__spacer{
    height: 160px;
  }

  .aboutpage__cta{
    padding: 150px 0 200px;
  }
}

/* Flash contact info when navigated to */
#contact:target .contact-highlight {
  animation: contactFlash 1.8s ease-in-out 0.4s;
}

@keyframes contactFlash {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  16% {
    background-color: rgba(255, 255, 255, 0.15);
  }
  32% {
    background-color: rgba(255, 255, 255, 0);
  }
  48% {
    background-color: rgba(255, 255, 255, 0.15);
  }
  64% {
    background-color: rgba(255, 255, 255, 0);
  }
  80% {
    background-color: rgba(255, 255, 255, 0.15);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

.contact-highlight {
  padding: 12px 16px;
  border-radius: 6px;
}

@media (max-width: 768px) {

  .topbar__inner{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }

  .nav{
    grid-column: 2;
    justify-self: end;
    margin-right: 0;
  }

  .social{
    grid-column: 1 / -1;
    justify-content: center;
  }
	
  .site-footer__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .site-footer__left,
  .site-footer__right{
    margin: 0;
    text-align: center;
  }


}