/* Keep decorative geometry inside the viewport at every breakpoint. */
html, body { overflow-x: clip; }

.hero-brand-name {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .28em;
  line-height: 1;
}

@media (max-width: 850px) {
  .brand { position: relative; z-index: 2; }
  .nav-links { z-index: 1; }
}

.hero-logo {
  position: absolute;
  z-index: 1;
  left: 38px;
  top: 52px;
  width: 155px;
  height: 155px;
  object-fit: contain;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: .92;
}

.story { background: #f5f8ff; }
.story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.story-copy > p:not(.eyebrow) { color: var(--muted); max-width: 650px; margin: 18px 0 0; }
.story-copy strong { color: var(--ink); }
.story-timeline { border-left: 2px solid #cddcf3; padding-left: 34px; display: grid; gap: 34px; }
.story-timeline div { position: relative; display: grid; gap: 5px; }
.story-timeline div::before { content: ''; position: absolute; left: -44px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px #dceaff; }
.story-timeline span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.story-timeline strong { font-size: 22px; line-height: 1.25; letter-spacing: -.04em; }
.contact-details-section { background: #fff; }
.contact-panel { padding: 38px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #0d4cbf, #1878ed); box-shadow: 0 20px 45px #155ed02d; }
.contact-panel p { margin: 0 0 10px; color: #cfe1ff; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.contact-panel h3 { margin: 0 0 28px; font-size: 28px; line-height: 1.2; letter-spacing: -.05em; }
.contact-panel .button { background: #fff; border-color: #fff; color: var(--blue); }
.footer-links { grid-template-columns: repeat(2, minmax(120px, 1fr)); }

@media (max-width: 850px) {
  .hero-logo { left: 23px; top: 28px; width: 115px; height: 115px; }
  .story-grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 520px) {
  .hero-logo { left: 14px; top: 20px; width: 88px; height: 88px; }
  .story-timeline { padding-left: 25px; }
  .story-timeline div::before { left: -35px; }
  .story-timeline strong { font-size: 19px; }
  .contact-panel { padding: 28px 23px; }
  .footer-links { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
}