@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 :root {
  --navy:#071827;
   --navy2:#10293c;
   --navy3:#1d384d;
   --gold:#c89b3c;
   --gold2:#e2bd68;
   --text:#102033;
   --muted:#607080;
   --bg:#f4f6f8;
   --white:#fff;
   --line:#e6ebef;
   --shadow:0 24px 70px rgba(7, 24, 39, .14);
   --radius:18px;

}

 * {
  box-sizing:border-box
}

 html {
  scroll-behavior:smooth
}

 body {
  margin:0;
  font-family:Manrope,
  Arial,
  sans-serif;
  color:var(--text);
  background:var(--bg)
}

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

 img {
  max-width:100%;
  display:block
}

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

/* HEADER */ .site-header {
  position:sticky;
  top:14px;
  z-index:50;
  width:min(1460px, 96%);
  height:116px;
  margin:14px auto -130px;
  background:rgba(255, 255, 255, .96);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255, 255, 255, .75);
  border-radius:10px;
  box-shadow:0 20px 60px rgba(7, 24, 39, .18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px
}

.brand {
  display:flex;
  align-items:center;
  gap:18px;
  min-width:365px
}

.brand img {
  height:76px;
  width:auto;
  object-fit:contain
}

.nav {
  display:flex;
  align-items:center;
  gap:34px
}

.nav a {
  font-weight:800;
  color:#102033;
  position:relative
}

.nav a:not(.nav-cta):after {
  content:"";
  position:absolute;
  left:0;
  bottom:-14px;
  width:0;
  height:3px;
  background:var(--gold);
  transition:.25s
}

.nav a:hover:after,
.nav a.active:after {
  width:100%
}

.nav a:hover,
.nav a.active {
  color:var(--gold)
}

.nav-cta {
  background:linear-gradient(135deg, var(--gold), #b78324);
  color:white!important;
  padding:17px 25px;
  border-radius:4px;
  box-shadow:0 12px 25px rgba(200, 155, 60, .25)
}

.menu-btn {
  display:none;
  background:var(--navy);
  color:white;
  border:0;
  border-radius:8px;
  font-size:26px;
  width:52px;
  height:48px
}

/* HERO */ .hero {
  min-height:820px;
  padding-top:170px;
  background:linear-gradient(90deg, rgba(7, 24, 39, .92) 0%, rgba(7, 24, 39, .76) 40%, rgba(7, 24, 39, .45) 100%),
  url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=2200&q=85') center/cover;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 72%, var(--bg) 72%)
}

.hero-content {
  position:relative;
  z-index:2;
  color:white;
  max-width:820px;
  padding-bottom:120px
}

.eyebrow {
  margin:0 0 18px;
  color:var(--gold2);
  font-size:14px;
  font-weight:900;
  letter-spacing:2.3px;
  text-transform:uppercase
}

.hero h1,
.page-hero h1 {
  font-size: clamp(44px, 5.6vw, 82px);
   line-height: 1.06;
   margin: 0 0 22px;
   font-weight: 900;
   letter-spacing: -2px;
   color: #ffffff;
   text-shadow: 0 5px 25px rgba(0, 0, 0, .35);

}

.hero-text,
.page-hero p{
    color:#ffffff;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}

.hero-actions {
  display:flex;
  gap:18px;
  margin-top:34px
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  border:0;
  cursor:pointer;
  font:inherit;
  font-weight:900;
  padding:17px 25px;
  border-radius:4px;
  transition:.22s
}

.btn.primary {
  background:linear-gradient(135deg, var(--gold2), var(--gold));
  color:var(--navy);
  box-shadow:0 16px 35px rgba(200, 155, 60, .26)
}

.btn.dark {
  background:var(--navy);
  color:white
}

.btn.ghost{
    color:#102033;
    background:#ffffff;
    border:2px solid #ffffff;
    font-weight:800;
}

.btn.ghost:hover{
    background:#C89B3C;
    color:#ffffff;
    border-color:#C89B3C;
}

 .stats {
  position:relative;
  z-index:3;
  margin-top:-86px;
  background:white;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  overflow:hidden
}

.stat {
  display:flex;
  align-items:center;
  gap:24px;
  padding:34px 52px;
  border-right:1px solid var(--line)
}

.stat:last-child {
  border-right:0
}

.stat-icon {
  width:70px;
  height:70px;
  border-radius:12px;
  background:var(--navy);
  color:var(--gold);
  display:grid;
  place-items:center;
  font-size:31px
}

.stat strong {
  display:block;
  font-size:42px;
  line-height:1;
  color:var(--navy)
}

.stat span {
  font-weight:900;
  color:var(--navy2)
}

.stat p {
  margin:6px 0 0;
  color:var(--muted)
}

 .section {
  padding:100px 0
}

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

.section-head.center {
  display:block;
  text-align:center
}

.section-head h2,
.dark-section h2,
.cta-panel h2 {
  font-size:clamp(32px, 3.2vw, 52px);
  line-height:1.12;
  margin:0;
  color:var(--navy);
  letter-spacing:-1px
}

.section-head p:not(.eyebrow) {
  color:var(--muted);
  font-size:18px;
  max-width:650px;
  line-height:1.7
}

.cards {
  display:grid;
  gap:26px
}

.cards.three {
  grid-template-columns:repeat(3, 1fr)
}

.cards.four {
  grid-template-columns:repeat(4, 1fr)
}

.card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px;
  transition:.25s
}

.card:hover {
  transform:translateY(-8px)
}

.card .icon {
  width:58px;
  height:58px;
  border-radius:12px;
  background:#f7efe0;
  color:var(--gold);
  display:grid;
  place-items:center;
  font-size:28px;
  margin-bottom:22px
}

.card h3 {
  font-size:24px;
  margin:0 0 12px;
  color:var(--navy)
}

.card p {
  line-height:1.7;
  color:var(--muted);
  margin:0
}

.text-link {
  font-weight:900;
  color:var(--gold)
}

 .dark-section {
  background:linear-gradient(135deg, var(--navy), var(--navy3));
  color:white;
  padding:100px 0
}

.dark-section h2 {
  color:white
}

.dark-section p {
  color:#dce6ef;
  line-height:1.8;
  font-size:18px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}

.feature-list {
  display:grid;
  gap:18px
}

.feature-list div {
  background:rgba(255, 255, 255, .08);
  border:1px solid rgba(255, 255, 255, .14);
  border-radius:14px;
  padding:22px
}

.feature-list strong {
  color:var(--gold2)
}

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

.project-card {
  position:relative;
  min-height:390px;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--navy)
}

.project-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  transition:.35s
}

.project-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(7, 24, 39, .9))
}

.project-card:hover img {
  transform:scale(1.06)
}

.project-info {
  position:absolute;
  z-index:2;
  left:28px;
  right:28px;
  bottom:26px;
  color:white
}

.project-info h3 {
  font-size:25px;
  margin:0 0 8px
}

.project-info p {
  color:#dce6ef;
  margin:0
}

.tag {
  display:inline-block;
  background:var(--gold);
  color:var(--navy);
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  margin-bottom:14px
}

 .design-preview {
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:58px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:45px;
  align-items:center
}

.visual-box {
  min-height:360px;
  border-radius:20px;
  background:radial-gradient(circle at 70% 30%, rgba(226, 189, 104, .55), transparent 22%),
  linear-gradient(135deg, #ebf0f4, #fff);
  position:relative;
  overflow:hidden
}

.visual-box:before {
  content:"";
  position:absolute;
  inset:32px;
  border:2px solid rgba(16, 32, 51, .12);
  border-radius:14px
}

.tower {
  position:absolute;
  bottom:70px;
  width:68px;
  border-radius:4px 4px 0 0;
  background:var(--navy);
  box-shadow:16px 16px 0 rgba(200, 155, 60, .35)
}

.t1 {
  height:145px;
  left:80px
}

.t2 {
  height:220px;
  left:178px;
  background:var(--gold)
}

.t3 {
  height:170px;
  left:278px
}

.visual-box span {
  position:absolute;
  left:34px;
  bottom:28px;
  font-weight:900;
  color:var(--navy)
}

/* PAGES */ .page-hero {
  padding:210px 0 95px;
  background:linear-gradient(135deg, rgba(7, 24, 39, .96), rgba(29, 56, 77, .94)),
  url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=2200&q=85') center/cover
}

.page-hero.small {
  padding-bottom:75px
}

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

.service-card {
  background:white;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:42px;
  border:1px solid var(--line)
}

.service-card h2 {
  margin:0 0 12px;
  color:var(--navy)
}

.service-card p {
  line-height:1.8;
  color:var(--muted)
}

.service-card ul {
  padding-left:18px;
  line-height:2;
  color:var(--text)
}

 .about-grid,
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start
}

.about-panel,
.contact-panel,
.contact-form {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:42px
}

.about-panel p,
.contact-panel p {
  color:var(--muted);
  line-height:1.8
}

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

.value {
  padding:24px;
  background:#fbfcfd;
  border:1px solid var(--line);
  border-radius:14px
}

.value strong {
  display:block;
  color:var(--navy);
  margin-bottom:8px
}

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

.step {
  background:rgba(255, 255, 255, .07);
  border:1px solid rgba(255, 255, 255, .14);
  border-radius:16px;
  padding:24px
}

.step strong {
  color:var(--gold2);
  font-size:34px
}

.step h3 {
  color:white;
  margin:10px 0
}

.compare {
  display:grid;
  grid-template-columns:1fr 84px 1fr;
  background:white;
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.compare div {
  min-height:420px;
  background:center/cover;
  position:relative
}

.compare .before {
  background-image:url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=1200&q=85')
}

.compare .after {
  background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85')
}

.compare .middle {
  background:var(--gold);
  display:grid;
  place-items:center;
  color:var(--navy);
  font-size:36px;
  font-weight:900
}

.compare span {
  position:absolute;
  left:24px;
  bottom:24px;
  background:rgba(7, 24, 39, .82);
  color:white;
  font-weight:900;
  padding:12px 16px;
  border-radius:8px
}

 .contact-form {
  display:grid;
  gap:16px
}

.contact-form label {
  font-weight:900
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;
  margin-top:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  background:#fbfcfd
}

.contact-form textarea {
  min-height:140px
}

.form-note {
  font-size:14px;
  color:var(--muted)
}

 .footer {
  background:#071827;
  color:#dce6ef;
  padding:65px 0;
  margin-top:40px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px
}

.footer h4 {
  color:white;
  margin-top:0
}

.footer a {
  display:block;
  margin:9px 0;
  color:#dce6ef
}

.footer-brand img {
  height:86px;
  width:auto;
  background:white;
  border-radius:6px;
  padding:6px;
  margin-bottom:14px
}

.floating {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:45;
  display:grid;
  gap:12px
}

.floating a {
  background:var(--gold);
  color:var(--navy);
  font-weight:900;
  padding:14px 18px;
  border-radius:999px;
  box-shadow:0 16px 35px rgba(7, 24, 39, .2)
}

 @media(max-width:1050px) {
  .site-header {
    height:auto;
    min-height:92px;
    padding:14px 20px
  }

.brand {
    min-width:auto
  }

.brand img {
    height:62px
  }

.menu-btn {
    display:block
  }

.nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    border-radius:0 0 12px 12px;
    padding:20px;
    flex-direction:column;
    box-shadow:var(--shadow)
  }

.nav.open {
    display:flex
  }

.hero {
    padding-top:150px
  }

.stats,
  .cards.three,
  .cards.four,
  .project-grid,
  .service-grid,
  .about-grid,
  .contact-grid,
  .split,
  .design-preview,
  .process,
  .footer-grid {
    grid-template-columns:1fr
  }

.stat {
    border-right:0;
    border-bottom:1px solid var(--line)
  }

.section-head {
    display:block
  }

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

.compare .middle {
    min-height:70px
  }

.visual-box {
    min-height:320px
  }

}

 @media(max-width:620px) {
  .site-header {
    top:0;
    width:100%;
    margin:0 0 -120px;
    border-radius:0
  }

.brand img {
    height:54px
  }

.hero h1,
  .page-hero h1 {
    font-size:42px
  }

.hero {
    min-height:760px
  }

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

.stats {
    margin-top:-55px
  }

.stat {
    padding:26px
  }

.section {
    padding:70px 0
  }

.design-preview {
    padding:28px
  }

.nav-cta {
    width:100%;
    text-align:center
  }

.floating {
    right:12px;
    bottom:12px
  }

.floating a {
    padding:12px 14px;
    font-size:14px
  }

}

/* FIX HERO TEXT AND BUTTON VISIBILITY */
.hero .hero-text {
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65) !important;
}

.hero .btn.ghost {
  color: #071827 !important;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25) !important;
}

.hero .btn.ghost:hover {
  color: #ffffff !important;
  background: #c89b3c !important;
  border-color: #c89b3c !important;
}
/* FIX: hero white overlay too high */
.hero::after {
  display: none !important;
}

.hero {
  min-height: 760px !important;
  padding-bottom: 120px !important;
}

.hero-content {
  padding-bottom: 80px !important;
}

.hero-text {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.75) !important;
}

.btn.ghost {
  background: #ffffff !important;
  color: #071827 !important;
  border: 2px solid #ffffff !important;
}