/* The approved Studio Canvas layout keeps the selected solution and its
   concept visuals in one view. Only the Solutions section is affected. */
#solutions { scroll-margin-top: 0; }
#solutions .section-space { padding-top: 22px; padding-bottom: 105px; }
#solutions .section-tag { padding-bottom: 12px; margin-bottom: 17px; }
#solutions .solution-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 15px;
}
#solutions .solution-tab {
  min-width: 0;
  min-height: 60px;
  height: auto;
  padding: 8px 16px;
  gap: 11px;
  align-items: center;
  border-radius: 999px;
}
#solutions .solution-tab:hover { transform: translateY(-3px); }
#solutions .solution-tab[aria-selected="true"] { box-shadow: 0 0 0 3px #a2ed7966, 0 10px 24px #091e2a20; }
#solutions .solution-tab strong { font-size: 13px; line-height: 1.25; }
#solutions .solution-tab-number { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
#solutions .solution-tab-arrow { font-size: 15px; }
#solutions .solution-layout {
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  gap: 0;
  align-items: stretch;
}
#solutions .solution-panel {
  min-width: 0;
  min-height: 560px;
  padding: 32px clamp(24px, 3.1vw, 46px);
}
#solutions .solution-panel h3 {
  font-size: clamp(34px, 3.5vw, 49px);
  margin-top: clamp(22px, 2.7vw, 38px);
  line-height: 1.08;
}
#solutions .solution-panel > p { font-size: 14px; line-height: 1.6; }
#solutions .solution-showcase {
  min-width: 0;
  min-height: 560px;
  background: var(--navy);
  color: #f3faf8;
  padding: 20px clamp(17px, 2.4vw, 32px) 22px;
  display: flex;
  flex-direction: column;
}
#solutions .concept-header {
  min-height: 27px;
  margin: 0 0 10px;
  align-items: center;
}
#solutions .concept-header .overline { color: #f1faf7; margin: 0; }
#solutions .concept-note { font-size: 9px; color: #adced0; text-align: right; }
#solutions .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#solutions .concept-grid { display: block; }
#solutions .concept-stage-visual {
  display: block;
  width: 100%;
  height: clamp(260px, 25vw, 324px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 13px 24px 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: radial-gradient(circle at 76% 43%, #165666 0%, #0a3443 42%, #082934 90%);
  cursor: pointer;
}
#solutions .concept-stage-visual:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#solutions .concept-stage-visual::before,
#solutions .concept-stage-visual::after {
  content: '';
  position: absolute;
  width: 122%;
  height: 90%;
  top: 4%;
  left: -13%;
  border: 1px solid #a2ed7938;
  border-radius: 50%;
  transform: rotate(-15deg);
  z-index: -1;
  pointer-events: none;
}
#solutions .concept-stage-visual::after {
  top: 16%;
  left: -5%;
  border-color: #2bd3dd49;
}
#solutions .concept-stage-browser {
  position: relative;
  z-index: 1;
  height: 125%;
  width: min(76%, 425px);
  margin-left: 5%;
  overflow: hidden;
  background: #edf3f3;
  border: 1px solid #a5cfd0;
  box-shadow: 0 22px 37px #001820a8;
  transform: rotate(-3deg);
  transform-origin: 50% 90%;
}
#solutions .concept-browser-chrome {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  background: #eef3f3;
}
#solutions .concept-browser-chrome i { width: 6px; height: 6px; background: #ee8788; border-radius: 50%; }
#solutions .concept-browser-chrome i:nth-child(2) { background: #e9c873; }
#solutions .concept-browser-chrome i:nth-child(3) { background: #65c6aa; }
#solutions .concept-browser-chrome span { margin: auto; color: #718d94; font-size: 8px; letter-spacing: .1em; }
#solutions .concept-stage-browser img { display: block; width: 100%; height: calc(100% - 25px); object-fit: cover; object-position: top center; }
#solutions .concept-stage-browser .concept-image-ghost {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 0;
  width: 100%;
  height: calc(100% - 25px);
  pointer-events: none;
}
#solutions .concept-stage-info {
  position: absolute;
  right: 15px;
  bottom: 14px;
  width: min(55%, 240px);
  padding: 12px 33px 12px 14px;
  background: var(--accent);
  color: var(--navy);
  box-shadow: 0 9px 24px #001b22a3;
  z-index: 2;
}
#solutions .concept-stage-count { display: block; font-size: 9px; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; }
#solutions .concept-stage-info strong { display: block; font: 800 15px/1.2 var(--font-head); }
#solutions .concept-stage-info > span { position: absolute; top: 13px; right: 12px; font-size: 16px; }
#solutions .concept-stage-detail {
  min-height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}
#solutions .concept-stage-detail > div:first-child { flex: 1 1 155px; min-width: 0; }
#solutions .concept-stage-detail small { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
#solutions .concept-stage-detail p { color: #c9dcde; font-size: 11px; line-height: 1.35; margin: 4px 0 0; }
#solutions .concept-stage-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  max-width: 220px;
  padding: 6px 11px;
  border: 1px solid #a2ed79a8;
  color: #fff;
  line-height: 1.15;
  transition: background .2s, color .2s;
}
#solutions .concept-stage-link span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
#solutions .concept-stage-link strong { display: block; margin-top: 3px; font-size: 11px; overflow-wrap: anywhere; }
#solutions .concept-stage-link:hover { background: var(--accent); color: var(--navy); }
#solutions .concept-stage-link:hover span { color: var(--navy); }
#solutions .panel-references { margin-top: auto; border-top: 1px solid #09232b48; padding-top: 13px; }
#solutions .panel-references-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; margin-bottom: 9px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
#solutions .panel-references-head small { font-size: 8px; letter-spacing: .06em; opacity: .72; }
#solutions .concept-selectors { display: grid; gap: 8px; }
#solutions .concept-reference { min-width: 0; display: flex; min-height: 72px; background: var(--navy); border: 1px solid #0a2933; border-radius: 5px; overflow: hidden; }
#solutions .concept-selector {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 12px 16px;
  color: #f4faf9;
  background: transparent;
  border: 0;
  transition: background .2s;
}
#solutions .concept-selector:hover { background: #1c4a59; }
#solutions .concept-reference.is-active { border-color: #125671; box-shadow: 0 0 0 2px #09232b38; }
#solutions .concept-selector strong { display: block; font: 800 clamp(15px, 1.35vw, 19px)/1.2 var(--font-head); transition: color .2s, transform .25s; }
#solutions .concept-reference.is-active .concept-selector strong { color: var(--accent); }
#solutions .concept-reference-link { display: grid; place-items: center; flex: none; align-self: stretch; padding: 0 12px; color: var(--accent); border-left: 1px solid #507078; font-size: 9px; font-weight: 800; letter-spacing: .04em; transition: background .2s, color .2s; }
#solutions .concept-reference-link:hover { background: var(--accent); color: var(--navy); }
#solutions .concept-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #a1c1c044;
  margin-top: auto;
  padding: 12px 0 0;
}
#solutions .concept-foot p { color: #b9d0d2; font-size: 10px; line-height: 1.4; }
#solutions .concept-foot .button { flex: none; min-height: 44px; color: var(--navy); font-size: 11px; }

/* Motion is event-driven: section entry, solution selection and concept choice. */
#solutions .solution-tab { position: relative; transition: background .25s, border-color .25s, transform .38s, box-shadow .38s; }
#solutions .solution-tab-number::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
  opacity: 0;
  pointer-events: none;
}
#solutions .solution-tab[aria-selected="true"] .solution-tab-number::after { opacity: 1; animation: studio-halo-orbit 2.6s linear infinite; }
#solutions .solution-tab strong { transition: transform .25s; }
#solutions .solution-tab:hover strong { transform: translateY(-2px); }
#solutions.studio-motion-ready:not(.studio-in-view) .solution-tab {
  opacity: 0;
  transform: translateY(16px);
}
#solutions.studio-in-view .solution-tab {
  animation: studio-tab-enter .55s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--tab-order, 0) * 55ms);
}
#solutions .studio-word { display: inline-block; transform-origin: 50% 100%; }
#solutions .studio-text-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#solutions.studio-motion-ready:not(.studio-in-view) .studio-word { opacity: 0; transform: translateY(.5em); }
#solutions.studio-in-view .studio-word {
  animation: studio-word-rise .65s cubic-bezier(.16,.85,.25,1) both;
  animation-delay: calc(var(--word-order, 0) * 42ms);
}
#solutions.studio-in-view .panel-chips span {
  animation: studio-chip-enter .48s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: calc(170ms + var(--chip-order, 0) * 55ms);
}
#solutions.studio-in-view .concept-stage { animation: studio-stage-enter .58s cubic-bezier(.2,.8,.25,1) both; }
#solutions .concept-stage-visual::before,
#solutions .concept-stage-visual::after { z-index: 0; }
#solutions.studio-in-view .concept-stage-visual::before { animation: studio-orbit-one 13s ease-in-out infinite alternate; }
#solutions.studio-in-view .concept-stage-visual::after { animation: studio-orbit-two 17s ease-in-out infinite alternate; }
#solutions.studio-in-view .concept-stage-browser { animation: studio-browser-drift 7s ease-in-out infinite alternate; }
#solutions.studio-in-view .concept-reference {
  animation: studio-selector-enter .5s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: calc(110ms + var(--concept-order, 0) * 75ms);
}
#solutions .concept-reference { position: relative; }
#solutions .concept-reference::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.8,.25,1);
}
#solutions .concept-reference.is-active::after { transform: scaleX(1); }
#solutions .concept-selector strong { transition: transform .25s; }
#solutions .concept-selector:hover strong { transform: translateX(3px); }
@keyframes studio-halo-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(16px); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(16px); }
}
@keyframes studio-word-rise {
  from { opacity: 0; transform: translateY(.55em) rotateX(12deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes studio-tab-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes studio-chip-enter {
  from { opacity: 0; transform: translateY(9px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes studio-selector-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes studio-stage-enter {
  from { opacity: .35; transform: translateX(22px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes studio-browser-drift {
  from { transform: rotate(-3deg) translateY(2px); }
  to { transform: rotate(-2deg) translateY(-5px); }
}
@keyframes studio-orbit-one {
  from { transform: rotate(-15deg) translateX(0); }
  to { transform: rotate(-10deg) translateX(16px); }
}
@keyframes studio-orbit-two {
  from { transform: rotate(-15deg) translateX(0); }
  to { transform: rotate(-19deg) translateX(-15px); }
}

@media (max-width: 1060px) {
  #solutions .solution-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #solutions .solution-panel { min-height: 560px; }
  #solutions .solution-showcase { min-height: 560px; }
  #solutions .concept-stage-browser { width: 79%; }
}
@media (max-width: 760px) {
  #solutions .section-space { padding-top: 18px; padding-bottom: 75px; }
  #solutions .solution-layout { grid-template-columns: 1fr; }
  #solutions .solution-panel { min-height: 0; padding: 28px; }
  #solutions .solution-panel h3 { margin: 23px 0 14px; max-width: 600px; }
  #solutions .panel-references { margin-top: 18px; }
  #solutions .solution-showcase { min-height: 0; padding: 20px 22px 24px; }
  #solutions .concept-stage-visual { height: 315px; }
}
@media (max-width: 540px) {
  #solutions .solution-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #solutions .solution-tab { min-height: 58px; padding: 7px 10px; gap: 8px; }
  #solutions .solution-tab-number { width: 29px; height: 29px; }
  #solutions .solution-tab strong { font-size: 11px; }
  #solutions .solution-tab-arrow { display: none; }
  #solutions .solution-panel { min-height: 0; padding: 24px; }
  #solutions .solution-panel h3 { font-size: clamp(32px, 8vw, 40px); }
  #solutions .panel-references-head small { display: block; }
  #solutions .solution-showcase { padding: 18px 15px 20px; }
  #solutions .concept-stage-visual { height: 248px; }
  #solutions .concept-stage-browser { width: 82%; margin-left: 1%; }
  #solutions .concept-stage-info { width: 58%; right: 8px; bottom: 8px; padding: 8px 25px 8px 9px; }
  #solutions .concept-stage-info strong { font-size: 12px; }
  #solutions .concept-stage-detail { align-items: start; flex-direction: column; gap: 9px; }
  #solutions .concept-reference-link { padding: 0 8px; }
  #solutions .concept-foot { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  #solutions .solution-tab,
  #solutions .concept-selector,
  #solutions .concept-reference-link,
  #solutions .concept-stage-link { transition: none; }
  #solutions .solution-tab-number::after { animation: none !important; transform: translate(-50%, -50%) translateX(16px); }
  #solutions.studio-motion-ready:not(.studio-in-view) .solution-tab,
  #solutions.studio-motion-ready:not(.studio-in-view) .studio-word { opacity: 1; transform: none; }
  #solutions.studio-in-view .studio-word,
  #solutions.studio-in-view .solution-tab,
  #solutions.studio-in-view .panel-chips span,
  #solutions.studio-in-view .concept-stage-visual::before,
  #solutions.studio-in-view .concept-stage-visual::after,
  #solutions.studio-in-view .concept-stage,
  #solutions.studio-in-view .concept-stage-browser,
  #solutions.studio-in-view .concept-reference { animation: none; }
}