:root {
  --brand-ink: #172536;
  --brand-navy: #24384e;
  --brand-slate: #47627f;
  --brand-coral: #ee6c4d;
  --brand-cream: #f7f3ec;
  --brand-line: rgba(23, 37, 54, 0.12);
}

body {
  background: #fbfaf7;
  color: var(--brand-ink);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(23, 37, 54, 0.08) !important;
  box-shadow: 0 12px 36px rgba(23, 37, 54, 0.08) !important;
}

header nav a,
header nav button {
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease;
}

header nav a:hover,
header nav button:hover {
  background: rgba(238, 108, 77, 0.08);
  color: var(--brand-coral);
}

.design-hero {
  min-height: min(820px, 86vh) !important;
  background: var(--brand-ink) !important;
  isolation: isolate;
}

.design-hero > .absolute.inset-0 img {
  opacity: 0.82 !important;
  filter: saturate(0.78) contrast(1.04) !important;
  mix-blend-mode: normal !important;
  object-position: center 44% !important;
  transform: scale(1.015);
}

.design-hero > .absolute.inset-0 > div {
  background: linear-gradient(90deg, rgba(18, 31, 46, 0.98) 0%, rgba(18, 31, 46, 0.93) 38%, rgba(18, 31, 46, 0.64) 66%, rgba(18, 31, 46, 0.16) 100%) !important;
}

.design-hero .container {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

.design-hero h1 {
  max-width: 820px;
  font-size: clamp(3.35rem, 6.6vw, 6.75rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.065em !important;
  text-wrap: balance;
}

.design-hero h1 > span:first-child {
  font-size: clamp(1.6rem, 3.2vw, 3.25rem) !important;
  letter-spacing: -0.03em;
}

.design-hero h1 + p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.38 !important;
}

.design-hero a[href^="tel:"] {
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(238, 108, 77, 0.3) !important;
}

.design-hero .lg\:col-span-5 > div {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)) !important;
  box-shadow: 0 16px 45px rgba(4, 13, 24, 0.18);
}

.design-services {
  background: linear-gradient(180deg, var(--brand-cream) 0%, #fff 100%) !important;
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.design-services a > div {
  border: 1px solid var(--brand-line) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 50px rgba(23, 37, 54, 0.09) !important;
  transition: transform 240ms ease, box-shadow 240ms ease !important;
}

.design-services a:hover > div {
  transform: translateY(-7px);
  box-shadow: 0 28px 64px rgba(23, 37, 54, 0.15) !important;
}

.design-services a > div > div:first-child {
  height: 15rem !important;
}

.design-services img {
  filter: saturate(0.88) contrast(1.02);
}

.design-services h3 {
  color: var(--brand-ink) !important;
  letter-spacing: -0.035em !important;
}

.design-advantages img[alt*="YOTEABRO"] {
  border-radius: 32px !important;
  border-width: 0 !important;
  box-shadow: 0 30px 75px rgba(23, 37, 54, 0.2) !important;
}

.design-map {
  background: radial-gradient(circle at 76% 28%, #395676 0%, var(--brand-navy) 34%, var(--brand-ink) 100%) !important;
}

.design-testimonials {
  background: linear-gradient(180deg, #fff 0%, var(--brand-cream) 100%) !important;
}

.design-quote {
  background: linear-gradient(180deg, #fff 0%, #f8fafb 100%) !important;
}

.design-quote input,
.design-quote button[role="combobox"] {
  border-radius: 14px !important;
}

main section h2 {
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.design-cookie {
  width: min(780px, calc(100% - 24px)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(23, 37, 54, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 65px rgba(23, 37, 54, 0.2) !important;
  overflow: hidden;
}

.design-cookie p {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 1023px) {
  .design-hero {
    min-height: auto !important;
  }

  .design-hero > .absolute.inset-0 > div {
    background: linear-gradient(180deg, rgba(18, 31, 46, 0.78) 0%, rgba(18, 31, 46, 0.96) 78%) !important;
  }

  .design-hero > .absolute.inset-0 img {
    object-position: 66% center !important;
  }

  .design-hero .lg\:col-span-5 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem !important;
  }

  .design-hero .lg\:col-span-5 > div {
    padding: 1rem !important;
  }
}

@media (max-width: 640px) {
  .design-hero h1 {
    font-size: clamp(2.85rem, 15vw, 4.2rem) !important;
  }

  .design-hero .container {
    padding-top: 3.5rem !important;
    padding-bottom: 4.25rem !important;
  }

  .design-hero .lg\:col-span-5 {
    grid-template-columns: 1fr;
  }

  .design-services {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .design-cookie {
    bottom: 86px !important;
    padding: 1rem !important;
  }

  .design-cookie .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-services a > div,
  .design-hero a[href^="tel:"] {
    transition: none !important;
    transform: none !important;
  }
}

.hero-photo-services{display:grid;gap:14px;grid-column:span 5;min-width:0}.hero-photo-card{display:grid;grid-template-columns:142px 1fr 24px;align-items:center;gap:20px;background:#f8fafb;color:#20384b;border:1px solid #ffffff70;border-radius:20px;overflow:hidden;min-height:132px;box-shadow:0 12px 28px #06111c20;transition:transform .25s,box-shadow .25s}.hero-photo-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #06111c40}.hero-photo-card>img{width:142px;height:142px;object-fit:cover;transition:transform .4s}.hero-photo-card:hover>img{transform:scale(1.04)}.hero-photo-copy{padding:14px 0;min-width:0}.hero-photo-number{font-size:10px;letter-spacing:.15em;font-weight:750;color:#ba5136}.hero-photo-copy h2{font-size:20px;font-weight:750;font-style:normal;line-height:1.2;letter-spacing:-.03em;margin:6px 0;color:#20384b;text-transform:none;overflow-wrap:normal}.hero-photo-copy p{font-size:12px;line-height:1.5;color:#647583}.hero-photo-arrow{color:#d65e3e;margin-right:10px;font-size:21px}.hero-photo-card:focus-visible{outline:3px solid #ee6c4d;outline-offset:5px}@media(max-width:1023px){.hero-photo-services{grid-column:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hero-photo-card{display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative}.hero-photo-card>img{width:100%;height:150px}.hero-photo-copy{padding:18px}.hero-photo-copy h2{font-size:20px}.hero-photo-arrow{display:none}}@media(max-width:600px){.hero-photo-services{grid-template-columns:1fr}.hero-photo-card{display:grid;grid-template-columns:105px 1fr;min-height:112px}.hero-photo-card>img{width:105px;height:120px}.hero-photo-copy{padding:12px 16px}.hero-photo-copy h2{font-size:19px}}@media(prefers-reduced-motion:reduce){.hero-photo-card,.hero-photo-card>img{transition:none;transform:none!important}}