/* ==========================================================================
   HOME — layout of the "Frame 118" reference (1920px-wide desktop frame).

   Every size is the reference's measured px value written as
   calc(N * var(--u)), i.e. exactly N px at 1920 and proportionally smaller
   on narrower desktops, wrapped in clamp() with a readable floor. Below
   1024px sections stack and the small-screen overrides at the bottom of
   each block take over. Loaded on the front page only (inc/enqueue.php).
   ========================================================================== */

/* --u is defined in variables.css. */

/* ---------- Shared primitives -------------------------------------------- */

.te-h-wrap {
  --g: 90;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, calc(var(--g) * var(--u)), calc(var(--g) * 1px));
}

.te-h-title {
  font-family: var(--te-font-heading);
  font-weight: var(--te-fw-display);
  line-height: var(--te-lh-tight);
  letter-spacing: var(--te-ls-display);
  color: var(--te-text-heading);
}
/* Light-on-dark headings ink heavier than dark-on-light at the same
   weight, so dark bands step down one weight to match the reference. */
.te-h-dark .te-h-title,
.te-h-process .te-h-title,
.te-h-stats__title { font-weight: var(--te-fw-display-dark); }

.te-h-accent {
  background: linear-gradient(90deg, #0a62f2 0%, #1a8fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}
.te-h-accent--teal { background: none; color: var(--te-teal-400); }

.te-h-eyebrow {
  font-size: clamp(0.8125rem, calc(var(--te-fs-label) * var(--u)), calc(var(--te-fs-label) * 1px));
  font-weight: var(--te-fw-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.te-h-eyebrow--line,
.te-h-eyebrow--lead { display: inline-flex; align-items: center; gap: clamp(0.75rem, calc(20 * var(--u)), 1.25rem); }
.te-h-eyebrow--line { color: var(--te-eyebrow-on-dark); font-weight: var(--te-fw-regular); font-size: clamp(0.875rem, calc(20 * var(--u)), 1.25rem); }
.te-h-eyebrow--line::after { content: ""; width: clamp(2rem, calc(60 * var(--u)), 3.75rem); height: 2px; background: #2a7bff; }
.te-h-eyebrow--lead { color: var(--te-text-title); font-size: clamp(0.875rem, calc(20 * var(--u)), 1.25rem); font-weight: var(--te-fw-medium); letter-spacing: 0.11em; }
/* First word light, the rest semibold, as in the reference ("ABOUT TECHNDATA"). */
.te-h-eyebrow__soft { font-weight: var(--te-fw-regular); color: var(--te-text-muted); }
.te-h-eyebrow--lead::before { content: ""; width: clamp(2.5rem, calc(80 * var(--u)), 5rem); height: 3px; border-radius: 2px; background: #0a7cff; }
.te-h-eyebrow--gold { color: var(--te-accent-400); font-size: clamp(0.875rem, calc(22 * var(--u)), 1.375rem); letter-spacing: 0.16em; }
.te-h-eyebrow--orange { color: var(--te-eyebrow-orange); font-size: clamp(0.875rem, calc(22 * var(--u)), 1.375rem); letter-spacing: 0.1em; }
.te-h-eyebrow--blue { color: var(--te-brand-bright); }

/* Two-tone accent bar above headings (blue + pale blue). */
.te-h-bar {
  display: block;
  width: clamp(3.5rem, calc(94 * var(--u)), 5.875rem);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0b76f8 0 64%, #c0ddff 64% 100%);
}
.te-h-bar--center { margin-inline: auto; width: clamp(4rem, calc(118 * var(--u)), 7.375rem); }

/* Dot-grid decoration. */
.te-h-dots {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(70, 148, 241, 0.4) 1.6px, transparent 2.2px);
  background-size: clamp(16px, calc(24 * var(--u)), 24px) clamp(16px, calc(24 * var(--u)), 24px);
}
.te-h-dots--dark { background-image: radial-gradient(circle, rgba(210, 225, 240, 0.45) 1.6px, transparent 2.2px); }

/* Dark "tech" band (stats, services): near-black navy with a faint grid. */
.te-h-dark { position: relative; overflow: hidden; background: var(--te-ink-950); color: #fff; }
.te-h-dark__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(80, 130, 220, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80, 130, 220, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
}
.te-h-dark > .te-h-wrap { position: relative; }

/* ---------- Buttons ------------------------------------------------------- */

.te-h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3rem;
  font-family: var(--te-font-body);
  font-weight: var(--te-fw-button);
  line-height: 1.1;
  white-space: nowrap;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.te-h-btn .te-icon { width: 1.1em; height: 1.1em; transition: transform 200ms ease; }
.te-h-btn:hover .te-icon { transform: translateX(3px); }
.te-h-btn:hover { transform: translateY(-2px); }

/* Hero: square-ish (6px) solid blue + blue outline, 62px tall. */
.te-h-btn--blue,
.te-h-btn--outline {
  min-height: clamp(3.25rem, calc(62 * var(--u)), 3.875rem);
  padding-inline: clamp(1.5rem, calc(46 * var(--u)), 2.875rem);
  border-radius: 6px;
  font-size: clamp(1rem, calc(19 * var(--u)), 1.1875rem);
}
.te-h-btn--blue { background: var(--te-brand-600); color: #fff; box-shadow: 0 12px 24px -12px rgba(22, 105, 232, 0.7); }
.te-h-btn--blue:hover { background: var(--te-brand-700); }
.te-h-btn--outline { border: 2px solid var(--te-brand-600); background: rgba(255, 255, 255, 0.85); color: var(--te-ink-blue); }
.te-h-btn--outline:hover { background: var(--te-brand-50); }

/* Dark band: glowing outlined pill. */
.te-h-btn--glow {
  min-height: clamp(3rem, calc(60 * var(--u)), 3.75rem);
  padding-inline: clamp(1.25rem, calc(30 * var(--u)), 1.875rem);
  border: 2px solid #1f63d6;
  border-radius: 9999px;
  font-size: clamp(0.9375rem, calc(19 * var(--u)), 1.1875rem);
  color: #fff;
  box-shadow: 0 0 18px -2px rgba(30, 110, 255, 0.55), inset 0 0 14px -4px rgba(30, 110, 255, 0.6);
}
.te-h-btn--glow:hover { background: rgba(31, 99, 214, 0.25); }

/* Teal gradient pill (secondary CTAs). */
.te-h-btn--teal {
  min-height: clamp(3.25rem, calc(68 * var(--u)), 4.25rem);
  padding-inline: clamp(1.5rem, calc(36 * var(--u)), 2.25rem);
  border-radius: 9999px;
  background: linear-gradient(90deg, #0f7472 0%, #0a8f84 60%, #069a8c 100%);
  font-size: clamp(1rem, calc(22 * var(--u)), 1.375rem);
  color: #fff;
  box-shadow: 0 16px 30px -16px rgba(6, 110, 100, 0.75);
}
.te-h-btn--teal:hover { box-shadow: 0 20px 36px -16px rgba(6, 110, 100, 0.85); }
.te-h-btn--sm.te-h-btn--teal { min-height: clamp(3rem, calc(57 * var(--u)), 3.5625rem); padding-inline: clamp(1.25rem, calc(30 * var(--u)), 1.875rem); font-size: clamp(0.9375rem, calc(20 * var(--u)), 1.25rem); }
.te-h-btn--xl.te-h-btn--teal {
  min-height: clamp(3.5rem, calc(82 * var(--u)), 5.125rem);
  padding-inline: clamp(2rem, calc(48 * var(--u)), 3rem);
  font-size: clamp(1.0625rem, calc(29 * var(--u)), 1.8125rem);
  background: linear-gradient(90deg, #0f7977 0%, #03a494 100%);
}
/* Arrow inside a darker circle at the right edge. */
.te-h-btn--orb { padding-right: clamp(0.375rem, calc(10 * var(--u)), 0.625rem); gap: clamp(1rem, calc(34 * var(--u)), 2.125rem); }
.te-h-btn__orb {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: clamp(2.375rem, calc(52 * var(--u)), 3.25rem); height: clamp(2.375rem, calc(52 * var(--u)), 3.25rem);
  border-radius: 50%; background: rgba(0, 40, 40, 0.22);
}
.te-h-btn--sm .te-h-btn__orb { width: clamp(2.125rem, calc(40 * var(--u)), 2.5rem); height: clamp(2.125rem, calc(40 * var(--u)), 2.5rem); }

/* Light outlined pill ("View all"). */
.te-h-btn--white {
  min-height: clamp(3rem, calc(64 * var(--u)), 4rem);
  padding-inline: clamp(1.25rem, calc(32 * var(--u)), 2rem);
  border: 1px solid #dfe6ef;
  border-radius: 9999px;
  background: #fff;
  font-size: clamp(1rem, calc(23 * var(--u)), 1.4375rem);
  color: var(--te-ink-blue);
  box-shadow: 0 10px 24px -16px rgba(15, 40, 80, 0.4);
}
.te-h-btn--white:hover { border-color: var(--te-brand-300); color: var(--te-brand-700); }

/* Round prev/next arrows on dark. */
.te-h-arrows { display: flex; gap: clamp(0.75rem, calc(24 * var(--u)), 1.5rem); }
.te-h-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(2.75rem, calc(64 * var(--u)), 4rem); height: clamp(2.75rem, calc(64 * var(--u)), 4rem);
  border-radius: 50%; padding: 0;
  border: 2px solid #2a7bff; background: transparent; color: #fff;
  box-shadow: 0 0 18px -2px rgba(40, 120, 255, 0.6);
  transition: background 150ms ease, opacity 150ms ease;
}
.te-h-arrow svg { width: 40%; height: 40%; }
.te-h-arrow:not(:disabled):hover { background: rgba(42, 123, 255, 0.25); }
.te-h-arrow:disabled { border-color: rgba(200, 215, 235, 0.25); color: rgba(200, 215, 235, 0.5); box-shadow: none; cursor: default; }

/* ==========================================================================
   1. HERO — full-bleed banner, copy over its white left side
   ========================================================================== */

.te-h-hero { position: relative; overflow: hidden; background: #fcfcfe; }

/* Banner photo: on desktop it fills the right of the hero and fades into
   the page background behind the copy (same treatment as the CTA bands),
   so the copy keeps a clean light field; the people sit right of the fade.
   Below 1280 it stacks under the copy. */
.te-h-hero__art { position: relative; }
.te-h-hero__art img { display: block; width: 100%; height: auto; }

@media (min-width: 1280px) {
  .te-h-hero { min-height: calc(768 * var(--u)); }
  .te-h-hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
  .te-h-hero__art picture, .te-h-hero__art img { height: 100%; }
  .te-h-hero__art img {
    object-fit: cover; object-position: 78% 45%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 20%, #000 44%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 20%, #000 44%);
  }
  .te-h-hero__inner {
    --g: 99;
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(768 * var(--u));
    padding-block: clamp(1.5rem, calc(36 * var(--u)), 2.25rem);
  }
}

.te-h-hero__content { max-width: max(30rem, calc(800 * var(--u))); padding-block: 2.5rem 2rem; }
@media (min-width: 1280px) { .te-h-hero__content { padding-block: 0; } }

.te-h-hero__kicker {
  font-size: clamp(0.75rem, calc(15 * var(--u)), 0.9375rem);
  font-weight: var(--te-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: #738497;
}
.te-h-hero h1 {
  margin-top: clamp(0.875rem, calc(20 * var(--u)), 1.25rem);
  font-family: var(--te-font-heading);
  font-size: clamp(2.25rem, calc(var(--te-fs-hero) * var(--u)), calc(var(--te-fs-hero) * 1px));
  font-weight: var(--te-fw-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--te-text-heading);
  text-wrap: initial;
}
@media (min-width: 640px) { .te-h-hero h1 .te-h-accent { display: block; width: fit-content; padding-block: 0.04em; } }
.te-h-hero__subhead {
  margin-top: clamp(0.875rem, calc(20 * var(--u)), 1.25rem);
  max-width: max(26rem, calc(712 * var(--u)));
  font-size: clamp(1.0625rem, calc(24 * var(--u)), 1.5rem);
  font-weight: var(--te-fw-body-lg);
  line-height: 1.25;
  letter-spacing: 0.012em;
  color: var(--te-text-lead);
}
.te-h-hero__body {
  margin-top: clamp(0.75rem, calc(14 * var(--u)), 0.875rem);
  max-width: max(26rem, calc(700 * var(--u)));
  font-size: clamp(0.9375rem, calc(16 * var(--u)), 1rem);
  line-height: 1.6;
  color: var(--te-text-muted);
}
.te-h-hero__actions { margin-top: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); display: flex; flex-wrap: wrap; gap: clamp(0.875rem, calc(21 * var(--u)), 1.3125rem); }

.te-h-hero__badges { margin-top: clamp(1.5rem, calc(30 * var(--u)), 1.875rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 0; }
.te-h-hero__badges li {
  display: flex; align-items: center; gap: clamp(0.75rem, calc(20 * var(--u)), 1.25rem);
  font-size: clamp(0.875rem, calc(16 * var(--u)), 1rem); line-height: 1.3; color: var(--te-text-body);
}
.te-h-hero__badges li + li { margin-left: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); padding-left: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); border-left: 1px solid #c9d3e0; }
.te-h-hero__badges strong { font-weight: var(--te-fw-bold); color: var(--te-text-title); }
.te-h-hero__badge-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: clamp(2.75rem, calc(56 * var(--u)), 3.5rem); height: clamp(2.75rem, calc(56 * var(--u)), 3.5rem);
  border-radius: 50%; background: #deebfc; color: var(--te-brand-600);
}
.te-h-hero__badge-icon svg { width: 46%; height: 46%; }

/* Below 1280 the copy no longer fits over the banner's white side: stack
   copy, then the photo. Phones crop to the group at the table. */
@media (max-width: 1279px) {
  .te-h-hero { display: flex; flex-direction: column; }
  .te-h-hero__art { order: 2; }
  .te-h-hero__content { max-width: 42rem; }
}
@media (max-width: 519px) {
  .te-h-hero__badges { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .te-h-hero__badges li + li { margin-left: 0; padding-left: 0; border-left: none; }
}
@media (max-width: 767px) {
  .te-h-hero__art img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center; }
}

/* ==========================================================================
   2. STATS — "Why Choose TechnData Innovations"
   ========================================================================== */

.te-h-stats { text-align: center; padding-block: clamp(2.5rem, calc(44 * var(--u)), 2.75rem) clamp(3rem, calc(64 * var(--u)), 4rem); }
.te-h-stats .te-h-wrap { --g: 70; }
.te-h-stats__title {
  font-family: var(--te-font-display);
  font-size: clamp(1.75rem, calc(var(--te-fs-h2) * var(--u)), calc(var(--te-fs-h2) * 1px));
  line-height: 1.15; letter-spacing: -0.01em; color: var(--te-text-on-dark);
}
.te-h-stats__grid { margin-top: clamp(2rem, calc(56 * var(--u)), 3.5rem); display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
@media (min-width: 1024px) { .te-h-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.te-h-stats__item { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: clamp(0.75rem, calc(30 * var(--u)), 1.875rem); }
.te-h-stats__item:nth-child(even)::before,
.te-h-stats__item + .te-h-stats__item::before {
  content: ""; position: absolute; left: 0; top: 5%; bottom: -8%; width: 1px;
  background: linear-gradient(180deg, rgba(60, 130, 240, 0), rgba(70, 140, 245, 0.75) 45%, rgba(70, 140, 245, 0.75) 60%, rgba(60, 130, 240, 0));
}
@media (max-width: 1023px) { .te-h-stats__item:nth-child(odd)::before { display: none; } }
.te-h-stats__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(3.75rem, calc(88 * var(--u)), 5.5rem); height: clamp(3.75rem, calc(88 * var(--u)), 5.5rem);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1d3152, #132440);
  border: 1px solid rgba(90, 140, 220, 0.28);
  color: #fea41a;
}
.te-h-stats__icon svg { width: 46%; height: 46%; }
.te-h-stats__value {
  margin-top: clamp(0.875rem, calc(18 * var(--u)), 1.125rem);
  font-family: var(--te-font-display);
  font-size: clamp(2.5rem, calc(74 * var(--u)), 4.625rem);
  font-weight: var(--te-fw-extrabold); line-height: 1; letter-spacing: -0.01em;
  color: var(--te-accent-500);
}
.te-h-stats__desc {
  margin-top: clamp(0.875rem, calc(22 * var(--u)), 1.375rem);
  max-width: max(13rem, calc(380 * var(--u)));
  font-size: clamp(0.9375rem, calc(22 * var(--u)), 1.375rem);
  font-weight: var(--te-fw-body-lg); line-height: 1.5; color: var(--te-text-on-dark-muted);
}
.te-h-stats__arc {
  position: absolute; left: calc(-330 * var(--u)); bottom: calc(-560 * var(--u));
  width: calc(720 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(70, 140, 255, 0.45); pointer-events: none;
}
.te-h-stats__arc::after {
  content: ""; position: absolute; right: 21%; top: 9%; width: 10px; height: 10px; border-radius: 50%;
  background: #3d8bff; box-shadow: 0 0 12px 3px rgba(61, 139, 255, 0.7);
}
.te-h-stats::after {
  content: ""; position: absolute; right: calc(-420 * var(--u)); top: calc(-560 * var(--u));
  width: calc(800 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(70, 140, 255, 0.3); pointer-events: none;
}

/* ==========================================================================
   3. SOLUTIONS — "What We Do" bento grid (1200px column, as in the reference)
   ========================================================================== */

.te-h-solutions { background: #f4f9fa; }
.te-h-solutions .te-eyebrow { color: var(--te-text-body); }

.te-solutions-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .te-solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .te-solutions-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row dense; } }

.te-solution-tile--featured {
  position: relative; grid-column: span 1;
  display: flex; min-height: 22rem; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-radius: var(--te-radius-2xl); box-shadow: var(--te-shadow-card); transition: box-shadow 300ms ease;
}
.te-solution-tile--featured:hover { box-shadow: var(--te-shadow-card-hover); }
@media (min-width: 640px) { .te-solution-tile--featured { grid-column: span 2; } }
@media (min-width: 1024px) { .te-solution-tile--featured { grid-column: span 2; grid-row: span 2; min-height: 100%; } }
.te-solution-tile--featured img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform 500ms ease; }
.te-solution-tile--featured:hover img { transform: scale(1.05); }
.te-solution-tile--featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--te-navy-950) 0%, rgba(6, 11, 24, 0.7) 45%, rgba(6, 11, 24, 0.05) 100%);
}
/* z-index: the ::after gradient paints last, so the copy must sit above it. */
.te-solution-tile--featured__body { position: relative; z-index: 1; padding: 1.75rem; }
@media (min-width: 640px) { .te-solution-tile--featured__body { padding: 2rem; } }
.te-solution-tile--featured__icon {
  display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center;
  border-radius: var(--te-radius-xl); background: rgba(255, 255, 255, 0.1); color: #fff; backdrop-filter: blur(4px);
}
.te-solution-tile--featured h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: var(--te-fw-bold); color: #fff; }
@media (min-width: 640px) { .te-solution-tile--featured h3 { font-size: 1.5rem; } }
.te-solution-tile--featured p { margin-top: 0.5rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.te-solution-tile--featured .te-tile-link {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: var(--te-fw-semibold); color: #f5b04a;
}

.te-solution-tile {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--te-radius-2xl); border: 1px solid var(--te-navy-100); background: #fff;
  box-shadow: var(--te-shadow-card); transition: all 300ms ease;
}
.te-solution-tile:hover { transform: translateY(-4px); border-color: var(--te-teal-100); box-shadow: var(--te-shadow-card-hover); }
.te-solution-tile__media { position: relative; height: 5.5rem; width: 100%; overflow: hidden; }
.te-solution-tile__media img { height: 100%; width: 100%; object-fit: cover; transition: transform 500ms ease; }
.te-solution-tile:hover .te-solution-tile__media img { transform: scale(1.05); }
.te-solution-tile__media::after { content: ""; position: absolute; inset: 0; background: rgba(6, 11, 24, 0.25); }
.te-solution-tile__media-icon {
  position: absolute; bottom: 0.75rem; left: 1rem; z-index: 1;
  display: inline-flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center;
  border-radius: var(--te-radius-lg); background: #fff; color: var(--te-teal-700); box-shadow: var(--te-shadow-card);
}
.te-solution-tile__icon-only { padding: 1.5rem 1.5rem 0; }
.te-solution-tile__icon-only span {
  display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center;
  border-radius: var(--te-radius-xl); background: var(--te-teal-50); color: var(--te-teal-700);
}
.te-solution-tile__body { display: flex; flex: 1; flex-direction: column; padding: 0.875rem 1.25rem 1.25rem; }
.te-solution-tile__body h3 { font-size: 1rem; font-weight: var(--te-fw-semibold); color: var(--te-text-heading); }
.te-solution-tile__body p { margin-top: 0.375rem; flex: 1; font-size: 0.875rem; line-height: 1.5; color: var(--te-text-body); }
.te-solution-tile .te-tile-link {
  margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: var(--te-fw-semibold); color: var(--te-teal-700);
}
.te-tile-link svg { transition: transform 200ms ease; }
.te-solution-tile:hover .te-tile-link svg,
.te-solution-tile--featured:hover .te-tile-link svg { transform: translateX(0.25rem); }

/* ==========================================================================
   4. SERVICES — dark lifecycle band with glowing cards
   ========================================================================== */

.te-h-services { padding-block: clamp(3rem, calc(51 * var(--u)), 3.1875rem) clamp(3rem, calc(34 * var(--u)), 2.125rem); }
.te-h-services .te-h-wrap { --g: 89; }
.te-h-services__arc {
  position: absolute; right: calc(-260 * var(--u)); top: calc(-330 * var(--u));
  width: calc(620 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(40, 130, 255, 0.55); pointer-events: none;
  box-shadow: 0 0 40px -10px rgba(40, 130, 255, 0.5);
}
.te-h-services__arc::after {
  content: ""; position: absolute; left: 10%; bottom: 19%; width: 10px; height: 10px; border-radius: 50%;
  background: #3d8bff; box-shadow: 0 0 14px 4px rgba(61, 139, 255, 0.75);
}

.te-h-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.te-h-services__intro { max-width: max(34rem, calc(1060 * var(--u))); }
.te-h-services .te-h-title { margin-top: clamp(0.75rem, calc(12 * var(--u)), 0.75rem); font-size: clamp(2rem, calc(var(--te-fs-h2) * var(--u)), calc(var(--te-fs-h2) * 1px)); color: var(--te-text-on-dark); }
.te-h-services__desc {
  margin-top: clamp(0.875rem, calc(16 * var(--u)), 1rem);
  font-size: clamp(1rem, calc(24 * var(--u)), 1.5rem); font-weight: var(--te-fw-body-lg); line-height: var(--te-lh-body); color: var(--te-text-on-dark-muted);
}
.te-h-services__controls { display: flex; align-items: center; gap: clamp(1rem, calc(36 * var(--u)), 2.25rem); padding-bottom: clamp(0.25rem, calc(14 * var(--u)), 0.875rem); }

.te-h-services__track {
  --gap: clamp(1rem, calc(29 * var(--u)), 1.8125rem);
  margin: clamp(1.5rem, calc(32 * var(--u)), 2rem) -8px 0;
  padding: 8px;
  scroll-padding-inline: 8px;
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.te-h-services__track::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .te-h-services__track { grid-auto-columns: 62%; } }
@media (max-width: 639px) { .te-h-services__track { grid-auto-columns: 86%; } }

.te-h-svc-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: clamp(24rem, calc(455 * var(--u)), 28.4375rem);
  border: 1.5px solid rgba(35, 110, 225, 0.85);
  border-radius: clamp(0.875rem, calc(16 * var(--u)), 1rem);
  background: linear-gradient(180deg, #04172f 0%, #021226 100%);
  box-shadow: 0 0 22px -6px rgba(30, 110, 255, 0.55), inset 0 0 22px -10px rgba(30, 110, 255, 0.45);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.te-h-svc-card:hover { transform: translateY(-4px); box-shadow: 0 0 30px -4px rgba(30, 120, 255, 0.75), inset 0 0 22px -10px rgba(30, 110, 255, 0.5); }
.te-h-svc-card__media {
  position: relative;
  margin: clamp(0.375rem, calc(6 * var(--u)), 0.375rem) clamp(0.5rem, calc(14 * var(--u)), 0.875rem) 0;
  height: clamp(10rem, calc(217 * var(--u)), 13.5625rem);
  border-radius: clamp(0.625rem, calc(12 * var(--u)), 0.75rem);
  background: #0a2343;
}
.te-h-svc-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.te-h-svc-card__icon {
  position: absolute; left: clamp(0.75rem, calc(15 * var(--u)), 0.9375rem); bottom: clamp(0.5rem, calc(8 * var(--u)), 0.5rem);
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(3rem, calc(64 * var(--u)), 4rem); height: clamp(3rem, calc(64 * var(--u)), 4rem);
  border: 2px solid #fb9c01; border-radius: clamp(0.625rem, calc(12 * var(--u)), 0.75rem);
  background: rgba(4, 20, 45, 0.78); color: #fca91f;
  box-shadow: 0 0 16px -4px rgba(251, 156, 1, 0.55);
}
.te-h-svc-card__icon svg { width: 50%; height: 50%; }
.te-h-svc-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(0.875rem, calc(14 * var(--u)), 0.875rem) clamp(1.25rem, calc(30 * var(--u)), 1.875rem) clamp(1rem, calc(12 * var(--u)), 0.75rem); }
.te-h-svc-card h3 { font-size: clamp(1.25rem, calc(var(--te-fs-title) * var(--u)), calc(var(--te-fs-title) * 1px)); font-weight: var(--te-fw-title); line-height: var(--te-lh-heading); color: var(--te-text-on-dark); }
.te-h-svc-card p { margin-top: clamp(0.5rem, calc(10 * var(--u)), 0.625rem); font-size: clamp(0.9375rem, calc(var(--te-fs-body-lg) * var(--u)), calc(var(--te-fs-body-lg) * 1px)); font-weight: var(--te-fw-body-lg); line-height: 1.45; letter-spacing: 0.01em; color: var(--te-text-on-dark-muted); }
.te-h-svc-card__go {
  margin-top: auto; padding-top: 0.5rem; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box;
}
.te-h-svc-card__go .te-icon {
  width: clamp(1rem, calc(22 * var(--u)), 1.375rem); height: clamp(1rem, calc(22 * var(--u)), 1.375rem);
  box-sizing: content-box;
  padding: clamp(0.5rem, calc(12 * var(--u)), 0.75rem);
  border: 2px solid #2a72ff; border-radius: 50%; color: #fff;
  box-shadow: 0 0 12px -3px rgba(42, 114, 255, 0.7); transition: transform 200ms ease;
}
.te-h-svc-card:hover .te-h-svc-card__go .te-icon { transform: translateX(3px); }

/* ==========================================================================
   5. WHO WE ARE — circular photo composition + copy
   ========================================================================== */

.te-h-who { position: relative; overflow: hidden; background: linear-gradient(180deg, #fcfefd, #fbfcfe); padding-block: clamp(3rem, calc(58 * var(--u)), 3.625rem) clamp(3rem, calc(38 * var(--u)), 2.375rem); }
.te-h-who .te-h-wrap { padding-inline: clamp(1.25rem, calc(53 * var(--u)), 3.3125rem) clamp(1.25rem, calc(75 * var(--u)), 4.6875rem); }
.te-h-who__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .te-h-who__grid { grid-template-columns: minmax(0, 868fr) minmax(0, 924fr); gap: 0; align-items: start; } }

.te-h-who__media { position: relative; width: 100%; max-width: 40rem; margin-inline: auto; aspect-ratio: 868 / 800; }
@media (min-width: 1024px) { .te-h-who__media { max-width: none; margin-top: calc(-1 * clamp(3rem, calc(58 * var(--u)), 3.625rem)); } }
.te-h-who__media > * { position: absolute; }
/* Positions are % of the 868×800 media box, taken from the reference. */
.te-h-who__blob { left: 2%; top: 1%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #dcecfa, #edf6fd 70%); }
.te-h-who__ring {
  left: -0.5%; top: 3.2%; width: 88.7%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid; border-color: rgba(10, 124, 255, 0.55) rgba(10, 124, 255, 0.35) rgba(10, 124, 255, 0.25) transparent;
}
.te-h-who__ring::before,
.te-h-who__ring::after { content: ""; position: absolute; width: 2.3%; aspect-ratio: 1; border-radius: 50%; background: #1a8ff0; }
.te-h-who__ring::before { left: 72%; top: 4%; }
.te-h-who__ring::after { right: -0.6%; top: 54%; }
.te-h-who__dots-a { left: 3%; top: 78%; width: 12%; height: 10%; }
.te-h-who__dots-b { left: 77%; top: 13%; width: 11%; height: 10%; }
.te-h-who__main {
  left: 7.1%; top: 11.4%; width: 73.7%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%;
  border: 6px solid #fff; box-shadow: 0 30px 60px -30px rgba(15, 40, 80, 0.45);
}
.te-h-who__accent {
  left: 64.4%; top: 69.3%; width: 27.4%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 80% 30%; border-radius: 50%;
  border: 8px solid #fff; box-shadow: 0 20px 40px -18px rgba(15, 40, 80, 0.45);
}
.te-h-who__badge {
  left: 0; top: 42.4%; width: 14.2%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2ad3e6 0%, #1580f0 100%); color: #fff;
  box-shadow: 0 16px 30px -12px rgba(21, 128, 240, 0.6);
}
.te-h-who__badge svg { width: 42%; height: 42%; }

.te-h-who .te-h-title { margin-top: clamp(1rem, calc(22 * var(--u)), 1.375rem); font-size: clamp(2rem, calc(var(--te-fs-h2-lg) * var(--u)), calc(var(--te-fs-h2-lg) * 1px)); }
.te-h-who__text { margin-top: clamp(1rem, calc(30 * var(--u)), 1.875rem); font-size: clamp(1rem, calc(26 * var(--u)), 1.625rem); font-weight: var(--te-fw-body-lg); line-height: 1.45; color: var(--te-text-body); }
.te-h-who__points { margin-top: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); display: flex; flex-direction: column; gap: clamp(0.75rem, calc(14 * var(--u)), 0.875rem); }
.te-h-who__points li {
  display: flex; align-items: center; gap: clamp(1rem, calc(30 * var(--u)), 1.875rem);
  font-family: var(--te-font-display);
  font-size: clamp(1rem, calc(var(--te-fs-title-sm) * var(--u)), calc(var(--te-fs-title-sm) * 1px)); font-weight: var(--te-fw-title); line-height: 1.3; color: var(--te-text-title);
}
.te-h-who__point-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: clamp(3.25rem, calc(88 * var(--u)), 5.5rem); height: clamp(3.25rem, calc(88 * var(--u)), 5.5rem);
  border-radius: 50%; background: #e5f8fa; color: #1f8fd8;
}
.te-h-who__point-icon svg { width: 45%; height: 45%; }
.te-h-who .te-h-btn { margin-top: clamp(1.5rem, calc(30 * var(--u)), 1.875rem); }

/* ==========================================================================
   6. HOW WE WORK — dark teal band, connected timeline
   ========================================================================== */

.te-h-process {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 90% at 0% 10%, rgba(10, 75, 90, 0.75) 0%, rgba(10, 75, 90, 0) 70%),
    linear-gradient(90deg, #062a3a 0%, #071d2e 45%, #061626 100%);
  padding-block: clamp(3.5rem, calc(97 * var(--u)), 6.0625rem) clamp(3.5rem, calc(160 * var(--u)), 10rem);
}
.te-h-process > .te-h-wrap { --g: 40; position: relative; }
.te-h-process__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.te-h-process__orb--a {
  left: calc(-260 * var(--u)); top: calc(150 * var(--u)); width: calc(700 * var(--u)); aspect-ratio: 1;
  border: 1px solid rgba(37, 219, 197, 0.16); background: radial-gradient(circle, rgba(14, 90, 100, 0.35), transparent 70%);
}
.te-h-process__orb--b {
  right: calc(50 * var(--u)); bottom: calc(-200 * var(--u)); width: calc(330 * var(--u)); aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, rgba(25, 125, 125, 0.55), rgba(15, 90, 95, 0.35));
  box-shadow: 0 0 0 1px rgba(37, 219, 197, 0.12);
}
.te-h-process__dots-a { left: calc(70 * var(--u)); bottom: calc(50 * var(--u)); width: max(60px, calc(90 * var(--u))); height: max(50px, calc(70 * var(--u))); }
.te-h-process__dots-b { right: calc(30 * var(--u)); top: calc(130 * var(--u)); width: max(90px, calc(150 * var(--u))); height: max(60px, calc(90 * var(--u))); }

.te-h-process__head { text-align: center; }
.te-h-process__bar {
  display: block; margin: 0 auto clamp(1.5rem, calc(34 * var(--u)), 2.125rem);
  width: clamp(5rem, calc(138 * var(--u)), 8.625rem); height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #169c9b 0 50%, #fca52d 50% 100%);
}
.te-h-process .te-h-title { margin-top: clamp(1rem, calc(26 * var(--u)), 1.625rem); font-size: clamp(2rem, calc(var(--te-fs-h2) * var(--u)), calc(var(--te-fs-h2) * 1px)); color: var(--te-text-on-dark); }

.te-h-process__steps { margin-top: clamp(2.5rem, calc(70 * var(--u)), 4.375rem); display: grid; grid-template-columns: 1fr; gap: 2.25rem; counter-reset: none; }
@media (min-width: 640px) and (max-width: 1023px) { .te-h-process__steps { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }
@media (min-width: 1024px) { .te-h-process__steps { grid-template-columns: repeat(6, 1fr); gap: 0; } }

.te-h-process__step { --node: clamp(4rem, calc(92 * var(--u)), 5.75rem); position: relative; text-align: center; padding-inline: 0.5rem; }
.te-h-process__node {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--node); height: var(--node); border-radius: 50%;
  border: 3px solid #f3a640;
  background: radial-gradient(circle at 50% 38%, #fff3dc 0%, #ffd690 100%);
  color: #d97a06;
  box-shadow: 0 0 22px -2px rgba(245, 160, 50, 0.55);
}
.te-h-process__step:nth-child(even) .te-h-process__node {
  border-color: #2bb5a6;
  background: radial-gradient(circle at 50% 38%, #f3fcfc 0%, #bfeee8 100%);
  color: #128a80;
  box-shadow: 0 0 22px -2px rgba(43, 181, 166, 0.55);
}
.te-h-process__node svg { width: 44%; height: 44%; }
.te-h-process__num {
  position: absolute; top: -6%; right: -14%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #0a2232; background: #e6922b; color: #fff;
  font-family: var(--te-font-display); font-size: clamp(0.8125rem, calc(18 * var(--u)), 1.125rem); font-weight: var(--te-fw-extrabold);
}
.te-h-process__step:nth-child(even) .te-h-process__num { background: #1a9c94; }

/* Connector to the next node, with a midpoint dot (desktop only). */
@media (min-width: 1024px) {
  .te-h-process__step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--node) / 2 - 1px);
    left: calc(50% + var(--node) / 2); width: calc(100% - var(--node)); height: 2px;
    background: linear-gradient(90deg, #3fc9b8, #d9a43a);
  }
  .te-h-process__step:nth-child(even):not(:last-child)::after { background: linear-gradient(90deg, #d9a43a, #3fc9b8); }
  .te-h-process__step:not(:last-child)::before {
    content: ""; position: absolute; z-index: 1; top: calc(var(--node) / 2 - 7px); left: 100%;
    width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: #50d9c8; box-shadow: 0 0 10px rgba(80, 217, 200, 0.7);
  }
  .te-h-process__step:nth-child(even):not(:last-child)::before { background: #c9a548; box-shadow: 0 0 10px rgba(217, 164, 58, 0.6); }
}
.te-h-process__label {
  margin-top: clamp(1rem, calc(22 * var(--u)), 1.375rem);
  font-size: clamp(0.75rem, calc(18 * var(--u)), 1.125rem); font-weight: var(--te-fw-semibold);
  text-transform: uppercase; letter-spacing: 0.14em; color: #a9b6c3;
}
.te-h-process__step h3 { margin-top: clamp(0.375rem, calc(12 * var(--u)), 0.75rem); font-size: clamp(1.0625rem, calc(var(--te-fs-title-sm) * var(--u)), calc(var(--te-fs-title-sm) * 1px)); font-weight: var(--te-fw-title); line-height: var(--te-lh-heading); color: #fff; }
.te-h-process__desc {
  margin: clamp(0.625rem, calc(18 * var(--u)), 1.125rem) auto 0;
  max-width: max(12rem, calc(260 * var(--u)));
  font-size: clamp(0.9375rem, calc(var(--te-fs-body-lg) * var(--u)), calc(var(--te-fs-body-lg) * 1px)); font-weight: var(--te-fw-body-lg); line-height: var(--te-lh-body); color: var(--te-text-on-dark-muted);
}
@media (max-width: 1023px) {
  .te-h-process__step { display: grid; grid-template-columns: var(--node) 1fr; column-gap: 1.25rem; text-align: left; padding-inline: 0; }
  .te-h-process__node { grid-row: span 3; }
  .te-h-process__label { margin-top: 0.25rem; }
  .te-h-process__desc { margin-inline: 0; max-width: none; grid-column: 2; }
}

/* ==========================================================================
   7. WHAT SETS US APART — icon rows + photo
   ========================================================================== */

.te-h-apart {
  position: relative; overflow: hidden;
  background:
    linear-gradient(155deg, rgba(232, 240, 252, 0) 60%, rgba(232, 240, 252, 0.7) 60.2%, rgba(232, 240, 252, 0) 85%),
    #fafbff;
  padding-block: clamp(3rem, calc(50 * var(--u)), 3.125rem) clamp(3rem, calc(47 * var(--u)), 2.9375rem);
}
.te-h-apart .te-h-wrap { padding-inline: clamp(1.25rem, calc(75 * var(--u)), 4.6875rem) clamp(1.25rem, calc(112 * var(--u)), 7rem); }
.te-h-apart__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .te-h-apart__grid { grid-template-columns: minmax(0, 925fr) minmax(0, 741fr); column-gap: calc(67 * var(--u)); align-items: start; } }

.te-h-apart .te-h-eyebrow { margin-top: clamp(1rem, calc(22 * var(--u)), 1.375rem); }
.te-h-apart .te-h-title { margin-top: clamp(0.5rem, calc(12 * var(--u)), 0.75rem); font-size: clamp(2.125rem, calc(var(--te-fs-h2-xl) * var(--u)), calc(var(--te-fs-h2-xl) * 1px)); }
.te-h-apart__intro { margin-top: clamp(0.875rem, calc(16 * var(--u)), 1rem); max-width: max(26rem, calc(760 * var(--u))); font-size: clamp(1rem, calc(var(--te-fs-lead) * var(--u)), calc(var(--te-fs-lead) * 1px)); font-weight: var(--te-fw-body-lg); line-height: var(--te-lh-body); color: var(--te-text-body); }

.te-h-apart__rows { margin-top: clamp(1.25rem, calc(30 * var(--u)), 1.875rem); display: flex; flex-direction: column; gap: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); }
.te-h-apart__row { --ic: clamp(3.5rem, calc(88 * var(--u)), 5.5rem); position: relative; display: grid; grid-template-columns: var(--ic) 1fr; column-gap: clamp(1rem, calc(30 * var(--u)), 1.875rem); align-items: start; }
.te-h-apart__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ic); height: var(--ic); border-radius: 50%;
  background: #fff1d8; color: #f0890a;
}
.te-h-apart__row:nth-child(even) .te-h-apart__icon { background: #e3f4f1; color: #169386; }
.te-h-apart__icon svg { width: 42%; height: 42%; }
/* dotted connector between icons */
.te-h-apart__row:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--ic) / 2 - 1px);
  top: calc(var(--ic) + 8px); bottom: calc(-1 * clamp(1.25rem, calc(26 * var(--u)), 1.625rem) + 8px);
  border-left: 2px dotted #c7d0dc;
}
.te-h-apart__row h3 { margin-top: clamp(0.25rem, calc(12 * var(--u)), 0.75rem); font-size: clamp(1.125rem, calc(var(--te-fs-title) * var(--u)), calc(var(--te-fs-title) * 1px)); font-weight: var(--te-fw-title); line-height: var(--te-lh-heading); color: var(--te-text-title); }
.te-h-apart__row p { max-width: max(22rem, calc(770 * var(--u))); margin-top: clamp(0.375rem, calc(10 * var(--u)), 0.625rem); font-size: clamp(0.9375rem, calc(var(--te-fs-body-lg) * var(--u)), calc(var(--te-fs-body-lg) * 1px)); font-weight: var(--te-fw-body-lg); line-height: var(--te-lh-body); color: var(--te-text-muted); }

.te-h-apart__media { position: relative; }
@media (min-width: 1024px) { .te-h-apart__media { margin-top: calc(133 * var(--u)); } }
.te-h-apart__media img {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 741 / 525; height: auto; object-fit: cover;
  border-radius: clamp(1.25rem, calc(30 * var(--u)), 1.875rem);
  box-shadow: 0 30px 60px -30px rgba(10, 30, 70, 0.5);
}
.te-h-apart__blob { position: absolute; left: -16%; top: -18%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: #eaf2fd; }
.te-h-apart__orbit {
  position: absolute; right: -11%; top: 6%; width: 36%; height: 108%; border-radius: 50%;
  border: 1.5px dashed rgba(26, 140, 255, 0.35); border-left-color: transparent; border-top-color: transparent;
}
.te-h-apart__dots-a { right: 9%; top: -15%; width: 17%; height: 10%; }
.te-h-apart__dots-b { left: 20%; bottom: -18%; width: 18%; height: 11%; }
.te-h-apart__badge {
  position: absolute; z-index: 2; left: -3.2%; top: -4.4%;
  display: flex; align-items: center; justify-content: center;
  width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb84a, #f08a00);
  color: #fff; box-shadow: 0 0 0 6px rgba(255, 184, 74, 0.25), 0 14px 30px -10px rgba(240, 138, 0, 0.7);
}
.te-h-apart__badge svg { width: 44%; height: 44%; }
.te-h-apart__pin { position: absolute; z-index: 2; right: -5%; bottom: 16%; width: 4%; aspect-ratio: 1; border-radius: 50%; background: #1aa18f; }

/* ==========================================================================
   8. INDUSTRIES — featured panel + card grid
   ========================================================================== */

.te-h-industries { position: relative; overflow: hidden; background: #f8fbfe; padding-block: clamp(3rem, calc(118 * var(--u)), 7.375rem) clamp(3rem, calc(108 * var(--u)), 6.75rem); }
.te-h-industries .te-h-wrap { position: relative; padding-inline: clamp(1.25rem, calc(145 * var(--u)), 9.0625rem) clamp(1.25rem, calc(130 * var(--u)), 8.125rem); }
.te-h-industries__dots-a { right: calc(90 * var(--u)); top: calc(30 * var(--u)); width: max(80px, calc(120 * var(--u))); height: max(50px, calc(70 * var(--u))); }
.te-h-industries__dots-b { right: calc(130 * var(--u)); bottom: calc(40 * var(--u)); width: max(80px, calc(110 * var(--u))); height: max(50px, calc(60 * var(--u))); }
.te-h-industries__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .te-h-industries__grid { grid-template-columns: minmax(0, 640fr) minmax(0, 972fr); column-gap: calc(33 * var(--u)); } }

.te-h-industries__panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(30rem, calc(730 * var(--u)), 45.625rem);
  border-radius: clamp(1.25rem, calc(24 * var(--u)), 1.5rem);
  background: #f8fbff;
  box-shadow: 0 20px 50px -30px rgba(15, 40, 80, 0.35);
}
.te-h-industries__panel img { position: absolute; inset: 0 0 auto; width: 100%; height: 78%; object-fit: cover; object-position: 55% center; }
.te-h-industries__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0) 38%, rgba(248, 251, 255, 0.88) 62%, #f8fbff 76%),
    linear-gradient(90deg, rgba(220, 235, 252, 0.55) 0%, rgba(220, 235, 252, 0) 38%);
}
.te-h-industries__caption { position: relative; z-index: 1; padding: 2rem clamp(1.25rem, calc(27 * var(--u)), 1.6875rem) clamp(1.5rem, calc(42 * var(--u)), 2.625rem); }
.te-h-industries .te-h-title { margin-top: clamp(0.5rem, calc(14 * var(--u)), 0.875rem); font-size: clamp(1.875rem, calc(var(--te-fs-h2-sm) * var(--u)), calc(var(--te-fs-h2-sm) * 1px)); }
.te-h-industries__caption p:not(.te-h-eyebrow) { margin-top: clamp(0.75rem, calc(16 * var(--u)), 1rem); max-width: max(22rem, calc(490 * var(--u))); font-size: clamp(0.9375rem, calc(19 * var(--u)), 1.1875rem); line-height: 1.55; color: var(--te-text-soft); }
.te-h-industries .te-h-btn { margin-top: clamp(1.25rem, calc(28 * var(--u)), 1.75rem); }

.te-h-industries__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; align-content: start; }
@media (min-width: 640px) { .te-h-industries__list { grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, calc(12 * var(--u)), 0.75rem) clamp(0.75rem, calc(24 * var(--u)), 1.5rem); } }

/* ==========================================================================
   9. LATEST UPDATES — featured card + two row cards
   ========================================================================== */

.te-h-updates { position: relative; overflow: hidden; background: linear-gradient(160deg, #fefefe 55%, #f6f9fe); padding-block: clamp(3rem, calc(54 * var(--u)), 3.375rem) clamp(3rem, calc(90 * var(--u)), 5.625rem); }
.te-h-updates .te-h-wrap { padding-inline: clamp(1.25rem, calc(91 * var(--u)), 5.6875rem) clamp(1.25rem, calc(85 * var(--u)), 5.3125rem); }
.te-h-updates__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.te-h-updates .te-h-title { margin-top: clamp(1rem, calc(28 * var(--u)), 1.75rem); font-size: clamp(2rem, calc(var(--te-fs-h2-lg) * var(--u)), calc(var(--te-fs-h2-lg) * 1px)); }

.te-h-updates__grid { margin-top: clamp(2rem, calc(52 * var(--u)), 3.25rem); display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .te-h-updates__grid { grid-template-columns: minmax(0, 869fr) minmax(0, 830fr); gap: calc(45 * var(--u)); } }
.te-h-updates__side { display: grid; gap: clamp(1.25rem, calc(33 * var(--u)), 2.0625rem); }

.te-h-post {
  position: relative; display: flex; overflow: hidden;
  border: 1px solid #eef2f7; border-radius: clamp(1.125rem, calc(22 * var(--u)), 1.375rem); background: #fff;
  box-shadow: 0 16px 40px -26px rgba(15, 40, 80, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.te-h-post:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -26px rgba(15, 40, 80, 0.45); }
.te-h-post__media { position: relative; overflow: hidden; background: linear-gradient(135deg, #0b2a5c, #0a7cff); }
.te-h-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.te-h-post:hover .te-h-post__media img { transform: scale(1.04); }
.te-h-post__placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; }
.te-h-post__placeholder svg { width: 3rem; height: 3rem; }
.te-h-post__body { position: relative; }
.te-h-post__cat {
  display: inline-flex; align-items: center; gap: 0.5em; width: fit-content;
  padding: clamp(0.375rem, calc(8 * var(--u)), 0.5rem) clamp(0.75rem, calc(16 * var(--u)), 1rem);
  border-radius: 9999px; background: #e6f1fd;
  font-size: clamp(0.8125rem, calc(17 * var(--u)), 1.0625rem); font-weight: var(--te-fw-medium); color: var(--te-pill-text);
}
.te-h-post__cat .te-icon { width: 1.15em; height: 1.15em; }
.te-h-post__title { font-family: var(--te-font-heading); font-weight: var(--te-fw-title); line-height: 1.3; letter-spacing: -0.005em; color: var(--te-text-title); text-wrap: balance; }
.te-h-post__go {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #edf4ff; color: var(--te-text-title); transition: background 150ms ease, color 150ms ease;
}
.te-h-post__go .te-icon { width: 42%; height: 42%; }
.te-h-post:hover .te-h-post__go { background: var(--te-brand-600); color: #fff; }

/* featured: image over a white caption panel with rounded top */
.te-h-post--featured { flex-direction: column; }
.te-h-post--featured .te-h-post__media { height: clamp(13rem, calc(345 * var(--u)), 21.5625rem); }
.te-h-post--featured .te-h-post__body {
  margin-top: calc(-1 * clamp(1rem, calc(24 * var(--u)), 1.5rem));
  border-radius: clamp(1rem, calc(24 * var(--u)), 1.5rem) clamp(1rem, calc(24 * var(--u)), 1.5rem) 0 0;
  background: #fff; flex: 1;
  padding: clamp(1.25rem, calc(32 * var(--u)), 2rem) clamp(4.5rem, calc(120 * var(--u)), 7.5rem) clamp(1.5rem, calc(36 * var(--u)), 2.25rem) clamp(1.25rem, calc(44 * var(--u)), 2.75rem);
}
.te-h-post--featured .te-h-post__title { margin-top: clamp(0.75rem, calc(18 * var(--u)), 1.125rem); font-size: clamp(1.25rem, calc(var(--te-fs-title-lg) * var(--u)), calc(var(--te-fs-title-lg) * 1px)); }
.te-h-post--featured .te-h-post__go { right: clamp(1.25rem, calc(44 * var(--u)), 2.75rem); top: clamp(1.25rem, calc(32 * var(--u)), 2rem); width: clamp(2.75rem, calc(60 * var(--u)), 3.75rem); height: clamp(2.75rem, calc(60 * var(--u)), 3.75rem); }

/* row cards: image left, copy right */
.te-h-post--row { min-height: clamp(10rem, calc(247 * var(--u)), 15.4375rem); }
.te-h-post--row .te-h-post__media { flex: 0 0 30.2%; }
.te-h-post--row .te-h-post__body {
  /* Pill sits level with the arrow; the title runs full width below it. */
  flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(1.25rem, calc(60 * var(--u)), 3.75rem) clamp(1.25rem, calc(36 * var(--u)), 2.25rem) clamp(1.25rem, calc(30 * var(--u)), 1.875rem) clamp(1.25rem, calc(34 * var(--u)), 2.125rem);
}
.te-h-post--row .te-h-post__title { margin-top: clamp(0.75rem, calc(22 * var(--u)), 1.375rem); font-size: clamp(1.0625rem, calc(27 * var(--u)), 1.6875rem); font-weight: var(--te-fw-semibold); }
.te-h-post--row .te-h-post__go { right: clamp(1rem, calc(30 * var(--u)), 1.875rem); top: clamp(1rem, calc(40 * var(--u)), 2.5rem); width: clamp(2.5rem, calc(52 * var(--u)), 3.25rem); height: clamp(2.5rem, calc(52 * var(--u)), 3.25rem); }
@media (max-width: 559px) {
  .te-h-post--row { flex-direction: column; }
  .te-h-post--row .te-h-post__media { flex-basis: auto; height: 11rem; }
}

/* ==========================================================================
   10. TESTIMONIALS (not in the reference — kept, styled as a light band)
   ========================================================================== */

/* Compact band: tighter padding, quote mark beside the text instead of on
   its own line, wider card so the quote wraps in ~3 lines, not 5. */
.te-h-testimonials { background: #fbfcfe; padding-block: clamp(2.5rem, calc(64 * var(--u)), 4rem); }
.te-h-testimonials .te-eyebrow { margin-bottom: 0.5rem; }
.te-h-testimonials .te-section-heading h2 { font-size: clamp(1.75rem, calc(46 * var(--u)), 2.875rem); font-weight: var(--te-fw-display); letter-spacing: var(--te-ls-display); color: var(--te-text-heading); }
.te-h-testimonials .te-testimonials { position: relative; margin-inline: auto; margin-top: clamp(1.5rem, calc(36 * var(--u)), 2.25rem); max-width: 60rem; }
.te-h-testimonials .te-testimonial-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: start;
  border-radius: 1.25rem; border: 1px solid #eef2f7; background: #fff;
  padding: 1.5rem; box-shadow: 0 16px 40px -26px rgba(15, 40, 80, 0.35);
}
@media (min-width: 640px) { .te-h-testimonials .te-testimonial-card { padding: 2rem 2.5rem; column-gap: 1.5rem; } }
.te-h-testimonials .te-quote-icon { grid-row: span 2; height: 2.25rem; width: 2.25rem; margin-top: 0.125rem; color: var(--te-brand-200); }
.te-h-testimonials blockquote { margin: 0; font-size: 1.0625rem; font-weight: var(--te-fw-regular); line-height: 1.55; color: var(--te-text-title); }
@media (min-width: 640px) { .te-h-testimonials blockquote { font-size: clamp(1.125rem, calc(22 * var(--u)), 1.375rem); } }
.te-h-testimonials figcaption { margin-top: 0.875rem; font-size: 0.8125rem; font-weight: var(--te-fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--te-brand-600); }
@media (max-width: 479px) { .te-h-testimonials .te-testimonial-card { grid-template-columns: 1fr; } .te-h-testimonials .te-quote-icon { grid-row: auto; margin-bottom: 0.5rem; height: 1.75rem; width: 1.75rem; } }
.te-testimonial-dots { margin-top: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.te-testimonial-dot { height: 0.625rem; width: 0.625rem; border-radius: 9999px; background: var(--te-navy-200); border: none; padding: 0; transition: all 200ms ease; }
.te-testimonial-dot:hover { background: var(--te-navy-500); }
.te-testimonial-dot.is-active { width: 2rem; background: var(--te-brand-600); }

/* ==========================================================================
   11. CLOSING CTA — light band, building photo left, circuit lines right
   ========================================================================== */

.te-h-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(40% 60% at 12% 30%, rgba(225, 237, 252, 0.9), rgba(225, 237, 252, 0) 70%),
    radial-gradient(35% 55% at 92% 70%, rgba(225, 237, 252, 0.9), rgba(225, 237, 252, 0) 70%),
    linear-gradient(180deg, #fbfcfe, #f4f8fe);
  padding-block: clamp(3.5rem, calc(86 * var(--u)), 5.375rem) clamp(4rem, calc(84 * var(--u)), 5.25rem);
}
.te-h-cta__building {
  position: absolute; left: 0; bottom: 0; width: calc(640 * var(--u)); height: 88%; object-fit: cover; object-position: 20% 75%;
  opacity: 0.55; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 92%), linear-gradient(0deg, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 20%, transparent 92%), linear-gradient(0deg, #000 45%, transparent 100%);
  mask-composite: intersect;
}
.te-h-cta__circuit { position: absolute; right: calc(60 * var(--u)); bottom: calc(40 * var(--u)); width: calc(520 * var(--u)); height: auto; color: rgba(60, 140, 240, 0.4); pointer-events: none; }
.te-h-cta__inner { position: relative; }
.te-h-cta .te-h-title {
  margin: clamp(1.75rem, calc(52 * var(--u)), 3.25rem) auto 0;
  max-width: max(18rem, calc(930 * var(--u)));
  font-size: clamp(2rem, calc(var(--te-fs-h2-lg) * var(--u)), calc(var(--te-fs-h2-lg) * 1px)); line-height: 1.2;
}
.te-h-cta p {
  margin: clamp(1.25rem, calc(28 * var(--u)), 1.75rem) auto 0;
  max-width: max(20rem, calc(880 * var(--u)));
  font-size: clamp(1rem, calc(27 * var(--u)), 1.6875rem); font-weight: var(--te-fw-body-lg); line-height: 1.63; color: var(--te-text-body);
}
.te-h-cta .te-h-btn { margin-top: clamp(1.75rem, calc(48 * var(--u)), 3rem); }
@media (max-width: 1023px) {
  .te-h-cta__building { width: 60%; opacity: 0.4; }
  .te-h-cta__circuit { width: 45%; opacity: 0.6; }
}