/* =====================================
   BASIC RESET
===================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  color: #152437;
}


/* =====================================
   MAIN HERO SECTION
===================================== */

.office-hero {

  position: relative;

  width: 100%;

  min-height: 560px;

  display: grid;

  grid-template-columns: 43% 57%;

  overflow: hidden;

  isolation: isolate;

  background: #ffffff;
}


/* =====================================
   LEFT CONTENT
===================================== */

.office-copy {

  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  padding:

    58px

    20px

    58px

    clamp(32px, 5.5vw, 106px);

  background:

    linear-gradient(

      90deg,

      #ffffff 0%,

      #ffffff 72%,

      rgba(255,255,255,.92) 88%,

      rgba(255,255,255,0) 100%

    );
}


.copy-inner {

  width: min(700px, 100%);

}


/* =====================================
   MAIN HEADING
===================================== */

h1 {

  margin: 0 0 24px;

  font-size: clamp(42px, 4.45vw, 82px);

  line-height: .99;

  letter-spacing: -2.8px;

  font-weight: 800;

  color: #152437;
}


h1 span {

  color: #0b8a67;

}


/* =====================================
   PARAGRAPHS
===================================== */

.intro {

  max-width: 650px;

  margin: 0 0 10px;

  font-size: clamp(16px, 1.25vw, 22px);

  line-height: 1.48;

  color: #18283a;

}


/* =====================================
   SERVICES
===================================== */

.service-list {

  margin-top: 28px;

  display: flex;

  align-items: center;

  gap: 16px;
}


.service {

  flex: 1;

  min-width: 0;

  text-align: center;
}


/* =====================================
   ICON CIRCLE
===================================== */

.icon-circle {

  width: 70px;

  height: 70px;

  margin: 0 auto 10px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: #e5f5ef;
}


.icon-circle svg {

  width: 39px;

  height: 39px;

  fill: none;

  stroke: #0b8a67;

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =====================================
   SERVICE TEXT
===================================== */

.service strong {

  display: block;

  font-size: 15px;

  line-height: 1.3;

  font-weight: 700;

  color: #183046;
}


/* =====================================
   VERTICAL DIVIDERS
===================================== */

.divider {

  width: 1px;

  height: 76px;

  background: #8acdb9;

  flex: 0 0 1px;
}


/* =====================================
   GREEN ACCENT LINE
===================================== */

.accent-line {

  width: 124px;

  height: 6px;

  margin-top: 28px;

  border-radius: 10px;

  background: #0b9d72;
}


/* =====================================
   RIGHT IMAGE
===================================== */

.office-image {

  position: relative;

  z-index: 1;

  min-height: 560px;

  overflow: hidden;
}


/* White fade between text and image */

.office-image::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    linear-gradient(

      90deg,

      rgba(255,255,255,1) 0%,

      rgba(255,255,255,.74) 8%,

      rgba(255,255,255,0) 26%

    );
}


.office-image img {

  width: 100%;

  height: 100%;

  min-height: 560px;

  display: block;

  object-fit: cover;

  object-position: center center;
}


/* =====================================
   DECORATIVE GREEN SHAPES
===================================== */

.decor {

  position: absolute;

  z-index: 5;

  pointer-events: none;

  background: #9bdac8;
}


/* Top-left shape */

.decor-top {

  width: 185px;

  height: 140px;

  left: -42px;

  top: -48px;

  border-radius: 0 0 100% 0;
}


/* Bottom-right shape */

.decor-bottom {

  width: 210px;

  height: 150px;

  right: -65px;

  bottom: -75px;

  border-radius: 100% 0 0 0;

  background: #0c9870;
}


/* =====================================
   SCROLL ANIMATION
===================================== */

.reveal {

  opacity: 0;

  transform: translateY(18px);

  transition:

    opacity .7s ease,

    transform .7s ease;
}


.reveal.visible {

  opacity: 1;

  transform: translateY(0);
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 1050px) {

  .office-hero {

    grid-template-columns: 48% 52%;

  }


  .office-copy {

    padding-left: 40px;

  }


  .service-list {

    gap: 9px;

  }


  .service strong {

    font-size: 13px;

  }


  .icon-circle {

    width: 58px;

    height: 58px;

  }


  .icon-circle svg {

    width: 32px;

    height: 32px;

  }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 760px) {

  .office-hero {

    display: flex;

    flex-direction: column;

    min-height: auto;

  }


  /* Text first */

  .office-copy {

    order: 1;

    padding:

      70px

      22px

      35px;

    background: #ffffff;

  }


  h1 {

    font-size: clamp(39px, 11vw, 58px);

    letter-spacing: -1.8px;

    margin-bottom: 22px;

  }


  .intro {

    font-size: 16px;

    line-height: 1.5;

  }


  /* Image below */

  .office-image {

    order: 2;

    min-height: 330px;

  }


  .office-image img {

    min-height: 330px;

    height: 330px;

    object-position: center;

  }


  .office-image::before {

    background:

      linear-gradient(

        180deg,

        rgba(255,255,255,.05),

        rgba(255,255,255,0)

      );

  }


  /* 2 x 2 service grid */

  .service-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 8px;

    margin-top: 28px;

  }


  .divider {

    display: none;

  }


  .service strong {

    font-size: 13px;

  }


  .icon-circle {

    width: 58px;

    height: 58px;

  }


  .accent-line {

    margin-top: 25px;

  }


  .decor-top {

    width: 120px;

    height: 90px;

  }


  .decor-bottom {

    width: 120px;

    height: 90px;

  }

}


/* =====================================
   SMALL PHONES
===================================== */

@media (max-width: 390px) {

  .office-copy {

    padding-left: 17px;

    padding-right: 17px;

  }


  h1 {

    font-size: 37px;

  }


  .service-list {

    gap: 17px 3px;

  }


  .service strong {

    font-size: 12px;

  }

}


/* =====================================
   REDUCED MOTION
===================================== */

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

  .reveal {

    opacity: 1;

    transform: none;

    transition: none;

  }


  html {

    scroll-behavior: auto;

  }

}