/* ======================================

   KKB ABOUT PAGE
   about.css

   Scope:
   about.html only

====================================== */


/* ======================================

   1. TOKENS / GLOBAL

====================================== */


:root {

  --kkb-bg: #212529;

  --kkb-text: #ffffff;

  --kkb-muted: rgba(255, 255, 255, 0.68);

  --kkb-soft: rgba(255, 255, 255, 0.88);

  --kkb-border: rgba(255, 255, 255, 0.14);

}


html,
body {

  min-width: 300px;

  background-color: var(--kkb-bg);

  color: var(--kkb-text);

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  letter-spacing: 0;

}


body {

  overflow-x: hidden;

}


/* ======================================

   2. TYPOGRAPHY

====================================== */


h1,
.h1 {

  font-weight: 300;

}


h2,
.h2 {

  font-size: 2rem;

  font-weight: 400;

  letter-spacing: 0;

}


h3,
.h3 {

  font-size: 1.25rem;

  font-weight: 500;

}


h4,
.h4 {

  font-size: 0.9rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}


/* ======================================

   3. PAGE LAYOUT

====================================== */


.site-main {

  display: flex;

  flex-direction: column;

}


.about-main {

  width: 100%;

}


.page-container {

  width: 100%;

  max-width: 800px;

  margin-inline: auto;

}


/* ======================================

   4. HEADER / NAVIGATION

====================================== */


.site-header {

  padding: 2rem 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}


.site-brand {

  color: var(--kkb-text);

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.2;

  text-decoration: none;

}


.site-brand:hover,
.site-brand:focus {

  color: var(--kkb-text);

}


.nav-link {

  padding-inline: 0;

  color: var(--kkb-muted);

  font-size: 0.78rem;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.nav-link:hover,
.nav-link:focus,
.nav-link.active {

  color: var(--kkb-text);

}


/* ======================================

   5. BUTTONS

====================================== */


.contact-btn {

  min-height: 44px;

  margin-top: 2rem;

  padding: 0.72rem 1.35rem;

  border-radius: 0;

  font-size: 0.78rem;

  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;

}


.contact-btn:hover,
.contact-btn:focus {

  background-color: var(--kkb-text);

  color: var(--kkb-bg);

}


/* ======================================

   6. ABOUT INTRO

====================================== */


.about-section {

  padding: 6rem 0 7rem;

}


.about-intro {

  max-width: 700px;

  padding-bottom: 5rem;

}


.page-kicker {

  margin: 0 0 1rem;

  color: var(--kkb-muted);

  font-size: 0.76rem;

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}


.about-title {

  max-width: 700px;

  margin: 0;

  font-size: clamp(2.5rem, 6vw, 4.75rem);

  font-weight: 300;

  line-height: 1.02;

  letter-spacing: -0.035em;

  text-wrap: balance;

}


.about-lead {

  max-width: 620px;

  margin-top: 2rem;

}


.about-lead p {

  margin: 0 0 1.25rem;

  color: var(--kkb-soft);

  font-size: 1.15rem;

  font-weight: 300;

  line-height: 1.65;

}


.about-lead p:last-child {

  margin-bottom: 0;

}


/* ======================================

   7. ABOUT CONTENT

====================================== */


.about-content {

  border-top: 1px solid var(--kkb-border);

}


.about-block {

  display: grid;

  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);

  gap: 4rem;

  padding: 4rem 0;

  border-bottom: 1px solid var(--kkb-border);

}


.about-block h2 {

  margin: 0;

  font-size: 1.35rem;

  font-weight: 500;

  line-height: 1.3;

}


.about-copy {

  max-width: 560px;

}


.about-copy p {

  margin: 0 0 1.25rem;

  color: var(--kkb-soft);

  font-size: 0.96rem;

  font-weight: 300;

  line-height: 1.75;

}


.about-copy p:last-child {

  margin-bottom: 0;

}


/* ======================================

   8. CALL TO ACTION

====================================== */


.about-cta {

  padding: 6rem 0;

  border-top: 1px solid var(--kkb-border);

}


.about-cta-inner {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 4rem;

}


.about-cta-copy {

  max-width: 560px;

}


.about-cta-copy h2 {

  margin: 0;

  font-size: clamp(2rem, 4vw, 3.25rem);

  font-weight: 300;

  line-height: 1.08;

  letter-spacing: -0.025em;

  text-wrap: balance;

}


.about-cta-copy > p:last-child {

  max-width: 520px;

  margin: 1.5rem 0 0;

  color: var(--kkb-soft);

  font-size: 1rem;

  font-weight: 300;

  line-height: 1.7;

}


.about-cta-button {

  flex-shrink: 0;

  margin-top: 0;

}


/* ======================================

   9. FOOTER

====================================== */


.site-footer {

  flex-shrink: 0;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

}


/* ======================================

   10. RESPONSIVE
   SMALL MOBILE: 300px - 575px

====================================== */


@media (max-width: 575.98px) {

  .site-header {

    padding: 1.5rem 0;

  }


  .about-section {

    padding: 4rem 0;

  }


  .about-intro {

    padding-bottom: 3.5rem;

  }


  .about-title {

    font-size: 2.55rem;

    line-height: 1.05;

  }


  .about-lead {

    margin-top: 1.5rem;

  }


  .about-lead p {

    font-size: 1rem;

    line-height: 1.6;

  }


  .about-block {

    grid-template-columns: 1fr;

    gap: 1.5rem;

    padding: 3rem 0;

  }


  .about-block h2 {

    font-size: 1.2rem;

  }


  .about-copy p {

    font-size: 0.93rem;

    line-height: 1.7;

  }


  .about-cta {

    padding: 4rem 0;

  }


  .about-cta-inner {

    align-items: flex-start;

    flex-direction: column;

    gap: 2rem;

  }


  .about-cta-copy h2 {

    font-size: 2.25rem;

  }


  .about-cta-button {

    width: min(100%, 260px);

  }


  .site-footer {

    padding-top: 1rem !important;

  }


  .nav-link {

    font-size: 0.76rem;

  }

}


/* ======================================

   11. RESPONSIVE
   LARGE MOBILE: 576px - 767px

====================================== */


@media (min-width: 576px) and (max-width: 767.98px) {

  .about-section {

    padding: 5rem 0;

  }


  .about-intro {

    padding-bottom: 4rem;

  }


  .about-block {

    grid-template-columns: 9rem minmax(0, 1fr);

    gap: 2rem;

    padding: 3.5rem 0;

  }


  .about-cta-inner {

    align-items: flex-start;

    flex-direction: column;

    gap: 2rem;

  }

}


/* ======================================

   12. RESPONSIVE
   TABLET: 768px - 991px

====================================== */


@media (min-width: 768px) and (max-width: 991.98px) {

  .about-block {

    gap: 3rem;

  }

}


/* ======================================

   13. RESPONSIVE
   DESKTOP: 992px+

====================================== */


@media (min-width: 992px) {

  h2 {

    font-size: 2.5rem;

  }

}