/* ═══════════════════════════════════════════════════════════
   SERVICE PAGE DESIGN VARIANTS
   d1 → software-engineering.html   (bento + pipeline flow)
   d2 → embedded-engineering.html   (numbered list + vertical tabs)
   d3 → industrial-automation.html  (slider + numbered grid + hover cards)
   Uses tokens from style.css (--navy, --teal, fonts, radius, shadows)
═══════════════════════════════════════════════════════════ */

.sd-sec { padding: 50px 64px; border-top: 1px solid var(--border-soft); background: var(--white); position: relative; overflow: hidden; }
.sd-sec.alt { background: var(--off-white); }
.sd-inner { width: 90%; margin: 0 auto; }
.sd-head { max-width: 860px; margin-bottom: 44px; }
.sd-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sd-head .sec-body { max-width: 640px; }
.sd-head.center .sec-body { margin: 0 auto; }
.sd-lead { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 46px); font-weight: 300; letter-spacing: -1px; line-height: 1.2; color: var(--navy); margin-bottom: 20px; }
.sd-lead strong { font-weight: 700; }
.sd-text { font-size: 16px; line-height: 1.8; color: var(--text-body); margin-bottom: 16px; }
.sd-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-dim); display: grid; place-items: center; flex-shrink: 0; transition: .3s; }
.sd-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 100px; background: var(--teal); color: var(--navy); font-weight: 700; font-size: 14px; text-decoration: none; transition: .3s; }
.sd-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* dark band shared (video bg) */
.sd-dark { position: relative; padding: 70px 64px; background: var(--navy); color: #fff; overflow: hidden; }
.sd-dark video, .sd-dark .sd-dark-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.sd-dark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,33,68,.92), rgba(17,42,82,.7)); }
.sd-dark .sd-inner { position: relative; z-index: 2; }
.sd-dark .sec-h2 { color: #fff; }
.sd-dark .sec-h2 strong { color: var(--teal); }


/* ───────────── DESIGN 1 · SOFTWARE ENGINEERING ───────────── */
.d1-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: stretch; }
.d1-intro-media { display: flex; }
.d1-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.d1-check { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--off-white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--text-body); line-height: 1.5; transition: .3s; }
.d1-check:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.d1-check svg { color: var(--teal-dim); flex-shrink: 0; margin-top: 2px; }
.d1-img { position: relative; width: 100%; min-height: 340px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: center/cover; }
.d1-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,20,48,.5), transparent 50%); }
.d1-img-badge { position: absolute; z-index: 2; left: 20px; bottom: 20px; background: rgba(255,255,255,.95); padding: 12px 18px; border-radius: 100px; font-size: 13px; font-weight: 700; color: var(--navy); }
.d1-fs-head { max-width: none; margin-bottom: 28px; }
.d1-fs-head .sec-h2 strong { display: block; color: var(--teal); }
.d1-two { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); }
.d1-two p { color: var(--text-on-dark); font-size: 16px; line-height: 1.8; max-width: none; margin: 0; }
.d1-bento { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.d1-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 30px; transition: .35s; position: relative; overflow: hidden; }
.d1-card::before { display: none; content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--teal), transparent); transition: .45s; }
.d1-card:hover::before { width: 100%; }
.d1-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.d1-card:hover .sd-ico { background: var(--teal); color: var(--navy); }
.d1-card h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 700; color: var(--navy); margin: 16px 0 8px; letter-spacing: -.4px; }
.d1-card p { font-size: 15px; line-height: 1.75; color: var(--text-body); }
.d1-card.big { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border: 0; background: radial-gradient(circle at 85% 12%, rgba(0,228,173,.28), transparent 45%), linear-gradient(155deg, var(--navy), var(--navy-3)); }
.d1-card.big::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: linear-gradient(135deg, #000, transparent 65%); mask-image: linear-gradient(135deg, #000, transparent 65%); pointer-events: none; }
.d1-card.big > :not(.num) { position: relative; z-index: 1; }
.d1-card.big > div:first-of-type { margin-bottom: 24px; }
.d1-card.big h3 { color: #fff; font-size: 30px; margin-top: 0; }
.d1-card.big p { color: var(--text-on-dark); font-size: 17px; line-height: 1.8; }
.d1-card.big .sd-ico { width: 60px; height: 60px; background: rgba(0,228,173,.15); color: var(--teal); border: 1px solid rgba(0,228,173,.35); }
.d1-card.big:hover .sd-ico { background: var(--teal); color: var(--navy); }
.d1-card.big .num { font-size: 86px; color: rgba(0,228,173,.14); right: 28px; top: 14px; }
.d1-card .num { position: absolute; right: 24px; top: 18px; font-family: var(--font-serif); font-size: 54px; font-weight: 800; color: var(--teal-soft); line-height: 1; }
.d1-flow { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.d1-pipe { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 28px 0 0; width: 100%; }
.d1-pipe span { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 8px; border-radius: var(--radius-md); background: var(--off-white); border: 1px solid var(--border); font-size: clamp(10px, 1.05vw, 13px); font-weight: 700; color: var(--text-body); line-height: 1.3; overflow-wrap: anywhere; transition: .3s; }
.d1-pipe span:hover { border-color: var(--teal); background: var(--teal-soft); }
.d1-pipe i { flex: 0 0 14px; align-self: center; height: 2px; background: var(--teal); display: block; }
.d1-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.d1-duo .d1-card { padding: 28px; }
.d1-duo .sd-ico { background: var(--navy); color: var(--teal); }
.d1-duo .d1-card:hover .sd-ico { background: var(--teal); color: var(--navy); }

/* ───────────── DESIGN 2 · EMBEDDED ENGINEERING ───────────── */
.d2-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.d2-img { border-radius: var(--radius-xl); overflow: hidden; position: relative; aspect-ratio: 1/1; background: center/cover; box-shadow: var(--shadow-xl); }
.d2-img::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(0,228,173,.55); border-radius: 20px; z-index: 2; pointer-events: none; }
.d2-steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: s; }
.d2-steps li { counter-increment: s; display: flex; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; color: var(--text-body); }
.d2-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-serif); font-size: 28px; font-weight: 300; color: var(--teal-dim); min-width: 46px; }
.d2-statement { text-align: center; max-width: 900px; margin: 0 auto; }
.d2-statement .sec-h2-light { font-size: clamp(32px, 4vw, 46px); }
.d2-statement p { color: var(--text-on-dark); font-size: 17px; line-height: 1.85; margin-top: 18px; }
.d2-tabs { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: stretch; }
.d2-tablist { display: flex; flex-direction: column; gap: 8px; }
.d2-tab { text-align: left; border: 1px solid var(--border); background: #fff; padding: 18px 20px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-body); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: .3s; }
.d2-tab small { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--light-muted); }
.d2-tab:hover { border-color: var(--teal); }
.d2-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateX(8px); box-shadow: var(--shadow-md); }
.d2-tab.active small { color: var(--teal); }
.d2-panel { background: linear-gradient(155deg, var(--navy), var(--navy-3)); border-radius: var(--radius-xl); padding: 48px; color: #fff; display: none; flex-direction: column; justify-content: center; position: relative; overflow: hidden; animation: d2in .45s ease; }
.d2-panel.active { display: flex; }
.d2-panel::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(0,228,173,.28), transparent 70%); }
.d2-panel .sd-ico { background: rgba(0,228,173,.15); color: var(--teal); margin-bottom: 24px; width: 60px; height: 60px; }
.d2-panel h3 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; letter-spacing: -.6px; margin-bottom: 14px; position: relative; z-index: 2; }
.d2-panel p { font-size: 17px; line-height: 1.85; color: var(--text-on-dark); max-width: 560px; position: relative; z-index: 2; }
@keyframes d2in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ───────────── DESIGN 3 · INDUSTRIAL AUTOMATION ───────────── */
.d3-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.d3-img { border-radius: var(--radius-xl); aspect-ratio: 16/11; background: center/cover; position: relative; overflow: hidden; box-shadow: var(--shadow-xl); }
.d3-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 55%, rgba(0,228,173,.25)); }
.d3-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.d3-bar .sd-head { margin-bottom: 0; }
.d3-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.d3-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: .3s; }
.d3-arrow:hover { background: var(--teal); border-color: var(--teal); }
.d3-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 24px; }
.d3-track::-webkit-scrollbar { display: none; }
/* desktop drag-to-scroll (slider-drag.js) */
@media (hover: hover) and (pointer: fine) { .d3-track { cursor: grab; } }
.d3-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.d3-slide { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 30px; position: relative; transition: .35s; min-height: 200px; }
.d3-slide:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.d3-slide:hover .sd-ico { background: var(--teal); color: var(--navy); }
.d3-slide .idx { position: absolute; right: 26px; top: 22px; font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--light-muted); }
.d3-slide h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--navy); margin: 24px 0 12px; letter-spacing: -.3px; line-height: 1.3; }
.d3-slide p { font-size: 15px; line-height: 1.75; color: var(--text-body); }
.d3-progress { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; }
.d3-progress i { display: block; height: 100%; width: 33%; background: var(--teal); border-radius: 3px; transition: .2s; }
.d3-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); overflow: hidden; }
.d3-why div { padding: 36px 28px; border-right: 1px solid rgba(255,255,255,.14); transition: .3s; }
.d3-why div:last-child { border-right: 0; }
.d3-why div:hover { background: rgba(0,228,173,.08); }
.d3-why b { display: block; font-family: var(--font-serif); font-size: 44px; font-weight: 200; color: var(--teal); line-height: 1; margin-bottom: 20px; }
.d3-why p { font-size: 16px; line-height: 1.7; color: var(--text-on-dark); font-weight: var(--fw-body); }
.d3-explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.d3-ex { position: relative; border-radius: var(--radius-lg); padding: 36px 32px 90px; background: var(--off-white); border: 1px solid var(--border-soft); overflow: hidden; transition: .4s; min-height: 280px; }
.d3-ex::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(155deg, var(--navy), var(--navy-3)); transition: .45s; z-index: 0; }
.d3-ex:hover::before { height: 100%; }
.d3-ex > * { position: relative; z-index: 1; transition: .35s; }
.d3-ex h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--navy); margin: 22px 0 12px; letter-spacing: -.4px; }
.d3-ex p { font-size: 15px; line-height: 1.75; color: var(--text-body); }
.d3-ex:hover h3 { color: #fff; }
.d3-ex:hover p { color: var(--text-on-dark); }
.d3-ex:hover .sd-ico { background: var(--teal); color: var(--navy); }
.d3-ex .go { position: absolute; left: 32px; bottom: 30px; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: var(--navy); display: grid; place-items: center; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 1024px) {
  .sd-sec, .sd-dark { padding: 50px 32px; }
  .d1-intro, .d1-flow, .d2-intro, .d3-intro { grid-template-columns: 1fr; gap: 40px; }
  .d1-img { min-height: 0; aspect-ratio: 16/10; }
  .d1-pipe span { font-size: clamp(10px, 1.6vw, 13px); }
  .d2-tabs { grid-template-columns: 1fr; }
  .d2-tablist { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .d2-tab { white-space: nowrap; }
  .d2-tab.active { transform: none; }
  .d3-slide { flex-basis: calc((100% - 22px) / 2); }
  .d3-why { grid-template-columns: 1fr 1fr; }
  .d3-why div:nth-child(2) { border-right: 0; }
  .d3-why div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .d3-explore { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sd-sec, .sd-dark { padding: 40px 20px; }
  .sd-inner { width: 100%; }
  .d1-checks, .d1-bento, .d1-duo { grid-template-columns: 1fr; }
  .d1-card.big { grid-row: auto; padding: 28px; }
  .d1-card.big h3 { font-size: 24px; }
  .d1-pipe span { font-size: clamp(9px, 2.6vw, 12px); padding: 10px 4px; }
  .d1-pipe i { flex-basis: 8px; }
  .d2-panel { padding: 30px 24px; }
  .d3-bar { flex-direction: column; align-items: flex-start; }
  .d3-slide { flex-basis: 85%; }
  .d3-why { grid-template-columns: 1fr; }
  .d3-why div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .d3-why div:last-child { border-bottom: 0; }
}

/* ═══════════ SOFTWARE ENGINEERING · visual polish (scoped to .sd-d1) ═══════════ */
.sd-d1 .sd-sec { padding: 48px 0; }
.sd-d1 .sd-dark { padding: 56px 0; }
/* .sd-d1 .sd-head { margin-bottom: 32px; } */

/* section headings: short teal accent bar, same language as .eyebrow */
.sd-d1 .sd-head::before { content: ''; display: none; width: 44px; height: 3px; border-radius: 2px; background: var(--teal); margin-bottom: 16px; }
.sd-d1 .sd-lead::before { content: ''; display: none; width: 44px; height: 3px; border-radius: 2px; background: var(--teal); margin-bottom: 16px; }

/* icon tiles: site-wide blue gradient tile with white glyph (matches .svc-icon-wrap) */
.sd-d1 .sd-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--gradient-blue); color: #fff; box-shadow: 0 8px 18px rgba(51,129,255,.28); }
.sd-d1 .d1-card:hover .sd-ico, .sd-d1 .d1-duo .d1-card:hover .sd-ico { background: var(--gradient-blue); 
  color: #fff; 
  /* transform: scale(1.08) rotate(-4deg);  */
}
.sd-d1 .d1-duo .sd-ico { background: var(--gradient-blue); color: #fff; }
.sd-d1 .d1-card.big .sd-ico { background: var(--teal); color: var(--navy); border: 0; box-shadow: 0 8px 22px rgba(0,228,173,.35); }
.sd-d1 .d1-card.big:hover .sd-ico { background: var(--teal); color: var(--navy); }

/* cards: site border + soft blue elevation */
.sd-d1 .d1-card, .sd-d1 .d1-check { border-color: #d9e6f7; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.07); }
.sd-d1 .d1-card:hover { border-color: #d9e6f7; box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.2); }
.sd-d1 .d1-card.big { box-shadow: 0 20px 44px rgba(12,33,68,.25); }
.sd-d1 .d1-check { background: #fff; border-left: 3px solid var(--teal); }
.sd-d1 .d1-check:hover { border-color: #d9e6f7; border-left-color: var(--teal); }

/* intro: offset teal frame + glow behind the image */
.sd-d1 .d1-intro-media { position: relative; }
.sd-d1 .d1-intro-media::before { content: ''; position: absolute; inset: 16px -14px -14px 16px; border: 2px solid rgb(12, 33, 68); border-radius: var(--radius-xl); z-index: 0; }
.sd-d1 .d1-intro-media::after { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(51,129,255,.22), transparent 70%); z-index: 0; pointer-events: none; }
.sd-d1 .d1-img { z-index: 1; }

/* section backgrounds: soft blue wash + dot texture instead of flat grey */
.sd-d1 .sd-sec.alt { background: radial-gradient(rgba(51,129,255,.09) 1.2px, transparent 1.4px) 0 0/22px 22px, linear-gradient(180deg, #F2F7FE, #FAFCFF); }

/* full stack band: glow + teal edge lines */
.sd-d1 .sd-dark::before { display: none; content: ''; position: absolute; z-index: 1; left: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,228,173,.22), transparent 70%); pointer-events: none; }
.sd-d1 .d1-fs-head .sec-h2 { margin-bottom: 0; }

/* devops: pipeline chips with teal step markers */
.sd-d1 .d1-pipe span { background: linear-gradient(180deg, #fff, #F2F7FE); border-color: #d9e6f7; box-shadow: 0 6px 14px rgba(82,148,232,.1); }
.sd-d1 .d1-pipe i { background: linear-gradient(90deg, var(--teal), var(--teal-dim)); }
.sd-d1 .d1-pipe span:hover { transform: translateY(-3px); }

@media (max-width: 1024px) {
  .sd-d1 .d1-intro-media::before { inset: 12px -8px -8px 12px; }
}
@media (max-width: 680px) {
  .sd-d1 .sd-sec { padding: 40px 0; }
  .sd-d1 .sd-dark { padding: 44px 0; }
  .sd-d1 .d1-intro-media::before { display: none; }
}

/* Software Engineering · container matches hero (95% wide, 100px side padding; 25px ≤768px) */
.sd-d1 .sd-inner { width: 100%; max-width: 95%; padding: 0 100px; box-sizing: border-box; }
@media (max-width: 768px) {
  .sd-d1 .sd-inner { max-width: 100%; padding: 0 25px; }
}

/* ═══════════ SOFTWARE ENGINEERING · solutions timeline ═══════════ */
.sd-d1 .d1-tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sd-d1 .d1-tl-item { position: relative; padding-right: 36px; }
.sd-d1 .d1-tl-item h3 { font-family: var(--font-serif); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; color: var(--navy); letter-spacing: -.4px; line-height: 1.25; margin: 0 0 20px; min-height: 1.25em; }
.sd-d1 .d1-tl-node { position: relative; height: 56px; display: flex; align-items: center; }
.sd-d1 .d1-tl-node::before { content: ''; position: absolute; left: 28px; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(155deg, #3381FF, #002C72); }
.sd-d1 .d1-tl-item:last-child .d1-tl-node::before { background: linear-gradient(155deg, #3381FF, #002C72); }
.sd-d1 .d1-tl-node .dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gradient-blue); 
  /* box-shadow: 0 0 0 6px rgba(0,228,173,.18), 0 10px 22px rgba(51,129,255,.35);  */
  transition: .4s; }
.sd-d1 .d1-tl-item:hover .dot { transform: scale(1.1); background: var(--teal); color: var(--navy); box-shadow: 0 0 0 8px rgba(0,228,173,.25), 0 12px 26px rgba(0,228,173,.4); }
.sd-d1 .d1-tl-card { position: relative; margin-top: 22px; padding: 24px 24px 26px; background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.08); transition: .35s; overflow: hidden; }
.sd-d1 .d1-tl-card::before { display: none; content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--teal), #3381FF); transform: scaleX(.18); transform-origin: left; transition: .45s; }
.sd-d1 .d1-tl-item:hover .d1-tl-card { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.2); }
.sd-d1 .d1-tl-item:hover .d1-tl-card::before { transform: scaleX(1); }
.sd-d1 .d1-tl-card .n { display: none; position: absolute; right: 18px; top: 8px; font-family: var(--font-serif); font-size: 56px; font-weight: 800; line-height: 1; color: rgba(51,129,255,.08); }
.sd-d1 .d1-tl-card p { position: relative; margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--text-body); }

@media (max-width: 900px) {
  .sd-d1 .d1-tl { grid-template-columns: 1fr; gap: 26px; }
  .sd-d1 .d1-tl-item { padding: 0 0 0 76px; }
  .sd-d1 .d1-tl-item h3 { margin: 0; min-height: 56px; display: flex; align-items: center; }
  .sd-d1 .d1-tl-node { position: absolute; left: 0; top: 0; bottom: 0; height: auto; display: block; width: 56px; }
  .sd-d1 .d1-tl-node::before { left: 50%; right: auto; top: 56px; bottom: -26px; width: 3px; height: auto; transform: translateX(-50%); background: var(--gradient-blue); }
  .sd-d1 .d1-tl-item:last-child .d1-tl-node::before { bottom: 0; background: var(--gradient-blue); }
  .sd-d1 .d1-tl-card { margin-top: 12px; }
}

/* solutions timeline · equal card heights */
.sd-d1 .d1-tl { align-items: stretch; }
.sd-d1 .d1-tl-item { display: flex; flex-direction: column; }
.sd-d1 .d1-tl-card { flex: 1; }

/* intro check cards · same language as site cards (.svc-card) */
.sd-d1 .d1-check { align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid #d9e6f7; border-left: 1px solid #d9e6f7; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.07); font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--text-body); transition: all .3s cubic-bezier(.16,1,.3,1); }
.sd-d1 .d1-check svg { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; margin: 0; flex-shrink: 0; border-radius: 10px; background: var(--gradient-blue); color: #fff; box-shadow: 0 6px 14px rgba(51,129,255,.28); transition: .3s; }
.sd-d1 .d1-check:hover { transform: translateY(-4px); border-color: #d9e6f7; border-left-color: #d9e6f7; box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.2); }
.sd-d1 .d1-check:hover svg { color: var(--white); }

/* ═══════════ SOFTWARE ENGINEERING · unified type scale ═══════════
   body copy + card body → 16px / 1.75 / 400 / --muted (Plus Jakarta Sans)
   card titles           → 20px Montserrat 700 navy
   dark-band body        → same size, light tint                      */
.sd-d1 .sd-text,
.sd-d1 .d1-two p,
.sd-d1 .d1-tl-card p,
.sd-d1 .d1-card p,
.sd-d1 .d1-card.big p { font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; letter-spacing: 0; }
.sd-d1 .sd-text,
.sd-d1 .d1-tl-card p,
.sd-d1 .d1-card p { color: var(--text-body); }
.sd-d1 .d1-two p { color: var(--text-on-dark); }
.sd-d1 .d1-card.big p { color: var(--text-on-dark); }
.sd-d1 .d1-tl-item h3,
.sd-d1 .d1-card h3,
.sd-d1 .d1-card.big h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; color: var(--navy); }
.sd-d1 .d1-card.big h3 { color: #fff; }
.sd-d1 .d1-check { font-size: 15px; font-weight: 600; line-height: 1.5; }
.sd-d1 .d1-pipe span { font-family: var(--font-sans); font-weight: 400; }

/* Section-level polish for any section that opts in with class "sd-d1" (e.g. Industrial · Explore More) */
.sd-sec.sd-d1 { padding: 50px 0 60px; }
.sd-sec.alt.sd-d1 { background: radial-gradient(rgba(51,129,255,.09) 1.2px, transparent 1.4px) 0 0/22px 22px, linear-gradient(180deg, #F2F7FE, #FAFCFF); }
@media (max-width: 680px) { .sd-sec.sd-d1 { padding: 40px 0; } }

/* ═══════════ INDUSTRIAL AUTOMATION · intro image follows content height ═══════════ */
.d3-intro { align-items: stretch; }
.d3-intro-media { display: flex; }
.d3-img { width: 100%; aspect-ratio: auto; min-height: 340px; }
@media (max-width: 1024px) {
  .d3-img { min-height: 0; aspect-ratio: 16/10; }
}

/* ═══════════ INDUSTRIAL AUTOMATION · key features slider, site-theme colours ═══════════ */
.sd-d1 .d3-slide { background: #fff; border: 1px solid #d9e6f7; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.08); overflow: hidden; }
.sd-d1 .d3-slide::before { display: none; content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--teal), #3381FF); transform: scaleX(.18); transform-origin: left; transition: .45s; }
.sd-d1 .d3-slide:hover { border-color: #d9e6f7; box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.2); }
.sd-d1 .d3-slide:hover::before { transform: scaleX(1); }
.sd-d1 .d3-slide .sd-ico { background: var(--gradient-blue); color: #fff; }
.sd-d1 .d3-slide:hover .sd-ico { background: var(--gradient-blue); color: #fff; }
.sd-d1 .d3-slide .idx { display: none; font-size: 56px; font-weight: 800; line-height: 1; top: 10px; right: 20px; color: rgba(51,129,255,.08); }
.sd-d1 .d3-slide h3 { font-size: 20px; letter-spacing: -.4px; color: var(--navy); }
.sd-d1 .d3-slide p { font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.sd-d1 .d3-arrow { border-color: #d9e6f7; color: var(--navy); box-shadow: 0 6px 14px rgba(82,148,232,.12); }
.sd-d1 .d3-arrow:hover { background: var(--gradient-blue); border-color: transparent; color: #fff; }
.sd-d1 .d3-progress { background: #dbe6f7; }
.sd-d1 .d3-progress i { background: linear-gradient(155deg, #3381FF, #002C72); }

/* Industrial · key features: arrows sit on the heading row, right aligned */
.d3-bar { align-items: center; }
.d3-bar .sd-head { flex: 1 1 auto; min-width: 0; }
.d3-bar .d3-arrows { margin-left: auto; }
@media (max-width: 680px) { .d3-bar { align-items: flex-start; } .d3-bar .d3-arrows { margin-left: 0; } }

/* Industrial · key features cards: icon tile top-right, text wraps around it */
.d3-slide .sd-ico { float: right; margin: 0 0 10px 16px; }
.d3-slide h3 { margin-top: 0; }

/* Industrial · Explore More: node icons only scale on hover (no colour change, no shadow) */
.sd-sec.sd-d1 .d1-tl-item:hover .dot { background: var(--gradient-blue); color: #fff; box-shadow: none; transform: scale(1.1); }
.sd-sec.sd-d1 .d1-tl-node .dot { transition: transform .5s cubic-bezier(.22, 1, .36, 1); will-change: transform; }

/* check cards (software + embedded intro) · text styled exactly like paragraph text */
.d1-check, .sd-d1 .d1-check { font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; letter-spacing: 0; color: var(--text-body); }
.sd-d1 .d1-check { align-items: flex-start; }
.sd-d1 .d1-check svg { margin-top: 0; }

/* ═══════════ EMBEDDED ENGINEERING · solutions accordion (base theme) ═══════════ */
.d2-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.d2-col { display: flex; flex-direction: column; gap: 12px; }
.d2-item { background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.07); transition: box-shadow .3s ease, border-color .3s ease; }
.d2-item:hover { box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.16); }
.d2-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--font-serif); color: var(--navy); transition: background .3s ease, color .3s ease; }
.d2-head .sd-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-blue); color: #fff; box-shadow: 0 6px 14px rgba(51,129,255,.28); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.d2-head .sd-ico svg { width: 20px; height: 20px; }
.d2-item:hover .d2-head .sd-ico { transform: scale(1.08); }
.d2-head .t { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.d2-head .chev { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: rgba(51,129,255,.12); color: var(--navy); transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease; }
.d2-item.active .d2-head { background: linear-gradient(155deg, var(--navy), var(--navy-3)); color: #fff; }
.d2-item.active .d2-head .chev { transform: rotate(180deg); background: rgba(255,255,255,.18); color: #fff; }
.d2-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); background: #F2F7FE; }
.d2-item.active .d2-body { grid-template-rows: 1fr; }
.d2-body .in { overflow: hidden; }
.d2-body p { background: #fff; margin: 0; padding: 20px 24px 22px 24px; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.d2-head:focus-visible { outline: 2px solid #3381FF; outline-offset: -2px; }
@media (max-width: 900px) { .d2-acc { grid-template-columns: 1fr; } .d2-col { display: contents; } .d2-item { order: var(--o); } }
@media (max-width: 680px) {
  .d2-head { padding: 12px 16px 12px 12px; gap: 12px; }
  .d2-head .t { font-size: 17px; }
  .d2-body p { padding: 16px 18px 18px; }
}
.d2-acc.measuring .d2-body, .d2-acc.measuring .d2-head, .d2-acc.measuring .d2-head .chev { transition: none !important; }

/* ═══════════ INTERNET OF THINGS · service portfolio (svc-card style from the base theme) ═══════════ */
.iot-portfolio { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.iot-portfolio .svc-card { cursor: default; padding: 34px 30px; }
.iot-portfolio .svc-title { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; letter-spacing: -.4px; }
.iot-portfolio .svc-desc { font-family: var(--font-sans); font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); margin-bottom: 0; }
@media (max-width: 1024px) { .iot-portfolio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .iot-portfolio { grid-template-columns: 1fr; } }

/* ═══════════ CONNECTED APPS · solutions vertical tabs (base theme, compact) ═══════════ */
.ca-tabs { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 18px; align-items: stretch; }
.ca-list { display: flex; flex-direction: column; gap: 8px; }
.ca-tab { flex: 1; display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 16px; background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 8px 18px rgba(82,148,232,.06); font-family: var(--font-serif); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.2px; color: var(--navy); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, transform .3s; }
.ca-tab small { font-size: 13px; font-weight: 700; color: #3381FF; min-width: 22px; transition: color .3s; }
.ca-tab:hover { box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 12px 24px rgba(82,148,232,.16); }
.ca-tab.active { background: linear-gradient(155deg, var(--navy), var(--navy-3)); border-color: var(--navy); color: #fff; transform: translateX(6px); }
.ca-tab.active small { color: #fff; opacity: .7; }
.ca-tab:focus-visible { outline: 2px solid #3381FF; outline-offset: 2px; }
.ca-stage { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); padding: 30px 34px 22px; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.08); }
.ca-panel { display: none; flex: 1; flex-direction: column; justify-content: center; animation: caIn .4s ease; }
.ca-panel.active { display: flex; }
.ca-panel .sd-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-blue); color: #fff; box-shadow: 0 8px 18px rgba(51,129,255,.28); margin-bottom: 18px; }
.ca-panel h3 { margin: 0 0 12px; font-family: var(--font-serif); font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; color: var(--navy); }
.ca-panel p { margin: 0; font-family: var(--font-sans); font-size: 18px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.ca-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid #d9e6f7; }
.ca-count { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--light-muted); }
.ca-count b { font-size: 20px; color: var(--navy); }
.ca-arrows { display: flex; gap: 8px; }
.ca-arrows .d3-arrow { width: 42px; height: 42px; border-color: #d9e6f7; box-shadow: 0 6px 14px rgba(82,148,232,.12); }
.ca-arrows .d3-arrow:hover { background: var(--gradient-blue); border-color: transparent; color: #fff; }
@keyframes caIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .ca-tabs { grid-template-columns: minmax(250px, 38%) 1fr; } .ca-tab { font-size: 15px; padding: 10px 14px; } .ca-stage { padding: 26px 26px 20px; } }
@media (max-width: 900px) {
  .ca-tabs { grid-template-columns: 1fr; gap: 12px; }
  .ca-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: 8px; padding: 2px 2px 6px; margin: 0 -2px; }
  .ca-list::-webkit-scrollbar { display: none; }
  .ca-tab { flex: 0 0 210px; scroll-snap-align: start; align-items: flex-start; white-space: normal; font-size: 14.5px; padding: 12px 14px; }
  .ca-tab.active { transform: none; }
  .ca-stage { padding: 22px 20px 16px; }
  .ca-panel { justify-content: flex-start; }
  .ca-panel .sd-ico { width: 48px; height: 48px; margin-bottom: 14px; }
  .ca-panel h3 { font-size: 21px; }
  .ca-panel p { font-size: 16px; line-height: 1.7; }
  .ca-nav { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 480px) {
  .ca-tab { flex-basis: 170px; font-size: 14px; }
  .ca-stage { padding: 18px 16px 14px; }
  .ca-panel h3 { font-size: 19px; }
}

/* Connected Apps · mobile: panels become a swipe slider, tab row hidden, intro image hidden */
.ca-track { display: contents; }
@media (max-width: 680px) {
  .ca-list { display: none; }
  .ca-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -4px; }
  .ca-track::-webkit-scrollbar { display: none; }
  .ca-track .ca-panel { display: flex; flex: 0 0 100%; box-sizing: border-box; padding: 0 4px; scroll-snap-align: start; animation: none; }
  .ca-intro .d3-intro-media { display: none; }
}

/* Connected Apps · slider sizing: track never wider than the card, each slide = exactly one card width */
.ca-tabs { grid-template-columns: minmax(280px, 40%) minmax(0, 1fr); }
.ca-stage { min-width: 0; }
@media (max-width: 1100px) { .ca-tabs { grid-template-columns: minmax(250px, 38%) minmax(0, 1fr); } }
@media (max-width: 900px) { .ca-tabs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .ca-track { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
  .ca-track .ca-panel { flex: 0 0 100%; width: 100%; min-width: 0; max-width: 100%; padding: 0; justify-content: flex-start; }
  .ca-panel h3, .ca-panel p { overflow-wrap: anywhere; }
}

/* Connected Apps · slide dots (mobile only) */
.ca-dots { display: none; }
@media (max-width: 680px) {
  .ca-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .ca-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: #cfe0f7; cursor: pointer; transition: width .3s, background .3s; }
  .ca-dot.active { width: 22px; background: linear-gradient(155deg, #3381FF, #002C72); }
}

/* Cloud Services · 2 x 2 service cards, single-column check cards */
.iot-portfolio.iot-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .iot-portfolio.iot-two { grid-template-columns: 1fr; } }
.cs-checks { grid-template-columns: 1fr; }

/* ═══════════ DATA ENGINEERING · services bento grid (base theme) ═══════════ */
.de-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.de-card { position: relative; display: flow-root; grid-column: span 2; background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); padding: 26px 28px; overflow: hidden; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.08); transition: transform .35s, box-shadow .35s; }
.de-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 16px 32px rgba(82,148,232,.2); }
.de-card.feat { grid-column: span 4; background: linear-gradient(155deg, var(--navy), var(--navy-3)); border-color: var(--navy); }
.de-card:nth-child(5) { grid-column: span 2; }
.de-card .sd-ico { float: right; width: 48px; height: 48px; margin: 0 0 8px 14px; border-radius: 14px; background: var(--gradient-blue); color: #fff; box-shadow: 0 8px 18px rgba(51,129,255,.28); }
.de-card h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: var(--navy); }
.de-card p { position: relative; margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.7; color: var(--text-body); }
.de-card.feat h3 { color: #fff; font-size: 26px; }
.de-card.feat p { color: var(--text-on-dark); }
@media (max-width: 1024px) { .de-bento { grid-template-columns: repeat(2, 1fr); } .de-card, .de-card.feat, .de-card:nth-child(5) { grid-column: span 1; } .de-card.feat { grid-column: span 2; } .de-card:nth-child(5) { grid-column: span 2; } }
@media (max-width: 680px) { .de-bento { grid-template-columns: 1fr; } .de-card, .de-card.feat, .de-card:nth-child(5) { grid-column: span 1; padding: 22px 20px; } .de-card.feat h3 { font-size: 22px; } }

/* IoT portfolio + Cloud engineering cards: icon tile top-right, text wraps around it */
.iot-portfolio .svc-card { display: flow-root; }
.iot-portfolio .svc-icon-wrap { float: right; margin: 0 0 10px 16px; }
.iot-portfolio .svc-title { margin-top: 0; }

/* ═══════════ CLOUD SERVICES · feature rows (base theme, compact) ═══════════ */
.cs-list { background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.08); }
.cs-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.7fr); align-items: center; gap: 22px; padding: 20px 26px; border-top: 1px solid #e6eefa; transition: background .3s; }
.cs-row:first-child { border-top: 0; }
.cs-row:hover { background: #F2F7FE; }
.cs-row .sd-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--gradient-blue); color: #fff; box-shadow: 0 8px 18px rgba(51,129,255,.28); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.cs-row:hover .sd-ico { transform: scale(1.08); }
.cs-row h3 { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: var(--navy); }
.cs-row p { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.7; color: var(--text-body); }
.cs-row:hover @media (max-width: 900px) {
  .cs-row { display: block; padding: 20px; }
  .cs-row .sd-ico { float: right; width: 48px; height: 48px; margin: 0 0 8px 14px; }
  .cs-row h3 { margin-bottom: 8px; font-size: 20px; }
  }

/* Cloud Services · feature rows: responsive refinements */
.cs-row h3, .cs-row p { overflow-wrap: anywhere; }
@media (max-width: 1200px) { .cs-row { gap: 18px; padding: 18px 22px; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.5fr); } .cs-row .sd-ico { width: 48px; height: 48px; } .cs-row h3 { font-size: 19px; } }
@media (max-width: 900px) {
  .cs-row { display: flow-root; padding: 18px 20px; }
  .cs-row .sd-ico { float: right; width: 46px; height: 46px; margin: 0 0 8px 14px; }
  .cs-row h3 { margin: 0 0 8px; font-size: 20px; }
  .cs-row:hover .sd-ico { transform: none; }
}
@media (max-width: 480px) {
  .cs-row { padding: 16px 16px; }
  .cs-row .sd-ico { width: 42px; height: 42px; margin-left: 12px; }
  .cs-row h3 { font-size: 18px; }
  .cs-row p { font-size: 15px; line-height: 1.65; }
}
@media (max-width: 680px) { .cs-list { padding: 20px 5px; } }

/* Cloud Ops · 3-point highlight strip on dark, wrapping tool chips */
.d3-why.d3-three { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.d3-why.d3-three div:nth-child(2) { border-right: 1px solid rgba(255,255,255,.14); }
.d3-why.d3-three div:nth-child(-n+2) { border-bottom: 0; }
.d1-pipe.d1-tools { flex-wrap: wrap; gap: 8px; }
.d1-pipe.d1-tools span { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; }
@media (max-width: 900px) {
  .d3-why.d3-three { grid-template-columns: 1fr; }
  .d3-why.d3-three div, .d3-why.d3-three div:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14) !important; }
  .d3-why.d3-three div:last-child { border-bottom: 0; }
}

/* DevOps flow cards: icon top-right with text wrapping */
.d1-flow .d1-duo .d1-card { display: flow-root; }
.d1-flow .d1-duo .sd-ico { float: right; margin: 0 0 10px 16px; }
.d1-flow .d1-duo .d1-card h3 { margin-top: 0; }

/* CONNECTED APPS · solutions as bullet points */
.ca-bullets-wrap { background: none; border: 0; padding: 0; box-shadow: none; }
.ca-bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 48px; }
.ca-bullets li { position: relative; padding-left: 26px; }
.ca-bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--gradient-blue); box-shadow: 0 0 0 4px rgba(51,129,255,.14); }
.ca-bullets h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: var(--navy); overflow-wrap: anywhere; }
.ca-bullets p { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.7; color: var(--text-body); overflow-wrap: anywhere; }
@media (max-width: 800px) { .ca-bullets { grid-template-columns: minmax(0, 1fr); gap: 18px; } .ca-bullets-wrap { background: none; border: 0; padding: 0; box-shadow: none; } }
.ca-bullets.ca-points { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 8px; }

/* DATA ENGINEERING · all cards white */
.de-card, .de-card.feat { background: #fff; border-color: #d9e6f7; }
.de-card.feat h3 { color: var(--navy); }
.de-card.feat p { color: var(--text-body); }
/* slider: no arrow buttons on mobile (swipe + auto-scroll) */
@media (max-width: 680px) { .d3-arrows { display: none; } }

/* Compliance Testing · 4-step timeline (desktop only; stacks like the 3-step one on tablet / mobile) */
@media (min-width: 901px) { .sd-d1 .d1-tl.d1-tl-four { grid-template-columns: repeat(4, 1fr); } .sd-d1 .d1-tl-four .d1-tl-item { padding-right: 24px; } }

/* IoT Product Testing · 6-card blue band */
.d3-why.d3-six { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
.d3-why.d3-six div { border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.d3-why.d3-six div:nth-child(3n) { border-right: 0; }
.d3-why.d3-six div:nth-last-child(-n+3) { border-bottom: 0; }
.d3-why.d3-six strong { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .d3-why.d3-six { grid-template-columns: 1fr 1fr; }
  .d3-why.d3-six div, .d3-why.d3-six div:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
  .d3-why.d3-six div:nth-child(2n) { border-right: 0; }
  .d3-why.d3-six div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .d3-why.d3-six { grid-template-columns: 1fr; }
  .d3-why.d3-six div, .d3-why.d3-six div:nth-child(2n), .d3-why.d3-six div:nth-child(3n) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14) !important; }
  .d3-why.d3-six div:last-child { border-bottom: 0; }
}

/* Mobility Testing · 5-point blue band strip */
.d3-why.d3-five { grid-template-columns: repeat(5, 1fr); margin-top: 28px; }
.d3-why.d3-five div { padding: 30px 22px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 0; }
.d3-why.d3-five div:last-child { border-right: 0; }
@media (max-width: 1024px) {
  .d3-why.d3-five { grid-template-columns: 1fr 1fr; }
  .d3-why.d3-five div, .d3-why.d3-five div:nth-child(2) { border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
  .d3-why.d3-five div:nth-child(2n) { border-right: 0; }
  .d3-why.d3-five div:last-child { grid-column: span 2; border-right: 0; border-bottom: 0; }
}
@media (max-width: 600px) {
  .d3-why.d3-five { grid-template-columns: 1fr; }
  .d3-why.d3-five div, .d3-why.d3-five div:nth-child(2n), .d3-why.d3-five div:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .d3-why.d3-five div:last-child { border-bottom: 0; }
}
/* Product · 2-step timeline */
@media (min-width: 901px) { .sd-d1 .d1-tl.d1-tl-two { grid-template-columns: repeat(2, 1fr); } .sd-d1 .d1-tl-two .d1-tl-item { padding-right: 36px; } }

/* Mobile · hide intro image on all internal pages */
@media (max-width: 767px) { .d3-intro-media { display: none; } }

/* Internal pages · all headings line-height 1.3 */
.pg-content :is(h1, h2, h3, h4, h5, h6, .sd-lead, .sec-h2, .svc-title, .careers-hero-title, .careers-title) { line-height: 1.3 !important; }

/* Quality · intro text above timeline */
.sd-d1 .sd-text + .d1-tl { margin-top: 32px; }

/* Timeline · keep nodes on one horizontal line even when headings wrap */
@media (min-width: 901px) {
  .sd-d1 .d1-tl { grid-template-rows: auto auto 1fr; }
  .sd-d1 .d1-tl-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}

/* Consulting · tight heading > body > cards spacing (20px) */
.sd-tight .sd-head { margin-bottom: 20px; }
.sd-tight .sd-text { margin-bottom: 20px; }

/* Internal pages · two-line third-section headings: normal text above, bold below */
.sec-h2.h2-split strong { display: block; }

/* Internal pages · consistent 20px rhythm: heading > body > cards (and heading > cards) */
.pg-content .sd-head { margin-bottom: 20px; }
.pg-content .sd-head .sec-h2 { margin-bottom: 0; }
.pg-content .d1-fs-head { margin-bottom: 20px; }
.pg-content .d1-flow .sec-h2 { margin-bottom: 20px; }
.pg-content .sd-text { margin-bottom: 20px; }
.pg-content .sd-text:last-child { margin-bottom: 0; }
.pg-content .sd-text + .d1-tl { margin-top: 0; }
.pg-content .d3-bar .sd-head { margin-bottom: 0; }
/* Artificial Intelligence · one-line dark-band heading, wide heading for two-line split */
.sd-dark .sec-h2.h2-one strong { display: inline; }
.sd-head.sd-wide { max-width: none; }
@media (min-width: 1200px) { .sd-head.sd-wide .sec-h2 { white-space: nowrap; } }
/* Enterprise Application Platforms · bullet list under a paragraph */
.sd-bullets { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.sd-bullets li { position: relative; padding-left: 26px; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.sd-bullets li::before { content: ''; position: absolute; left: 0; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: var(--gradient-blue); box-shadow: 0 0 0 4px rgba(51,129,255,.16); }
.sd-sec .iot-two + .d1-tl { margin-top: 20px; }
/* Cloud DevOps · one card holding a list of points (same check icon as .d1-check) */
.sd-points { margin-top: 26px; padding: 8px 24px; background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.07); }
.sd-points ul { list-style: none; margin: 0; padding: 0; }
.sd-points li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid #e6eefa; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.sd-points li:last-child { border-bottom: 0; }
.sd-points li svg { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; flex-shrink: 0; border-radius: 10px; background: var(--gradient-blue); color: #fff; box-shadow: 0 6px 14px rgba(51,129,255,.28); }

/* ═══════════ TABLET (768–1024px) · internal pages: full width, 20px side margins ═══════════
   Media-query only: desktop (>1024px) and mobile (<768px) rules are untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
  .pg-content .sd-sec, .pg-content .sd-dark { padding-left: 20px; padding-right: 20px; }
  .pg-content .sd-inner { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .pg-content .careers-hero-inner { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .pg-content .careers-section { margin-left: 20px; margin-right: 20px; }
  .pg-content .careers-content { max-width: 100%; padding-left: 32px; padding-right: 32px; }
}
/* India · capability group sub-headings and card links */
.sd-sub { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: var(--navy); letter-spacing: -.4px; line-height: 1.3; margin: 40px 0 20px; }
.sd-text + .sd-sub { margin-top: 20px; }
.iot-portfolio .svc-link, .d3-slide .svc-link { margin-top: 14px; font-size: 15px; clear: both; }
.sd-dark + .careers-section { margin-top: 60px; }
/* India · capability tabs in the site theme */
.sd-tabnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sd-tabbtn { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid #d9e6f7; border-radius: 100px; padding: 12px 24px; cursor: pointer; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 8px 18px rgba(82,148,232,.07); transition: all .3s cubic-bezier(.16,1,.3,1); }
.sd-tabbtn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 12px 24px rgba(82,148,232,.2); }
.sd-tabbtn.active { color: #fff; background: var(--gradient-blue); border-color: transparent; box-shadow: 0 6px 14px rgba(51,129,255,.28); }
.sd-tabpanel { display: none; }
.sd-tabpanel.active { display: block; }
/* India · mobile: 50px above the careers banner */
@media (max-width: 640px) { .careers-section.india-careers { margin-top: 50px !important; } }
/* India / United States · careers banner heading on one line (wraps again on phones) */
@media (min-width: 641px) { .careers-section .careers-title { white-space: nowrap; } }
@media (min-width: 641px) { .careers-section .careers-title .ct-teal { display: inline; } }
/* banner description wraps to the heading's width (column is sized by the heading; desc contributes 0) */
@media (min-width: 641px) {
  .careers-section .careers-content { display: grid; grid-template-columns: max-content; justify-content: start; }
  .careers-section .careers-desc { width: 0; min-width: 100%; max-width: none; }
}

/* ═══════════ POLICY PAGES · Privacy Policy / Cookie Policy in the site theme ═══════════ */
.sd-d1 .policy-body { max-width: none; display: grid; gap: 22px; }
.sd-d1 .policy-block { background: #fff; border: 1px solid #d9e6f7; border-radius: var(--radius-lg); padding: 32px 36px; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 12px 24px rgba(82,148,232,.07); }
.sd-d1 .policy-block:first-child, .sd-d1 .policy-block:last-child { padding: 32px 36px; border-bottom: 1px solid #d9e6f7; }
.sd-d1 .policy-block:first-child { border-left: 4px solid #3381FF; }
.sd-d1 .policy-h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.4px; line-height: 1.3; margin-bottom: 14px; }
.sd-d1 .policy-block p, .sd-d1 .policy-block li { font-family: var(--font-sans); font-weight: var(--fw-body); color: var(--text-body); line-height: 1.8; }
.sd-d1 .policy-block li { padding-left: 26px; margin-bottom: 10px; }
.sd-d1 .policy-block li:last-child { margin-bottom: 0; }
.sd-d1 .policy-block li::before { top: .75em; width: 9px; height: 9px; background: var(--gradient-blue); box-shadow: 0 0 0 4px rgba(51,129,255,.16); }
.sd-d1 .policy-block a { color: #2f6fe0; }
.sd-d1 .policy-block a:hover { border-bottom-color: #2f6fe0; }
@media (max-width: 640px) {
  .sd-d1 .policy-block, .sd-d1 .policy-block:first-child, .sd-d1 .policy-block:last-child { padding: 24px 20px; }
}

/* ═══════════ CAREERS · cards and tabs in the site theme (mosaic images untouched) ═══════════ */
.pg-career .laq-header { margin-bottom: 20px; }
.pg-career .laq-header .sec-h2 { margin-bottom: 20px; }
.pg-career .laq-header .sec-body { margin-bottom: 0; max-width: none; }
.pg-career .laq-mosaic { margin-bottom: 40px; }
.pg-career .laq-cards-header { margin-bottom: 20px; }
.pg-career .laq-cards-header .sec-h2 { margin-bottom: 0; }
.pg-career .laq-grid { gap: 22px; }
.pg-career .laq-card { display: flow-root; padding: 34px 30px; cursor: default; }
.pg-career .laq-icon { float: right; margin: 0 0 10px 16px; }
.pg-career .laq-card-title { margin-top: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.4px; }
.pg-career .laq-card-desc { font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }

/* region tabs: same pills as the India / United States pages */
.pg-career .services-header { margin-bottom: 20px; }
.pg-career .services-section h2 { margin-bottom: 20px; }
.pg-career .services-header .sec-body { margin-bottom: 0; }
@media (min-width: 768px) {
  .pg-career .services-header > div { width: auto; }
  .pg-career .services-header .sec-body { width: auto; min-width: 0; white-space: nowrap; }
}
.pg-career .tab-nav { background: transparent; border: 0; padding: 0; gap: 10px; border-radius: 0; margin-bottom: 0; flex-wrap: wrap; flex-shrink: 0; }
.pg-career .tab-btn { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid #d9e6f7; border-radius: 100px; padding: 12px 24px; box-shadow: 0 2px 4px rgba(47,112,196,.03), 0 8px 18px rgba(82,148,232,.07); transition: all .3s cubic-bezier(.16,1,.3,1); }
.pg-career .tab-btn:not(.active):hover { background: #fff; color: var(--navy); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(47,112,196,.04), 0 12px 24px rgba(82,148,232,.2); }
.pg-career .tab-btn.active { color: #fff; background: var(--gradient-blue); border-color: transparent; box-shadow: 0 6px 14px rgba(51,129,255,.28); }

/* job cards */
.pg-career .tab-panel.active { gap: 22px; }
.pg-career .svc-card-career { padding: 33px 29px; cursor: pointer; color: inherit; text-decoration: none; }
.pg-career .job-post-card { justify-content: stretch; justify-items: start; text-align: left; }
/* 2px navy border on hover via inset ring, so the fixed padding / card size never shifts */
.pg-career .svc-card-career:hover { background: #fff; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy), 0 2px 4px rgba(47, 112, 196, 0.04), 0 12px 24px rgba(82, 148, 232, 0.1), 0 32px 56px rgba(82, 148, 232, 0.35); }
.pg-career .job-post-card .svc-title { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; letter-spacing: -.4px; margin-bottom: 12px; }
.pg-career .svc-desc-career { font-family: var(--font-sans); font-weight: var(--fw-body); line-height: 1.75; color: var(--text-body); }
.pg-career .svc-link-career { font-size: 15px; color: var(--teal-dim); }

@media (min-width: 768px) and (max-width: 1024px) {
  .pg-career .laq-section, .pg-career .services-section { padding-left: 20px; padding-right: 20px; }
  .pg-career .laq-header, .pg-career .laq-mosaic, .pg-career .laq-grid, .pg-career .services-header, .pg-career .services-tabs { margin-left: 0; margin-right: 0; max-width: 100%; }
}
/* Careers · mobile: India / United States tabs side by side on one line */
@media (max-width: 767px) {
  .pg-career .tab-nav { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .pg-career .tab-btn { flex: 1 1 auto; justify-content: center; padding: 12px 14px; white-space: nowrap; }
}