:root {
  --navy: #091827;
  --navy2: #102b40;
  --yellow: #f6c343;
  --cream: #f4f1e9;
  --paper: #fbfaf6;
  --ink: #14202b;
  --muted: #69737c;
  --line: #d9ddd9;
  --white: #fff
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
.nav-actions .nav-call {
  display: inline-flex;
}
@media (max-width: 800px) {

  .site-header .nav-actions .nav-call {
    display: none;
  }

  .site-header .menu-btn {
    display: flex;
  }

  .site-header .nav-whatsapp {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .site-header .wa-text {
    display: none;
  }
/* Desktop / Big Screen */
.nav-call {
  display: inline-flex;
}

/* Mobile / Responsive */
@media (max-width: 768px) {
  .nav-call {
    display: none !important;
  }
}
}
html {
  scroll-behavior: smooth
}

body {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6
}

a {
  text-decoration: none;
  color: inherit
}

.container {
  width: min(1180px, 92%);
  margin: auto
}

.top-strip {
  background: #06111d;
  color: #b9c3cb;
  font-size: 11px;
  letter-spacing: .7px;
  position: relative;
}

.top-inner {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  position: sticky;
}

.header {
  background: rgba(251, 250, 246, .96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px)
}

.nav-wrap {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy)
}

.logo>span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.logo-symbol {
  width: 42px;
  height: 42px;
  background: var(--navy);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 8px
}

.logo-symbol i {
  display: block;
  width: 6px;
  background: var(--yellow);
  transform: skew(-18deg)
}

.logo-symbol i:nth-child(1) {
  height: 16px
}

.logo-symbol i:nth-child(2) {
  height: 23px
}

.logo-symbol i:nth-child(3) {
  height: 12px
}

.nav {
  display: flex;
  align-items:center;
  gap: 80px;
  font-size: 13px;
  font-weight: 700
}

.nav a {
  transition: .2s
}

.nav a:hover {
  color: #8a6a0f
}

.site-header .nav-actions .nav-call {
    padding: 10px 16px;
    min-width: auto;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
    white-space: nowrap;
}

.nav-call {
  background: var(--navy);
  color: #fff;
  justify-content: center;
  padding: 10px 16px;
    min-width: auto;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
   white-space: nowrap;
}

.nav-call span {
  color: var(--yellow);
  margin-left: 20px
}

.menu-btn {
  display: none;
  border: 0;
  background: none;
  font-size: 25px;
  color: var(--navy)
}

.hero {
  height: 730px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=88");
  background-size: cover;
  background-position: center
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 27, .93) 0%, rgba(5, 21, 35, .77) 42%, rgba(5, 18, 28, .2) 100%)
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 90px 90px
}

  /* Stats */

    .stats-grid div {
        padding-bottom: 20px;

        border-right: 0 !important;
        border-bottom: 1px solid #444;
    }

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-copy {
  max-width: 790px
}

.kicker,
.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d9e1e5;
}

.kicker span {
  width: 30px;
  height: 2px;
  background: var(--yellow)
}

.hero h1 {
  font: 700 clamp(70px, 9vw, 122px)/.86 "Barlow Condensed", sans-serif;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 25px 0;
}

.hero h1 em {
  color: var(--yellow);
  font-style: normal
}

.lead {
  font-size: 18px;
  color: #d3dce1;
  max-width: 620px
}
.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 35px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 12px;
  border: 1px solid transparent;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  min-width: 170px;
  border-radius: 00%;
}

.btn-yellow {
  background: #000;
  color: #ffffff;
  gap: 12px;
  padding-left: 10px;
}

.btn-yellow:hover {
  background: #ffd15a
}
.btn-yellow:hover {
 color: #000000;
}
.btn-line {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: rgba(255, 255, 255, .04)
}
.btn-line:hover {
   color: #000000;
}

.btn-line:hover {
   background-color: #ffd15a;
   transition-duration: 2ms;
   animation-delay: 1ms;
}
.hero-badge {
  width: 160px;
  height: 160px;
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
  background: rgba(6, 18, 29, .35);
  backdrop-filter: blur(8px)
}

.hero-badge strong {
  font: 600 42px "Barlow Condensed";
  color: var(--yellow)
}

.hero-badge span {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1.5
}

.scroll-note {
  position: absolute;
  z-index: 3;
  bottom: 25px;
  left: 4%;
  font-size: 9px;
  letter-spacing: 2px;
  color: #bbc5ca
}

.scroll-note span {
  color: var(--yellow);
  font-size: 17px;
  margin-left: 9px
}

.section {
  padding: 110px 0
}

.intro {
  background: var(--paper)
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.section-label {
  color: #8b6d16;
  margin-bottom: 18px
}

.intro h2,
.section-head h2,
.applications h2,
.contact h2 {
  font: 600 clamp(50px, 6vw, 78px)/.95 "Barlow Condensed", sans-serif;
  letter-spacing: -1px;
  text-transform: uppercase
}

.intro h2 span,
.section-head h2 span,
.applications h2 span,
.contact h2 span {
  color: #9b7a18
}

.intro-text {
  font-size: 18px;
  max-width: 560px;
  color: #5d6870
}

.intro-text p+p {
  margin-top: 20px
}

.intro-text strong {
  color: var(--ink)
}

.under-link {
  display: inline-block;
  margin-top: 30px;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px
}

.under-link span {
  margin-left: 18px
}

/* =================================================
   STATS / COUNTER
================================================= */

.stats {
    padding: 45px 0;
    background: #1b1b1b;
    color: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}

.stat-item {
    border-right: 1px solid #444;
}

.stat-item:last-child {
    border-right: none;
}

.stat-item strong {
    display: block;

    font-family: "Playfair Display", serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-item span {
    display: block;

    margin-top: 5px;

    color: #aaa;

    font-size: 11px;
    letter-spacing: 2px;

    text-transform: uppercase;
}


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

@media (max-width: 850px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 0;
    }

    .stat-item:nth-child(2) {
        border-right: none;
    }

    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {
        padding-top: 25px;
    }

}


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

@media (max-width: 560px) {

    .stats {
        padding: 40px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .stat-item {
        padding: 20px 0;

        border-right: none;
        border-bottom: 1px solid #444;
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-item strong {
        font-size: 40px;
    }

    .stat-item span {
        font-size: 10px;
    }

}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6bd18b;
  margin-right: 6px
}

.services {
  background: #ebece8
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 55px
}

.section-head>p {
  max-width: 390px;
  color: #69737c;
  font-size: 15px
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.service-card {
  background: var(--white);
  border: 1px solid #dfe3df;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(9, 24, 39, .1)
}

.service-image {
  height: 255px;
  background-size: cover;
  background-position: center;
  position: relative
}

.service-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35))
}

.mech {
  background-image: url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1200&q=85")
}

.plaster {
  background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=85")
}

.ceiling {
  background-image: url("https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1200&q=85")
}

.service-body {
  padding: 27px
}

.service-no {
  font: 600 14px "Barlow Condensed";
  color: #a17d13
}

.service-card h3 {
  font: 600 30px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin: 10px 0 15px
}

.service-card p {
  color: #68727a;
  font-size: 14px
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px
}

.service-tags span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid #d7dbd8;
  padding: 6px 8px
}

.feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #0e2435;
  color: #fff
}

.feature-image {
  min-height: 690px;
  background-image: linear-gradient(rgba(5, 17, 27, .18), rgba(5, 17, 27, .18)), url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1500&q=88");
  background-size: cover;
  background-position: center
}

.feature-content {
  padding: 100px 9%;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.feature-content .section-label {
  color: var(--yellow)
}

.feature-content h2 {
  font: 600 clamp(50px, 5vw, 72px)/.95 "Barlow Condensed";
  text-transform: uppercase;
  margin-bottom: 22px
}

.feature-content h2 span {
  color: var(--yellow)
}

.feature-lead {
  color: #b9c6cd;
  max-width: 530px
}

.steps {
  margin-top: 38px
}

.step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.step b {
  color: var(--yellow);
  font: 600 23px "Barlow Condensed"
}

.step strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px
}

.step span {
  font-size: 13px;
  color: #aebbc3
}

.applications {
  background: var(--paper)
}

.applications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.application-list {
  border-top: 1px solid #d4d9d5
}

.application-list>div {
  padding: 24px 0;
  border-bottom: 1px solid #d4d9d5;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 15px
}

.application-list span {
  font: 600 15px "Barlow Condensed";
  color: #9b7a18
}

.application-list strong {
  font-size: 17px
}

.application-list p {
  grid-column: 2;
  color: #737d84;
  font-size: 13px;
  margin-top: 3px
}

.cta {
  background: var(--yellow);
  color: #111;
  padding: 72px 0
}

.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px
}

.cta .section-label {
  color: #6f560e
}

.cta h2 {
  font: 600 clamp(50px, 6vw, 75px)/.9 "Barlow Condensed";
  text-transform: uppercase
}

.cta h2 span {
  color: #7a5b00
}

.cta-actions {
  display: flex;
  gap: 10px
}

.btn-white {
  background: #fff;
  color: #111
}

.contact {
  background: #eef0ed
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.contact-copy>p:not(.section-label) {
  color: #69737c;
  max-width: 500px;
  margin-top: 20px
}

.contact-list {
  display: grid;
  gap: 20px;
  margin-top: 35px
}

.contact-list a,
.contact-list div {
  display: flex;
  flex-direction: column
}

.contact-list small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #8a9398
}

.contact-list strong {
  font-size: 15px
}

.contact-form {
  background: #fff;
  border: 1px solid #dce1dd;
  padding: 35px;
  display: grid;
  gap: 16px
}

.contact-form label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #cdd3cf;
  background: #f9faf7;
  padding: 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #8d721e
}

.contact-form .btn {
  border: 0;
  cursor: pointer
}

.form-note {
  font-size: 11px;
  color: #69737c
}

.footer {
  background: #06111d;
  color: #aebbc3
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.4fr;
  gap: 50px;
  padding: 70px 0
}

.logo.light {
  color: #fff
}

.logo.light small {
  color: #7f8d96
}

.footer-brand p {
  font-size: 13px;
  max-width: 270px;
  margin-top: 20px;
  color: #788893
}

.footer-grid h4 {
  color: #fff;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 15px
}

.footer-grid div:not(:first-child) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px
}

.footer-grid a:hover {
  color: var(--yellow)
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .6px;
  color: #6f7f89
}

@media(max-width:900px) {
  .nav {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 25px 4%;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start
  }

  .nav.open {
    display: flex
  }

  .menu-btn {
    display: block
  }

  .hero {
    height: 690px
  }

  .hero-badge {
    display: none
  }

  .intro-grid,
  .applications-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .license-grid {
    grid-template-columns: 1fr 1fr
  }

  .license-grid>div {
    border-bottom: 1px solid rgba(255, 255, 255, .12)
  }

  .license-grid>div:nth-child(2) {
    border-right: 0
  }

  .service-grid {
    grid-template-columns: 1fr 1fr
  }

  .feature {
    grid-template-columns: 1fr
  }

  .feature-image {
    min-height: 420px
  }

  .cta-inner {
    display: block
  }

  .cta-actions {
    margin-top: 30px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .top-inner {
    font-size: 9px
  }

  .top-inner span:last-child {
    display: none
  }

  .nav-wrap {
    min-height: 72px
  }

  .hero {
    height: 660px
  }

  .hero h1 {
    font-size: 72px
  }

  .lead {
    font-size: 15px
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start
  }

  .btn {
    min-width: 185px
  }

  .section {
    padding: 80px 0
  }

  .intro h2,
  .section-head h2,
  .applications h2,
  .contact h2 {
    font-size: 55px
  }

  .section-head {
    display: block
  }

  .section-head>p {
    margin-top: 20px
  }

  .license-grid {
    grid-template-columns: 1fr
  }

  .license-grid>div,
  .license-grid>div:nth-child(2) {
    border-right: 0
  }

  .service-grid {
    grid-template-columns: 1fr
  }

  .feature-content {
    padding: 75px 6%
  }

  .feature-content h2 {
    font-size: 58px
  }

  .cta-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .contact-form {
    padding: 23px
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    display: block
  }

  .footer-bottom span+span {
    display: block;
    margin-top: 7px
  }
}

/* ABOUT PAGE */
.about-page .nav a.active {
  color: #8a6a0f
}
.nav a.active {
  color: #8a6a0f
}
.about-hero {
  height: 620px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center
}

.about-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=88");
  background-size: cover;
  background-position: center
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 27, .95) 0%, rgba(5, 21, 35, .8) 45%, rgba(5, 18, 28, .28) 100%)
}

.about-hero-content {
  position: relative;
  z-index: 2
}

.about-hero h1 {
  font: 700 clamp(68px, 9vw, 118px)/.86 "Barlow Condensed", sans-serif;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 25px 0
}

.about-hero h1 em {
  color: var(--yellow);
  font-style: normal
}

.about-hero .lead {
  max-width: 650px
}

.about-story {
  background: var(--paper)
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.about-story-title h2,
.about-highlight h2 {
  font: 600 clamp(50px, 6vw, 78px)/.95 "Barlow Condensed", sans-serif;
  letter-spacing: -1px;
  text-transform: uppercase
}

.about-story-title h2 span,
.about-highlight h2 span {
  color: #9b7a18
}

.about-story-copy {
  font-size: 17px;
  color: #626d75;
  max-width: 580px
}

.about-story-copy p+p {
  margin-top: 21px
}

.about-story-copy strong {
  color: var(--ink)
}

.about-facts {
  background: var(--navy);
  color: #fff;
  padding: 80px 0
}

.about-facts-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-left: 1px solid rgba(255, 255, 255, .13)
}

.about-fact-intro,
.about-fact {
  min-height: 150px;
  padding: 30px;
  border-right: 1px solid rgba(255, 255, 255, .13);
  border-bottom: 1px solid rgba(255, 255, 255, .13)
}

.about-fact-intro {
  grid-row: span 2;
  background: #0d2334
}

.about-fact-intro .section-label {
  color: var(--yellow)
}

.about-fact-intro h2 {
  font: 600 55px/.92 "Barlow Condensed";
  text-transform: uppercase
}

.about-fact-intro h2 span {
  color: var(--yellow)
}

.about-fact small {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: #7f909c;
  margin-bottom: 9px
}

.about-fact strong {
  font-size: 14px;
  line-height: 1.4
}

.about-services {
  background: #ebece8
}

.about-service-list {
  border-top: 1px solid #cfd4d0
}

.about-service-row {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 25px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid #cfd4d0;
  transition: .25s
}

.about-service-row:hover {
  padding-left: 10px;
  background: rgba(255, 255, 255, .45)
}

.about-service-row .service-no {
  font: 600 15px "Barlow Condensed";
  color: #9b7a18
}

.about-service-row h3 {
  font: 600 31px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin-bottom: 9px
}

.about-service-row p {
  font-size: 13px;
  color: #707a81;
  max-width: 720px
}

.about-service-row>b {
  font: 600 22px "Barlow Condensed";
  color: #8a6a0f;
  text-align: right
}

.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0e2435;
  color: #fff
}

.about-values-image {
  min-height: 650px;
  background-image: linear-gradient(rgba(5, 17, 27, .2), rgba(5, 17, 27, .2)), url("https://images.unsplash.com/photo-1531058020387-3be344556be6?auto=format&fit=crop&w=1500&q=88");
  background-size: cover;
  background-position: center
}

.about-values-content {
  padding: 90px 9%;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.about-values-content .section-label {
  color: var(--yellow)
}

.about-values-content h2 {
  font: 600 clamp(50px, 5vw, 72px)/.92 "Barlow Condensed";
  text-transform: uppercase;
  margin-bottom: 20px
}

.about-values-content h2 span {
  color: var(--yellow)
}

.about-principles {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px
}

.about-principles>div {
  display: grid;
  grid-template-columns: 35px 1fr;
  column-gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.about-principles b {
  color: var(--yellow);
  font: 600 19px "Barlow Condensed"
}

.about-principles strong {
  font-size: 14px
}

.about-principles span {
  grid-column: 2;
  color: #aebbc3;
  font-size: 12px;
  margin-top: 3px
}

.about-highlight {
  background: var(--paper)
}

.about-highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.about-highlight-grid>div:last-child {
  max-width: 560px;
  color: #66717a;
  font-size: 17px
}

.about-highlight-grid .under-link {
  color: var(--ink)
}

@media(max-width:900px) {

  .about-story-grid,
  .about-highlight-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .about-facts-grid {
    grid-template-columns: 1fr 1fr
  }

  .about-fact-intro {
    grid-column: 1/-1;
    grid-row: auto
  }

  .about-values {
    grid-template-columns: 1fr
  }

  .about-values-image {
    min-height: 420px
  }

  .about-service-row {
    grid-template-columns: 45px 1fr 30px
  }

  .about-principles {
    grid-template-columns: 1fr
  }

  .about-principles>div {
    grid-template-columns: 35px 1fr
  }
}

@media(max-width:600px) {
  .about-hero {
    height: 600px
  }

  .about-hero h1 {
    font-size: 70px
  }

  .about-story-title h2,
  .about-highlight h2 {
    font-size: 55px
  }

  .about-facts-grid {
    grid-template-columns: 1fr
  }

  .about-fact-intro {
    grid-column: auto
  }

  .about-fact-intro h2 {
    font-size: 50px
  }

  .about-service-row {
    grid-template-columns: 35px 1fr;
    gap: 12px
  }

  .about-service-row>b {
    display: none
  }

  .about-service-row h3 {
    font-size: 27px
  }

  .about-values-content {
    padding: 75px 6%
  }

  .about-values-content h2 {
    font-size: 58px
  }

  .about-highlight-grid>div:last-child {
    font-size: 15px
  }
}

/* Transparency section */
.about-transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start
}

.about-transparency {
  background: #f5f7f9
}

.transparency-card {
  background: #fff;
  border: 1px solid #e3e7eb;
  padding: 34px;
  box-shadow: 0 14px 40px rgba(15, 30, 45, .06)
}

.transparency-card>p {
  font-size: 17px;
  line-height: 1.75;
  color: #4b5560;
  margin: 0 0 24px
}

.transparency-points {
  display: grid;
  gap: 14px;
  margin-bottom: 22px
}

.transparency-points div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 600;
  color: #17212b
}

.transparency-points b {
  color: #e4b21b;
  font-size: 18px;
  line-height: 1
}

.transparency-card small {
  display: block;
  color: #7a838c;
  line-height: 1.6;
  border-top: 1px solid #e7eaed;
  padding-top: 18px
}

@media(max-width:800px) {
  .about-transparency-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .transparency-card {
    padding: 25px
  }
}

/* SERVICES PAGE */
.services-page .nav a.active {
  color: #8a6a0f
}

.services-hero {
  height: 650px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center
}

.services-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=2200&q=88");
  background-size: cover;
  background-position: center
}

.services-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 27, .96) 0%, rgba(5, 21, 35, .84) 46%, rgba(5, 18, 28, .25) 100%)
}

.services-hero-content {
  position: relative;
  z-index: 2
}

.services-hero h1 {
  font: 700 clamp(68px, 9vw, 118px)/.86 "Barlow Condensed";
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 25px 0
}

.services-hero h1 em {
  color: var(--yellow);
  font-style: normal
}

.services-hero .lead {
  max-width: 720px
}

.services-hero .btn-line {
  border-color: rgba(255, 255, 255, .55)
}

.services-intro {
  background: var(--paper)
}

.services-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.services-intro h2,
.detail-heading h2,
.process-heading h2,
.service-applications h2,
.service-transparency h2 {
  font: 600 clamp(50px, 6vw, 80px)/.9 "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: -1px
}

.services-intro h2 span,
.detail-heading h2 span,
.process-heading h2 span,
.service-applications h2 span,
.service-transparency h2 span {
  color: #9b7a18
}

.services-intro-copy {
  max-width: 620px;
  color: #66717a;
  font-size: 17px
}

.services-intro-copy p+p {
  margin-top: 22px
}

.services-intro-copy strong {
  color: var(--ink)
}

.service-detail-section {
  background: #0b1b2b;
  color: #fff;
  padding: 105px 0
}

.service-detail-section.alt {
  background: #ebece8;
  color: var(--ink)
}

.detail-heading {
  max-width: 850px;
  margin-bottom: 60px
}

.detail-heading .section-label {
  color: var(--yellow)
}

.alt .detail-heading .section-label {
  color: #8a6a0f
}

.detail-heading>p:last-child {
  max-width: 720px;
  color: #aebbc3;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 22px
}

.alt .detail-heading>p:last-child {
  color: #6c767d
}

.detail-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 70px;
  align-items: stretch
}

.detail-grid.reverse {
  grid-template-columns: 1.12fr .88fr
}

.detail-image {
  min-height: 570px;
  background-size: cover;
  background-position: center
}

.detail-mech {
  background-image: linear-gradient(rgba(5, 17, 27, .08), rgba(5, 17, 27, .08)), url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1500&q=88")
}

.detail-plaster {
  background-image: linear-gradient(rgba(10, 15, 18, .06), rgba(10, 15, 18, .06)), url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1500&q=88")
}

.detail-ceiling {
  background-image: linear-gradient(rgba(5, 17, 27, .12), rgba(5, 17, 27, .12)), url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1500&q=88")
}

.detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.detail-block h3 {
  font: 600 31px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin-bottom: 14px
}

.detail-block p {
  color: #aebbc3;
  line-height: 1.7;
  font-size: 14px;
  max-width: 700px
}

.alt .detail-block p {
  color: #66717a
}

.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14)
}

.alt .scope-grid {
  border-color: #cfd4d0
}

.scope-grid>div {
  padding: 23px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.alt .scope-grid>div {
  border-color: #cfd4d0
}

.scope-grid b {
  display: block;
  color: var(--yellow);
  font: 600 18px "Barlow Condensed";
  margin-bottom: 10px
}

.alt .scope-grid b {
  color: #9b7a18
}

.scope-grid strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px
}

.scope-grid span {
  display: block;
  color: #9eabb3;
  font-size: 12px;
  line-height: 1.55
}

.alt .scope-grid span {
  color: #707a81
}

.detail-note {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--yellow);
  background: rgba(255, 255, 255, .055);
  font-size: 12px;
  line-height: 1.6;
  color: #aebbc3
}

.alt .detail-note {
  background: rgba(255, 255, 255, .55);
  color: #66717a
}

.detail-note strong {
  color: var(--yellow)
}

.alt .detail-note strong {
  color: #80630e
}

.service-process {
  background: #10283a;
  color: #fff;
  padding: 105px 0
}

.process-heading {
  max-width: 720px
}

.process-heading .section-label {
  color: var(--yellow)
}

.process-heading>p:last-child {
  color: #aebbc3;
  margin-top: 20px;
  line-height: 1.7
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14)
}

.process-grid>div {
  min-height: 250px;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.process-grid span {
  color: var(--yellow);
  font: 600 20px "Barlow Condensed"
}

.process-grid h3 {
  font: 600 31px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin: 45px 0 12px
}

.process-grid p {
  color: #aebbc3;
  font-size: 12px;
  line-height: 1.65
}

.service-applications {
  background: var(--paper)
}

.service-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.service-app-lead {
  color: #66717a;
  font-size: 16px;
  line-height: 1.7;
  max-width: 540px;
  margin-top: 25px
}

.service-app-list {
  border-top: 1px solid #cfd4d0
}

.service-app-list>div {
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: 15px;
  padding: 25px 0;
  border-bottom: 1px solid #cfd4d0
}

.service-app-list b {
  color: #9b7a18;
  font: 600 16px "Barlow Condensed"
}

.service-app-list strong {
  font-size: 17px
}

.service-app-list span {
  grid-column: 2;
  color: #737d84;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px
}

.service-transparency {
  background: #f1f4f6;
  padding: 100px 0
}

.service-transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.service-transparency-copy {
  max-width: 620px;
  color: #66717a;
  font-size: 16px;
  line-height: 1.7
}

.service-checks {
  margin-top: 28px;
  display: grid;
  gap: 12px
}

.service-checks div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e0e5e8;
  padding: 15px
}

.service-checks b {
  color: #9b7a18;
  font-size: 18px;
  line-height: 1
}

.service-checks span {
  font-size: 13px;
  color: #3e4a54;
  line-height: 1.5
}

.services-cta .btn-dark {
  background: #111;
  color: #fff
}

.services-cta .btn-dark:hover {
  background: #26313a
}

@media(max-width:900px) {

  .services-intro-grid,
  .service-app-grid,
  .service-transparency-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .detail-grid,
  .detail-grid.reverse {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .detail-grid.reverse .detail-content {
    order: 1
  }

  .detail-grid.reverse .detail-image {
    order: 2
  }

  .detail-image {
    min-height: 430px
  }

  .process-grid {
    grid-template-columns: 1fr 1fr
  }

  .process-grid>div {
    min-height: 210px
  }

  .service-detail-section {
    padding: 85px 0
  }

  .service-transparency {
    padding: 80px 0
  }
}

@media(max-width:600px) {
  .services-hero {
    height: 630px
  }

  .services-hero h1 {
    font-size: 70px
  }

  .services-intro h2,
  .detail-heading h2,
  .process-heading h2,
  .service-applications h2,
  .service-transparency h2 {
    font-size: 55px
  }

  .detail-image {
    min-height: 340px
  }

  .scope-grid {
    grid-template-columns: 1fr
  }

  .process-grid {
    grid-template-columns: 1fr
  }

  .process-grid>div {
    min-height: auto
  }

  .process-grid h3 {
    margin-top: 30px
  }

  .service-detail-section {
    padding: 75px 0
  }

  .service-transparency {
    padding: 75px 0
  }
}

/* OUR APPROACH PAGE */
.approach-page .nav a.active {
  color: #8a6a0f
}

.approach-hero {
  height: 650px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center
}

.approach-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=88");
  background-size: cover;
  background-position: center
}

.approach-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 27, .97) 0%, rgba(5, 21, 35, .86) 47%, rgba(5, 18, 28, .25) 100%)
}

.approach-hero-content {
  position: relative;
  z-index: 2
}

.approach-hero h1 {
  font: 700 clamp(68px, 9vw, 118px)/.86 "Barlow Condensed";
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 25px 0
}

.approach-hero h1 em {
  color: var(--yellow);
  font-style: normal
}

.approach-hero .lead {
  max-width: 720px
}

.approach-hero .btn-line {
  border-color: rgba(255, 255, 255, .55)
}

.approach-intro {
  background: var(--paper)
}

.approach-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px
}

.approach-intro h2,
.process-main-heading h2,
.principles-heading h2,
.service-flow-heading h2,
.approach-transparency h2,
.approach-cta h2 {
  font: 600 clamp(50px, 6vw, 80px)/.9 "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: -1px
}

.approach-intro h2 span,
.process-main-heading h2 span,
.principles-heading h2 span,
.service-flow-heading h2 span,
.approach-transparency h2 span,
.approach-cta h2 span {
  color: #9b7a18
}

.approach-intro-copy {
  max-width: 620px;
  color: #66717a;
  font-size: 17px;
  line-height: 1.75
}

.approach-intro-copy p+p {
  margin-top: 22px
}

.approach-intro-copy strong {
  color: var(--ink)
}

.approach-process {
  background: #0b1b2b;
  color: #fff;
  padding: 110px 0
}

.process-main-heading {
  max-width: 850px
}

.process-main-heading .section-label {
  color: var(--yellow)
}

.process-main-heading>p:last-child {
  color: #aebbc3;
  max-width: 680px;
  line-height: 1.7;
  margin-top: 22px
}

.approach-steps {
  margin-top: 65px;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.approach-steps article {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 55px;
  padding: 55px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.step-number {
  font: 600 58px/1 "Barlow Condensed";
  color: var(--yellow)
}

.step-kicker {
  font: 600 12px/1 "Barlow Condensed";
  letter-spacing: 2px;
  color: var(--yellow);
  margin: 4px 0 14px
}

.step-content h3 {
  font: 600 44px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin: 0 0 15px
}

.step-content>p:not(.step-kicker) {
  max-width: 760px;
  color: #aebbc3;
  font-size: 15px;
  line-height: 1.75
}

.step-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 30px;
  list-style: none;
  padding: 0;
  margin: 25px 0 0;
  max-width: 720px
}

.step-content li {
  color: #d2d9de;
  font-size: 12px;
  padding-left: 18px;
  position: relative
}

.step-content li:before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--yellow);
  position: absolute;
  left: 0;
  top: 6px
}

.approach-principles {
  background: #10283a;
  color: #fff;
  padding: 105px 0
}

.principles-heading .section-label {
  color: var(--yellow)
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14)
}

.principles-grid>div {
  min-height: 270px;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.principles-grid span {
  color: var(--yellow);
  font: 600 19px "Barlow Condensed"
}

.principles-grid h3 {
  font: 600 31px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin: 50px 0 14px
}

.principles-grid p {
  color: #aebbc3;
  font-size: 12px;
  line-height: 1.7
}

.approach-service-flow {
  background: var(--paper)
}

.service-flow-heading {
  max-width: 760px
}

.service-flow-heading>p:last-child {
  color: #66717a;
  line-height: 1.7;
  max-width: 600px;
  margin-top: 20px
}

.service-flow-grid {
  margin-top: 55px;
  border-top: 1px solid #cfd4d0
}

.service-flow-grid a {
  display: grid;
  grid-template-columns: 55px 1fr 35px;
  gap: 25px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid #cfd4d0;
  color: var(--ink);
  text-decoration: none
}

.service-flow-grid a>b {
  font: 600 17px "Barlow Condensed";
  color: #9b7a18
}

.service-flow-grid h3 {
  font: 600 34px/1 "Barlow Condensed";
  text-transform: uppercase;
  margin: 0 0 9px
}

.service-flow-grid p {
  margin: 0;
  max-width: 720px;
  color: #6c767d;
  font-size: 13px;
  line-height: 1.65
}

.service-flow-grid a>span {
  font-size: 24px;
  transition: .2s
}

.service-flow-grid a:hover>span {
  transform: translate(4px, -4px)
}

.approach-transparency {
  background: #f1f4f6;
  padding: 105px 0
}

.approach-transparency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start
}

.approach-transparency-copy {
  max-width: 650px;
  color: #66717a;
  font-size: 16px;
  line-height: 1.75
}

.commitment-list {
  display: grid;
  gap: 12px;
  margin-top: 30px
}

.commitment-list div {
  display: flex;
  gap: 13px;
  background: #fff;
  border: 1px solid #e0e5e8;
  padding: 17px 18px
}

.commitment-list b {
  color: #9b7a18;
  font-size: 18px
}

.commitment-list span {
  font-size: 13px;
  color: #3e4a54;
  line-height: 1.5
}

.approach-cta {
  background: #0b1b2b;
  color: #fff;
  padding: 90px 0
}

.approach-cta-inner {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: center
}

.approach-cta h2 {
  max-width: 760px
}

.approach-cta .section-label {
  color: var(--yellow)
}

.approach-cta p:last-child {
  color: #aebbc3;
  max-width: 650px;
  line-height: 1.7;
  margin-top: 18px
}

.approach-cta .cta-actions {
  flex-shrink: 0
}

@media(max-width:900px) {

  .approach-intro-grid,
  .approach-transparency-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .approach-steps article {
    grid-template-columns: 75px 1fr;
    gap: 30px
  }

  .principles-grid {
    grid-template-columns: 1fr 1fr
  }

  .approach-cta-inner {
    display: block
  }

  .approach-cta .cta-actions {
    margin-top: 35px
  }
}

@media(max-width:600px) {
  .approach-hero {
    height: 630px
  }

  .approach-hero h1 {
    font-size: 70px
  }

  .approach-intro h2,
  .process-main-heading h2,
  .principles-heading h2,
  .service-flow-heading h2,
  .approach-transparency h2,
  .approach-cta h2 {
    font-size: 55px
  }

  .approach-process,
  .approach-principles,
  .approach-transparency {
    padding: 75px 0
  }

  .approach-steps article {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 40px 0
  }

  .step-number {
    font-size: 44px
  }

  .step-content h3 {
    font-size: 36px
  }

  .step-content ul {
    grid-template-columns: 1fr
  }

  .principles-grid {
    grid-template-columns: 1fr
  }

  .principles-grid>div {
    min-height: auto
  }

  .principles-grid h3 {
    margin-top: 30px
  }

  .service-flow-grid a {
    grid-template-columns: 40px 1fr 25px;
    gap: 14px
  }

  .service-flow-grid h3 {
    font-size: 29px
  }

  .approach-cta {
    padding: 75px 0
  }
}





/* WhatsApp navbar CTA */
.nav-whatsapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  color: #25D366 !important;
  background: #ffffff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  z-index: 0;
  overflow: hidden;
  border: 2px solid transparent;
}

.nav-whatsapp::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #25D366, #128C7E, #25D366, #075E54, #25D366);
  background-size: 300% 100%;
  animation: whatsappBorderRun 2.4s linear infinite;
  z-index: -2;
}

.nav-whatsapp::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: #fff;
  z-index: -1;
}

.nav-whatsapp .wa-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

.nav-whatsapp .wa-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: #25D366;
}

.nav-whatsapp:hover {
  color: #128C7E !important;
  transform: translateY(-1px);
}

@keyframes whatsappBorderRun {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-whatsapp::before {
    animation: none;
  }
}


/* ===== NAVBAR FIX V8 ===== */
.site-header {
  width: 100%;
  box-sizing: border-box;
}

.site-header .container.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  height: 96px;
  min-height: 76px;
}

.site-header .logo-img {
    display: flex;
    height: 96px;
    width: auto;
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-left: auto;
}

.site-header .nav a {
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.nav-actions .nav-call {
  white-space: nowrap;
}

.nav-whatsapp {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 999px;
  color: #25D366 !important;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  border: 0 !important;
  z-index: 0;
}

.nav-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #25D366, #128C7E, #075E54, #25D366);
  background-size: 300% 100%;
  animation: whatsappBorderRun 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.nav-whatsapp .wa-icon {
  width: 21px;
  height: 21px;
  display: inline-flex;
  flex: 0 0 21px;
}

.nav-whatsapp .wa-icon svg {
  width: 21px;
  height: 21px;
  fill: #25D366;
}

@keyframes whatsappBorderRun {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 300% 50%;
  }
}

@media (max-width: 980px) {
  .site-header .container.nav-container {
    gap: 16px;
  }

  .site-header .nav {
    gap: 16px;
  }

  .nav-whatsapp {
    padding: 0 12px;
  }
}

@media (max-width: 760px) {
  .site-header .container.nav-container {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-header .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .nav-actions {
    margin-left: auto;
  }

  .nav-actions .nav-call {
    display: none;
  }
}
/* =========================================================
   FINAL RESPONSIVE NAVBAR
   ========================================================= */

.site-header {
  width: 100%;
  background: rgba(251, 250, 246, 0.97);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .nav-container {
  min-height: 88px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* LOGO */

.site-header .logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.site-header .logo-img {
  display: block;
  width: auto;
  height: 72px;
  max-width: 200px;
  object-fit: contain;
}

/* NAVIGATION */

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-left: auto;
}

.site-header .nav a {
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 8px 0;
  transition: color 0.2s ease;
}

.site-header .nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 0;
  height: 2px;
  background: var(--yellow);
  transition: width 0.25s ease;
}

.site-header .nav a:hover,
.site-header .nav a.active {
  color: #8a6a0f;
}

.site-header .nav a:hover::after,
.site-header .nav a.active::after {
  width: 100%;
}

/* RIGHT SIDE */

.site-header .nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

/* WHATSAPP */

.site-header .nav-whatsapp {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;

  height: 44px;
  padding: 0 16px;

  border-radius: 999px;
  background: #fff;

  color: #25D366 !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;

  overflow: hidden;
  border: 0 !important;

  z-index: 1;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.site-header .nav-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;
  padding: 2px;

  background: linear-gradient(
    90deg,
    #25D366,
    #128C7E,
    #075E54,
    #25D366
  );

  background-size: 300% 100%;

  animation: whatsappBorderRun 2.4s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  z-index: -1;
}

.site-header .nav-whatsapp::after {
  content: "";
  position: absolute;
  inset: 2px;

  border-radius: inherit;
  background: #fff;

  z-index: -1;
  pointer-events: none;
}

.site-header .wa-icon {
  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 22px;
}

.site-header .wa-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: #25D366;
}

.site-header .nav-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.18);
}

/* =========================================================
   HAMBURGER
   ========================================================= */

.site-header .menu-btn {
  width: 44px;
  height: 44px;

  display: none;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 5px;

  border: 1px solid #d9ddd9;
  background: #fff;

  cursor: pointer;

  padding: 0;
}

.site-header .menu-btn span {
  display: block;
  width: 20px;
  height: 2px;

  background: var(--navy);

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Hamburger → X */

.site-header .menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header .menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.site-header .menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


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

@media (max-width: 1050px) {

  .site-header .nav-container {
    gap: 18px;
  }

  .site-header .nav {
    gap: 20px;
  }

  .site-header .nav a {
    font-size: 12px;
  }

  .site-header .nav-whatsapp {
    padding: 0 13px;
  }
}


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

@media (max-width: 800px) {

  .site-header .nav-container {
    min-height: 72px;
    height: 72px;

    padding-top: 0;
    padding-bottom: 0;

    gap: 10px;
  }

  /* Logo */

  .site-header .logo-img {
    height: 58px;
    max-width: 160px;
  }

  /* Right side */

  .site-header .nav-actions {
    margin-left: auto;
    gap: 8px;
  }

  /* Only WhatsApp icon */

  .site-header .nav-whatsapp {
    width: 44px;
    height: 44px;

    padding: 0;

    gap: 0;
  }

  .site-header .wa-icon,
  .site-header .wa-icon svg {
    width: 23px;
    height: 23px;
  }

  .site-header .wa-text {
    display: none;
  }

  /* Hamburger visible */

  .site-header .menu-btn {
    display: flex;
  }

  /* Mobile menu */

  .site-header .nav {
    position: absolute;

    top: 72px;
    left: 0;
    right: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    margin: 0;

    padding: 10px 4% 18px;

    background: rgba(251, 250, 246, 0.99);

    border-bottom: 1px solid var(--line);

    box-shadow: 0 15px 35px rgba(9, 24, 39, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease;

    pointer-events: none;
  }

  .site-header .nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header .nav a {
    width: 100%;

    padding: 15px 8px;

    border-bottom: 1px solid #e5e7e4;

    font-size: 14px;
  }

  .site-header .nav a:last-child {
    border-bottom: 0;
  }

  .site-header .nav a::after {
    display: none;
  }

  /* Hamburger active */

  .site-header .menu-btn.active {
    background: var(--navy);
    border-color: var(--navy);
  }

  .site-header .menu-btn.active span {
    background: #fff;
  }
}


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

@media (max-width: 480px) {

  .container {
    width: min(92%, 1180px);
  }

  .site-header .nav-container {
    min-height: 68px;
    height: 68px;
  }

  .site-header .logo-img {
    height: 52px;
    max-width: 145px;
  }

  .site-header .nav-whatsapp,
  .site-header .menu-btn {
    width: 40px;
    height: 40px;
  }

  .site-header .wa-icon,
  .site-header .wa-icon svg {
    width: 21px;
    height: 21px;
  }

  .site-header .nav {
    top: 68px;
  }
}


/* =========================================================
   WHATSAPP ANIMATION
   ========================================================= */

@keyframes whatsappBorderRun {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }

}


/* Accessibility */

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

  .site-header .nav-whatsapp::before {
    animation: none;
  }

}
/* =====================================================
   CONTACT FORM - WHATSAPP ENQUIRY
   Uses existing classes / IDs
===================================================== */

.contact-form label {
  display: block;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
}


/* EMAIL FIELD */

.contact-form input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #cdd3cf;
  background: #f9faf7;
  padding: 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}


/* FOCUS */

.contact-form input[type="email"]:focus {
  border-color: #8d721e;
}


/* WHATSAPP STATUS */

.contact-form .form-note {
  min-height: 18px;
  margin: 0;
}


/* SUBMIT BUTTON */

.contact-form .btn-yellow {
  cursor: pointer;
}


/* MOBILE */

@media (max-width: 600px) {

  .contact-form {
    padding: 23px;
  }

}

/*wtsp direct code form*/

:root{
  --navy:#091827;
  --navy2:#102b40;
  --yellow:#f6c343;
  --cream:#f4f1e9;
  --paper:#fbfaf6;
  --ink:#14202b;
  --muted:#69737c;
  --line:#d9ddd9;
  --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit}
.container{width:min(1180px,92%);margin:auto}

/* TOP BAR + NAVBAR — matched to the supplied index/style */
.top-strip{
  background:#06111d;
  color:#b9c3cb;
  font-size:11px;
  letter-spacing:.7px;
}
.top-inner{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
}
.site-header{
  background:rgba(251,250,246,.96);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
}
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  min-height:82px;
}
.site-header .logo{display:flex;align-items:center;flex:0 0 auto}
.site-header .logo-img{
  display:block;
  height:72px;
  width:auto;
  max-width:190px;
  object-fit:contain;
}
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  margin-left:auto;
  font-size:13px;
  font-weight:700;
}
.site-header .nav a{white-space:nowrap;transition:.2s}
.site-header .nav a:hover,
.site-header .nav a.active{color:#8a6a0f}
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.nav-whatsapp{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  color:#25D366!important;
  background:#fff;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  border:0;
}
.nav-whatsapp::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(90deg,#25D366,#128C7E,#075E54,#25D366);
  background-size:300% 100%;
  animation:whatsappBorderRun 2.4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.nav-whatsapp .wa-icon,
.nav-whatsapp .wa-icon svg{width:21px;height:21px;display:inline-flex}
.nav-whatsapp .wa-icon svg{fill:#25D366}
@keyframes whatsappBorderRun{
  from{background-position:0 50%}
  to{background-position:300% 50%}
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid transparent;
  padding:14px 20px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  min-width:170px;
  border-radius:0;
}
.nav-call{
  background:var(--navy);
  color:#fff!important;
  min-width:auto;
  height:40px;
  padding:10px 16px;
  font-size:12px;
}
.nav-call:hover{background:var(--navy2)}

/* PAGE HERO */
.page-hero{
  min-height:560px;
  background:
    linear-gradient(90deg,rgba(4,16,27,.93) 0%,rgba(5,21,35,.75) 45%,rgba(5,18,28,.22) 100%),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=90")
    center/cover;
  color:#fff;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:90px 90px;
  pointer-events:none;
}
.page-hero-content{position:relative;z-index:2;padding:95px 0}
.eyebrow,.section-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d9e1e5;
}
.eyebrow::before{
  content:"";
  width:30px;
  height:2px;
  background:var(--yellow);
}
.page-hero h1{
  font:700 clamp(68px,9vw,118px)/.86 "Barlow Condensed",sans-serif;
  letter-spacing:-2px;
  text-transform:uppercase;
  margin:25px 0;
}
.page-hero h1 em{color:var(--yellow);font-style:normal}
.page-hero-copy{
  max-width:650px;
  font-size:18px;
  color:#d3dce1;
}

/* INTRO */
.section{padding:110px 0}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}
.section-label{color:#8b6d16;margin-bottom:18px}
.section-heading h2,
.contact-intro h2{
  font:600 clamp(50px,6vw,78px)/.95 "Barlow Condensed",sans-serif;
  letter-spacing:-1px;
  text-transform:uppercase;
}
.section-heading h2 span,
.contact-intro h2 span{color:#9b7a18}
.intro-copy{
  font-size:18px;
  max-width:560px;
  color:#5d6870;
}
.intro-copy p+p{margin-top:20px}

/* CONTACT OPTIONS */
.contact-options{
  background:#0e2435;
  color:#fff;
  padding:75px 0;
}
.contact-grid-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.16);
}
.contact-card{
  background:#0e2435;
  padding:42px 30px;
  min-height:220px;
  transition:transform .25s,background .25s;
}
.contact-card:hover{
  transform:translateY(-4px);
  background:#102b40;
}
.contact-card-number{
  font:600 14px "Barlow Condensed",sans-serif;
  color:var(--yellow);
}
.contact-card h3{
  font:600 32px/1 "Barlow Condensed",sans-serif;
  text-transform:uppercase;
  margin:14px 0 12px;
}
.contact-card p{
  color:#b9c6cd;
  font-size:14px;
  margin-bottom:20px;
}
.contact-card a{
  color:#fff;
  font-size:13px;
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:5px;
}
.contact-card a:hover{color:var(--yellow);border-color:var(--yellow)}

/* MAIN CONTACT FORM — matched to index/style */
.contact-section{background:var(--paper)}
.contact-box{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:100px;
  align-items:start;
}
.contact-intro>p:not(.section-label){
  color:#69737c;
  max-width:500px;
  margin-top:20px;
}
.contact-details{
  display:grid;
  gap:20px;
  margin-top:35px;
}
.detail-item{
  display:flex;
  flex-direction:column;
  padding-top:18px;
  border-top:1px solid #d4d9d5;
}
.detail-item span{
  font-size:9px;
  letter-spacing:2px;
  color:#8a9398;
  text-transform:uppercase;
}
.detail-item a,
.detail-item strong{
  font-size:15px;
  font-weight:700;
  margin-top:2px;
}
.contact-form{
  background:#fff;
  border:1px solid #dce1dd;
  padding:35px;
  display:grid;
  gap:16px;
  box-shadow:0 18px 45px rgba(9,24,39,.06);
}
.contact-form h3{
  font:600 42px/1 "Barlow Condensed",sans-serif;
  text-transform:uppercase;
  margin-bottom:4px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.form-group{margin:0}
.contact-form label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid #cdd3cf;
  background:#f9faf7;
  padding:14px;
  font:inherit;
  font-size:13px;
  color:var(--ink);
  outline:none;
  border-radius:0;
  transition:.2s;
}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:#8d721e;
  background:#fff;
}
.submit-btn{
  width:100%;
  background:var(--navy);
  color:#fff;
  border:0;
  cursor:pointer;
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
}
.submit-btn:hover{background:#102b40}
.submit-btn span{color:var(--yellow);font-size:18px}
.form-note{font-size:11px;color:#69737c;min-height:18px}

/* WHATSAPP CTA */
.whatsapp-section{
  padding:85px 0;
  background:var(--yellow);
  color:#111;
  text-align:center;
}
.whatsapp-section h2{
  font:600 clamp(50px,6vw,72px)/.95 "Barlow Condensed",sans-serif;
  text-transform:uppercase;
}
.whatsapp-section p{
  max-width:560px;
  margin:18px auto 0;
  color:#51430f;
}
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:30px;
  background:var(--navy);
  color:#fff;
  padding:14px 22px;
  font-size:12px;
  font-weight:800;
  min-width:190px;
  justify-content:center;
}
.whatsapp-btn:hover{background:#102b40}

/* FOOTER — matched to supplied index/style */
.footer{
  background:#06111d;
  color:#aebbc3;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr 1.4fr;
  gap:50px;
  padding:70px 0;
}
.footer-brand .logo-img{
  display:block;
  height:72px;
  width:auto;
  max-width:190px;
  object-fit:contain;
}
.footer-brand p{
  font-size:13px;
  max-width:270px;
  margin-top:20px;
  color:#788893;
}
.footer-grid h4{
  color:#fff;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:15px;
}
.footer-grid div:not(:first-child){
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
}
.footer-grid a:hover{color:var(--yellow)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.6px;
  color:#6f7f89;
}

/* RESPONSIVE */
@media(max-width:980px){
  .nav-container{gap:16px}
  .site-header .nav{gap:20px}
  .nav-whatsapp{width:44px;height:44px;padding:0;gap:0}
  .nav-whatsapp .wa-text{display:none}
}
@media(max-width:900px){
  .site-header .nav{
    position:absolute;
    top:82px;
    left:0;
    right:0;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:15px 4% 20px;
    background:rgba(251,250,246,.99);
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 35px rgba(9,24,39,.10);
  }
  .site-header .nav.open{display:flex}
  .site-header .nav a{
    width:100%;
    padding:15px 8px;
    border-bottom:1px solid #e5e7e4;
    font-size:14px;
  }
  .site-header .nav a:last-child{border-bottom:0}
  .site-header .nav-actions .nav-call{display:none}
  .nav-container::after{
    content:"☰";
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    font-size:25px;
    color:var(--navy);
    cursor:pointer;
    order:4;
  }
  .nav-container{position:relative}
  .nav-container.mobile-open::after{content:"×"}
  .two-col,.contact-box{grid-template-columns:1fr;gap:45px}
  .contact-grid-options{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .top-inner{font-size:9px}
  .top-inner span:last-child{display:none}
  .nav-container{min-height:72px}
  .site-header .logo-img{height:58px;max-width:155px}
  .site-header .nav{top:72px}
  .page-hero{min-height:600px}
  .page-hero-content{padding:80px 0}
  .page-hero h1{font-size:72px}
  .page-hero-copy{font-size:15px}
  .section{padding:80px 0}
  .section-heading h2,.contact-intro h2{font-size:55px}
  .contact-form{padding:23px}
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-form h3{font-size:38px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:block}
  .footer-bottom span+span{display:block;margin-top:7px}
}