:root {
  --macri-petrol: #1a6f96;
  --macri-petrol-deep: #0e4a62;
  --macri-navy: #0b1c2c;
  --macri-navy-2: #102536;
  --macri-steel: #1a6b8a;
  --macri-accent: #6ec1e0;
  --macri-wa: #25d366;
  --macri-text: #182230;
  --macri-muted: #5c6b7a;
  --macri-line: #d7e0e8;
  --bs-primary: #1a6f96;
  --bs-primary-rgb: 26, 111, 150;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--macri-text);
  background: #f4f7fa;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

.macri-nav {
  background: rgba(11, 28, 44, .72);
  backdrop-filter: blur(14px);
  transition: .25s ease;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.macri-nav.scrolled { background: rgba(11, 28, 44, .96); }
.navbar-brand { color: #fff; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 800;
  font-style: italic;
  font-size: 1.75rem;
  color: #fff;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  background: var(--macri-petrol);
  transform: rotate(-35deg);
  border-radius: 99px;
  bottom: 3px;
}
.brand-copy { display: flex; flex-direction: column; line-height: .9; letter-spacing: .08em; }
.brand-copy strong { font-size: 1.1rem; }
.brand-copy small { font-size: .48rem; margin-top: 5px; color: #c5d4e0; letter-spacing: .18em; }
.nav-link {
  color: rgba(255,255,255,.78) !important;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-link:hover, .nav-link:focus { color: #fff !important; }
.btn { border-radius: .45rem; font-weight: 700; }
.btn-primary {
  background: var(--macri-petrol);
  border-color: var(--macri-petrol);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--macri-petrol-deep);
  border-color: var(--macri-petrol-deep);
}
.btn-wa {
  color: #fff;
  background: transparent;
  border: 2px solid var(--macri-wa);
}
.btn-wa:hover, .btn-wa:focus {
  color: #0b1c2c;
  background: var(--macri-wa);
  border-color: var(--macri-wa);
}

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--macri-navy);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,28,44,.92) 0%, rgba(11,28,44,.72) 42%, rgba(11,28,44,.28) 72%, rgba(11,28,44,.55) 100%),
    linear-gradient(180deg, rgba(11,28,44,.35) 0%, transparent 28%, rgba(11,28,44,.55) 100%);
}
.hero-copy { padding: 8rem 0 8.5rem; z-index: 1; }
.hero-section h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  margin: 1rem 0 1.25rem;
}
.hero-section h1 span { display: block; color: var(--macri-accent); }
.hero-section .lead { color: rgba(255,255,255,.78); max-width: 36rem; margin-bottom: 1.5rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: .72rem;
  color: var(--macri-accent);
}
.text-petrol { color: var(--macri-petrol) !important; }
.text-accent { color: var(--macri-accent) !important; }
.hero-points {
  position: relative;
  z-index: 1;
  background: rgba(8, 18, 28, .78);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.1rem 0;
  backdrop-filter: blur(10px);
}
.hero-points .row > div {
  display: flex;
  gap: .7rem;
  align-items: center;
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
}
.hero-points i { color: var(--macri-accent); font-size: 1.2rem; }

.section-pad { padding: 90px 0; }
.section-heading { max-width: 760px; }
.section-heading h2,
.split-content h2,
.why-section h2,
.quote-section h2 {
  font-weight: 800;
  letter-spacing: -.025em;
}
.section-heading p { color: var(--macri-muted); }

.service-card, .work-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--macri-line);
  border-radius: .9rem;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.service-card:hover, .work-card:hover {
  transform: translateY(-5px);
  border-color: #b9cdda;
}
.service-image, .work-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.service-image img, .work-image img, .split-visual img, .why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-icon {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: .45rem;
  background: var(--macri-petrol);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.service-body { padding: 1.2rem 1.25rem 1.35rem; }
.service-card h3, .work-card h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.35; }
.service-card ul {
  margin: .75rem 0 1rem;
  padding-left: 1.1rem;
  color: var(--macri-muted);
  font-size: .88rem;
}
.service-card li { margin: .2rem 0; }
.service-card a, .work-card a { font-weight: 800; font-size: .86rem; color: var(--macri-petrol); }
.service-card a:hover { color: var(--macri-petrol-deep); }

.split-band { background: var(--macri-navy); color: #fff; }
.split-visual { min-height: 520px; background: var(--macri-navy-2); }
.split-visual img { min-height: 520px; object-position: 30% 50%; }
.split-content { min-height: 520px; background: var(--macri-navy-2); }
.split-content p { color: rgba(255,255,255,.72); }
.icon-list > div { display: flex; align-items: center; gap: .7rem; font-size: .87rem; color: #d8e4f4; }
.icon-list i { color: var(--macri-accent); font-size: 1.3rem; }

.work-image span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(11, 28, 44, .78);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: .3rem;
}
.work-card p { color: var(--macri-muted); font-size: .9rem; margin: 0; }

.why-section {
  background: var(--macri-navy);
}
.why-item { display: flex; gap: 1rem; }
.why-item i {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--macri-accent);
  font-size: 1.25rem;
}
.why-item h3 { font-size: 1rem; font-weight: 800; }
.why-item p { color: #9fb0c3; font-size: .9rem; margin: 0; }
.why-photo {
  min-height: 430px;
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
}
.why-photo img { min-height: 430px; object-position: 50% 30%; }

.cta-strip { background: var(--macri-petrol-deep); color: #fff; }
.cta-strip h2 { font-weight: 800; font-size: clamp(1.35rem, 2vw, 2rem); margin: 0; }

.quote-section { background: #eef3f7; }
.quote-form {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--macri-line);
}
.form-control, .form-select { min-height: 48px; border-radius: .45rem; border-color: var(--macri-line); }
.form-control:focus, .form-select:focus {
  border-color: var(--macri-petrol);
  box-shadow: 0 0 0 .2rem rgba(26, 111, 150, .18);
}
textarea.form-control { min-height: 140px; }
.quote-points li { margin-bottom: .85rem; color: #576477; }
.quote-points i { color: var(--macri-petrol); margin-right: .5rem; }
.alert-petrol {
  background: #e7f3f8;
  color: var(--macri-navy);
  border: 1px solid #c5dde8;
}
.alert-petrol a { font-weight: 700; color: var(--macri-petrol-deep); }
.hp-field {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.form-file-note { color: var(--macri-muted); font-size: .9rem; }
.form-file-note a { font-weight: 700; color: var(--macri-petrol); }
.quote-form { position: relative; }
#quoteSubmit:disabled { opacity: .7; }

.site-footer { background: #070f18; }
.site-footer h3 { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.site-footer p, .site-footer li, .footer-meta { color: #9fb0c3; font-size: .9rem; }
.site-footer li { margin: .55rem 0; }
.site-footer a { color: #9fb0c3; }
.site-footer a:hover { color: #fff; }
.footer-meta a { color: var(--macri-accent); }
.footer-brand { display: flex; align-items: center; gap: .7rem; }
.footer-contact i { color: var(--macri-accent); margin-right: .5rem; }

@media (max-width: 991.98px) {
  .macri-nav .navbar-collapse {
    background: var(--macri-navy);
    margin: .75rem -12px -8px;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .hero-copy { padding: 7rem 0 7rem; }
  .split-visual, .split-visual img, .split-content { min-height: 360px; }
  .section-pad { padding: 72px 0; }
}

@media (max-width: 575.98px) {
  .hero-section { min-height: auto; }
  .hero-copy { padding: 6.5rem 0 2rem; }
  .hero-section h1 { font-size: 2.35rem; }
  .hero-section .lead { font-size: 1rem; }
  .hero-points .row > div { font-size: .78rem; align-items: flex-start; }
  .section-pad { padding: 58px 0; }
  .quote-form { padding: 1rem; }
}