/* About page base */
.about-page {
  overflow-x: clip;
}

.about-page main > .wrap,
.about-page .about-hero > .wrap,
.about-page .footer {
  width: calc(100% - 64px);
  max-width: 1536px;
  margin-inline: auto;
}

@media (max-width: 800px) {
  .about-page main > .wrap,
  .about-page .about-hero > .wrap,
  .about-page .footer {
    width: calc(100% - 28px);
  }
}

/* Hero section */
.about-hero {
  position: relative;
  isolation: isolate;
  min-height: 510px;
  border-bottom: 1px solid var(--line);
  background-color: #fff;
  background-image: radial-gradient(
    circle,
    rgba(194, 205, 200, 0.72) 1px,
    transparent 1.25px
  );
  background-size: 18px 18px;
  background-position: 0 0;
  display: flex;
  align-items: center;
}
.about-hero .wrap {
  position: relative;
  z-index: 2;
  padding: 55px 0;
  margin-top: 60px;
}
.about-hero-notes {
  position: absolute;
  z-index: 3;
  top: 118px;
  right: max(46px, calc((100% - 1500px) / 2));
  width: 420px;
  height: 358px;
  pointer-events: none;
}
.about-sticky-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 154px;
  min-height: 142px;
  padding: 20px 13px 14px;
  color: #1b2822;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 2px 5px 0 rgba(44, 52, 48, 0.09), 8px 15px 20px rgba(25, 42, 32, 0.16);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  pointer-events: auto;
  transition: transform 180ms cubic-bezier(.2,.8,.3,1), box-shadow 180ms ease;
}
.about-sticky-note::before {
  position: absolute;
  content: "";
  top: -13px;
  left: 36px;
  width: 80px;
  height: 25px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 1px rgba(93, 87, 66, 0.28);
  transform: rotate(-5deg);
}
.about-sticky-note::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, transparent 49%, rgba(60, 70, 64, 0.14) 50%, rgba(255, 255, 255, 0.66) 53%);
}
.about-sticky-note {
  transform-origin: 50% 0;
  rotate: 0deg;
  animation: sticky-note-flutter 5.5s ease-in-out infinite;
}
@keyframes sticky-note-flutter {
  0%, 58%, 100% { rotate: 0deg; scale: 1; }
  68% { rotate: -1deg; scale: .994; }
  78% { rotate: 0.8deg; scale: 1.004; }
  86% { rotate: -0.4deg; scale: .998; }
}
.about-sticky-note--pink { animation-delay: -1.4s; }
.about-sticky-note--blue { animation-delay: -2.8s; }
.about-sticky-note--mint { animation-delay: -4.2s; }
.about-sticky-note--lilac { animation-delay: -5.6s; }
.about-sticky-note--coral { animation-delay: -0.7s; }
@media (prefers-reduced-motion: reduce) {
  .about-sticky-note {
    animation: none;
  }
}
.about-sticky-note span {
  position: relative;
  z-index: 1;
  display: block;
  transform: rotate(-1.5deg);
}
.about-sticky-note--yellow { top: 0; left: 6px; background: #ffe779; transform: rotate(-7deg); }
.about-sticky-note--pink { top: 88px; right: 0; min-height: 126px; background: #ffadba; transform: rotate(8deg); }
.about-sticky-note--blue { bottom: 0; left: 28px; width: 166px; min-height: 128px; background: #9ed8ee; transform: rotate(-3deg); }
.about-sticky-note--mint { top: 13px; right: 42px; width: 128px; min-height: 112px; background: #aee7c7; transform: rotate(5deg); }
.about-sticky-note--lilac { bottom: 11px; right: 16px; width: 116px; min-height: 94px; background: #d5c6f2; transform: rotate(11deg); }
.about-sticky-note--coral { top: 158px; left: 118px; width: 136px; min-height: 112px; background: #ffba9f; transform: rotate(-11deg); }
.about-sticky-note:hover,
.about-sticky-note:focus-visible {
  z-index: 2;
  box-shadow: 3px 8px 0 rgba(44, 52, 48, 0.08), 13px 23px 25px rgba(25, 42, 32, 0.2);
}
/* Override the global custom cursor on notes, including their text. */
.about-page .about-sticky-note,
.about-page .about-sticky-note * {
  cursor: pointer !important;
}
.about-page .about-sticky-note:active,
.about-page .about-sticky-note:active *,
.about-page .about-sticky-note.is-dragging,
.about-page .about-sticky-note.is-dragging * {
  cursor: grabbing !important;
}
.about-sticky-note.is-dragging { animation-play-state: paused; }
.about-sticky-note:active,
.about-sticky-note.is-dragging {
  box-shadow: 4px 10px 0 rgba(44, 52, 48, 0.08), 16px 28px 30px rgba(25, 42, 32, 0.25);
}
.about-hero h1 {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.08;
  max-width: 930px;
}
.about-hero p {
  margin: 20px 0;
  max-width: 680px;
}
.about-actions {
  display: flex;
  gap: 10px;
}
/* Metrics section */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 58px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
  margin-top: 20px;
}
.metrics div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.metrics strong {
  color: var(--green);
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -0.06em;
}
.metrics span {
  color: var(--muted);
  font-size: 20px;
}
/* Story section */
.story {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 120px;
  padding: 90px 0;
}
.story article {
  max-width: 700px;
}
.story h2 {
  margin: 14px 0 20px;
  font-size: 50px;
}
.story h3 {
  font-size: 31px;
  line-height: 1.15;
  margin-bottom: 25px;
  max-width: 600px;
}
.story p {
  font-size: 20px;
}
.story aside {
  padding-top: 12px;
}
.story dl {
  margin-top: 30px;
}
.story dl div {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.story dt {
  font-size: 12px;
  color: #929895;
  margin-bottom: 8px;
}
.story dd {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
}
/* Beliefs section */
.beliefs {
  position: relative;
  isolation: isolate;
  padding: 52px 0 20px;
}

.belief-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: end;
  min-height: 110px;
}
.belief-heading .kicker {
  grid-column: 1;
  align-self: start;
}
.belief-heading h2 {
  grid-column: 1;
  font-size: 50px;
}
.belief-heading p {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 440px;
  margin: 0;
  align-self: center;
  font-size: 20px;
  line-height: 2.15;
}
.beliefs ol {
  counter-reset: belief;
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
}

.beliefs li {
  counter-increment: belief;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 440px;
  align-items: center;
  min-height: 144px;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.beliefs li:last-child {
  border-bottom: 1px solid var(--line);
}

.beliefs li:before {
  content: "0" counter(belief);
  color: var(--green);
  padding-left: 22px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.beliefs li b {
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.15vw, 35px);
  font-weight: 400;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 2;
}

.beliefs li span {
  color: var(--muted);
  max-width: 440px;
  font-size: 20px;
  line-height: 2.15;
  position: relative;
  z-index: 2;
}

/* Green paint layer */
.beliefs li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}

.beliefs li > * {
  position: relative;
  z-index: 2;
}

.beliefs li::before {
  position: relative;
  z-index: 2;
  transition: color 0.1s ease 0s;
}

.beliefs li b {
  transition: color 0.1s ease 0.05s;
}

.beliefs li span {
  transition: color 0.3s ease 0.1s;
}

.beliefs li:hover::after {
  transform: scaleX(1);
}

.beliefs li:hover::before,
.beliefs li:hover {
  color: #fff;
}

.beliefs li:hover b {
  color: #fff;
}

.beliefs li:hover span {
  color: #fff;
}
/* Approach section */
.disciplines {
  display: grid;
  align-items: center;
}
.disciplines article p {
  line-height: 2;
}
.discipline-tags {
  display: flex;
  flex-wrap: wrap;
}
.discipline-tags span {
  color: #6d7571;
}
.discipline-tags span:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
}
/* Featured work section */
.about-work {
  padding-top: 25px;
}
/* CTA section */
.about-page .cta {
  margin-top: 20px;
}
/* Responsive layout */
@media (max-width: 800px) {
  .about-hero {
    min-height: 460px;
  }
  .about-hero h1 {
    font-size: 46px;
  }
  .metrics strong {
    font-size: 42px;
  }
  .story,
  .disciplines {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .story {
    padding: 65px 0;
  }
  .belief-heading {
    display: block;
  }
  .belief-heading p {
    max-width: 100%;
  }
  .beliefs li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: auto;
    padding: 24px 0;
  }
  .beliefs li:before {
    padding-left: 0;
    margin-bottom: 8px;
    font-size: 13px;
  }
  .beliefs li b {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .beliefs li span {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
  }
  .disciplines {
    padding-inline: 0;
  }
  .orbit {
    max-width: 520px;
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 480px) {
  .about-hero {
    min-height: 430px;
    margin-top: 60px;
  }
  .about-hero .wrap {
    padding: 35px 0;
    
  }
  .about-hero h1 {
    font-size: 36px;
  }
  .about-hero br {
    display: none;
  }
  .about-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .metrics {
    padding: 35px 0;
  }
  .metrics strong {
    font-size: 34px;
  }
  .metrics span {
    font-size: 10px;
  }
  .story h3 {
    font-size: 22px;
  }
  .beliefs li {
    padding: 20px 0;
  }
  .beliefs li b {
    font-size: 19px;
  }
  .beliefs li span {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Keep the primary desktop hero height consistent across About, Services and Works. */
@media (min-width: 801px) {
  .about-hero {
    height: 560px;
    min-height: 0;
    max-height: none;
  }
}

/* Refined Our Approach section */
.disciplines {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 110px;
  align-items: center;
  min-height: 570px;
  padding: 72px 45px 100px;
  position: relative;
}
.disciplines:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  left: -270px;
  top: 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #dff8e9 0,
    rgba(223, 248, 233, 0.52) 40%,
    transparent 72%
  );
  filter: blur(8px);
}
.disciplines article {
  max-width: 500px;
}
.disciplines h2 {
  font-size: clamp(50px, 3.8vw, 62px);
  line-height: 1.08;
  margin: 20px 0 28px;
}
.disciplines article p {
  font-size: 16px;
  line-height: 2;
  max-width: 495px;
}
.discipline-tags {
  gap: 8px 14px;
  margin-top: 23px;
}
.discipline-tags span {
  font-size: 16px;
  white-space: nowrap;
}
.discipline-tags span:before {
  margin-right: 6px;
  vertical-align: 1px;
}
.orbit {
  position: relative;
  width: 100%;
  height: auto;
}
.orbit svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.network-faint {
  fill: none;
  stroke: #dce3e0;
        stroke-width: 1.35;
        stroke-linejoin: round;
        opacity: 0.56;
}
.network-faint .connection-muted {
  stroke: #aeb8b4;
}
.network-green {
  stroke: #17a867;
  stroke-width: 1.15;
  fill: none;
}
.network-nodes circle {
  fill: #fff;
  stroke: #17a867;
  stroke-width: 1.25;
}
.network-nodes .hub {
  fill: #17a867;
  stroke: #17a867;
}
.network-labels {
  font:
    15px Inter,
    Arial,
    sans-serif;
  font-family: "DM Sans", Arial, sans-serif;
  fill: #171a19;
}
@media (max-width: 800px) {
  .about-hero {
    flex-direction: column;
  }
  .about-hero .wrap {
    order: -1;
  }
  .about-hero-notes {
    position: relative;
    top: auto;
    right: auto;
    width: min(420px, calc(100% - 40px));
    height: 358px;
    margin: 0 auto 40px;
    pointer-events: none;
  }
  .about-sticky-note {
    font-size: 20px;
    box-shadow: 2px 5px 0 rgba(44, 52, 48, 0.1), 8px 15px 20px rgba(25, 42, 32, 0.13);
  }
  .disciplines {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 75px 0;
  }
  .disciplines article {
    max-width: 600px;
  }
  .orbit {
    max-width: 600px;
    height: auto;
  }
}
@media (max-width: 480px) {
  .about-sticky-note--yellow { left: 0; }
  .about-sticky-note--pink { right: 16px; }
  .disciplines {
    padding: 60px 0;
  }
  .disciplines h2 {
    font-size: 40px;
  }
  .disciplines article p {
    font-size: 14px;
    line-height: 1.8;
  }
  .discipline-tags {
    gap: 8px 12px;
  }
  .discipline-tags span {
    font-size: 13px;
  }
  .network-labels {
    font-size: 13px;
  }
  .orbit {
    height: auto;
  }
}