/* ======================================================
   PAGE
====================================================== */

body{
  background:#151518;
  color:#fff;
  overflow-x:hidden;
}


/* ======================================================
   HERO
====================================================== */

.about-hero{
  padding:320px 8% 260px;
  background:#151518;
}

.about-hero-inner{
  max-width:900px;
}

.about-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:20px;
}

.about-hero h1{
  font-family:'Playfair Display',serif;
  font-size:96px;
  font-style:italic;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-2px;
  margin-bottom:38px;
}

.hero-sub{
  font-size:16px;
  opacity:.6;
  max-width:500px;
}



/* ======================================================
   ABOUT CONTENT
====================================================== */

.about-feature{
  padding:0 8% 220px;
  background:#151518;
}

.about-feature-inner{
  max-width:950px;
}

.about-feature-label{
  display:inline-block;
  margin-bottom:24px;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.about-feature-inner h2{
  font-family:'Playfair Display',serif;
  font-size:72px;
  line-height:1;
  margin-bottom:40px;
  max-width:900px;
}

.about-feature-inner p{
  max-width:750px;
  font-size:18px;
  line-height:1.9;
  opacity:.68;
  margin-bottom:24px;
}

/* ======================================================
   STANDARDS SECTION
====================================================== */

.about-standards{
  padding:200px 8%;
  background:#151518;
  border-top:1px solid rgba(255,255,255,.08);
}

.standards-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}

.standards-inner{
  max-width:1100px;
  margin:0;
}

.about-standards h2{
  font-family:'Playfair Display', serif;
  font-size:64px;
  line-height:1;
  margin-bottom:120px;
}

.standards-list{
  display:flex;
  flex-direction:column;
  gap:110px;
}

.standard-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:60px;
  margin-left:60px;
}

.standard-number{
  font-size:58px;
  font-weight:600;
  opacity:.30;
  line-height:1;
  padding-left:15px;
}

.standard-row:not(:last-child)::after{
  content:"";
  position:absolute;
  left:55px;
  top:70px;
  width:1px;
  height:90px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.18),
    rgba(255,255,255,.02)
  );
}

.standard-content h3{
  font-size:28px;
  font-weight:800;
  margin-bottom:15px;
}

.standard-content p{
  max-width:850px;
}

/* ======================================================
   SCROLL FADE (CLEAN + PROFESSIONAL)
====================================================== */

.fade-item{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
}

.fade-item.show{
  opacity:1;
  transform:translateY(0);
}


/* ======================================================
   WHY CLIENTS WORK WITH US
====================================================== */

.about-values{
  padding:220px 8%;
}

.about-values-header{
  max-width:900px;

  margin-bottom:100px;
}

.about-values-label{
  display:inline-block;
  margin-bottom:24px;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.about-values-header h2{
  font-family:'Playfair Display', serif;

  font-size:64px;

  line-height:1;
}

.about-values-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:30px;
}

.about-value-card{
  padding:50px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:1px solid rgba(255,255,255,.08);

  opacity:.35;

  transform:translateY(20px);

  transition:
    opacity .8s ease,
    transform .8s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.about-value-card.active{
  opacity:1;

  transform:translateY(0);
}

.about-value-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,255,255,.18);

  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

.about-pillar-number{
  display:block;

  margin-bottom:24px;

  font-size:13px;

  letter-spacing:3px;

  opacity:.35;
}

.about-value-card h3{
  font-size:24px;

  margin-bottom:20px;
}

.about-value-card p{
  font-size:15px;

  line-height:1.9;

  opacity:.65;
}

.about-value-card:nth-child(1){
  transition-delay:0s;
}

.about-value-card:nth-child(2){
  transition-delay:.15s;
}

.about-value-card:nth-child(3){
  transition-delay:.3s;
}

@media(max-width:1000px){

  .about-values-grid{
    grid-template-columns:1fr;
  }

  .about-values-header h2{
    font-size:52px;
  }

}

/* ======================================================
   FOUNDER
====================================================== */

.founder-section{
  padding:220px 8%;
}

.founder-inner{
  max-width:950px;
}

.founder-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}

.founder-inner h2{
  font-family:'Playfair Display', serif;

  font-size:72px;

  line-height:1;

  margin-bottom:40px;

  max-width:900px;
}

.founder-inner p{
  max-width:750px;

  font-size:18px;

  line-height:1.9;

  opacity:.68;

  margin-bottom:24px;
}


/* ======================================================
   FINAL CTA
====================================================== */

.about-cta{
  position:relative;

  padding:240px 8%;

  text-align:center;

  overflow:hidden;
}


/* ================= GLOW ================= */

.about-cta-glow{
  position:absolute;

  left:50%;
  top:50%;

  width:700px;
  height:700px;

  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.08),
      transparent 70%
    );
}


/* ================= CONTENT ================= */

.about-cta-content{
  position:relative;
  z-index:2;
}


/* ================= LABEL ================= */

.about-cta-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);
}


/* ================= TITLE ================= */

.about-cta h2{
  font-family:'Playfair Display', serif;

  font-size:92px;

  line-height:.95;

  margin-bottom:50px;

  max-width:1000px;

  margin-left:auto;
  margin-right:auto;
}


/* ================= BUTTON ================= */

.about-cta-btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  height:62px;

  padding:0 34px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  color:#fff;

  text-decoration:none;

  transition:.4s ease;
}

.about-cta-btn:hover{
  background:#fff;

  color:#000;

  transform:translateY(-3px);
}

/* ======================================================
   RESPONSIVE
====================================================== */


/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

  /* HERO */

  .about-hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 7% 90px;
    text-align:center;
  }

  .about-hero-inner{
    max-width:100%;
    margin:0 auto;
  }

  .about-eyebrow{
    font-size:12px;
    letter-spacing:3px;
    margin-bottom:24px;
  }

  .about-hero h1{
    font-size:50px;
    line-height:1.02;
    margin-bottom:30px;
  }

  .hero-sub{
    font-size:17px;
    line-height:1.75;
    max-width:360px;
    margin:0 auto;
  }


  /* ABOUT CONTENT */

  .about-feature{
    padding:0 8% 180px;
  }

  .about-feature-inner h2{
    font-size:42px;
  }

  .about-feature-inner p{
    font-size:17px;
    line-height:1.8;
  }


  /* STANDARDS */

  .about-standards{
    padding:160px 8%;
  }

  .about-standards h2{
    font-size:42px;
    margin-bottom:80px;
  }

  .standard-row{
    grid-template-columns:50px 1fr;
    gap:25px;
    margin-left:0;
  }

  .standard-number{
    font-size:38px;
    padding-left:0;
  }

  .standard-row:not(:last-child)::after{
    left:24px;
    top:55px;
    height:80px;
  }

  .standards-list{
    gap:80px;
  }

  .standard-content h3{
    font-size:23px;
  }

  .standard-content p{
    font-size:15px;
    line-height:1.8;
  }


  /* VALUES */

  .about-values{
    padding:180px 8%;
  }

  .about-values-header{
    margin-bottom:80px;
  }

  .about-values-header h2{
    font-size:42px;
  }

  .about-values-grid{
    grid-template-columns:1fr;
  }


  /* FOUNDER */

  .founder-section{
    padding:180px 8%;
  }

  .founder-inner h2{
    font-size:42px;
  }

  .founder-inner p{
    font-size:17px;
    line-height:1.8;
  }


  /* CTA */

  .about-cta{
    padding:180px 8%;
  }

  .about-cta h2{
    font-size:48px;
  }

}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  /* HERO */

  .about-hero{
    min-height:84svh;
    display:flex;
    align-items:center;
    padding:140px 7% 120px;
  }

  .about-hero-inner{
    max-width:760px;
    margin:0;
  }

  .about-hero h1{
    font-size:82px;
    line-height:1.05;
    margin-bottom:28px;
  }

  .hero-sub{
    font-size:20px;
    line-height:1.75;
    max-width:650px;
  }


  /* ABOUT CONTENT */

  .about-feature{
    padding:0 7% 200px;
  }

  .about-feature-inner h2{
    font-size:56px;
  }


  /* STANDARDS */

  .about-standards{
    padding:180px 7%;
  }

  .about-standards h2{
    font-size:56px;
    margin-bottom:100px;
  }

  .standard-row{
    grid-template-columns:60px 1fr;
    gap:30px;
    margin-left:0;
  }

  .standard-number{
    font-size:44px;
    padding-left:0;
  }

  .standard-row:not(:last-child)::after{
    left:29px;
  }


  /* VALUES */

  .about-values{
    padding:190px 7%;
  }

  .about-values-header h2{
    font-size:56px;
  }

  .about-values-grid{
    grid-template-columns:1fr;
  }


  /* FOUNDER */

  .founder-section{
    padding:190px 7%;
  }

  .founder-inner h2{
    font-size:56px;
  }


  /* CTA */

  .about-cta{
    padding:200px 7%;
  }

  .about-cta h2{
    font-size:62px;
  }

}


/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  /* HERO */

  .about-hero{
    min-height:86svh;
    display:flex;
    align-items:center;
    padding:350px 7%;
  }

  .about-hero-inner{
    max-width:800px;
    margin:0;
  }

  .about-hero h1{
    font-size:90px;
    line-height:1.05;
    margin-bottom:30px;
  }

  .hero-sub{
    font-size:20px;
    line-height:1.75;
    max-width:680px;
  }


  /* ABOUT CONTENT */

  .about-feature{
    padding:0 7% 220px;
  }

  .about-feature-inner h2{
    font-size:60px;
  }


  /* STANDARDS */

  .about-standards{
    padding:200px 7%;
  }

  .about-standards h2{
    font-size:60px;
    margin-bottom:110px;
  }

  .standard-row{
    grid-template-columns:70px 1fr;
    gap:40px;
    margin-left:0;
  }

  .standard-number{
    font-size:50px;
    padding-left:0;
  }


  /* VALUES */

  .about-values{
    padding:200px 7%;
  }

  .about-values-header h2{
    font-size:60px;
  }

  .about-values-grid{
    grid-template-columns:repeat(3,1fr);
  }


  /* FOUNDER */

  .founder-section{
    padding:200px 7%;
  }

  .founder-inner h2{
    font-size:60px;
  }


  /* CTA */

  .about-cta{
    padding:220px 7%;
  }

  .about-cta h2{
    font-size:72px;
  }

}


/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  /* HERO */

  .about-hero{
    padding:320px 8% 260px;
  }

  .about-hero-inner{
    max-width:900px;
    margin:0;
  }

  .about-hero h1{
    font-size:96px;
  }


  /* ABOUT CONTENT */

  .about-feature{
    padding:0 8% 220px;
  }

  .about-feature-inner h2{
    font-size:72px;
  }


  /* STANDARDS */

  .about-standards{
    padding:200px 8%;
  }


  /* VALUES */

  .about-values{
    padding:220px 8%;
  }

  .about-values-grid{
    grid-template-columns:repeat(3,1fr);
  }


  /* FOUNDER */

  .founder-section{
    padding:220px 8%;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .about-hero{
    padding:320px 8% 260px;
  }

  .about-hero-inner{
    max-width:900px;
    margin:0;
  }

  .about-hero h1{
    font-size:96px;
  }

}