/* ==========================================================================
   Solutions & Products — map (infographic) + catalog timeline
   Palette: ink / blue / neutral only (lighter mixes — no copper/gold)
   ========================================================================== */

/* ---- Map / infographic ------------------------------------------------- */
.solmap{
  --bg:#F4F2F6; --card:#fff; --ink:#2A2A30; --muted:#8A8892; --border:#E6E2EC;
  --ease:cubic-bezier(.22,1,.36,1);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding-inline: var(--sp-5, 1.5rem);
}
.solmap-sec{
  position:relative;
  z-index:2;
  margin-top:-350px;
  padding-bottom:50px;
}
@media (max-width:47.99rem){.solmap-sec{margin-top:50px;}}
@media (min-width:48rem) and (max-width:63.99rem){.solmap-sec{margin-top:-180px;}}
@media (min-width:64rem){.solmap-sec{margin-top:-420px;}}
.head{text-align:center;margin-bottom:8px;}
.head .kick{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.head h1{margin:8px 0 4px;font-size:28px;font-weight:700;letter-spacing:-.02em;}
.head p{margin:0;font-size:13px;color:var(--muted);}
.legend{display:flex;justify-content:center;gap:16px;margin:14px 0 22px;font-size:11px;color:var(--muted);}
.legend span{display:flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.cols{display:grid;grid-template-columns:var(--solcols,0.82fr 1fr 0.72fr 1fr);gap:0;margin-bottom:10px;width:100%;}
.col-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;}
.cols .col-h:first-child{text-align:left;padding-left:10px;}
.cols .col-h:nth-child(2),
.cols .col-h:nth-child(3),
.cols .col-h:last-child{text-align:right;padding-right:10px;}
.map{position:relative;width:100%;}
.map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.grid{position:relative;display:grid;grid-template-columns:var(--solcols,0.82fr 1fr 0.72fr 1fr);gap:0;z-index:1;width:100%;align-items:stretch;}
.stage{display:flex;flex-direction:column;gap:9px;padding:0 10px;min-height:100%;box-sizing:border-box;}
.stage.tags{gap:7px;align-items:center;justify-content:flex-start;}
/* Modules, Technology, Industries: pills right-aligned, vertically centered */
#s1.stage.tags,
#s2.stage.tags,
#s3.stage.tags{
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-end;
  gap:7px;
}
.node{
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .25s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.stage.cards .node{
  position:relative;
  background:linear-gradient(155deg, var(--pc,#C9B6D9) 0%, color-mix(in srgb, var(--pc,#C9B6D9) 42%, #fff) 100%);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:14px;
  padding:14px 26px 14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  box-shadow:0 6px 18px rgba(60,45,80,.1);width:100%;
  overflow:hidden;
}
.stage.cards .node > *{position:relative;z-index:1;}
.stage.cards .node::before{
  content:"";position:absolute;inset:0;border-radius:14px;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--sa,0deg), transparent 0deg, #fff 20deg, color-mix(in srgb,var(--pc,#C9B6D9) 55%,#fff) 40deg, transparent 72deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s var(--ease);
}
.stage.cards .node:hover::before{opacity:1;animation:solshine 1.8s linear infinite;}
@keyframes solshine{to{--sa:360deg;}}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg;}
.stage.cards .node:hover{transform:translateY(-1px);box-shadow:0 8px 26px -4px var(--pc,#C9B6D9);}
.stage.cards .node .pname{color:#2A2A30;line-height:1.15;}
.stage.cards .node .pf{font-size:13px;font-weight:500;opacity:.7;}
.stage.cards .node .pr{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.stage.cards .node small{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-size:8.5px;color:rgba(42,42,48,.6);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.stage.tags .node{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:0 12px;
  min-height:30px;
}
.stage.tags .node:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(60,45,80,.1);}
.stage.tags .node .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.stage.tags .node b{font-size:11.5px;font-weight:600;line-height:1.3;}
.stage.tags .node small{display:none;}
.ribbon{fill:none;stroke-linecap:round;opacity:.32;transition:opacity .3s var(--ease);}
.map.sel .ribbon{opacity:0;}
.map.sel .ribbon.lit{opacity:.85;}
.map.sel .node{opacity:.22;}
.map.sel .node.lit{opacity:1;}
.map.sel .node.src{opacity:1;box-shadow:0 10px 26px rgba(60,45,80,.18);}
.hint{text-align:center;margin-top:18px;font-size:11.5px;color:var(--muted);letter-spacing:.04em;}
.hint b{color:var(--ink);font-weight:600;}
.mobile{display:none;}
@media (max-width: 63.99rem){
  .cols,.map,.legend,.hint{display:none;}
  .mobile{display:block;position:relative;z-index:2;padding-right:0.5rem;}
  .m-select,.m-prod,.m-block{max-width:100%;}
}
@media (min-width: 64rem){
  .mobile{display:none;}
  .cols,.map,.legend,.hint{display:revert;}
  .cols{display:grid;}
  .map{display:block;position:relative;}
  .legend{display:flex;}
  .hint{display:block;}
}

.m-select{position:relative;margin-bottom:20px;}
.m-select label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.m-select select{
  -webkit-appearance:none;appearance:none;
  width:100%;font:inherit;font-size:16px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:15px 44px 15px 16px;cursor:pointer;
  box-shadow:0 6px 18px rgba(60,45,80,.07);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.m-select select:focus{outline:none;border-color:var(--ink);}
.m-select::after{
  content:"";position:absolute;right:18px;top:calc(50% + 6px);
  width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-50%) rotate(45deg);pointer-events:none;
}
.m-prod{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;margin-bottom:8px;
  box-shadow:0 6px 18px rgba(60,45,80,.07);
}
.m-prod .bar{width:5px;align-self:stretch;border-radius:4px;flex:none;}
.m-prod .txt b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.m-prod .txt span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.m-flow{position:relative;padding-left:6px;}
.m-sec{position:relative;padding:16px 0 4px;}
.m-sec h4{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.m-sec h4::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--dotc,#8A8892);flex:none;
}
.m-tags{display:flex;flex-wrap:wrap;gap:7px;}
.m-tag{
  display:inline-flex;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink);
}
.m-inds{
  margin:0;
  font-size:0.875rem;
  line-height:1.55;
  color:var(--text-muted, #55618A);
}
.m-modlist{display:flex;flex-direction:column;gap:8px;}
.m-modrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
}
.m-modtech{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.m-link{display:flex;justify-content:center;padding:2px 0;}
.m-link svg{width:16px;height:16px;color:#CFC8D6;}

/* ---- Catalog timeline -------------------------------------------------- */
.solcat-sec {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: calc(var(--divider-gap, 4rem) + 20px);
}
/* Hairline airline (same as index section--tech) + 50px space under it */
.solcat-wrap {
  border-top: 1px solid var(--border-soft);
  padding-top: 50px;
  width: 100%;
  box-sizing: border-box;
}
.solcat {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.solcat__block + .solcat__block {
  margin-top: clamp(2.75rem, 6vw, 4rem);
}
.solcat .section__head {
  margin-bottom: calc(var(--sp-8) * 0.8);
}

/* Timeline settles full container width */
.solrail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
}
.solitem {
  position: relative;
  display: grid;
  grid-template-columns: clamp(2.75rem, 8vw, 4.25rem) 1.5rem minmax(0, 1fr);
  column-gap: 0;
  width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--elyon-ink) 10%, transparent);
}
.solitem:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--elyon-ink) 10%, transparent);
}

.solitem__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--elyon-ink) 16%, transparent);
  padding: 1.35rem 0.35rem 0 0;
  text-align: right;
  user-select: none;
  transition: color 0.35s ease;
}

.solitem__rail {
  position: relative;
  width: 1.5rem;
  justify-self: center;
}
.solitem__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--elyon-ink) 14%, transparent);
}
.solitem:first-child .solitem__rail::before { top: 1.7rem; }
.solitem:last-child .solitem__rail::before { bottom: calc(100% - 1.7rem - 11px); }

.solitem__node {
  position: absolute;
  left: 50%;
  top: 1.7rem;
  width: 11px;
  height: 11px;
  margin-left: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--elyon-ink) 28%, transparent);
  background: #fff;
  z-index: 1;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.solitem__body {
  padding: 1.25rem 0 1.35rem 0.85rem;
  min-width: 0;
}
@media (min-width: 48rem) {
  .solitem__body { padding: 1.45rem 0.5rem 1.55rem 1.1rem; }
}

.solitem__toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.solitem__toggle:focus-visible {
  outline: 2px solid var(--elyon-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.solitem__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin-bottom: 0.45rem;
}
.solitem__name {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--elyon-ink);
  margin: 0;
}
.solitem__tag {
  display: none;
}
.solitem__desc {
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.solitem__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 1.5rem;
  margin-top: 0;
  overflow: hidden;
  height: 0;
  opacity: 0;
  width: 100%;
}
@media (min-width: 48rem) {
  .solitem__meta { grid-template-columns: 1fr 1.15fr; }
}

.solitem__meta-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--elyon-ink) 45%, transparent);
  margin-bottom: 0.55rem;
}
.solitem__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.solitem__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--elyon-blue) 16%, transparent);
  background: color-mix(in srgb, var(--elyon-blue) 8%, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--elyon-ink);
}
.solitem__inds {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.solitem.is-open {
  background: color-mix(in srgb, var(--elyon-blue) 5%, transparent);
}
.solitem.is-open .solitem__num {
  color: var(--elyon-blue);
}
.solitem.is-open .solitem__node {
  background: var(--elyon-blue);
  border-color: var(--elyon-blue);
  transform: translateX(-50%) scale(1.15);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--elyon-blue) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .solitem__num,
  .solitem__node { transition: none; }
}