/* Company profile page, implemented from the Figma frame 81:2. */
.page-company-profile {
  --profile-width: min(83.333vw, 1600px);
  --profile-green: #376036;
  --about-subnav-offset: 84px;
  background: #fff;
}

.profile-container,
.history-container {
  width: var(--profile-width);
  margin: 0 auto;
}

.profile-hero {
  position: relative;
  height: 620px;
  padding-top: 120px;
  overflow: hidden;
  color: #fff;
  background: #6d8798;
}

.profile-hero > img,
.profile-hero-shade {
  position: absolute;
  inset: 120px 0 0;
  width: 100%;
  height: calc(100% - 120px);
}

.profile-hero > img { object-fit: cover; object-position: center 48%; }
.profile-hero-shade { background: rgba(0, 0, 0, .22); }

.profile-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--profile-width);
  height: calc(100% - 120px);
  margin: 0 auto;
  padding-bottom: 2px;
}

.profile-hero h1 { margin: 0 0 18px; font-size: 30px; line-height: 1.25; font-weight: 700; }
.profile-hero p { width: min(650px, 52vw); margin: 0; font-size: 20px; line-height: 1.55; }

.about-subnav {
  position: sticky;
  z-index: 40;
  top: var(--about-subnav-offset);
  height: 63px;
  color: rgba(255,255,255,.7);
  background: var(--profile-green);
}

.about-subnav-inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: stretch;
  width: var(--profile-width);
  height: 100%;
  margin: 0 auto;
}

.about-subnav a {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: color .2s ease, background .2s ease;
}

.about-subnav a:hover,
.about-subnav a.active { color: #fff; background: rgba(255,255,255,.035); }

.profile-intro { padding: 82px 0 0; }
.profile-title { margin-bottom: 68px; text-align: center; }
.profile-title p { margin: 0 0 8px; color: var(--profile-green); font-size: 17px; line-height: 1.5; font-weight: 500; }
.profile-title h2 { margin: 0; color: #000; font-size: 30px; line-height: 1.35; font-weight: 700; }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(470px, .98fr);
  gap: clamp(65px, 7vw, 136px);
  align-items: center;
}

.intro-copy h3 { margin: 0 0 25px; color: var(--profile-green); font-size: 26px; line-height: 1.4; font-weight: 500; }
.intro-copy p { margin: 0; color: #333; font-size: 16px; line-height: 2.5; font-weight: 400; text-align: justify; }

.intro-image { position: relative; margin: 0; }
.intro-image span { position: absolute; top: -20px; right: -20px; width: 100%; height: 100%; background: #efefef; }
.intro-image img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1.67; object-fit: cover; }

.business-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 70px;
}

.business-grid article {
  display: flex;
  min-width: 0;
  min-height: 185px;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  text-align: center;
  background: #f5f5f5;
  transition: transform .25s ease, box-shadow .25s ease;
}

.business-grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(55,96,54,.12); }
.business-card-content { display: grid; min-height: 135px; padding: 18px 20px 10px; align-content: start; }
.business-grid h3 { margin: 0; color: var(--profile-green); font-size: 26px; line-height: 30px; font-weight: 500; }
.business-grid h3::after { display: block; width: 65px; height: 3px; margin: 6px auto 8px; background: var(--profile-green); content: ""; }
.business-grid p { margin: 0; color: #333; font-size: 16px; line-height: 30px; font-weight: 400; }
.business-card-link {
  display: flex;
  min-height: 50px;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #fff;
  background: var(--profile-green);
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  transition: background .2s ease;
}
.business-card-link:hover { color: #fff; background: #294c2b; }
.business-card-link:focus-visible { outline: 3px solid rgba(55,96,54,.35); outline-offset: -3px; }
.business-card-url { text-decoration: underline; text-underline-offset: 2px; }

.history { padding: 88px 0 96px; }
.history h2,
.team h2 { margin: 0 0 55px; color: #000; text-align: center; font-size: 26px; line-height: 1.35; font-weight: 500; }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 375px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #cfcfcf;
}

.timeline::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -5px;
  width: 8px;
  height: 8px;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  background: #fff;
}

.timeline-item { position: relative; min-width: 0; }
.timeline-item:first-child::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: -5px;
  width: 8px;
  height: 8px;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  background: #fff;
}

.timeline-content { position: absolute; left: 50%; width: calc(100% - 47px); padding-left: 14px; border-left: 1px dashed #a9a9a9; }
.timeline-top .timeline-content { bottom: 50%; padding-bottom: 25px; }
.timeline-bottom .timeline-content { top: 50%; padding-top: 25px; }
.timeline-dot { position: absolute; z-index: 2; left: 50%; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--profile-green); transform: translateX(-50%); box-shadow: 0 0 0 3px rgba(55,96,54,.1); }
.timeline-content time { display: block; margin-bottom: 8px; color: var(--profile-green); font-size: 26px; line-height: 1; font-weight: 900; }
.timeline-content h3 { margin: 0 0 8px; color: #000; font-size: 16px; font-weight: 500; }
.timeline-content p { margin: 0; color: #737373; font-size: 16px; line-height: 27px; font-weight: 400; }

@media (min-width: 901px) {
  .timeline-item:nth-child(n+3) .timeline-content {
    right: 50%;
    left: auto;
    padding-right: 14px;
    padding-left: 0;
    border-right: 1px dashed #a9a9a9;
    border-left: 0;
  }
}

.team { position: relative; padding: 0 0 148px; }
.team::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 47%; background: #f6f6f6; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.team-grid figure { margin: 0; overflow: hidden; background: #e8e8e8; }
.team-grid img { width: 100%; aspect-ratio: 1.51; object-fit: cover; transition: transform .6s ease; }
.team-grid figure:hover img { transform: scale(1.025); }

.page-company-profile .contact { min-height: 800px; }
.page-company-profile .contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 9%; align-items: center; min-height: 800px; }
.page-company-profile .contact-copy { max-width: 500px; margin: 0; }
.page-company-profile .contact-form { margin: 0; }
.page-company-profile .contact-form input,
.page-company-profile .contact-form textarea { border: 0; }

.page-company-profile .footer-links h3 a { color: #fff; }
.page-company-profile .footer-links a.active { color: #ffce48; }

@media (max-width: 1500px) {
  .page-company-profile { --profile-width: min(92vw, 1280px); }
  .profile-hero { height: 540px; padding-top: 92px; }
  .profile-hero > img, .profile-hero-shade { top: 92px; height: calc(100% - 92px); }
  .profile-hero-content { height: calc(100% - 92px); }
  .profile-hero h1 { font-size: 28px; }
  .profile-hero p { font-size: 17px; }
  .timeline-content time { font-size: 24px; }
  .timeline-content p { font-size: 14px; line-height: 1.7; }
}

@media (max-width: 1199.98px) {
  .intro-grid { grid-template-columns: 1fr 1fr; gap: 55px; }
  .intro-copy p { font-size: 14px; line-height: 1.85; }
  .business-grid h3 { font-size: 24px; }
  .business-card-link { font-size: 14px; }
  .timeline { min-height: 420px; }
  .timeline-content time { font-size: 22px; }
}

@media (max-width: 900px) {
  .profile-hero { height: 470px; }
  .profile-hero p { width: min(620px, 82vw); }
  .about-subnav { height: auto; overflow-x: auto; scrollbar-width: none; }
  .about-subnav::-webkit-scrollbar { display: none; }
  .about-subnav-inner { grid-template-columns: repeat(7, 120px); width: max-content; min-width: 100%; height: 58px; padding: 0 18px; }
  .intro-grid { grid-template-columns: 1fr; gap: 45px; }
  .intro-copy { order: 2; }
  .intro-image { order: 1; }
  .intro-image span { top: -12px; right: -12px; }
  .business-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { display: block; min-height: 0; padding-left: 30px; }
  .timeline::before { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .timeline::after { top: auto; right: auto; bottom: -4px; left: 3px; }
  .timeline-item { padding: 0 0 42px; }
  .timeline-item:first-child::before { top: -4px; left: 3px; }
  .timeline-content, .timeline-top .timeline-content, .timeline-bottom .timeline-content { position: static; width: 100%; padding: 0 0 0 18px; border-left: 1px dashed #a9a9a9; }
  .timeline-dot { left: -23px; top: 5px; }
  .timeline-content time { font-size: 24px; }
  .team-grid { grid-template-columns: 1fr; }
  .page-company-profile .contact-grid { grid-template-columns: 1fr; gap: 50px; min-height: 0; padding: 80px 0; }
}

@media (max-width: 760px) {
  .page-company-profile {
    --profile-width: calc(100vw - 36px);
    --about-subnav-offset: 72px;
  }
  .profile-hero { height: 430px; padding-top: 72px; }
  .profile-hero > img, .profile-hero-shade { top: 72px; height: calc(100% - 72px); }
  .profile-hero-content { height: calc(100% - 72px); }
  .profile-hero > img { object-position: 56% center; }
  .profile-hero h1 { margin-bottom: 12px; font-size: 26px; }
  .profile-hero p { width: 92%; font-size: 15px; line-height: 1.65; }
  .profile-intro { padding-top: 62px; }
  .profile-title { margin-bottom: 45px; }
  .profile-title p { font-size: 14px; }
  .profile-title h2, .history h2, .team h2 { font-size: 26px; }
  .intro-copy h3 { font-size: 21px; }
  .intro-image span { right: -8px; }
  .business-grid { margin-top: 50px; gap: 12px; }
  .business-grid article { min-height: 175px; }
  .business-card-content { min-height: 125px; padding: 16px 12px 8px; }
  .business-grid h3 { font-size: 22px; }
  .business-grid p { font-size: 14px; line-height: 1.75; }
  .business-card-link { min-height: 50px; padding: 7px 9px; font-size: 13px; line-height: 20px; }
  .business-grid br { display: none; }
  .history { padding: 70px 0 60px; }
  .history h2, .team h2 { margin-bottom: 42px; }
  .team { padding-bottom: 90px; }
}

@media (max-width: 460px) {
  .business-grid { grid-template-columns: 1fr; }
  .profile-title h2 { font-size: 24px; }
  .intro-image img { aspect-ratio: 1.38; }
  .team-grid img { aspect-ratio: 1.35; }
}