:root {
  --primary-colour: #1c2746;
  --text-colour-dark: #000;
  --text-colour-light: #fefefe;
  /* --text-colour-grey: #222225; */
  --text-colour-grey: #28374d;
  --text-colour-light-grey: #334155;
  --siam-premier-colour: #800020;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-colour);
  /* background-color: transparent; */
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.2);

  /* Because we want header to be sticky later */
  height: 8rem;

  position: sticky;
  top: 0;
  z-index: 9000;
}

.sticky .main-slider {
  margin-top: 8rem;
}

.logo {
  height: 6.4rem;
  /* height: 4.8rem; */
  padding-left: 3.6rem;
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  /* gap: 10.8rem; */
  gap: 8rem;
  /* padding-right: 4.8rem; */
  padding-right: 5.6rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  font-family: "Cormorant", serif;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  color: var(--text-colour-light);
  /* font-weight: 500; */
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 1px;
  /* letter-spacing: 0.5px; */
  /* text-shadow: 0.5px 0.5px 2px rgba(00, 00, 00, 0.8); */
  /* text-transform: capitalize; */
  text-transform: uppercase;
  transition: all 0.3s;

  /* 1. Add a transparent border to the base state */
  /* margin-bottom: 2px; */
  border-bottom: 1px solid transparent;
}

.main-nav-link:hover,
.main-nav-link:active {
  /* text-decoration: underline; */
  border-bottom: 1px solid var(--text-colour-light);
}

.current-page {
  font-family: "Cormorant", serif;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: underline;
  color: var(--text-colour-light);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 1px;
  transition: all 0.3s;
}

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: var(--text-colour-light);
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* Hero */
/* .main-slider {
  height: calc(200vh-8rem);
} */

/* Animation */
@keyframes imgFadeInSlide {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.05);
  }
}

.slider {
  height: calc(100vh - 8rem);
  width: 100vw;
  /* width: 100%; */
  /* position: absolute;
  top: 0; */
  overflow: hidden;
}
.slide {
  height: 100%;
  width: 100%;

  /* position: absolute;
  top: 0; */
  display: none;
  z-index: -1;

  position: absolute;
  top: 0;
  overflow: hidden;
}

.slide__active {
  display: block;
  animation: imgFadeInSlide 2s;
}

.slide__active img {
  animation: zoomOut 9s;
}

.slide__text {
  font-family: "Cormorant", serif;

  color: var(--text-colour-white);
  /* font-size: 8rem; */
  font-size: 6.4rem;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(00, 00, 00, 0.8);
  position: absolute;

  left: 5%;
  /* left: 12%; */
  bottom: 8%;
  padding-right: 12rem;
}

.slide__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
  transition: transform 3s;
}

.slide__img__active {
  transform: scale(1.4);
}

/* features-section */

.features {
  /* background-color: var(--primary-colour); */
  padding-top: 4rem;
  padding-bottom: 6.4rem;
  margin-top: -2px;
}

.primary-heading {
  font-family: "Cormorant", serif;
  color: var(--primary-colour);
  padding-top: 5.6rem;
  /* font-size: 7.2rem; */
  font-size: 5.6rem;
  font-weight: 600;
  /* letter-spacing: 1px; */
  text-align: center;
  margin-top: -2px;
  /* text-transform: uppercase; */
}

.primary-heading-lb-1 {
  display: none;
}

.features-highlights {
  display: flex;
  flex-direction: column;

  align-items: center;
  /* gap: 9.6rem; */
  gap: 6.4rem;
  /* padding-top: 15rem; */
  /* padding-top: 12rem; */
  padding-top: 8rem;
  /* padding-bottom: 12rem; */
}

.features-item {
  font-family: "Cormorant", serif;

  /* color: #92929b; */
  color: #aaaab1;
  /* font-size: 6.4rem; */
  font-size: 4.8rem;
  font-weight: 600;
}

.features-item:last-child {
  text-align: center;
  line-height: 1.4;
}

.item-active {
  /* color: #2dd4bf; */
  color: var(--primary-colour);
  /* font-weight: 800; */
}

/* about section */

.white-text {
  color: var(--text-colour-light);
}

/* .about-section,
.contact-section {
  background-color: var(--bg-colour-white);
  padding-top: 8rem;
  padding-bottom: 12rem;
  border-top: 2px solid var(--primary-colour);
} */

.index-about-section {
  /* background-color: var(--primary-colour); */
  padding-top: 8rem;
}

.index-about-img-container {
  width: 80%;
  margin: 0 auto;
}

.index-about-img {
  width: 100%;
  /* width: 80%; */
  /* height: 80rem; */
  object-fit: cover;
  padding-bottom: 6.4rem;
  margin: 0 auto;
}

.home-about-description {
  position: relative;
  width: 80%;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 6rem 6rem;
  margin: 0 auto;
}

.home-about-description::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 50%;
  background: linear-gradient(var(--primary-colour), var(--primary-colour));
  /* border-radius: 5px; */
  animation: rotate 8s linear infinite;
  /* z-index: 20000; */
}

.home-about-description::after {
  content: "";
  position: absolute;
  background: #fff;
  /* inset: 3px; */
  inset: 2px;
  z-index: 1;
  /* inset: 5px; */
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* .tertiary-heading-home {
  font-size: 2.8rem;
  font-weight: 500;
  text-align: center;
  z-index: 2000;
  color: var(--text-colour-light);
} */

.standard-text-container {
  margin: 0 auto;
  z-index: 2000;
  padding-top: 2rem;
  color: var(--text-colour-dark);
  width: 80%;
}

.standard-text {
  font-size: 2rem;
  /* font-weight: 300; */
  line-height: 1.7;
  color: var(--text-colour-dark);
}

.home-about-description-text {
  /* padding-top: 3.6rem; */
  margin: 0 auto;
  z-index: 2000;
  padding-top: 2rem;
  color: var(--text-colour-dark);
}

.secondary-heading {
  font-family: "Cormorant", serif;
  color: var(--primary-colour);
  z-index: 3000;
  font-size: 3.6rem;
}

/* features */
.index-features {
  position: relative;
  background-color: var(--bg-colour-white);
  padding-top: 8rem;
}

.index-features-heading-container {
  /* padding-top: 4.8rem;
  padding-bottom: 4.8rem; */
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: var(--bg-colour-white);
}
/* 
.primary-heading {
  color: var(--text-colour-dark);
  font-size: 8rem;

  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.3;
  text-align: center;
  text-transform: capitalize;
} */

.index-feature-img-container {
  /* height: calc(100vh - 8.5rem);
  width: 100vw; */

  position: sticky;
  /* position: absolute; */
  top: 85px;
  top: 80px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 8rem);
  z-index: 0; /* Ensures images are behind text */
  overflow: hidden;
}

.index-feature-img {
  height: 100%;
  width: 100%;
  object-fit: cover;

  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: -1;
}

.index-feature-img.active {
  opacity: 1;
  z-index: 1500;
  display: block;
  animation: imgFadeInSlide 1s;
}

/* Animation */
@keyframes imgFadeInSlide {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.index-feature-text-container {
  background: transparent;
  /* height: calc(100vh - 8.5rem); */
  /* height: calc(100vh); */
  /* height: 100vh; */
  width: 100vw;
  position: relative;

  display: flex;
  flex-direction: column;

  /* padding-left: 12rem; */
  padding-left: 8rem;
  /* align-items: center; */
  /* justify-content: flex-start; */
  z-index: 6000;

  color: var(--text-colour-white);
  text-shadow: 0.5px 0.5px 2px rgba(00, 00, 00, 0.8);
  margin-bottom: calc(100vh - 8.5rem);
}

.index-feature-text-container:last-child {
  margin-bottom: 0;
}

.index-feature-heading {
  font-family: "Cormorant", serif;

  font-size: 5.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 1000;
  text-transform: capitalize;
  /* height: 8rem; */
}

.index-feature-text {
  width: 80%;
  /* padding-right: 8rem;
  width: 100%; */
  padding-top: 3rem;
  /* font-size: 2.4rem; */
  /* font-size: 2.6rem; */
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 1px;
  /* font-style: italic; */
  /* padding-left: 8rem; */
  z-index: 1000;
  /* height: 20rem; */
  white-space: wrap;
}

/* .non-italic {
  font-style: normal;
} */

/* .index-feature-text-line-break {
  display: none;
} */

/* Home - Services */

.index-services {
  padding-bottom: 4rem;
}

.index-services-heading-container {
  /* padding-top: 4.8rem;
  padding-bottom: 4.8rem; */
  /* padding-top: 8rem; */
  padding-bottom: 2rem;
  /* background-color: var(--bg-colour-white); */
}

.index-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* gap: 2rem; */
  padding-top: 4rem;
}

.index-services-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
}

.index-services-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* filter: grayscale(100%);
  -webkit-filter: grayscale(100%); */
  /* filter: brightness(0.6); */
  filter: brightness(0.6);

  transition: all 0.5s;
  /* transition: filter 2s, transform 12s ease-out; */
}

.index-services-img:hover {
  /* transform: scale(1.4); */
  filter: brightness(1);
}

.index-services-text {
  font-family: "Cormorant", serif;
  display: inline-block;
  /* text-align: center; */
  color: var(--text-colour-light);
  /* text-shadow: 0.5px 0.5px 2px rgba(00, 00, 00, 0.8); */
  /* font-size: 2.8rem; */
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 1px;
  /* padding: 1rem 2rem; */
  /* padding: 1rem; */
  padding: 0.5rem 1rem;
  position: absolute;
  /* bottom: 3%; */
  bottom: 2.5%;
  left: 50%;
  line-height: 1.5;
  transform: translateX(-50%);
  white-space: nowrap;
  /* background-color: var(--text-colour-dark); */
  background-color: hsla(0, 0%, 7%, 0.45);
}

/* Home - Attorneys - section */

.index-attorneys {
  padding-top: 12rem;
}

.home-attorneys-item {
  /* height: 40rem; */
  position: relative;
  /* overflow: hidden; */
  padding-top: 4rem;
}

.home-attorneys-img-container {
  overflow: hidden;
}

.home-attorneys-img {
  width: 100%;
  height: 80rem;
  object-fit: cover;
  transition: all 0.5s;
  transition:
    filter 2s,
    transform 12s ease-out;
}

.home-attorneys-img:hover {
  /* cursor: pointer; */
  transform: scale(1.4);
  /* filter: brightness(0.6); */
}

.home-attorneys-text {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-colour);
  width: 45%;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* padding: 2rem 4rem; */
  padding: 4rem;
}

.long-text {
  width: 60%;
  padding-left: 3.6rem;
  padding-right: 3.6rem;
}

/* .left-side {
  left: 5%;
} */

/* .home-attorneys-text-heading {
  color: var(--text-colour-light);
  font-size: 3.6rem;
  font-weight: 400;
  padding-top: 4rem;
  text-align: center;
} */

.home-attorneys-text-body {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.7;
  /* letter-spacing: 0.5px; */
  /* padding-left: 4rem;
  padding-right: 4rem;
  padding-top: 3rem; */
  /* padding: 3rem 4rem; */
}

.additional-padding {
  padding-top: 3rem;
}

/* Home - insights  */
/* discover */

.insights-grid {
  /* margin-top: 4.8rem; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 32vw repeat(3, 20vw); */
  /* grid-template-rows: 32vw 20vw; */
  padding: 0 0.5rem;
  /* padding-top: 6.4rem; */
  padding-top: 3.2rem;
  padding-bottom: 6.4rem;
  gap: 0.5rem;
}

.index-insights {
  padding-top: 25rem;
  /* padding-bottom: 4rem; */
}

.insights-item {
  /* cursor: none; */
  /* cursor: default; */
  position: relative;
  overflow: hidden;
}

.insights-text {
  font-family: "Cormorant", serif;
  background-color: hsla(0, 0%, 7%, 0.45);
  display: inline-block;
  text-align: center;
  color: var(--text-colour-light);
  /* font-size: 2.8rem; */
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 1rem 3rem;
  position: absolute;
  /* bottom: 3%; */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  width: 100%;
  text-transform: uppercase;
  /* text-transform: capitalize; */
}

/* .insights-item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.insights-item:nth-child(2) {
  grid-column: 4 / -1;
  grid-row: 1 / span 1;
}

.insights-item:nth-child(3) {
  grid-column: 1 / span 2;

  grid-row: 2 / span 1;
}

.insights-item:nth-child(4) {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.insights-item:nth-child(5) {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
} */

.insights-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: all 0.5s;
  transition:
    filter 2s,
    transform 12s ease-out;
}

.insights-img:hover {
  transform: scale(1.4);
  /* filter: brightness(0.6); */
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

/* footer */

.footer {
  background-color: var(--primary-colour);
  /* border-top: 2px solid var(--primary-colour); */
}

/* .border-top {
  border-top: 0.5px solid var(--text-colour-light);
} */

.footer-container-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6rem;
}

.footer-logo-img {
  width: 30rem;
}

.social-address {
  display: flex;
  flex-direction: column; /* Stacks the icons on top of the address */
  align-items: center;
  padding-top: 1rem;
}

.social {
  display: flex;
  gap: 3.6rem;
  align-items: center;
}

.social-icon {
  color: var(--text-colour-light);
  height: 4rem;
  width: 4rem;
}

.social-icon:hover {
  cursor: pointer;
}

.footer-social-logo {
  height: 6rem;
  fill: var(--text-colour-light);
  /* color: #fff; */
  cursor: pointer;
  width: 6rem;
  transition:
    color 0.2s ease,
    fill 0.2s ease;
  outline: none;
}

@media (hover: hover) {
  .facebook:hover {
    cursor: pointer;
    fill: #4267b2;
  }
}

/* Clear hover fill immediately on click or focus */
.facebook:focus,
.facebook:active {
  fill: initial; /* Returns to default fill color on click/tap */
  outline: none;
}

.youtube:hover {
  color: #ff0000;
}

.instagram:hover {
  color: #d62976;
}

.footer-contact {
  /* width: 25rem; */
  /* display: flex; */

  /* justify-content: center; */
  justify-items: end;
  align-items: flex-end;
  gap: 1.2rem;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.footer-address {
  padding-top: 4rem;
}

.footer-address-text {
  font-size: 1.4rem;
  font-weight: 200;
  text-align: center;
  line-height: 1.7;
}

.footer-text {
  font-size: 1.8rem;
  font-weight: 200;
  color: var(--text-colour-light);
}

.footer-sms-text {
  color: var(--text-colour-light);
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 200;
  letter-spacing: 0.5px;
  outline: none;
}

/* .footer-sms-text:hover {
  cursor: pointer;
  text-decoration: underline;
} */

/* Apply hover styles only when using a cursor (mouse), ignoring touch taps */
@media (hover: hover) {
  .footer-sms-text:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}

/* Ensures the underline disappears immediately on click/focus */
.footer-sms-text:active,
.footer-sms-text:focus {
  text-decoration: none;
}

.copyright {
  text-align: center;
  color: var(--text-colour-white);
  font-size: 1.4rem;
  font-weight: 200;
  padding-top: 6rem;
  padding-bottom: 4rem;
  letter-spacing: 0.5px;
}

/* hero - products section */
.hero-products-img {
  height: 60rem;
  object-fit: cover;
  width: 100%;
  filter: brightness(45%);
}

.hero-products {
  position: relative;
}

.hero-text-products-pages {
  font-family: "Cormorant", serif;

  color: var(--text-colour-light);
  font-size: 4rem;
  font-weight: 700;
  position: absolute;
  /* z-index: 2000; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* .heading-pages-products {
  text-align: center;
  white-space: nowrap;
} */

.heading-pages-products {
  text-align: center;
  font-size: clamp(2.8rem, 5.5vw, 6.4rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* contact - page */

.contact-section {
  /* background-color: var(--primary-colour); */
  margin-top: -2rem;
  padding-bottom: 12rem;

  display: flex;
  flex-direction: column;
  gap: 12rem;

  margin-top: -0.2rem;
  padding-bottom: 15rem;
}

.contact-phone-address-email-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 12rem;
}

.contact-details-container {
  color: var(--text-colour-dark);
  /* font-size: 2rem; */
  font-size: 1.8rem;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  gap: 2.8rem;
}

/* .contact-icon {
  height: 8rem;
  width: 8rem;
} */

/* .location-icon {
  fill: var(--text-colour-light);
} */

.contact-heading {
  font-family: "Cormorant", serif;

  color: var(--text-colour-dark);
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: capitalize;
  border-bottom: 1px solid var(--text-colour-dark);
  margin-top: -2rem;
}

.contact-social-heading {
  border-bottom: none;
  margin-top: 0;
}

.contact-tel-number-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-emails-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.contact-sms-text {
  color: var(--text-colour-dark);
  text-decoration: none;
  letter-spacing: 0.5px;
  padding-bottom: 0.1rem;
  transition: all 0.1s;
}

.contact-sms-text:hover {
  cursor: pointer;
  border-bottom: 1px solid var(--text-colour-dark); /* custom underline */
}

.contact-text {
  text-align: center;
  line-height: 1.5;
  margin-top: -0.5rem;
}

.contact-text span {
  font-weight: 500;
}

.contact-link-map:link,
.contact-link-map:visited {
  display: inline-block;
  color: var(--text-colour-dark);
  /* font-weight: 200; */
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.3s;
}

.contact-link-map:hover {
  text-decoration: underline;
}

/* .contact-link-map:hover,
.contact-link-map:active {
  text-decoration: underline;
} */

.contact-affiliated-company-logo-container {
  width: 20rem;
  overflow: hidden;
}

.contact-affiliated-company-logo {
  width: 100%;
  transition: all 0.3s;
}

.contact-affiliated-company-logo:hover {
  transform: scale(1.05);
}

.contact-social-media-links-icons {
  padding-top: 2rem;
  display: flex;
  gap: 4.8rem;
}

.contact-company-social-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  /* column-gap: 8rem; */
  padding-top: 4rem;
  gap: 20rem;
}

.contact-affiliated-company-container {
  justify-self: right;
  /* padding-right: 12rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 3rem; */
}

.contact-social-media-container {
  justify-self: left;
  /* padding-left: 12rem; */
}

.contact-social-media-links-icons {
  justify-content: center;
  gap: 4.8rem;
}

.contact-social-icon {
  color: var(--text-colour-dark);
  height: 8rem;
  width: 8rem;
}

.contact-social-icon:hover {
  cursor: pointer;
}

/* hero section */

.hero-img {
  height: calc(100vh - 8rem);
  object-fit: cover;

  /* background-size: cover; */
  /* animation: heroImage 1s ease-out; */
  /* position: relative; */
  width: 100%;
}

.heading-page {
  font-family: "Cormorant", serif;

  color: var(--text-colour-light);
  /* font-size: 8rem; */
  font-size: 8rem;
  font-weight: 700;
  /* letter-spacing: 5px; */
  background-color: hsla(0, 0%, 7%, 0.5);
  padding: 2rem 4rem;

  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 10;
  text-shadow: 1px 1px 1px rgba(00, 00, 00, 0.8);
  text-align: center;

  display: none;
  white-space: nowrap;
}

.text--active {
  display: block;
  animation: heroText 1.5s ease-out;
}

@keyframes heroImage {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  80% {
    transform: translate(0);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes heroText {
  0% {
    opacity: 0;
    /* transform: translateX(-200%); */
    transform: translateX(-300%);
  }

  95% {
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* careers -page */
/* Core Layout Container */

.bg-white-container {
  background-color: #fff;
}

.careers-promo-container {
  padding-top: 12rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 6rem;
}

/* --- Hero Graphic Section --- */
.careers-hero-graphic {
  /* position: relative; */
  width: 100%;
  height: 600px;
}

.careers-intro-img {
  width: 100%;
  object-fit: cover;
}

/* --- Bottom Text Copy Section (Light Theme Adjustments) --- */
.careers-content-body {
  padding: 40px 0;
  text-align: left;
  /* background-color: #ffffff; */
}

.description-text {
  /* max-width: 950px; */
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--text-colour-dark);
}

/* Responsive breakpoint scaling using explicit px values */
@media (max-width: 768px) {
  /* .careers-hero-graphic {
    height: 400px;
    padding: 25px 15px;
  } */

  /* .description-text {
    font-size: 9.5px; 
  } */
}

/* Animated image */
.animated-img {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -100;
}

.transition-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.transition-img-black {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -50;
}

.transition-text {
  font-family: "Cormorant", sans-serif;
  text-transform: uppercase;
  font-size: 6.4rem;
  font-weight: 300;
  position: absolute;
  /* top: 5%; */
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-colour-dark);
  z-index: 100;
  white-space: nowrap;
}

/* Transparent */
.transparent {
  height: 100vh;
  width: 100vw;
}

.careers-description-section {
  background-color: #fff;
  padding-top: 12rem;
  /* padding-bottom: 12rem; */
  padding-bottom: 8rem;
}

.home-products-description {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: repeat(2, 60rem);

  /* padding: 6.4rem 0; */
  padding-bottom: 12rem;
  align-items: center;
}

.home-products-description picture {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-products-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.careers-application-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.home-products-text {
  color: var(--text-colour-dark);
  padding-left: 4rem;
  padding-right: 4rem;
  /* padding-right: 5.6rem; */
  font-size: 1.8rem;
  /* font-weight: 100; */
  line-height: 1.5;
  /* font-weight: 300; */
}

.job-phone-number {
  color: blue;
  text-decoration: none;
  transition: all 0.3s;
}

.job-phone-number:hover {
  text-decoration: underline;
}

.button-job,
.button-job:link,
.button-job:visited {
  text-transform: capitalize;
  padding: 1.5rem 3rem;
  color: var(--text-colour-light);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 4rem;
  transition: 0.2s;
  border: none;
  align-self: flex-start;
  background-color: var(--primary-colour);
}

.button-job:hover,
.button-job:active {
  cursor: pointer;
  outline-offset: 0.3rem;
  outline: 0.2rem solid var(--primary-colour);
}

.button-email {
  text-transform: none;
}

/* attorneys page  */

.attorneys-main-section {
  padding-top: 8rem;
}

.main-heading-attorneys {
  font-family: "Cormorant", serif;
  color: var(--primary-colour);
  text-align: center;
  text-transform: capitalize;
  font-size: 5.6rem;
  font-weight: 700;
}

.attorneys-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem;
  padding: 8rem;
  /* padding-top: 8rem;
  padding-bottom: 12rem; */
  row-gap: 12rem;
}

.attorneys-portrait {
  width: 100%;
  object-fit: cover;
  display: block; /* Prevents tiny ghost gaps at the bottom of images */
  transition: transform 0.4s ease; /* Smooth transition for the zoom */
}

.attorneys-name-position {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 2rem;
  gap: 2rem;
  margin-top: -2px;
  padding-bottom: 2rem;
  transition: all 0.3s;
}

.attorneys-name {
  color: var(--primary-colour);
  /* font-size: 2.4rem; */
  font-size: 2rem;
  font-weight: 400;
}

.attorneys-position {
  color: var(--text-colour-dark);
  font-size: 1.6rem;
  font-weight: 300;
}

.attorneys-individual-container:hover .attorneys-name-position {
  background-color: var(--primary-colour);
  cursor: pointer;
}

.attorneys-individual-container picture {
  display: block;
  overflow: hidden; /* Crucial: cuts off the image as it scales up */
}

.attorneys-individual-container:hover .attorneys-portrait {
  transform: scale(1.08); /* Tweaked to 1.08 for a subtle, elegant zoom */
}

/* 5. Force the child text elements to turn white on hover */
.attorneys-individual-container:hover .attorneys-name,
.attorneys-individual-container:hover .attorneys-position {
  color: var(--text-colour-light);
}

.attorneys-individual-container {
  display: block;
  text-decoration: none; /* Prevents default underlines on text */
  cursor: pointer;
}

/* ===========================
   TABLET
   =========================== */
@media (max-width: 1024px) {
  .attorneys-main-section {
    padding-top: 6rem;
  }

  .main-heading-attorneys {
    font-size: 4.8rem;
  }

  .attorneys-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    row-gap: 8rem;
    /* padding: 6rem 4rem; */
    padding: 6rem;
    column-gap: 6rem;
  }

  .attorneys-name {
    font-size: 2.2rem;
  }

  .attorneys-position {
    font-size: 1.7rem;
  }
}

/* ===========================
   MOBILE
   =========================== */
@media (max-width: 768px) {
  .attorneys-main-section {
    padding-top: 4rem;
  }

  .main-heading-attorneys {
    font-size: 3.8rem;
  }

  .attorneys-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    row-gap: 6rem;
    padding: 4rem 2rem;
    /* padding-top: 6rem; */
  }

  .attorneys-name-position {
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .attorneys-name {
    font-size: 2rem;
  }

  .attorneys-position {
    font-size: 1.6rem;
  }
}

/* ===========================
   SMALL MOBILE
   =========================== */
@media (max-width: 480px) {
  .main-heading-attorneys {
    font-size: 3.2rem;
  }

  .attorneys-grid {
    /* padding: 3rem 1.5rem; */
    padding: 4rem;
  }

  .attorneys-name {
    font-size: 1.8rem;
  }

  .attorneys-position {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .attorneys-individual-container {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* individual attorney page */

.individual-attorney-section {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 12rem;
}

.individual-attorney-portrait-contact-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-columns: 40% 60%; */
  background-color: var(--primary-colour);
  margin-bottom: -2px;
}

.individual-attorney-main-info-container {
  color: var(--text-colour-light);
}

.individual-attorney-portrait-contact-container picture {
  width: 90%;
  /* width: 100%; */
}

.individual-attorney-img {
  width: 100%;
  object-fit: cover;
  margin-bottom: -2px;
}

.individual-attorney-main-info-container {
  /* background-color: var(--primary-colour);
  padding-left: 3rem; */
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3rem;
}

.individual-attorney-info-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 3rem;
}

.individual-attorney-name {
  font-family: "Cormorant", serif;
  font-size: 4rem;
  letter-spacing: 1.5px;
}

.individual-attorney-position {
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: capitalize;
  margin-top: -1rem;
}

.individual-attorney-expertise {
  /* padding-top: 3rem; */
  font-size: 1.8rem;
  line-height: 1.5;
}

.individual-attorney-education {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.5;
}

.individual-attorney-contact-container {
  /* padding-top: 10rem; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.individual-attorney-bio-container {
  padding-top: 6.4rem;
}

.individual-attorney-bio-text {
  color: var(--text-colour-dark);
  font-size: 2rem;
  line-height: 1.75;
}

.experience-container {
  color: var(--text-colour-dark);
  padding-top: 4rem;
}

.experience-heading {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-colour);
}

.experience-sub-container {
  padding-top: 4rem;
}

.experience-sub-heading {
  font-size: 2.2rem;
  font-weight: 500;
  /* letter-spacing: 1px; */
}

.experience-list-container {
  /* list-style-type: square; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-left: 3rem;
}

.experience-list-text {
  font-size: 2rem;
  /* list-style: inside; */
  list-style-type: square;
  list-style-position: outside;
  margin-left: 2rem;
  line-height: 1.5;
}

.button-container {
  display: flex;
  justify-content: center;
  padding-top: 6.4rem;
}

.button-download,
.button-download:link,
.button-download:visited {
  text-transform: capitalize;
  padding: 1.5rem 3rem;
  color: var(--text-colour-light);
  font-size: 1.8rem;
  font-weight: 600;
  /* margin-top: 4rem; */
  transition: 0.1s;
  border: none;
  background-color: var(--primary-colour);
}

.button-download:hover,
.button-download:active {
  cursor: pointer;
  outline-offset: 0.3rem;
  outline: 0.2rem solid var(--primary-colour);
}

.branch-return-container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  padding-top: 6.4rem;
}

.return-to-home:link,
.return-to-home:visited {
  display: inline-block;
  text-decoration: none;

  color: var(--text-colour-dark);
  font-weight: 400;
  font-size: 2.6rem;
  transition: all 0.3s;
  padding-bottom: 6rem;
}

.return-to-home:hover,
.return-to-home:active {
  text-decoration: underline;
}

.plus-italic {
  font-style: italic;
}

/* =========================
   LARGE TABLET / SMALL LAPTOP
   ========================= */

@media (max-width: 1280px) {
  .individual-attorney-section {
    margin: 0 auto;
    padding-top: 12rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .individual-attorney-portrait-contact-container picture {
    /* width: 90%; */
    width: 100%;
  }

  .individual-attorney-main-info-container {
    padding-top: 3rem;
    padding-left: 3rem;
  }
}

@media (max-width: 1100px) {
  .individual-attorney-portrait-contact-container {
    grid-template-columns: 45% 55%;
    /* grid-template-columns: 1fr; */
  }

  .individual-attorney-portrait-contact-container picture {
    /* width: 90%; */
    width: 100%;
  }

  .individual-attorney-main-info-container {
    padding-top: 3rem;
    padding-left: 3rem;
  }

  .individual-attorney-info-container {
    padding-right: 2rem;
    gap: 1.5rem;
  }

  .individual-attorney-name {
    font-size: 3.2rem;
    line-height: 1.1;
  }

  .individual-attorney-position {
    font-size: 1.8rem;
  }

  .individual-attorney-expertise,
  .individual-attorney-education {
    font-size: 1.6rem;
  }

  /* .footer-text,
  .footer-sms-text {
    font-size: 1.6rem;
  } */
}

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

@media (max-width: 992px) {
  .individual-attorney-section {
    padding: 10rem 3rem 0;
  }

  .individual-attorney-portrait-contact-container {
    grid-template-columns: 1fr;
  }

  .individual-attorney-portrait-contact-container picture {
    width: 100%;
  }

  .individual-attorney-main-info-container {
    padding: 4rem;
  }

  .individual-attorney-info-container:nth-child(2) {
    padding-top: 4rem;
  }

  .individual-attorney-info-container {
    padding-right: 0;
  }

  .individual-attorney-contact-container {
    padding-top: 5rem;
  }

  .individual-attorney-name {
    font-size: 3.6rem;
    /* text-align: center; */
  }

  .individual-attorney-position {
    font-size: 2rem;
    /* text-align: center; */
  }

  .individual-attorney-expertise,
  .individual-attorney-education {
    font-size: 1.7rem;
  }

  .individual-attorney-bio-text {
    font-size: 1.9rem;
  }

  .experience-heading {
    font-size: 2.6rem;
  }

  .experience-sub-heading {
    font-size: 2rem;
  }

  .experience-list-text {
    font-size: 1.8rem;
  }
}

@media (max-width: 992px) {
  .individual-attorney-img {
    height: 500px;
    object-fit: cover;
    object-position: top;
  }
}

@media (max-width: 768px) {
  .individual-attorney-img {
    height: 400px;
  }
}

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

@media (max-width: 768px) {
  .individual-attorney-section {
    padding: 8rem 2rem 0;
  }

  .individual-attorney-main-info-container {
    padding: 3rem 2rem;
  }

  .individual-attorney-name {
    font-size: 3rem;
    line-height: 1.1;
  }

  .individual-attorney-position {
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-top: 0;
  }

  .individual-attorney-expertise,
  .individual-attorney-education {
    font-size: 1.6rem;
    /* padding-top: 2rem; */
  }

  .individual-attorney-contact-container {
    /* padding-top: 3rem; */
    gap: 0.8rem;
  }

  .individual-attorney-bio-container {
    padding-top: 4rem;
  }

  .individual-attorney-bio-text {
    font-size: 1.7rem;
    line-height: 1.7;
  }

  .experience-container {
    padding-top: 6.4rem;
  }

  .experience-heading {
    font-size: 2.4rem;
  }

  .experience-sub-container {
    padding-top: 3rem;
  }

  .experience-sub-heading {
    font-size: 1.9rem;
    line-height: 1.4;
  }

  .experience-list-container {
    padding-left: 2rem;
  }

  .experience-list-text {
    font-size: 1.7rem;
    margin-left: 1rem;
    line-height: 1.6;
  }

  .button-container,
  .branch-return-container {
    padding-top: 4rem;
  }

  .button-download {
    width: 100%;
    max-width: 320px;
    font-size: 1.7rem;
  }

  .return-to-home:link,
  .return-to-home:visited {
    font-size: 2rem;
    text-align: center;
    line-height: 1.5;
    padding-bottom: 4rem;
  }
}

/* about - page */
/* layer-sliding */

.layer-sliding-container {
  /* height: calc(100vh - 8rem); */
  height: calc(100vh);
  position: relative;
  position: sticky;
  /* top: 8rem; */
  top: 0;
}

.layer-sliding-container picture {
  height: 100%;
  object-fit: cover;
}

.layer-sliding-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* .layer-sliding-text {
  font-family: "Cormorant", serif;
  text-align: center;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  font-size: 4.8rem;
  font-weight: 600;
  color: var(--text-colour-light);
  text-shadow: 2px 2px 6px rgba(00, 00, 00, 0.7);
  letter-spacing: 0.5px;
  white-space: wrap;
  z-index: 2;
  line-height: 1.5;
  padding: 2rem 4rem;
  width: auto;
} */

.layer-sliding-text {
  font-family: "Cormorant", serif;
  text-align: center;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);

  font-size: 4.8rem;

  /* Increase weight to prevent thin strokes from disappearing */
  font-weight: 600;

  color: var(--text-colour-light);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);

  line-height: 1.15;
  letter-spacing: 0.5px;

  white-space: wrap;
  z-index: 2;
  padding: 2rem 4rem;
  width: 90%;
  max-width: 1100px;
}

.layer-text-bottom {
  bottom: 25%;
  /* transform: translate(-50%, 0); */
}

.layer-sliding-text strong {
  font-weight: 700;
  font-style: italic;
}

.layer-main-heading {
  font-size: 8rem;
}

/* .release-back-span {
  display: none;
} */

.layer-sliding-text p {
  text-transform: capitalize;
}

/* 1. Create the dark overlay using a pseudo-element */
.layer-sliding-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Adjust the 0.4 value to make it darker (e.g., 0.5) or lighter (e.g., 0.3) */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1; /* Sits above the image */
}

/* ========================================== */
/* TABLET & MOBILE RESPONSIVE STYLES          */
/* ========================================== */

@media (max-width: 768px) {
  .layer-sliding-container {
    /* 100svh prevents mobile browser toolbars from cutting off the layout bottom */
    height: 100svh;
  }

  .layer-sliding-text {
    font-size: 3.2rem;
    padding: 1.5rem 2.5rem;
    width: 90%;
  }

  .layer-main-heading {
    font-size: 5rem;
  }
}

@media (max-width: 480px) {
  .layer-sliding-text {
    font-size: 2.6rem; /* Scaled up from 2.2rem */
    padding: 1rem;
    width: 92%;
    line-height: 1.25;
  }

  /* Fix layout centering alignment specifically for the bottom-aligned first title */
  .layer-text-bottom {
    bottom: 20%;
    transform: translate(-50%, 0);
  }
}

/* about - Z pattern */
/* --- Main Layout Container --- */
.features-container {
  max-width: 120rem; /* 1200px equivalent */
  width: 100%;
  margin: 0 auto; /* Keeps the entire section centered horizontally on the page */
  display: flex;
  flex-direction: column;
  gap: 8rem; /* Spacing between the blocks (80px equivalent) */
  padding: 6rem 2rem;
  /* padding-top: 8rem; */
}

/* --- Main Heading Style --- */
.features-text-heading {
  font-family: "Cormorant", serif;
  font-size: 3.2rem;
  color: var(--primary-colour);
  font-weight: 600;
  margin-bottom: 0rem; /* Spaces the main heading away from the first row */
  text-align: center;
  padding-top: 8rem;
}

.straight-hyphen {
  font-family: Arial, "Times New Roman", sans-serif;
  font-weight: 400; /* Keeps thickness consistent */
}

/* --- Row Structure --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* Text gets slightly less room than the visual image */
  align-items: center;
  gap: 4rem;
}

/* Reverses the order for the second block (Image Left, Text Right) */
.feature-row.reverse {
  grid-template-columns: 1.3fr 1fr;
}
.feature-row.reverse .feature-text {
  order: 2;
}
.feature-row.reverse .feature-image {
  order: 1;
}

/* --- Typography Styles --- */
.feature-text p {
  font-size: 1.6rem;
  color: var(--text-colour-dark);
  line-height: 1.7;
}

/* --- Image Adjustments --- */
.feature-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- Responsive Layout (Tablets & Mobile) --- */
@media (max-width: 900px) {
  .features-container {
    padding: 4rem 2rem;
    /* gap: 4rem; */
    gap: 12rem;
  }

  .features-text-heading {
    font-size: 2.8rem;
    margin-bottom: 2rem;
    line-height: 1.25;
    text-align: center; /* Center header text on mobile */
  }

  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr; /* Stack everything vertically */
    gap: 2rem;
    /* gap: 4.8rem; */
  }

  /* Force elements to flow: Text on top, Image underneath on mobile */
  .feature-row .feature-text,
  .feature-row.reverse .feature-text {
    /* order: 1; */
    order: 2;
  }

  .feature-row .feature-image,
  .feature-row.reverse .feature-image {
    order: 1;
  }
}

/* --- Perks Section --- */
.perks-section {
  background-color: var(--primary-colour);
  padding: 6rem 2rem;
  width: 100%;
}

.perks-container {
  max-width: 120rem; /* 1200px limit */
  margin: 0 auto;
}

/* --- List Styling --- */
.perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(
    2,
    1fr
  ); /* Split list cleanly into 2 equal columns */
  column-gap: 8rem; /* Wide space between the two columns */
  row-gap: 2.4rem; /* Vertical spacing between bullet points */
}

/* --- Individual Bullet Item --- */
.perk-item {
  display: flex;
  align-items: center;
  font-size: 2.2rem;
  color: var(--text-colour-light);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

/* --- SVG Arrow Icon --- */
.perk-icon {
  width: 2rem; /* Matches font size balance */
  height: 2rem;
  margin-right: 1.6rem; /* Spacing between arrow and text */
  color: #a8bacc;
  flex-shrink: 0; /* Prevents arrow from distorting on small screens */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .perks-list {
    grid-template-columns: 1fr; /* Collapse into a single column on mobile */
    row-gap: 2rem;
  }

  .perk-item {
    font-size: 1.8rem; /* Slightly smaller text for smaller screens */
  }
}

/* --- Showcase Section Base --- */
.story-showcase {
  background-color: var(--text-colour-light); /* White background */
  padding: 8rem 2rem; /* Generous top/bottom spacing */
  width: 100%;
}

.showcase-container {
  max-width: 120rem;
  margin: 0 auto; /* Centers the whole container on the page */
  display: flex;
  flex-direction: column;
  gap: 4rem; /* Clean spacing between layout layers */
}

/* --- Top Heading Style --- */
.showcase-top-heading {
  font-size: 4.8rem; /* Large, bold title */
  color: var(--primary-colour);
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Image / Media Styling --- */
.showcase-media {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.showcase-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- Bottom Text Content Area --- */
.showcase-details {
  display: flex;
  flex-direction: column;
  gap: 2.4rem; /* Gap between paragraphs */
  max-width: 100%;
  text-align: left;
}

.showcase-description {
  font-size: 1.8rem;
  color: var(--text-colour-dark, #333333);
  line-height: 1.7;
}

/* --- Bottom Bold Highlight Footer --- */
.showcase-footer-highlight {
  font-size: 2.8rem; /* Prominent callout sizing */
  font-weight: 800;
  color: var(--primary-colour);
  text-align: center;
  text-transform: uppercase;
  margin-top: 2rem; /* Separates it cleanly from paragraph block above */
  letter-spacing: 0.5px;
}

/* --- Responsive Layout (Mobile Adaptability) --- */
@media (max-width: 768px) {
  .story-showcase {
    padding: 5rem 2rem;
  }

  .showcase-container {
    gap: 3rem;
  }

  .showcase-top-heading {
    font-size: 3.6rem; /* Scaled for mobile */
  }

  .showcase-description {
    font-size: 1.6rem;
  }

  .showcase-footer-highlight {
    font-size: 2rem;
    line-height: 1.25; /* Keeps the highlight on a clean line balance for small devices */
  }

  /* Resetting values for mobile where max-width should not apply or change behavior */
  .showcase-media {
    max-width: 100%; /* Set to 100% on mobile to allow full width for better visibility on smaller screens */
  }
}

/* --- Approach Section Base --- */
.approach-section {
  background-color: var(--text-colour-light);
  padding: 12rem 2rem;
  width: 100%;
  border-top: 2px solid var(--primary-colour);
  padding-top: 12rem;
}

.approach-container {
  max-width: 120rem;
  margin: 0 auto; /* Centers the section content on screen */
}

/* --- Section Heading --- */
.approach-main-heading {
  font-size: 4.8rem; /* Match the size of vision block */
  color: var(--primary-colour);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6rem; /* Creates clean separation above the cards */
}

/* --- Responsive 3-Column Grid Layout --- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal wide columns */
  /* gap: 3.2rem; Spacing between the cards */
  gap: 4.8rem;
}

/* --- Individual Card Item --- */
.approach-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

/* Card Image Wrapper */
.card-media {
  width: 100%;
  aspect-ratio: 16 / 9; /* Recreates the clean rectangular aspect ratio */
  overflow: hidden;
  margin-bottom: 2.4rem; /* Spacing between image and title */
}

.card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Card Typography Content */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: left;
}

.card-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary-colour);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-align: center;
}

.card-text {
  font-size: 1.6rem;
  color: var(--text-colour-dark, #4a4a4a); /* Highly readable subtext */
  line-height: 1.5;
  text-align: center;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
  .approach-grid {
    grid-template-columns: 1fr; /* Stacks cards into 1 column on tablet/mobile */
    /* gap: 4rem; */
    gap: 12rem;
  }

  .approach-main-heading {
    font-size: 3.6rem;
    margin-bottom: 4rem;
  }

  .approach-section {
    padding: 5rem 2rem;
  }
}

/* ==========================================================================
   LP FEATURES SECTION - MAIN CONTENT
   ========================================================================== */

/* --- Base Layout & Background Settings --- */
.lp-features-wrapper {
  background-color: #ffffff;
  padding: 8rem 0;
  width: 100%;
  border-top: 2px solid var(--primary-colour);
}

.lp-features-section {
  width: 100%;
  max-width: 120rem; /* 1200px equivalent */
  padding: 0 2rem;
  margin: 0 auto;
}

/* --- Section Title Heading --- */
.lp-features-header h2 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 4rem;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--text-colour-dark, #111111);
  line-height: 1.25;
}

.lp-features-header span {
  font-family: "Cormorant", serif;
  font-size: 4.8rem;
  color: var(--primary-colour);
  font-weight: 700;
}

/* ==========================================================================
   SEGMENTED SWITCH INTERACTIVE NAVIGATION (OPTION 2 REDESIGN)
   ========================================================================== */
.lp-features-tabs {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Forces all tabs to share uniform structural height */
  gap: 0.6rem;
  background-color: #f1f5f9; /* Outer track capsule container color */
  padding: 0.6rem;
  /* border-radius: 1.2rem; */
  margin-bottom: 4rem;
  width: 100%;
}

.lp-features-tab-btn {
  flex: 1; /* Splits the horizontal grid row cleanly across all 5 buttons */
  background: none;
  border: none;
  color: #64748b;
  text-align: center;
  padding: 1.2rem 0.8rem;
  /* border-radius: 0.8rem; */
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;

  /* Text Wrapping Configuration for Corporate Titles */
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-features-tab-title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Hover & Active Selected Indicator Box States */
.lp-features-tab-btn:hover {
  color: #0f3a8c;
}

.lp-features-tab-btn.active {
  background-color: #ffffff; /* Floating white active block capsule */
  color: #0f3a8c;
  background-color: var(--primary-colour);
  color: var(--text-colour-light);
  box-shadow:
    0 0.4rem 1rem rgba(0, 0, 0, 0.06),
    0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   MAIN MAIN SHOWCASE SLIDESHOW SCREEN DISPLAY 
   ========================================================================== */
.lp-features-display {
  position: relative;
  width: 100%;
  height: 55rem; /* 550px standard desktop fallback height */
  /* border-radius: 0.8rem; */
  /* height: 65rem; */
  /* height: 68rem; */
  overflow: hidden;

  /* UPDATED: High-fidelity, layered smooth ambient shadow */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 30px 40px -15px rgba(0, 0, 0, 0.15);
}

/* Base Crossfade Animation Layer Control */
.lp-features-media-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}

.lp-features-media-item.active {
  opacity: 1;
  z-index: 2;
}

.lp-features-media-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Rich Dark Mask Layer for Crisp Typography Contrast */
.lp-features-display::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Text Block Overlay Positions */
.lp-features-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 55%; */
  width: 65%;
  height: 100%;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0 5rem;
}

.lp-features-text-block {
  position: absolute;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lp-features-text-block.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lp-features-text-block h3 {
  font-size: 3.2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #ffffff;
  line-height: 1.3;
}

.lp-features-text-block p {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #e5e5e5;
}

/* ==========================================================================
   VALUES BREAKDOWN LAYOUT SYSTEM (TAB 1 SUB-LIST BULLETS)
   ========================================================================== */
.lp-features-values-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 38rem; /* Confines list inside desktop viewport frame limits */
  overflow-y: auto;
  padding-right: 1.5rem;
}

/* Custom Scrollbar for Desktop Windows */
.lp-features-values-list::-webkit-scrollbar {
  width: 4px;
}
.lp-features-values-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}
.lp-features-values-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.lp-features-values-list li {
  margin-bottom: 2.5rem;
}
.lp-features-values-list li:last-child {
  margin-bottom: 0;
}

.lp-features-values-list h4 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.8rem;
  letter-spacing: -0.2px;
}

.lp-features-values-list p {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #e5e5e5;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM MEDIA QUERIES (TABLET & MOBILE FIXES)
   ========================================================================== */
@media (max-width: 1024px) {
  .lp-features-tabs {
    flex-wrap: wrap; /* Splits rows evenly on medium tablet screen shapes */
  }

  .lp-features-tab-btn {
    flex: calc(50% - 0.6rem); /* Creates fluid grid columns on medium devices */
  }
}

@media (max-width: 768px) {
  /* Dynamic Height Reconfiguration Engine to stop Mobile Text Overflow */
  .lp-features-display {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .lp-features-media-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Shifts overlay into the natural document structural flow to push dimensions */
  .lp-features-content-overlay {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5rem 2.5rem;
    align-items: flex-start;
  }

  /* Swaps to a bottom-to-top layout wash on smaller portable displays */
  .lp-features-display::after {
    background: linear-gradient(
      to top,
      rgba(11, 15, 26, 0.95) 0%,
      rgba(11, 15, 26, 0.75) 60%,
      rgba(11, 15, 26, 0.4) 100%
    );
  }

  .lp-features-text-block h3 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
  }

  .lp-features-text-block p {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #f1f5f9;
  }

  /* Disables structural desktop constraints to prevent overlapping cards */
  .lp-features-values-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .lp-features-tab-btn {
    flex: 1 1 100%; /* Spreads layout buttons into full-width track stacked pills */
  }

  .lp-features-header span {
    display: block;
  }
}

/* ==========================================================================
   SISTER COMPANY PROMOTIONAL LINK SECTION (UPDATED)
   ========================================================================= */

.lp-sister-link-section {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 8rem; /* Keeps healthy breathing room above the title */
  /* padding-bottom: 8rem; */
}

/* --- Content Block (Now completely clear of the image) --- */
.lp-sister-link-content {
  position: relative;
  z-index: 10;
  max-width: 85rem;
  padding: 0 2rem;
  text-align: center;
  margin-bottom: 5rem; /* Generous gap before the image begins */
}

/* Serif style title matching the premium brand design */
.lp-sister-link-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 4.8rem;
  font-weight: 400;
  color: var(--siam-premier-colour);
  margin-bottom: 2.5rem;
  letter-spacing: 0.5px;
}

.lp-sister-link-desc {
  font-size: 1.6rem;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 4rem;
}

/* --- Clean Wireframe Style CTA Button --- */
.lp-sister-link-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 3.5rem;
  border: 1.5px solid var(--siam-premier-colour);
  background-color: transparent;
  color: var(--siam-premier-colour);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0.2rem;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.lp-sister-link-cta .cta-arrow {
  margin-left: 1rem;
  font-size: 1.6rem;
  transition: transform 0.3s ease;
}

.lp-sister-link-cta:hover {
  background-color: var(--siam-premier-colour);
  color: var(--text-colour-light);
}

.lp-sister-link-cta:hover .cta-arrow {
  transform: translateX(5px);
}

/* --- Taller Image Backdrop Setup --- */
.lp-sister-link-bg-container {
  position: relative;
  width: 100%;
  height: 55rem; /* FIXED: Increased height to look premium and wide */
  z-index: 1;
  overflow: hidden;
}

/* FIXED: Top-edge feather/blur effect to seamlessly melt into the white page background */
.lp-sister-link-bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%; /* Smoothly fades out the top 35% of the photo */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 20%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* --- Transition Engine (B&W to Color) --- */
.lp-sister-link-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* Initial State on Desktop: Black & White */
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
}

/* Hover over the section brings back the rich colors smoothly */
.lp-sister-link-section:hover .lp-sister-link-bg {
  filter: grayscale(0%);
}

/* ==========================================================================
   TABLET & MOBILE OPTIMIZATIONS (No Grayscale)
   ========================================================================== */
@media (max-width: 900px) {
  .lp-sister-link-section {
    padding-top: 5rem;
  }

  .lp-sister-link-bg-container {
    height: 35rem; /* Scaled down taller height for tablet/mobile screens */
  }

  /* Bypasses grayscale filter on touch devices where hover is non-existent */
  .lp-sister-link-bg {
    filter: grayscale(0%);
  }

  .lp-sister-link-title {
    font-size: 3.6rem;
  }

  .lp-sister-link-desc {
    font-size: 1.5rem;
  }
}

/* publications page */
.publications-section {
  padding-top: 6.4rem;
}

#last-publications {
  padding-bottom: 8rem;
}

/* Container Layout - Viewport Filling */
.publication-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem; /* 24px gap */
  row-gap: 4rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4rem 2.4rem;
  box-sizing: border-box;
  /* background-color: #ffffff;  */
}

/* Card Container */
.pub-card {
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa; /* Visible light gray card base */

  overflow: hidden;
  text-decoration: none;
  width: 100%;
}

/* Image Container - 16:9 Landscape */
.pub-card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pub-card-image-wrapper picture,
.pub-card-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(0%);
  transition: transform 0.4s ease;
}

/* Single Date Tag Overlay */
.date-tag {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  background-color: rgba(0, 0, 0, 0.75);
  color: var(--text-colour-light);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  backdrop-filter: blur(0.4rem);
  z-index: 2;
}

/* Text Block Below Photo (Default: Light Gray Background) */
.pub-card-content {
  position: relative;
  padding: 2rem 2rem 2.4rem 2rem;
  background-color: #c4c4c4; /* Soft light gray background */

  border: 1px solid #e9ecef; /* Subtle border for structure */
  border-top: none; /* Flush against the image bottom */
  flex-grow: 1;
  overflow: hidden; /* Clips the sliding fill inside the box */
  z-index: 1;
  /* transition:
    background-color 0.3s ease,
    border-color 0.3s ease; */
}

/* The Sliding Blue Fill Layer (Left to Right) */
.pub-card-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-colour);
  transform: scaleX(0); /* Start hidden at 0 width */
  transform-origin: left center; /* Forces expansion from LEFT to RIGHT */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1; /* Sits behind the text */
}

.pub-card-title {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 600;
  color: #1a1a1a; /* Dark charcoal headline */
  text-align: left;
  transition: color 0.3s ease;
  text-transform: none;
}

/* ========================================================
   HOVER EFFECTS (Desktop)
   ======================================================== */

/* @media (hover: hover) and (pointer: fine) {

  .card-image-wrapper img {
    filter: grayscale(100%);
  }


  .pub-card:hover .card-image-wrapper img {
    filter: grayscale(0%);
    transform: scale(1.02);
  }


  .pub-card:hover .card-content {
    background-color: var(--primary-colour); 
    border-color: var(--primary-colour);
  }


  .pub-card:hover .card-title {
    color: #ffffff;
  }
} */

@media (hover: hover) and (pointer: fine) {
  /* 1. Slide blue background from left to right */
  .pub-card:hover .pub-card-content::before {
    transform: scaleX(1); /* Expands to 100% width */
  }

  /* 2. Text turns white on hover */
  .pub-card:hover .pub-card-title {
    color: #ffffff;
  }

  /* 3. Subtle image scale effect on hover */
  .pub-card:hover .pub-card-image-wrapper img {
    transform: scale(1.03);
  }
}

/* ========================================================
   MOBILE & TOUCH DEVICES
   ======================================================== */

/* @media (hover: none), (max-width: 1024px) {
  .publication-grid {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  }


  .card-image-wrapper img {
    filter: grayscale(0%);
  } */

@media (hover: none), (max-width: 1024px) {
  .publication-grid {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  }
}

/* article page */
/* Article Layout Container */
.article-container {
  max-width: 100rem; /* 1000px max readable width */
  margin: 0 auto;
  padding: 6rem 2.4rem;
  background-color: #ffffff;
}

/* Header Meta Bar (Authors + Download CTA) */
.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 3.2rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid #e5e5e5;
  gap: 2.4rem;
}

/* Author Section */
.author-block {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #767676;
  margin-bottom: 0.6rem;
}

.author-name {
  font-family: "Cormorant", serif; /* Elegant Fonts setup */
  font-size: 2.2rem;
  font-weight: 600;
  color: #111111;
  line-height: 1.3;
}

/* ========================================================
   SLIDING PDF BUTTON (Left-to-Right Hover Effect)
   ======================================================== */

.btn-pdf-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 2.8rem;
  background-color: #f8f9fa; /* Default light background */
  border: 1px solid #111111; /* Crisp sharp border */
  border-radius: 0; /* Sharp corners */
  color: #111111; /* Dark text initially */
  font-family: "Inter", sans-serif;
  font-size: 1.4rem; /* 14px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  text-decoration: none;
  overflow: hidden; /* Clips the sliding fill */
  z-index: 1;
  cursor: pointer;
}

/* Sliding Blue Fill Layer */
.btn-pdf-download::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-colour);
  transform: scaleX(0); /* Start hidden */
  transform-origin: left center; /* Anchors animation from LEFT to RIGHT */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -1; /* Sits behind text and icon */
}

.btn-text,
.btn-icon {
  transition:
    color 0.3s ease,
    stroke 0.3s ease;
}

/* Button Hover State */
@media (hover: hover) and (pointer: fine) {
  /* Expand blue fill from left to right */
  .btn-pdf-download:hover::before {
    transform: scaleX(1);
  }

  /* Text & Icon flip to white */
  .btn-pdf-download:hover {
    border-color: var(--primary-colour);
  }

  .btn-pdf-download:hover .btn-text {
    color: #ffffff;
  }

  .btn-pdf-download:hover .btn-icon {
    stroke: #ffffff;
  }
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
  .article-meta {
    flex-direction: column;
    align-items: center; /* Centers both author block & button horizontally */
    text-align: center; /* Centers the text inside author block */
    gap: 3.2rem;
  }

  .author-block {
    align-items: center; /* Centers the flex items inside author block */
  }

  .btn-pdf-download {
    width: 100%; /* Makes the button full-width on mobile */
    justify-content: center; /* Centers text + icon inside the button */
  }
}

/* article reusable content */
/* ========================================================
   REUSABLE PUBLICATION ARTICLE STYLES
   ======================================================== */

.article-container {
  max-width: 90rem; /* Clean, optimal reading measure (900px) */
  margin: 0 auto;
  padding: 4rem 2.4rem 8rem 2.4rem;
  background-color: #ffffff;
}

/* Article Sections & Dividers */
.article-section {
  margin-bottom: 4rem;
}

.article-subblock {
  margin-top: 2rem;
  margin-bottom: 2.4rem;
}

.article-divider {
  border: 0;
  height: 1px;
  background-color: #e5e5e5;
  margin: 5rem 0;
}

/* Reusable Typography Hierarchy */
.article-h2 {
  font-family: "Cormorant", serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.25;
  margin-bottom: 2.4rem;
}

.article-h3 {
  font-family: "Cormorant", serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #1b2a4a;
  line-height: 1.3;
  margin-top: 3.2rem;
  margin-bottom: 1.6rem;
}

.article-h4 {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #222222;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02rem;
}

.article-p {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem; /* 16px readability */
  line-height: 1.75; /* Comfortable line height */
  color: #333333;
  margin-bottom: 1.8rem;
}

/* Reusable List Styling */
.article-list {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #333333;
  padding-left: 2.4rem;
  margin-bottom: 2.4rem;
}

.article-list li {
  margin-bottom: 0.8rem;
}

.article-list.numbered {
  list-style-type: decimal;
}

/* Reusable Grid & Highlight Cards */
.article-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin: 2.8rem 0;
}

.article-card {
  background-color: #f8f9fa;
  padding: 2.4rem;
  border: 1px solid #e9ecef;
}

.article-card .article-list {
  padding-left: 1.8rem;
  margin-bottom: 0;
}

.accent-green {
  color: #1e7e34;
}
.accent-amber {
  color: #d97706;
}

/* Callout Box for Epilogue / Contact */
.article-contact-box {
  background-color: #f0f4f8;
  border-left: 4px solid #0056b3;
  padding: 2rem 2.4rem;
  margin-top: 3.2rem;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  color: #1a1a1a;
}

.article-contact-box a {
  color: #0056b3;
  font-weight: 600;
  text-decoration: underline;
}

/* Responsiveness for Article Grids */
@media (max-width: 768px) {
  .article-grid-2col {
    grid-template-columns: 1fr; /* Stacks side-by-side cards on mobile */
  }

  .article-h2 {
    font-size: 2.6rem;
  }

  .article-h3 {
    font-size: 2.1rem;
  }
}

/* 404 page */
/* 1. Center the entire layout in the middle of the screen */
.error-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  color: var(--text-colour-dark);
}

/* 2. Card container and text alignment */
.error-container {
  width: 100%;
  max-width: 480px;
  padding: 1.5rem;
  box-sizing: border-box;
}

.error-card {
  /* background: #ffffff; */
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center; /* Centers all inner text lines */
  /* box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05); */
}

/* 3. Typography styles */
.error-title {
  font-family: "Cormorant", serif;

  font-size: 5.6rem;
  font-weight: 700;
  /* margin-top: 2rem; */
  margin-bottom: 2rem;
  color: var(--primary-colour);
}

.error-text {
  font-size: 2.2rem;
  color: var(--text-colour-dark);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* Style for the dynamic path code snippet */
/* .error-code {
  background-color: #f1f5f9;
  color: #0f172a;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95em;
  border: 1px solid #e2e8f0;
} */

.error-subtext {
  font-size: 1.8rem;
  color: #64748b;
  /* color: var(--text-colour-dark); */
  margin: 0;
}

/* Style for the countdown timer number */
.error-timer {
  font-weight: 700;
  color: #2563eb;
}

/* 4. Mobile responsiveness */
@media (max-width: 576px) {
  /* Reduce outer padding so the text has more width to spread out */
  .error-container {
    padding: 1rem;
  }

  .error-card {
    padding: 1.5rem 0.5rem;
  }

  /* Scale down the title so "Page Not Found" doesn't wrap into 3-4 lines */
  .error-title {
    font-size: 3.2rem;
    margin-bottom: 1.25rem;
  }

  /* Scale down body text for better reading flow */
  .error-text {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .error-subtext {
    font-size: 1.3rem;
  }
}

/* practices - page */

.practices-section {
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}
/* 1. Grid Container: 3 Columns on Desktop */
.practices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6rem; /* Slightly wider 36px gap for larger cards */
  max-width: 140rem; /* 1400px */
  margin: 0 auto;
  padding: 4rem 2.4rem;
}

/* Tablet Breakpoint (2 Columns) */
@media (max-width: 900px) {
  .practices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }
}

/* Mobile Breakpoint (1 Column) */
@media (max-width: 600px) {
  .practices-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.6rem;
  }
}

/* 2. Card Link Wrapper (Sharp Corners) */
.practices-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08); /* 4px 12px */
  isolation: isolate;
}

/* 3. Image Container (4:3 Landscape Ratio) */
.practices-card-image {
  position: relative;
  width: 100%;
  /* aspect-ratio: 4 / 3; */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.practices-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition:
    transform 0.5s ease,
    filter 0.5s ease; */
  transition:
    transform 0.8s ease,
    filter 0.8s ease;
}

/* Default Gradient Overlay for Base Text Legibility */
.practices-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  /* transition: background 0.4s ease; */
  transition: background 0.8s ease;
}

/* Hover State: Soft Dimming & Subtle Scale */
.practices-card:hover .practices-card-image img {
  transform: scale(1.04);
  filter: brightness(0.9); /* Subtle dimming */
}

.practices-card:hover .practices-card-overlay {
  background: rgba(0, 0, 0, 0.45); /* Gentle overall overlay */
}

/* 4. Text Content Overlay */
.practices-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.8rem 2.4rem; /* 28px 24px - slightly roomier padding */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Topic Title */
.practices-card-title {
  margin: 0;
  font-size: 2.2rem; /* 22px */
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  /* transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Move Title Up on Hover */
.practices-card:hover .practices-card-title {
  transform: translateY(-0.6rem); /* -6px shift */
}

/* Description Text */
.practices-card-description {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(0.8rem);
  /* transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    max-height 0.4s ease,
    margin-top 0.4s ease; */
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    max-height 0.8s ease,
    margin-top 0.8s ease;
}

/* Reveal Description on Hover */
.practices-card:hover .practices-card-description {
  opacity: 1;
  max-height: 12rem;
  margin-top: 1rem;
  transform: translateY(0);
}

/* Practice-details page */

/* 1. Prevent the scaling image from expanding the container or causing scrollbars */
.practices-details-hero-section {
  overflow: hidden;
  width: 100%;
}

/* 2. Hero Image Styling & Animation */
.practices-details-hero-img {
  height: 60rem;
  object-fit: cover;
  width: 100%;

  /* Applies the 4-second zoom animation on page load */
  animation: heroZoom 4s ease-out forwards;
  animation: heroZoom 8s ease-out forwards;
}

/* 3. Keyframe Definition */
@keyframes heroZoom {
  0% {
    transform: scale(1); /* Starts at normal size */
  }
  100% {
    transform: scale(1.15); /* Zooms in 15% and stops */
    transform: scale(1.3); /* Zooms in 15% and stops */
  }
}

/* Layout Container */

/* Base Container */
.practices-details-content {
  padding: 6rem 2rem; /* 60px 20px */
  /* background-color: #ffffff; */
  /* color: #2b2b2b; */
  color: var(--text-colour-dark);
  font-family: inherit;
  line-height: 1.6;
}

.practices-details-container {
  max-width: 114rem; /* 1140px */
  margin: 0 auto;
}

/* Header & Intro Section */
.practices-details-header {
  text-align: center;
  margin-bottom: 3rem; /* 30px */
  border-bottom: 0.2rem solid #e2e8f0; /* 2px */
  /* border-bottom: 0.2rem solid var(--primary-colour);  */
  padding-bottom: 2rem; /* 20px */
}

.practices-details-title {
  font-size: 3.6rem; /* Increased from 3.2rem -> 36px */
  font-weight: 700;
  color: var(--primary-colour);
  margin-bottom: 0.8rem; /* 8px */
}

.practices-details-subtitle {
  font-size: 2rem; /* Increased from 1.8rem -> 20px */
  color: var(--text-colour-dark);
  font-weight: 500;
}

.practices-details-description {
  font-size: 1.8rem; /* Increased from 1.6rem -> 18px */
  /* color: #475569;
  color: var(--text-colour-dark);
  color: #3f3f46; */
  color: var(--text-colour-grey);
  line-height: 1.7;
  margin-bottom: 4.5rem; /* 45px */
}

.practices-details-description p {
  margin-bottom: 1.5rem; /* 15px */
}

/* Grid Section (Services & Experience) */
.practices-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem; /* 35px */
  margin-bottom: 4.5rem; /* 45px */
}

.practices-details-card {
  background-color: #f8fafc;
  padding: 3rem; /* 30px */
  border-radius: 0;
  /* border-left: 0.4rem solid #1e3a8a;  */
  border-left: 0.4rem solid var(--primary-colour); /* 4px */
}

.practices-details-card-title {
  font-size: 2.2rem; /* Increased from 2.0rem -> 22px */
  color: var(--primary-colour);
  margin-bottom: 1.8rem; /* 18px */
}

.practices-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.practices-details-list li {
  position: relative;
  padding-left: 2rem; /* 20px */
  margin-bottom: 1.2rem; /* 12px */
  font-size: 1.6rem; /* Increased from 1.5rem -> 16px */
  color: var(--text-colour-light-grey);
  /* color: var(--text-colour-grey); */
}

.practices-details-list li::before {
  content: "•";
  color: var(--primary-colour);
  font-weight: bold;
  font-size: 2rem; /* Increased bullet size to match -> 20px */
  position: absolute;
  left: 0;
  top: -0.2rem;
}

.practices-details-experience-list li {
  margin-bottom: 1.4rem;
}

/* Industries We Serve Tags */
.practices-details-industries-section {
  margin-bottom: 4.5rem;
}

.practices-details-section-title {
  font-size: 2.2rem; /* Increased from 2.0rem -> 22px */
  color: var(--text-colour-dark);
  margin-bottom: 1.8rem; /* 18px */
}

.practices-details-industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem; /* 12px */
  list-style: none;
  padding: 0;
}

.practices-details-industry-tags li {
  background-color: #e2e8f0;
  color: #1e293b;
  padding: 1rem 1.6rem; /* 10px 16px */
  border-radius: 0;
  font-size: 1.5rem; /* Increased from 1.4rem -> 15px */
  font-weight: 500;
}

/* Why Choose Us Callout */
.practices-details-callout {
  background-color: var(--primary-colour);
  color: var(--text-colour-light);
  padding: 3.5rem; /* 35px */
  border-radius: 0;
}

.practices-details-callout-title {
  /* font-family: "Cormorant", serif; */
  font-size: 2.4rem;

  margin-bottom: 1.2rem;
  color: var(--text-colour-light);
}

.practices-details-callout p {
  color: #cbd5e1;
  font-size: 1.8rem; /* Increased from 1.6rem -> 18px */
  line-height: 1.7;
  margin: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .practices-details-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .practices-details-title {
    font-size: 2.8rem; /* 28px */
  }

  .practices-details-subtitle {
    font-size: 1.8rem; /* 18px */
  }

  .practices-details-card,
  .practices-details-callout {
    padding: 2.2rem; /* 22px */
  }
}

.practices-details-subgroup-title {
  font-size: 1.8rem; /* 18px */
  font-weight: 600;
  color: #1e3a8a;
  margin-bottom: 1.2rem; /* 12px */
  border-bottom: 0.1rem solid #e2e8f0;
  padding-bottom: 0.4rem;
}

.practices-details-card-intro {
  font-size: 1.6rem; /* 16px */
  color: #475569;
  color: var(--text-colour-light-grey);

  margin-bottom: 1.5rem; /* 15px */
  line-height: 1.5;
}