/* Responsive composition for the approved Aeternitas design.
   Content flows on narrow screens; desktop artwork keeps its authored layout. */
.motion-paused .hero-slide.is-current .hero-content > *,
.motion-paused .service-visual.animating > div,
.motion-paused .employee-console * {
  animation: none !important;
  filter: none !important;
  opacity: 1;
}
.crm-expand { display: none; }

@media (max-width: 1000px) {
  :root { --pad: clamp(20px, 5.5vw, 40px); }
  html { scroll-padding-top: 92px; }
  .site-header, .site-header.scrolled { padding: 18px var(--pad); gap: 16px; }
  .site-header .brand { gap: 10px; }
  .site-header .brand > img:first-child { width: 33px; }
  .site-header .brand .wordmark { width: 145px; }
  .desktop-nav, .site-header .header-cta { display: none; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 11px; background: none; margin-left: auto; z-index: 60; }
  .menu-toggle span { width: 22px; height: 1px; background: #dce7ef; transition: transform .3s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0; z-index: 40; background: radial-gradient(ellipse at 95% 80%, #16415a, #091420 70%); padding: 100px var(--pad) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .mobile-nav.is-open { opacity: 1; visibility: visible; }
  .mobile-nav a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: 'Inter Tight', sans-serif; font-size: clamp(26px, 6vw, 44px); letter-spacing: -.04em; }
  .mobile-nav a span { font-family: Inter, sans-serif; font-size: 12px; color: #a7c5e2; }

  .hero.hero-carousel { height: auto; min-height: 0; max-height: none; padding: 0; touch-action: pan-y pinch-zoom; }
  .hero-slides { position: relative; inset: auto; }
  .hero-slide { display: none; position: relative; inset: auto; width: 100%; padding: 120px var(--pad) 28px; overflow: hidden; transition: none; }
  .hero-slide.is-current { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-slide .hero-content { display: contents; }
  .hero-content .rebrand { grid-row: 1; margin: 0 0 22px; font-size: 10px; letter-spacing: .1em; gap: 11px; }
  .hero .hero-content h1, .hero .hero-content h2 { grid-row: 2; width: 100%; margin: 0; font-size: clamp(43px, 11vw, 84px); line-height: 1.04; letter-spacing: -.06em; }
  .hero .hero-content .brand-hero-title { font-size: clamp(49px, 12.5vw, 90px); }
  .hero .hero-content h1 > span, .hero .hero-content h2 > span { white-space: normal; }
  .hero .hero-content .hero-copy { grid-row: 4; margin: 0; max-width: 480px; font-size: 16px; line-height: 1.65; }
  .hero .hero-content .button { grid-row: 5; justify-self: start; margin: 22px 0 0; padding: 16px 20px; font-size: 14px; min-height: 52px; }
  .hero-slide > .hero-art, .hero-slide > .hero-employee-art,
  .hero .hero-product-art, .hero-slide > .hero-neural-art {
    grid-row: 3; position: relative; inset: auto; width: 100%; max-width: 600px; margin: 30px auto; transform: none; perspective: none;
  }
  .brand-slide .hero-art { mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); width: calc(100% + 2 * var(--pad)); max-width: none; margin: 2px calc(-1 * var(--pad)) 8px; height: clamp(260px, 77vw, 500px); overflow: hidden; z-index: 0; }
  .brand-slide .hero-sculpture, .brand-slide .infinity-motion { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 85% 50%; animation: none; transform: none; }
  .brand-slide .art-shade { inset: -1px; background: linear-gradient(0deg, #080f18, transparent 22%, transparent 78%, #080f18); }
  .hero-art-caption { display: none; }
  .hero-controls { position: relative; inset: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 var(--pad); padding: 0 0 max(22px, env(safe-area-inset-bottom)); }
  .hero-selector { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hero-dot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0 10px; min-height: 76px; min-width: 0; }
  .hero-dot > span { font-size: 10px; }
  .hero-dot > strong { font-size: 11px; font-weight: 400; line-height: 1.45; white-space: normal; }
  .hero-transport { width: 100%; margin: 0; justify-content: flex-end; gap: 12px; }
  .hero-prev, .hero-next { width: 44px; height: 44px; flex-shrink: 0; }
  .hero .motion-toggle { order: -1; margin-right: auto; min-height: 44px; font-size: 12px; justify-content: flex-start; }
  .hero .motion-label { display: inline; }
  .scene-atmosphere { position: absolute; inset: 0; }
  .scene-coordinate { display: none; }

  .hero-employee-art .employee-compact { transform: none; animation: none; }
  .employee-main, .employee-compact .employee-main { grid-template-columns: .85fr 1.15fr; min-height: 225px; }
  .employee-network, .employee-compact .employee-network { min-height: 225px; }
  .employee-identity { padding: 22px 14px 20px 0; }
  .employee-identity h3 { font-size: clamp(34px, 9vw, 50px); }
  .employee-specialty { font-size: 14px; }
  .employee-description, .employee-task p { font-size: 13px; line-height: 1.6; }
  .employee-roster > button { min-height: 56px; }
  .employee-cycle { min-height: 44px; }

  /* The full CRM stays available, with a readable summary on phones. */
  .hero .crm-hero-art { height: auto !important; margin-top: 30px; }
  .crm-hero-fit { transform: none; padding: 0; perspective: none; }
  .crm-dashboard { grid-template-columns: 36px minmax(0, 1fr); transform: none; animation: none; }
  .crm-nav-wordmark { display: none; }
  .crm-nav-mark { display: block; width: 24px; }
  .crm-nav-brand { padding: 8px 4px; }
  .crm-nav-item { justify-content: center; padding: 10px 4px; }
  .crm-nav-list { padding: 0 4px; }
  .crm-nav-item > span, .crm-nav-item > b, .crm-nav-profile > div { display: none; }
  .crm-nav-group { font-size: 0; height: 1px; margin: 16px 4px; background: #7796aa44; }
  .crm-nav-profile { padding: 12px 4px; justify-content: center; }
  .crm-header-actions { display: none; }
  .crm-dashboard-header { height: auto; min-height: 58px; padding: 12px; }
  .crm-dashboard-header strong { font-size: 18px; }
  .crm-dashboard-header > div > span { font-size: 10px; }
  .crm-dashboard-body { padding: 10px; }
  .crm-top-grid, .crm-bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .crm-panel { padding: 12px; }
  .crm-panel-heading h3, .crm-revenue-panel .crm-panel-heading h3 { font-size: 15px; }
  .crm-mini-tabs, .crm-period, .crm-panel-link { font-size: 10px; }
  .crm-revenue-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .crm-revenue-metrics > div > span { font-size: 9px; }
  .crm-revenue-metrics strong { font-size: 15px; }
  .crm-attention { flex-wrap: wrap; }
  .crm-attention > span { font-size: 10px; }
  .crm-operations p > span, .crm-order-row > div > span { font-size: 9px; }
  .crm-operations p > strong { font-size: 20px; }
  .crm-order-row strong, .crm-order-row > b { font-size: 12px; }
  .crm-hero-art:not(.is-expanded) .crm-products-panel,
  .crm-hero-art:not(.is-expanded) .crm-addons-panel,
  .crm-hero-art:not(.is-expanded) .crm-insights-panel { display: none; }
  .crm-expand { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; min-height: 48px; margin-top: 12px; background: #193a50; color: #d8edf6; border: 1px solid #47738a; border-radius: 6px; font-size: 12px; }
  .crm-hero-caption { font-size: 10px; flex-wrap: wrap; margin: 16px 0 0; }
  .crm-product-title strong, .crm-product-title b { font-size: 11px; }
  .crm-product-row > div > span, .crm-addon-revenue > span { font-size: 10px; }
  .crm-products-list { gap: 14px; grid-template-columns: 1fr; }
  .crm-addon-row, .crm-addon-row b { font-size: 12px; }
  .crm-insights-panel { grid-template-columns: 1fr; }
  .crm-insight-legend > div, .crm-insight-legend b, .crm-insight-legend small { font-size: 11px; }

  .hero .payment-hero-art { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .payment-hero-art .hero-product-label { margin: 0; }
  .hero-payment-card { position: relative; inset: auto; width: min(100%, 330px); max-width: none; margin: 0 auto; padding-bottom: 22px; transform: rotate(-3deg); animation: none; }
  .hero-payment-card .hero-ui-bar { font-size: 11px; }
  .pay-order-label, .pay-currency { font-size: 11px; }
  .pay-total { font-size: 52px; }
  .pay-field { font-size: 13px; padding: 12px; margin: 10px 18px; }
  .pay-animation-button { height: 44px; font-size: 13px; margin: 16px 18px 0; }
  .hero-payment-feed { position: relative; inset: auto; width: 100%; padding: 0; display: grid; gap: 8px; }
  .hero-payment-feed > div { margin: 0; padding: 12px 14px; gap: 10px; }
  .hero-payment-feed p { font-size: 13px; }
  .hero-payment-feed small, .hero-payment-feed > div > span { font-size: 11px; }
  .payment-orbit-label, .payment-orbit { display: none; }
  .payment-hero-art .hero-demo-note { position: relative; inset: auto; font-size: 10px; margin: 0; }
  .hero-slide > .hero-neural-art { height: auto; padding: 260px 0 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; background: none; border: 0; }
  .hero-neural-art canvas { width: 100%; height: 250px; top: 0; left: 0; }
  .neural-core { top: 120px; left: 51%; }
  .neural-core img { width: 55px; }
  .neural-brand { top: 215px; bottom: auto; left: 50%; }
  .neural-brand img { width: 125px; }
  .neural-tag { position: relative; inset: auto; max-width: none; width: 100%; display: block; padding: 18px; }
  .neural-tag > strong { display: block; font-size: 20px; margin: 9px 0 6px; }
  .neural-tag p { font-size: 13px; line-height: 1.6; }
  .neural-card-head > span { font-size: 11px; }
  .neural-card-tags, .neural-signal { display: none; }

  .expertise-grid, .service-list { display: block; }
  .service-list { width: 100%; overflow: visible; padding: 0; }
  .service-item { width: 100%; min-width: 0; max-width: none; flex: none; }
  .service-trigger { grid-template-columns: 24px minmax(0, 1fr) 20px; display: grid; font-size: 21px; padding: 23px 0; gap: 10px; line-height: 1.3; min-height: 70px; }
  .service-trigger .service-symbol { display: block; }
  .service-description { padding: 0 12px 24px 34px; }
  .service-description p { font-size: 15px; line-height: 1.65; }
  .service-stage { position: relative; inset: auto; min-height: 0; max-height: none; aspect-ratio: auto; width: 100%; margin: 0 0 28px; border-radius: 10px; }
  .stage-top { font-size: 9px; padding: 16px 12px; gap: 10px; }
  .service-visual { padding: 0 8px 12px; }
  .stage-bottom { margin: 0 12px; padding: 15px 0; font-size: 12px; flex-wrap: wrap; }
  .stage-bottom > .demo-disclaimer:last-child { font-size: 10px; }
  .workspace { min-width: 0; min-height: 0; }
  .workspace-content { padding: 20px 14px; }
  .workspace-heading { flex-wrap: wrap; }
  .workspace-heading h4 { font-size: 28px; }
  .workspace-eyebrow, .workspace-bar > span:nth-child(2) { font-size: 10px; }
  .workspace-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .workspace-metrics > div > span { font-size: 10px; }
  .workspace-metrics strong { font-size: 23px; }
  .workspace-metrics small { font-size: 10px; line-height: 1.5; }
  .workspace button, .employee-cycle, .picture-link, .contact-link { min-height: 44px; }
  .workspace button { font-size: 13px; }
  .workspace-tab-row { gap: 15px; }
  .workspace-tab-row > span { display: none; }
  .payment-demo-grid, .platform-demo-grid, .ai-demo-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; gap: 12px; }
  .kanban-column { min-height: 92px; padding: 12px; }
  .kanban-column h5 { font-size: 11px; }
  .opportunity h6 { font-size: 16px; }
  .opportunity-label { font-size: 9px; }
  .opportunity > div { font-size: 11px; }
  .secondary-opportunity { display: block; }
  .kanban-empty br { display: none; }
  .crm-action-row { flex-wrap: wrap; gap: 16px; }
  .contact-table > div { grid-template-columns: 1fr 1fr; gap: 12px; font-size: 11px; }
  .contact-table > div > :last-child { grid-column: 1/-1; }
  .ai-context { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .ai-context > div { border-top: 1px solid #c6dbe5; padding: 12px 0; }

  .section-kicker { gap: 16px; }
  .section-kicker .muted { max-width: 45%; text-align: right; font-size: 9px; }
  .intro, .expertise, .approach, .evolution, .reviews, .contact { padding-top: 60px; padding-bottom: 64px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .section-heading > p { font-size: 16px; }
  .section-heading h2 { font-size: clamp(50px, 12vw, 82px); }
  .picture-grid, .command-intro, .evolution-layout, .scale-message { grid-template-columns: 1fr; }
  .command-intro { gap: 24px; }
  .picture-copy h2 { font-size: clamp(43px, 11vw, 75px); }
  .command-scenarios { width: 100%; display: flex; }
  .command-scenarios button { white-space: normal; flex: 1; min-height: 48px; line-height: 1.4; font-size: 12px; }
  .command-run { min-height: 48px; }
  .evolution-field { max-width: 620px; width: 100%; margin-inline: auto; }
  .reviews-heading { display: block; }
  .reviews-heading > p { margin-top: 24px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 24px; }
  .testimonial-card blockquote { font-size: 23px; }
  .testimonial-top { flex-wrap: wrap; gap: 10px; }
  .contact-row { align-items: flex-start; flex-direction: column; gap: 28px; }
  .contact h2 { font-size: clamp(54px, 13vw, 96px); }
  .contact-orbit { width: 100%; aspect-ratio: auto; min-height: 68px; border-radius: 4px; margin: 0; padding: 16px 22px; flex-direction: row-reverse; justify-content: space-between; background: #102a43; color: #f1f8fa; border-color: #102a43; }
  .contact-orbit > span:first-child { font-size: 32px; }
  .contact-orbit > span:last-child { font-size: 12px; margin: 0; }
  .contact-bottom { flex-wrap: wrap; align-items: flex-start; margin-top: 32px; padding-top: 26px; }
  footer { gap: 28px; }
}

@media (max-width: 380px) {
  .hero .hero-content h1, .hero .hero-content h2 { font-size: 11.7vw; }
  .hero .hero-content .brand-hero-title { font-size: 12.5vw; }
  .employee-main, .employee-compact .employee-main { grid-template-columns: 1fr; }
  .employee-network, .employee-compact .employee-network { min-height: 170px; height: 170px; }
  .employee-identity { padding: 0 18px 22px; text-align: left; }
  .employee-skills { justify-content: flex-start; }
  .employee-console-bar { flex-wrap: wrap; gap: 8px; }
  .employee-console-bar > div > span { font-size: 9px; }
  .workspace-metrics { grid-template-columns: 1fr; gap: 12px; }
  .workspace-metrics > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
  .workspace-metrics small { grid-column: 1/-1; }
  .workspace-metrics strong { margin: 0; }
  .foundation-chips { flex-wrap: wrap; }
}
@media (max-width: 1000px) and (max-height: 550px) {
  .mobile-nav { justify-content: flex-start; padding-top: 86px; }
  .mobile-nav a { font-size: 25px; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .employee-console *, .service-visual.animating > div { animation: none !important; filter: none !important; }
}

/* Supporting copy must stay readable against the Ocean surfaces. */
.light-section .command-intro > div > span,
.light-section .scale-cards p,
.light-section .picture-copy > p { color: #4f6d80; }
.workflow-node p, .workflow-node-state, .command-hub p, .command-hub > span { color: #aac6d7; }
.workspace-metrics small, .workspace-metrics > div > span { color: #486b82; }
@media (max-width: 380px) {
  .hero-selector { gap: 6px; }
  .hero-dot > strong { font-size: 10px; }
}