/* =====================================================================
   SITE MOBILE + HERO FRAME — loaded last on every page.
   1) Photo heroes (Home, Our Story) get the frame lines like every other section.
   2) Phones: frame lines stay at --pad-x from the screen edge; content sits 16px further in
      (--in), so text never touches a line. Grid cells keep their own inner padding.
   ===================================================================== */
:root { --in: calc(var(--pad-x) + 16px); }

/* ---- 1. frame lines on the photo heroes (white, faint; above the photo wash, under the copy) ---- */
.hp .hero::after, .stx2 .coHero::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: 0; pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, .14); border-right: 1px solid rgba(255, 255, 255, .14);
}
.hp .hero__content, .hp .hero__navspace, .stx2 .coHero__content, .stx2 .coHero__navspace { position: relative; z-index: 1; }

/* ---- 2. phones ---- */
@media (max-width: 640px) {
  /* Home */
  .hp .hero__content { padding: 0 16px; }
  .hp .hero__title { font-size: clamp(34px, 10vw, 44px) !important; }
  .hp .abv { padding: 0 16px; box-sizing: border-box; }
  .hp .abv__low { grid-template-columns: 1fr !important; }
  .hp .abv__spacer { display: none !important; }
  .hp .closing { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .hp .ind__header { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .hp .caps__head, .hp .caps__header { padding-left: 16px; padding-right: 16px; }

  /* shared testimonials + footer CTA */
  :root.stx .tst__header, :root.stx .tst__stage { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  .sfx .lastCta__inner { padding-left: var(--in) !important; padding-right: var(--in) !important; }

  /* Insights listing */
  .inx .insHead { padding: 0 var(--in) !important; }
  .inx .insFilter { margin-left: calc(-1 * var(--in)) !important; margin-right: calc(-1 * var(--in)) !important; padding: 0 var(--in) !important; }
  .inx .inxRow__when, .inx .inxRow__main { padding-left: 16px !important; padding-right: 12px !important; }
  .inx .inxRow__pic { margin-right: 16px !important; }
  .inx .inxRow.is-lead .inxRow__main, .inx .inxRow.is-lead .inxRow__when { padding-left: 16px !important; padding-right: 16px !important; }
  .inx .inxCard { padding-left: 16px !important; padding-right: 16px !important; }
  .inx .inxCard__body { padding-left: 0 !important; }

  /* Insight detail: keep the frame on phones, content off the lines */
  .ixd::before { content: "" !important; }
  .ixd__head { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .ixd__hero { margin: 0 var(--pad-x) !important; }
  .ixd__body { margin: 0 var(--pad-x) !important; }
  .ixd__article { padding-left: 16px !important; padding-right: 16px !important; }
  .ixd__side .ixd__stick { padding-left: 16px !important; padding-right: 16px !important; }
  .ixd__moreHead { margin: 0 var(--pad-x) !important; padding-left: 16px !important; padding-right: 16px !important; }
  .ixd__more .inxCards { margin-left: var(--pad-x) !important; margin-right: var(--pad-x) !important; }

  /* Life (and the shared closing on Our Story) */
  .lfx .lifeHero__text, .lfx .lifeDesc__text, .lfx .coGrow__text { padding-left: 16px !important; padding-right: 16px !important; }
  .lfx .lifeCulture__head, .lfx .lifeMoments__head { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .lfx .lfxRhythm { margin-left: -16px !important; margin-right: -16px !important; }
  .lfx .lfxRhythm li, .lfx .lfxRhythm li:nth-child(odd), .lfx .lfxRhythm li:nth-child(even) { padding-left: 16px !important; padding-right: 16px !important; }
  .lfx .lifeVal { padding-left: 16px !important; padding-right: 16px !important; }

  /* Our Story */
  .stx2 .coHero__content { padding: 0 16px; }
  .stx2 .coIntro { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .stx2 .coPurpose { padding-left: var(--in) !important; padding-right: var(--in) !important; box-sizing: border-box; }
  .stx2 .coValues__head { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .stx2 .coValues__card { padding-left: 16px !important; padding-right: 16px !important; }
  .stx2 .partners__title, .stx2 .coLeadership__title { padding-left: var(--in) !important; padding-right: var(--in) !important; }
  .stx2 .partners__band .lfxEye, .stx2 .coLeadership > .lfxEye { margin-left: var(--in) !important; }
  .stx2 .coLead__id, .stx2 .coLead__tags { padding-left: 16px !important; padding-right: 16px !important; }
  .stx2 .partners--counter .stats__item { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 640px) { .hp .hero__titleLine { white-space: normal !important; display: inline !important; } .hp .hero__title { font-size: clamp(32px, 9vw, 40px) !important; text-wrap: balance; } .hp .hero__content { padding-left: 16px !important; padding-right: 16px !important; } }
@media (max-width: 640px) {
  .hp .hero__spacer, .stx2 .coHero__aside, .hp .chosen__row, .stx2 .chosen__row { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  .hp .about { position: relative; }
  .hp .about::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); pointer-events: none; border-left: 1px solid rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07); }
}
@media (max-width: 640px) { .hp .hero__spacer .heroLogos, .stx2 .coHero__aside .heroLogos, .hp .chosen__row, .stx2 .chosen__row { zoom: .84; } }
@media (max-width: 640px) { .lfx .lfxSticker--hero { left: calc(var(--pad-x) + 8px) !important; } }

/* ---- 3. touch screens: the grey heading tails fill in on hover on desktop; with no hover they show filled from the start ---- */
@media (hover: none) {
  .hpg, .stxG, .slaG, .svxG, .prG, .n3G, .lfxG, .abv__gr,
  .rv .advH2 span, .rv .advClose__line span, .rv .rvStatement__line span,
  .lfx .lifeHero__t2, .lfx .lifeCulture__title em.is-teal, .lfx .lifeMoments__title em,
  .tst__title em, .hp .caps__title em { background-position: 0 0 !important; }
}

/* ---- 4. phones: section headings one step down (hero titles and article text untouched) ---- */
@media (max-width: 640px) {
  :root.ts-on h2:not([class*="ero"] h2):not(.ixd h2) { font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; }
}

/* ---- 5. phones: buttons keep clear of the frame lines ---- */
@media (max-width: 640px) {
  .hp .caps .btn.sbx { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; box-sizing: border-box; }
}

/* ---- 6. Insights tabs on phones: scroll sideways only, clipped between the two frame lines ---- */
@media (max-width: 640px) {
  .inx .insFilter { margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .inx .insFilter > * { flex: none; }
}

/* ---- 7. footer CTA on phones: the eyebrow lines up with the title (no extra desktop indent) ---- */
@media (max-width: 900px) { .sfx .lastCta__eyebrow { margin-left: 0 !important; } }

/* ---- 7. footer CTA on phones: the eyebrow lines up with the title (no extra desktop indent) ---- */
@media (max-width: 900px) { .sfx .lastCta__eyebrow { margin-left: 0 !important; } }

/* ---- 8. Our Story on phones: pictures sit 16px inside the frame lines (leadership photos run edge to edge, see 8b) ---- */
@media (max-width: 640px) {
  .stx2 .coGrow__visual { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; box-sizing: border-box; }
  .stx2 .coGrow__visual img { object-position: 50% 45%; }
  .stx2 .coNet { margin-left: auto !important; margin-right: auto !important; max-width: calc(100% - 32px); }
}

/* ---- 9. hero intro text on phones: a size up so it reads as the lead, not a footnote ---- */
@media (max-width: 640px) {
  .hp .hero__lead, .stx2 .coHero__lead { font-size: 18px !important; line-height: 1.55 !important; }
}

/* ---- 10. phones: room above and below inside cards, so no text sits on a top or bottom line ---- */
@media (max-width: 640px) {
  .hp .capCard { padding-bottom: 32px !important; }
  .hp .capCard__body, .hp .capCard__text { padding-bottom: 0; }
  .stx2 .coLead { padding-bottom: 36px !important; }
  .stx2 .coLead__tags { padding-bottom: 0 !important; }
  .rv .advCard { padding-bottom: 32px !important; }
  .lfx .lifeVal { padding-top: 24px !important; padding-bottom: 28px !important; }
  .svx .finWhy__card { padding-bottom: 32px !important; }
  .faqItem.is-open .faqItem__a, .faqItem.is-open [class*="__answer"], .faqItem.is-open [class*="__body"] { padding-bottom: 20px !important; }
}

/* ---- 11. phone/tablet heroes: the first line keeps clear of the nav; Our Story shows its logo row under the buttons, as Home does ---- */
@media (max-width: 900px) {
  .hp .hero__content, .stx2 .coHero__content { margin-top: 28px !important; }
  .stx2 .coHero__aside { display: block !important; width: 100%; margin-top: auto; padding-top: 40px; }
}
/* Our Story's hero logo row: the same 2x2 grid as Home below 1024px (the flying logos follow this anchor) */
@media (max-width: 1024px) {
  .stx2 .coHero__aside .heroLogos { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-content: center; justify-items: center; align-items: center; gap: 22px clamp(28px, 6vw, 44px); width: 100%; max-width: none; margin-inline: auto; height: auto; padding-bottom: 0; --s: 0.8; }
}

/* ---- 12. Our Story leaders: the purple credential tags are hidden for all five (review 22 Oct); markup kept ---- */
.stx2 .coLead__tags { display: none !important; }

/* ---- 8b. Our Story on phones: leadership photos run edge to edge between the lines; the four value cards share one left alignment ---- */
@media (max-width: 640px) {
  .stx2 .coValues__body { align-items: flex-start !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; }
  .stx2 .coValues__title, .stx2 .coValues__desc { text-align: left !important; }
  .stx2 .coV--talent .coValues__title { padding-left: 0 !important; padding-right: 0 !important; }
  .stx2 .coV--growth .coBars { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- 10. Who We Serve heroes on phones: a shorter art band so the heading starts in the top half of the screen ---- */
@media (max-width: 640px) {
  .svx .finHero__art { min-height: 260px !important; height: 260px; }
  .svx .finHero__col { padding-top: 32px !important; }
}

/* ---- 11. "How we deliver" on phones: the heading scrolls away with the section instead of following the steps down ---- */
@media (max-width: 900px) {
  .slx .slxVProc .rvVProc__grid > .advH2, .rv .rvVProc__grid > .advH2 { position: static !important; }
}

/* ---- 12. N3CA pages on phones: copy sits 16px inside the frame lines (was 4px) ---- */
@media (max-width: 640px) {
  .n3x .n3dHero__col, .n3x .n3xHeroRow .n3dHero__col, .n3x .n3dOrg__head, .n3x .solStep__pin, .n3x .solHead { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Products (N3CA overview) on phones: same 16px inset from the frame lines */
@media (max-width: 640px) {
  .prx .n3Hero__content, .prx .n3Why__head, .prx .n3Why__grid .n3Feat, .prx .n3Title__row, .prx .n3Panel__head, .prx .n3PanelCell { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}
/* Products sticky tabs on phones: sit right under the nav (80px; 0 when the nav hides) with 12px of white above the labels */
@media (max-width: 900px) {
  .prx .n3Prod__tabs { top: calc(var(--prx-top, 72px) * 1.1112) !important; padding-top: 12px !important; }
  /* the white bar keeps the frame: left and right lines run through it, the bottom line closes it */
  .prx .n3Prod__tabs { border-left: 1px solid var(--pr-line, #e3e4ea) !important; border-right: 1px solid var(--pr-line, #e3e4ea) !important; border-bottom: 1px solid var(--pr-line, #e3e4ea) !important; box-sizing: border-box; }
}

/* ---- 13. client-logo flip strip on phones: less air under the logos ---- */
@media (max-width: 640px) {
  section.chosen, div.chosen, html.n3x .chosen.n3xLogos { padding-bottom: 28px !important; }
  html.sla .solBento { padding-top: 56px !important; }
  html.sla .solHero__logos.chosen { padding-bottom: 28px !important; }
}

/* ---- 14. Home About on phones: the frame lines sit in the padding, clear of the eyebrow and the Our Story button ---- */
@media (max-width: 900px) {
  .hp[data-about="d"] .about__intro { --ft: 48px !important; --fb: 32px !important; }
}
/* Careers "No open positions" on phones: the LinkedIn button keeps the 16px inset and clears the CTA band below */
@media (max-width: 640px) {
  .caJobs { padding: 24px var(--in) 56px !important; }
}
/* Products "What N3CA brings": the card grid closes the section, so little air under it */
@media (max-width: 640px) {
  .prx .n3Why { padding-bottom: 48px !important; row-gap: 48px !important; gap: 48px !important; }
  .prx .n3Why__head { margin-bottom: 0 !important; }
}
/* N3CA "How N3CA X helps" on phones: the same visible air above the heading and below the last card */
@media (max-width: 640px) {
  .n3x .n3dOrg { padding-top: 48px !important; padding-bottom: 76px !important; }
  /* one column: every card gets a top divider and no left border (the tablet 2x2 borders were leaking in) */
  html.n3x .n3dOrg__grid > .n3dOrgCard, html.n3x .n3dFits__grid > .n3dFitsCard, html.n3x .n3dBizItem { border-left: 0 !important; }
  html.n3x .n3dOrg__grid > .n3dOrgCard + .n3dOrgCard, html.n3x .n3dFits__grid > .n3dFitsCard + .n3dFitsCard { border-top: 1px solid var(--n3-line, #e3e4ea) !important; }
  /* section heads sit on the left edge like every other heading (they were a centred narrow block) */
  html.n3x .solHead, html.n3x .n3dBiz .solHead { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left !important; align-items: flex-start !important; }
  html.n3x .solHead .solHead__title, html.n3x .n3dBiz .solHead .solHead__title { text-align: left !important; margin-left: 0 !important; }
  .n3x .n3dBiz { padding-bottom: 48px !important; }
}
/* Home partners on phones: the same 64px under the grid as above the heading */
@media (max-width: 640px) {
  .hp section.partners { padding-bottom: 64px !important; }
}
/* Industry pages on phones: card grids close their section, so 48px under the last card (was 96) */
@media (max-width: 640px) {
  .svx .finSol, .svx .finOut { padding-bottom: 48px !important; }
}
/* Solution pages + Advisory on phones: the capability cards and the How we deliver block keep the 16px inset from the frame lines */
@media (max-width: 640px) {
  :root .advSvc .slxCards .advCard, :root .advSvc .advCard { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  :root .advHero__copy { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  :root .advClose { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  /* industry capability list: stays inside its column (it was 40px wider than the frame) */
  :root .svxCap__l { min-width: 0 !important; width: 100% !important; max-width: 100% !important; padding-right: 0 !important; box-sizing: border-box; }
  :root .svxCap__l .svxTabs, :root .svxCap__l .svxTab { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  :root .svxTab { grid-template-columns: 40px minmax(0, 1fr) !important; }
  :root .svxTab__title { white-space: normal !important; min-width: 0; }
  :root .caHero__text, :root .caHero__actions { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  .rvVProc .rvVProc__grid { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}

/* ---- 15. Solution approach ("Precision over speed") on phones: heading first with less air above, the drawing moves under the list ---- */
@media (max-width: 640px) {
  .solApproach .slxApL { order: 1 !important; padding-top: 56px !important; }
  .solApproach .solApproach__row > .advFig { order: 2 !important; border-bottom: 0 !important; border-top: 1px solid var(--adv-line, #e3e4ea) !important; padding-top: 16px !important; padding-bottom: 24px !important; }
  .solApproach .advFig__art svg { max-height: 230px; }
}