/* ═══════════════════════════════════════════════════════════════════
   home-new.css — experimental homepage stylesheet
   ─────────────────────────────────────────────────────────────────────
   Loaded ONLY by views/index-new.ejs (route: /home-new)
   Scoped under the .home-new wrapper so nothing leaks to other pages.

   How to use:
     .home-new .hn-hero { ... }           // override an existing rule
     .home-new .hn-new-thing { ... }      // brand new experimental class

   Every rule MUST start with .home-new — that is what makes this file
   safe to edit without touching the live homepage or any other page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section 1: Hero — black page, rounded card, dot-matrix face ──── */

.home-new {

  /* Rounding lives in two tokens so the page can move between the ltm look
     (rounded containers, pill controls) and the squared-off one without
     hunting through rules. Containers are rounded already, since the hero
     card always has been. Controls are square, which is what was approved
     earlier; set --hn-r-ctrl to 999px to make every button a pill. */
  --hn-r-card: 18px;
  --hn-r-ctrl: 0px;
}

/* Hero and ask box sit on one stage so the dust canvas can span both. The
   stage owns the black ground and the clipping that .hn-hero used to. */
.home-new .hn-stage {
  position: relative;
  /* Dark navy rather than black, deepening down to brand navy across the
     full bottom edge. Every stop stays LIGHTER than the hero card's own
     gradient: the card has no border, so tone difference is the only thing
     drawing its edge. */
  background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%);
  overflow: hidden;
}

.home-new .hn-hero {
  position: relative;
  background: transparent;
  /* Top trimmed 48 -> 32: the floating nav pill already reserves its own
     clearance, so this was stacking extra gap under it and pushing the
     Ask Entexis AI block below the fold. */
  padding: 32px 40px 28px;
}


/* The rounded card itself */
.home-new .hn-card {
  position: relative;
  z-index: 1;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  /* The copy block's own height, written out. Fixed (not min-), so nothing
     the copy does can resize it and the page below never moves. It reads
     only the viewport WIDTH (via the headline's 5.4vw clamp), never the
     height, so Safari and Chrome render it identically — and there is no
     dead space above or below, unlike a flat number.
         342px = eyebrow 39 + headline margin 30 + lede 125 + CTA 52 + padding 96
         3.44  = 3 headline lines x 1.12 line-height + its 0.08em pad   */
  height: calc(342px + 3.44 * clamp(40px, 5.4vw, 76px));
}

.home-new .hn-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-new .hn-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 48%, rgba(0,150,199,0.22) 0%, transparent 58%),
    radial-gradient(ellipse at 22% 78%, rgba(247,127,0,0.14) 0%, transparent 55%),
    linear-gradient(135deg, #0a1026 0%, #111b3e 45%, #16233f 100%);
  /* Cut the left away so the stage shows straight through: two things that
     are the same pixels cannot look different. A mask changes alpha only, so
     every colour stop on the right is exactly as before. Fully opaque by 44%,
     and the animation starts at 52%, so its backdrop is untouched. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
}

/* Real portrait video, shown only if /video/hero.mp4 loads */
.home-new .hn-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.85) contrast(1.05);
}
.home-new .hn-portrait[hidden] { display: none; }

/* Dot-matrix face canvas */
.home-new .hn-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  /* Masked on the same line as the card background. The animation's core sits
     right of 56%, but its traces and scan sweep reach to about 37%, and with
     the left wash removed there is nothing there to hide them: they were
     showing through under the copy. Fading the canvas out on the left stops
     it being drawn there at all, rather than covering it back over, which
     would undo the merge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
}
.home-new .hn-face.hn-face-over-video { mix-blend-mode: plus-lighter; }

/* Left-side legibility scrim so text always reads over the face */
/* Left-hand wash behind the copy. Dark navy rather than near-black, matching
   the stage: rgb(18,28,58) is #121c3a. */
.home-new .hn-card-fade {
  position: absolute;
  inset: 0;
  /* Only the horizontal scrim behind the left copy — the previous
     top+bottom vertical wash was pulling ~35–45% dark navy over the
     animation area, dulling the brand colours. Removed so the code /
     API / dashboard / bars / SEO slides render at their real
     Entexis-brand saturation. */
  background:
    linear-gradient(90deg, rgba(18,28,58,0.94) 0%, rgba(18,28,58,0.72) 34%, rgba(18,28,58,0.10) 62%, transparent 100%);
  /* Cut the left away so the stage shows straight through: two things that
     are the same pixels cannot look different. A mask changes alpha only, so
     every colour stop on the right is exactly as before. Fully opaque by 44%,
     and the animation starts at 52%, so its backdrop is untouched. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 44%, #000 100%);
}

.home-new .hn-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 648, not 620: the copy box is max-width minus the 64px left padding,
     so 620 gave the headline 556px. The widest headline line measures
     559px ("your operations" on slide 1 — the accent slot is locked to
     the longest variant, so it wrapped on every rotation), which made
     that slide 4 lines while every other slide is 3. With the card
     vertically centring its copy, that 1-line difference moved the whole
     block each time the slide came round. 648 gives 584px: 25px of
     headroom over the widest line. */
  max-width: 648px;
  /* 48 rather than 64 top/bottom: 32px off the card's height, which the
     pin below tracks. Left padding stays 64 so the copy keeps its inset. */
  padding: 48px 0 48px 64px;
}

.home-new .hn-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0096c7;
  margin-bottom: 22px;
}

.home-new .hn-headline {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 30px;
  padding-top: 0.08em;
  color: #fff;
  max-width: 13ch;
}

/* ── Headline word-by-word entrance ─────────────────────────── */
/* No margin here: the spans are inline-block, so the newline between them in
   the markup already renders as a real space. Adding margin on top of that is
   what was double-spacing the headline. */
.home-new .hn-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotateX(30deg);
  filter: blur(8px);
  transform-origin: 50% 100%;
  animation: hnWordIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.11s + 0.25s);
  will-change: transform, opacity, filter;
}

@keyframes hnWordIn {
  0%   { opacity: 0; transform: translateY(0.55em) rotateX(30deg); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}

/* Accent slot. All of a slide's variants sit stacked in one grid cell, so the
   slot's width is locked to the longest and the rest of the headline never
   reflows as the word changes. Only .is-active is visible. */
.home-new .hn-accent-wrap {
  display: inline-grid;
  grid-template-columns: 1fr;
  text-align: left;
  vertical-align: bottom;
}

.home-new .hn-headline .hn-accent {
  grid-area: 1 / 1;
  display: inline-block;
  background: linear-gradient(110deg, #0096c7 0%, #4aaa57 35%, #f77f00 55%, #0096c7 80%, #4aaa57 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hnShimmer 5s linear infinite;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.42s ease;
  pointer-events: none;
}
.home-new .hn-headline .hn-accent.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.home-new .hn-headline .hn-accent.is-leaving {
  opacity: 0;
  transform: translateY(-0.35em);
  filter: blur(6px);
}
@keyframes hnShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Outgoing copy lifts away as the scan sweep starts, so the text change and
   the effect change land as a single event rather than two. */
.home-new .hn-hero-content.is-exiting .hn-eyebrow,
.home-new .hn-hero-content.is-exiting .hn-headline,
.home-new .hn-hero-content.is-exiting .hn-lede,
.home-new .hn-hero-content.is-exiting .hn-cta-col {
  opacity: 0;
  transform: translateY(-16px);
  filter: blur(4px);
  transition: opacity 0.36s ease,
              transform 0.36s cubic-bezier(0.4, 0, 1, 1),
              filter 0.36s ease;
}

/* Cascade reveal for eyebrow / lede / CTAs */
.home-new .hn-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: hnReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--rd, 0s);
}
@keyframes hnReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  .home-new .hn-word,
  .home-new .hn-reveal {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .home-new .hn-headline .hn-accent { animation: none; }
  .home-new .hn-bg-gradient { animation: none; }
}

/* Forced breaks (from "|" in the slide copy) only apply on wide layouts.
   Below that the column is too narrow for them to help, so they are disabled
   and the text wraps naturally. */
.home-new .hn-lede br,
.home-new .hn-headline br { display: none; }
@media (min-width: 1100px) {
  .home-new .hn-lede br,
  .home-new .hn-headline br { display: inline; }
}

.home-new .hn-lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0 0 36px;
  /* Hold 3 lines, the most any slide uses. Ledes run 2 or 3 lines; without
     this the block shrinks on the 2-line slides and re-centres inside the
     fixed card, which moves the eyebrow and buttons. */
  min-height: calc(3 * 1.65em);
}

/* Stacked pill CTAs, like the reference */
.home-new .hn-cta-col {
  display: flex;
  /* Side by side, not stacked. Two stacked buttons cost ~66px of height,
     which is what pushed the copy past the card's fixed 640px ceiling and
     clipped the second one out of sight on large screens. In a row they
     cost one button's height. Wraps back to two lines if the labels are
     ever too wide for the copy column. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Colour/border/shape come from site-buttons.css (single source of truth).
   Local rules only set the sizing/layout specific to the hero. */
.home-new .hn-cta-primary,
.home-new .hn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.home-new .hn-cta-primary svg,
.home-new .hn-cta-secondary svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.home-new .hn-cta-primary { box-shadow: none; }
.home-new .hn-cta-primary:hover { transform: none; box-shadow: none; }
.home-new .hn-cta-secondary:hover { background: transparent; }
.home-new .hn-play { font-size: 12px; line-height: 1; }

/* Rounded header CTAs, scoped to /home-new only via the .home-new wrapper.
   Live pages keep their existing squared nav buttons. */
.home-new .nav-cta,
.home-new .mob-cta {
  border-radius: 999px;
}

/* ── AI box (below the hero) ─────────────────────────────────────── */

/* Sits on the same black ground as the hero so there is no seam under the
   card. Horizontal padding matches .hn-hero so the edges line up. */
.home-new .hn-ai-box-section {
  /* Break out of the dark hero stage — the whole ask block reads on a
     soft grey→white gradient card, giving it a bit of depth against
     the stage's navy gradient behind. Width matches the floating nav
     pill (max 1440px) and is centred so the card sits directly under
     the header. */
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  padding: 40px 32px 48px !important;
  margin: 12px auto 0 !important;
  max-width: 1440px !important;
  width: calc(100% - 80px) !important;   /* 40px gutter each side matches .hn-work section padding */
  border-radius: 18px !important;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
}

/* ── Ask section heading ──────────────────────────────────────────────
   Without this the ask box read as a stray control hanging off the hero.
   The kicker + rule matches the section-label pattern used further down
   the page. */
.home-new .hn-ai-head {
  max-width: 880px;
  margin: 0 auto 16px;
  position: relative;
  z-index: 3;
}
.home-new .hn-ai-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy, #1a2857);
  margin-bottom: 9px;
}
.home-new .hn-ai-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--navy, #1a2857);
}
.home-new .hn-ai-title {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy, #1a2857);
  letter-spacing: -0.01em;
}

/* No outer card: with square corners a bordered box wrapping a bordered pill
   read as two stacked rectangles. The pill carries the design on its own. */
.home-new .hn-ai-box {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  background: transparent;
  border: 0;
  padding: 0;
}

.home-new .hn-ai-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(26,40,87,0.14);
  border-radius: 999px;
  padding: 10px 10px 10px 20px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.home-new .hn-ai-pill:hover { border-color: rgba(26,40,87,0.28); }
.home-new .hn-ai-pill:focus-within {
  border-color: rgba(0,150,199,0.55);
  box-shadow: 0 0 0 3px rgba(0,150,199,0.15);
}

.home-new .hn-ai-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef1f6;
  border: 1.5px solid rgba(26, 40, 87, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-new .hn-ai-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-new .hn-ai-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--navy, #1a2857);
  font-size: 16px;
  font-family: inherit;
  padding: 10px 6px;
}
.home-new .hn-ai-input::placeholder {
  color: rgba(26,40,87,0.45);
}

.home-new .hn-ai-submit {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid #ffffff;
  background: #1a2857;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease;
  box-shadow: none;
}
.home-new .hn-ai-submit svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.home-new .hn-ai-submit:hover svg { transform: translateX(2px); }

.home-new .hn-ai-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.home-new .hn-ai-suggest-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  margin-right: 6px;
}

.home-new .hn-ai-chip {
  background: #f5f6f9;
  border: 1px solid rgba(26,40,87,0.10);
  color: var(--navy, #1a2857);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-new .hn-ai-chip:hover {
  background: var(--navy, #1a2857);
  border-color: var(--navy, #1a2857);
  color: #ffffff;
}

.home-new .hn-ai-powered {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,40,87,0.45);
  text-align: left;
}

/* ── Ask Entexis AI: chat turns stack. Each turn is one Q + one A.
   Turns append to the top of the .hn-ai-box, and the input pill sits
   AFTER them — so the input visually moves down as the conversation
   grows, like a chat log. */
.home-new .hn-ai-turns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.home-new .hn-ai-turns:empty { display: none; }
.home-new .hn-ai-turns::-webkit-scrollbar { width: 6px; }
.home-new .hn-ai-turns::-webkit-scrollbar-track { background: transparent; }
.home-new .hn-ai-turns::-webkit-scrollbar-thumb {
  background: rgba(26,40,87,0.2);
  border-radius: 3px;
}
.home-new .hn-ai-turns::-webkit-scrollbar-thumb:hover { background: rgba(26,40,87,0.35); }
.home-new .hn-ai-turn {
  padding: 20px 20px 18px;
  background: #f5f6f9;
  border: 1px solid rgba(26,40,87,0.08);
  border-radius: 12px;
}
/* Markdown tables inside AI answers — render as a clean table instead
   of leaking raw `|---|` pipes into the copy. */
.home-new .hn-ai-a table.hn-ai-tbl {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 14px;
}
.home-new .hn-ai-a table.hn-ai-tbl th,
.home-new .hn-ai-a table.hn-ai-tbl td {
  padding: 8px 12px;
  border: 1px solid rgba(26,40,87,0.12);
  text-align: left;
  vertical-align: top;
  color: var(--navy, #1a2857);
}
.home-new .hn-ai-a table.hn-ai-tbl th {
  background: rgba(26,40,87,0.05);
  font-weight: 700;
}
/* Legacy .hn-ai-answer selector kept for backward compat if any cache
   still references it. */
.home-new .hn-ai-answer {
  margin-top: 14px;
  padding: 20px 20px 18px;
  background: #f5f6f9;
  border: 1px solid rgba(26,40,87,0.08);
  border-radius: 12px;
}

.home-new .hn-ai-q {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(26,40,87,0.10);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted, #6b7280);
}

.home-new .hn-ai-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy, #1a2857);
  word-wrap: break-word;
  font-weight: 400;
}
/* Normalize any AI-authored inline element (h1..h6, p, strong, em) so
   the answer reads at body-text size. Streamed markdown often renders
   as h2/h3 which would otherwise blow up the font. */
.home-new .hn-ai-a p,
.home-new .hn-ai-a h1,
.home-new .hn-ai-a h2,
.home-new .hn-ai-a h3,
.home-new .hn-ai-a h4,
.home-new .hn-ai-a h5,
.home-new .hn-ai-a h6 {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0 0 10px;
  color: inherit;
}
.home-new .hn-ai-a strong { font-weight: 700; color: var(--navy, #1a2857); }
.home-new .hn-ai-a a { color: var(--teal, #0096c7); text-decoration: none; border-bottom: 0; }
.home-new .hn-ai-a a:hover { text-decoration: underline; }
.home-new .hn-ai-a ul { margin: 10px 0 0; padding-left: 20px; }
.home-new .hn-ai-a li { margin-bottom: 6px; font-size: 15px; }
.home-new .hn-ai-a code {
  font-size: 0.92em;
  padding: 1px 5px;
  background: rgba(26,40,87,0.06);
}


/* Typing dots, shown until the first streamed chunk lands. */
.home-new .hn-ai-dots { display: inline-flex; align-items: center; gap: 5px; height: 20px; }
.home-new .hn-ai-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26,40,87,0.55);
  animation: hnAiDot 1.1s ease-in-out infinite;
}
.home-new .hn-ai-dots i:nth-child(2) { animation-delay: 0.16s; }
.home-new .hn-ai-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes hnAiDot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .home-new .hn-ai-dots i { animation: none; opacity: 0.55; }
}

/* While a reply is in flight the input is disabled; say so visually. */
.home-new .hn-ai-box.is-busy .hn-ai-pill { opacity: 0.62; }
.home-new .hn-ai-box.is-busy .hn-ai-submit { cursor: default; }

@media (max-width: 720px) {
  .home-new .hn-ai-answer { padding: 16px 15px 15px; }
  .home-new .hn-ai-a { font-size: 15px; }
}


/* ── Responsive tweaks ────────────────────────────────────────────── */

/* Narrow desktop / large tablet: keep the animation on the right, just give
   the text column less room and lean harder on the scrim for legibility. */
@media (max-width: 1100px) {
  .home-new .hn-hero { padding: 32px 24px 24px; }
  .home-new .hn-ai-box-section { padding: 0 40px 58px; }
  .home-new .hn-hero-content { padding: 56px 0 56px 44px; max-width: 500px; }
  .home-new .hn-headline { font-size: clamp(36px, 5vw, 56px); }
  .home-new .hn-card-fade {
    /* Only the horizontal scrim behind the left copy — vertical wash
       removed so the animation reads at full brand saturation. */
    background:
      linear-gradient(90deg, rgba(18,28,58,0.96) 0%, rgba(18,28,58,0.82) 40%, rgba(18,28,58,0.24) 68%, transparent 100%);
  }
}

@media (max-width: 900px) {
  .home-new .hn-hero { padding: 24px 18px 22px; }
  .home-new .hn-card { border-radius: 22px; }
  .home-new .hn-hero-content { padding: 44px 0 44px 32px; max-width: 420px; }
  .home-new .hn-headline { font-size: clamp(32px, 6vw, 44px); max-width: 12ch; }
  .home-new .hn-lede { font-size: 15px; margin-bottom: 28px; }
  .home-new .hn-cta-col { gap: 12px; }
  .home-new .hn-card-fade {
    /* Only the horizontal scrim behind the left copy — vertical wash
       removed so the animation reads at full brand saturation. */
    background:
      linear-gradient(90deg, rgba(18,28,58,0.97) 0%, rgba(18,28,58,0.88) 46%, rgba(18,28,58,0.34) 74%, transparent 100%);
  }
  .home-new .hn-ai-box { padding: 20px 18px 18px; }
  .home-new .hn-ai-box-section {
    padding: 24px 18px 32px !important;
    width: calc(100% - 24px) !important;   /* 12px gutter each side on tablet */
    margin-top: 12px !important;
  }
}

/* Genuine phones only: stack the animation above the text. */
@media (max-width: 720px) {
  /* Drop the left-hand mask. It exists so the card's left edge merges with the
     stage on desktop, where the animation sits right of centre. Stacked, the
     animation is centred (faceCx = w * 0.50), so the same mask cuts away more
     than half of it. There is no edge to merge here anyway: the copy sits
     below the artwork, not beside it. */
  .home-new .hn-bg-gradient,
  .home-new .hn-card-fade,
  .home-new .hn-face {
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* With the mask gone the card's own ground is fully visible, and its
     135deg ramp starts at #0a1026 — much darker than the stage behind it,
     so the card read as a dark patch. Drop the opaque base layer entirely
     and let the stage show through: no base, no tonal step, no edge. The
     two brand washes stay, additively, so the card keeps its glow. */
  .home-new .hn-bg-gradient {
    background:
      radial-gradient(ellipse at 50% 40%, rgba(0,150,199,0.18) 0%, transparent 60%),
      radial-gradient(ellipse at 25% 80%, rgba(247,127,0,0.10) 0%, transparent 55%);
  }
  /* Nudge the animation canvas up ~50px on phones so it sits higher
     in the card between the copy and the buttons. `top: -50px`
     overrides the `inset: 0` baseline as a layout change (not a
     paint-time transform), so it lands in place on first paint
     instead of jerking into position. */
  .home-new .hn-face { top: -50px; bottom: 50px; }

  .home-new .hn-hero { padding: 16px 14px 20px; }
  /* Fixed height so the animation band stays predictable: with auto height the
     card would size to the text, and the band would move per slide. Taller
     than before, because the artwork now needs room BETWEEN the copy and the
     buttons rather than a zone above everything. */
  /* Short enough that the buttons, pinned to the bottom by margin-top:auto,
     land over the lower edge of the artwork instead of sitting in a band of
     empty space beneath it. */
  .home-new .hn-card { height: 640px; border-radius: 20px; align-items: stretch; }
  /* Copy becomes a full-height column: eyebrow, headline and lede sit at the
     top, the buttons are pushed to the bottom with margin-top:auto, and the
     space left between them is the band the animation draws into. */
  .home-new .hn-hero-content {
    max-width: none;
    padding: 30px 22px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Without this the column is 100% of the card PLUS 60px of padding, so it
       runs 60px past the card and overflow:hidden clips the buttons off the
       bottom. Scoped to this breakpoint: the desktop rule sizes by max-width,
       where border-box would narrow the copy instead. */
    box-sizing: border-box;
  }
  /* margin-top:auto pins the buttons to the bottom; the bottom margin then
     lifts them clear of it, so they sit well inside the artwork rather than
     along its lower edge. Raising them this way keeps the card height, and
     so keeps the animation its full size. */
  /* Back to stacked on phones — the copy column is too narrow to sit two
     buttons side by side, and here the card is a fixed 640px with the
     buttons pinned to the bottom, so the height is not under pressure. */
  .home-new .hn-cta-col { flex-direction: column; align-items: flex-start; margin-top: auto; margin-bottom: 50px; }
  .home-new .hn-headline { max-width: 16ch; margin-bottom: 14px; }
  .home-new .hn-eyebrow { margin-bottom: 10px; }
  /* The copy no longer sits on top of the artwork, so the heavy scrim that
     used to hide the band is gone. */
  /* The artwork now runs under the copy at the top and under the buttons at
     the bottom, so the scrim does the legibility work: heavy behind the
     eyebrow / headline / lede, clear through the middle where the animation
     should be seen, and moderate again behind the buttons. */
  .home-new .hn-card-fade {
    background: linear-gradient(180deg,
      rgba(18,28,58,0.90) 0%,
      rgba(18,28,58,0.82) 30%,
      rgba(18,28,58,0.16) 46%,
      rgba(18,28,58,0.10) 68%,
      rgba(18,28,58,0.58) 100%);
  }
  .home-new .hn-ai-box-section {
    padding: 20px 14px 28px !important;
    width: calc(100% - 20px) !important;   /* 10px gutter each side on phone */
    margin-top: 10px !important;
  }
}

@media (max-width: 560px) {
  .home-new .hn-headline { font-size: 34px; max-width: 14ch; }
  .home-new .hn-hero-content { padding: 26px 20px 26px; }
  .home-new .hn-cta-primary,
  .home-new .hn-cta-secondary {
    padding: 14px 24px;
    font-size: 15px;
  }
  .home-new .hn-ai-pill { padding: 6px 6px 6px 10px; }
  .home-new .hn-ai-avatar { width: 34px; height: 34px; font-size: 15px; }
  .home-new .hn-ai-submit { width: 34px; height: 34px; }
  .home-new .hn-ai-input { font-size: 15px; }
  .home-new .hn-ai-suggest-label { display: block; margin-bottom: 2px; }
}

/* Entexis mark as corner texture: oversized and deliberately cropped by the
   card corners, so it reads as a watermark rather than a floating logo. */
.home-new .hn-mark {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0.07;
  aspect-ratio: 119 / 100;   /* the mark's true proportions */
  height: auto;
}
.home-new .hn-mark-br {
  right: -7%;
  bottom: -16%;
  width: 42%;
  transform: rotate(-8deg);
}
.home-new .hn-mark-tl {
  left: -9%;
  top: -14%;
  width: 26%;
  transform: rotate(6deg);
  opacity: 0.05;
}

@media (max-width: 900px) {
  .home-new .hn-mark-br { width: 52%; right: -12%; bottom: -12%; }
  .home-new .hn-mark-tl { width: 34%; }
}


/* ── Section: Work — bento grid ───────────────────────────────────────
   White section ground with dark cards sitting on it. Each card carries a
   title, a short description and a Read more link. No hover state and no
   background texture, by request. */
.home-new .hn-work {
  border-top: 0;
  /* The hero ended black and this section began white, so the seam read as a
     hard cut. The section now carries the handover itself: it starts on the
     hero's navy, turns over behind the cards, and lands on white before the
     next section. The cards straddle the turn, which is what bridges it. */
  background: linear-gradient(180deg,
    #1a2857 0%,
    #16214a 12%,
    #121c3a 30%,
    #eef1f6 58%,
    #ffffff 100%);
  /* Vertical rhythm matched to the ask section above: its spacing is the
     hero's bottom padding plus its own margin-top (28 + 34 = 62), mirrored
     by its bottom padding. Those numbers change per breakpoint, so this
     section follows them at each one. */
  padding: 62px 40px 62px;
}

/* Heading on the left, the all-case-studies link on the right, baselines
   lined up at the bottom of the title. */
.home-new .hn-work-head {
  max-width: 1440px;
  margin: 0 auto 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.home-new .hn-work-head-text { min-width: 0; }

.home-new .hn-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.home-new .hn-rule { display: block; width: 28px; height: 2px; background: #0096c7; }

.home-new .hn-work-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* Wide top-left, tall right spanning both rows, two narrow below. */
.home-new .hn-bento {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1.05fr;
  grid-template-rows: 300px 300px;
  gap: 18px;
}
.home-new .hn-bento-0 { grid-column: 1 / 3; grid-row: 1; }
.home-new .hn-bento-1 { grid-column: 3;     grid-row: 1 / 3; }
.home-new .hn-bento-2 { grid-column: 1;     grid-row: 2; }
.home-new .hn-bento-3 { grid-column: 2;     grid-row: 2; }

.home-new .hn-bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--hn-r-card);
  /* Gradient is set per card below. No border: the tiles on the live
     industries section define themselves by colour alone. */
  display: flex;
  flex-direction: column;
  /* Text sits in the lower half, where the gradient has darkened. The live
     industries tiles do the same: only an icon occupies the bright corner.
     White on the bright end measures 2.6:1 on orange, which is unreadable;
     down here it measures 5.2:1 or better. */
  justify-content: flex-end;
  padding: 30px 30px 26px;
  text-decoration: none;
  color: inherit;
}

/* The live site's industry-card gradient: the brand colour at the top running
   into brand navy, navy stop past 100% so it never fully arrives. Each card
   keeps its own hue. Brand palette only. */
/* Flat solid brand colours with a subtle top-left highlight bloom for depth.
   Tokens defined in public/entexis.css. */
.home-new .hn-bento-card {
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.home-new .hn-bento-0 { background-color: var(--teal); }
.home-new .hn-bento-1 { background-color: var(--orange); }
.home-new .hn-bento-2 { background-color: var(--green); }
.home-new .hn-bento-3 { background-color: var(--navy); }

/* Experiment: card 0 flipped light. White background, body-text navy,
   same top-left dark bloom intensity as the colored cards so the row
   reads consistently. */
.home-new .hn-bento-0 {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.home-new .hn-bento-0 .hn-bento-name { color: var(--navy); }
.home-new .hn-bento-0 .hn-bento-sub { color: var(--muted); }
.home-new .hn-bento-0 .hn-bento-more { color: var(--navy); }
/* SVG art was white/light-teal so it disappeared on the flipped card;
   recolor to navy for the faint background strokes and brand teal for
   the picked-out accent so it shows on white. */
.home-new .hn-bento-0 .hn-bento-art g:nth-of-type(1) { stroke: rgba(26,40,87,0.28); }
.home-new .hn-bento-0 .hn-bento-art g:nth-of-type(2) { fill: rgba(26,40,87,0.55); }
.home-new .hn-bento-0 .hn-bento-art g:nth-of-type(3) { stroke: var(--teal); }
.home-new .hn-bento-0 .hn-bento-art > circle { fill: var(--teal); }

/* Top-right corner only, so it never reaches the copy. No scrim needed. */
.home-new .hn-bento-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
}
/* Card 4 is a narrow tile, so its waveform gets a little more width to read. */
.home-new .hn-bento-3 .hn-bento-art { width: 58%; height: 46%; }

.home-new .hn-bento-body { position: relative; z-index: 1; }

/* Insights listing bento — category kicker above title, date below. */
.blog-bento-wrap .hn-bento-cat {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.blog-bento-wrap .hn-bento-date {
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
}
.blog-bento-wrap .hn-bento-0 .hn-bento-cat { color: rgba(26,40,87,0.7); }
.blog-bento-wrap .hn-bento-0 .hn-bento-date { color: rgba(26,40,87,0.55); }

/* Index number badge in the top-right of each bento card. */
.blog-bento-wrap .hn-bento-card { position: relative; }
.blog-bento-wrap .hn-bento-num {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.blog-bento-wrap .hn-bento-0 .hn-bento-num { color: rgba(26,40,87,0.35); }

.home-new .hn-bento-name {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* Two lines, so a long case-study subtitle cannot push the card out of shape */
.home-new .hn-bento-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-new .hn-bento-1 .hn-bento-sub { -webkit-line-clamp: 4; }

.home-new .hn-bento-more {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.home-new .hn-bento-more svg { width: 17px; height: 17px; }

/* No border, no box: a plain link sitting opposite the heading. */
.home-new .hn-work-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 0 0 6px;
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.home-new .hn-work-btn svg { width: 16px; height: 16px; }

/* Holds the two case-studies actions on the right of the head. Kept as a
   flex row so the head's space-between still pushes them off the title. */
.home-new .hn-work-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
}
@media (max-width: 700px) {
  .home-new .hn-work-actions { gap: 16px; flex-wrap: wrap; }
}

@media (max-width: 1100px) {
  /* Padding tightens here but the 3-column bento holds — iPad users
     still see the desktop layout. The 2-column intermediate now kicks
     in later, at 900px, so case-studies' impact grid and this bento
     collapse at the same breakpoint. */
  .home-new .hn-work { padding: 58px 40px 58px; }
}
@media (max-width: 900px) {
  .home-new .hn-work { padding: 50px 40px 50px; }
  .home-new .hn-bento { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 260px); }
  .home-new .hn-bento-0 { grid-column: 1 / 3; grid-row: 1; }
  .home-new .hn-bento-1 { grid-column: 1 / 3; grid-row: 2; }
  .home-new .hn-bento-2 { grid-column: 1; grid-row: 3; }
  .home-new .hn-bento-3 { grid-column: 2; grid-row: 3; }
  .home-new .hn-bento-1 .hn-bento-sub { -webkit-line-clamp: 2; }
}
@media (max-width: 720px) {
  .home-new .hn-work { padding: 42px 18px 42px; }
  .home-new .hn-work-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .home-new .hn-bento { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .home-new .hn-bento-card { grid-column: 1 !important; grid-row: auto !important; min-height: 220px; padding: 24px 22px 22px; }
}


/* ── Section: Updates ─────────────────────────────────────────────────
   Sits straight after the case studies and is deliberately built like them:
   colour-led cards, brand colour at the top left darkening to the bottom
   right, light copy, rounded container with square controls. */
.home-new .hn-news {
  /* Same three-stop vertical navy ramp used by the hero stage above, so
     the insight mosaic feels like a continuation of the hero's ground. */
  background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%);
  padding: 62px 40px 62px;
}

.home-new .hn-news-head {
  max-width: 1440px;
  margin: 0 auto 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.home-new .hn-news-head-text { min-width: 0; }
/* The shared teal kicker measures 3.0 against this section's teal-tinted top
   left corner. A lighter tint of the same brand hue, scoped to this section. */
.home-new .hn-news .hn-kicker { color: #ffffff; }
.home-new .hn-news .hn-rule { background: #ffffff; }

/* Case studies section kicker sits at the top of the dark-navy gradient. */
.home-new .hn-work .hn-kicker { color: #ffffff; }
.home-new .hn-work .hn-rule { background: #ffffff; }

.home-new .hn-news-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.home-new .hn-news-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 0 0 6px;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.home-new .hn-news-all svg { width: 16px; height: 16px; }

.home-new .hn-news-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Wipro-style chunky solid-color tiles, zero gap so the grid reads as one
   coloured mosaic. Big padding, big type, bottom-anchored READ MORE. */
.home-new .hn-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 380px;
  border-radius: 0;
  padding: 40px 36px 36px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: filter .25s ease;
  /* Subtle top-left darkening bloom for depth, layered over the per-card
     inline background-color. */
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
}
.home-new .hn-news-card:hover { filter: brightness(1.08); }
.home-new .hn-news-card:hover .hn-news-more svg { transform: translateX(4px); }

/* Middle strip spans the full grid width and separates the two card rows.
   Hairline gradient grey top border, fading in/out horizontally, to give
   the strip a soft edge against the coloured mosaic above. */
.home-new .hn-news-strip {
  grid-column: 1 / -1;
  background: #ffffff;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, transparent 0%, #94a3b8 50%, transparent 100%) 1;
}
.home-new .hn-news-strip-copy {
  margin: 0;
  color: var(--navy);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 780px;
}
.home-new .hn-news-strip-copy strong { font-weight: 700; }
.home-new .hn-news-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  flex: none;
  transition: transform .2s ease, background .2s ease;
}
.home-new .hn-news-strip-btn:hover { background: var(--teal); transform: translateX(2px); }
.home-new .hn-news-strip-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.home-new .hn-news-strip-btn:hover svg { transform: translateX(3px); }

/* Only the four outer corners of the mosaic are rounded, even with the
   strip inserted between the two card rows. 6 cards in a 3-col grid split
   3 + strip + 3. DOM positions: cards 1-3 top, strip nth-child(4),
   cards nth-child(5-7) bottom. */
/* Corner rounding is keyed off the ENDS of the list, not fixed positions.
   The old nth-child(1/3/5/7) assumed the homepage's exact layout: 6 cards
   with the CTA strip as child 4, so 7 children. Service pages render the
   same mosaic with 6 cards and NO strip, where (5) put a rounded corner in
   the middle of the block and (7) matched nothing, so the last card never
   got its bottom-right. first-child / nth-last-child(3) / last-child give
   the right four corners for both, since the bottom row always starts 3
   children from the end in a 3-column grid. */
.home-new .hn-news-grid > .hn-news-card:first-child      { border-top-left-radius: var(--hn-r-card); }
.home-new .hn-news-grid > .hn-news-card:nth-child(3)     { border-top-right-radius: var(--hn-r-card); }
.home-new .hn-news-grid > .hn-news-card:nth-last-child(3){ border-bottom-left-radius: var(--hn-r-card); }
.home-new .hn-news-grid > .hn-news-card:last-child       { border-bottom-right-radius: var(--hn-r-card); }

/* Category mark, bottom right — anchors the tile opposite the READ MORE
   pill on the bottom left. */
/* Footer row: READ MORE left, category mark right, centred on each other.
   Was absolutely positioned at bottom:32px, which never lined up with the
   READ MORE sitting in flow above the card's 36px bottom padding. */
.home-new .hn-news-foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.home-new .hn-news-art {
  flex: none;
  width: 44px;
  height: 44px;
  color: #fff;
  opacity: 0.55;
  pointer-events: none;
}

.home-new .hn-news-cat {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 6px;
}
.home-new .hn-news-date {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
}
.home-new .hn-news-card.hn-news-light .hn-news-date { color: rgba(26,40,87,0.55); }

/* Full title, normal case. No clamp; grid rows auto-size to the tallest. */
.home-new .hn-news-name {
  margin: 0 0 18px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

/* 3-line excerpt, pushed to the bottom so READ MORE anchors the tile. */
.home-new .hn-news-exc {
  margin: 0 0 auto;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-new .hn-news-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.home-new .hn-news-more svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}

/* Experiment: light-flip variant. White card with body-text navy, matching
   the bento card 0 experiment. Same top-left dark bloom carries through
   because it lives on the base .hn-news-card rule. */
.home-new .hn-news-card.hn-news-light .hn-news-cat { color: rgba(26,40,87,0.62); }
.home-new .hn-news-card.hn-news-light .hn-news-name { color: var(--navy); }
.home-new .hn-news-card.hn-news-light .hn-news-exc { color: var(--muted); }
.home-new .hn-news-card.hn-news-light .hn-news-more { color: var(--navy); }
.home-new .hn-news-card.hn-news-light .hn-news-art { color: var(--navy); opacity: 0.45; }

@media (max-width: 1100px) {
  .home-new .hn-news { padding: 58px 40px 58px; }
  .home-new .hn-news-card { min-height: 340px; }
  /* Keep 3-col layout at this breakpoint too, since dropping to 2 columns
     with 6 cards + a full-width strip would leave asymmetric empty cells. */
}
@media (max-width: 900px) {
  .home-new .hn-news { padding: 50px 40px 50px; }
}
@media (max-width: 720px) {
  .home-new .hn-news { padding: 42px 18px 42px; }
  .home-new .hn-news-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .home-new .hn-news-grid { grid-template-columns: 1fr; }
  .home-new .hn-news-card { min-height: 260px; padding: 32px 26px 28px; }
  .home-new .hn-news-name { font-size: 22px; }
  /* Single column: first card owns both top corners, last card owns both
     bottom corners. Strip in the middle stays flat. :nth-child(n) reset
     matches the specificity of the desktop nth-child rules so it wins. */
  .home-new .hn-news-grid > .hn-news-card:nth-child(n) { border-radius: 0; }
  .home-new .hn-news-grid > .hn-news-card:first-child {
    border-top-left-radius: var(--hn-r-card);
    border-top-right-radius: var(--hn-r-card);
  }
  .home-new .hn-news-grid > .hn-news-card:last-child {
    border-bottom-left-radius: var(--hn-r-card);
    border-bottom-right-radius: var(--hn-r-card);
  }
  .home-new .hn-news-strip { padding: 26px 24px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .home-new .hn-news-strip-btn { align-self: stretch; justify-content: center; }
}

/* ── Section: How We Work ─────────────────────────────────────────────
   Moved up to sit under the insights strip. Built at the reference's
   scale: an oversized heading and a full gap before the cards, then one
   tall card beside the other two. Gradients and step copy are the ones
   this section already carried. */
.home-new .hn-how {
  background: #fff;
  padding: 110px 40px 104px;
}

.home-new .hn-how-head { max-width: 1440px; margin: 0 auto 80px; }

/* This section's eyebrow is green, not the page's default teal. */
/* How We Work sits on a white section, so the kicker follows the base rule
   (navy). The .hn-rule underneath is bumped to navy too for consistency. */
.home-new .hn-kicker-green { color: var(--navy); }
.home-new .hn-kicker-green .hn-rule { background: var(--navy); }

/* Same scale as every other section title on the page: case studies,
   insights, and the shared .sec-title used by industries and the tech
   stack all run clamp(28px, 3.6vw, 46px) at these same metrics. */
.home-new .hn-how-title {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2857;
}

.home-new .hn-how-lede {
  margin: 0 0 30px;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: #5d6880;
}

.home-new .hn-how-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #16224a;
}
.home-new .hn-how-link svg { width: 17px; height: 17px; }

.home-new .hn-how-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  /* Asymmetric layout: left column full-height (biggest), right column
     split into a taller upper cell (bigger) and shorter lower cell (smaller). */
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 3fr 2fr;
  gap: 0;
}
.home-new .hn-how-c1 { grid-column: 1; grid-row: 1 / 3; }
.home-new .hn-how-c2 { grid-column: 2; grid-row: 1; }
.home-new .hn-how-c3 { grid-column: 2; grid-row: 2; }

/* Wipro-style full-size panels. Solid brand colour + top-left dark bloom
   matching the insight cards. Content anchored to the top, Learn More
   pill pushed to the bottom. */
.home-new .hn-how-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  min-height: 220px;
  border-radius: 0;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: filter .25s ease;
}
.home-new .hn-how-card:hover { filter: brightness(1.08); }

.home-new .hn-how-c1 { background-color: var(--teal); }
.home-new .hn-how-c2 { background-color: var(--orange); }
.home-new .hn-how-c3 { background-color: var(--green); }

/* Experiment: third (smallest, bottom-right) how-we-work card flipped light.
   Same white + body-text-navy treatment as the flipped insight cards, with
   the Learn More pill inverted (navy bg, white text) so it reads on white. */
.home-new .hn-how-c3 {
  background-color: #ffffff;
}
.home-new .hn-how-c3 .hn-how-n { color: rgba(26,40,87,0.55); }
.home-new .hn-how-c3 .hn-how-name { color: var(--navy); }
.home-new .hn-how-c3 .hn-how-desc { color: var(--muted); }
.home-new .hn-how-c3 .hn-how-btn {
  background: var(--navy);
  color: #ffffff;
}
.home-new .hn-how-c3 .hn-how-btn:hover {
  background: var(--teal);
  color: #ffffff;
}

/* Outer four corners of the asymmetric block only, so the 3 panels read as
   one soft-cornered mosaic. c1 owns both left corners, c2 top-right, c3
   bottom-right. */
.home-new .hn-how-grid > .hn-how-c1 {
  border-top-left-radius: var(--hn-r-card);
  border-bottom-left-radius: var(--hn-r-card);
}
.home-new .hn-how-grid > .hn-how-c2 { border-top-right-radius: var(--hn-r-card); }
.home-new .hn-how-grid > .hn-how-c3 { border-bottom-right-radius: var(--hn-r-card); }

.home-new .hn-how-n {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.72);
}
.home-new .hn-how-name {
  margin: 20px 0 14px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
.home-new .hn-how-desc {
  margin: 0 0 auto;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
  color: rgba(255,255,255,0.9);
}

.home-new .hn-how-btn {
  margin-top: 32px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--navy);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.home-new .hn-how-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.home-new .hn-how-btn:hover { background: var(--navy); color: #fff; }
.home-new .hn-how-btn:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .home-new .hn-how { padding: 92px 40px 88px; }
  .home-new .hn-how-head { margin-bottom: 60px; }
  .home-new .hn-how-card { padding: 32px 28px 28px; min-height: 200px; }
}
@media (max-width: 900px) {
  .home-new .hn-how { padding: 76px 40px 72px; }
  .home-new .hn-how-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  /* Reset explicit placement so cards stack in DOM order. */
  .home-new .hn-how-c1,
  .home-new .hn-how-c2,
  .home-new .hn-how-c3 { grid-column: 1; grid-row: auto; }
  .home-new .hn-how-card { min-height: 240px; }
  /* Single column: rewrite the c1/c2/c3 corner rules at the same specificity
     (0,3,0) so this media-query cascade wins. c1 = both top corners, c3 =
     both bottom corners, c2 = flat. */
  .home-new .hn-how-grid > .hn-how-c1 {
    border-radius: var(--hn-r-card) var(--hn-r-card) 0 0;
  }
  .home-new .hn-how-grid > .hn-how-c2 { border-radius: 0; }
  .home-new .hn-how-grid > .hn-how-c3 {
    border-radius: 0 0 var(--hn-r-card) var(--hn-r-card);
  }
}
@media (max-width: 720px) {
  .home-new .hn-how { padding: 58px 18px 56px; }
  .home-new .hn-how-head { margin-bottom: 40px; }
  .home-new .hn-how-title { margin: 18px 0 20px; }
  .home-new .hn-how-card { padding: 26px 22px 22px; min-height: 200px; }
}


/* ── Industries section ───────────────────────────────────────────────
   Same ground as the case studies: navy at the top turning to white behind
   the cards. .eyebrow and .sec-title are shared classes used by the live
   homepage, so they are overridden here scoped to this page only. */
.home-new #industries .eyebrow { color: #ffffff; }
.home-new #industries .sec-title { color: #fff; }

/* The industry tiles are inline-styled anchors with no radius, the only cards
   on the page still square. Targeted structurally so the inline styles are
   left alone; they already carry overflow:hidden, so the gradient clips. */
.home-new #industries a[href^="/industries/"] {
  border-radius: var(--hn-r-card);
}

/* Font sizes moved out of the inline styles so the lead tile can scale them. */
.home-new #industries .hn-ind-name { font-size: 18px; }
/* Colours moved out of the inline styles too: the stats were at 30% white,
   which made the figure the faintest thing on the tile. */
.home-new #industries .hn-ind-stat { font-size: 28px; color: #ffffff; }
.home-new #industries .hn-ind-src  { font-size: 10px; color: #ffffff; }

/* First-card light-flip: override the CSS-set text colours so the stats
   remain readable on the white background. Primary = navy, secondary = muted
   slate to match the other light-flipped cards on the page. */
.home-new #industries a.hn-ind-light .hn-ind-stat { color: var(--navy); }
.home-new #industries a.hn-ind-light .hn-ind-src  { color: var(--muted); }

/* Real Estate, given a larger cell the way the case study grid does it: two
   columns by two rows in the bottom right. Five single tiles plus this makes
   nine cells, three even rows, no holes. */
/* Padding and columns live here rather than inline, so breakpoints can reach
   them. The section had no mobile rule at all: three columns held on a phone
   and the tiles were crushed. */
.home-new #industries { padding: 72px 72px 100px; }
.home-new #industries .hn-ind-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  .home-new #industries { padding: 58px 40px 72px; }
}
/* Breakpoints aligned with the rest of the page (1100 / 900 / 720) rather
   than a 640 cut-off, which left small tablets and landscape phones on two
   cramped columns. */
@media (max-width: 1100px) {
  .home-new #industries .hn-ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .home-new #industries { padding: 50px 32px 64px; }
}
@media (max-width: 720px) {
  .home-new #industries { padding: 42px 18px 52px; }
  .home-new #industries .hn-ind-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* E-Commerce leads the grid, two columns wide. */
.home-new #industries a.hn-ind-wide { grid-column: span 2; }

/* Real Estate closes it, full width. Two wide plus four singles plus three
   makes nine cells: three even rows, no holes. A 2x2 here would leave two. */
.home-new #industries a.hn-ind-lead {
  grid-column: 1 / -1;
  /* Taller than the single tiles (280px) so the full-width row reads as the
     lead rather than a thin banner. */
  min-height: 420px;
  justify-content: flex-end;
  padding: 44px 40px 40px;
}
.home-new #industries a.hn-ind-lead .hn-ind-name { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.025em; margin-bottom: 12px; }
.home-new #industries a.hn-ind-lead .hn-ind-stat { font-size: clamp(52px, 6vw, 92px); color: #ffffff; letter-spacing: -0.035em; line-height: 1; }
.home-new #industries a.hn-ind-lead .hn-ind-src  { font-size: 12px; color: #ffffff; }

@media (max-width: 900px) {
  .home-new #industries a.hn-ind-lead,
  .home-new #industries a.hn-ind-wide { grid-column: auto; grid-row: auto; }
  .home-new #industries a.hn-ind-lead { min-height: 300px; padding: 32px 24px; }
  .home-new #industries a.hn-ind-lead .hn-ind-name { font-size: 22px; }
  .home-new #industries a.hn-ind-lead .hn-ind-stat { font-size: 34px; }
}


/* ── Tech stack / Our Framework ───────────────────────────────────────
   Same ground as the case studies. .tech-stack and its children are shared
   classes styled in entexis.css for a #f7f7f8 background, so every colour
   they set is overridden here scoped to this page only. */
.home-new .tech-stack {
  /* Ends transparent so whatever follows shows through. Written as
     rgba(255,255,255,0) rather than the keyword: 'transparent' is
     rgba(0,0,0,0), and interpolating toward it makes the fade pass through
     grey. Fading to a zero-alpha WHITE keeps the ramp clean. */
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, rgba(255,255,255,0) 100%);
}
/* Heading sits in the navy top */
.home-new .tech-stack .eyebrow { color: #ffffff; }
.home-new .tech-stack .sec-title { color: #fff; }
/* The grid sits lower, where the ground has turned light, so the item text
   keeps its dark colours from entexis.css. Only the category labels sit high
   enough to need lifting. */
.home-new .tech-stack .tech-cat-label { color: #1a2857; }

/* White panel behind the grid. entexis.css gives .tech-grid a 1px gap that
   shows the parent through as hairlines, so the gap is closed here too. */
.home-new .tech-stack .tech-grid {
  background: #fff;
  padding: 30px;
  border-radius: var(--hn-r-card);
  gap: 30px;
}

/* ── CTA band ─────────────────────────────────────────────────────────
   Style now lives in inside-pages.css: light-grey outer strip carrying
   a navy rounded card. Scoped rule kept as a no-op anchor in case a
   /home-new-only override is needed later. */

/* Home FAQ section — the ejs sets `padding:24px 72px 80px` on the outer
   section AND `padding:48px 48px` on the inner white card, both inline.
   Both are fine on desktop but crushingly wide on phones/tablets, so
   we trim BOTH here. `!important` beats the inline styles. */
/* Close the vertical gap between the "We pick what fits…" line at the
   bottom of the Tech Stack section and the FAQ heading below it.
   Both sections carry the same light-gray ground (#f7f7f8), so they
   can hand over tightly without a huge cushion between them. */
.home-new .tech-stack { padding-bottom: 24px !important; }
.home-faq-section { padding-top: 0 !important; }

@media (max-width: 900px) {
  .home-faq-section { padding: 0 24px 60px !important; }
  .home-faq-section > div { padding: 24px 20px !important; }
  .home-faq-section > div > h2 { margin: 0 0 20px !important; }
  .home-faq-section .ent-faq { margin: 16px auto !important; }
  .home-faq-section .ent-faq-q { padding: 14px 14px !important; }
  .home-faq-section .ent-faq-a-inner { padding: 0 14px 14px !important; }
  /* Heading + icon: on mobile the H2 wraps to 2+ lines and the SVG icon
     ends up drifting far off to the left. Stack the icon ABOVE the
     wrapped text so both sit centred together. */
  .home-faq-section > div > h2 {
    flex-direction: column !important;
    gap: 12px !important;
    font-size: 24px !important;
  }
  .home-new .tech-stack { padding-bottom: 16px !important; }
}
@media (max-width: 560px) {
  .home-faq-section { padding: 0 14px 48px !important; }
  .home-faq-section > div { padding: 20px 14px !important; }
  .home-faq-section > div > h2 { font-size: 22px !important; margin: 0 0 16px !important; }
  .home-faq-section .ent-faq { margin: 12px auto !important; }
  .home-faq-section .ent-faq-q { padding: 14px 12px !important; }
  .home-faq-section .ent-faq-a-inner { padding: 0 12px 12px !important; }
}