/* ============================================================
   ALTULA — about.css
   About page: brand introduction, brand film, qualifications,
   service guarantee.
   Hero uses the shared .page-hero--image from common.css;
   header / footer styles come from style.css.
   ============================================================ */

/* ============================================================
   Brand introduction (image + text)
   ============================================================ */
.about-brand, .e-con.e-grid.about-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about-brand__media {
  position: relative;
}

.about-brand__media img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Gold frame accent (mirrors the homepage brand media) */
.about-brand__media::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  z-index: -1;
  width: 55%;
  height: 55%;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
}

.about-brand__subtitle {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-ink);
}

.about-brand__lead {
  margin-top: 0.75rem;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-ink);
}

.about-brand__body p + p,
.about-brand__body p + ul,
.about-brand__body ul + p {
  margin-top: 1.25rem;
}

/* Philosophy points with gold markers */
.about-brand__points {
  display: grid;
  gap: 0.75rem;
}

.about-brand__points li {
  position: relative;
  padding-left: 1.5rem;
}

.about-brand__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--color-gold);
}

/* Stacked philosophy / capabilities rows */
.about-brand + .about-brand {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.about-brand--reverse .about-brand__media {
  order: 2;
}

.about-brand--reverse .about-brand__media::after {
  right: auto;
  left: -1.25rem;
}

/* ============================================================
   Brand film
   ============================================================ */
.about-video {
  max-width: 64rem;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.about-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   Qualifications
   ============================================================ */
.qual-grid, .e-con.e-grid.qual-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.qual-card {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}


.qual-card:hover {
  transform: translateY(-0.25rem);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-card);
}

.qual-card__icon, .qual-grid .qual-card .elementor-image-box-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold);
}

.qual-card__icon svg, .qual-grid .qual-card .elementor-image-box-img img{
  width: 1.75rem;
  height: 1.75rem;
}

.qual-card__title {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink);
}

.qual-card__text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

/* ============================================================
   Service guarantee
   ============================================================ */
.service-grid, .e-con.e-grid.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.service-card, .e-con.e-grid.service-grid .service-card{
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

.service-card:hover, .e-con.e-grid.service-grid .service-card:hover{
  transform: translateY(-0.25rem);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-card);
}

.service-card__index, .service-card__index .elementor-heading-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gold);
}
.service-card__title{  margin-top: 0.75rem;}
.service-card__title, .service-card__title .elementor-heading-title{

  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
.service-card__text{ margin-top: 0.5rem;}
.service-card__text, .service-card__text .elementor-heading-title{
 
  font-size: 0.9375rem;
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- 768px — 1024px : tablet portrait --- */
@media (max-width: 64rem) {
  .about-brand, .e-con.e-grid.about-brand{
    grid-template-columns: 1fr;
  }

  .about-brand__media {
    max-width: 40rem;
  }

  /* Reversed rows stack image-first on smaller screens */
  .about-brand--reverse .about-brand__media {
    order: 0;
  }

  .qual-grid, .e-con.e-grid.qual-grid,
  .service-grid, .e-con.e-grid.service-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- < 768px : mobile --- */
@media (max-width: 48rem) {
  .qual-grid, .e-con.e-grid.qual-grid,
  .service-grid, .e-con.e-grid.service-grid{
    grid-template-columns: 1fr;
  }
}