a, a:visited, a:active {
  color: inherit !important;
  text-decoration: underline;
}
@media print {
  a, a:visited, a:active {
    color: inherit !important;
    text-decoration: underline !important;
  }
}
:root {
  --primary: #97bcc7;
  --primary-dark: #004558;
  --secondary: #97bcc7;
  --background: #053d57;
  --surface: #97bcc7;
  --text: #fae5ce;
  --text-light: #fceee0;
  --footer-bg: #0a2533;
  --card-bg: #062e44;
  --card-border: rgba(151, 188, 199, 0.45);

  --backdrop: rgba(4, 34, 49, 0.72);
  --radius-xs: 0.18rem;
  --radius-sm: 0.28rem;
  --radius-md: 0.45rem;
  --radius-lg: 0.62rem;
}

  .investors-shell {
  
  }

  /* Hide the Investors link from navigation while keeping the page accessible */
  nav a[href="/investors"],
  .main-nav a[href="/investors"],
  .usecase-nav a[href="/investors"] {
    display: none !important;
  }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 18px;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
  background: radial-gradient(circle at 15% 15%, #0c5875 0%, var(--background) 40%, #042f43 100%);
  color: var(--text);
  overflow-x: hidden;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
@media print {
  html, body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: radial-gradient(circle at 15% 15%, #0c5875 0%, var(--background) 40%, #042f43 100%) !important;
    color: var(--text) !important;
  }

  .site-header,
  .header-shell,
  .main-nav,
  .hero,
  .hero2,
  .section,
  .section-alt,
  .sections-bg,
  .detail-card,
  .offering-card,
  .photo-frame,
  .section-photo,
  .section-text,
  .usecase-shell,
  .usecase-panel,
  .usecase-copy-block,
  .workflow-grid,
  .about-points,
  .contact-actions,
  .email-link,
  .btn,
  .btn-secondary,
  .footer,
  footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    filter: none !important;
  }

  img, svg {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    filter: none !important;
    box-shadow: none !important;
  }

  a {
    color: var(--text-light) !important;
    text-decoration: underline !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sora', sans-serif;
  line-height: 1.2;
  color: var(--text-light);
}

p {
  color: #d7e7ee;
}

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 240ms ease;
}

.site-header.visible {
  transform: translateY(0);
}

.header-shell {
  margin: 0.7rem auto;
  width: min(1200px, calc(100% - 1.6rem));
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(252, 238, 224, 0.2);
  border-radius: var(--radius-md);
  background: rgba(9, 53, 74, 0.84);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  height: 31px;
  display: block;
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.main-nav a,
.nav-dropdown-toggle {
  text-decoration: none;
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.nav-dropdown-toggle {
  appearance: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-dropdown-toggle::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.main-nav a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  background: rgba(151, 188, 199, 0.15);
  border-color: rgba(252, 238, 224, 0.28);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 18rem;
  padding: 0.55rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid rgba(252, 238, 224, 0.16);
  border-radius: var(--radius-md);
  background: rgba(7, 44, 62, 0.97);
  box-shadow: 0 18px 32px rgba(0, 17, 26, 0.35);
  backdrop-filter: blur(8px);
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  width: 100%;
}

.nav-dropdown-intro {
  padding: 0.35rem 0.45rem 0.55rem;
  border-bottom: 1px solid rgba(252, 238, 224, 0.1);
  margin-bottom: 0.1rem;
}

.nav-dropdown-kicker {
  margin-bottom: 0.2rem;
  color: #b8d4dc;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-dropdown-intro p:last-child {
  color: #d7e7ee;
  font-size: 0.82rem;
  line-height: 1.45;
}

.nav-dropdown-menu a.is-active {
  background: rgba(151, 188, 199, 0.18);
  border-color: rgba(252, 238, 224, 0.28);
}

.hamburger {
  display: none;
  width: 2rem;
  height: 1.35rem;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  width: 100%;
  height: 2px;
  border-radius: 10px;
  background: var(--text-light);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem 1rem 3.5rem;
  background: url('/media/hero-pic.jpg') center/cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 840px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  border: 1px solid rgba(151, 188, 199, 0.5);
  border-radius: var(--radius-xs);
  padding: 0.35rem 0.75rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cae1e8;
  background: rgba(7, 45, 63, 0.58);
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0 auto;
  max-width: 670px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.65rem;
}

.inline-actions {
  margin: 1rem 0 0.25rem;
}

.text-link {
  color: #dff0f5;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(223, 240, 245, 0.35);
  padding-bottom: 0.18rem;
}

.text-link:hover {
  border-bottom-color: rgba(223, 240, 245, 0.75);
}

.hero-highlights {
  margin: 1.5rem auto 0;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  list-style: none;
}

.hero-highlights li {
  padding: 0.9rem 1rem;
  text-align: left;
  background: rgba(4, 32, 45, 0.62);
  border: 1px solid rgba(252, 238, 224, 0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 16, 24, 0.22);
  color: #eef7fa;
  font-size: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.9rem;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(151, 188, 199, 0.15) 0%, rgba(151, 188, 199, 0) 100%);
  color: var(--text-light);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.15rem;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0, 24, 36, 0.24);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 24px rgba(0, 28, 42, 0.34);
  border-color: rgba(151, 188, 199, 0.75);
  background: rgba(151, 188, 199, 0.1);
}

.btn-secondary {
  background: rgba(5, 45, 63, 0.38);
  border-color: rgba(151, 188, 199, 0.5);
}

.hero2 {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem 1.25rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%), url('/media/hero-pic.jpg') center/cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.hero2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-attachment: fixed;
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 1;
}

.hero2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 125px;
  background: linear-gradient(to bottom, rgba(5, 61, 87, 0) 0%, var(--background) 100%);
  pointer-events: none;
  z-index: 3;
}

.hero2-content {
  width: min(1200px, 100%);
  position: relative;
  z-index: 2;
}

.hero2-content h2 {
  font-size: clamp(1.65rem, 4vw, 2.65rem);
  margin-bottom: 0.8rem;
}

.section-kicker {
  margin-bottom: 0.55rem;
  color: #a6cad5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

.hero2-intro,
.section-lead,
.workflow-lead,
.contact-copy {
  max-width: 760px;
  color: #d9e8ee;
  font-size: 0.98rem;
  margin-left: auto;
  margin-right: auto;
}

.hero2-intro {
  margin: 0 auto 2rem;
}

.hero2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.hero2-card,
.offering-card {
  background: linear-gradient(165deg, rgba(8, 50, 71, 0.98) 0%, rgba(4, 39, 56, 0.96) 100%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.45rem 1.2rem;
  box-shadow: 0 16px 34px rgba(0, 24, 36, 0.34);
  position: relative;
  overflow: hidden;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.hero2-card::before,
.offering-card::before,
.detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d7edf4 0%, rgba(151, 188, 199, 0.25) 100%);
}

.hero2-card:hover,
.offering-card:hover,
.detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(252, 238, 224, 0.32);
  box-shadow: 0 22px 36px rgba(0, 24, 36, 0.4);
}


.section,
.section-alt {
  position: relative;
  width: min(1200px, calc(100% - 1.8rem));
  margin: 0 auto 1rem;
  padding: 1rem 0 4rem;
  min-height: 88vh;
}

.section-content {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.section-photo,
.section-text {
  background: var(--backdrop);
  border: 1px solid rgba(252, 238, 224, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(0, 17, 26, 0.3);
}

.section-photo {
  flex: 1 1 38%;
  min-width: 290px;
  display: flex;
}

.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.section-text {
  flex: 1 1 62%;
  padding: 1.35rem 1.3rem;
}

.section-text h1 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.section-text h2 {
  font-size: 1rem;
  margin-top: 1.05rem;
  margin-bottom: 0.3rem;
  color: #def1f7;
}

.section-text p {
  font-size: 0.95rem;
}

.photo-frame {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 0.85rem;
}

.photo-frame img {
  display: block;
  box-shadow: 0 18px 30px rgba(0, 13, 20, 0.34);
  filter: saturate(1.02) contrast(1.02);
}

/* Research page: make the Common Applications photo unrounded and larger */
.usecase-shell.usecase-bottom-layout .section-content .section-photo {
  flex: 0 0 57%; /* ~1.5x wider than the default 38% */
}


/* Make the research plot image fully visible and not clipped */
.usecase-shell.usecase-bottom-layout .section-content .section-photo .photo-frame img,
.usecase-shell.usecase-bottom-layout .section-content .section-photo img {
  border-radius: 0; /* remove rounded corners for this specific photo */
  object-fit: contain;
  max-width: 100%;
  max-height: 420px;
  background: #021b28;
}

/* Sensor image used on research page */
.sensor-photo {
  margin-top: 1rem;
  max-width: 420px;
}

.sensor-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 14px 28px rgba(0, 12, 18, 0.36);
  border: 1px solid rgba(252, 238, 224, 0.06);
  object-fit: contain;
}

/* Small explanatory plot used on the research page */
.research-plot {
  margin-top: 0.9rem;
  max-width: 520px;
}

.research-plot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 22px rgba(0, 12, 18, 0.28);
  border: 1px solid rgba(252, 238, 224, 0.06);
}

@media (max-width: 820px) {
  .research-plot {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 520px) {
  .research-plot {
    max-width: 100%;
    padding: 0 0.5rem;
  }
}

@media (max-width: 820px) {
  .sensor-photo {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 520px) {
  .sensor-photo {
    max-width: 100%;
    padding: 0 0.5rem;
  }
}

.photo-badge {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(252, 238, 224, 0.4);
  border-radius: var(--radius-xs);
  background: rgba(4, 34, 49, 0.86);
  color: var(--text-light);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1.35rem;
}

.detail-card {
  position: relative;
  padding: 1.05rem 1rem;
  background: rgba(5, 42, 59, 0.8);
  border: 1px solid rgba(151, 188, 199, 0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(0, 15, 22, 0.2);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.detail-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  min-height: 100%;
}

.detail-card-link h2 {
  margin-bottom: 0.45rem;
}

.detail-card h2 {
  margin: 0 0 0.35rem;
}

.detail-card p {
  font-size: 0.9rem;
}

.detail-link-label {
  margin-top: auto;
  padding-top: 1rem;
  color: #dff0f5;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.section-heading {
  margin-bottom: 0.7rem;
}

.section-text--center {
  text-align: center;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.workflow-lead {
  margin: 0.7rem auto 0;
}

.workflow-number {
  font-family: 'Sora', sans-serif;
  color: #9fc6d3;
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
}

.offering-card h2 {
  font-size: 1.08rem;
  margin-bottom: 0.55rem;
}

.offering-card ul {
  list-style: none;
  margin-top: 0.9rem;
}

.offering-card li {
  position: relative;
  padding-left: 1rem;
  margin: 0.42rem 0;
  color: #cee3ea;
  font-size: 0.92rem;
}

.offering-card li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: #93bccc;
}

#about .section-text h3 {
  margin-top: 1rem;
  font-size: 1.02rem;
  color: #def1f7;
}

.about-points {
  list-style: none;
  margin-top: 1rem;
}

.about-points li {
  position: relative;
  padding-left: 1rem;
  margin: 0.55rem 0;
  color: #d7e7ee;
}

.about-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.45rem;
  height: 2px;
  background: #99c3cf;
}

.section-contact {
  min-height: auto;
  padding-bottom: 1.8rem;
}

.section-contact .section-content {
  justify-content: center;
}

.full-width {
  width: 100%;
}

.email-wrapper {
  margin: 1.2rem 0 1rem;
}

.contact-actions {
  margin-top: 1.35rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.email-link {
  display: inline-block;
  text-decoration: none;
  color: var(--text-light);
  border: 1px solid rgba(151, 188, 199, 0.65);
  border-radius: var(--radius-xs);
  padding: 0.72rem 1rem;
  background: rgba(6, 42, 60, 0.7);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.email-link:hover {
  border-color: rgba(252, 238, 224, 0.8);
  background: rgba(12, 78, 108, 0.75);
  transform: translateY(-2px);
}

.down-arrow {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  animation: bounce 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 200ms ease;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(252, 238, 224, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(4, 34, 49, 0.34);
}

.down-arrow:hover {
  opacity: 1;
}

footer {
  padding: 1rem;
  text-align: center;
  background: var(--footer-bg);
  color: #d8edf4;
  font-size: 0.88rem;
}

.usecase-page {
  padding-top: 0;
}

.industries-page {
  padding-top: 0;
}

.industries-hero {
  position: relative;
  min-height: 100vh !important;
  display: grid;
  place-items: center;
  padding: 5.2rem 1rem 3rem;
  background: linear-gradient(180deg, rgba(2, 25, 37, 0.42) 0%, rgba(2, 25, 37, 0.68) 100%), url('/media/hero-pic.jpg') center/cover no-repeat;
}

.industries-hero-content {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  text-align: center;
}

.industries-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}

.industries-hero-content p {
  max-width: 760px;
  margin: 0 auto;
}

.industries-section {
  padding: 1.2rem 0 2rem;
}

.industries-section--closing {
  padding-bottom: 2.4rem;
}

.industries-shell {
  width: min(1200px, calc(100% - 1.8rem));
  margin: 0 auto;
}

.industries-copy-block {
  margin-bottom: 1.35rem;
}

.industries-grid {
  align-items: stretch;
}

.industries-card {
  min-height: 100%;
}

.industries-closing-panel {
  display: grid;
}

.industries-closing-panel .section-text {
  text-align: center;
}

.investors-page {
  padding-top: 0;
}

.investors-hero {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 5.2rem 1rem 3rem;
  background: linear-gradient(180deg, rgba(2, 25, 37, 0.42) 0%, rgba(2, 25, 37, 0.68) 100%), url('/media/hero-pic.jpg') center/cover no-repeat;
}

.investors-hero-content {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  text-align: center;
}

.investors-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
}

.investors-hero-content p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.industries-hero {
  min-height: 70vh;
}

.investors-section {
  padding: 2.5rem 0;
}

.investors-shell {
  width: min(1200px, calc(100% - 1.8rem));
  margin: 0 auto;
}

.usecase-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 5.5rem 1rem 3rem;
  background: linear-gradient(180deg, rgba(2, 25, 37, 0.42) 0%, rgba(2, 25, 37, 0.68) 100%), url('/media/hero-pic.jpg') center/cover no-repeat;
}

.usecase-hero--missing {
  min-height: 60vh;
}

.usecase-hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  text-align: center;
}

.usecase-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

.usecase-hero-content p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
}

.usecase-section {
  padding: 1rem 0 2rem;
}

.usecase-section--nav {
  padding-top: 1.25rem;
}

.usecase-section--band {
  background: rgba(2, 24, 36, 0.28);
  border-top: 1px solid rgba(252, 238, 224, 0.08);
  border-bottom: 1px solid rgba(252, 238, 224, 0.08);
}

.usecase-shell {
  width: min(1200px, calc(100% - 1.8rem));
  margin: 0 auto;
}

/* Two-column layout for pages that include a visual (sensor) */
.usecase-shell.usecase-with-image {
  display: flex;
  gap: 1.5rem;
  align-items: center; /* vertically center the two columns */
}

.usecase-shell.usecase-with-image .usecase-copy-block {
  flex: 0 0 46%;
  max-width: none;
  margin-bottom: 0;
}

.usecase-shell.usecase-with-image .sensor-photo {
  margin-top: 1rem;
}

.usecase-shell.usecase-with-image .usecase-outcome-grid {
  flex: 1 1 54%;
  display: grid;
  grid-template-columns: 1fr; /* stack vertically for clarity */
  gap: 1rem;
}

@media (max-width: 960px) {
  .usecase-shell.usecase-with-image {
    display: block;
  }
  .usecase-shell.usecase-with-image .usecase-copy-block {
    max-width: 780px;
    margin: 0 auto 1.25rem;
  }
  .usecase-shell.usecase-with-image .usecase-outcome-grid {
    grid-template-columns: 1fr;
    margin: 0 auto;
  }
}

.usecase-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.usecase-nav--hero {
  justify-content: center;
  margin: 0 auto 1.5rem;
  max-width: 980px;
}

.usecase-nav--hero .usecase-nav-link {
  background: transparent;
  border-color: rgba(252, 238, 224, 0.28);
}

.usecase-nav--hero .usecase-nav-link:hover,
.usecase-nav--hero .usecase-nav-link.is-active {
  background: rgba(4, 34, 49, 0.24);
  border-color: rgba(252, 238, 224, 0.48);
}

.usecase-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(151, 188, 199, 0.28);
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--text-light);
  background: rgba(4, 34, 49, 0.62);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.usecase-nav-link:hover,
.usecase-nav-link.is-active {
  border-color: rgba(252, 238, 224, 0.45);
  background: rgba(9, 72, 98, 0.66);
  transform: translateY(-1px);
}

.usecase-copy-block {
  max-width: 780px;
  margin-bottom: 1.25rem;
}

.usecase-copy-block h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.65rem;
}

.usecase-copy-block p {
  color: #d7e7ee;
}

.usecase-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.usecase-outcome-card {
  min-height: 100%;
}

.usecase-priority-layout,
.usecase-bottom-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.usecase-priority-grid .offering-card p {
  color: #d7e7ee;
  font-size: 0.94rem;
}

.usecase-panel {
  padding: 1.3rem;
}

.usecase-bottom-layout .usecase-panel:last-child {
  text-align: center;
}

.usecase-actions {
  justify-content: center;
}

@keyframes bounce {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.85;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.7s ease-out forwards;
}

.animate-on-scroll.slide-left {
  animation: slideInLeft 0.7s ease-out forwards;
}

.animate-on-scroll.slide-right {
  animation: slideInRight 0.7s ease-out forwards;
}

.animate-on-scroll[data-delay="1"] {
  animation-delay: 0.1s;
}

.animate-on-scroll[data-delay="2"] {
  animation-delay: 0.2s;
}

.animate-on-scroll[data-delay="3"] {
  animation-delay: 0.3s;
}

.animate-on-scroll[data-delay="4"] {
  animation-delay: 0.4s;
}

@media (max-width: 960px) {
  .hero-highlights,
  .hero2-grid,
  .detail-grid,
  .workflow-grid,
  .usecase-outcome-grid {
    grid-template-columns: 1fr;
  }

  .section-content {
    flex-direction: column;
  }

  .section-photo {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .header-shell {
    align-items: center;
  }

  .hamburger {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    margin-left: 0;
    width: min(260px, 100%);
    padding: 0.45rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: rgba(9, 53, 74, 0.96);
    border: 1px solid rgba(252, 238, 224, 0.16);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 32px rgba(0, 20, 29, 0.34);
  }

  .main-nav.show {
    display: flex;
  }

  .main-nav a {
    width: 100%;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0.25rem;
    box-shadow: none;
    background: rgba(4, 34, 49, 0.72);
  }

  .nav-dropdown-intro {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .hero {
    padding-top: 6.5rem;
  }

  .hero p,
  .hero2-intro,
  .section-lead,
  .workflow-lead,
  .contact-copy {
    font-size: 0.94rem;
  }

  .section,
  .section-alt {
    width: min(1200px, calc(100% - 1rem));
  }

  .section-text,
  .photo-frame {
    padding: 1rem;
  }

  .photo-badge {
    left: 1.3rem;
    bottom: 1.3rem;
  }

  .usecase-nav {
    flex-direction: column;
  }

  .usecase-nav-link {
    width: 100%;
    justify-content: center;
  }

  .usecase-actions {
    justify-content: center;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 17px;
  }

  .hero2-grid,
  .workflow-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section-content {
    flex-direction: column;
  }

  .section-photo {
    min-width: 0;
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .header-shell {
    margin-top: 0.45rem;
  }

  .hamburger {
    display: flex;
  }

  .main-nav {
    position: absolute;
    right: 0.8rem;
    top: calc(100% + 0.35rem);
    min-width: 210px;
    padding: 0.5rem;
    border: 1px solid rgba(252, 238, 224, 0.2);
    border-radius: 0.55rem;
    background: rgba(7, 44, 62, 0.95);
    backdrop-filter: blur(6px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .main-nav.show {
    display: flex;
  }

  .hero,
  .hero2 {
    min-height: auto;
  }

  .hero2-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .down-arrow {
    display: none;
  }

  .email-link {
    word-break: break-all;
  }
}
.seasons-grid { grid-template-columns: repeat(2, 1fr); } .season-icon { width: 48px; height: 48px; margin-bottom: 1rem; } @media (max-width: 768px) { .seasons-grid { grid-template-columns: 1fr; } }

.season-winter { --season-color: #A8D8F0; } /* Light Blue */
.season-spring { --season-color: #98D7C2; } /* Mint Green */
.season-summer { --season-color: #F7B801; } /* Bright Orange */
.season-autumn { --season-color: #EA9010; } /* Warm Brown */

.offering-card.season-winter .season-icon,
.offering-card.season-spring .season-icon,
.offering-card.season-summer .season-icon,
.offering-card.season-autumn .season-icon {
  filter: drop-shadow(0 0 5px var(--season-color));
}

.offering-card.season-winter h2,
.offering-card.season-spring h2,
.offering-card.season-summer h2,
.offering-card.season-autumn h2 {
  color: var(--season-color);
}


.placeholder-image {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  display: block;
}

.content-image-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
}

.content-image-layout img {
  max-height: 500px;
  width: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .content-image-layout {
    grid-template-columns: 1fr;
  }
}



.usecase-outcome-grid--stacked {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}