:root {
  --ink:#13243a;
  --navy:#0d1b2a;
  --orange:#f58220;
  --sand:#f7f4ef;
  --line:#e7e2da
}
body {
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.7
}
.topbar {
  background:var(--navy);
  color:#dce5ed;
  font-size:.82rem
}
.brand-logo {
  width:74px;
  height:74px;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 7px 20px #0002
}
.navbar {
  box-shadow:0 4px 25px #1725330d
}
.nav-link {
  font-size:.9rem;
  font-weight:700;
  color:var(--ink)!important;
  padding:.8rem .7rem!important
}
.nav-link:hover,.nav-link.active {
  color:var(--orange)!important
}
.dropdown-menu {
  border:0;
  border-radius:0;
  box-shadow:0 18px 35px #1725331a;
  padding:.7rem
}
.dropdown-item {
  font-size:.9rem;
  padding:.45rem 1rem
}
.service-menu {
  max-height:70vh;
  overflow-y:auto
}
.hero {
  position:relative;
  min-height:690px;
  isolation:isolate;
  background:linear-gradient(90deg,#071524eb 0%,#0a1828c9 36%,#0d1b2a35 67%,#0d1b2a18 100%),url('../images/hero-karot-industrial.jpg') center/cover;
  display:flex;
  align-items:center;
  color:#fff
}
.hero--showcase:after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(0deg,#0715247d 0%,transparent 28%);
}
.hero-showcase__content {
  max-width:650px;
  padding:5.5rem 0 7rem;
}
.hero-showcase__content h1 {
  margin:1.25rem 0 1.5rem;
  font-size:clamp(3.25rem,5.15vw,5.5rem);
  letter-spacing:-.065em;
}
.hero-showcase__content h1 span {
  color:#ff9a40;
}
.hero-showcase__content p {
  max-width:570px;
  margin-bottom:2rem;
  color:#e7edf3;
  font-size:1.18rem;
}
.hero-showcase__content .btn {
  border-radius:4px;
}
.hero-showcase__meta {
  position:absolute;
  left:calc(50% - 570px);
  bottom:2.25rem;
  display:flex;
  align-items:center;
  gap:.85rem;
  color:#d9e3ec;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-showcase__line {
  width:65px;
  height:1px;
  background:#f58220;
}
.hero-showcase__scroll {
  position:absolute;
  right:2rem;
  bottom:2.2rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
}
.home-page .topbar {
  background:#090d12;
}
.home-page .navbar {
  background:#101418!important;
  border-bottom:2px solid var(--orange);
  box-shadow:none;
  min-height:82px;
  z-index:10;
}
.home-page .nav-link {
  color:#f5f7fa!important;
}
.home-page .nav-link:hover,.home-page .nav-link.active {
  color:#ff9a40!important;
}
.home-page .brand-logo {
  position:absolute;
  top:-18px;
  left:50%;
  width:148px;
  height:148px;
  padding:8px;
  border:1px solid #ffffff2b;
  background:#fff;
  box-shadow:0 14px 28px #0007;
  transform:translateX(-50%);
  z-index:2;
}
.home-page .navbar-nav {
  justify-content:center;
  gap:.1rem;
}
.home-page .navbar-nav .mx-auto {
  position:relative;
  width:175px;
  height:80px;
  margin:0!important;
}
.home-page .nav-link {
  padding-left:.55rem!important;
  padding-right:.55rem!important;
}
.home-page .navbar-toggler {
  padding:.65rem .75rem;
  border:2px solid #ffffffcc;
  border-radius:10px;
  box-shadow:none!important;
}
.home-page .navbar-toggler-icon {
  width:1.5em;
  height:1.5em;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body:not(.home-page) .navbar {
  min-height:82px;
  background:#101418!important;
  border-bottom:2px solid var(--orange);
  box-shadow:none;
  z-index:10;
}
body:not(.home-page) .nav-link {
  padding-left:.55rem!important;
  padding-right:.55rem!important;
  color:#f5f7fa!important;
}
body:not(.home-page) .nav-link:hover,
body:not(.home-page) .nav-link.active {
  color:#ff9a40!important;
}
body:not(.home-page) .navbar-nav {
  justify-content:center;
  gap:.1rem;
}
body:not(.home-page) .navbar-nav .mx-auto {
  position:relative;
  width:175px;
  height:80px;
  margin:0!important;
}
body:not(.home-page) .brand-logo {
  position:absolute;
  top:-18px;
  left:50%;
  width:148px;
  height:148px;
  padding:8px;
  border:1px solid #ffffff2b;
  background:#fff;
  box-shadow:0 14px 28px #0007;
  transform:translateX(-50%);
  z-index:2;
}
body:not(.home-page) .navbar-toggler {
  padding:.65rem .75rem;
  border:2px solid #ffffffcc;
  border-radius:10px;
  box-shadow:none!important;
}
body:not(.home-page) .navbar-toggler-icon {
  width:1.5em;
  height:1.5em;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#ffc78b;
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}
.hero h1 {
  font-size:clamp(2.5rem,5vw,4.75rem);
  font-weight:800;
  line-height:1.05;
  max-width:850px
}
.btn-brand {
  background:var(--orange);
  color:white;
  border:2px solid var(--orange);
  border-radius:0;
  padding:.85rem 1.5rem;
  font-weight:800
}
.btn-brand:hover {
  background:#d96500;
  border-color:#d96500;
  color:white
}
.btn-outline-light {
  border-radius:0;
  padding:.85rem 1.5rem;
  font-weight:800
}
.section-pad {
  padding:100px 0
}
.section-kicker {
  color:var(--orange);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase
}
.display-title {
  font-weight:800;
  line-height:1.15
}
.service-card,.review-card {
  height:100%;
  border:1px solid var(--line);
  padding:2rem;
  background:#fff;
  transition:.25s
}
.service-card:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 40px #1b2c3b12
}
.contact-card {
  position:relative;
  overflow:hidden;
  height:auto;
  padding:2.25rem;
  border:1px solid #21364d;
  border-radius:18px;
  background:linear-gradient(145deg,#132b44 0%,#0b1a2a 100%)!important;
  color:#edf3f8;
  box-shadow:0 20px 42px #0d1b2a26;
}
.contact-card:before {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-70px;
  top:-72px;
  border:28px solid #f5822029;
  border-radius:50%;
}
.contact-card .section-kicker {
  position:relative;
  color:#ffad62;
}
.contact-card h2,.contact-card h3 {
  position:relative;
  color:#fff;
}
.contact-card p {
  position:relative;
  color:#cbd8e4;
}
.contact-card .text-dark {
  color:#fff!important;
}
.contact-card .btn-brand {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border-radius:10px;
  box-shadow:0 10px 22px #0003;
  font-size:1rem;
  letter-spacing:.02em;
}
.contact-card .btn-brand:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 28px #0004;
}
.service-icon {
  width:52px;
  height:52px;
  background:#fff0e3;
  color:var(--orange);
  display:grid;
  place-items:center;
  font-size:1.35rem
}
.soft-bg {
  background:var(--sand)
}
.number {
  font-size:3rem;
  font-weight:800;
  line-height:1;
  color:var(--orange)
}
.faq .accordion-item {
  border:0;
  border-bottom:1px solid var(--line)
}
.faq .accordion-button {
  font-weight:750;
  padding:1.3rem 0;
  box-shadow:none
}
.faq .accordion-button:not(.collapsed) {
  color:var(--orange);
  background:transparent
}
.cta {
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden
}
.cta:after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border:60px solid #ffffff0d;
  border-radius:50%;
  right:-120px;
  top:-150px
}
.page-hero {
  position:relative;
  display:flex;
  align-items:center;
  min-height:380px;
  overflow:hidden;
  background:linear-gradient(90deg,#081827f2 0%,#0b1c2bd1 42%,#0d1b2a50 72%,#0d1b2a25 100%),url('../images/hero-karot-industrial.jpg') right center/cover;
  color:#fff;
  padding:82px 0
}
.page-hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#07152472 0%,transparent 45%);
  pointer-events:none;
}
.page-hero .container {
  position:relative;
  z-index:1;
}
.page-hero h1 {
  font-weight:800;
  max-width:820px;
  margin-bottom:0;
  font-size:clamp(2.35rem,4.1vw,4.35rem);
  line-height:1.08;
  letter-spacing:-.045em
}
.breadcrumb-item+.breadcrumb-item::before {
  color:#fff8
}
.breadcrumb-item a {
  color:#fff
}
.footer {
  background:#091522;
  color:#c6d0d9
}
.footer h3 {
  color:#fff;
  font-weight:750
}
.footer a {
  color:#c6d0d9;
  text-decoration:none
}
.footer a:hover {
  color:#f58220
}
.footer-logo {
  width:58px;
  height:58px;
  object-fit:cover
}
.floating-phone,.floating-whatsapp {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:99;
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  font-size:1.4rem;
  box-shadow:0 8px 25px #0003;
  transition:transform .2s ease,box-shadow .2s ease
}
.floating-whatsapp {
  bottom:86px;
}
.floating-phone:hover,.floating-whatsapp:hover {
  color:#fff;
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 13px 30px #0005
}
.photo-tile {
  min-height:230px;
  background:center/cover;
  border-radius:0
}
.content h2 {
  font-weight:800;
  margin:2.5rem 0 1rem
}
.content h3 {
  font-weight:750;
  margin:1.75rem 0 .7rem
}
@media(max-width:991px) {
  .brand-logo {
    width:54px;
    height:54px
  }
  .hero {
    min-height:540px
  }
  .hero-showcase__content {
    padding:4.5rem 0 6rem;
  }
  .hero-showcase__meta {
    left:1rem;
  }
  .home-page .brand-logo {
    position:static;
    width:60px;
    height:60px;
    padding:3px;
    transform:none;
  }
  body:not(.home-page) .brand-logo {
    position:static;
    width:60px;
    height:60px;
    padding:3px;
    transform:none;
  }
  .section-pad {
    padding:70px 0
  }
}
@media(max-width:575px) {
  .hero {
    min-height:600px;
    background-position:60% center;
  }
  .hero-showcase__content {
    padding:4rem 0 6rem;
  }
  .hero-showcase__content h1 {
    font-size:3.1rem;
  }
  .hero-showcase__content p {
    font-size:1rem;
  }
  .hero-showcase__scroll {
    right:1rem;
  }
  .page-hero {
    min-height:310px;
    padding:55px 0;
    background-position:62% center;
  }
  .page-hero h1 {
    font-size:2.55rem;
  }
}
