/* ==========================================================================
   Telcotec v2 layer — loaded after telcotec.css
   Hero concept A (layered architecture), services overview, track record,
   balanced selected work, projects, notes, demo form, logo concept A.
   ========================================================================== */
:root {
  --teal-brand: #14B8A6;
  --teal-text:  #0F766E;          /* teal that passes AA as text on white */
  --navy:       #0B1B33;
}

/* ---------- Logo concept A ---------- */
.brand--a { gap: .6rem; }
.brand--a .logo-a { width: 34px; height: 34px; flex-shrink: 0; }
.brand-word { font: 750 1.42rem/1 var(--f-display); letter-spacing: -.03em; color: var(--navy); }
.site-footer .brand-word { color: #fff; }
.site-footer .brand--a .logo-a { width: 38px; height: 38px; }

/* ---------- Generic helpers ---------- */
.status--neutral { color: var(--text-2); background: #EDF1F6; }
.status--neutral::before { background: #8C9BB0; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--signal-ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy); }
.btn-col { display: grid; gap: .6rem; }
.btn-col .btn { justify-content: center; }

/* ---------- HERO v2 ---------- */
.hero--v2 .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem) !important; gap: clamp(2rem, 4vw, 4rem); }
.hero--v2 h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.hero-consult { display: inline-flex; gap: .4rem; margin-top: var(--s-5); font-weight: 600; color: var(--signal-ink); text-decoration: none; border-bottom: 1.5px solid rgba(31,111,235,.35); padding-bottom: 2px; }
.hero-consult:hover { border-bottom-color: var(--signal); }
.hero-consult span { transition: transform var(--t-fast) var(--ease); }
.hero-consult:hover span { transform: translateX(3px); }

/* Concept A: layered engineering architecture */
.hero--v2 .arch { margin: 0; position: relative; display: grid; grid-template-columns: 1fr; }
.arch-svg, .arch-labels { grid-area: 1 / 1; }
.arch-svg { width: 100%; height: auto; overflow: visible; }
.arch-labels { position: relative; }
.hero--v2 .arch::before { content: ""; position: absolute; left: 4%; top: 8%; width: 70%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,111,235,.16), rgba(31,111,235,0)); filter: blur(10px); pointer-events: none; }

.al { cursor: pointer; transition: opacity var(--t-med) var(--ease); }
.al-lift { transition: transform .45s var(--ease); transform-box: fill-box; }
.al-top { transition: fill var(--t-fast); }
.al-side--r { filter: brightness(.8); }
.hero--v2 .arch[data-active] .al { opacity: .42; }
.hero--v2 .arch[data-active="ai"] .al[data-layer="ai"],
.hero--v2 .arch[data-active="sw"] .al[data-layer="sw"],
.hero--v2 .arch[data-active="data"] .al[data-layer="data"],
.hero--v2 .arch[data-active="db"] .al[data-layer="db"],
.hero--v2 .arch[data-active="cloud"] .al[data-layer="cloud"] { opacity: 1; }
.hero--v2 .arch[data-active="ai"] .al[data-layer="ai"] .al-lift,
.hero--v2 .arch[data-active="sw"] .al[data-layer="sw"] .al-lift,
.hero--v2 .arch[data-active="data"] .al[data-layer="data"] .al-lift,
.hero--v2 .arch[data-active="db"] .al[data-layer="db"] .al-lift,
.hero--v2 .arch[data-active="cloud"] .al[data-layer="cloud"] .al-lift { transform: translateY(-16px); }

.arch-riser { stroke: #1F6FEB; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 13; opacity: .55; animation: arch-rise 2.4s linear infinite; }
@keyframes arch-rise { to { stroke-dashoffset: -28; } }
.al-flow { animation: arch-flow 1.8s linear infinite; }
@keyframes arch-flow { to { stroke-dashoffset: -38; } }
.al-pulse { transform-box: fill-box; transform-origin: center; animation: arch-pulse 2.4s ease-out infinite; }
@keyframes arch-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.arch-leader { stroke: #C9D6E8; stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke var(--t-fast); }
.arch-leader-dot { fill: #C9D6E8; transition: fill var(--t-fast); }
.hero--v2 .arch[data-active="ai"] [data-layer="ai"].arch-leader, .hero--v2 .arch[data-active="sw"] [data-layer="sw"].arch-leader, .hero--v2 .arch[data-active="data"] [data-layer="data"].arch-leader, .hero--v2 .arch[data-active="db"] [data-layer="db"].arch-leader, .hero--v2 .arch[data-active="cloud"] [data-layer="cloud"].arch-leader { stroke: var(--signal); stroke-dasharray: none; }
.hero--v2 .arch[data-active="ai"] [data-layer="ai"].arch-leader-dot, .hero--v2 .arch[data-active="sw"] [data-layer="sw"].arch-leader-dot, .hero--v2 .arch[data-active="data"] [data-layer="data"].arch-leader-dot, .hero--v2 .arch[data-active="db"] [data-layer="db"].arch-leader-dot, .hero--v2 .arch[data-active="cloud"] [data-layer="cloud"].arch-leader-dot { fill: var(--signal); }

.arch-label {
  position: absolute; left: 66.5%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .55rem;
  max-width: 34%; padding: .5rem .8rem .5rem .55rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); box-shadow: 0 10px 24px -18px rgba(10,26,47,.45);
  font: 650 .86rem/1.2 var(--f-display); color: var(--navy);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.arch-label i { width: 12px; height: 12px; border-radius: 4px; background: var(--lc); flex-shrink: 0; }
.arch-label:hover, .arch-label.is-on { border-color: var(--lc); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--lc) 70%, transparent); }
.arch-label.is-on { background: var(--lc); color: #fff; }
.arch-label.is-on i { background: #fff; }
.arch-label:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.hero--v2 .arch-detail {
  grid-area: 2 / 1; margin: -1.25rem 0 0 6%; width: min(560px, 88%); position: relative; z-index: 2;
  display: grid; gap: .3rem; padding: 1rem 1.25rem; border-radius: 16px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-left: 4px solid var(--dc, var(--signal));
  box-shadow: 0 24px 50px -30px rgba(10,26,47,.45);
}
.hero--v2 .arch-detail-k { font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dc, var(--signal-ink)); }
.hero--v2 .arch-detail strong { font: 700 1.08rem/1.25 var(--f-display); color: var(--navy); }
.hero--v2 .arch-detail span#arch-d { color: var(--text-2); font-size: .92rem; }
.hero--v2 .arch-detail a { font-weight: 600; font-size: .9rem; color: var(--signal-ink); text-decoration: none; justify-self: start; margin-top: .2rem; }
.hero--v2 .arch-detail a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .hero--v2 .hero-grid { grid-template-columns: 1fr; }
  .hero--v2 .arch { max-width: 720px; width: 100%; margin-inline: auto; }
}
@media (max-width: 760px) {
  .arch-labels { grid-area: 2 / 1; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
  .arch-label { position: static; transform: none; max-width: none; font-size: .8rem; padding: .45rem .7rem .45rem .5rem; }
  .arch-leader, .arch-leader-dot { display: none; }
  .hero--v2 .arch-detail { grid-area: 3 / 1; margin: .75rem 0 0; width: 100%; }
}

/* ---------- Clients section spacing ---------- */
.section--clients { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem); }
.section--clients .clients--brands { margin-bottom: 0; }

/* ---------- Services overview ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.svc {
  position: relative; display: flex; flex-direction: column; padding: var(--s-6) var(--s-6) var(--s-5);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,26,47,.04), 0 18px 40px -30px rgba(10,26,47,.35);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med);
}
.svc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--lc); }
.svc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lc) 35%, var(--line-2)); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--lc) 60%, transparent); }
.svc-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, #fff); margin-bottom: var(--s-5); }
.svc-ico svg { width: 24px; height: 24px; }
.svc h3 { font-size: 1.28rem; margin-bottom: var(--s-4); color: var(--navy); }
.svc p { color: var(--text-2); font-size: .97rem; max-width: none; margin: 0 0 var(--s-3); }
.svc p b { display: block; font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lc); margin-bottom: .35rem; }
.svc-get { flex: 1; }
.svc-more { margin-top: var(--s-3); border-top: 1px solid var(--line-2); padding-top: var(--s-3); }
.svc-more summary { cursor: pointer; list-style: none; font-weight: 600; font-size: .9rem; color: var(--signal-ink); display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.svc-more summary::-webkit-details-marker { display: none; }
.svc-more summary::after { content: "+"; font: 500 1.3rem/1 var(--f-display); color: var(--lc); transition: transform var(--t-fast); }
.svc-more[open] summary::after { transform: rotate(45deg); }
.svc-more .tags { margin-top: var(--s-3); }
.svc--advisory { background: var(--blue-band); border-color: transparent; color: #fff; }
.svc--advisory::before { display: none; }
.svc--advisory .svc-ico { background: rgba(255,255,255,.16); color: #fff; }
.svc--advisory h3 { color: #fff; }
.svc--advisory p { color: rgba(255,255,255,.88); flex: 1; }
.svc--advisory .eyebrow { color: #D7E6FF; }
.svc--advisory .btn { align-self: flex-start; margin-top: var(--s-4); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .svc { padding: var(--s-5); }
  .svc-ico { width: 42px; height: 42px; margin-bottom: var(--s-4); }
}

/* ---------- Track record ---------- */
.section--track { background: #fff; }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.track-item { display: flex; flex-direction: column; gap: .6rem; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line-2); }
.track-k { font: 600 .66rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); }
.track-num { font: 750 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; background: linear-gradient(135deg, #0F2443 10%, #1F6FEB 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.track-num--word { letter-spacing: -.03em; }
.track-item p { color: var(--text-2); font-size: .95rem; flex: 1; margin: 0; max-width: none; }
.track-item .status { align-self: flex-start; }
.track-legend { margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-3); max-width: none; }
.track-legend .sep { width: 1px; height: 18px; background: var(--line); margin: 0 .5rem; }
@media (max-width: 1080px) { .track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .track { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .track-item { padding: var(--s-4); }
  .track-num { font-size: 1.9rem; }
  .track-item p { font-size: .85rem; }
  .track-legend .sep { display: none; }
}

/* ---------- Selected work: balanced NPP / eMock ---------- */
.work2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.w2 { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; color: var(--text); text-decoration: none; box-shadow: 0 30px 60px -40px rgba(10,26,47,.45); }
.w2-media { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) 0; min-height: 260px; display: flex; align-items: flex-end; overflow: hidden; }
.w2-media--npp { background: linear-gradient(160deg, #DCE8FB 0%, #B8D0F7 100%); }
.w2-media--emock { background: linear-gradient(160deg, #D9F3EF 0%, #AEE3DB 100%); }
.w2-frame { position: relative; width: 100%; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 40px -20px rgba(10,26,47,.35); overflow: hidden; }
.w2-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #F1F5FA; border-bottom: 1px solid #E3EAF3; }
.w2-bar i { width: 8px; height: 8px; border-radius: 50%; background: #C9D4E2; }
.w2-bar b { margin-left: 8px; font: 600 .66rem/1 var(--f-mono); letter-spacing: .06em; color: #5B6B80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1240 / 530; object-fit: cover; object-position: top left; }
.w2-note { position: absolute; right: 10px; bottom: 8px; font: 600 .58rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #9AA9BC; }
.w2-badge { position: absolute; left: clamp(1.25rem, 3vw, 2.25rem); top: 14px; font: 700 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--teal-text); padding: .45rem .7rem; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(15,118,110,.8); }
.w2-media--emock { padding-top: 3.2rem; }

.npp-ui { display: grid; grid-template-columns: 52px 1fr; aspect-ratio: 1240 / 530; }
.npp-side { background: var(--navy); display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.npp-side span { height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); }
.npp-side span.on { background: #6AA8FF; width: 75%; }
.npp-main { padding: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; background: #F6F9FD; min-height: 0; }
.npp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.npp-tiles div { background: #fff; border-radius: 8px; padding: 10px; display: grid; gap: 7px; box-shadow: 0 1px 2px rgba(10,26,47,.06); }
.npp-tiles span { height: 6px; width: 55%; border-radius: 3px; background: #DCE5F0; }
.npp-tiles strong { height: 14px; width: 40%; border-radius: 3px; background: var(--navy); }
.npp-tiles div:nth-child(2) strong { background: var(--signal); }
.npp-tiles div:nth-child(4) strong { background: var(--teal-brand); }
.npp-chart { background: #fff; border-radius: 8px; padding: 8px; box-shadow: 0 1px 2px rgba(10,26,47,.06); min-height: 0; }
.npp-chart svg { width: 100%; height: 100%; display: block; }
.npp-rows { display: grid; gap: 5px; }
.npp-rows span { height: 7px; border-radius: 4px; background: #E3EAF3; }
.npp-rows span:nth-child(2) { width: 80%; } .npp-rows span:nth-child(3) { width: 65%; }

.w2-body { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.w2 .statuses { display: flex; flex-wrap: wrap; gap: .5rem; }
.w2 .byline { color: var(--signal-ink); margin: 0; }
.w2 h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--navy); margin: 0; }
.w2 p { color: var(--text-2); margin: 0; max-width: none; }
.w2-shows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.w2-shows li { font-size: .82rem; font-weight: 600; color: var(--navy); background: var(--paper-2); border: 1px solid var(--line-2); padding: .35rem .65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
.w2-shows li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
#work-emock .w2-shows li::before { background: var(--teal-brand); }
.w2-kpi { display: flex; align-items: baseline; gap: .8rem; padding: var(--s-4) 0; border-block: 1px solid var(--line-2); margin-top: auto; }
.w2-kpi strong { font: 750 1.9rem/1 var(--f-display); letter-spacing: -.03em; color: var(--navy); white-space: nowrap; }
.w2-kpi span { font-size: .88rem; color: var(--text-3); }
.w2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.w2-links { display: inline-flex; flex-wrap: wrap; gap: var(--s-5); }
.w2 .link-arrow { color: var(--signal-ink); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 650; }
.w2 .stack .tag { background: var(--paper); }
.w2-fine { font-size: .82rem !important; color: var(--text-3) !important; }

.w2--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; background: linear-gradient(150deg, #0B1B33 0%, #123A75 100%); border-color: transparent; color: #fff; }
.w2--wide h3 { color: #fff; }
.w2--wide p { color: rgba(255,255,255,.82); }
.w2--wide .byline { color: #6AA8FF; }
.w2--wide .link-arrow { color: #fff; margin-top: var(--s-3); }
.w2--wide:hover .link-arrow span { transform: translateX(4px); }
.w2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding: var(--s-4) 0; border-block: 1px solid rgba(255,255,255,.14); }
.w2-facts strong { display: block; font: 750 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--f-display); letter-spacing: -.03em; color: #6AA8FF; white-space: nowrap; }
.w2-facts span { font-size: .82rem; color: rgba(255,255,255,.72); }
.w2-fine--dark { color: rgba(255,255,255,.62) !important; }
.w2-media--bench { background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.08); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.mini-bench { width: 100%; display: grid; gap: .9rem; font-family: var(--f-mono); }
.mb-k { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mb-row { display: grid; grid-template-columns: 90px 1fr auto; gap: .7rem; align-items: center; font-size: .78rem; color: rgba(255,255,255,.75); }
.mb-row em { font-style: normal; }
.mb-row i { height: 14px; border-radius: 4px; display: block; }
.mb-sql { width: 100%; background: repeating-linear-gradient(135deg, #7D8896 0 6px, #8C96A3 6px 12px); }
.mb-ch { width: 4px; background: #6AA8FF; }
.mb-row b { color: #fff; font-weight: 600; } .mb-row b.hl { color: #6AA8FF; }
.mb-x { display: flex; align-items: baseline; gap: .7rem; margin-top: .4rem; }
.mb-x strong { font: 750 3rem/1 var(--f-display); letter-spacing: -.04em; color: #6AA8FF; }
.mb-x small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (max-width: 980px) {
  .work2 { grid-template-columns: 1fr; }
  .w2--wide { grid-template-columns: 1fr; }
  .w2-media--bench { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 560px) {
  .w2-media { min-height: 0; padding: 1rem 1rem 0; }
  .w2-media--emock { padding-top: 2.8rem; }
  .w2-badge { left: 1rem; top: 12px; font-size: .58rem; }
  .w2-facts { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
  .w2-facts strong { font-size: 1.25rem; }
  .w2-facts span { font-size: .72rem; }
  .mb-x strong { font-size: 2.2rem; }
  .npp-ui { grid-template-columns: 34px 1fr; }
  .npp-tiles { grid-template-columns: repeat(2, 1fr); }
  .npp-rows { display: none; }
}

/* ---------- Projects we take on ---------- */
.projects { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.proj { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: var(--s-5); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line-2); position: relative; }
.proj-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, #fff); }
.proj-ico svg { width: 20px; height: 20px; }
.proj h3 { font-size: 1.02rem; margin: .1rem 0 .3rem; color: var(--navy); letter-spacing: -.01em; padding-right: 4.5rem; }
.proj p { margin: 0; font-size: .9rem; color: var(--text-2); max-width: none; }
.proj-shape { position: absolute; top: var(--s-5); right: var(--s-4); font: 600 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: #fff; border: 1px solid var(--line-2); padding: .3rem .45rem; border-radius: 999px; white-space: nowrap; }
.proj-cta { position: sticky; top: 140px; padding: var(--s-6); border-radius: var(--r-xl); background: linear-gradient(160deg, #F2F7FF 0%, #E2EDFF 100%); border: 1px solid #CFE0FA; }
.proj-cta h3 { font-size: 1.45rem; color: var(--navy); margin-bottom: var(--s-4); }
.proj-cta > p { color: var(--text-2); font-size: .95rem; margin-bottom: var(--s-5); max-width: none; }
.proj-cta .btn--ghost { --btn-fg: var(--navy); --btn-bd: var(--navy); }
.proj-also { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid #CFE0FA; }
.proj-also > span { display: block; font: 600 .64rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; }
.proj-also div { display: flex; flex-wrap: wrap; gap: .4rem; }
.proj-also a { font-size: .85rem; font-weight: 600; color: var(--navy); text-decoration: none; background: #fff; border: 1px solid var(--line-2); padding: .4rem .75rem; border-radius: 999px; }
.proj-also a:hover { border-color: var(--signal); color: var(--signal-ink); }
@media (max-width: 1080px) { .projects { grid-template-columns: 1fr; } .proj-cta { position: static; } }
@media (max-width: 640px) { .proj-list { grid-template-columns: 1fr; } .proj { padding: var(--s-4); } .proj-shape { top: var(--s-4); } }

/* ---------- Engineering notes ---------- */
.notes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-5); }
.note { display: flex; flex-direction: column; gap: .6rem; padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.note:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -32px rgba(10,26,47,.45); }
.note h3 { font-size: 1.22rem; color: var(--navy); }
.note p { color: var(--text-2); font-size: .94rem; margin: 0; max-width: none; }
.note .link-arrow { margin-top: auto; color: var(--signal-ink); }
.note--feature { padding: 0; overflow: hidden; }
.note-img { aspect-ratio: 16 / 8; background: #0F2443; }
.note-img svg { width: 100%; height: 100%; display: block; }
.note-body { padding: var(--s-6); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.note-body h3 { font-size: 1.45rem; }
.note-stack { display: grid; gap: var(--s-5); }
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .note, .note-body { padding: var(--s-5); } .note--feature { padding: 0; } }

/* ---------- Contact: demo form + topic chips ---------- */
.demo-ribbon { margin: 0 0 var(--s-5); padding: .7rem 1rem; border-radius: var(--r-md); background: var(--st-poc-bg); color: var(--st-poc); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; max-width: none; }
.demo-ribbon b { font: 700 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: #fff; padding: .35rem .5rem; border-radius: 999px; }
.section--ink .form-wrap .demo-ribbon { color: var(--st-poc) !important; }
.topic-label { display: block; font: 600 .7rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; }
.topic-label span { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-weight: 500; opacity: .8; }
.topic-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.topic-chips button { min-height: 40px; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 600 .85rem/1 var(--f-body); color: var(--navy); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.topic-chips button:hover { border-color: var(--signal); }
.topic-chips button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
.section--ink .form-wrap .small { color: var(--text-3); }
.section--ink .form-wrap .form-success h3 { color: var(--navy); }

/* ---------- Industries / misc tweaks ---------- */
.sector--edu .status--prod { background: #fff; }

/* ---------- Mobile rhythm ---------- */
@media (max-width: 640px) {
  .v2 { --section-y: 3.75rem; }
  .v2 .section-head { gap: var(--s-4); margin-bottom: var(--s-6); }
  .v2 .section-head .lead { font-size: 1rem; }
  .hero--v2 .hero-grid { padding-block: 2rem 2.5rem !important; gap: 2rem; }
  .hero--v2 h1 { font-size: 2.35rem; }
  .hero--v2 .btn-row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero--v2 .btn-row .btn { justify-content: center; }
  .v2 .principles { gap: var(--s-5); }
  .v2 .process { display: none; }
  .v2 .footer-top { gap: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .arch-riser, .al-flow, .al-pulse { animation: none; }
  .al-lift { transition: none; }
}

/* scope: the case study also uses .hero--v2 .arch (architecture diagram) */
.hero--v2 .arch { grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.hero--v2 .arch > figcaption { grid-area: 1 / 1; }
.hero--v2 .arch { grid-template-rows: auto auto; align-content: start; }
.hero--v2 .arch-detail { grid-row: 2; grid-column: 1; align-self: start; margin-top: -2.5rem; }
@media (max-width: 760px) { .hero--v2 .arch-labels { grid-row: 2; } .hero--v2 .arch-detail { grid-row: 3; margin-top: .75rem; } .hero--v2 .arch { grid-template-rows: auto auto auto; } }
.hero--v2 .arch-detail { position: relative; top: auto; }
@media (max-width: 760px) {
  .hero--v2 .arch-svg { max-width: 300px; justify-self: center; }
  .hero--v2 .arch-labels { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .hero--v2 .arch-label { font-size: .74rem; line-height: 1.15; padding: .45rem .55rem; border-radius: 10px; min-height: 44px; }
  .hero--v2 .arch-label i { width: 9px; height: 9px; border-radius: 3px; }
  .hero--v2 .arch-detail { padding: .8rem 1rem; }
  .hero--v2 .arch-detail strong { font-size: .98rem; }
  .hero--v2 .arch-detail span#arch-d { font-size: .85rem; }
  .hero--v2 .eyebrow { font-size: .62rem; }
}

/* ==========================================================================
   Case study v2
   ========================================================================== */
.plain { margin-top: var(--s-6); padding: var(--s-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -32px rgba(10,26,47,.35); }
.plain-k { font: 600 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); margin: 0 0 var(--s-5); }
.plain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.plain-item { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.plain-item p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--text-2); max-width: none; }
.plain-item b { color: var(--navy); }
.plain-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--signal-soft); color: var(--signal); }
.plain-item:last-child .plain-ico { background: var(--teal-soft); color: var(--teal-text); }
.plain-ico svg { width: 22px; height: 22px; }
.cs-v2 .saving { margin-top: var(--s-5); }
.acc-note { grid-column: 1 / -1; margin: .25rem 0 0; font-size: .86rem; color: var(--text-inv-2); max-width: none; border-left: 3px solid var(--st-poc); padding-left: .8rem; }
.proposed-note { margin: 0 0 var(--s-5); padding: .7rem 1rem; border-radius: var(--r-md); background: var(--st-poc-bg); color: var(--st-poc); font-size: .9rem; max-width: none; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.proposed-note b { font: 700 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: #fff; padding: .35rem .5rem; border-radius: 999px; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--signal-ink); --btn-bd: #fff; }
.cs-v2 .cta-band .btn-row { flex-direction: column; align-items: stretch; }
@media (max-width: 900px) { .plain-grid { grid-template-columns: 1fr; gap: var(--s-4); } }
@media (max-width: 640px) {
  .plain { padding: var(--s-5); }
  .plain-item p { font-size: .97rem; }
  /* explorer: one scrollable row of large touch targets */
  .bench-tabs { flex-wrap: nowrap; overflow-x: auto; border-radius: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bench-tabs::-webkit-scrollbar { display: none; }
  .bench-tabs button { min-height: 44px; white-space: nowrap; flex-shrink: 0; }
  .bench-side { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bench-side::-webkit-scrollbar { display: none; }
  .bench-side button { min-height: 44px; white-space: nowrap; }
  .bench-side .label { display: none; }
  .bar-row { grid-template-columns: 1fr; gap: .35rem; }
  .race-row { grid-template-columns: 1fr; }
  .scale-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .arch-toggle button { min-height: 44px; }
}

/* Track record with five figures, no status labels */
.track--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.track--5 .track-num { font-size: clamp(2.1rem, 3vw, 3rem); }
@media (max-width: 1200px) { .track--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .track--5 { grid-template-columns: 1fr 1fr; } .track--5 .track-item:last-child { grid-column: 1 / -1; } }

/* Track record: four boxes, ClickHouse migration box holds two figures */
.track--4 { grid-template-columns: 1fr 1fr 1.7fr 1fr; }
.track-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.track-duo > div { display: grid; gap: .3rem; }
.track-duo > div + div { border-left: 1px solid var(--line); padding-left: var(--s-4); }
.track-duo small { font-size: .82rem; font-weight: 600; color: var(--navy); }
.track--4 .track-num { font-size: clamp(2.1rem, 3vw, 3rem); }
@media (max-width: 1200px) { .track--4 { grid-template-columns: 1fr 1fr; } .track--4 .track-item--duo { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 560px) { .track-duo .track-num { font-size: 1.7rem; } }
/* mobile: shorter project list */
@media (max-width: 640px) { .proj p { display: none; } .proj h3 { margin: .45rem 0 0; } }
@media (max-width: 1200px) { .track--4 .track-item:last-child { grid-column: 1 / -1; } }

/* Logo: original badge style with the "signal to data" drawing */
.brand-mark { background: var(--signal); border-radius: 10px; }
.site-footer .brand-mark { background: var(--signal); box-shadow: none; }
.brand-mark svg { width: 28px; height: 28px; }

/* Logo: refined T-Hex (solid hexagon, T in the channels) */
.brand-mark--thex, .site-footer .brand-mark--thex { background: none !important; box-shadow: none; border-radius: 0; width: 36px; height: 36px; color: var(--signal); }
.brand-mark--thex svg { width: 36px !important; height: 36px !important; }
.site-footer .brand-mark--thex { color: #4D8FFF; }
.brand:has(.brand-mark--thex) { gap: .6rem; }
.brand:has(.brand-mark--thex) .brand-name { font-size: 1.25rem; letter-spacing: .04em; }
.ds-logo .brand-mark--thex { width: 52px; height: 52px; }
.ds-logo .brand-mark--thex svg { width: 52px !important; height: 52px !important; }
.ds-logo--dark .brand-mark--thex { color: #4D8FFF; }
.ds-logo--blue .brand-mark--thex { color: #fff; background: none !important; }

/* Hero labels: one line each, equal height */
.hero--v2 .arch-label { white-space: nowrap; max-width: none; height: 42px; padding: 0 .9rem 0 .65rem; }
@media (max-width: 760px) { .hero--v2 .arch-label { height: 44px; white-space: normal; } }

/* Header: blue strip removed, a thin blue line separates the header instead */
.brand-band { display: none !important; }
.site-header { border-bottom: 0 !important; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #1550B8, #1F6FEB 55%, #3B86FF); pointer-events: none; }
html { scroll-padding-top: 96px; }
.cs-nav { top: 79px; }
@media (max-width: 860px) { .cs-nav { top: 79px; } }
@media (min-width: 761px) { .hero--v2 .arch-label { min-width: 200px; } }

/* Hero v3: bigger layers, names printed on each layer's front edge */
.al-name { font: 700 19px var(--f-display); fill: #fff; letter-spacing: .01em; pointer-events: none; }
.hero--v2 .arch-svg--big { max-width: 600px; justify-self: center; }
.hero--v2 .arch-leader, .hero--v2 .arch-leader-dot { display: none; }
/* label buttons stay for keyboard and screen-reader users, hidden visually on larger screens */
@media (min-width: 761px) {
  .hero--v2 .arch-labels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero--v2 .arch-detail { margin: -1rem auto 0 !important; width: min(560px, 92%); }
}
@media (max-width: 760px) { .hero--v2 .arch-svg--big { max-width: 340px; } .al-name { font-size: 22px; } }
.al-name { font-size: 17px; }
.hero--v2 .arch-svg--big { max-width: 520px; }
.hero--v2 .hero-grid { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem) !important; }
/* phones: names are on the layers now, so the button grid is visually hidden too (kept for keyboard/screen readers) */
@media (max-width: 760px) {
  .hero--v2 .arch-labels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero--v2 .arch-detail { grid-row: 2 !important; margin-top: .5rem !important; }
}

/* Top menu: no rounded pill on hover / focus / open; blue text + thin underline instead */
.site-header .nav-link, .site-header .nav-link:hover, .site-header .nav-link:focus,
.site-header .nav-item.is-open > .nav-link, .site-header .nav-link[aria-current="page"] {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
.site-header .nav-link { position: relative; }
.site-header .nav-link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem; height: 2px; background: var(--signal); transform: scaleX(0); transition: transform var(--t-fast) var(--ease); }
.site-header .nav-link:hover, .site-header .nav-item.is-open > .nav-link { color: var(--signal-ink) !important; }
.site-header .nav-link:hover::after, .site-header .nav-item.is-open > .nav-link::after, .site-header .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav-link:focus { outline: none; }
.site-header .nav-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px !important; }
@media (max-width: 1080px) { .site-header .nav-link::after { display: none; } }
.site-header .nav-link:focus-visible { outline: none !important; color: var(--signal-ink) !important; }
.site-header .nav-link:focus-visible::after { transform: scaleX(1); }

/* never outline placeholder links (review mode marks only data-verify notes) */
.review-on [data-pending] { outline: none !important; }


/* ==========================================================================
   Gamma-style navigation: blue tab + full-width blue band + card panel
   ========================================================================== */
@media (min-width: 1081px) {
  .site-header .nav { height: 76px; }
  .site-header .nav-menu { align-self: stretch; align-items: flex-end; }
  .site-header .nav-item.has-gmega { position: static; }
  .site-header .has-gmega > .nav-link { height: 58px; padding: 0 1.15rem; border-radius: 14px 14px 0 0 !important; transition: background var(--t-fast), color var(--t-fast); }
  .site-header .nav-menu > .nav-item:not(.has-gmega):not(.mobile-cta) > .nav-link { height: 58px; }
  .site-header .has-gmega.is-open > .nav-link { background: var(--signal) !important; color: #fff !important; }
  .site-header .has-gmega.is-open > .nav-link::after { display: none; }
  .site-header .nav-cta { align-self: center; }

  .mega.mega--g {
    position: absolute; top: 100%; left: 0; right: 0; transform: none !important; width: auto; max-width: none;
    padding: 0; border: 0; border-radius: 0; display: block; background: #fff;
    box-shadow: 0 30px 60px -30px rgba(10,26,47,.35);
  }
  .mega.mega--g::before { display: none; }
  .nav-item.is-open .mega.mega--g { transform: none !important; }
  .mg-band { background: var(--signal); }
  .mg-tabs { display: flex; gap: clamp(1.5rem, 3vw, 3rem); min-height: 54px; align-items: center; padding-left: calc(var(--gutter) + 320px); }
  .mg-tab { background: none; border: 0; color: #fff; font: 600 1rem/1 var(--f-body); padding: .5rem 0; cursor: pointer; opacity: .88; border-bottom: 2px solid transparent; }
  .mg-tab:hover { opacity: 1; }
  .mg-tab[aria-selected="true"] { opacity: 1; border-bottom-color: #7CF2E0; }
  .mg-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .mg-body { padding-block: 2rem 2.5rem; }
  .mg-panel { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
  .mg-panel[hidden] { display: none !important; }
  .mg-intro { padding-right: 2rem; border-right: 1px solid var(--line-2); min-height: 100%; }
  .mg-intro h3 { font-size: 1.7rem; color: var(--navy); margin-bottom: .8rem; }
  .mg-intro p { color: var(--text-2); font-size: .98rem; margin: 0 0 1.5rem; }
  .mg-intro-btn { display: inline-flex; padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
  .mg-intro-btn:hover { background: var(--navy); color: #fff; }
  .mg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .mg-card {
    position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 132px; padding: 1.2rem 1.3rem 2.4rem;
    border: 1px solid var(--line); border-radius: 22px; background: #fff; text-decoration: none; color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  }
  .mg-card strong { font: 650 1.05rem/1.25 var(--f-display); color: var(--navy); }
  .mg-card span:not(.mg-arrow) { font-size: .88rem; color: var(--text-2); line-height: 1.4; padding-right: 1.4rem; }
  .mg-arrow { position: absolute; right: 1.1rem; bottom: .9rem; font-size: 1.15rem; color: var(--navy); transition: transform var(--t-fast); }
  .mg-card:hover { border-color: var(--navy); box-shadow: 0 16px 34px -24px rgba(10,26,47,.5); }
  .mg-card:hover .mg-arrow { transform: translateX(4px); color: var(--signal); }
  .mg-promo { position: relative; padding: 0 0 0 1.2rem; }
  .mg-promo::before { content: ""; position: absolute; left: 2.2rem; right: 0; top: -12px; bottom: 0; background: #A7F0E6; border-radius: 28px; z-index: 0; }
  .mg-vis { position: relative; z-index: 1; height: 170px; border-radius: 22px; overflow: hidden; }
  .mg-vis--logo { background: var(--blue-band); display: grid; place-items: center; }
  .mg-vis--logo .mg-thex { color: #fff; width: 96px; height: 96px; opacity: .95; }
  .mg-vis--logo .mg-thex svg { width: 96px; height: 96px; }
  .mg-vis--img { background: #EEF4FC; }
  .mg-vis--img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
  .mg-vis--chart { background: linear-gradient(150deg, #0B1B33, #123A75); display: flex; align-items: flex-end; padding: 1.2rem 1.4rem; }
  .mg-bars { display: flex; align-items: flex-end; gap: 9px; width: 100%; height: 100%; }
  .mg-bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #6AA8FF, #1F6FEB); }
  .mg-pill { position: absolute; z-index: 2; top: 12px; right: 12px; background: #fff; color: var(--signal-ink); font: 600 .78rem/1 var(--f-body); padding: .5rem .8rem; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(10,26,47,.4); }
  .mg-promo-body { position: relative; z-index: 1; padding: 1.2rem 1rem 1.4rem 1.6rem; }
  .mg-promo-body p { font: 650 1.12rem/1.3 var(--f-display); color: var(--navy); margin: 0 0 1rem; }
  .mg-promo-btn { display: inline-flex; padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); font: 650 .95rem/1 var(--f-body); text-decoration: none; cursor: pointer; }
  .mg-promo-btn:hover { background: var(--navy); color: #fff; }
}
@media (min-width: 1081px) and (max-width: 1300px) {
  .mg-panel { grid-template-columns: 240px minmax(0, 1fr) 250px; gap: 1.4rem; }
  .mg-tabs { padding-left: calc(var(--gutter) + 260px); }
  .mg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones / tablets: simple stacked list inside the mobile menu */
@media (max-width: 1080px) {
  .mega--g .mg-band, .mega--g .mg-intro, .mega--g .mg-promo { display: none; }
  .mega--g .mg-panel[hidden] { display: block !important; }
  .mega--g .mg-panel:not(:first-child) { display: none !important; }
  .mega--g .mg-cards { display: grid; gap: 2px; }
  .mega--g .mg-card { display: block; padding: .6rem .2rem; text-decoration: none; color: var(--text); }
  .mega--g .mg-card strong { display: block; font-weight: 600; }
  .mega--g .mg-card span:not(.mg-arrow) { display: block; font-size: .84rem; color: var(--text-3); }
  .mega--g .mg-arrow { display: none; }
  .mega--g .container { padding: 0; }
}
@media (min-width: 1081px) {
  .site-header .nav-item.has-gmega > .nav-link,
  .site-header .nav-item.has-gmega.is-open > .nav-link { border-radius: 14px 14px 0 0 !important; }
  /* line the logo and CTA up with the tab text */
  .site-header .nav > .brand, .site-header .nav-cta { transform: translateY(8px); }
}

/* Phone menu: the header's backdrop blur makes it the containing block for the fixed menu,
   which clipped the menu to the header's height. Turn the blur off while the menu is open. */
@media (max-width: 1080px) {
  .nav-open .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; }
  .nav-open .nav-menu { inset: 71px 0 0 0 !important; height: auto; }
}

/* Persistent Gamma-style band: current section tab + sub-links, visible on page load */
.hdr-band { display: none; }
@media (min-width: 1081px) {
  .hdr-band { display: block; background: var(--signal); }
  .hdr-band-links { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); min-height: 54px; padding-left: calc(var(--gutter) + 320px); }
  .hdr-band-links a { color: #fff; text-decoration: none; font: 600 1rem/1 var(--f-body); padding: .5rem 0; border-bottom: 2px solid transparent; opacity: .92; }
  .hdr-band-links a:hover, .hdr-band-links a[aria-current="page"] { opacity: 1; border-bottom-color: #7CF2E0; }
  .site-header:has(.hdr-band)::after { display: none; }   /* the band replaces the thin blue line */
  .site-header .nav-item.is-current > .nav-link { background: var(--signal) !important; color: #fff !important; border-radius: 14px 14px 0 0 !important; }
  .site-header .nav-item.is-current > .nav-link::after { display: none; }
  /* while another menu is open, its tab takes over */
  .site-header .nav-menu:has(.is-open) .nav-item.is-current:not(.is-open) > .nav-link { background: none !important; color: inherit !important; }
  /* open panels sit over the persistent band */
  .site-header:has(.hdr-band) .mega.mega--g { top: 76px; }
  html:has(.hdr-band) { scroll-padding-top: 146px; }
  .cs-nav { top: 130px !important; }
}
@media (min-width: 1081px) and (max-width: 1300px) { .hdr-band-links { padding-left: calc(var(--gutter) + 260px); } }
@media (min-width: 1081px) {
  .hdr-band { position: relative; z-index: 1; }
  .site-header .nav { position: relative; z-index: 3; }
  .mega.mega--g { z-index: 50; }
}

/* Homepage band = on-page navigation (no tab selected), aligned with the page content */
@media (min-width: 1081px) {
  .hdr-band--page .hdr-band-links { padding-left: var(--gutter); gap: clamp(1.25rem, 2.6vw, 2.75rem); }
  .hdr-band--page .hdr-band-links a.is-active { opacity: 1; border-bottom-color: #7CF2E0; }
}

/* Hero image: option A "Your platform" */
.hero--v2 .hero-art { margin: 0; display: grid; place-items: center; }
.hero--v2 .hero-art .ho-svg { width: 100%; max-width: 600px; height: auto; overflow: visible; }
.ho-tag { font: 650 14px var(--f-display); fill: #0B1B33; }
.ho-edge { font: 700 18px var(--f-display); fill: #fff; }
.ho-flow { animation: hoflow 2s linear infinite; }
@keyframes hoflow { to { stroke-dashoffset: -20; } }
@media (max-width: 1080px) { .hero--v2 .hero-art .ho-svg { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .ho-flow { animation: none; } }

/* ==========================================================================
   Hero, Gamma style: wide headline + layers inside circle shapes
   ========================================================================== */
.hero--v2 .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; gap: clamp(1.5rem, 3vw, 3rem); }
.hero--v2 h1 { font-size: clamp(2.6rem, 5.2vw, 5rem); max-width: 14ch; }
.hero--v2 .lead { max-width: 54ch; }
.swoosh { position: relative; white-space: nowrap; display: inline-block; }
.swoosh svg { position: absolute; left: -2%; right: -4%; bottom: -.12em; width: 106%; height: .32em; overflow: visible; }
.swoosh svg path { fill: none; stroke: #14B8A6; stroke-width: 6; stroke-linecap: round; }

.hero-art2 { position: relative; margin: 0; aspect-ratio: 1 / 1.02; max-width: 600px; width: 100%; justify-self: end; }
.ha-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.ha-fill { width: 64%; aspect-ratio: 1; right: -2%; top: -2%; background: linear-gradient(150deg, #CFE0FF 0%, #A9C8FF 100%); }
.ha-ring { width: 54%; aspect-ratio: 1; left: 2%; bottom: 0; border: 4px solid #1F6FEB; }
.ha-stack { position: absolute; left: 6%; top: 2%; width: 88%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(10,26,47,.12)); }
.ha-card { position: absolute; display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: 14px; padding: .8rem 1.1rem .8rem .8rem; box-shadow: 0 20px 44px -24px rgba(10,26,47,.45), 0 0 0 1px rgba(10,26,47,.04); animation: cl-float 7s ease-in-out infinite; }
.ha-c1 { right: -4%; top: 22%; width: 42%; }
.ha-c2 { right: 2%; top: 38%; width: 36%; animation-delay: -3s; }
.ha-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.ha-ico svg { width: 20px; height: 20px; }
.ha-ico--ai { background: #DDF6F3; color: #0E9F94; }
.ha-ico--db { background: #E1ECFF; color: #1550B8; }
.ha-lines { display: grid; gap: 7px; flex: 1; }
.ha-lines i { display: block; height: 8px; border-radius: 4px; background: #E3EAF5; }
.ha-lines i:first-child { width: 55%; background: #CFE0FF; }
.ha-c2 .ha-lines i:first-child { background: #DCE5F0; }
@media (max-width: 1080px) {
  .hero--v2 .hero-grid { grid-template-columns: 1fr !important; }
  .hero--v2 h1 { max-width: 16ch; }
  .hero-art2 { justify-self: center; max-width: 520px; }
}
@media (max-width: 600px) {
  .hero--v2 h1 { font-size: 2.4rem; }
  .ha-card { padding: .5rem .7rem .5rem .5rem; } .ha-ico { width: 30px; height: 30px; } .ha-ico svg { width: 15px; height: 15px; }
  .ha-c1 { top: 18%; } .ha-c2 { top: 33%; }
  .ha-ring { border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ha-card { animation: none; } }
.hero--v2 h1 { max-width: 16.5ch; font-size: clamp(2.6rem, 4.7vw, 4.7rem); }
.ha-c1 { top: 1%; right: -6%; width: 34%; }
.ha-c2 { top: 14%; right: 4%; width: 28%; }
.ha-stack { top: 8%; }
@media (max-width: 600px) { .hero--v2 h1 { font-size: 2.4rem; } .ha-c1 { top: 0; } .ha-c2 { top: 12%; } }
.hero-art2 { aspect-ratio: 1 / 1.1; }
.ha-stack { top: 5%; left: 8%; width: 84%; }
.hero--v2 { padding-bottom: 1rem; }
@media (max-width: 600px) { .ha-c1 { right: 0; width: 46%; } .ha-c2 { right: 6%; width: 38%; } }

/* ==========================================================================
   Section labels: one style for every section (matches the clients title), in Telcotec blue
   ========================================================================== */
.v2 .eyebrow {
  font: 700 clamp(.84rem, .95vw, .95rem)/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-ink); display: inline-flex; align-items: center; gap: .75rem;
}
.v2 .eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--signal); flex-shrink: 0; }
.v2 .section--ink .eyebrow, .v2 .svc--advisory .eyebrow, .v2 .hdr-band .eyebrow { color: #D7E6FF; }
.v2 .section--ink .eyebrow::before, .v2 .svc--advisory .eyebrow::before { background: #7CF2E0; }
/* clients title: centred, blue, with a fine line either side */
.v2 .brands-title {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  font: 700 clamp(.84rem, .95vw, .95rem)/1.2 var(--f-display); letter-spacing: .14em; color: var(--signal-ink);
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.v2 .brands-title::before, .v2 .brands-title::after { content: ""; height: 2px; width: clamp(40px, 8vw, 120px); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--signal)); }
.v2 .brands-title::after { background: linear-gradient(90deg, var(--signal), transparent); }
@media (max-width: 600px) { .v2 .brands-title::before, .v2 .brands-title::after { width: 24px; } .v2 .brands-title { font-size: .78rem; gap: .6rem; } }

/* Feedback round 3 (7 Nov 2026): one menu row, plain italic emphasis, more readable layer labels */
.site-header .nav-item.is-current > .nav-link { background: none !important; color: var(--signal-ink) !important; border-radius: 0 !important; }
.hero--v2 h1 .serif { color: var(--signal); }
.al-name { font: 700 20px var(--f-display) !important; letter-spacing: 0 !important; paint-order: stroke; stroke: rgba(0,0,0,.08); stroke-width: 1px; }
.ha-legend { display: none; }
@media (max-width: 760px) {
  .ha-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: .25rem 0 0; padding: 0; }
  .ha-legend li { display: inline-flex; align-items: center; gap: .45rem; font: 600 .92rem/1 var(--f-body); color: var(--ink, #0F1E2E); background: #fff; border: 1px solid #DCE6F5; border-radius: 999px; padding: .5rem .8rem; }
  .ha-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--lc); }
}

/* Section labels match "Clients we have delivered for": centred, with fading lines either side */
.v2 .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.v2 .section-head > div { display: flex; flex-direction: column; align-items: center; }
.v2 .section-head h2 { max-width: 26ch; margin-inline: auto; }
.v2 .section-head .lead { max-width: 64ch; margin: clamp(.9rem, 1.6vw, 1.25rem) auto 0; }
.v2 .section-head .eyebrow { justify-content: center; gap: 1.1rem; margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.v2 .section-head .eyebrow::before, .v2 .section-head .eyebrow::after { content: ""; height: 2px; width: clamp(40px, 8vw, 120px); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--signal)); flex-shrink: 0; }
.v2 .section-head .eyebrow::after { background: linear-gradient(90deg, var(--signal), transparent); }
.v2 .section--ink .section-head .eyebrow::before { background: linear-gradient(90deg, transparent, #7CF2E0); }
.v2 .section--ink .section-head .eyebrow::after { background: linear-gradient(90deg, #7CF2E0, transparent); }
@media (max-width: 760px) { .v2 .section-head .eyebrow::before, .v2 .section-head .eyebrow::after { width: 28px; } }

/* Product cards: NPP and eMock mirror each other */
.w2-media--npp, .w2-media--emock { padding-top: 3.2rem; min-height: 0; }
.w2-media--npp .w2-frame, .w2-media--emock .w2-frame { display: flex; flex-direction: column; }
.w2-media--npp .npp-ui { aspect-ratio: 1240 / 530; overflow: hidden; }
.w2-badge--blue { background: var(--signal-ink); }
.w2-shows { flex-wrap: nowrap; }
.w2-shows li { white-space: nowrap; }
.w2-kpi { min-height: 4.6rem; }
@media (max-width: 760px) { .w2-media--npp, .w2-media--emock { padding-top: 2.8rem; } .w2-shows { flex-wrap: wrap; } }
.work2 > .w2:not(.w2--wide) .w2-foot { flex-direction: column; align-items: flex-start; gap: .8rem; }
.work2 > .w2:not(.w2--wide) .w2-body > p:not(.byline) { min-height: 5.1em; }

/* Case study section (NPP Modernisation moved out of Our products) */
.case-wrap { display: grid; }
.w2--case { grid-column: auto; }
.w2--case .w2-facts { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(2rem, 5vw, 4rem); }

/* "Start here" panel: the two working principles kept from the removed Our approach section */
.proj-promise { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.proj-promise li { position: relative; padding-left: 1.7rem; font-size: .95rem; color: var(--navy); font-weight: 500; }
.proj-promise li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
/* project type tag sits above the title so long titles never run under it */
.proj { grid-template-rows: auto 1fr; row-gap: .5rem; }
.proj > .proj-ico { grid-row: 1 / 3; }
.proj > div { grid-column: 2; grid-row: 2; }
.proj-shape { position: static !important; grid-column: 2; grid-row: 1; justify-self: start; }
.proj h3 { padding-right: 0 !important; margin-top: 0 !important; }

/* ===== Projects: Gamma-style tabs (list | illustration | detail) ===== */
.ptabs { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pt-list { display: flex; flex-direction: column; gap: .35rem; padding-right: clamp(1rem, 3vw, 2.5rem); border-right: 1px solid var(--line-2); }
.pt-tab { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 999px; padding: .7rem 1.1rem .7rem .7rem; font: 600 1rem/1.25 var(--f-body); color: var(--navy); cursor: pointer; transition: background .2s, box-shadow .2s; }
.pt-tab:hover { background: rgba(255,255,255,.6); }
.pt-tab[aria-selected="true"] { background: #fff; box-shadow: 0 10px 24px -14px rgba(10,26,47,.35); }
.pt-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.pt-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, #fff); }
.pt-ico svg { width: 20px; height: 20px; }
.pt-tab[aria-selected="true"] .pt-ico { background: var(--pc); color: #fff; }
.pt-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pt-panel[hidden] { display: none; }
.pt-panel:not([hidden]) { animation: ptIn .45s ease both; }
@keyframes ptIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-panel:not([hidden]) { animation: none; } }
.pt-art { position: relative; aspect-ratio: 400 / 340; width: 100%; max-width: 480px; justify-self: center; }
.pt-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pt-tile { position: absolute; left: 6%; top: 10%; width: 52%; height: 78%; border-radius: 28px; background: linear-gradient(155deg, var(--pl) 0%, var(--pc) 100%); box-shadow: 0 30px 50px -30px var(--pc); display: grid; place-items: center; }
.pt-tile svg { width: 78%; height: auto; }
.pt-circle { position: absolute; right: 8%; top: 0; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 1.6px, transparent 2px) 0 0 / 16px 16px, linear-gradient(160deg, var(--pl), color-mix(in srgb, var(--pc) 70%, #fff)); opacity: .9; }
.pt-card { position: absolute; right: 0; bottom: 22%; width: 42%; display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 14px; padding: .8rem .9rem; box-shadow: 0 18px 40px -18px rgba(10,26,47,.35); }
.pt-card-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pc); color: #fff; }
.pt-card-ico svg { width: 18px; height: 18px; }
.pt-lines { flex: 1; display: grid; gap: 6px; }
.pt-lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--pc) 22%, #fff); }
.pt-lines i:last-child { width: 65%; }
.pt-body { max-width: 440px; }
.pt-tag { display: inline-block; font: 600 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, #fff); border-radius: 999px; padding: .4rem .65rem; }
.pt-body h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--navy); margin: .8rem 0 .7rem; letter-spacing: -.02em; }
.pt-body p { color: var(--text-2); margin: 0 0 1rem; }
.pt-checks { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.pt-checks li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--navy); }
.pt-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--pc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.pt-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--pc); color: var(--pc); border-radius: 999px; padding: .75rem 1.3rem; font-weight: 650; text-decoration: none; transition: background .2s, color .2s; }
.pt-btn:hover { background: var(--pc); color: #fff; }

/* Start here as a wide panel under the tabs */
.projects--cta { display: block; margin-top: clamp(2.5rem, 5vw, 4rem); }
.proj-cta--wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.proj-cta--wide > .eyebrow, .proj-cta--wide > h3, .proj-cta--wide > p { grid-column: 1; }
.proj-cta--wide > .proj-promise { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: end; }
.proj-cta--wide > .btn-col { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: .75rem; align-self: end; }
.proj-cta--wide > .btn-col .btn { width: auto; }
.proj-cta--wide > .proj-also { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .ptabs { grid-template-columns: 1fr; }
  .pt-list { flex-direction: row; overflow-x: auto; border-right: 0; padding: 0 0 .5rem; scrollbar-width: none; }
  .pt-tab { width: auto; white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 760px) {
  .pt-panel { grid-template-columns: 1fr; }
  .pt-art { max-width: 340px; }
  .proj-cta--wide { grid-template-columns: 1fr; }
  .proj-cta--wide > * { grid-column: 1 !important; grid-row: auto !important; }
  .proj-cta--wide > .proj-promise { margin: 1rem 0 1.25rem; }
}
.pt-tile svg { width: 88%; } .pt-tab { white-space: nowrap; }

/* Industries: telecom feature card on the left, three stacked cards on the right */
.sectors { grid-template-rows: repeat(3, auto); }
.sector--telecom { grid-row: span 3; min-height: 0; }
.sector--edu, .sector--retail, .sector--data { min-height: 0; gap: .8rem; padding: clamp(1.4rem, 2.4vw, 2rem); }
.sector--edu h3, .sector--retail h3, .sector--data h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.sector--retail { background: #FFF4E6; }
.sector--retail .eyebrow { color: #A85A00 !important; }
.sector--retail .eyebrow::before { background: #F08C1A !important; }
@media (max-width: 1080px) { .sector--telecom { grid-row: auto; min-height: 420px; } }

/* ===== Industries: Gamma-style pill tabs + sliding cards ===== */
.it-list { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem; width: max-content; max-width: 100%; margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); padding: .35rem; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 10px 30px -22px rgba(10,26,47,.4); }
.it-tab { border: 0; background: none; border-radius: 999px; padding: .6rem 1.1rem; font: 600 .95rem/1.2 var(--f-body); color: var(--navy); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.it-tab:hover { background: var(--paper-2); }
.it-tab[aria-selected="true"] { background: var(--signal); color: #fff; }
.it-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.it-viewport { overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding: 1rem 0 2rem; }
.it-track { display: flex; gap: 24px; transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .it-track { transition: none; } }
.it-card { flex: 0 0 min(1040px, 80vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 28px; padding: clamp(1.5rem, 4vw, 3.25rem); box-shadow: 0 30px 60px -45px rgba(10,26,47,.45); opacity: .45; transform: scale(.96); transition: opacity .45s, transform .45s; cursor: pointer; }
.it-card.is-active { opacity: 1; transform: none; cursor: default; }
.it-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--navy); margin: .9rem 0 .8rem; letter-spacing: -.02em; line-height: 1.12; }
.it-body p { color: var(--text-2); margin: 0 0 1.1rem; max-width: 46ch; }
.it-body .eyebrow { color: var(--pc) !important; }
.it-body .eyebrow::before { background: var(--pc) !important; }
.it-tags { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.it-tags li { font: 600 .8rem/1 var(--f-body); color: var(--navy); background: color-mix(in srgb, var(--pc) 9%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 22%, #fff); padding: .45rem .7rem; border-radius: 999px; }
.it-art { max-width: 420px; }
@media (max-width: 760px) {
  .it-list { border-radius: 18px; }
  .it-tab { padding: .55rem .8rem; font-size: .88rem; }
  .it-card { flex-basis: 86vw; grid-template-columns: 1fr; }
  .it-card .it-art { order: -1; max-width: 300px; }
}

/* ===== Contact: next steps, email cards, cleaner form ===== */
.next-steps { list-style: none; padding: 0; margin: clamp(1.8rem, 3vw, 2.4rem) 0 0; display: grid; gap: 1.1rem; position: relative; }
.next-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; position: relative; }
.next-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: -1.1rem; width: 2px; background: rgba(255,255,255,.25); }
.next-steps b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--signal-ink); font: 700 1rem/1 var(--f-display); }
.next-steps strong { display: block; color: #fff; font: 650 1.05rem/1.3 var(--f-display); }
.next-steps span { color: rgba(255,255,255,.82); font-size: .95rem; }
.section--ink .contact-direct { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; border-top: 0; padding-top: 0; margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.cd-item { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff !important; text-decoration: none; transition: background .2s; min-width: 0; }
.cd-item:hover { background: rgba(255,255,255,.18); }
.cd-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: #fff; color: var(--signal-ink); display: grid; place-items: center; }
.cd-ico svg { width: 20px; height: 20px; }
.cd-txt { display: grid; gap: .15rem; font: 600 .98rem/1.25 var(--f-display); overflow-wrap: anywhere; }
.cd-txt small { font: 600 .72rem/1 var(--f-body) !important; letter-spacing: .06em !important; text-transform: uppercase; color: #D7E6FF !important; }
.section--ink .form-wrap .field label, .topic-label { font: 600 .9rem/1.2 var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--navy) !important; }
.topic-label span, .field label .opt { font-weight: 400; color: var(--text-3); }
.section--ink .form-wrap .field input, .section--ink .form-wrap .field textarea { background: #fff !important; border: 1.5px solid #D5DFEC !important; border-radius: 12px !important; }
.section--ink .form-wrap .field input:focus, .section--ink .form-wrap .field textarea:focus { border-color: var(--signal) !important; box-shadow: 0 0 0 4px rgba(31,111,235,.12); }
.topic-chips button { background: #fff; }
@media (max-width: 760px) { .section--ink .contact-direct { grid-template-columns: 1fr; } }
.contact-direct .cd-item span { font-family: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.contact-direct .cd-txt { font: 600 .98rem/1.25 var(--f-display) !important; color: #fff !important; }
.contact-direct .cd-ico { color: var(--signal-ink) !important; }
.section--ink .contact-direct { grid-template-columns: 1fr; max-width: 360px; }
.section--ink .form-wrap .form { row-gap: .9rem; }
.section--ink .form-wrap .field .err:empty { display: none; }
.section--ink .form-wrap .field textarea { min-height: 120px; }
.section--ink .form-wrap .btn-row { align-items: center; gap: 1rem; margin-top: .4rem; }

/* Industries: active card matches the content width of other sections; neighbours peek in from outside it */
#sectors { overflow-x: clip; }
.it-viewport { margin-inline: calc(50% - 50vw); }
.it-card { flex-basis: var(--it-w, 80vw); }
/* Industries v3: carousel stays inside the page width - one card visible, no neighbours peeking */
.it-viewport { margin-inline: 0 !important; overflow: hidden; padding: .5rem 0 2.5rem; }
.it-card { opacity: 0; transform: none; }
.it-card.is-active { opacity: 1; }

/* ===== Our products: description + features + Rocky ===== */
.pp-list { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.pp { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 60px -45px rgba(10,26,47,.4); }
.pp-intro { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 3.5vw, 2.75rem); background: linear-gradient(165deg, var(--pt) 0%, #fff 85%); border-right: 1px solid var(--line-2); }
.pp-badge { position: static !important; align-self: flex-start; background: var(--pc) !important; }
.pp .byline { color: var(--pc); margin: .2rem 0 0; }
.pp h3 { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--navy); margin: 0; letter-spacing: -.03em; line-height: 1.05; }
.pp h3 span { display: block; font-size: .5em; letter-spacing: -.01em; color: var(--text-2); font-weight: 600; margin-top: .35rem; }
.pp-what { color: var(--text-2); margin: 0; }
.pp-what strong { color: var(--navy); }
.pp .w2-kpi { margin-top: auto; }
.pp-foot { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.pp .link-arrow { color: var(--pc); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 650; }
.pp-feats { padding: clamp(1.6rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; gap: 1.2rem; }
.pp-feats-title { font: 700 .82rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.6rem; }
.pf-grid li { display: flex; gap: .8rem; align-items: flex-start; }
.pf-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--pc); background: var(--pt); }
.pf-ico svg { width: 21px; height: 21px; }
.pf-grid h4 { font: 650 1rem/1.25 var(--f-display); color: var(--navy); margin: .1rem 0 .25rem; }
.pf-grid p { font-size: .88rem; line-height: 1.45; color: var(--text-2); margin: 0; }
.pf-rocky { margin-top: auto; display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--pc) 92%, #000) 0%, var(--pc) 100%); color: #fff; }
.pf-rocky-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.pf-rocky-ico svg { width: 22px; height: 22px; }
.pf-rocky h4 { font: 700 1.05rem/1.2 var(--f-display); margin: 0 0 .3rem; color: #fff; }
.pf-rocky p { margin: 0 0 .7rem; font-size: .92rem; color: rgba(255,255,255,.9); }
.pf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-chips li { font: 600 .78rem/1 var(--f-body); padding: .4rem .65rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }
@media (max-width: 1080px) { .pp { grid-template-columns: 1fr; } .pp-intro { border-right: 0; border-bottom: 1px solid var(--line-2); } .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-rocky { margin-top: .4rem; } .pp-feats { justify-content: center; }

/* Our products: pill tabs like Industries */
.pr-list { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem; width: max-content; max-width: 100%; margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); padding: .35rem; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 10px 30px -22px rgba(10,26,47,.4); }
.pr-tab { border: 0; background: none; border-radius: 999px; padding: .65rem 1.3rem; font: 500 .95rem/1.2 var(--f-body); color: var(--navy); cursor: pointer; transition: background .2s, color .2s; }
.pr-tab b { font-weight: 700; }
.pr-tab:hover { background: var(--paper-2); }
.pr-tab[aria-selected="true"] { background: var(--pc); color: #fff; }
.pr-tab:focus-visible { outline: 3px solid var(--pc); outline-offset: 2px; }
.pp[hidden] { display: none; }
.pp:not([hidden]) { animation: ptIn .45s ease both; }
@media (prefers-reduced-motion: reduce) { .pp:not([hidden]) { animation: none; } }
@media (max-width: 760px) { .pr-list { border-radius: 18px; width: 100%; } .pr-tab { flex: 1 1 100%; padding: .6rem .9rem; font-size: .9rem; } }
.pp { scroll-margin-top: 200px; }
/* practice card highlighted when reached from the menu */
.svc.is-flash { animation: svcFlash 2.2s ease; }
@keyframes svcFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--signal), 0 20px 40px -20px rgba(31,111,235,.45); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .svc.is-flash { animation: none; outline: 3px solid var(--signal); outline-offset: 2px; } }

/* Mega-menu promo: coloured illustration per panel */
.mg-vis--art { background: linear-gradient(150deg, color-mix(in srgb, var(--pl) 35%, #fff) 0%, color-mix(in srgb, var(--pl) 60%, #fff) 100%); }
.mga-circle { position: absolute; right: 8%; top: 14%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6) 1.4px, transparent 1.8px) 0 0 / 12px 12px, linear-gradient(160deg, var(--pl), var(--pc)); opacity: .85; }
.mga-tile { position: absolute; left: 12%; top: 16%; width: 110px; height: 124px; border-radius: 20px; background: linear-gradient(155deg, var(--pl) 0%, var(--pc) 100%); box-shadow: 0 18px 30px -16px var(--pc); display: grid; place-items: center; }
.mga-tile svg { width: 80%; height: auto; }
.mga-card { position: absolute; right: 7%; bottom: 14%; width: 46%; display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 12px; padding: .5rem .6rem; box-shadow: 0 12px 26px -14px rgba(10,26,47,.4); }
.mga-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--pc); color: #fff; }
.mga-ico svg { width: 15px; height: 15px; }
.mga-lines { flex: 1; display: grid; gap: 5px; }
.mga-lines i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--pc) 22%, #fff); }
.mga-lines i:last-child { width: 60%; }

/* ===================== About page ===================== */
.ab-hero { background: linear-gradient(180deg, #F4F8FF 0%, #fff 100%); }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.ab-hero .crumbs { margin-bottom: 1.2rem; }
.ab-hero h1 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; color: var(--navy); margin: .8rem 0 1.2rem; max-width: 16ch; }
.ab-hero h1 .serif { color: var(--signal); }
.ab-hero .lead { max-width: 56ch; }
.ab-hero .btn-row { margin-top: 1.6rem; }
.ab-art { position: relative; margin: 0; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.ab-ring { position: absolute; inset: 4%; border-radius: 50%; border: 3px solid var(--signal); opacity: .9; }
.ab-disc { position: absolute; inset: 18%; border-radius: 50%; background: linear-gradient(150deg, #6FA5FF 0%, #1F6FEB 55%, #1550B8 100%); box-shadow: 0 40px 70px -30px rgba(31,111,235,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.ab-disc small { font: 600 .9rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ab-disc strong { font: 800 clamp(3rem, 6vw, 4.6rem)/1 var(--f-display); letter-spacing: -.04em; margin-top: .3rem; }
.ab-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; background: #fff; border-radius: 14px; padding: .55rem .9rem .55rem .55rem; font: 650 .92rem/1 var(--f-display); color: var(--navy); box-shadow: 0 16px 34px -18px rgba(10,26,47,.4); white-space: nowrap; }
.ab-chip .ab-ico { width: 32px; height: 32px; border-radius: 10px; }
.ab-chip--1 { top: 6%; left: 0; } .ab-chip--2 { top: 22%; right: -4%; } .ab-chip--3 { bottom: 20%; left: -4%; } .ab-chip--4 { bottom: 5%; right: 4%; }
.ab-ico { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; color: var(--pc, var(--signal)); background: color-mix(in srgb, var(--pc, #1F6FEB) 12%, #fff); }
.ab-ico svg { width: 55%; height: 55%; }
/* timeline */
.ab-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; position: relative; }
.ab-timeline::before { content: ""; position: absolute; left: 130px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--signal), #7CB0FF 70%, #0E9F94); }
.ab-timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 3rem; padding: 0 0 2.2rem; position: relative; }
.ab-timeline li::before { content: ""; position: absolute; left: 123px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--signal); }
.ab-timeline li.ab-now::before { background: var(--signal); box-shadow: 0 0 0 5px rgba(31,111,235,.18); }
.ab-when { font: 700 .82rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); text-align: right; padding-top: .15rem; }
.ab-timeline h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); color: var(--navy); margin: 0 0 .4rem; letter-spacing: -.015em; }
.ab-timeline p { margin: 0; color: var(--text-2); max-width: 62ch; }
/* stats */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ab-stats div { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg, 20px); padding: 1.6rem 1.5rem; }
.ab-stats strong { display: block; font: 800 clamp(2.2rem, 3.4vw, 3rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--signal-ink); margin-bottom: .6rem; }
.ab-stats span { color: var(--text-2); font-size: .95rem; }
/* values */
.ab-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.ab-values article { background: #fff; border: 1px solid var(--line-2); border-top: 3px solid var(--pc); border-radius: var(--r-lg, 20px); padding: 1.6rem; box-shadow: 0 24px 48px -40px rgba(10,26,47,.4); }
.ab-values h3 { font-size: 1.15rem; color: var(--navy); margin: 1rem 0 .5rem; }
.ab-values p { margin: 0; color: var(--text-2); font-size: .95rem; }
/* CTA */
.ab-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ab-cta h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); margin: .6rem 0 .6rem; }
.ab-cta .lead { color: rgba(255,255,255,.88); margin: 0; }
@media (max-width: 1080px) { .ab-stats, .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ab-hero-grid { grid-template-columns: 1fr; }
  .ab-art { max-width: 320px; }
  .ab-chip { font-size: .8rem; } .ab-chip--2 { right: 0; } .ab-chip--3 { left: 0; }
  .ab-timeline::before { left: 7px; } .ab-timeline li { grid-template-columns: 1fr; gap: .4rem; padding-left: 2rem; } .ab-timeline li::before { left: 0; } .ab-when { text-align: left; }
  .ab-stats, .ab-values { grid-template-columns: 1fr; }
}
@media (min-width: 761px) {
  .ab-timeline::before { left: 160px; }
  .ab-timeline li { grid-template-columns: 140px 1fr; }
  .ab-timeline li::before { left: 153px; }
}
.ab-hero-grid { padding-block: clamp(2rem, 4.5vw, 4rem); }
/* Contact link lands on the content, not the section padding */
#contact { scroll-margin-top: 28px; }

/* ===================== Legal pages ===================== */
.lg-hero { background: linear-gradient(180deg, #F4F8FF 0%, #fff 100%); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem); }
.lg-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--navy); letter-spacing: -.03em; margin: .8rem 0 .8rem; }
.lg-hero .lead { max-width: 62ch; }
.lg-meta { font-size: .88rem; color: var(--text-3); margin: 1rem 0 0; }
.lg-wrap { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.lg-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lg-toc { position: sticky; top: 110px; font-size: .92rem; }
.lg-toc p { font: 700 .74rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .8rem; }
.lg-toc ol { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .5rem; border-left: 2px solid var(--line-2); }
.lg-toc ol a { display: block; padding-left: .9rem; color: var(--text-2); text-decoration: none; }
.lg-toc ol a:hover { color: var(--signal-ink); }
.lg-other { display: grid; gap: .45rem; }
.lg-other a { color: var(--signal-ink); text-decoration: none; font-weight: 600; }
.lg-body { max-width: 760px; }
.lg-sec { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line-2); scroll-margin-top: 110px; }
.lg-sec:last-child { border-bottom: 0; }
.lg-sec h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: var(--navy); margin: 0 0 .8rem; letter-spacing: -.015em; }
.lg-sec p, .lg-sec li { color: var(--text-2); line-height: 1.65; }
.lg-sec p { margin: 0 0 .9rem; max-width: none; }
.lg-sec ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.lg-sec a { color: var(--signal-ink); }
.lg-sec code { font-family: var(--f-mono); font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 4px; }
.lg-table { overflow-x: auto; margin: .4rem 0 1.2rem; border: 1px solid var(--line-2); border-radius: 14px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lg-table th { text-align: left; background: var(--paper-2); color: var(--navy); font-weight: 650; padding: .75rem .9rem; }
.lg-table td { padding: .75rem .9rem; border-top: 1px solid var(--line-2); color: var(--text-2); vertical-align: top; }
.lg-todo { display: inline-block; font-size: .9rem; color: var(--text-3); }
.lg-links .lg-cookie-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.lg-links .lg-cookie-btn:hover { text-decoration: underline; }
@media (max-width: 900px) { .lg-grid { grid-template-columns: 1fr; } .lg-toc { position: static; } .lg-toc ol { margin-bottom: 1rem; } .lg-other { display: none; } }

/* ===================== Cookie banner ===================== */
.ck { position: fixed; z-index: 200; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(980px, calc(100% - 32px)); display: flex; align-items: center; gap: 1.5rem; background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 1.2rem 1.4rem; box-shadow: 0 30px 70px -30px rgba(10,26,47,.45); }
.ck[hidden] { display: none; }
.ck-main { flex: 1; min-width: 0; }
.ck-title { font: 700 1.05rem/1.2 var(--f-display); color: var(--navy); margin: 0 0 .3rem; }
.ck-text { font-size: .9rem; color: var(--text-2); margin: 0; line-height: 1.5; }
.ck-text a { color: var(--signal-ink); }
.ck-prefs { margin-top: .9rem; display: grid; gap: .5rem; }
.ck-prefs[hidden] { display: none; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.ck-row b { display: block; color: var(--navy); font-size: .9rem; }
.ck-row small { color: var(--text-3); font-size: .82rem; }
.ck-row input { width: 20px; height: 20px; accent-color: var(--signal); flex-shrink: 0; }
.ck-btns { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.ck-btn { border-radius: 999px; padding: .7rem 1.1rem; font: 650 .9rem/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.ck-btn--ghost { background: #fff; color: var(--navy); border: 1.5px solid #CBD6E6; }
.ck-btn--ghost:hover { border-color: var(--signal); }
.ck-btn--solid { background: var(--signal); color: #fff; border: 1.5px solid var(--signal); }
.ck-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (max-width: 760px) { .ck { flex-direction: column; align-items: stretch; bottom: 12px; padding: 1rem; gap: 1rem; } .ck-btns { justify-content: stretch; } .ck-btn { flex: 1; } }

/* ===================== NPP product page ===================== */
.np-hero { background: linear-gradient(180deg, #F2F7FF 0%, #fff 100%); }
.np-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.np-hero h1 { font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.05; letter-spacing: -.035em; color: var(--navy); margin: .8rem 0 1.1rem; }
.np-hero h1 .serif { color: var(--signal); }
.np-hero .lead { max-width: 54ch; }
.np-hero .btn-row { margin-top: 1.6rem; }
.np-shot { margin: 0; padding: clamp(1rem, 2.5vw, 1.8rem) clamp(1rem, 2.5vw, 1.8rem) 0; border-radius: 26px; background: linear-gradient(160deg, #DCE8FB 0%, #B8D0F7 100%); box-shadow: 0 40px 70px -40px rgba(31,111,235,.55); overflow: hidden; }
.np-shot .w2-frame { border-radius: 12px 12px 0 0; }
/* audience */
.np-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.np-aud article { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 1.6rem; box-shadow: 0 24px 48px -40px rgba(10,26,47,.4); }
.np-aud h3, .np-flow h3 { font-size: 1.15rem; color: var(--navy); margin: 1rem 0 .45rem; }
.np-aud p, .np-flow p { margin: 0; color: var(--text-2); font-size: .95rem; }
.np-aud .pf-ico, .np-flow .pf-ico, .np-feats .pf-ico { --pc: #1F6FEB; --pt: #EAF2FF; color: var(--pc); background: var(--pt); }
/* flow */
.np-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: s; }
.np-flow li { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 1.6rem; }
.np-flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1.2rem; width: 1.2rem; height: 2px; background: var(--signal); }
.np-step { position: absolute; top: 1.4rem; right: 1.4rem; font: 700 .8rem/1 var(--f-mono); color: var(--text-3); }
/* features */
.np-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2rem; }
.np-feats h4 { font-size: 1.05rem; }
.np-feats p { font-size: .93rem; }
/* drill */
.np-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.np-split h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--navy); letter-spacing: -.03em; margin: .7rem 0 1rem; line-height: 1.1; }
.np-kpis { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.np-kpis li { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: .7rem .9rem; font-size: .9rem; color: var(--text-2); }
.np-kpis b { display: inline-block; min-width: 2.6rem; color: var(--signal-ink); font-family: var(--f-display); }
.np-drill { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.np-drill li { margin-left: calc(var(--d) * 1.6rem); position: relative; }
.np-drill li span { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: .85rem 1.1rem; font: 650 1rem/1.2 var(--f-display); color: var(--navy); box-shadow: 0 16px 30px -26px rgba(10,26,47,.45); }
.np-drill li span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--signal) calc(40% + var(--d) * 15%), #fff); flex-shrink: 0; }
.np-drill li:last-child span { background: var(--signal); color: #fff; border-color: var(--signal); }
.np-drill li:last-child span::before { background: #fff; }
.np-drill li:not(:first-child)::before { content: ""; position: absolute; left: -1.1rem; top: -.7rem; width: 1rem; height: 1.9rem; border-left: 2px solid #BFD3F5; border-bottom: 2px solid #BFD3F5; border-bottom-left-radius: 8px; }
/* rocky */
.np-rocky { display: flex; gap: 1.6rem; align-items: flex-start; padding: clamp(1.6rem, 4vw, 2.75rem); border-radius: 26px; background: linear-gradient(120deg, #1550B8 0%, #1F6FEB 100%); color: #fff; }
.np-rocky-ico { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.np-rocky-ico svg { width: 30px; height: 30px; }
.np-rocky .eyebrow { color: #D7E6FF !important; }
.np-rocky .eyebrow::before { background: #7CF2E0 !important; }
.np-rocky h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: .6rem 0 .7rem; letter-spacing: -.025em; }
.np-rocky p { color: rgba(255,255,255,.9); max-width: 70ch; margin: 0 0 1rem; }
/* scale */
.np-scale { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 1.2rem; }
.np-stat { background: #fff; border: 1px solid var(--line-2); border-radius: 22px; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.np-stat strong { font: 800 clamp(3rem, 5vw, 4.4rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--signal-ink); }
.np-stat span { color: var(--text-2); margin-top: .7rem; }
.np-case { display: block; text-decoration: none; border-radius: 22px; padding: 2rem; background: linear-gradient(150deg, #0B1B33 0%, #123A75 100%); color: #fff; }
.np-case .byline { color: #6AA8FF; margin: 0 0 .6rem; }
.np-case h3 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0 0 .7rem; }
.np-case p:not(.byline) { color: rgba(255,255,255,.82); margin: 0 0 1.2rem; }
.np-case .link-arrow { color: #fff; font-weight: 650; }
@media (max-width: 1080px) { .np-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-flow li::after { display: none; } .np-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .np-hero-grid, .np-split, .np-scale { grid-template-columns: 1fr; }
  .np-aud, .np-flow, .np-feats { grid-template-columns: 1fr; }
  .np-rocky { flex-direction: column; }
}
.np-kpis b { min-width: 4.6rem; }

/* "Email address copied" confirmation (only used inside preview frames) */
.mail-toast { position: fixed; z-index: 300; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; font: 600 .95rem/1.3 var(--f-body); padding: .8rem 1.2rem; border-radius: 999px; box-shadow: 0 20px 40px -20px rgba(10,26,47,.6); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.mail-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Mobile round 1 (8 Nov 2026, Jana's iPhone test)
   ========================================================================== */
/* 1. Phone menu = dropdown panel over a dimmed page, not a full white screen */
@media (max-width: 1080px) {
  .nav-open .nav-menu {
    bottom: auto !important; max-height: calc(100dvh - 71px); background: #fff !important;
    border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px -20px rgba(10,26,47,.45);
    padding-bottom: var(--s-6) !important; overscroll-behavior: contain;
  }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 99; background: rgba(10,26,47,.45); }
}
/* 3. Hero on phones: headline, intro, image, then the buttons */
@media (max-width: 760px) {
  .hero--v2 .hero-copy { display: contents; }
  .hero--v2 .hero-grid { gap: 1.25rem !important; }
  .hero--v2 h1 { order: 1; margin: 0; font-size: 2.25rem; } .hero--v2 .lead { order: 2; margin: 0; font-size: 1.02rem; }
  .hero--v2 .hero-art2 { order: 3; max-width: 360px; margin-top: -.25rem; }
  .hero--v2 .btn-row { order: 4; margin-top: 0; }
}
/* 5. Product tabs on phones: short names side by side */
@media (max-width: 760px) {
  .pr-list { flex-wrap: nowrap; border-radius: 999px; }
  .pr-tab { flex: 1 1 0; font-size: 1rem; padding: .7rem .9rem; }
  .pr-full { display: none; }
}
/* 6. Industry (and project) tabs on phones: one row, swipe left/right */
@media (max-width: 760px) {
  .it-list { flex-wrap: nowrap; justify-content: flex-start; width: 100%; border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .it-list::-webkit-scrollbar, .pt-list::-webkit-scrollbar { display: none; }
  .it-tab, .pt-tab { flex-shrink: 0; scroll-snap-align: center; }
  .it-list, .pt-list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .it-list.at-end, .pt-list.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* Contact: email panel (form removed 8 Nov 2026, Jana: email only) */
.mail-panel h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--navy); margin: 0 0 .5rem; }
.mail-panel .mp-lead { margin: 0 0 1.2rem; font-size: 1rem; }
.mail-panel .topic-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .88rem/1 var(--f-body); color: var(--navy) !important; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.mail-panel .topic-chips a:hover, .mail-panel .topic-chips a:focus-visible { background: var(--signal); border-color: var(--signal); color: #fff !important; }
.section--ink .mail-panel a.mp-btn { color: #fff !important; margin-top: 1.5rem; width: 100%; justify-content: center; }
.mail-panel .mp-alt { margin: 1rem 0 0; text-align: center; font-size: .95rem; }
.mail-panel .mp-alt a { font-weight: 600; }
.mail-panel .mp-note { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); text-align: center; }
.v2 .contact { align-items: center; }

/* Products on phones (Jana 8 Nov): use the full card width.
   Feature: icon + title on one line, description full width below. Rocky: icon on top, text full width. */
@media (max-width: 560px) {
  .pp-intro, .pp-feats { padding: 1.4rem 1.2rem; }
  .pf-grid li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .8rem; row-gap: .45rem; align-items: center; }
  .pf-grid li > div { display: contents; }
  .pf-grid li h4 { margin: 0; }
  .pf-grid li p { grid-column: 1 / -1; font-size: .95rem; }
  .pf-rocky { flex-direction: column; gap: .8rem; padding: 1.3rem 1.2rem; }
  .pf-rocky p { font-size: .98rem; }
}

/* Rocky box styled like the Technical Advisory card (Jana 8 Nov) */
.pf-rocky-tag { display: flex; align-items: center; gap: .7rem; margin: 0 0 .45rem !important; font: 700 .78rem/1.2 var(--f-display) !important; letter-spacing: .14em; text-transform: uppercase; color: #D7E6FF !important; }
.pf-rocky-tag::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: #7CF2E0; flex-shrink: 0; }
#work-emock .pf-rocky-tag { color: #E6FFFB !important; } #work-emock .pf-rocky-tag::before { background: #fff; }
.pf-rocky { box-shadow: 0 24px 50px -30px rgba(10,26,47,.55); }
@media (max-width: 560px) {
  .pf-rocky { gap: 1.1rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: 22px; }
  .pf-rocky-ico { width: 52px; height: 52px; border-radius: 15px; }
  .pf-rocky-ico svg { width: 24px; height: 24px; }
  .pf-rocky h4 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 .7rem; }
  .pf-rocky p:not(.pf-rocky-tag) { font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; }
  .pf-chips li { font-size: .82rem; padding: .5rem .8rem; }
}

/* Phone menu: same tabs as desktop (Jana 8 Nov). Tabs = swipeable pill row; the chosen tab's links show below. */
@media (max-width: 1080px) {
  .site-header .mega--g .mg-band { display: block !important; background: none; margin: .4rem 0 .5rem; }
  .site-header .mega--g .mg-tabs { display: flex; gap: .4rem; padding: 0 0 .2rem; min-height: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-header .mega--g .mg-tabs::-webkit-scrollbar { display: none; }
  .site-header .mega--g .mg-tab { flex-shrink: 0; background: var(--paper-2, #EEF3FA); color: var(--navy); border: 0; border-radius: 999px; padding: .6rem 1rem; font: 600 .92rem/1 var(--f-body); cursor: pointer; white-space: nowrap; }
  .site-header .mega--g .mg-tab[aria-selected="true"] { background: var(--signal); color: #fff; }
  .site-header .mega--g .mg-panel[hidden] { display: none !important; }
  .site-header .mega--g .mg-panel:not([hidden]) { display: block !important; }
}
@media (max-width: 1080px) {
  .site-header .mega--g .mg-tabs { flex-wrap: wrap; overflow: visible; }
  .nav-open .nav-menu { overflow-x: hidden; }
  .nav-open .nav-menu > .nav-item, .site-header .mega--g, .site-header .mega--g .container { min-width: 0; max-width: 100%; }
}
/* phone menu tabs: one swipeable row (like the page's Industries tabs), tighter spacing */
@media (max-width: 1080px) {
  .site-header .mega--g .mg-band { margin: .6rem 0 0; }
  .site-header .mega--g .mg-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: .1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .site-header .mega--g .mg-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .site-header .mega--g .mg-tab { scroll-snap-align: start; padding: .55rem .9rem; font-size: .88rem; }
  .site-header .mega--g .mg-body, .site-header .mega--g .mg-panel, .site-header .mega--g .mg-cards { padding-top: 0 !important; margin-top: 0 !important; }
  .site-header .mega.mega--g { padding: .4rem 0 .8rem !important; }
}
@media (max-width: 1080px) { .site-header .mega.mega--g { grid-template-columns: minmax(0, 1fr) !important; } .site-header .mega--g .mg-band { min-width: 0; } }

/* Phone menu, final (Jana 8 Nov): each tab is a direct link to its section, no sub-list */
@media (max-width: 1080px) {
  .site-header .mega--g .mg-body { display: none !important; }
  .site-header .mega--g .mg-band { margin: 0; }
  .site-header .mega--g .mg-tabs { flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; padding: 0; }
  .site-header .mega--g .mg-tab, .site-header .mega--g .mg-tab[aria-selected="true"] {
    display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
    background: none; color: var(--navy); border-radius: 0; padding: .85rem .2rem .85rem .9rem; font: 600 1.02rem/1.25 var(--f-body);
    border-bottom: 1px solid var(--line); white-space: normal;
  }
  .site-header .mega--g .mg-tab::after { content: "→"; color: var(--signal); font-weight: 600; }
  .site-header .mega--g .mg-tab:active { background: var(--paper-2, #EEF3FA); }
  .site-header .mega.mega--g { padding: 0 0 .4rem !important; }
}

/* ==========================================================================
   Services page (services.html), 8 Nov 2026
   ========================================================================== */
.sv-hero { background: linear-gradient(180deg, #F4F8FF 0%, #fff 100%); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.sv-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; color: var(--navy); margin: .8rem 0 1.1rem; max-width: 18ch; }
.sv-hero h1 .serif { color: var(--signal); }
.sv-hero .lead { max-width: 60ch; }
.sv-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.sv-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--navy); font: 600 .92rem/1 var(--f-body); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.sv-nav a::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--lc); }
.sv-nav a:hover { border-color: var(--lc); box-shadow: 0 8px 20px -14px rgba(10,26,47,.5); }

.sv-sec { padding-block: clamp(3rem, 6vw, 5.5rem); background: #fff; scroll-margin-top: 80px; }
.sv-sec--alt { background: var(--paper-2, #F3F7FC); }
.sv-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sv-head { position: sticky; top: 100px; }
.sv-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--lc); background: color-mix(in srgb, var(--lc) 11%, #fff); }
.sv-ico svg { width: 28px; height: 28px; }
.sv-num { font: 700 .8rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--lc); margin: 1.2rem 0 .5rem; }
.sv-head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; color: var(--navy); margin: 0 0 1rem; }
.sv-intro { color: var(--text-2); font-size: 1.06rem; line-height: 1.6; margin: 0; }
.sv-proof { margin-top: 1.6rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); border-left: 4px solid var(--lc); }
.sv-sec--alt .sv-proof { background: #fff; }
.sv-proof-t { font: 700 .74rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .5rem; }
.sv-proof p:not(.sv-proof-t) { margin: 0 0 .7rem; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.sv-proof a { color: var(--lc); font-weight: 650; text-decoration: none; }
.sv-proof a:hover { text-decoration: underline; }

.sv-body { display: grid; gap: 1rem; }
.sv-block { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(1.2rem, 2.4vw, 1.7rem); }
.sv-block h3 { font: 700 1.08rem/1.2 var(--f-display); color: var(--navy); margin: 0 0 .9rem; }
.sv-when, .sv-get { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sv-when li, .sv-get li { position: relative; padding-left: 1.7rem; color: var(--text-2); line-height: 1.5; }
.sv-when li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--lc); }
.sv-get li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--lc) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sv-do { list-style: none; margin: 0; padding: 0; counter-reset: sv; display: grid; gap: .9rem; }
.sv-do li { counter-increment: sv; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: .8rem; row-gap: .15rem; }
.sv-do li::before { content: counter(sv); grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--lc); color: #fff; font: 700 .9rem/1 var(--f-display); }
.sv-do strong { color: var(--navy); font-weight: 650; align-self: center; }
.sv-do span { color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.sv-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.sv-tech li { font: 600 .82rem/1 var(--f-body); color: var(--navy); background: color-mix(in srgb, var(--lc, #1F6FEB) 8%, #fff); border: 1px solid color-mix(in srgb, var(--lc, #1F6FEB) 22%, #fff); padding: .5rem .75rem; border-radius: 999px; }

.sv-adv { background: var(--blue-band, linear-gradient(135deg, #1550B8, #1F6FEB)); color: #fff; padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: 80px; }
.sv-adv-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sv-adv .sv-ico--light { background: rgba(255,255,255,.16); color: #fff; }
.sv-adv .sv-num { color: #D7E6FF; }
.sv-adv h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.03em; margin: 0 0 1rem; }
.sv-adv .sv-intro { color: rgba(255,255,255,.9); margin-bottom: 1.6rem; }
.sv-adv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sv-adv-list li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 1.2rem 1.3rem; display: grid; gap: .4rem; }
.sv-adv-list strong { font: 700 1.05rem/1.25 var(--f-display); }
.sv-adv-list span { color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.5; }

.sv-stack { padding-block: clamp(3rem, 6vw, 5.5rem); background: #fff; scroll-margin-top: 80px; }
.sv-stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.sv-stack-card { border: 1px solid var(--line-2); border-radius: 20px; padding: 1.4rem 1.5rem; background: var(--paper-2, #F3F7FC); }
.sv-stack-card h3 { font: 700 1.15rem/1.2 var(--f-display); color: var(--navy); margin: 0 0 .4rem; }
.sv-stack-card p { color: var(--text-2); font-size: .95rem; margin: 0 0 1rem; }
.sv-stack-card .sv-tech li { background: #fff; }

.sv-how { padding-block: clamp(3rem, 6vw, 5rem); background: var(--paper-2, #F3F7FC); }
.sv-steps { list-style: none; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sv-steps li { background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 1.4rem; display: grid; gap: .45rem; align-content: start; }
.sv-steps b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: #fff; font: 700 1rem/1 var(--f-display); margin-bottom: .3rem; }
.sv-steps strong { color: var(--navy); font: 700 1.05rem/1.25 var(--f-display); }
.sv-steps span { color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.sv-own { text-align: center; max-width: 62ch; margin: 1.8rem auto 0; color: var(--text-2); font-weight: 500; }

@media (max-width: 1080px) {
  .sv-grid, .sv-adv-grid { grid-template-columns: 1fr; }
  .sv-head { position: static; }
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sv-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .sv-nav::-webkit-scrollbar { display: none; }
  .sv-nav a { flex-shrink: 0; }
  .sv-adv-list, .sv-steps { grid-template-columns: 1fr; }
  .sv-block { border-radius: 18px; }
}

/* Homepage practice cards: link to the services page instead of the technology list */
.svc-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-2); width: 100%; font-weight: 600; font-size: .92rem; color: var(--signal-ink); text-decoration: none; }
.svc-link span { color: var(--lc); transition: transform var(--t-fast); }
.svc-link:hover span { transform: translateX(4px); }
.sv-hero h1 { max-width: 22ch; }
.sv-stack-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 1081px) { .sv-stack-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Case study: Accuracy view uses the full panel width (side list is hidden there); two cards + note */
.bench-body:has(> .bench-side[hidden]) { grid-template-columns: 1fr; }
.acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-grid .acc-note { grid-column: 1 / -1; }
.acc-card strong { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
@media (max-width: 600px) { .acc-grid { grid-template-columns: 1fr; } }
/* Case study "What we covered": done items get a solid card */
.next-card--done { border: 1px solid var(--line-2); border-left: 4px solid var(--st-prod, #1E8E5A); background: #fff; }
/* Case study results: why not just tune SQL Server */
.tune-box { margin-top: clamp(1.5rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xl, 24px); padding: clamp(1.4rem, 3vw, 2.2rem); }
.tune-head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--navy); margin: 0 0 .5rem; }
.tune-head p { color: var(--text-2); margin: 0 0 1.3rem; max-width: 70ch; }
.tune-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tune-list li { display: grid; gap: .35rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: #F7F8FA; border-left: 4px solid #8A97A8; }
.tune-list strong { color: var(--navy); font: 700 1.02rem/1.25 var(--f-display); }
.tune-list span { color: var(--text-2); font-size: .94rem; line-height: 1.5; }
.tune-foot { margin: 1.3rem 0 0; color: var(--navy); font-weight: 550; }
@media (max-width: 760px) { .tune-list { grid-template-columns: 1fr; } }

/* Industries: expanded cards (challenges / how we help / experience), 8 Nov */
.it-card { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); align-items: start; }
.it-card .it-art { align-self: center; }
.it-body p { max-width: 62ch; }
.it-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; margin: .4rem 0 1.3rem; }
.it-cols h4 { font: 700 .78rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .7rem; }
.it-ch, .it-help { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.it-ch li, .it-help li { position: relative; padding-left: 1.5rem; font-size: .95rem; line-height: 1.45; color: var(--text-2); }
.it-ch li::before { content: ""; position: absolute; left: .25rem; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 45%, #fff); }
.it-help li { color: var(--navy); font-weight: 500; }
.it-help li::before { content: ""; position: absolute; left: 0; top: .15em; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.it-proof { margin: 0 0 1.4rem !important; padding: .9rem 1.1rem; border-radius: 14px; background: color-mix(in srgb, var(--pc) 7%, #fff); border-left: 4px solid var(--pc); font-size: .94rem !important; max-width: none !important; color: var(--text-2); }
.it-proof b { color: var(--pc); margin-right: .25rem; }
.it-proof a { color: var(--pc); font-weight: 650; text-decoration: none; white-space: nowrap; }
.it-proof a:hover { text-decoration: underline; }
@media (max-width: 1080px) { .it-card { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .it-cols { grid-template-columns: 1fr; } }
/* Products: one clear button after the Rocky box (Jana 8 Nov) */
.pp-cta { display: flex; justify-content: center; margin-top: .4rem; }
.pp-cta .btn { min-width: 260px; justify-content: center; }
.pp-cta--emock { background: #0E9F94 !important; border-color: #0E9F94 !important; }
.pp-cta--emock:hover { background: #0B857C !important; }
@media (max-width: 560px) { .pp-cta .btn { width: 100%; min-width: 0; } }
.mg-intro-btn { display: inline-flex; align-items: center; gap: .5rem; }
.mg-intro-btn span { transition: transform var(--t-fast); }
.mg-intro-btn:hover span { transform: translateX(3px); }

/* ==========================================================================
   Phone menu: slide-in panel (8 Nov 2026)
   ========================================================================== */
.mnav, .mnav-scrim { display: none; }
@media (max-width: 1080px) {
  .mnav-scrim { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(10,26,47,.5); opacity: 0; transition: opacity .3s ease; }
  .mnav { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(88vw, 400px); background: #F4F7FB; box-shadow: -30px 0 60px -30px rgba(10,26,47,.5); transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
  .mnav[hidden], .mnav-scrim[hidden] { display: none; }
  .mnav-open .mnav { transform: none; }
  .mnav-open .mnav-scrim { opacity: 1; }
  .mnav-open, .mnav-open body { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .mnav, .mnav-scrim { transition: none; } }

  .mnav-head { display: flex; align-items: center; gap: .8rem; padding: calc(env(safe-area-inset-top) + 1.1rem) 1rem 1.1rem 1.2rem; background: linear-gradient(135deg, #1550B8 0%, #1F6FEB 70%, #3B82F6 100%); color: #fff; }
  .mnav-brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; min-width: 0; }
  .mnav-logo { width: 36px; height: 36px; flex-shrink: 0; color: #fff; }
  .mnav-logo svg { width: 100%; height: 100%; }
  .mnav-brand b { display: block; font: 800 1.2rem/1 var(--f-display); letter-spacing: .03em; }
  .mnav-brand small { display: block; margin-top: .3rem; font-size: .78rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-close { margin-left: auto; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .mnav-close svg { width: 20px; height: 20px; }
  .mnav-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .mnav-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .9rem .9rem calc(env(safe-area-inset-bottom) + 1.2rem); -webkit-overflow-scrolling: touch; }
  .mnav-home { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 14px; background: #fff; color: var(--navy); font: 700 1.02rem/1 var(--f-display); text-decoration: none; box-shadow: 0 1px 0 rgba(10,26,47,.04); }
  .mnav-home svg { width: 22px; height: 22px; color: var(--signal); }
  .mnav-group { margin-top: 1.1rem; background: #fff; border-radius: 18px; padding: .35rem; box-shadow: 0 1px 0 rgba(10,26,47,.04), 0 10px 24px -20px rgba(10,26,47,.35); }
  .mnav-h { margin: .6rem .7rem .35rem; font: 700 .72rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
  .mnav-item { display: flex; align-items: center; gap: .85rem; padding: .7rem .65rem; border-radius: 12px; text-decoration: none; color: var(--navy); }
  .mnav-item + .mnav-item { border-top: 1px solid #EEF2F7; }
  .mnav-item:active, .mnav-home:active { background: #EEF4FD; }
  .mnav-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
  .mnav-ico svg { width: 21px; height: 21px; }
  .mnav-txt { min-width: 0; flex: 1; }
  .mnav-txt strong { display: block; font: 650 .98rem/1.25 var(--f-body); }
  .mnav-txt small { display: block; margin-top: .15rem; font-size: .82rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-chev { font-size: 1.4rem; line-height: 1; color: #A9B6C7; }
  .mnav-item.is-current, .mnav-home.is-current { background: #EEF4FD; }
  .mnav-item.is-current .mnav-txt strong, .mnav-home.is-current { color: var(--signal-ink); }

  .mnav-cta { margin-top: 1.1rem; padding: 1.2rem; border-radius: 18px; background: var(--navy, #0F1E2E); color: #fff; }
  .mnav-cta p { margin: 0 0 1rem; color: rgba(255,255,255,.8); font-size: .92rem; line-height: 1.5; }
  .mnav-cta p b { display: block; color: #fff; font: 700 1.1rem/1.25 var(--f-display); margin-bottom: .3rem; }
  .mnav-cta .btn { width: 100%; justify-content: center; }
  .mnav-mail { display: block; margin-top: .8rem; text-align: center; color: #CFE0FF; font-weight: 600; font-size: .92rem; text-decoration: none; }
  /* the old list menu is no longer used on phones */
  .nav-open .nav-menu { display: none !important; }
  body.nav-open::after { display: none !important; }
}
@media (max-width: 1080px) { .mnav-brand { flex: 1; } .mnav-brand > span:last-child { min-width: 0; } }

/* ==========================================================================
   Footer on phones (Jana 8 Nov): grouped blocks with hairlines
   ========================================================================== */
@media (max-width: 760px) {
  .site-footer { padding: 2.4rem 0 1.6rem; }
  .site-footer .footer-top { grid-template-columns: 1fr 1fr; gap: 0 !important; padding-bottom: 0; border-bottom: 0; }
  .site-footer .footer-top > div { padding: 1.3rem 0; border-top: 1px solid rgba(255,255,255,.12); }
  .site-footer .footer-top > .footer-brand { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
  .footer-brand p { margin-top: .9rem; font-size: .92rem; line-height: 1.5; }
  .site-footer .footer-top > div:nth-child(2), .site-footer .footer-top > div:nth-child(5) { grid-column: 1 / -1; }
  .site-footer .footer-top > div:nth-child(3) { padding-right: 1rem; }
  .site-footer h5 { font: 700 .74rem/1 var(--f-display); letter-spacing: .12em; color: #8FB4FF; margin: 0 0 .9rem; }
  .site-footer .footer-top ul { gap: .7rem; }
  .site-footer .footer-top a { font-size: .98rem; color: #E3ECF8; }
  .site-footer .footer-top > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  /* Get in touch: email rows */
  .site-footer .footer-top > div:nth-child(5) ul { gap: .55rem; }
  .site-footer .footer-top > div:nth-child(5) a { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .site-footer .footer-top > div:nth-child(5) a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: #8FB4FF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* legal block */
  .site-footer .footer-legal { display: block; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--f-body); }
  .site-footer .footer-legal .legal-ids { display: grid; gap: .35rem; font-size: .84rem; line-height: 1.5; color: #9FB0C6; letter-spacing: 0; }
  .site-footer .footer-legal .legal-ids span:first-child { color: #E3ECF8; font-weight: 600; }
  .site-footer .footer-legal .lg-links { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.12); }
  .site-footer .footer-legal .lg-links > * { font: 500 .88rem/1.2 var(--f-body); color: #E3ECF8; letter-spacing: 0; }
  .site-footer .footer-legal .lg-links > * + *::before { content: "·"; margin: 0 .6rem; color: #5E7290; }
}
@media (max-width: 760px) {
  .site-footer .footer-legal .lg-links { gap: .7rem 1.4rem; }
  .site-footer .footer-legal .lg-links > * + *::before { content: none; }
  .site-footer .footer-top > div:nth-child(2) a { font-size: .94rem; }
  .site-footer .footer-top > div:nth-child(2) ul { grid-template-columns: 1fr 1.15fr; }
}
@media (max-width: 760px) {
  .site-footer .footer-top > div:nth-child(2) ul { grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
}

/* Responsive QA fixes (8 Nov): columns never wider than the screen; larger tap targets */
@media (max-width: 900px) { .lg-grid { grid-template-columns: minmax(0, 1fr); } .lg-grid > * { min-width: 0; } }
.lg-body { overflow-wrap: anywhere; }
.lg-table table { min-width: 520px; }
@media (max-width: 1080px) { .contact { grid-template-columns: minmax(0, 1fr) !important; } .contact > * { min-width: 0; } }
.mail-panel .topic-chips a { white-space: normal; }
@media (max-width: 768px) {
  .site-footer .footer-legal .lg-links > * { padding: .55rem 0; }
  .site-footer .footer-legal .lg-links { gap: 0 1.4rem; }
  .sv-proof a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ==========================================================================
   Shorter homepage on phones (Jana 8 Nov): details stay on desktop and on the Services / NPP pages
   ========================================================================== */
@media (max-width: 760px) {
  /* What we do: compact practice cards */
  #services .svc { padding: 1.2rem 1.2rem 1rem; gap: .5rem; }
  #services .svc-get { display: none; }
  #services .svc-need { margin: 0; font-size: .95rem; }
  #services .svc h3 { font-size: 1.15rem; }
  #services .svc-ico { width: 40px; height: 40px; }
  #services .svc-link { margin-top: .4rem; padding-top: .6rem; }
  /* Products: features as a tight two-column list of titles */
  .pp .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .8rem .7rem; }
  .pp .pf-grid li { display: flex !important; align-items: center; gap: .55rem; }
  .pp .pf-grid li > div { display: block !important; }
  .pp .pf-grid li p { display: none; }
  .pp .pf-grid h4 { font-size: .9rem; line-height: 1.25; margin: 0; }
  .pp .pf-ico { width: 32px; height: 32px; border-radius: 10px; }
  .pp .pf-ico svg { width: 17px; height: 17px; }
  /* Industries: keep "How we help" and the experience note */
  .it-cols > div:first-child { display: none; }
  .it-cols { margin-top: .2rem; }
}
@media (max-width: 760px) {
  #services .svc { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .8rem; row-gap: .45rem; align-items: center; }
  #services .svc > *:not(.svc-ico):not(h3) { grid-column: 1 / -1; }
  #services .svc h3 { margin: 0; }
  #services .svc--advisory .eyebrow { grid-column: 1 / -1; order: -1; }
  .it-card .it-art { max-width: 210px; margin-inline: auto; }
  .it-card { padding: 1.3rem 1.2rem 1.4rem; gap: 1rem; }
}

/* Legal tables on phones: each row becomes a small card, column name above each value (Jana 8 Nov) */
@media (max-width: 640px) {
  .lg-table { border: 0; border-radius: 0; overflow: visible; }
  .lg-table table { min-width: 0 !important; display: block; }
  .lg-table thead { display: none; }
  .lg-table tbody, .lg-table tr, .lg-table td { display: block; }
  .lg-table tr { border: 1px solid var(--line-2); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .7rem; background: #fff; }
  .lg-table td { border: 0 !important; padding: 0 !important; }
  .lg-table td + td { margin-top: .7rem; }
  .lg-table td::before { content: attr(data-label); display: block; font: 700 .72rem/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: .2rem; }
  .lg-table td:first-child { color: var(--navy); font-weight: 600; }
}

/* ==========================================================================
   Hero illustration refinements + "From foundation to intelligence" (8 Nov)
   ========================================================================== */
.ha-card { display: none !important; }                       /* placeholder cards removed */
.ha-fill { width: 56%; opacity: .55; }                        /* calmer backdrop */
.ha-ring { border-width: 2px !important; border-color: rgba(31,111,235,.35); width: 50%; }
.hero-art2 .al { cursor: default; }                           /* conceptual, not clickable */
.hero-art2 .al-name { stroke: rgba(4,20,45,.28); stroke-width: 2.4px; paint-order: stroke; }
/* no endless motion: risers and pulse only run inside the intro sequence */
.hero-art2 .arch-riser, .hero-art2 .al-pulse { animation: none; }
.hero-art2 .al-pulse { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art2.ha-anim { opacity: 0; transform: translateY(10px); }
  .hero-art2.ha-play { animation: ha-in .6s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes ha-in { to { opacity: 1; transform: none; } }

  /* 0.6–2.8 s: highlight rises through the four foundation layers */
  .ha-play .al[data-layer] .al-top { animation: ha-lit .7s ease-in-out both; animation-play-state: var(--ha-ps, running); }
  .ha-play .al[data-layer="cloud"] .al-top { animation-delay: .6s; }
  .ha-play .al[data-layer="db"] .al-top    { animation-delay: 1.15s; }
  .ha-play .al[data-layer="data"] .al-top  { animation-delay: 1.7s; }
  .ha-play .al[data-layer="sw"] .al-top    { animation-delay: 2.25s; }
  @keyframes ha-lit { 0%, 100% { filter: none; } 45% { filter: brightness(1.12) saturate(1.25); } }
  .ha-play .al[data-layer] .al-lift { animation: ha-nudge .7s ease-in-out both; }
  .ha-play .al[data-layer="cloud"] .al-lift { animation-delay: .6s; }
  .ha-play .al[data-layer="db"] .al-lift    { animation-delay: 1.15s; }
  .ha-play .al[data-layer="data"] .al-lift  { animation-delay: 1.7s; }
  .ha-play .al[data-layer="sw"] .al-lift    { animation-delay: 2.25s; }
  @keyframes ha-nudge { 0%, 100% { transform: none; } 45% { transform: translateY(-5px); } }

  /* 2.8–3.7 s: Applied AI gets a restrained teal glow; its symbol brightens once */
  .ha-play .al[data-layer="ai"] .al-top { animation: ha-ai .9s ease-in-out 2.8s both; }
  @keyframes ha-ai { 0%, 100% { filter: none; } 50% { filter: brightness(1.08) drop-shadow(0 0 10px rgba(14,159,148,.55)); } }
  .ha-play .al-pulse { animation: ha-ring 1.1s ease-out 2.9s both; }
  @keyframes ha-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }

  /* 3.7–5.0 s: one pulse travels along the connecting lines on the AI surface */
  .ha-play .ha-link { stroke-dasharray: .18 1; stroke-dashoffset: 1.18; animation: ha-travel 1.3s ease-in-out 3.7s both; }
  @keyframes ha-travel { 0% { stroke-dashoffset: 1.18; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

  /* later: an extremely subtle shimmer on the AI layer only */
  .ha-done .al[data-layer="ai"] .al-top { animation: none; }
  .ha-done.ha-shimmer .al[data-layer="ai"] .al-top { animation: ha-shim 1.4s ease-in-out both; }
  @keyframes ha-shim { 0%, 100% { filter: none; } 50% { filter: brightness(1.05) drop-shadow(0 0 6px rgba(14,159,148,.35)); } }
  .hero-art2.ha-paused * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .ha-play .al[data-layer] .al-side:not(.al-side--r) { animation: ha-side .7s ease-in-out both; }
  .ha-play .al[data-layer="cloud"] .al-side { animation-delay: .6s; }
  .ha-play .al[data-layer="db"] .al-side    { animation-delay: 1.15s; }
  .ha-play .al[data-layer="data"] .al-side  { animation-delay: 1.7s; }
  .ha-play .al[data-layer="sw"] .al-side    { animation-delay: 2.25s; }
  .ha-play .al[data-layer] .al-side--r { animation: ha-side-r .7s ease-in-out both; }
  .ha-play .al[data-layer="ai"] .al-side { animation: none; }
  @keyframes ha-side { 0%, 100% { filter: none; } 45% { filter: brightness(1.35); } }
  @keyframes ha-side-r { 0%, 100% { filter: brightness(.8); } 45% { filter: brightness(1.1); } }
}

/* Hero data flow: "Your data" in (bottom-left circle) → layers → "Insight" out (top-right circle) */
.ha-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ha-path { fill: none; stroke: #1F6FEB; stroke-width: 1.6; stroke-dasharray: 1.5 4; stroke-linecap: round; opacity: .45; vector-effect: non-scaling-stroke; }
.ha-path--out { stroke: #0E9F94; }
.ha-dot { fill: none; stroke: #1F6FEB; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .12 1; stroke-dashoffset: 1.12; opacity: 0; vector-effect: non-scaling-stroke; }
.ha-dot--out { stroke: #0E9F94; }
.ha-b { position: absolute; width: 7.2%; aspect-ratio: 1; border-radius: 28%; display: grid; place-items: center; background: #fff; color: #1F6FEB; box-shadow: 0 10px 22px -12px rgba(10,26,47,.45), 0 0 0 1px rgba(31,111,235,.14); }
.ha-b svg { width: 56%; height: 56%; }
.ha-s1 { left: 1.6%; top: 62.4%; } .ha-s2 { left: 1.6%; top: 73.4%; } .ha-s3 { left: 1.6%; top: 84.4%; }
.ha-out { left: 80.5%; top: 2.6%; width: 8.4%; color: #0E9F94; box-shadow: 0 10px 24px -12px rgba(14,159,148,.6), 0 0 0 1px rgba(14,159,148,.25); }
.ha-tag { position: absolute; font: 700 clamp(.58rem, .8vw, .72rem)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #5B6B80; white-space: nowrap; }
.ha-tag--in { left: 1.6%; top: 58.2%; }
.ha-tag--out { left: 79.5%; top: 11.3%; color: #0B7F76; }
@media (prefers-reduced-motion: no-preference) {
  .ha-anim .ha-src, .ha-anim .ha-tag--in { opacity: 0; transform: translateY(4px); }
  .ha-anim .ha-out, .ha-anim .ha-tag--out { opacity: 0; transform: scale(.7); }
  .ha-anim .ha-path { opacity: 0; }
  .ha-play .ha-src, .ha-play .ha-tag--in { animation: ha-pop .45s ease-out forwards; }
  .ha-play .ha-s1 { animation-delay: .2s; } .ha-play .ha-s2 { animation-delay: .3s; } .ha-play .ha-s3 { animation-delay: .4s; } .ha-play .ha-tag--in { animation-delay: .45s; }
  .ha-play .ha-path { animation: ha-fadein .5s ease-out .5s forwards; }
  .ha-play .ha-path--out { animation: ha-fadein .5s ease-out 4.2s forwards; }
  .ha-play .ha-dot { animation: ha-travel .8s ease-in .55s both; }
  .ha-play .ha-dot:nth-of-type(6) { animation-delay: .65s; } .ha-play .ha-dot:nth-of-type(7) { animation-delay: .75s; }
  .ha-play .ha-dot--out { animation: ha-travel 1s ease-in-out 4.3s both; }
  .ha-play .ha-out, .ha-play .ha-tag--out { animation: ha-pop .45s cubic-bezier(.2,.9,.3,1.3) 5.1s forwards; }
  @keyframes ha-pop { to { opacity: 1; transform: none; } }
  @keyframes ha-fadein { to { opacity: .45; } }
}
@media (max-width: 600px) { .ha-tag { font-size: .55rem; letter-spacing: .08em; } }
@media (prefers-reduced-motion: no-preference) {
  /* moving dots stay hidden until their moment */
  @keyframes ha-travel { 0% { stroke-dashoffset: 1.18; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
}
.ha-tag--in { left: .4%; top: 57.2%; }
.ha-flow .ha-dot { stroke-dashoffset: 1.12; }
/* layers stay stationary: illumination only (ChatGPT review, 8 Nov) */
.ha-play .al[data-layer] .al-lift { animation: none !important; }

/* Hero animation round 2 (ChatGPT review): clearer travelling highlight, simpler phone version */
.ha-tag--out { left: 84.7%; transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .ha-anim .ha-tag--out { transform: translateX(-50%) scale(.7); }
  @keyframes ha-pop-c { to { opacity: 1; transform: translateX(-50%); } }
  .ha-play .ha-tag--out { animation-name: ha-pop-c; }
  /* one light travelling upwards: each layer brightens clearly, overlapping the next */
  .ha-play .al[data-layer] .al-side:not(.al-side--r) { animation: ha-side .9s ease-in-out both; }
  .ha-play .al[data-layer] .al-side--r { animation: ha-side-r .9s ease-in-out both; }
  .ha-play .al[data-layer] .al-top { animation: ha-lit .9s ease-in-out both; }
  .ha-play .al[data-layer="cloud"] :is(.al-side, .al-top) { animation-delay: .6s; }
  .ha-play .al[data-layer="db"] :is(.al-side, .al-top)    { animation-delay: 1.1s; }
  .ha-play .al[data-layer="data"] :is(.al-side, .al-top)  { animation-delay: 1.6s; }
  .ha-play .al[data-layer="sw"] :is(.al-side, .al-top)    { animation-delay: 2.1s; }
  .ha-play .al[data-layer="ai"] .al-side { animation: none; }
  .ha-play .al[data-layer="ai"] .al-top { animation: ha-ai 1.2s ease-in-out 2.75s both; }
  @keyframes ha-side { 0%, 100% { filter: none; } 40% { filter: brightness(1.6) saturate(1.1); } }
  @keyframes ha-side-r { 0%, 100% { filter: brightness(.8); } 40% { filter: brightness(1.3); } }
  @keyframes ha-lit { 0%, 100% { filter: none; } 40% { filter: brightness(1.08) saturate(1.8) drop-shadow(0 0 8px color-mix(in srgb, var(--lc) 55%, transparent)); } }
  @keyframes ha-ai { 0%, 100% { filter: none; } 45% { filter: brightness(1.1) saturate(1.6) drop-shadow(0 0 18px rgba(14,159,148,.75)); } }
  .ha-done .al[data-layer="ai"] .al-top { animation: none; }
}
/* phones: fewer, larger details; smaller image so the buttons come sooner */
@media (max-width: 600px) {
  .hero--v2 .hero-art2 { max-width: 300px; }
  .hero-art2 .al-name { font-size: 22px !important; }
  .ha-s1, .ha-s3 { display: none; }
  .ha-flow .ha-path:nth-of-type(1), .ha-flow .ha-path:nth-of-type(3), .ha-flow .ha-dot:nth-of-type(5), .ha-flow .ha-dot:nth-of-type(7) { display: none; }
  .ha-s2 { width: 11%; left: -1%; top: 74%; }
  .ha-out { width: 11%; left: 79%; top: 0; }
  .ha-tag { font-size: .66rem !important; letter-spacing: .06em; }
  .ha-tag--in { left: -1%; top: 68%; }
  .ha-tag--out { left: 84.5%; top: 10.8%; }
}
@media (max-width: 600px) {
  .ha-tag { display: none !important; }
  .hero--v2 .hero-art2 { max-width: 280px; margin-bottom: -1.2rem; }
  .hero--v2 .hero-grid { gap: 1rem !important; }
}
@media (max-width: 600px) {
  .hero--v2 .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero--v2 .btn-row .btn { width: 100%; justify-content: center; padding-inline: .6rem; font-size: .95rem; white-space: nowrap; }
}
@media (max-width: 380px) { .hero--v2 h1 { font-size: 2.05rem !important; } .hero--v2 .lead { font-size: .97rem; } }

/* ==========================================================================
   NPP page: richer schematic dashboard (8 Nov) — no real figures, neutral names
   ========================================================================== */
.npp-ui.nd { display: grid; grid-template-columns: 44px minmax(0, 1fr); background: #F3F6FB; min-height: 0; font-family: var(--f-body); }
.nd-side { background: #0F1E2E; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .8rem 0; }
.nd-nav { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #7F93AE; }
.nd-nav svg { width: 15px; height: 15px; }
.nd-nav.on { background: #1F6FEB; color: #fff; }
.nd-main { padding: .75rem; display: grid; gap: .6rem; min-width: 0; }
.nd-filters { display: flex; align-items: center; gap: .35rem; }
.nd-chip { font: 600 .62rem/1 var(--f-body); color: #4A5B72; background: #fff; border: 1px solid #E1E8F2; border-radius: 999px; padding: .32rem .55rem; white-space: nowrap; }
.nd-chip.on { background: #1F6FEB; border-color: #1F6FEB; color: #fff; }
.nd-search { margin-left: auto; width: 22%; height: 20px; border-radius: 999px; background: #fff; border: 1px solid #E1E8F2; }
.nd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.nd-tile { background: #fff; border-radius: 10px; padding: .5rem .55rem .35rem; box-shadow: 0 1px 0 rgba(10,26,47,.04); display: grid; gap: .22rem; min-width: 0; }
.nd-tile-h { display: flex; align-items: center; justify-content: space-between; }
.nd-tile-h b { font: 800 .78rem/1 var(--f-display); color: #0F1E2E; letter-spacing: .02em; }
.nd-tile small { font-size: .55rem; color: #7A8AA0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.nd-dot--ok { background: #1E9E6A; } .nd-dot--warn { background: #E39B2E; } .nd-dot--bad { background: #D64545; }
.nd-meter { height: 5px; border-radius: 3px; background: #EDF2F8; overflow: hidden; }
.nd-meter span { display: block; height: 100%; border-radius: 3px; }
.nd-spark { width: 100%; height: 16px; display: block; }
.nd-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .45rem; }
.nd-card { background: #fff; border-radius: 10px; padding: .55rem .6rem; box-shadow: 0 1px 0 rgba(10,26,47,.04); min-width: 0; }
.nd-card-h { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.nd-card-h b { font: 700 .66rem/1.1 var(--f-display); color: #0F1E2E; }
.nd-legend { font-size: .52rem; color: #7A8AA0; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.nd-legend i { width: 10px; height: 2.5px; border-radius: 2px; background: #1F6FEB; display: inline-block; }
.nd-legend i.ly { background: #9FB2CA; margin-left: .3rem; }
.nd-line { width: 100%; height: 84px; display: block; }
.nd-axis { display: flex; justify-content: space-between; font: 500 .5rem/1 var(--f-mono); color: #9AA9BC; margin-top: .2rem; }
.nd-causes { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.nd-causes li { display: grid; gap: .14rem; }
.nd-causes span { font-size: .55rem; color: #4A5B72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-causes i { height: 6px; border-radius: 3px; background: #EDF2F8; overflow: hidden; display: block; }
.nd-causes b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1550B8, #1F6FEB); }
.nd-causes li:nth-child(n+3) b { background: linear-gradient(90deg, #6E98E6, #9DBBF2); }
.nd-table { width: 100%; border-collapse: collapse; font-size: .58rem; color: #33445C; table-layout: fixed; }
.nd-table th { text-align: left; font: 700 .5rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #8A99AE; padding: 0 .3rem .35rem; }
.nd-table td { padding: .32rem .3rem; border-top: 1px solid #EEF2F7; vertical-align: middle; white-space: nowrap; overflow: hidden; }
.nd-table td b { color: #0F1E2E; font-weight: 650; }
.nd-table th:nth-child(1) { width: 26%; } .nd-table th:nth-child(2) { width: 16%; } .nd-table th:nth-child(3) { width: 24%; } .nd-table th:nth-child(4) { width: 18%; }
.nd-bar { display: block; height: 6px; border-radius: 3px; background: #EDF2F8; overflow: hidden; }
.nd-bar b { display: block; height: 100%; background: #1F6FEB; border-radius: 3px; }
.nd-table .nd-spark { height: 12px; }
.nd-pill { font: 700 .5rem/1 var(--f-body); padding: .22rem .42rem; border-radius: 999px; }
.nd-pill--ok { background: #E3F5EC; color: #146C43; } .nd-pill--warn { background: #FFF1DC; color: #9A5B00; } .nd-pill--bad { background: #FDE6E6; color: #B42323; }
.nd-link { font: 600 .55rem/1 var(--f-body); color: #1F6FEB; }
@media (max-width: 560px) {
  .npp-ui.nd { grid-template-columns: 1fr; }
  .nd-side, .nd-search, .nd-card--causes, .nd-table .nd-c, .nd-table .nd-t { display: none; }
  .nd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nd-row { grid-template-columns: 1fr; }
  .nd-table th:nth-child(1) { width: 38%; } .nd-table th:nth-child(3) { width: 34%; }
}
.npp-ui.nd { aspect-ratio: auto !important; overflow: visible; }
.np-shot .w2-frame { display: flex; flex-direction: column; }
.np-shot .w2-note { position: static; display: block; text-align: right; padding: .1rem .8rem .55rem; background: #F3F6FB; }
@media (max-width: 560px) { .npp-ui.nd { grid-template-columns: 1fr !important; } }

/* Industry illustrations: words in the circle and the small card (Jana 8 Nov) */
.pt-circle { display: grid; place-items: center; }
.pt-circle-txt { display: grid; justify-items: center; gap: .15rem; text-align: center; color: #fff; padding: 0 12%; text-shadow: 0 2px 10px color-mix(in srgb, var(--pc) 70%, #000); position: relative; z-index: 1; transform: translate(6%, -4%); }
.pt-circle-txt b { font: 800 clamp(1.25rem, 2.4vw, 2rem)/1 var(--f-display); letter-spacing: -.02em; }
.pt-circle-txt small { font: 650 clamp(.62rem, .95vw, .8rem)/1.15 var(--f-body); opacity: .95; }
.pt-card-txt { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.pt-card-txt b { font: 700 clamp(.72rem, 1vw, .88rem)/1.15 var(--f-display); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-card-txt small { font-size: clamp(.6rem, .85vw, .74rem); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-card { width: 46%; }
.pt-circle-txt { transform: translate(16%, -6%); padding: 0 8%; }
.pt-circle-txt b { font-size: clamp(1.1rem, 2.1vw, 1.75rem); }
.pt-card { width: 54%; right: -2%; gap: .6rem; padding: .7rem .8rem; }
.pt-card-txt b, .pt-card-txt small { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 760px) {
  .pt-card { width: 60%; right: -4%; padding: .55rem .6rem; gap: .45rem; border-radius: 12px; }
  .pt-card-ico { width: 26px; height: 26px; border-radius: 8px; } .pt-card-ico svg { width: 14px; height: 14px; }
  .pt-card-txt b { font-size: .7rem; } .pt-card-txt small { font-size: .6rem; }
  .pt-circle-txt b { font-size: 1.05rem; } .pt-circle-txt small { font-size: .55rem; }
}
@media (max-width: 760px) { .pt-card { bottom: 6%; } }
.pt-circle-txt b { max-width: 6ch; line-height: .95; }
.pt-circle-txt small { max-width: 10ch; }