@font-face {
  font-family: Inter;
  src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}

@font-face {
  font-family: Playfair;
  src: url(../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  line-height: 1;
  font-family: Inter;
}

a {
  text-decoration: none;
}

/* Home page styles */

.home-hero-section {
  background: #0a0a0a;
  padding: 4rem 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 3rem;
}

.home-hero-section h1 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 7.5rem;
  font-weight: 400;
  line-height: 7.125rem;
  letter-spacing: -0.01875rem;
}

.home-hero-section h1 span {
  color: #a09d96;
}

.home-hero-section .hero-text {
  margin-top: 2.5rem;
  color: #f5f0e8b2;
  font-family: Playfair;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2rem;
}

.home-hero-section .buttons-container {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.home-hero-section .buttons-container .explore-btn {
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  background: #f5f0e8;
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.home-hero-section .buttons-container .our-story-btn {
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(245, 240, 232, 0.3);
  color: #f5f0e8;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.00294rem;
}

.home-hero-section img {
  width: 100%;
}

.stats-section {
  padding: 5rem 3rem;
  border-top: 1px solid rgba(42, 42, 42, 0.5);
  border-bottom: 1px solid rgba(42, 42, 42, 0.5);
  background: #1a1a1a;
  display: flex;
  justify-content: space-around;
}

.stats-section .stat:not(:first-child) {
  border-left: 1px solid rgba(42, 42, 42, 0.5);
  padding-left: 2rem;
}

.stats-section .stat .figure {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 3.75rem;
  font-weight: 400;
  letter-spacing: 0.03663rem;
}

.stats-section .stat .figure.highlighted {
  color: #c8a96e;
}

.stats-section .stat .description {
  margin-top: 0.25rem;
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
}

.selected-work-section {
  padding: 8rem 3rem;
  background-color: #0a0a0a;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.selected-work-section .selected-item img {
  width: 100%;
}

.selected-work-section .selected-item .bottom-section {
  padding: 1.5rem 0 3rem;
}

.selected-work-section .selected-item .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-work-section .selected-item .info h3 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: 0.00294rem;
}

.selected-work-section .selected-item .info .year {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.00769rem;
}

.selected-work-section .selected-item .features-container {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.selected-work-section .selected-item .features-container .feature-container {
  padding: 0.25rem 0.75rem;
  border-radius: 624.9375rem;
  border: 1px solid #2a2a2a;
}

.selected-work-section .selected-item .features-container .feature-container P {
  color: #a09d96;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.00219rem;
}

.architecture-section {
  padding: 8rem 3rem;
  background-color: #0a0a0a;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  place-items: center;
}

.architecture-section .left-side h1 {
  width: 100%;
  max-width: 30rem;
  color: #a09d96;
  font-family: Playfair;
  font-size: 4.5rem;
  font-style: italic;
}

.architecture-section .left-side h1 span {
  color: #f5f0e8;
}

.architecture-section .right-side p {
  color: rgba(245, 240, 232, 0.7);
  font-family: Inter;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.75rem;
}

.architecture-section .right-side a {
  color: #c8a96e;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 2rem;
  display: block;
}

.testimonial-section {
  padding: 8rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0a0a0a;
}

.testimonial-section h2 {
  width: 100%;
  max-width: 60rem;
  color: #f5f0e8;
  font-size: 3rem;
  font-style: italic;
  font-weight: 400;
  font-family: Playfair;
  text-align: center;
}

.testimonial-section .author {
  text-align: center;
  margin-top: 2.5rem;
  color: #f5f0e8;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.025rem;
}

.testimonial-section .position {
  margin-top: 0.5rem;
  color: #a09d96;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
}

.testimonial-section .quotes-icon {
  align-self: flex-start;
  margin-bottom: 2rem;
}

/* About page styles */

.about-hero-section {
  padding: 5rem 3rem;
  background-color: #0a0a0a;
}

.about-hero-section .page-text {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.about-hero-section h1 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 5.5rem;
  font-weight: 400;
  letter-spacing: -0.1375rem;
  margin-top: 1.5rem;
}

.about-hero-section h1 span {
  display: block;
  color: #a09d96;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  margin-top: 4.5rem;
  gap: 2rem;
  place-items: flex-end;
  border-top: 1px solid #2a2a2a;
  padding-top: 1.5rem;
}

.about-hero-grid .hero-image {
  width: 100%;
}

.about-hero-grid .text-section {
  margin-bottom: 1.5rem;
}

.about-hero-grid .small-line {
  width: 3rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.about-hero-grid .hero-text {
  margin-top: 2rem;
  color: rgba(245, 240, 232, 0.8);
  font-family: Playfair;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2.4375rem; /* 162.5% */
}

.about-hero-grid .body-text {
  margin-top: 2rem;
  color: #a09d96;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.625rem;
}

.about-hero-grid .architects {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about-hero-grid .architects .architects-avatars {
  height: 2.5rem;
}

.about-hero-grid .architects .num-architects {
  color: #a09d96;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.0088rem;
}

.about-journey-section {
  padding: 4rem 3rem;
  background-color: #0a0a0a;
}

.about-journey-section .journey-item {
  display: grid;
  grid-template-columns: 25rem auto;
  gap: 3rem;
  padding-bottom: 2rem;
}

.about-journey-section .journey-item .number-section .number {
  color: #2a2a2a;
  font-family: Playfair;
  font-size: 7rem;
  font-weight: 400;
  letter-spacing: -0.35rem;
}

.about-journey-section .journey-item .number-section h3 {
  margin-top: 1rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2.8125rem;
}

.about-journey-section .very-small-line {
  margin-top: 1rem;
  width: 2rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.about-journey-section .text-section p {
  margin-top: 1.5rem;
  color: #a09d96;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.9rem;
}

.about-journey-section .medium-line {
  width: 8rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.what-we-stand-for-section {
  padding: 7rem 3rem;
  background-color: #2a2a2a;
}

.what-we-stand-for-section .heading-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.what-we-stand-for-section .heading-container h2 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: 0.00219rem;
}

.what-we-stand-for-section .heading-container .core-values {
  color: #a09d96;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.what-we-stand-for-section .what-we-stand-items {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.what-we-stand-for-section .what-we-stand-item .what-we-stand-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.what-we-stand-for-section .what-we-stand-item h4 {
  margin-top: 1.5rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}

.what-we-stand-for-section .what-we-stand-item .body-text {
  margin-top: 0.75rem;
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.excellence-journey-section {
  padding: 8rem 3rem;
  background-color: #0a0a0a;
}

.excellence-journey-section .heading-text {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.excellence-journey-section h2 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 3rem;
  font-weight: 400;
}

.excellence-journey-section .excellence-grid {
  margin-top: 6.5rem;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  border-top: 1px solid #c8a96e60;
}

.excellence-grid .excellence-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.excellence-grid .year {
  color: #c8a96e;
  text-align: center;
  font-family: Playfair;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.02319rem;
  margin-top: 2rem;
}

.excellence-grid .event {
  margin-top: 0.5rem;
  color: #f5f0e8;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.excellence-grid .details {
  margin-top: 0.5rem;
  color: #a09d96;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.2rem;
  letter-spacing: -0.00075rem;
}

.yellow-circle,
.filled-yellow-circle {
  width: 1rem;
  height: 1rem;
  border-radius: 624.9375rem;
  border: 2px solid #c8a96e;
  background: #0a0a0a;
  margin-top: -3rem;
}

.filled-yellow-circle {
  background-color: #c8a96e;
}

.about-bottom-section {
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/about-bottom.png");
  padding: 15rem 3rem;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.about-bottom-section h2 {
  color: #f5f0e8;
  text-align: center;
  font-family: Playfair;
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2.8rem;
  width: 100%;
  max-width: 50rem;
}

.about-bottom-section img {
  width: 2rem;
}

.about-bottom-section .small-line {
  margin-top: 2rem;
  width: 3rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.concept-section {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.concept-section .image-section img {
  width: 100%;
}

.concept-section .text-section {
  background-color: #1a1a1a;
  padding: 5rem 4rem;
}

.concept-section .text-section h3 {
  color: rgba(245, 240, 232, 0.9);
  font-family: Playfair;
  font-size: 1.875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 3.04688rem;
}

.concept-section .text-section .small-line {
  margin: 1.5rem 0;
  width: 4rem;
  height: 0.0625rem;
  background-color: #c8a96e99;
}

.concept-section .heading-text {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4rem;
  letter-spacing: 0.02188rem;
  width: 100%;
  max-width: 23rem;
}

.services-container {
  padding: 3rem;
  background-color: #0a0a0a;
}

.services-container .service-item {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

.service-item .number {
  color: rgba(160, 157, 150, 0.4);
  font-family: Playfair;
  font-size: 3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3rem;
  letter-spacing: 0.01463rem;
}

.service-item .main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-item .main-section h2 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.service-item .main-section .body-text {
  color: #a09d96;
  font-size: 0.875rem;
  line-height: 1.4rem;
  width: 100%;
  max-width: 30rem;
}

.service-item .main-section a {
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.04375rem;
}

.service-item .detail-text {
  color: rgba(160, 157, 150, 0.6);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42188rem;
  width: 100%;
  max-width: 14rem;
}

.service-item img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
}

.service-item.highlighted {
  background: linear-gradient(
    90deg,
    rgba(200, 169, 110, 0.04) 0%,
    rgba(200, 169, 110, 0) 100%
  );
}

.service-item.highlighted .number {
  color: #c8a96e;
}

.how-we-work-section {
  padding: 5rem 3rem;
  background-color: #0a0a0a;
}

.how-we-work-section .top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.how-we-work-section .top-section .method {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.2625rem;
  text-transform: uppercase;
}

.how-we-work-section .top-section h2 {
  margin-top: 1.25rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.00294rem;
}

.how-we-work-section .top-section .right-side-text {
  color: #a09d96;
  text-align: right;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: -0.001rem;
  width: 100%;
  max-width: 24rem;
}

.how-we-work-section .how-we-work-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.how-we-work-section .how-we-work-item {
  padding: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(42, 42, 42, 0.5);
  background: #111;
  position: relative;
}

.how-we-work-section .how-we-work-item .number-container {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid rgba(200, 169, 110, 0.4);
}

.how-we-work-item .number {
  color: #c8a96e;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.how-we-work-item h3 {
  margin-top: 1.25rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 2.25rem;
  position: relative;
  z-index: 2;
}

.how-we-work-item .body-text {
  margin-top: 1.25rem;
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  position: relative;
  z-index: 2;
}

.how-we-work-item .phase-container {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-top: 1.25rem;
}

.how-we-work-item .phase-container .phase-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: #c8a96e;
}

.how-we-work-item .phase-container .phase-text {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}

.how-we-work-item .item-number {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(200, 169, 110, 0.15);
  font-family: Playfair;
  font-size: 10rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03906rem;
  background-color: transparent;
  position: absolute;
  top: -1rem;
  right: 1rem;
  z-index: 1;
}

.services-list {
  padding: 2.5rem 0;
  border-top: 1px solid rgba(42, 42, 42, 0.6);
  border-bottom: 1px solid rgba(42, 42, 42, 0.6);
  background: #141414;
}

.services-list h2 {
  font-family: Playfair;
  font-size: 3rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.00294rem;
  color: #c8a96e;
  text-align: center;
}

.services-list h2 span {
  color: rgba(245, 240, 232, 0.4);
}

.our-distinction-section {
  padding: 8rem 3rem;
  background-color: #0a0a0a;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.our-distinction-section .distinction-text {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.2625rem;
  text-transform: uppercase;
}

.our-distinction-section .distinction-heading {
  margin-top: 2rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 3rem;
  font-weight: 400;
  line-height: 3.75rem;
}

.our-distinction-section .distinction-heading span {
  display: block;
}

.our-distinction-section .small-line {
  margin-top: 2rem;
  width: 3rem;
  height: 0.0625rem;
  background: rgba(200, 169, 110, 0.5);
}

.our-distinction-section .body-text {
  margin-top: 2rem;
  color: #a09d96;
  line-height: 1.625rem;
}

.our-distinction-section .meet-team {
  display: block;
  margin-top: 2rem;
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.04375rem;
}

.our-distinction-section .middle {
  padding: 0 3rem;
  border-right: 1px solid rgba(42, 42, 42, 0.4);
  border-left: 1px solid rgba(42, 42, 42, 0.4);
}

.our-distinction-section .middle h3 {
  color: #a09d96;
  font-family: Playfair;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}

.our-distinction-section .middle .set-apart-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.our-distinction-section .middle .set-apart-list .set-apart-item {
  display: flex;
  gap: 0.75rem;
}

.our-distinction-section .middle .set-apart-item img {
  height: 1rem;
}

.our-distinction-section .middle .set-apart-item .set-apart-text h4 {
  color: #f5f0e8;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.our-distinction-section .middle .set-apart-item .set-apart-text p {
  margin-top: 0.25rem;
  color: #a09d96;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2rem;
  letter-spacing: 0.00144rem;
}

.our-distinction-section .right-side {
  position: relative;
}

.our-distinction-section .right-side img {
  width: 100%;
}

.our-distinction-section .right-side .text-section {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.our-distinction-section .right-side .text-section .featured-text {
  color: rgba(245, 240, 232, 0.6);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.our-distinction-section .right-side .text-section .featured-house {
  color: #f5f0e8;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: 0.00219rem;
  font-family: Playfair;
}

.ready-to-shape-section {
  padding: 10rem 3rem;
  border-top: 1px solid rgba(42, 42, 42, 0.5);
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ready-to-shape-section .begin-text {
  color: #c8a96e;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.2625rem;
  text-transform: uppercase;
}

.ready-to-shape-section .ready-heading {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 6rem;
  font-weight: 400;
  line-height: 5.5rem;
  letter-spacing: -0.15rem;
  color: #f5f0e8;
  font-family: Playfair;
}

.ready-to-shape-section .ready-heading span {
  display: block;
  color: #a09d96;
  text-align: center;
  font-style: italic;
}

.ready-to-shape-section .body-text {
  margin-top: 2.5rem;
  color: #a09d96;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 2rem;
  letter-spacing: -0.00488rem;
  width: 100%;
  max-width: 32rem;
}

.ready-to-shape-section .buttons-container {
  margin-top: 3.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.ready-to-shape-section .book-btn {
  padding: 1rem 2.5rem;
  border-radius: 0.25rem;
  background-color: #c8a96e;
  color: #0a0a0a;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.04375rem;
}

.ready-to-shape-section .view-btn {
  padding: 1rem 2.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(245, 240, 232, 0.3);
  background-color: transparent;
  color: #f5f0e8;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.04375rem;
}

/* Projects page styles */

.projects-hero {
  padding: 6rem 3rem;
  background-color: #0a0a0a;
}

.projects-hero .our-work-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.projects-hero .our-work-container .small-line {
  width: 2rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.projects-hero .our-work-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.225rem;
  text-transform: uppercase;
}

.projects-hero .heading-top {
  margin-top: 2rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 7rem;
  font-weight: 400;
  line-height: 6.3rem;
  letter-spacing: -0.175rem;
}

.projects-hero .heading-bottom {
  top: 0.5rem;
  color: #c8a96e;
  font-family: Playfair;
  font-size: 5rem;
  font-style: italic;
  font-weight: 400;
}

.featured-project {
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-obsidian.png");
  height: 44rem;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  margin-top: 6rem;
  border-radius: 1.25rem;
}

.featured-project .featured-container {
  padding: 0.5rem 1rem;
  border-radius: 624.9375rem;
  border: 1px solid rgba(200, 169, 110, 0.3);
  background: rgba(200, 169, 110, 0.1);
  backdrop-filter: blur(2px);
  width: fit-content;
}

.featured-project .featured-container .featured-text {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.featured-project .type-container {
  padding: 0.25rem 0.75rem;
  border-radius: 624.9375rem;
  border: 1px solid rgba(200, 169, 110, 0.5);
  text-transform: uppercase;
  width: fit-content;
}

.featured-project .type-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.075rem;
}

.featured-project h2 {
  margin-top: 1rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 4.6875rem;
}

.featured-project .info {
  margin-top: 1rem;
  display: flex;
  gap: 3rem;
}

.featured-project .location {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
  padding-right: 3rem;
  border-right: 1px solid #2a2a2a;
}

.featured-project .location i {
  color: #c8a96e;
}

.featured-project .year {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
}

.projects-grid {
  padding: 2rem 3rem;
  background-color: #0a0a0a;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 35rem 27rem 32.5rem;
  grid-template-areas: "aura aura echo" "marina forge campus" "horizon casa casa";
  gap: 1.5rem;
}

.project-grid-item {
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.625rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.project-grid-item.aura {
  grid-area: aura;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-aura.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.echo {
  grid-area: echo;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-echo.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.marina {
  grid-area: marina;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-marina.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.forge {
  grid-area: forge;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-glass.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.campus {
  grid-area: campus;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-campus.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.horizon {
  grid-area: horizon;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-horizon.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item.casa {
  grid-area: casa;
  background:
    linear-gradient(
      180deg,
      rgba(10, 17, 24, 0.6) 0%,
      rgba(10, 17, 24, 0.4) 50%,
      #0a1118 100%
    ),
    url("../images/project-casa.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.project-grid-item .type-container {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.project-grid-item h2 {
  margin-top: 1rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2.5rem;
}

.project-grid-item .info {
  margin-top: 1rem;
  display: flex;
  gap: 3rem;
}

.project-grid-item .location {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
  padding-right: 3rem;
  border-right: 1px solid #2a2a2a;
}

.project-grid-item .location i {
  color: #c8a96e;
}

.project-grid-item .year {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
}

.collaboration-section {
  padding: 10rem 3rem;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.collaboration-section .start-text-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.collaboration-section .start-text-container .small-line {
  width: 2rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.collaboration-section .start-text-container p {
  color: #c8a96e;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.225rem;
  text-transform: uppercase;
}

.collaboration-section h2 {
  margin-top: 2rem;
  color: #f5f0e8;
  text-align: center;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 4.7rem;
  font-family: Playfair;
}

.collaboration-section .body-text {
  margin-top: 2rem;
  color: #a09d96;
  text-align: center;
  font-family: Playfair;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2.4rem;
}

.collaboration-section .buttons-container {
  margin-top: 3.5rem;
  display: flex;
  gap: 1rem;
}

.collaboration-section .buttons-container .start-project-btn {
  padding: 1rem 2.5rem;
  gap: 0.75rem;
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
  background-color: #c8a96e;
  color: #0a0a0a;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.13125rem;
  text-transform: uppercase;
}

.collaboration-section .buttons-container .view-process-btn {
  padding: 1rem 2.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(245, 240, 232, 0.2);
  background-color: transparent;
  color: rgba(245, 240, 232, 0.7);
  text-align: center;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 142.857% */
  letter-spacing: 0.13125rem;
  text-transform: uppercase;
}

/* Team page styles */

.team-hero {
  padding: 5rem 3rem;
  background-color: #0a0a0a;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5rem;
  border-bottom: 0.0625rem solid #c8a96e32;
}

.team-hero .our-work-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.team-hero .our-work-container .small-line {
  width: 2rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.team-hero .our-work-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.225rem;
  text-transform: uppercase;
}

.team-hero .heading-top {
  margin-top: 2rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 5.225rem;
  letter-spacing: -0.1375rem;
}

.team-hero .heading-creative {
  color: #a09d96;
  font-family: Playfair;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 5.225rem;
  letter-spacing: -0.1375rem;
}

.team-hero .right-side {
  width: 100%;
  max-width: 20rem;
  padding-right: 1.5rem;
  border-right: 2px solid #c8a96e;
}

.team-hero .right-side p {
  color: rgba(245, 240, 232, 0.6);
  text-align: right;
  font-family: Playfair;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2.03125rem;
  letter-spacing: 0.00125rem;
}

.founding-partners-section {
  padding: 7rem 3rem;
  background-color: #0a0a0a;
}

.founding-partners-section .heading-container,
.senior-studio-section .heading-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.founding-partners-section .heading-container h3,
.senior-studio-section .heading-container h3 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2.5rem;
}

.founding-partners-section
  .heading-container
  .long-line
  .senior-studio-section
  .heading-container
  .long-line {
  flex: 1;
  height: 0.0625rem;
  background-color: #c8a96e32;
}

.founding-partners-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.founding-partner-item {
  padding: 1rem;
  position: relative;
}

.founding-partner-item img {
  width: 100%;
  border-radius: 0.625rem;
}

.founding-partner-item .small-line {
  width: 2rem;
  height: 0.125rem;
  background-color: #c8a96e;
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}

.founding-partner-item h3 {
  margin-top: 4rem;
  color: #c8a96e;
  font-family: Playfair;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}

.founding-partner-item .title {
  margin-top: 0.25rem;
  color: #c8a96eb2;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

.founding-partner-item .bio {
  margin-top: 1rem;
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #c8a96e33;
}

.founding-partner-item .quote {
  margin-top: 0.75rem;
  color: #f5f0e880;
  font-family: Playfair;
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4rem;
}

.founding-partner-item.highlight {
  margin-top: 3rem;
}

.senior-studio-section {
  padding: 7rem 3rem;
  background-color: #0a0a0a;
}

.senior-studio-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.senior-grid-item img {
  width: 100%;
  border-radius: 0.625rem;
}

.senior-grid-item h4 {
  margin-top: 1.25rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}

.senior-grid-item p {
  margin-top: 0.25rem;
  color: #a09d96;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.senior-grid-item.highlight {
  margin-top: 2rem;
}

.careers-section {
  background-color: #1a1a1a;
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  place-items: center;
}

.careers-section .left-side {
  padding: 3rem;
}

.careers-section .studio-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.careers-section .studio-container .small-line {
  width: 1.5rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.careers-section .studio-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
}

.careers-section h3 {
  margin-top: 2rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2.8rem;
}

.careers-section h3 span {
  color: #a09d96;
  font-style: italic;
}

.careers-section .body-text {
  margin-top: 2rem;
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4rem;
}

.careers-section .join-team-btn {
  margin-top: 2rem;
  display: block;
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.04375rem;
}

.careers-section .right-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.careers-section .right-side img {
  width: 100%;
}

.open-positions-section {
  padding: 7rem 3rem;
  background-color: #0a0a0a;
  border-top: 1px solid rgba(42, 42, 42, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.open-positions-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.open-positions-container .small-line {
  width: 3rem;
  height: 0.0625rem;
  background: rgba(200, 169, 110, 0.5);
}

.open-positions-container p {
  color: #c8a96e;
  text-align: center;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.225rem;
  text-transform: uppercase;
}

.open-positions-section h2 {
  color: #f5f0e8;
  text-align: center;
  font-family: Playfair;
  font-weight: 400;
  line-height: 2.5rem;
  margin-top: 1rem;
}

.open-positions-sections h2 span {
  color: #a09d96;
  font-style: italic;
}

.talented-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.talented-item {
  padding: 2rem 2rem 3.25rem 2rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(42, 42, 42, 0.6);
  background: #1a1a1a;
}

.talented-item .top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.talented-item .top-section img {
  width: 2.5rem;
  height: 2.5rem;
}

.talented-item .top-section .hours-container {
  padding: 0.25rem 0.75rem;
  border-radius: 624.9375rem;
  border: 1px solid rgba(200, 169, 110, 0.2);
  background: rgba(200, 169, 110, 0.1);
}

.talented-item .top-section .hours-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.0375rem;
}

.talented-item .main-section {
  margin-top: 1.25rem;
}

.talented-item h3 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}

.talented-item .location-container i {
  margin-top: 0.75rem;
  margin-right: 0.5rem;
  color: rgba(200, 169, 110, 0.6);
}

.talented-item .location-container {
  color: #a09d96;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
}

.talented-item .main-info {
  margin-top: 1.25rem;
  color: #a09d96;
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.00088rem;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(200, 169, 110, 0.3);
}

.talented-item .bottom-section {
  margin-top: 2rem;
}

.talented-item .bottom-section p {
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.talented-item.highlighted {
  border-radius: 0.375rem;
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-top: 6px solid rgba(200, 169, 110, 0.2);
  background: #1a1a1a;
}

/* Contact page styles */

.contact-hero {
  padding: 5rem 3rem;
  background-color: #0a0a0a;
}

.contact-hero .our-work-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.contact-hero .our-work-container .small-line {
  width: 2rem;
  height: 0.0625rem;
  background-color: #c8a96e;
}

.contact-hero .our-work-container p {
  color: #c8a96e;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.225rem;
  text-transform: uppercase;
}

.contact-hero .heading-top {
  margin-top: 1.5rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 5.5rem;
  font-weight: 500;
  line-height: 5rem;
  letter-spacing: -0.1375rem;
  width: 100%;
  max-width: 32rem;
}

.contact-hero .heading-top span {
  color: #c8a96e;
  font-weight: 400;
  font-style: italic;
}

.contact-hero .heading-small {
  margin-top: 1.5rem;
  color: #a09d96;
  font-size: 1.125rem;
  font-weight: 300;
  lighting-color: 1.8rem;
}

.conversation-section {
  padding: 5rem 3rem;
  border-top: 1px solid rgba(42, 42, 42, 0.5);
  background: #0a0a0a;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
}

.conversation-section .form-section h3 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.875rem;
  font-weight: 400;
}

.conversation-section .contact-form {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.conversation-section .contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.conversation-section label {
  color: #a09d96;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.1125rem;
  text-transform: uppercase;
}

.conversation-section .form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.conversation-section .form-group {
  width: 100%;
}

.conversation-section input {
  display: block;
  flex: 1;
  height: 3rem;
  border-radius: 0.25rem;
  border: 1px solid #333;
  background: #111;
  padding: 1rem;
}

.conversation-section textarea {
  height: 10rem;
  border-radius: 0.25rem;
  border: 1px solid #333;
  background: #111;
  padding: 1rem;
  font-family: inherit;
  resize: none;
}

.conversation-section .send-message-btn {
  padding: 1rem;
  border-radius: 0.25rem;
  background: #c8a96e;
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: 0.035rem;
}

.conversation-section .contact-details-section {
  display: flex;
  flex-direction: column;
}

.conversation-section .office-item {
  display: flex;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 1px solid #c8a96e40;
}

.conversation-section .contact-details-section .office-item .fa-location-dot {
  color: #c8a96e;
  font-size: 1.125rem;
}

.conversation-section .contact-details-section .office-info h4 {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.conversation-section .office-info p {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
}

.conversation-section .office-info .office-contact {
  margin-top: 0.75rem;
}

.conversation-section .office-info .contact {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.conversation-section .contact i {
  color: rgba(200, 169, 110, 0.6);
}

.faq-section .heading-top {
  font-size: 2.25rem;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-question {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.00125rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.faq-question span:first-child {
  font-size: 1.2rem;
  font-weight: 600;
}

.faq-icon {
  font-size: 2rem;
  font-weight: 300;
  width: 30px;
  text-align: center;
  transition: transform 0.3s;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-answer-content {
  padding: 0 0 1.5rem;
}

.faq-answer-content p {
  color: #a09d96;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4rem;
}

.faq-item.active .faq-answer {
  max-height: 400px;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.contact-quote-section {
  padding: 6rem 3rem;
  background: #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.contact-quote-section h2 {
  width: 100%;
  max-width: 28.75rem;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 2.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 2.8rem;
}

.contact-quote-section .buttons-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-quote-section .buttons-container a {
  width: 100%;
  max-width: 20rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02188rem;
}

.contact-quote-section .buttons-container img {
  height: 0.875rem;
}

.contact-quote-section .buttons-container .book-call-btn {
  border-radius: 0.25rem;
  background: #c8a96e;
  color: #0a0a0a;
}

.contact-quote-section .buttons-container .download-btn {
  border-radius: 0.25rem;
  border: 1px solid rgba(245, 240, 232, 0.3);
  color: #f5f0e8;
}

/* header styles */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  border-bottom: 1px solid rgba(42, 42, 42, 0.5);
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(6px);
}

.logo {
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.25rem;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
}

nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

nav a {
  color: rgba(245, 240, 232, 0.8);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
}

header .get-in-touch-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(200, 169, 110, 0.5);
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.00344rem;
}

/* Footer styles */

footer {
  padding: 5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(42, 42, 42, 0.5);
  background: #0a0a0a;
  width: 100%;
}

footer .sm-container {
  display: flex;
  gap: 1.5rem;
  width: 1rem;
  color: rgba(245, 240, 232, 0.6);
  margin-right: 5rem;
}

/* ==================================================
   HOME PAGE RESPONSIVE STYLES
   Add these rules at the bottom of style.css
================================================== */

/* Prevent large media from overflowing */
.home-hero-section img,
.selected-work-section img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Large laptops and smaller desktops */
@media screen and (max-width: 1200px) {
  .home-hero-section h1 {
    font-size: 5.75rem;
    line-height: 1;
  }

  .architecture-section .left-side h1 {
    font-size: 3.75rem;
    line-height: 1.15;
  }

  .testimonial-section h2 {
    font-size: 2.5rem;
    line-height: 1.3;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  .home-hero-section {
    grid-template-columns: 1fr;
    padding: 4rem 2rem;
    gap: 3rem;
    place-items: initial;
  }

  .home-hero-section .text-section {
    width: 100%;
    max-width: 48rem;
  }

  .home-hero-section h1 {
    font-size: clamp(3.75rem, 9vw, 5.5rem);
    line-height: 1;
  }

  .home-hero-section .hero-text {
    max-width: 38rem;
    font-size: 1.25rem;
    line-height: 1.8rem;
  }

  .home-hero-section img {
    width: 100%;
    max-height: 42rem;
    object-fit: cover;
    object-position: center;
  }

  .stats-section {
    padding: 3.5rem 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .stats-section .stat {
    padding: 2rem;
    text-align: center;
  }

  .stats-section .stat:not(:first-child) {
    padding-left: 2rem;
    border-left: none;
  }

  .stats-section .stat:nth-child(even) {
    border-left: 1px solid rgba(245, 240, 232, 0.12);
  }

  .stats-section .stat:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 240, 232, 0.12);
  }

  .stats-section .stat .figure {
    font-size: 3.25rem;
  }

  .selected-work-section {
    padding: 5rem 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .selected-work-section .selected-item:last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc(50% - 1rem);
    justify-self: center;
  }

  .selected-work-section .selected-item img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .architecture-section {
    padding: 5rem 2rem;
    grid-template-columns: 1fr;
    place-items: initial;
    gap: 2.5rem;
  }

  .architecture-section .left-side h1 {
    max-width: 40rem;
    font-size: clamp(3rem, 8vw, 4.5rem);
    line-height: 1.15;
  }

  .architecture-section .right-side {
    max-width: 42rem;
  }

  .testimonial-section {
    padding: 6rem 2rem;
  }

  .testimonial-section .testimonial-container {
    width: 100%;
    max-width: 55rem;
  }

  .testimonial-section h2 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.35;
  }

  .testimonial-section .quotes-icon {
    width: 3rem;
    height: auto;
  }
}

/* Mobile devices */
@media screen and (max-width: 600px) {
  .home-hero-section {
    padding: 3.5rem 1.25rem;
    gap: 2.5rem;
  }

  .home-hero-section h1 {
    font-size: clamp(3rem, 15vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.08rem;
    overflow-wrap: break-word;
  }

  .home-hero-section .hero-text {
    margin-top: 1.75rem;
    font-size: 1.1rem;
    line-height: 1.65rem;
  }

  .home-hero-section .buttons-container {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-section .buttons-container a {
    width: 100%;
    text-align: center;
  }

  .home-hero-section .buttons-container .explore-btn,
  .home-hero-section .buttons-container .our-story-btn {
    padding: 0.9rem 1.25rem;
  }

  .home-hero-section img {
    min-height: 24rem;
    max-height: 34rem;
    object-fit: cover;
  }

  .stats-section {
    padding: 2rem 1.25rem;
  }

  .stats-section .stat {
    padding: 1.75rem 0.75rem;
  }

  .stats-section .stat:not(:first-child) {
    padding-left: 0.75rem;
  }

  .stats-section .stat .figure {
    font-size: 2.75rem;
  }

  .stats-section .stat .description {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .selected-work-section {
    padding: 4rem 1.25rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .selected-work-section .selected-item:last-child {
    grid-column: auto;
    width: 100%;
    max-width: none;
  }

  .selected-work-section .selected-item .bottom-section {
    padding: 1.25rem 0 2.5rem;
  }

  .selected-work-section .selected-item .info {
    gap: 1rem;
    align-items: flex-start;
  }

  .selected-work-section .selected-item .info h3 {
    font-size: 1.35rem;
    line-height: 1.7rem;
  }

  .selected-work-section .selected-item .features-container {
    flex-wrap: wrap;
  }

  .architecture-section {
    padding: 4rem 1.25rem;
  }

  .architecture-section .left-side h1 {
    font-size: clamp(2.75rem, 13vw, 3.75rem);
    line-height: 1.15;
  }
}

/* ==================================================
   ABOUT PAGE RESPONSIVE STYLES
================================================== */

/* Make all About-page images safe */
.about-hero-section img,
.what-we-stand-for-section img,
.about-bottom-section img {
  display: block;
  max-width: 100%;
}

/* Smaller desktops and laptops */
@media screen and (max-width: 1200px) {
  .about-hero-section h1 {
    font-size: 4.75rem;
    line-height: 1.05;
  }

  .about-journey-section .journey-item {
    grid-template-columns: 18rem minmax(0, 1fr);
  }

  .what-we-stand-for-section .what-we-stand-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .excellence-journey-section .excellence-grid {
    gap: 1rem;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  .about-hero-section {
    padding: 4rem 2rem;
  }

  .about-hero-section h1 {
    max-width: 45rem;
    font-size: clamp(3.75rem, 9vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.08rem;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 3.5rem;
    place-items: initial;
  }

  .about-hero-grid .hero-image {
    width: 100%;
    max-height: 42rem;
    object-fit: cover;
    object-position: center;
  }

  .about-hero-grid .text-section {
    max-width: 45rem;
    margin-bottom: 0;
  }

  .about-hero-grid .hero-text {
    font-size: 1.35rem;
    line-height: 2.1rem;
  }

  .about-journey-section {
    padding: 4rem 2rem;
  }

  .about-journey-section .journey-item {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 2rem;
    padding: 3rem 0;
  }

  .about-journey-section .journey-item:first-child {
    padding-top: 0;
  }

  .about-journey-section .journey-item .number-section .number {
    font-size: 5.5rem;
  }

  .about-journey-section .journey-item .number-section h3 {
    font-size: 1.9rem;
    line-height: 2.35rem;
  }

  .about-journey-section .medium-line {
    grid-column: 1 / -1;
  }

  .what-we-stand-for-section {
    padding: 5rem 2rem;
  }

  .what-we-stand-for-section .what-we-stand-items {
    margin-top: 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .excellence-journey-section {
    padding: 6rem 2rem;
  }

  .excellence-journey-section h2 {
    margin-top: 0.75rem;
    font-size: 2.75rem;
    line-height: 1.2;
  }

  .excellence-journey-section .excellence-grid {
    margin-top: 4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: none;
    position: relative;
  }

  .excellence-grid .excellence-item {
    position: relative;
    align-items: flex-start;
    margin-top: 0;
    padding: 0 1.5rem 3rem 2rem;
    border-left: 1px solid rgba(200, 169, 110, 0.38);
  }

  .excellence-grid .excellence-item:nth-child(even) {
    border-left: none;
  }

  .excellence-grid .excellence-item:nth-child(odd) {
    border-right: 1px solid rgba(200, 169, 110, 0.38);
  }

  .yellow-circle,
  .filled-yellow-circle {
    position: absolute;
    top: 0;
    left: -0.55rem;
    margin-top: 0;
  }

  .excellence-grid .excellence-item:nth-child(even) .yellow-circle,
  .excellence-grid .excellence-item:nth-child(even) .filled-yellow-circle {
    left: auto;
    right: -0.55rem;
  }

  .excellence-grid .year,
  .excellence-grid .event,
  .excellence-grid .details {
    text-align: left;
  }

  .excellence-grid .year {
    margin-top: 0;
  }

  .about-bottom-section {
    padding: 10rem 2rem;
    background-position: center;
  }

  .about-bottom-section h2 {
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  .about-hero-section {
    padding: 3.5rem 1.25rem;
  }

  .about-hero-section .page-text {
    letter-spacing: 0.2rem;
  }

  .about-hero-section h1 {
    margin-top: 1rem;
    font-size: clamp(3rem, 15vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06rem;
    overflow-wrap: break-word;
  }

  .about-hero-section h1 span {
    margin-top: 0.2rem;
  }

  .about-hero-grid {
    margin-top: 2.75rem;
    gap: 2rem;
  }

  .about-hero-grid .hero-image {
    min-height: 24rem;
    max-height: 34rem;
  }

  .about-hero-grid .hero-text {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.85rem;
  }

  .about-hero-grid .body-text {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.65rem;
  }

  .about-hero-grid .architects {
    align-items: flex-start;
  }

  .about-hero-grid .architects .architects-avatars {
    width: auto;
    max-width: 8rem;
    height: 2.25rem;
    object-fit: contain;
  }

  .about-journey-section {
    padding: 3.5rem 1.25rem;
  }

  .about-journey-section .journey-item {
    display: block;
    padding: 3rem 0;
  }

  .about-journey-section .journey-item:first-child {
    padding-top: 0;
  }

  .about-journey-section .journey-item .number-section {
    margin-bottom: 2rem;
  }

  .about-journey-section .journey-item .number-section .number {
    font-size: 4.75rem;
    line-height: 1;
    letter-spacing: -0.2rem;
  }

  .about-journey-section .journey-item .number-section h3 {
    margin-top: 0.75rem;
    font-size: 1.75rem;
    line-height: 2.15rem;
  }

  .about-journey-section .text-section p {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.75rem;
  }

  .about-journey-section .medium-line {
    margin-top: 2.5rem;
    width: 5rem;
  }

  .what-we-stand-for-section {
    padding: 4rem 1.25rem;
  }

  .what-we-stand-for-section .heading-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .what-we-stand-for-section .heading-container h2 {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  .what-we-stand-for-section .heading-container .core-values {
    letter-spacing: 0.2rem;
  }

  .what-we-stand-for-section .what-we-stand-items {
    margin-top: 3rem;
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .what-we-stand-for-section .what-we-stand-item {
    padding-bottom: 2.75rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.1);
  }

  .what-we-stand-for-section .what-we-stand-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .what-we-stand-for-section .what-we-stand-item h4 {
    margin-top: 1rem;
  }

  .excellence-journey-section {
    padding: 5rem 1.25rem;
  }

  .excellence-journey-section h2 {
    font-size: 2.25rem;
  }

  .excellence-journey-section .excellence-grid {
    margin-top: 3.5rem;
    grid-template-columns: 1fr;
  }

  .excellence-grid .excellence-item,
  .excellence-grid .excellence-item:nth-child(even),
  .excellence-grid .excellence-item:nth-child(odd) {
    padding: 0 0 3rem 2rem;
    border-right: none;
    border-left: 1px solid rgba(200, 169, 110, 0.38);
  }

  .excellence-grid .excellence-item:last-child {
    padding-bottom: 0;
  }

  .yellow-circle,
  .filled-yellow-circle,
  .excellence-grid .excellence-item:nth-child(even) .yellow-circle,
  .excellence-grid .excellence-item:nth-child(even) .filled-yellow-circle {
    top: 0;
    right: auto;
    left: -0.55rem;
  }

  .excellence-grid .year {
    font-size: 1.2rem;
  }

  .excellence-grid .event {
    font-size: 0.95rem;
  }

  .excellence-grid .details {
    max-width: 20rem;
    font-size: 0.8rem;
    line-height: 1.35rem;
  }

  .about-bottom-section {
    min-height: 32rem;
    padding: 7rem 1.25rem;
    justify-content: center;
    background-position: center;
  }

  .about-bottom-section h2 {
    font-size: 1.75rem;
    line-height: 1.4;
  }

  .about-bottom-section .small-line {
    margin-top: 1.25rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .about-hero-section h1 {
    font-size: 2.7rem;
  }

  .about-hero-grid .architects {
    flex-direction: column;
  }

  .about-journey-section .journey-item .number-section .number {
    font-size: 4.25rem;
  }

  .what-we-stand-for-section .heading-container h2 {
    font-size: 1.8rem;
  }

  .about-bottom-section h2 {
    font-size: 1.55rem;
  }
}

/* ==================================================
   CONTACT PAGE RESPONSIVE STYLES
================================================== */

/* General contact page safeguards */
.contact-hero,
.conversation-section,
.contact-quote-section {
  width: 100%;
}

.conversation-section input,
.conversation-section textarea,
.conversation-section button {
  width: 100%;
  min-width: 0;
  font: inherit;
}

.contact-quote-section img {
  display: block;
  max-width: 100%;
}

/* Smaller desktops */
@media screen and (max-width: 1200px) {
  .contact-hero .heading-top {
    font-size: 4.75rem;
    line-height: 1;
  }

  .conversation-section {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr);
    gap: 2.5rem;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  .contact-hero {
    padding: 4rem 2rem;
  }

  .contact-hero .heading-top {
    max-width: 44rem;
    font-size: clamp(3.75rem, 9vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.08rem;
  }

  .contact-hero .heading-small {
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .conversation-section {
    padding: 4rem 2rem;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .conversation-section .form-section,
  .conversation-section .contact-details-section {
    width: 100%;
    max-width: 48rem;
  }

  .conversation-section .contact-form {
    margin-top: 3rem;
  }

  .conversation-section .contact-details-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
  }

  .conversation-section .office-item {
    min-width: 0;
  }

  .conversation-section .office-item:last-child {
    grid-column: 1 / -1;
  }

  .conversation-section .office-info {
    min-width: 0;
  }

  .conversation-section .office-info p,
  .conversation-section .office-info .contact {
    overflow-wrap: anywhere;
  }

  .faq-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .faq-section .heading-top {
    max-width: none;
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .faq-container {
    margin-top: 2rem;
  }

  .faq-question {
    gap: 2rem;
  }

  .faq-question span:first-child {
    line-height: 1.6rem;
  }

  .contact-quote-section {
    padding: 5rem 2rem;
    align-items: flex-start;
  }

  .contact-quote-section h2 {
    max-width: 34rem;
  }

  .contact-quote-section .buttons-container {
    width: 100%;
    max-width: 22rem;
  }

  .contact-quote-section .buttons-container a {
    max-width: none;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  .contact-hero {
    padding: 3.5rem 1.25rem;
  }

  .contact-hero .our-work-container {
    gap: 0.6rem;
  }

  .contact-hero .our-work-container p {
    letter-spacing: 0.18rem;
  }

  .contact-hero .heading-top {
    margin-top: 1.25rem;
    font-size: clamp(3rem, 15vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06rem;
    overflow-wrap: break-word;
  }

  .contact-hero .heading-small {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.55rem;
  }

  .conversation-section {
    padding: 3.5rem 1.25rem;
    gap: 3rem;
  }

  .conversation-section .form-section h3 {
    font-size: 1.7rem;
    line-height: 2rem;
  }

  .conversation-section .contact-form {
    margin-top: 2.5rem;
    gap: 1.5rem;
  }

  .conversation-section .form-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .conversation-section input {
    height: 3.25rem;
    padding: 0.85rem 1rem;
  }

  .conversation-section textarea {
    min-height: 11rem;
    height: auto;
    padding: 1rem;
    line-height: 1.5rem;
  }

  .conversation-section .send-message-btn {
    min-height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }

  .conversation-section .contact-details-section {
    display: flex;
    flex-direction: column;
  }

  .conversation-section .office-item {
    gap: 1rem;
    padding: 1.75rem 0;
  }

  .conversation-section .contact-details-section .office-item .fa-location-dot {
    flex: 0 0 auto;
    margin-top: 0.2rem;
  }

  .conversation-section .contact-details-section .office-info h4 {
    margin-bottom: 1rem;
  }

  .conversation-section .office-info .contact {
    align-items: flex-start;
    line-height: 1.4rem;
  }

  .conversation-section .office-info .contact i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
  }

  .faq-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .faq-section .heading-top {
    font-size: 2.1rem;
    line-height: 1.2;
  }

  .faq-question {
    padding: 1.25rem 0;
    gap: 1rem;
    align-items: flex-start;
  }

  .faq-question span:first-child {
    font-size: 1.05rem;
    line-height: 1.55rem;
    font-weight: 500;
  }

  .faq-icon {
    flex: 0 0 2rem;
    width: 2rem;
    font-size: 1.75rem;
    line-height: 1.5rem;
  }

  .faq-answer-content {
    padding-right: 2rem;
  }

  .faq-answer-content p {
    font-size: 0.85rem;
    line-height: 1.5rem;
  }

  .contact-quote-section {
    padding: 4rem 1.25rem;
    flex-direction: column;
    gap: 2.5rem;
  }

  .contact-quote-section h2 {
    max-width: none;
    font-size: 1.9rem;
    line-height: 1.4;
  }

  .contact-quote-section .buttons-container {
    width: 100%;
    max-width: none;
  }

  .contact-quote-section .buttons-container a {
    width: 100%;
    max-width: none;
    min-height: 3.5rem;
    padding: 1rem 1.25rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .contact-hero .heading-top {
    font-size: 2.7rem;
  }

  .conversation-section {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .conversation-section .office-item {
    gap: 0.75rem;
  }

  .faq-question span:first-child {
    font-size: 1rem;
  }

  .contact-quote-section h2 {
    font-size: 1.65rem;
  }

  .contact-quote-section .buttons-container a {
    font-size: 0.8rem;
  }
}

/* ==================================================
   PROJECTS PAGE RESPONSIVE STYLES
================================================== */

/* General safeguards */
.projects-hero,
.projects-grid,
.stats-section.projects,
.collaboration-section {
  width: 100%;
}

.featured-project,
.project-grid-item {
  min-width: 0;
  background-position: center;
}

.featured-project .left-side,
.project-grid-item .left-side,
.featured-project .bottom-section,
.project-grid-item .bottom-section {
  min-width: 0;
}

/* Smaller desktop screens */
@media screen and (max-width: 1200px) {
  .projects-hero .heading-top {
    font-size: 5.75rem;
    line-height: 1;
  }

  .projects-hero .heading-bottom {
    font-size: 4.25rem;
    line-height: 1.1;
  }

  .projects-grid {
    grid-template-rows: 32rem 26rem 30rem;
  }

  .project-grid-item {
    padding: 2rem;
  }

  .project-grid-item h2 {
    font-size: 2rem;
  }

  .project-grid-item .info {
    gap: 1.5rem;
  }

  .project-grid-item .location {
    padding-right: 1.5rem;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  .projects-hero {
    padding: 5rem 2rem;
  }

  .projects-hero .heading-top {
    margin-top: 1.75rem;
    font-size: clamp(4rem, 10vw, 5.75rem);
    line-height: 1;
    letter-spacing: -0.1rem;
  }

  .projects-hero .heading-bottom {
    margin-top: 0.75rem;
    font-size: clamp(3rem, 8vw, 4.25rem);
    line-height: 1.1;
  }

  .featured-project {
    height: 38rem;
    margin-top: 4rem;
    padding: 2rem;
  }

  .featured-project h2 {
    font-size: 3rem;
    line-height: 1.15;
  }

  .projects-grid {
    padding: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "aura aura"
      "echo marina"
      "forge campus"
      "horizon casa";
    gap: 1.5rem;
  }

  .project-grid-item {
    min-height: 28rem;
  }

  .project-grid-item.aura {
    min-height: 34rem;
  }

  .project-grid-item h2 {
    font-size: 1.85rem;
    line-height: 2.2rem;
  }

  .project-grid-item .info {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  .project-grid-item .location {
    padding-right: 1.25rem;
  }

  .stats-section.projects {
    padding: 3.5rem 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-section.projects .stat {
    padding: 2rem;
    text-align: center;
  }

  .stats-section.projects .stat:not(:first-child) {
    padding-left: 2rem;
    border-left: none;
  }

  .stats-section.projects .stat:nth-child(even) {
    border-left: 1px solid rgba(245, 240, 232, 0.12);
  }

  .stats-section.projects .stat:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 240, 232, 0.12);
  }

  .collaboration-section {
    padding: 7rem 2rem;
  }

  .collaboration-section h2 {
    font-size: 3rem;
    line-height: 1.2;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  .projects-hero {
    padding: 3.5rem 1.25rem;
  }

  .projects-hero .our-work-container {
    gap: 0.6rem;
  }

  .projects-hero .our-work-container p {
    letter-spacing: 0.18rem;
  }

  .projects-hero .heading-top {
    font-size: clamp(3.25rem, 15vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.07rem;
    overflow-wrap: break-word;
  }

  .projects-hero .heading-bottom {
    margin-top: 0.75rem;
    font-size: clamp(2.5rem, 12vw, 3.5rem);
    line-height: 1.05;
  }

  .featured-project {
    min-height: 34rem;
    height: auto;
    margin-top: 3rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-position: center;
  }

  .featured-project .featured-container {
    padding: 0.4rem 0.75rem;
  }

  .featured-project .type-container {
    max-width: 100%;
  }

  .featured-project .type-container p {
    line-height: 1.25rem;
  }

  .featured-project h2 {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    line-height: 1.15;
  }

  .featured-project .info {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }

  .featured-project .location {
    padding-right: 1rem;
  }

  .projects-grid {
    padding: 1.25rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "aura"
      "echo"
      "marina"
      "forge"
      "campus"
      "horizon"
      "casa";
    gap: 1rem;
  }

  .project-grid-item,
  .project-grid-item.aura {
    min-height: 29rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
  }

  .project-grid-item h2 {
    margin-top: 0.75rem;
    font-size: 1.8rem;
    line-height: 2.1rem;
  }

  .project-grid-item .type-container p {
    line-height: 1.2rem;
  }

  .project-grid-item .info {
    margin-top: 0.75rem;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .project-grid-item .location {
    padding-right: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
  }

  .project-grid-item .year {
    font-size: 0.8rem;
  }

  .stats-section.projects {
    padding: 2rem 1.25rem;
  }

  .stats-section.projects .stat {
    padding: 1.75rem 0.75rem;
  }

  .stats-section.projects .stat:not(:first-child) {
    padding-left: 0.75rem;
  }

  .stats-section.projects .stat .figure {
    font-size: 2.75rem;
  }

  .stats-section.projects .stat .description {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .collaboration-section {
    padding: 5rem 1.25rem;
  }

  .collaboration-section .start-text-container {
    width: 100%;
    justify-content: center;
  }

  .collaboration-section .start-text-container p {
    font-size: 0.7rem;
    letter-spacing: 0.15rem;
    line-height: 1.1rem;
  }

  .collaboration-section h2 {
    margin-top: 1.5rem;
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .collaboration-section .body-text {
    margin-top: 1.25rem;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .collaboration-section .buttons-container {
    width: 100%;
    margin-top: 2.5rem;
    flex-direction: column;
    align-items: stretch;
  }

  .collaboration-section .buttons-container a {
    width: 100%;
    min-height: 3.5rem;
    justify-content: center;
  }

  .collaboration-section .buttons-container .start-project-btn,
  .collaboration-section .buttons-container .view-process-btn {
    padding: 1rem 1.25rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .projects-hero .heading-top {
    font-size: 2.9rem;
  }

  .projects-hero .heading-bottom {
    font-size: 2.3rem;
  }

  .featured-project {
    min-height: 31rem;
  }

  .featured-project h2 {
    font-size: 2rem;
  }

  .project-grid-item,
  .project-grid-item.aura {
    min-height: 26rem;
  }

  .project-grid-item h2 {
    font-size: 1.6rem;
  }

  .stats-section.projects {
    grid-template-columns: 1fr;
  }

  .stats-section.projects .stat:nth-child(even) {
    border-left: none;
  }

  .stats-section.projects .stat:nth-child(n + 2) {
    border-top: 1px solid rgba(245, 240, 232, 0.12);
  }

  .collaboration-section h2 {
    font-size: 2.15rem;
  }
}

/* ==================================================
   SERVICES PAGE RESPONSIVE STYLES
================================================== */

/* General safeguards */
.concept-section,
.services-container,
.how-we-work-section,
.services-list,
.our-distinction-section,
.ready-to-shape-section {
  width: 100%;
}

.concept-section img,
.services-container img,
.our-distinction-section img {
  display: block;
  max-width: 100%;
}

.service-item,
.service-item .main-section,
.our-distinction-section > div,
.how-we-work-item {
  min-width: 0;
}

/* Smaller desktop and laptop screens */
@media screen and (max-width: 1200px) {
  .concept-section .text-section {
    padding: 4rem 3rem;
  }

  .services-container .service-item {
    gap: 1.5rem;
  }

  .service-item .detail-text {
    max-width: 12rem;
  }

  .our-distinction-section {
    grid-template-columns: 1fr 1fr;
  }

  .our-distinction-section .right-side {
    grid-column: 1 / -1;
    max-width: 45rem;
    width: 100%;
    justify-self: center;
  }

  .ready-to-shape-section .ready-heading {
    font-size: 5rem;
    line-height: 1;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  /* Services hero */
  .about-hero-section {
    padding: 4rem 2rem;
  }

  .about-hero-section h1 {
    font-size: clamp(3.75rem, 9vw, 5rem);
    line-height: 1;
    letter-spacing: -0.08rem;
  }

  .concept-section {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }

  .concept-section .image-section img {
    width: 100%;
    max-height: 38rem;
    object-fit: cover;
    object-position: center;
  }

  .concept-section .text-section {
    padding: 3.5rem 2.5rem;
  }

  .concept-section .text-section h3 {
    max-width: 38rem;
    font-size: 1.75rem;
    line-height: 1.55;
  }

  .concept-section .heading-text {
    max-width: 34rem;
  }

  /* Services list */
  .services-container {
    padding: 3rem 2rem;
  }

  .services-container .service-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) 7rem;
    gap: 1.5rem;
    align-items: start;
    padding: 2.5rem 0;
  }

  .service-item .number {
    grid-column: 1;
    grid-row: 1;
  }

  .service-item .main-section {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .service-item .detail-text {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    margin-top: 0.5rem;
  }

  .service-item img {
    grid-column: 3;
    grid-row: 1;
    width: 7rem;
    height: 7rem;
  }

  /* How we work */
  .how-we-work-section {
    padding: 5rem 2rem;
  }

  .how-we-work-section .top-section {
    align-items: flex-start;
    gap: 3rem;
  }

  .how-we-work-section .top-section .right-side-text {
    max-width: 22rem;
  }

  .how-we-work-section .how-we-work-grid {
    grid-template-columns: 1fr;
  }

  .how-we-work-section .how-we-work-item {
    padding: 2.25rem;
  }

  /* Services text strip */
  .services-list {
    padding: 2rem;
  }

  .services-list h2 {
    font-size: 2.25rem;
    line-height: 1.5;
  }

  /* Distinction */
  .our-distinction-section {
    padding: 6rem 2rem;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .our-distinction-section .middle {
    padding: 0 0 0 2rem;
    border-right: none;
    border-left: 1px solid rgba(42, 42, 42, 0.4);
  }

  .our-distinction-section .right-side {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  .our-distinction-section .right-side img {
    width: 100%;
    max-height: 38rem;
    object-fit: cover;
    object-position: center;
  }

  /* Final CTA */
  .ready-to-shape-section {
    padding: 8rem 2rem;
  }

  .ready-to-shape-section .ready-heading {
    font-size: clamp(4rem, 10vw, 5.5rem);
    line-height: 1;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  /* Hero */
  .about-hero-section {
    padding: 3.5rem 1.25rem;
  }

  .about-hero-section .page-text {
    letter-spacing: 0.2rem;
  }

  .about-hero-section h1 {
    margin-top: 1rem;
    font-size: clamp(3rem, 15vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06rem;
  }

  .concept-section {
    margin-top: 2.5rem;
  }

  .concept-section .image-section img {
    min-height: 24rem;
    max-height: 32rem;
  }

  .concept-section .text-section {
    padding: 2.5rem 1.5rem;
  }

  .concept-section .text-section h3 {
    font-size: 1.45rem;
    line-height: 1.6;
  }

  .concept-section .heading-text {
    font-size: 0.9rem;
    line-height: 1.55rem;
  }

  /* Service items */
  .services-container {
    padding: 2rem 1.25rem;
  }

  .services-container .service-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 2.5rem 0;
  }

  .service-item .number {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.5rem;
    line-height: 1;
  }

  .service-item .main-section {
    grid-column: 2;
    grid-row: 1;
  }

  .service-item .main-section h2 {
    font-size: 1.75rem;
    line-height: 2.15rem;
  }

  .service-item .main-section .body-text {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.55rem;
  }

  .service-item .main-section a {
    margin-top: 0.25rem;
  }

  .service-item .detail-text {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    padding-left: 4.5rem;
    font-size: 0.8rem;
    line-height: 1.35rem;
  }

  .service-item img {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 14rem;
    margin-top: 0.5rem;
    object-fit: cover;
    border-radius: 0.35rem;
  }

  /* Methodology */
  .how-we-work-section {
    padding: 4rem 1.25rem;
  }

  .how-we-work-section .top-section {
    flex-direction: column;
    gap: 1.5rem;
  }

  .how-we-work-section .top-section h2 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .how-we-work-section .top-section .right-side-text {
    max-width: none;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.6rem;
  }

  .how-we-work-section .how-we-work-grid {
    margin-top: 3rem;
    grid-template-columns: 1fr;
  }

  .how-we-work-section .how-we-work-item {
    padding: 1.75rem;
    overflow: hidden;
  }

  .how-we-work-item .item-number {
    top: 0;
    right: 0.5rem;
    font-size: 7rem;
  }

  .how-we-work-item h3 {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .how-we-work-item .body-text {
    font-size: 0.9rem;
    line-height: 1.55rem;
  }

  /* Services strip */
  .services-list {
    padding: 1.75rem 1.25rem;
  }

  .services-list h2 {
    font-size: 1.65rem;
    line-height: 1.5;
  }

  /* Distinction */
  .our-distinction-section {
    padding: 4.5rem 1.25rem;
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .our-distinction-section .distinction-heading {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .our-distinction-section .middle {
    padding: 2.5rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(42, 42, 42, 0.4);
  }

  .our-distinction-section .middle .set-apart-list {
    gap: 1.5rem;
  }

  .our-distinction-section .middle .set-apart-item {
    align-items: flex-start;
  }

  .our-distinction-section .middle .set-apart-item img {
    flex: 0 0 auto;
    margin-top: 0.2rem;
  }

  .our-distinction-section .right-side {
    grid-column: auto;
  }

  .our-distinction-section .right-side img {
    min-height: 24rem;
    max-height: 32rem;
  }

  .our-distinction-section .right-side .text-section {
    right: 1rem;
  }

  .our-distinction-section .right-side .text-section .featured-house {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* Final CTA */
  .ready-to-shape-section {
    padding: 6rem 1.25rem;
  }

  .ready-to-shape-section .begin-text {
    letter-spacing: 0.18rem;
  }

  .ready-to-shape-section .ready-heading {
    margin-top: 2rem;
    font-size: clamp(3rem, 14vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06rem;
  }

  .ready-to-shape-section .body-text {
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 1.65rem;
  }

  .ready-to-shape-section .buttons-container {
    width: 100%;
    margin-top: 2.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .ready-to-shape-section .buttons-container a {
    width: 100%;
    text-align: center;
  }

  .ready-to-shape-section .book-btn,
  .ready-to-shape-section .view-btn {
    padding: 1rem 1.25rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .about-hero-section h1 {
    font-size: 2.75rem;
  }

  .concept-section .text-section {
    padding: 2rem 1.25rem;
  }

  .service-item .main-section h2 {
    font-size: 1.55rem;
  }

  .service-item .detail-text {
    padding-left: 0;
  }

  .how-we-work-item .item-number {
    font-size: 6rem;
  }

  .services-list h2 {
    font-size: 1.45rem;
  }

  .our-distinction-section .distinction-heading {
    font-size: 2.2rem;
  }

  .ready-to-shape-section .ready-heading {
    font-size: 2.75rem;
  }
}

/* ==================================================
   TEAM PAGE RESPONSIVE STYLES
================================================== */

/* General safeguards */
.team-hero,
.founding-partners-section,
.senior-studio-section,
.careers-section,
.open-positions-section {
  width: 100%;
}

.founding-partner-item,
.senior-grid-item,
.talented-item,
.team-hero > div,
.careers-section > div {
  min-width: 0;
}

.founding-partner-item img,
.senior-grid-item img,
.careers-section img,
.talented-item img {
  display: block;
  max-width: 100%;
}

/* Fix the heading divider selector */
.founding-partners-section .heading-container .long-line,
.senior-studio-section .heading-container .long-line {
  flex: 1;
  height: 0.0625rem;
  background-color: rgba(200, 169, 110, 0.2);
}

/* Smaller desktops */
@media screen and (max-width: 1200px) {
  .team-hero {
    gap: 3rem;
  }

  .team-hero .heading-top,
  .team-hero .heading-creative {
    font-size: 4.75rem;
    line-height: 1;
  }

  .founding-partners-grid {
    gap: 1rem;
  }

  .founding-partner-item {
    padding: 0.75rem;
  }

  .senior-studio-grid {
    gap: 1.5rem;
  }

  .careers-section {
    grid-template-columns: 1fr 1.5fr;
  }

  .talented-grid {
    gap: 1rem;
  }
}

/* Tablets */
@media screen and (max-width: 900px) {
  /* Hero */
  .team-hero {
    padding: 4rem 2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .team-hero .left-side {
    width: 100%;
  }

  .team-hero .heading-top,
  .team-hero .heading-creative {
    font-size: clamp(3.75rem, 9vw, 5rem);
    line-height: 1;
    letter-spacing: -0.08rem;
  }

  .team-hero .right-side {
    max-width: 34rem;
    padding: 0 0 0 1.5rem;
    border-right: none;
    border-left: 2px solid #c8a96e;
  }

  .team-hero .right-side p {
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.9rem;
  }

  /* Founding partners */
  .founding-partners-section {
    padding: 5rem 2rem;
  }

  .founding-partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .founding-partner-item {
    padding: 0;
  }

  .founding-partner-item:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 1rem);
    justify-self: center;
  }

  .founding-partner-item.highlight {
    margin-top: 0;
  }

  .founding-partner-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  /* Senior studio */
  .senior-studio-section {
    padding: 5rem 2rem;
  }

  .senior-studio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }

  .senior-grid-item.highlight {
    margin-top: 0;
  }

  .senior-grid-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  /* Careers */
  .careers-section {
    grid-template-columns: 1fr;
  }

  .careers-section .left-side {
    padding: 4rem 2rem;
    max-width: 44rem;
  }

  .careers-section .right-side {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }

  .careers-section .right-side img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
  }

  /* Open positions */
  .open-positions-section {
    padding: 5rem 2rem;
  }

  .open-positions-section h2 {
    margin-top: 1.5rem;
    font-size: 2.75rem;
    line-height: 1.2;
  }

  .talented-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .talented-item:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.75rem);
    justify-self: center;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  /* Hero */
  .team-hero {
    padding: 3.5rem 1.25rem;
    gap: 2rem;
  }

  .team-hero .our-work-container {
    gap: 0.6rem;
  }

  .team-hero .our-work-container p {
    letter-spacing: 0.16rem;
    line-height: 1.2rem;
  }

  .team-hero .heading-top,
  .team-hero .heading-creative {
    font-size: clamp(3rem, 15vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06rem;
    overflow-wrap: break-word;
  }

  .team-hero .heading-top {
    margin-top: 1.5rem;
  }

  .team-hero .heading-creative {
    margin-top: 0.2rem;
  }

  .team-hero .right-side {
    width: 100%;
    max-width: none;
    padding-left: 1rem;
  }

  .team-hero .right-side p {
    font-size: 1rem;
    line-height: 1.7rem;
  }

  /* Section headings */
  .founding-partners-section .heading-container,
  .senior-studio-section .heading-container {
    gap: 0.75rem;
  }

  .founding-partners-section .heading-container h3,
  .senior-studio-section .heading-container h3 {
    flex: 0 1 auto;
    font-size: 1.8rem;
    line-height: 2.2rem;
  }

  /* Founding partners */
  .founding-partners-section {
    padding: 4rem 1.25rem;
  }

  .founding-partners-grid {
    margin-top: 3rem;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .founding-partner-item:last-child {
    grid-column: auto;
    width: 100%;
  }

  .founding-partner-item img {
    max-height: 34rem;
  }

  .founding-partner-item .small-line {
    margin-top: -1rem;
  }

  .founding-partner-item h3 {
    margin-top: 2.5rem;
    font-size: 1.4rem;
  }

  .founding-partner-item .bio,
  .founding-partner-item .quote {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }

  /* Senior studio */
  .senior-studio-section {
    padding: 4rem 1.25rem;
  }

  .senior-studio-grid {
    margin-top: 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }

  .senior-grid-item h4 {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.5rem;
  }

  .senior-grid-item p {
    line-height: 1.25rem;
  }

  /* Careers */
  .careers-section .left-side {
    padding: 4rem 1.25rem;
  }

  .careers-section h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .careers-section .body-text {
    font-size: 0.9rem;
    line-height: 1.55rem;
  }

  .careers-section .right-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .careers-section .right-side img {
    height: 15rem;
  }

  /* Positions */
  .open-positions-section {
    padding: 4.5rem 1.25rem;
  }

  .open-positions-container {
    width: 100%;
    justify-content: center;
  }

  .open-positions-container p {
    letter-spacing: 0.16rem;
  }

  .open-positions-container .small-line {
    flex: 1;
    max-width: 2rem;
  }

  .open-positions-section h2 {
    font-size: 2.25rem;
    line-height: 1.25;
  }

  .talented-grid {
    width: 100%;
    margin-top: 3rem;
    grid-template-columns: 1fr;
  }

  .talented-item,
  .talented-item:last-child {
    grid-column: auto;
    width: 100%;
    padding: 1.75rem;
  }

  .talented-item .top-section {
    gap: 1rem;
  }

  .talented-item .main-info {
    padding-left: 1rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  .team-hero .heading-top,
  .team-hero .heading-creative {
    font-size: 2.75rem;
  }

  .founding-partners-section .heading-container h3,
  .senior-studio-section .heading-container h3 {
    font-size: 1.55rem;
  }

  .senior-studio-grid {
    grid-template-columns: 1fr;
  }

  .senior-grid-item img {
    max-height: 32rem;
  }

  .careers-section .right-side img {
    height: 12rem;
  }

  .open-positions-section h2 {
    font-size: 2rem;
  }

  .talented-item {
    padding: 1.5rem;
  }
}

/* ==================================================
   RESPONSIVE FOOTER
================================================== */

footer {
  width: 100%;
}

footer .logo {
  flex-shrink: 0;
}

footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer .sm-container {
  width: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

footer .sm-container i {
  font-size: 1.1rem;
  cursor: pointer;
}

/* Tablets */
@media screen and (max-width: 900px) {
  footer {
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem 3rem;
    align-items: start;
  }

  footer .logo {
    grid-column: 1;
    grid-row: 1;
  }

  footer nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 1rem 1.5rem;
  }

  footer .sm-container {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(245, 240, 232, 0.1);
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  footer {
    padding: 3.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
  }

  footer .logo {
    font-size: 1.75rem;
  }

  footer nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  footer nav a {
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.08);
    font-size: 0.9rem;
    line-height: 1.25rem;
  }

  footer nav a:nth-child(odd) {
    border-right: 1px solid rgba(245, 240, 232, 0.08);
  }

  footer .sm-container {
    width: 100%;
    justify-content: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(245, 240, 232, 0.1);
  }

  footer .sm-container i {
    font-size: 1.25rem;
  }
}

/* Very small phones */
@media screen and (max-width: 380px) {
  footer {
    padding: 3rem 1rem;
  }

  footer nav {
    grid-template-columns: 1fr;
  }

  footer nav a:nth-child(odd) {
    border-right: none;
  }
}

footer .sm-container a {
  color: rgba(245, 240, 232, 0.6);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

footer .sm-container a:hover {
  color: #c8a96e;
  transform: translateY(-2px);
}

/* ==================================================
   RESPONSIVE HEADER
================================================== */

.site-header {
  position: relative;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 1rem 3rem;
  border-bottom: 1px solid rgba(42, 42, 42, 0.5);
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(8px);
}

.site-header .logo {
  position: relative;
  z-index: 1002;
  flex-shrink: 0;
  color: #f5f0e8;
  font-family: Playfair;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.25rem;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
}

.header-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.header-navigation a {
  position: relative;
  color: rgba(245, 240, 232, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.02188rem;
  transition: color 0.2s ease;
}

.header-navigation a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  left: 0;
  height: 1px;
  background-color: #c8a96e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.header-navigation a:hover,
.header-navigation a.active {
  color: #c8a96e;
}

.header-navigation a:hover::after,
.header-navigation a.active::after {
  transform: scaleX(1);
}

.site-header .get-in-touch-btn {
  flex-shrink: 0;
  padding: 0.625rem 1.5rem;
  border: 1px solid rgba(200, 169, 110, 0.5);
  border-radius: 0.25rem;
  color: #c8a96e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.site-header .get-in-touch-btn:hover {
  color: #0a0a0a;
  background-color: #c8a96e;
}

.hamburger,
.mobile-contact-btn,
.navigation-overlay {
  display: none;
}

/* Smaller desktop screens */
@media screen and (max-width: 1100px) {
  .site-header {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .header-navigation {
    gap: 1.25rem;
  }
}

/* Tablet and mobile navigation */
@media screen and (max-width: 900px) {
  .site-header {
    min-height: 4.75rem;
    padding: 1rem 2rem;
  }

  .site-header .get-in-touch-btn {
    display: none;
  }

  .hamburger {
    position: relative;
    z-index: 1002;
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
  }

  .hamburger span {
    display: block;
    width: 1.4rem;
    height: 2px;
    background-color: #f5f0e8;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(0.45rem) rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: translateY(-0.45rem) rotate(-45deg);
  }

  .header-navigation {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    width: min(24rem, 85vw);
    height: 100dvh;
    padding: 7rem 2rem 3rem;
    background-color: #111;
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
  }

  .header-navigation.active {
    transform: translateX(0);
  }

  .header-navigation a {
    width: 100%;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(245, 240, 232, 0.08);
    font-family: Playfair;
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  .header-navigation a::after {
    display: none;
  }

  .header-navigation .mobile-contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3.5rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(200, 169, 110, 0.5);
    border-radius: 0.25rem;
    color: #c8a96e;
    font-family: Inter;
    font-size: 0.875rem;
    text-align: center;
  }

  .navigation-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: block;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .navigation-overlay.active {
    visibility: visible;
    opacity: 1;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* Mobile phones */
@media screen and (max-width: 600px) {
  .site-header {
    padding: 0.9rem 1.25rem;
  }

  .site-header .logo {
    font-size: 1.6rem;
  }

  .header-navigation {
    width: min(21rem, 88vw);
    padding: 6.5rem 1.5rem 2.5rem;
  }

  .header-navigation a {
    font-size: 1.25rem;
  }
}