/* 05. Progressive enhancement: native popover and CSS motion, no JavaScript. */

/* The native popover supports Escape, outside click and focus restoration. */
.project-popover {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  margin: auto;
  padding: clamp(26px, 5vw, 44px);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 28px 90px #102e3340;
}
.project-popover::backdrop {
  background: #102e3380;
  backdrop-filter: blur(5px);
}
.project-popover:popover-open {
  animation: popover-enter .24s ease-out both;
}
.popover-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green-dark);
  background: var(--white);
  font-size: 26px;
  cursor: pointer;
}
.project-popover .eyebrow { margin: 12px 35px 20px 0; }
.project-popover h2 { font-size: clamp(30px, 6vw, 40px); margin-bottom: 18px; }
.project-popover > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.popover-contacts { display: grid; gap: 12px; margin-block: 26px; }
.popover-contacts a { padding-bottom: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-size: 18px; }
.popover-contacts a:hover { color: var(--green); }
.project-popover > .button { width: 100%; }
.header-action { cursor: pointer; background: transparent; color: var(--ink); font-family: inherit; }

/* One short entrance animation; all content remains present without motion. */
.hero-copy, .page-hero .split > :first-child, .contact-heading {
  animation: intro-enter .65s cubic-bezier(.2,.7,.2,1) both;
}
.hero-visual { animation: intro-enter .8s .08s cubic-bezier(.2,.7,.2,1) both; }
.direction-card .card-image, .hero-visual > img, .product-image {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
  .direction-card:hover .card-image, .hero-visual:hover > img { transform: scale(1.035); }
  .product-card:hover .product-image { transform: scale(1.025); }
  .text-link:hover, .solution-link:hover { color: var(--green-dark); }
  .button:hover .arrow, .text-link:hover > span { transform: translate(3px, -2px); }
}
.button .arrow, .text-link > span { transition: transform .2s ease; }
.service-row { transition: background .2s ease; }
.service-row:hover { background: #17694f06; }
.faq[open] p { animation: intro-enter .25s ease-out; }
.mobile-menu[open] .mobile-nav { animation: menu-enter .2s ease-out; }
.desktop-nav a::after { transition: background .2s ease; }

/* Readability and spacing corrections found during the full-page review. */
.form-field input, .form-field select, .form-field textarea { font-size: 16px; line-height: 1.45; }
.form-field input { min-height: 49px; }
.form-field select { min-height: 49px; }
.hero-footnote { line-height: 1.65; }
.footer-contact { overflow-wrap: anywhere; }
.three-col > *, .four-col > *, .split > *, .section-heading > * { min-width: 0; }
.diagram-node { min-width: 68px; }
.diagram-flow { gap: 8px; }
.page-hero-image.medical { height: auto; aspect-ratio: 2 / 1; object-position: 65% center; }
.brand-caption { letter-spacing: 1.2px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .desktop-nav, .header-action { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { cursor: pointer; font-size: 16px; padding: 15px; list-style: none; }
  .mobile-menu summary::after { content: " ☰"; }
  .mobile-menu[open] summary::after { content: " ×"; }
  .mobile-nav { position: absolute; top: 91px; left: 0; right: 0; padding: 18px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
  .mobile-nav a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .home-hero, .page-hero .split, .software-band .split, .split { grid-template-columns: 1fr; }
  .home-hero { gap: 24px; }
  .hero-visual { min-height: 420px; }
  .hero-copy h1 { font-size: 60px; }
  .hero-copy > p { max-width: 600px; }
  .hero-footnote { margin-top: 28px; }
  .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { gap: 30px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  .contact-note { align-self: center; }
  .cta { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 760px) {
  .brand-caption { font-size: 8px; letter-spacing: .7px; }
  .hero-copy h1 { letter-spacing: -.045em; }
  .mobile-menu summary { font-size: 14px; }
  .card-body { padding: 25px; }
  .feature-strip-inner div { padding-left: 16px; }
  .architecture-layer strong { line-height: 1.5; }
  .architecture-layer small { line-height: 1.6; }
  .visual-caption p { font-size: 23px; }
  .hero-actions .text-link { font-size: 14px; }
  .hero-actions { gap: 12px 20px; }
  .project-popover .eyebrow { font-size: 10px; }
}
@media (max-width: 360px) {
  .brand-caption { font-size: 7px; }
  .brand-name { font-size: 22px; }
  .brand-symbol { width: 26px; }
  .hero-copy h1 { font-size: 37px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .image-label { left: 16px; right: 16px; font-size: 9px; text-align: center; line-height: 1.5; }
  .visual-caption { left: 20px; right: 20px; }
  .visual-caption small { font-size: 10px; }
  .architecture { padding: 18px; }
  .architecture-base { gap: 7px; }
  .architecture-base div { padding: 15px 6px; }
}

/* Scroll effects are progressive: unsupported browsers show the normal page. */
@supports (animation-timeline: view()) {
  .direction-card, .product-card, .step, .info-card {
    animation: scroll-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}
@keyframes intro-enter {
  from { opacity: .35; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-enter {
  from { opacity: .55; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes popover-enter {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes menu-enter {
  from { opacity: .5; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}