/* XF Solutions final visual and usability refinements */
:root { --light: #E9EDF3; --light-2: #D6DEE9; --light-panel: #F4F6F9; }
/* Do not tile illustrative plant art behind unrelated product content. */
.start::before, .res::before, .faq::before, .platform::before,
.flow::before, .demo::before, .roles::before, .services::before, .evidence::before,
.start::after, .res::after, .faq::after, .platform::after,
.flow::after, .demo::after, .roles::after, .services::after, .evidence::after {
  content: none !important; display: none !important;
}
.light { background: #E9EDF3; }
.cp, .rcard { background: #F4F6F9; border-color: #D6DEE9; }
.rcard--wide { background: linear-gradient(135deg, #F4F6F9, #E9F0F8); }
.cp::before { background: #F4F6F9; }
/* Service icons are crisp CSS elements, not low-resolution decorative image placeholders. */
.svc__card { min-height:250px; padding-top:26px; }
.svc__card .svc__n { display:inline-block; padding:5px 9px; background:rgba(1,186,253,.085); border:1px solid rgba(1,186,253,.24); border-radius:7px; }
.svc__card:hover { border-color:rgba(1,186,253,.5); }
.svc__card:focus-within { outline:2px solid var(--cyan); outline-offset:2px; }
/* Application cards remain the same height even if blurbs differ. */
.xp__cats { align-items:stretch; }
.xcat-wrap { height:100%; }
.xcat { height:100%; min-height:190px; }
/* Document buttons and interactive controls have clearly distinguishable focus states. */
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline:2px solid #01BAFD;
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce) {
 .svc__feature, .cp, .rcard { animation:none !important; transition:none !important; }
}
/* Navigation: one sign-in link, not a duplicate at desktop sizes. */
.nav__links .nav__signin--mobile {display:none !important;}
@media (max-width:1240px) {
  .nav__links .nav__signin--mobile {display:flex !important;}
  .nav__actions > .nav__signin {display:none !important;}
}
/* Engineering section directly below the illustration, matching the approved design. */
#services.section.services { padding:26px 0 80px !important; }
#services .container { width:100%; max-width:1480px; }
#services .section__head {
  margin:0 0 22px !important;
  padding:0 !important;
  width:100%; max-width:none !important;
  text-align:left !important;
}
#services .section__head h2 { max-width:none !important; font-size:clamp(2rem,3.2vw,3.35rem); }
#services .section__head .lead { max-width:740px; }
#services .svc__all { right:0; top:38px; }
#services .svc { margin-top:18px; }
#services .svc__feature { min-height:390px; }
@media (max-width:860px) {
  #services .svc__all { position:static !important; display:inline-flex; margin-top:10px; }
}

/* =========================================================
   Hero v2 (6 Nov 2026): live HTML copy and buttons, plant artwork
   on the right. Replaces the single-image hero. The artwork holds
   only the plant and illustrative callouts, no headline or buttons.
   ========================================================= */
.hero--v2 { position:relative; min-height:0; padding:96px 0 56px; overflow:hidden;
  background: radial-gradient(900px 520px at 78% 45%, rgba(1,127,248,.18), transparent 65%), linear-gradient(180deg, #06142C 0%, #081A33 100%); }
.hero--v2::before, .hero--v2::after { content:none !important; display:none !important; }
.hero--v2 .hero__inner { display:grid; grid-template-columns:minmax(340px,410px) minmax(0,1fr); gap:clamp(24px,2.6vw,40px); align-items:center; min-height:0 !important;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.hero--v2 .hero__copy { position:relative; z-index:3; width:auto; padding:8px 0; align-self:center; }
.hero--v2 .eyebrow { font-size:.74rem; letter-spacing:.14em; flex-wrap:wrap; row-gap:4px; }
.hero--v2 .hero__title { font-size:clamp(2.6rem, 4.4vw, 4.3rem); line-height:1; margin:18px 0 16px; color:#fff; background:none; }
.hero--v2 .hero__sub { max-width:520px; }
.hero--v2 .hero__desc { display:none; }
.hero--v2 .hero__pills { max-width:560px; }
.hero--v2 .hero__art { position:relative; margin:0 calc(-1 * (var(--gut) + max(0px, (100vw - var(--maxw)) / 2))) 0 0; z-index:1; }
.hero--v2 .hero__art picture { border-radius:18px 0 0 18px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(1,186,253,.22); }
.hero--v2 .hero__art picture, .hero--v2 .hero__art-img { display:block; width:100%; height:auto; aspect-ratio:956 / 520; }
.hero--v2 .hero__hotspots { position:absolute; inset:0 0 auto 0; width:100%; height:auto; aspect-ratio:956 / 520; pointer-events:none; z-index:2; overflow:visible; }

.hero__light { fill:#A8F7FF; opacity:.8; filter:url(#hero-point-glow); transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference) {
  .hero__light--one { animation:heroPulse 3s ease-in-out infinite; }
  .hero__light--two { animation:heroPulse 3s ease-in-out 1s infinite; }
  .hero__light--three { animation:heroPulse 3s ease-in-out 2s infinite; }
}
@keyframes heroSignalTravel { to { stroke-dashoffset:-260; } }
@keyframes heroPulse { 0%,100% { opacity:.45; transform:scale(.8); } 50% { opacity:1; transform:scale(1.25); } }
.hero--v2 .hero__art-cap { position:absolute; right:14px; bottom:12px; z-index:3; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:#C9D8EE; background:rgba(6,20,44,.78); border:1px solid rgba(1,186,253,.25); border-radius:6px; padding:3px 8px; }
@media (max-width: 1100px) {
  .hero--v2 { padding:96px 0 48px; }
  .hero--v2 .hero__inner { grid-template-columns:1fr; gap:28px; }
  .hero--v2 .hero__art { margin:0 calc(-1 * var(--gut)); }
  .hero--v2 .hero__art picture { border-radius:0; }
  .hero--v2 .hero__pills { max-width:none; }
}
@media (max-width: 600px) {
  .hero--v2 { padding-top:88px; }
  .hero--v2 .eyebrow { font-size:.64rem; letter-spacing:.08em; padding:5px 11px; }
  .hero--v2 .hero__title { font-size:clamp(2.4rem, 11vw, 3.2rem); }
  .hero--v2 .hero__pills { display:none; }
}

/* Contact form: every field dark with light text (two fields were light-on-light). */
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  background-color:rgba(11,19,38,.7) !important; color:var(--text) !important; border-color:var(--line-2) !important; }
.form select option { background:#111B32; color:#F2F6FF; }

/* Roles: an opened card no longer stretches its neighbour into an empty box. */
.rolegrid { align-items:start; }

/* Engineering services: same width and heading alignment as every other section. */
#services .container { max-width:var(--maxw) !important; }
#services .section__head { max-width:780px !important; margin:0 auto 40px !important; text-align:center !important; }
#services .section__head .lead { margin-left:auto; margin-right:auto; }
#services .svc__all { position:static !important; display:inline-flex; margin-top:14px; }
#services .svc__icon .ic { width:28px; height:28px; color:#0A6FD6; stroke-width:1.6; }
#services .svc__feature { padding-left:28px !important; padding-right:28px !important; overflow:hidden; }
#services .svc__img { display:block; width:calc(100% + 56px) !important; max-width:none; margin-left:-28px !important; height:150px; object-fit:cover; }

/* Hero pills: proper line icons instead of CSS blobs. */
.hero--v2 .hero__pill::before { content:none !important; display:none !important; }
.hero--v2 .hero__pill { display:flex; flex-direction:column; gap:10px; min-height:0; padding:12px 16px 4px 14px; text-decoration:none; }
.hero--v2 .hero__pill:first-child { padding-left:0; }
.hero--v2 .hero__pill .ic { width:30px; height:30px; color:var(--cyan); stroke-width:1.5; }
.hero--v2 .hero__pill b { font-size:.98rem; }
@media (min-width: 1101px) {
  .hero--v2 .hero__title { font-size:clamp(2.6rem, 3.9vw, 3.9rem); }
  .hero--v2 .hero__pills { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hero--v2 .hero__pill b { font-size:.9rem; }
}
/* Services kicker matches the other section labels now the heading is centred. */
#services .kicker { padding-left:0 !important; font-size:.78rem !important; letter-spacing:.14em !important; color:#0A6FD6 !important; }
#services .kicker::before { content:none !important; }
#services .svc__feature h3 { max-width:none !important; }

/* Hero: the signal leaves from TK-101, below the callouts, so it never crosses a label. */
.hero__start { fill:#A8F7FF; filter:url(#hero-point-glow); }
@media (prefers-reduced-motion: no-preference) { .hero__start { animation:heroPulse 3s ease-in-out .5s infinite; transform-box:fill-box; transform-origin:center; } }

/* Roles: compact buttons plus one full-width detail panel. */
.rolegrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:stretch; }
.rbtn { display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:16px 20px; text-align:left; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; transition:border-color .2s, background .2s; }
.rbtn .ic { width:26px; height:26px; color:var(--cyan); }
.rbtn b { flex:1; font-family:var(--f-head); font-weight:600; font-size:1.02rem; }
.rbtn__i { font-family:var(--f-mono); font-size:1.2rem; color:var(--muted); transition:transform .25s; }
.rbtn:hover { border-color:var(--line-2); }
.rbtn[aria-expanded="true"] { border-color:rgba(1,186,253,.55); background:rgba(1,127,248,.12); }
.rbtn[aria-expanded="true"] .rbtn__i { transform:rotate(45deg); color:var(--cyan); }
.rpanel { grid-column:1 / -1; padding:24px 26px; border-radius:var(--r); border:1px solid rgba(1,186,253,.4); background:linear-gradient(180deg, rgba(31,48,88,.96), rgba(17,27,50,.96)); box-shadow:0 28px 55px -35px rgba(0,0,0,.85); animation:panelIn .35s var(--ease); }
.rpanel__head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.rpanel__head .ic { width:28px; height:28px; color:var(--cyan); }
.rpanel__head h3 { font-size:1.25rem; }
.rpanel__cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.rpanel h4 { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; font-weight:500; }
.rpanel ul { margin:0; padding-left:18px; color:var(--text-2); font-size:.95rem; line-height:1.7; }
@media (max-width:960px) { .rolegrid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .rolegrid { grid-template-columns:1fr; } .rpanel__cols { grid-template-columns:1fr; } }
/* Hero buttons stack as a neat pair now the copy column is narrower. */
@media (min-width: 1101px) {
  .hero--v2 .hero__ctas { flex-direction:column; align-items:stretch; max-width:330px; gap:12px; }
  .hero--v2 .hero__ctas .btn { justify-content:center; }
}
/* Buttons inside light sections keep white text (link colour was overriding it). */
.light a.btn--primary, .light a.btn--primary:hover { color:#fff !important; text-decoration:none; }
.rcard a.btn--primary { margin-top:6px; padding-top:8px; align-self:flex-start; }

/* Eye icon on See It in Action */
.btn__eye { flex: none; margin-right: 2px; color: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__eye, .btn:focus-visible .btn__eye { animation: eyeBlink .5s ease-in-out; transform-origin: center; transform-box: fill-box; }
}
@keyframes eyeBlink { 0%,100% { transform: scaleY(1); } 45% { transform: scaleY(.15); } }

/* Mobile and tablet fixes (Nov 9) */
.wf__rail { position: relative; }
.cps { counter-reset: cp; }
.cp { counter-increment: cp; }
.cp::before { content: counter(cp); display: grid; place-items: center; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; color: #0A6FD6; line-height: 1; }
@media (max-width: 1100px) { .cps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cps::before { display: none; } }
@media (max-width: 600px) { .cps { grid-template-columns: 1fr; gap: 14px; } .cp { padding-top: 58px; } }
@media (max-width: 760px) {
  .bt__diagram { overflow: visible; }
  #bowtie { min-width: 0; }
  .bt__hint { display: none !important; }
}

/* Hero v3: clean plant photo with live callouts and animated links (Nov 10) */
.hero--v2 .hero__art { container-type: inline-size; }
.hero--v2 .hero__art picture, .hero--v2 .hero__art-img, .hero--v2 .hero__hotspots { aspect-ratio: 1672 / 941; }
.hx-layer { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1672 / 941; z-index: 3; pointer-events: none; }
.hx { position: absolute; display: flex; gap: .75em; align-items: flex-start; padding: .8em 1em; border-radius: .9em;
  font-size: clamp(10px, 1.12cqw, 15px); line-height: 1.35; color: #C9D8EE;
  background: rgba(5,14,32,.82); border: 1.5px solid var(--hx-c, #3CD9FF); backdrop-filter: blur(3px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 18px -4px var(--hx-c, #3CD9FF), inset 0 0 14px -8px var(--hx-c, #3CD9FF); }
.hx__ic { flex: none; width: 2.3em; height: 2.3em; color: var(--hx-c); stroke-width: 1.6; fill: none; stroke: currentColor; }
.hx__t { display: block; color: #fff; font-family: var(--f-head); font-weight: 600; font-size: 1.2em; margin-bottom: .15em; }
.hx__l { display: block; }
.hx__row { display: flex; align-items: center; gap: .5em; margin-top: .35em; color: #DCE6F7; }
.hx__row em { margin-left: auto; font-style: normal; font-weight: 600; color: #fff; }
.hx__row em.hx__warn { color: #F2A93B; }
.hx__dot { width: .6em; height: .6em; border-radius: 50%; }
.hx__dot--ok { background: #2BB673; box-shadow: 0 0 6px #2BB673; }
.hx__dot--warn { background: #F2A93B; box-shadow: 0 0 6px #F2A93B; }
.hx--ptw { --hx-c: #2BD67B; }
.hx--insp { --hx-c: #F2C53B; }
.hx--asset { --hx-c: #2BD6C4; }
.hx--psm { --hx-c: #F2C53B; }
.hx--dash { --hx-c: #2BD67B; }
.hx-wire { fill: none; stroke: #3CD9FF; stroke-width: 4; opacity: .55; filter: url(#hx-glow); }
.hx-flow { fill: none; stroke: #E6FBFF; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 46; opacity: .95; filter: url(#hx-glow); }
.hx-lead { stroke-width: 2.4; opacity: .85; }
.hx-lead--ok { stroke: #2BD67B; } .hx-lead--warn { stroke: #F2C53B; } .hx-lead--teal { stroke: #2BD6C4; }
.hx-node { fill: #A8F7FF; filter: url(#hx-glow); transform-box: fill-box; transform-origin: center; }
.hx-tag rect { fill: rgba(5,14,32,.78); stroke: rgba(201,216,238,.35); stroke-width: 1.5; }
.hx-tag text { font-family: var(--f-head); font-weight: 600; font-size: 22px; fill: #fff; }
.hero--v2 .hero__start { fill: #3CD9FF; filter: url(#hx-glow); }
@media (prefers-reduced-motion: no-preference) {
  .hx { opacity: 0; animation: hxIn .7s var(--ease, ease) forwards, hxFloat 7s ease-in-out infinite; }
  .hx--ptw { animation-delay: .3s, 1.2s; } .hx--insp { animation-delay: .5s, 2.6s; } .hx--asset { animation-delay: .7s, 1.8s; }
  .hx--psm { animation-delay: .9s, 3.3s; } .hx--dash { animation-delay: 1.1s, 2.2s; }
  .hx-wire { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: hxDraw 1.6s ease-out .2s forwards; }
  .hx-flow { animation: hxTravel 2.8s linear infinite; }
  .hx-flow--2 { animation-duration: 2.2s; } .hx-flow--3 { animation-duration: 3.4s; animation-direction: reverse; }
  .hx-node { animation: heroPulse 3s ease-in-out infinite; }
  .hx-node--n2 { animation-delay: .6s; } .hx-node--n3 { animation-delay: 1.2s; } .hx-node--n4 { animation-delay: 1.8s; } .hx-node--n5 { animation-delay: 2.4s; }
}
@keyframes hxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hxFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes hxDraw { to { stroke-dashoffset: 0; } }
@keyframes hxTravel { to { stroke-dashoffset: -48; } }
/* Narrow pictures: the scene keeps its links and numbered points; all five callouts sit underneath it, numbered to match. */
.hx-num { display: none; }
@container (max-width: 620px) {
  .hx-lead, .hx-tag { display: none; }
  .hx-num { display: inline; }
  .hx-layer { position: static; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 0; }
  .hx { position: relative; left: auto !important; top: auto !important; width: auto !important; font-size: 12px; padding: .7em .75em; gap: .55em; backdrop-filter: none; }
  .hx::after { content: attr(data-n); position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    font: 600 11px/1 var(--f-head); color: #06142C; background: var(--hx-c); }
  .hx__ic { width: 1.9em; height: 1.9em; }
  .hx--dash { grid-column: 1 / -1; }
  .hero--v2 .hero__art-cap { bottom: auto; top: calc(56.28cqw - 30px); right: 8px; font-size: .6rem; }
}


/* The page line also runs on phones and tablets, in the left gutter. */
@media (max-width: 1279px) { .signal { display: block; } .sig-node text { display: none; } }
.hx-num circle { fill: rgba(5,14,32,.85); stroke: #3CD9FF; stroke-width: 3; }
.hx-num text { font-family: var(--f-head); font-weight: 700; font-size: 38px; fill: #fff; }