/* =============================================================
   NLIGN — About Page Styles
   Covers: About Hero · What Sets NLign Apart · History · History Detail
   ============================================================= */


/* ── Shared / Token Utilities ────────────────────────────── */

/*
 * Shared inner-wrapper — max-width, centering, horizontal padding.
 */
.about-hero__inner,
.about-apart__inner,
.about-history__inner,
.about-detail__inner,
.about-time__inner {
  max-width: var(--nlign-max-width);   /* 1440px */
  margin: 0 auto;
  padding: 0 var(--nlign-section-padding-x); /* 0 120px */
}

/*
 * Orange uppercase label — hero label, apart section labels.
 */
.about-section__label {
  font-family: var(--nlign-subhead-font-family); /* Inter */
  font-weight: var(--nlign-subhead-font-weight); /* 700 */
  font-size: var(--nlign-subhead-font-size);     /* 20px */
  line-height: var(--nlign-subhead-line-height); /* 28px */
  text-transform: uppercase;
  color: var(--nlign-color-orange);              /* #F3491B */
  margin: 0 0 16px 0;
  padding: 0;
  width: 346px;
}

/* Orange accent span shared across headings */
.about--accent {
  color: var(--nlign-color-orange); /* #F3491B */
}

/*
 * Small body copy — Inter 400 18/28.
 * Used in the apart rows and the detail section.
 * Replaces the duplicate .about-apart__body declaration.
 */
.about-detail .about-detail__text p {
  font-family: var(--nlign-subhead-font-family); /* Inter */
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--nlign-color-dust-grey); /* #EBEAE6 */
  margin: 0;
  padding: 0;
}


/* ── About Hero Section ──────────────────────────────────── */

.about-hero {
  background: var(--nlign-color-onyx-800); /* #1A1A1A */
  padding: var(--nlign-section-padding-y) 0; /* 96px top/bottom */
  width: 100%;
}

/* Two-column flex layout */
.about-hero__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-height: 290px;
}

/* Left column ~42.86% (688px / 1440px) */
.about-hero__left {
  flex: 0 0 42.86%;
  max-width: 42.86%;
  padding-right: 40px;
}

.about-hero__heading {
  font-family: var(--nlign-h1-font-family); /* InterFace */
  font-weight: var(--nlign-h1-font-weight); /* 400 */
  font-size: var(--nlign-h1-font-size);     /* 96px */
  line-height: var(--nlign-h1-line-height); /* 100px */
  color: var(--nlign-color-dust-grey);      /* #EBEAE6 */
  margin: 0;
  padding: 0;
  width: 688px;
}

/* Right column — remaining ~57.14% */
.about-hero__right {
  flex: 0 0 57.14%;
  max-width: 57.14%;
  padding-top: 140px; /* aligns body text with heading baseline in Figma */
}

.about-hero__body {
  font-family: var(--nlign-h1-font-family); /* InterFace */
  font-weight: 400;
  font-size: 31px;
  line-height: 36px;
  color: var(--nlign-color-dust-grey);
  margin: 0;
  padding: 0;
}


/* ── What Sets NLign Apart Section ──────────────────────── */

.about-apart {
  background: #0E0E0E;
  padding: var(--nlign-section-padding-y) 0; /* 96px top/bottom */
  width: 100%;
}

/* Section heading block (top-left, full width) */
.about-apart__heading-group {
  margin-bottom: 22px; /* space between heading block and first row */
}

/* H2 mirrors Figma: InterFace 700 64/68 */
.about-apart__heading {
  font-family: var(--nlign-h1-font-family); /* InterFace */
  font-weight: 700;
  font-size: 64px;
  line-height: 68px;
  color: var(--nlign-color-dust-grey); /* #EBEAE6 */
  margin: 0;
  padding: 0;
  width:688px
}

/* Each row: label left (~29.5%) | body right (~62%) */
.about-apart__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  position: relative;
  padding: 2.125rem 0;
}
.about-apart__row:first-child{
  padding-top: 0;
  padding-bottom: 1.25rem;
}

/* Left column: orange label — ~29.5% (425px / 1440px) */
.about-apart__row-left {
  flex: 0 0 45.53%;
  max-width: 45.53%;
  display: flex;  
  flex-direction: column;
  justify-content: flex-end;
}
.about-apart__rows{
  margin-left: 310px;
}

.about-apart__rows .about-apart__body{
  margin-bottom: 0;
}

/* Suppress the bottom margin on labels inside rows
   so they don't push the divider away */
.about-apart__row-left .about-section__label {
  margin-bottom: 0;
}

/* Right column: body copy — remaining ~62% (match Figma right edge ~91.46%) */
.about-apart__row-right {
  flex: 1 1 0;
}

/* .about-apart__body typography now handled by shared .about-body-sm */

/* Sage-green horizontal rule below each row */
.about-apart__divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid #84978E;
}


/* ── The History of NLign Section ───────────────────────── */

/*
 * Background is onyx-800 (#1A1A1A) — same token as the hero.
 * Two-column layout mirrors the hero: left H2 ~47.78% (688px/1440px),
 * right body copy fills the remainder. Only unique styles live here;
 * typography tokens and inner-wrapper styles are shared above.
 */
.about-history {
  background: var(--nlign-color-onyx-800); /* #1A1A1A */
  padding: var(--nlign-section-padding-y) 0; /* 96px */
  width: 100%;
  padding-bottom: 89px;
}

.about-history__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

/* Left column: H2 — ~47.78% (688px / 1440px) */
.about-history__left {
  flex: 0 0 47.78%;
  max-width: 43%;
  padding-right: 40px;
}

/* H2: InterFace 700 64/68 — same scale as .about-apart__heading */
.about-history__heading {
  font-family: var(--nlign-h1-font-family); /* InterFace */
  font-weight: 700;
  font-size: 64px;
  line-height: 68px;
  color: var(--nlign-color-dust-grey); /* #EBEAE6 */
  margin: 0;
  padding: 0;
  width: 825.6px;
}

/* Right column: body copy — remaining ~52.22% */
.about-history__right {
  flex: 1 1 0;
  /* Figma top offset: body starts at ~102px within the 240px frame,
     which is ~42.5% down. Padding-top aligns it with the heading's
     second line of text visually. */
  padding-top: 102px;
}

/*
 * Body copy reuses the same InterFace 400 32/36 style as .about-hero__body.
 * Defined separately so the history section is self-contained.
 */
.about-history__body {
  font-family: var(--nlign-h1-font-family); /* InterFace */
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
  color: var(--nlign-color-dust-grey); /* #EBEAE6 */
  margin: 0;
  padding: 0;
}


/* ── History Detail Section (text + image) ───────────────── */

/*
 * Same onyx-800 background as the hero and history sections.
 * Padding is bottom-only per Figma (padding: 0 0 96px) — the
 * history section above provides the top spacing visually.
 * Two columns: left text ~40.76% (587px/1440px), right image fills rest.
 */
.about-detail {
  background: var(--nlign-color-onyx-800); /* #1A1A1A */
  padding: 0 0 var(--nlign-section-padding-y); /* 0 0 96px */
  width: 100%;
}

.about-detail__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

/* Left: text block — ~40.76% (587px / 1440px) */
.about-detail__text {
  flex: 0 0 44.5%;
  max-width: 44.5%;
  display: flex;
  flex-direction: column;
  gap: 24px; /* paragraph spacing */
}

/* Right: image — fills remaining space */
.about-detail__image {
  flex: 1 1 0;
  min-width: 0;
}

.about-detail__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* Modifier: image on the left, text on the right.
   Reverses the default (text-left) column order without
   duplicating any layout or typography rules. */
.about-detail--image-left .about-detail__image { order: 0; }
.about-detail--image-left .about-detail__text   { order: 1; }


.timeline-section{
  position: relative;
  padding-top: 20px;
  overflow: hidden;
}

/* center vertical line */
.timeline-section .about-time__inner{
  position: relative;
}
.timeline-section .about-time__inner::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:100%;
  background:#fff;
}

.timeline-row{
  min-height:130px;
}

.timeline-row:first-child{
  min-height:212px;
}

.timeline-col{
  position:relative;
  height:130px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-bottom:1px solid #84978E;
}

/* equal width and height */
.timeline-col .content-box{
  width:100%;
  padding-bottom:24px;
  width: 485px;
}

.year{
  color:#ff5a1f;
  font-size:20px;
  font-weight:700;
  line-height:28px;
  margin-bottom:24px;
  position: absolute;
}

.desc{
  font-size:18px;
  line-height:1.6;
  color:#e8e8e8;
}

/* LEFT SIDE */
.left-side{
  text-align:left;
}

.left-side .year{
  text-align:right;
  right: 1rem;
}

.left-side .desc{
  text-align:left;
}

/* RIGHT SIDE */
.right-side{
  text-align:right;
  margin-top:-80px; /* move little up */
}

.right-side .year{
  text-align:left;
  left: 1rem;
}

.right-side .desc{
  text-align:right;
}

/* spacing from center line */
.left-side{
  padding-right:120px;
}

.right-side{
  padding-left:120px;
}

/* ── Responsive ──────────────────────────────────────────── */

@media(max-width: 1439px){
  .timeline-col .content-box{
    width: 100%;
  }
  .timeline-row:first-child{
    min-height: auto;
  }
}

@media (min-width: 992px) and (max-width: 1450px) {
  .about-detail .about-detail__inner.right-indent{
    padding-right: 0;
    margin-right: 0;
  }
  .about-detail .about-detail__inner.left-indent{
    padding-left: 0;
    margin-left: 0;
  }
}
@media (max-width: 1080px) {
  .about-hero__right {
      padding-top: 170px;
  }
}
@media (max-width: 991px) {

  .about-hero,
  .about-apart,
  .about-history,
  .about-detail {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .about-hero__heading, 
  .about-apart__heading,
  .about-history__heading{
    width: auto;
  }
  /* Hero: stack columns */
  .about-hero__content {
    flex-direction: column;
    min-height: auto;
  }

  .about-apart__rows{
    margin-left: 0;
  }

  .about-hero__left,
  .about-hero__right {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .about-hero__right {
    padding-top: 32px;
  }

  .about-hero__heading {
    font-size: 56px;
    line-height: 60px;
  }

  .about-hero__body {
    font-size: 22px;
    line-height: 30px;
  }

  /* Apart: stack row columns */
  .about-apart__row {
    flex-direction: column;
  }

  .about-apart__row-left {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 12px;
  }

  .about-apart__heading,
  .about-history__heading {
    font-size: 42px;
    line-height: 48px;
  }

  /* History: stack columns */
  .about-history__content {
    flex-direction: column;
  }

  .about-history__left {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .about-history__right {
    flex: 0 0 100%;
    padding-top: 32px;
  }

  .about-history__body {
    font-size: 22px;
    line-height: 30px;
  }

  /* Detail: stack columns */
  .about-detail__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-detail__text {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-detail__image {
    width: 100%;
  }

  /* Reset image-left modifier — stacked mobile is always image-on-top */
  .about-detail--image-left .about-detail__image,
  .about-detail--image-left .about-detail__text {
    order: unset;
  }

  .timeline-section .about-time__inner::before{
    display: none;
  }
  .timeline-section::before{
    left:20px;
  }

  .timeline-row{
    min-height:auto;
  }

  .timeline-col{
    height:auto;
    padding: 2rem 0;
    margin-top:0 ;
  }
  .timeline-col .content-box{
    padding-bottom: 0;
  }

  .left-side,
  .right-side{
    text-align:left;
  }

  .left-side .year,
  .right-side .year{
    text-align:left;
    font-size:32px;
  }

  .left-side .desc,
  .right-side .desc{
    text-align:left;
  }

  .desc{
    font-size:18px;
  }

  .year{
    position: relative;
  }
  .left-side .year{
    right: 0;
  }
  .right-side .year{
    left: 0;
  }
}

@media (max-width: 767px) {

  .about-hero__inner,
  .about-apart__inner,
  .about-history__inner,
  .about-detail__inner,
  .about-time__inner  {
    padding: 0 24px;
  }

  .about-hero__heading {
    font-size: 48px;
    line-height: 52px;
  }

  .about-hero__body {
    font-size: 20px;
    line-height: 28px;
  }

  .about-section__label {
    font-size: 16px;
  }

  .about-apart__heading,
  .about-history__heading {
    font-size: 36px;
    line-height: 42px;
  }

  .about-history__body {
    font-size: 20px;
    line-height: 28px;
  }

  .about-apart__heading-group {
    margin-bottom: 48px;
  }
}

@media (max-width: 480px) {
  .about-hero__heading {
    font-size: 36px;
    line-height: 40px;
  }

  .about-hero__body {
    font-size: 18px;
    line-height: 26px;
  }

  .about-apart__heading,
  .about-history__heading {
    font-size: 28px;
    line-height: 34px;
  }

  .about-history__body {
    font-size: 18px;
    line-height: 26px;
  }
}