.about-hero {
  position: relative;
  min-height: 560px;
  display: grid;
  align-items: end;
  padding: 120px max(16px, calc((100vw - 1180px) / 2)) 58px;
  overflow: hidden;
  color: var(--white);
  background: var(--dark);
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 23, 28, 0.08), rgba(7, 23, 28, 0.88));
}

.about-hero-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-hero-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 830px;
}

.about-hero h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.7rem, 6vw, 5.2rem);
  line-height: 1.02;
}

.about-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 54px;
  align-items: center;
}

.quality-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  padding-inline: max(16px, calc((100vw - 1180px) / 2));
  background: #e9f1ee;
}

.quality-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

.quality-panel p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.team-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  text-align: center;
  box-shadow: 0 10px 28px rgba(16, 35, 42, 0.08);
}

.team-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.team-grid h3 {
  margin: 18px 0 6px;
  font-size: 1.12rem;
}

.team-grid p {
  min-height: 44px;
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}

.team-grid a {
  color: var(--blue);
  font-weight: 800;
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
}

.stats-band article {
  min-height: 210px;
  padding: 28px;
  background: var(--dark);
  color: var(--white);
}

.stats-band span {
  color: #78c9c5;
  font-weight: 800;
}

.stats-band h3 {
  margin: 42px 0 0;
  font-size: 1.35rem;
  line-height: 1.25;
}

@media (max-width: 980px) {
  .about-split,
  .quality-panel {
    grid-template-columns: 1fr;
  }

  .team-grid,
  .stats-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .about-hero {
    min-height: 520px;
    padding-top: 92px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-grid img:nth-child(2) {
    display: none;
  }

  .team-grid,
  .stats-band {
    grid-template-columns: 1fr;
  }
}
.topbar{
  background:#2f2b7f;
  color:#fff;
  padding:12px 30px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.topbar a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
}

.social-links{
  display:flex;
  gap:15px;
}

/* NAVBAR */

.navbar{
  background:#fff;
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 60px;
}
.brand{
  display:flex;
  align-items:center;
}

.brand img{
  width:240px;
  height: auto;
  display: block;
}

/* MENU */

.menu{
  display:flex;
  align-items:center;
  gap:35px;

  list-style:none;
}

.menu li{
  position:relative;
}

.menu li a{
  text-decoration:none;
  color:#000;
  font-size:18px;
  font-weight:700;
}

/* BUTTON */

.service-btn{
  background:none;
  border:none;
  font-size:18px;
  font-weight:500;
  cursor:pointer;
}

/* DROPDOWN */

.mega-menu{
  position:absolute;
  top:45px;
  left:-20px;

  display:none;
  z-index:100;
}

.mega-menu.show{
  display:flex;
}

/* LEFT MENU */

.left-menu{
  width:270px;
  background:#0d5f91;
}

.menu-item{
  position:relative;

  color:#fff;
  padding:22px 35px;

  font-size:18px;
  font-weight:600;

  background:#0d5f91;
  border-bottom:1px solid rgba(255,255,255,0.2);

  cursor:pointer;
}

.menu-item:hover{
  background:#000;
}

/* SUBMENU */

.submenu{
  position:absolute;

  left:100%;
  top:0;

  width:500px;

  background:#0d5f91;

  display:none;
}

.menu-item:hover .submenu{
  display:block;
}

.submenu a{
  display:block;

  color:#fff !important;
  padding:22px 35px;

  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,0.2);
}

.submenu a:hover{
  background:#084b73;
}

/* BUTTON */

.quote-link{
  background:#0b74c4;
  color:#fff !important;

  padding:15px 25px;
  border-radius:8px;
}