/* =========================
   FONTS
========================= */
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BlackItalic.otf);font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Black.otf);font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBold.otf);font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBoldItalic.otf);font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Bold.otf);font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BoldItalic.otf);font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBold.otf);font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBoldItalic.otf);font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Medium.otf);font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-MediumItalic.otf);font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Regular.otf);font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-RegularItalic.otf);font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Light.otf);font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-LightItalic.otf);font-weight:300;font-style:italic;font-display:swap;}

/* =========================
   RESET & ROOT
========================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --pad:24px;
  --hamburger-size:32px;
  --report-col-width:min(680px,44vw);
  --content-x:48%;
  --content-w:50%;
  --text-light:#EAE9E8;
  --text-dark:#253126;
  --gray-dark:#A7A6A6;
  --gray-light:#D1D0D1;
  --bg:#EAE9E8;
  --bg-dark:#253126;
  --accent:#ff3b30;
  --video-steps:3;
}

body{
  background:var(--bg);
  font-family:"tt-commons-pro",sans-serif;
  font-weight:400;
  color:var(--text-dark);
}

/* =========================
   HERO MEDIA & VIDEO WRAPPER
========================= */
.video-wrapper{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(var(--video-steps, 4) * 100vh);
  z-index:0;
}

.hero-media{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  z-index:0;
  overflow:hidden;
  background-color:var(--bg-dark);
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  transition:border-radius 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-scrolled .hero-media{
  border-bottom-left-radius:30px !important;
  border-bottom-right-radius:30px !important;
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.45);
  z-index:1;
  pointer-events:none;
}

.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   HEADER
========================= */
.hero-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:clamp(10px, 2vw, 24px) clamp(16px, 3vw, 48px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:9999;
  pointer-events:none;
}

.logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  height:40px;
  --r:6px;
  border-radius:var(--r);
  transition:background-color 300ms ease;
  pointer-events:auto;
}

body.ui-scrolled .logo-wrap{
  background-color:#D1D0D1;
}

.logo-blur{
  display:none !important;
}

.logo img{
  height:28px;
  width:auto;
  display:block;
  transition:opacity 300ms ease;
}

/* =========================
   HERO LAYOUT
========================= */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:var(--pad);
  width:100%;
}

.hero-overlay{
  position:relative;
  z-index:20;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  flex:1;
}

.hero-content{
  margin-top:clamp(80px, 12vh, 56px);
  margin-left:clamp(16px, 3vw, calc(var(--pad) / 4));
  z-index:10;
  pointer-events:none;
}

.hero-content h1{
  font-family:"Serotiva", serif;
  font-size:clamp(42px, 7vw, 100px);
  line-height:1;
  font-weight:600;
  color:var(--text-light);
}

.hero-description{
  z-index:10;
  font-size:clamp(18px, 2vw, 28px);
  font-weight:300;
  line-height:1.3;
  max-width:1200px;
  margin-top:auto;
  margin-bottom:clamp(24px, 5vh, 60px);
  margin-left:clamp(16px, 3vw, calc(var(--pad) / 4));
  color:var(--text-light);
  pointer-events:none;
}

.hero-content h1,
.hero-description{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change:opacity, transform;
}

body.is-loaded .hero-content h1,
body.is-loaded .hero-description{
  opacity:1;
  transform:translateY(0);
}

body.is-loaded .hero-description{
  transition-delay:0.4s;
}

/* =========================
   WHAT WE DO
========================= */
.whatwedo{
  position:relative;
  z-index:1;
  height:calc(var(--steps, 3) * 100vh);
}

.whatwedo-sticky{
  position:sticky;
  top:0;
  height:100vh;
  pointer-events:none;
}

.whatwedo-top{
  position:absolute;
  top:140px;
  left:0;
  right:0;
  padding:0 clamp(16px, 3vw, calc(var(--pad) * 2));
}

.whatwedo-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:200;
  color:var(--text-light);
}

.whatwedo-line{
  margin-top:18px;
  height:1.5px;
  background:rgba(167, 166, 166, 0.4);
  position:relative;
  overflow:hidden;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
}

.whatwedo-line-progress{
  position:absolute;
  left:0;
  top:0;
  height:1.5px;
  width:0%;
  background:var(--text-light);
}

.whatwedo-textwrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  height:100%;
}

.whatwedo-item{
  position:absolute;
  top:225px;
  left:var(--content-x);
  width:var(--content-w);
  opacity:0;
  transition:opacity 220ms ease;
  will-change:opacity;
}

.whatwedo-item.is-active{opacity:1;}

.whatwedo-item p{
  font-size:clamp(24px, 3.8vw, 46px);
  line-height:1.1;
  font-weight:300;
  color:var(--text-light);
}

.whatwedo-item .p-base{color:var(--gray-dark);opacity:0.4;}

.whatwedo-item .p-reveal{
  position:absolute;
  inset:0;
  color:var(--text-light);
  pointer-events:none;
}

.wwd-lines{display:block;}
.wwd-line{display:block;white-space:nowrap;}
.wwd-word{display:inline;white-space:pre;}

.p-reveal .wwd-word{
  opacity:0;
  transition:opacity 140ms linear;
  will-change:opacity;
}

@media (prefers-reduced-motion: reduce){
  .p-reveal .wwd-word{transition:none;}
}

/* =========================
   LEADERSHIP
========================= */
.leadership{
  width:100%;
  background:var(--bg);
  position:relative;
  z-index:10;
}

.leadership-top{
  padding:80px clamp(16px, 3vw, 48px);
  position:relative;
  display:block;
}

.leadership-label{
  position:absolute;
  left:clamp(16px, 3vw, 48px);
  top:90px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:300;
  color:var(--text-dark);
}

.leadership-text{
  width:var(--content-w);
  margin-left:var(--content-x);
}

.leadership-text p{
  font-size:clamp(20px, 2.5vw, 28px);
  line-height:1.4;
  font-weight:300;
  color:var(--text-dark);
}

.leadership-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  width:100%;
  margin-left:0;
  margin-top:64px;
}

.leadership-card{
  background:#253126;
  color:var(--text-light);
  border-radius:20px;
  aspect-ratio:1 / 1;
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change:opacity, transform;
}

.leadership-card h3{
  margin-top:auto;
  font-size:36px;
  font-weight:300;
  line-height:1.05;
}

.leadership-card p{
  font-size:20px;
  font-weight:300;
  line-height:1.2;
  color:#D1D0D1;
  margin-top:12px;
}

.leadership-link{
  position:absolute;
  top:32px;
  right:28px;
  text-decoration:none;
}

.leadership-link-text{
  display:inline-block;
  color:#EAE9E8;
  font-size:16px;
  font-weight:200;
  text-decoration:none;
  text-transform:lowercase;
  transition:color 0.3s ease;
}

.leadership-link-text:hover{
  color:#E6362A;
}

.leadership-link-icon{
  display:none;
}

.leadership-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

.leadership-card:nth-child(1){transition-delay:0s;}
.leadership-card:nth-child(2){transition-delay:0.2s;}
.leadership-card:nth-child(3){transition-delay:0.4s;}
.leadership-card:nth-child(4){transition-delay:0.6s;}

/* =========================
   DATA
========================= */
.data{
  width:100%;
  background:var(--bg);
}

.data-top{
  display:block;
  padding:80px clamp(16px, 3vw, 0px);
  position:relative;
}

.data-label{
  position:absolute;
  left:clamp(16px, 3vw, 48px);
  top:90px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:300;
  color:var(--text-dark);
}

.data-text{
  grid-column:1 / -1;
  width:var(--content-w);
  margin-left:var(--content-x);
}

.data-text p{
  font-size:clamp(20px, 2.5vw, 28px);
  line-height:1.4;
  font-weight:300;
  color:var(--text-dark);
}

.data-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 4vw, 40px);
  width:var(--content-w);
  margin-left:var(--content-x);
  margin-top:48px;
}

.data-stat{
  display:flex;
  flex-direction:column;
}

.data-stat-value{
  font-size:clamp(48px, 7vw, 84px);
  font-weight:400;
  color:#E6362A;
  line-height:1.05;
  margin-bottom:12px;
}

.data-stat-label{
  font-size:clamp(14px, 1.5vw, 20px);
  line-height:1.1;
  color:#E6362A;
  font-weight:200;
  margin-top:0;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1400px){
  .leadership-card h3{font-size:38px;}
  .leadership-card p{font-size:18px;}
}

@media (max-width: 980px){
  :root{
    --content-x:0%;
    --content-w:100%;
  }

  .page-company .hero-video{
    object-position: 30% 50%;
  }

  .whatwedo-item{
    left:clamp(24px, 4vw, calc(var(--pad) * 2));
    right:clamp(24px, 4vw, calc(var(--pad) * 2));
    width:auto;
  }

  .whatwedo-item .p-base,
  .whatwedo-item .p-reveal{
    padding:0;
  }

  .leadership-top{
    padding:64px clamp(16px, 5vw, 48px) 0px;
  }

  .leadership-label{
    position:static;
    margin-bottom:24px;
  }

  .leadership-text,
  .leadership-grid{
    width:100%;
    margin-left:0;
  }

  .leadership-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }

  .leadership-card h3{font-size:32px;}
  .leadership-card{
    aspect-ratio:3 / 2;
    padding:24px 22px 20px;
  }
  .leadership-link{top:24px;right:22px;}

  .data-top{
    padding:64px clamp(16px, 5vw, 48px);
  }

  .data-label{
    position:static;
    margin-bottom:24px;
  }

  .data-text,
  .data-stats{
    width:100%;
    margin-left:0;
  }

  .data-stats{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
}

@media (max-width: 480px){
  .leadership-grid{grid-template-columns:1fr;}
  .leadership-card{aspect-ratio:5 / 3;}
}