/* =========================================================
   CAPACO GROUP — HOMEPAGE
   Clear language. Predictable layout. Restrained movement.
========================================================= */


/* =========================================================
   HOMEPAGE DESIGN VARIABLES
========================================================= */

:root {
  --homepage-white: #ffffff;
  --homepage-navy: #10213f;
  --homepage-navy-dark: #091426;
  --homepage-navy-medium: #18345e;

  --homepage-gold: #b8904f;
  --homepage-gold-dark: #9f7534;
  --homepage-gold-light: #d8c08d;

  --homepage-ink: #202733;
  --homepage-slate: #536075;
  --homepage-muted: #687386;

  --homepage-soft: #f6f7f9;
  --homepage-warm: #f8f5ef;

  --homepage-line:
    rgba(16, 33, 63, 0.14);

  --homepage-line-strong:
    rgba(16, 33, 63, 0.24);

  --homepage-shadow:
    0 24px 60px rgba(16, 33, 63, 0.1);

  --homepage-content-width: 1240px;

  --homepage-gutter:
    clamp(24px, 5vw, 80px);

  --homepage-section-space:
    clamp(78px, 8vw, 118px);

  --homepage-section-space-small:
    clamp(64px, 7vw, 96px);

  --homepage-ease:
    cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* =========================================================
   HOMEPAGE BASE
========================================================= */

body {
  background: var(--homepage-white);
  color: var(--homepage-ink);
}

main {
  overflow: hidden;
}

.section-shell {
  width: min(
    var(--homepage-content-width),
    calc(100% - (var(--homepage-gutter) * 2))
  );

  margin-inline: auto;
}

.section-heading {
  max-width: 780px;
}

.section-heading h2,
.experience-copy h2,
.contact-callout h2 {
  color: var(--homepage-navy);

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

  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.section-heading h2,
.experience-copy h2 {
  font-size:
    clamp(2.4rem, 4.5vw, 4.6rem);
}

.section-intro {
  max-width: 680px;
  margin-top: 26px;

  color: var(--homepage-slate);

  font-size:
    clamp(1rem, 1.3vw, 1.13rem);

  line-height: 1.75;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 22px;

  color: var(--homepage-gold-dark);

  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-label::before {
  content: "";

  display: block;

  width: 38px;
  height: 2px;

  background: var(--homepage-gold);
}

.section-label-light {
  color: var(--homepage-gold-light);
}

.section-label-light::before {
  background: var(--homepage-gold-light);
}


/* =========================================================
   TEXT LINKS
========================================================= */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 22px;

  color: var(--homepage-navy);

  font-size: 0.9rem;
  font-weight: 750;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.text-link:hover {
  gap: 14px;
  color: var(--homepage-gold-dark);
}


/* =========================================================
   REVEAL MOTION
========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity 0.65s var(--homepage-ease),
    transform 0.65s var(--homepage-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   HOMEPAGE EXPERIENCE — CURRENT HERO
   Uses the current index.html structure:
   .hero
   .hero-copy
   .hero-media
========================================================= */

.hero {
  position: relative;

  min-height: 780px;

  display: grid;
  grid-template-columns:
    minmax(0, 47%)
    minmax(0, 53%);

  align-items: stretch;

  padding: 0;
  overflow: hidden;

  background: var(--white);
}


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

.hero-copy {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  min-width: 0;

  padding:
    158px
    clamp(38px, 5.5vw, 94px)
    106px;

  background: var(--white);

  opacity: 0;
  transform: translateY(16px);
}

.hero.is-ready .hero-copy {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.hero-copy .section-label {
  margin-bottom: 24px;
}

.hero-copy h1 {
  width: 100%;
  max-width: 720px;
  margin: 0;

  color: var(--navy);

  font-family: var(--display);

  font-size:
    clamp(3rem, 4.15vw, 4.85rem);

  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.97;
}

.hero-copy h1 span {
  display: block;
}

.hero-copy h1 span + span {
  margin-top: 0.03em;
}

.hero-lead {
  max-width: 590px;
  margin-top: 30px;

  color: var(--navy);

  font-size:
    clamp(1.06rem, 1.25vw, 1.24rem);

  font-weight: 500;
  line-height: 1.58;
}

.hero-support {
  max-width: 700px;
  margin-top: 22px;

  color: var(--slate);

  font-size:
    clamp(0.96rem, 1.05vw, 1.04rem);

  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;

  margin-top: 30px;

  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}


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

.hero-media {
  position: relative;

  min-width: 0;
  min-height: 780px;

  overflow: hidden;

  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.84) 0%,
      rgba(255, 255, 255, 0.42) 10%,
      rgba(255, 255, 255, 0.14) 21%,
      rgba(255, 255, 255, 0) 35%
    ),
    linear-gradient(
      180deg,
      rgba(9, 20, 38, 0.01),
      rgba(9, 20, 38, 0.08)
    ),
    url("/images/hero-main.jpg");

  background-position: 44% center;
  background-repeat: no-repeat;
  background-size: cover;

  filter:
    saturate(0.82)
    brightness(0.99)
    contrast(0.97);

  opacity: 0;
  transform: scale(1.018);
}

.hero.is-ready .hero-media {
  opacity: 1;
  transform: scale(1);

  transition:
    opacity 0.9s var(--ease) 0.08s,
    transform 1.2s var(--ease) 0.08s;
}


/* =========================================================
   HERO — LARGE TABLET
========================================================= */

@media (max-width: 1120px) {

  .hero {
    grid-template-columns:
      minmax(0, 47%)
      minmax(0, 53%);
  }

  .hero-copy {
    padding-inline:
      clamp(36px, 4.5vw, 68px);
  }

  .hero-copy h1 {
  max-width: 700px;

  font-size:
    clamp(2.75rem, 4.15vw, 4.35rem);
}

}


/* =========================================================
   HERO — TABLET
========================================================= */

@media (max-width: 980px) {

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;

    padding:
      138px
      28px
      64px;
  }

  .hero-copy h1 {
    max-width: 760px;

    font-size:
      clamp(3.1rem, 9vw, 4.9rem);
  }

  .hero-lead,
  .hero-support {
    max-width: 660px;
  }

  .hero-media {
    min-height: 450px;

    background-image:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1),
        rgba(9, 20, 38, 0.08)
      ),
      url("/images/hero-main.jpg");

    background-position: 44% center;
  }

}


/* =========================================================
   HERO — MOBILE
========================================================= */

@media (max-width: 620px) {

  .hero-copy {
    padding:
      118px
      22px
      52px;
  }

  .hero-copy .section-label {
    margin-bottom: 20px;

    font-size: 0.7rem;
    letter-spacing: 0.13em;
  }

  .hero-copy h1 {
    max-width: 520px;

    font-size:
      clamp(2.55rem, 11.6vw, 3.7rem);

    line-height: 0.99;
  }

  .hero-copy h1 span {
    display: inline;
  }

  .hero-copy h1 span::after {
    content: " ";
  }

  .hero-lead {
    margin-top: 24px;
    font-size: 1.04rem;
  }

  .hero-support {
    margin-top: 12px;
    font-size: 0.94rem;
  }

  .hero-actions {
    width: 100%;
    margin-top: 26px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-media {
    min-height: 350px;

    background-position: 42% center;
  }

}


/* =========================================================
   HERO — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .hero-copy h1 {
    font-size:
      clamp(2.42rem, 12vw, 3.25rem);
  }

  .hero-media {
    min-height: 320px;
    background-position: 40% center;
  }

}


/* =========================================================
   HERO — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hero-copy,
  .hero-media,
  .hero.is-ready .hero-copy,
  .hero.is-ready .hero-media {
    opacity: 1;
    transform: none;
    transition: none;
  }

}


/* =========================================================
   HOMEPAGE EXPERIENCE — SERVICES
========================================================= */

.services {
  position: relative;

  padding:
    clamp(88px, 9vw, 138px)
    0;

  border-top:
    1px solid rgba(16, 33, 63, 0.1);

  background: var(--white);
}

.services-heading {
  max-width: 900px;
}

.services-observation {
  max-width: 760px;
  margin: 0 0 24px;

  color: var(--navy-medium);

  font-size:
    clamp(1.08rem, 1.35vw, 1.28rem);

  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

.services-heading h2 {
  max-width: 790px;

  color: var(--navy);

  font-family: var(--display);
  font-size:
    clamp(2.7rem, 4.7vw, 5rem);

  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.99;
}

.services-heading .section-intro {
  max-width: 650px;
}

.service-list {
  margin-top:
    clamp(52px, 7vw, 86px);

  border-top:
    1px solid rgba(16, 33, 63, 0.2);
}

.service-item {
  padding: 0;

  border-bottom:
    1px solid rgba(16, 33, 63, 0.14);

  overflow: hidden;
}

.service-link {
  position: relative;

  display: block;

  padding:
    clamp(38px, 4.5vw, 62px)
    clamp(0px, 1.5vw, 20px);

  transition:
    background-color 0.3s ease,
    padding-left 0.3s var(--ease),
    padding-right 0.3s var(--ease);
}

.service-link::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(184, 144, 79, 0.08),
      rgba(184, 144, 79, 0.015)
    );

  opacity: 0;

  transition:
    opacity 0.3s ease;
}

.service-link:hover,
.service-link:focus-visible {
  padding-left:
    clamp(18px, 2vw, 28px);

  padding-right:
    clamp(18px, 2vw, 28px);
}

.service-link:hover::before,
.service-link:focus-visible::before {
  opacity: 1;
}

.service-copy {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(260px, 0.9fr)
    minmax(360px, 1.1fr)
    auto;

  gap:
    clamp(36px, 6vw, 92px);

  align-items: center;
}

.service-title {
  display: grid;
  gap: 13px;
}

.service-title h3 {
  margin: 0;

  color: var(--navy);

  font-family: var(--display);
  font-size:
    clamp(2rem, 3.3vw, 3.55rem);

  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.service-summary {
  max-width: 390px;
  margin: 0;

  color: var(--navy-medium);

  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.55;
}

.service-description {
  max-width: 580px;
  margin: 0;

  color: var(--slate);

  font-size:
    clamp(0.98rem, 1.1vw, 1.06rem);

  line-height: 1.72;
}

.service-arrow {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border:
    1px solid rgba(16, 33, 63, 0.22);

  border-radius: 50%;

  color: var(--navy);

  font-size: 1.2rem;
  line-height: 1;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.3s var(--ease);
}

.service-link:hover .service-arrow,
.service-link:focus-visible .service-arrow {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);

  transform: translateX(4px);
}


/* =========================================================
   SERVICES — TABLET
========================================================= */

@media (max-width: 980px) {

  .service-copy {
    grid-template-columns:
      minmax(220px, 0.8fr)
      minmax(0, 1.2fr)
      auto;

    gap:
      clamp(26px, 4vw, 52px);
  }

}


/* =========================================================
   SERVICES — MOBILE
========================================================= */

@media (max-width: 720px) {

  .services {
    padding:
      82px
      0;
  }

  .service-link {
    padding:
      34px
      0;
  }

  .service-link:hover,
  .service-link:focus-visible {
    padding-left: 0;
    padding-right: 0;
  }

  .service-copy {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap:
      22px
      20px;

    align-items: start;
  }

  .service-title {
    grid-column: 1;
  }

  .service-description {
    grid-column:
      1 / -1;

    max-width: 620px;
  }

  .service-arrow {
    grid-column: 2;
    grid-row: 1;

    width: 42px;
    height: 42px;
  }

  .services-observation {
    margin-bottom: 20px;

    font-size: 1.02rem;
    line-height: 1.58;
 }
   
}


/* =========================================================
   SERVICES — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .service-title h3 {
    font-size:
      clamp(1.85rem, 9vw, 2.5rem);
  }

  .service-summary {
    font-size: 0.88rem;
  }

  .service-description {
    font-size: 0.95rem;
  }

}


/* =========================================================
   SERVICES — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service-link,
  .service-link::before,
  .service-arrow {
    transition: none;
  }

}

/* =========================================================
   HOMEPAGE EXPERIENCE — HOW WE WORK
========================================================= */

.process {
  position: relative;

  padding:
    clamp(92px, 9vw, 142px)
    0;

  background: #f2f4f7;
}

.process-intro {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(320px, 0.95fr);

  gap:
    clamp(48px, 9vw, 130px);

  align-items: end;
}

.process-heading {
  max-width: 760px;
}

.process-heading h2 {
  max-width: 720px;

  color: var(--navy);

  font-family: var(--display);

  font-size:
    clamp(2.75rem, 4.8vw, 5rem);

  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.99;
}

.process-intro-copy {
  max-width: 590px;
  margin: 0 0 6px;

  color: var(--slate);

  font-size:
    clamp(1rem, 1.2vw, 1.1rem);

  line-height: 1.78;
}

.process-list {
  margin-top:
    clamp(58px, 7vw, 90px);

  border-top:
    1px solid rgba(16, 33, 63, 0.22);
}

.process-step {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.84fr)
    minmax(360px, 1.16fr);

  gap:
    clamp(58px, 9vw, 138px);

  align-items: center;

  padding:
    clamp(46px, 5.5vw, 74px)
    0;

  border-bottom:
    1px solid rgba(16, 33, 63, 0.14);
}

.process-step-heading {
  max-width: 520px;
}

.process-marker {
  margin: 0 0 18px;

  color: #8a6225;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.process-step h3 {
  max-width: 500px;
  margin: 0;

  color: var(--navy);

  font-family: var(--display);

  font-size:
    clamp(2rem, 3.15vw, 3.35rem);

  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.process-step-description {
  max-width: 600px;
  margin: 0;

  color: #46556c;

  font-size: 1.08rem;
  line-height: 1.74;
}


/* =========================================================
   HOW WE WORK — TABLET
========================================================= */

@media (max-width: 980px) {

  .process-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .process-intro-copy {
    max-width: 680px;
  }

  .process-step {
    grid-template-columns:
      minmax(260px, 0.85fr)
      minmax(0, 1.15fr);

    gap:
      clamp(38px, 7vw, 72px);
  }

  .process-step h3 {
    font-size:
      clamp(1.9rem, 4.8vw, 2.8rem);
  }

  .process-step-description {
    font-size: 1.04rem;
  }

}


/* =========================================================
   HOW WE WORK — MOBILE
========================================================= */

@media (max-width: 680px) {

  .process {
    padding:
      82px
      0;
  }

  .process-list {
    margin-top: 50px;
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: 22px;

    padding:
      40px
      0;
  }

  .process-marker {
    margin-bottom: 14px;

    font-size: 0.76rem;
    letter-spacing: 0.11em;
  }

  .process-step h3 {
    max-width: 520px;

    font-size:
      clamp(1.9rem, 8vw, 2.65rem);
  }

  .process-step-description {
    max-width: 620px;

    font-size: 1rem;
    line-height: 1.72;
  }

}


/* =========================================================
   HOW WE WORK — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .process-step,
  .process-step-heading,
  .process-step-description {
    transition: none;
  }

}

/* =========================================================
   HOMEPAGE EXPERIENCE — EXPERIENCE BEHIND THE WORK
========================================================= */

.experience {
  position: relative;

  padding:
    clamp(96px, 10vw, 150px)
    0;

  background: var(--white);
}

.experience-layout {
  display: grid;
  grid-template-columns:
    minmax(360px, 0.84fr)
    minmax(0, 1fr);

  gap:
    clamp(60px, 9vw, 132px);

  align-items: center;
}


/* =========================================================
   EXPERIENCE IMAGE
========================================================= */

.experience-media {
  position: relative;

  width: 100%;
  max-width: 520px;

  overflow: hidden;

  background: #eef0f3;

  box-shadow:
    0 26px 66px rgba(16, 33, 63, 0.12);
}

.experience-media::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(9, 20, 38, 0),
      rgba(9, 20, 38, 0.08)
    );

  pointer-events: none;
}

.experience-media::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;

  width: 38%;
  height: 4px;

  background: var(--gold);
}

.experience-media img {
  width: 100%;
  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center top;

  filter:
    saturate(0.84)
    contrast(0.98);

  transition:
    transform 0.8s var(--ease);
}

.experience-media:hover img {
  transform: scale(1.015);
}


/* =========================================================
   EXPERIENCE COPY
========================================================= */

.experience-copy {
  max-width: 700px;
}

.experience-copy h2 {
  max-width: 690px;

  color: var(--navy);

  font-family: var(--display);
  font-size:
    clamp(2.7rem, 4.6vw, 4.9rem);

  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
}

.experience-copy > p:not(.section-label) {
  max-width: 650px;
  margin: 22px 0 0;

  color: var(--slate);

  font-size:
    clamp(0.98rem, 1.1vw, 1.06rem);

  line-height: 1.76;
}

.experience-copy .experience-lead {
  margin-top: 30px;

  color: var(--navy-medium);

  font-size:
    clamp(1.04rem, 1.3vw, 1.18rem);

  font-weight: 550;
  line-height: 1.68;
}

.experience-copy .text-link {
  margin-top: 32px;
}


/* =========================================================
   EXPERIENCE — TABLET
========================================================= */

@media (max-width: 980px) {

  .experience-layout {
    grid-template-columns:
      minmax(300px, 0.75fr)
      minmax(0, 1fr);

    gap:
      clamp(42px, 7vw, 76px);
  }

  .experience-media {
    max-width: 440px;
  }

}


/* =========================================================
   EXPERIENCE — MOBILE
========================================================= */

@media (max-width: 760px) {

  .experience {
    padding:
      84px
      0;
  }

  .experience-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .experience-media {
    max-width: 480px;
    margin-inline: auto;
  }

  .experience-copy {
    max-width: none;
  }

}


/* =========================================================
   EXPERIENCE — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .experience-copy h2 {
    font-size:
      clamp(2.35rem, 11vw, 3.3rem);
  }

  .experience-media {
    box-shadow:
      0 20px 48px rgba(16, 33, 63, 0.1);
  }

}


/* =========================================================
   EXPERIENCE — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .experience-media img {
    transition: none;
  }

  .experience-media:hover img {
    transform: none;
  }

}

/* =========================================================
   HOMEPAGE EXPERIENCE — FINAL CONTACT
========================================================= */

.contact-callout {
  position: relative;

  padding:
    clamp(92px, 9vw, 136px)
    var(--page-gutter);

  overflow: hidden;

  background: var(--navy);
}


/* Subtle depth without decoration */

.contact-callout::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(184, 144, 79, 0.1),
      transparent 34%
    );

  pointer-events: none;
}

.contact-callout-inner {
  position: relative;
  z-index: 1;

  width: min(
    var(--content-width),
    100%
  );

  margin-inline: auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    clamp(48px, 8vw, 110px);

  align-items: center;
}

.contact-callout-copy {
  max-width: 830px;
}

.contact-callout .section-label {
  margin-bottom: 24px;
}

.contact-callout h2 {
  max-width: 820px;
  margin: 0;

  color: var(--white);

  font-family: var(--display);
  font-size:
    clamp(2.8rem, 5vw, 5.25rem);

  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.contact-callout p:not(.section-label) {
  max-width: 690px;
  margin: 28px 0 0;

  color:
    rgba(255, 255, 255, 0.74);

  font-size:
    clamp(1rem, 1.2vw, 1.1rem);

  line-height: 1.76;
}

.contact-callout-action {
  flex-shrink: 0;
}

.contact-callout-action .button {
  min-width: 176px;
}


/* =========================================================
   FINAL CONTACT — TABLET
========================================================= */

@media (max-width: 900px) {

  .contact-callout-inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .contact-callout-action {
    justify-self: start;
  }

}


/* =========================================================
   FINAL CONTACT — MOBILE
========================================================= */

@media (max-width: 620px) {

  .contact-callout {
    padding:
      80px
      22px;
  }

  .contact-callout h2 {
    font-size:
      clamp(2.45rem, 11vw, 3.65rem);
  }

  .contact-callout p:not(.section-label) {
    margin-top: 22px;
  }

  .contact-callout-action,
  .contact-callout-action .button {
    width: 100%;
  }

}

/* =========================================================
   HOMEPAGE EXPERIENCE — DESKTOP TYPOGRAPHY REFINEMENT
   Improves readability without changing mobile styling.
========================================================= */

@media (min-width: 981px) {

  /* ---------------------------------------------------------
     EYEBROW / SECTION LABELS
  --------------------------------------------------------- */

  .section-label {
    gap: 13px;

    margin-bottom: 24px;

    color: #8a6225;

    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  .section-label::before {
    width: 40px;
    height: 2px;
  }

  .section-label-light {
    color: #e2ce9f;
  }


  /* ---------------------------------------------------------
     HERO SUPPORTING COPY
  --------------------------------------------------------- */

  .hero-lead {
    max-width: 620px;

    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.62;
  }

  .hero-support {
    max-width: 600px;

    color: #46556c;

    font-size: 1.04rem;
    line-height: 1.68;
  }

  .hero-actions {
    margin-top: 38px;
  }


  /* ---------------------------------------------------------
     SECTION INTRODUCTIONS
  --------------------------------------------------------- */

  .section-intro,
  .process-intro-copy {
    color: #46556c;

    font-size: 1.08rem;
    line-height: 1.74;
  }


  /* ---------------------------------------------------------
     SERVICE SUPPORTING TEXT
  --------------------------------------------------------- */

  .service-summary {
    color: #2f405c;

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.55;
  }

  .service-description {
    color: #46556c;

    font-size: 1.08rem;
    line-height: 1.72;
  }


  /* ---------------------------------------------------------
     PROCESS SUPPORTING TEXT
  --------------------------------------------------------- */

  .process-marker {
    color: #8a6225;

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

  
  /* ---------------------------------------------------------
     EXPERIENCE SUPPORTING TEXT
  --------------------------------------------------------- */

  .experience-copy > p:not(.section-label) {
    color: #46556c;

    font-size: 1.08rem;
    line-height: 1.74;
  }

  .experience-copy .experience-lead {
    color: #2f405c;

    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.66;
  }


  /* ---------------------------------------------------------
     TEXT LINKS
  --------------------------------------------------------- */

  .text-link {
    color: #132847;

    font-size: 1rem;
    font-weight: 750;
  }


  /* ---------------------------------------------------------
     FINAL CTA SUPPORTING TEXT
  --------------------------------------------------------- */

  .contact-callout p:not(.section-label) {
    color:
      rgba(255, 255, 255, 0.82);

    font-size: 1.08rem;
    line-height: 1.74;
  }

}