/* Styles for the redesigned service architecture (pillar pages, all-services
   overview, solution detail templates).

   Everything here is namespaced `nf-` so it cannot affect the pages carried
   over from the Webflow export. Colours reference the existing design tokens
   defined in the Webflow stylesheet's :root — no new palette is introduced.

   Responsive behaviour follows the existing site's breakpoints:
     991px  tablet      grids step down one level
     767px  mobile      grids collapse toward a single column
     479px  small       single column throughout                        */

/* ---------------------------------------------------------------- type -- */

.nf-h1 {
  color: var(--neutral--100);
  font-size: 60px;
  font-weight: 500;
  line-height: 1.07em;
  margin-bottom: 24px;
}

.nf-h1.nf-h1-wide {
  font-size: 62px;
}

.nf-lede {
  font-size: 20px;
  line-height: 1.6em;
  color: var(--neutral--300);
}

.nf-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral--400);
  font-weight: 700;
  margin-bottom: 8px;
}

.nf-kicker {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral--100);
}

.nf-h2 {
  color: var(--neutral--100);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.24em;
  margin-bottom: 6px;
}

.nf-h3 {
  color: var(--neutral--100);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 8px;
}

.nf-body {
  font-size: 16px;
  line-height: 1.65em;
  color: var(--neutral--300);
}

.nf-body-muted {
  font-size: 16px;
  line-height: 1.6em;
  color: var(--neutral--400);
}

.nf-arrow-link {
  color: var(--system--blue);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* The exported Webflow stylesheet underlines bare anchors (`a { text-
   decoration: underline }`); nothing in the mockup is underlined, so every
   redesign link class resets it. */
.nf-card,
.nf-card-link,
.nf-card-accent,
.nf-arrow-link,
.nf-crumb a,
.nf-related-row,
.nf-related-line,
.nf-scope-item,
.nf-rail a,
.nf-row {
  text-decoration: none;
}

/* Mockup link affordance: text links shift to blue on hover. */
.nf-scope-item h3 { transition: color 0.3s; }
.nf-scope-item:hover h3 { color: var(--system--blue); }
.nf-related-line { transition: color 0.3s; }
.nf-related-line:hover { color: var(--system--blue); }

/* -------------------------------------------------------------- layout -- */

.nf-section {
  padding: 0 20px 140px;
  font-family: Fustat, sans-serif;
}

.nf-section-top {
  padding: 70px 20px 72px;
  font-family: Fustat, sans-serif;
}

.nf-measure {
  max-width: 760px;
}

.nf-group {
  margin-bottom: 72px;
}

.nf-group:last-child {
  margin-bottom: 0;
}

.nf-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 1px solid var(--neutral--600);
  padding-bottom: 20px;
  margin-bottom: 32px;
}

.nf-group-head p {
  max-width: 640px;
}

/* Column grids. `nf-grid-N` states the maximum column count; the media
   queries below step each one down toward a single column.               */

.nf-grid-2,
.nf-grid-3,
.nf-grid-4 {
  display: grid;
  gap: 24px;
}

.nf-grid-2 { grid-template-columns: 1fr 1fr; }
.nf-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.nf-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.nf-gap-28 { gap: 28px; }

/* --------------------------------------------------------------- cards -- */

.nf-card {
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  background-image: linear-gradient(#262e43, #191f31);
  padding: 28px 28px 34px;
  display: block;
  color: var(--neutral--300);
}

/* The gap under a card's last line is the card's padding alone — the
   exported `p { margin-bottom: 16px }` would otherwise add to it. */
.nf-card p:last-child { margin-bottom: 0; }

/* Card links highlight their title on hover. */
a.nf-card h3 { transition: color 0.3s; }
a.nf-card:hover h3 { color: var(--system--blue); }

.nf-card-accent {
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  background-image: linear-gradient(#262e43, #191f31);
  overflow: hidden;
  display: block;
  color: var(--neutral--300);
}

/* The 3px brand rule across the top of a feature card. */
.nf-card-rule {
  height: 3px;
  background-image: linear-gradient(90deg, var(--system--blue), var(--secondary--color-1));
}

.nf-card-body {
  padding: 32px 32px 40px;
}

.nf-icon-wrap {
  margin-bottom: 20px;
}

/* ------------------------------------------------------------ list rows -- */

.nf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #262e43;
  color: var(--neutral--300);
}

.nf-row:last-child {
  border-bottom-color: transparent;
}

.nf-row-arrow {
  color: var(--system--blue);
  font-size: 22px;
}

.nf-tick-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-tick {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.6em;
  color: var(--neutral--300);
}

.nf-tick-mark {
  color: var(--system--blue);
  flex: 0 0 auto;
  line-height: 1.6em;
}

/* ------------------------------------------------------------- partners -- */

.nf-partner-row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

/* Row-chunked static strips: PartnerRows renders one grouping per breakpoint
   band (rows balanced in JSX, since flex wrap alone packs rows lopsided) and
   these classes pick the grouping that matches the viewport. */
.nf-partner-rows {
  display: none;
  flex-direction: column;
  align-items: center;
  row-gap: 28px;
}

@media screen and (min-width: 992px) {
  .nf-rows-lg { display: flex; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .nf-rows-md { display: flex; }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .nf-rows-sm { display: flex; }
}

@media screen and (max-width: 479px) {
  .nf-rows-xs { display: flex; }
}

/* Microsoft CSP tile: a typographic partner mark — the co-branding rules do
   not allow the Microsoft logo here, so the mention is set in site type
   (smallcaps variant from the "Microsoft CSP Mention" design canvas). Mockup
   sizes (21px / 9.4px beside a 44px Adobe badge) are scaled ~50/44 to sit
   against this site's larger strip logos. No font-family: the tile inherits
   each page's own face (Rota on the home strip, Fustat on redesign pages). */
/* Red Hat reverse logo. The SVG is tight-cropped (no internal padding like
   the other vendor assets), so it gets its own height instead of an image-N
   class. */
.nf-logo-redhat {
  height: 35px;
}

.nf-ms-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.15;
}

.nf-ms-tile-name {
  color: var(--neutral--100);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.nf-ms-tile-sub {
  color: var(--neutral--400);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* The home strip's flex layout squeezes items to min-content; keep the
     tagline on one line so the tile renders the same in every strip. */
  white-space: nowrap;
}

/* ---------------------------------------------------------- placeholder -- */

/* Illustration placeholders. The final artwork is not ready, so the mockup's
   placeholder blocks are carried through deliberately. The mockup page has no
   border-box reset, so its placeholders render at stated height + padding;
   ArtPlaceholder folds that into a border-box height to land on the same
   rendered size. */
.nf-art {
  background-color: #1e2538;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(98, 173, 225, 0.09) 0 2px,
    transparent 2px 14px
  );
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}

/* The export's .mg-bottom-0 utility never actually sets the margin its name
   promises (it only carries text styles); supply the missing declaration. */
.mg-bottom-0 { margin-bottom: 0; }

/* Filled slot: the Set A illustration replaces the placeholder scaffolding.
   The SVG carries its own #1e2538 plate; the box keeps the placeholder's
   border-box geometry and crops the artwork like the board's band samples
   (preserveAspectRatio slice ≙ object-fit cover). */
.nf-art.nf-art-filled {
  background-image: none;
  padding: 0;
  overflow: hidden;
}

.nf-art-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nf-art-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--system--blue);
}

.nf-art-caption {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--neutral--400);
  line-height: 1.5em;
}

/* ------------------------------------------------------------ detail B --- */

/* Detail template B pairs the article with a sticky "on this page" rail on
   the left, 210px wide as in the mockup. */
.nf-rail-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 64px;
  align-items: start;
}

.nf-rail {
  position: sticky;
  top: 32px;
}

.nf-rail-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral--400);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Scroll-spy nav inside the rail (RailNav client component). */
.nf-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 24px;
}

.nf-rail-nav a {
  color: #8d93a5;
  font-size: 14px;
  line-height: 1.35em;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--neutral--600);
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}

.nf-rail-nav a.nf-on {
  color: var(--neutral--100);
  border-left-color: var(--secondary--color-1);
}

/* The exported `.page-wrapper.overflow-hidden` creates an overflow box that
   defeats position: sticky. `clip` paints identically but leaves sticky
   working; scoped to pages that actually have the rail. */
.page-wrapper.overflow-hidden:has(.nf-rail-layout) { overflow: clip; }

/* --------------------------------------------------------------- steps --- */

.nf-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.nf-step-offset-1 { margin-top: 80px; }
.nf-step-offset-2 { margin-top: 160px; }

/* ------------------------------------------------------------- compare --- */

.nf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--neutral--600);
}

.nf-compare-cell {
  padding: 22px 24px;
  border-bottom: 1px solid var(--neutral--600);
  font-size: 16px;
  line-height: 1.6em;
}

.nf-compare-before {
  color: var(--neutral--400);
  border-right: 1px solid var(--neutral--600);
}

.nf-compare-after {
  color: var(--neutral--300);
}

/* ----------------------------------------------------------------- CTA --- */

.nf-cta {
  border: 1px solid var(--neutral--600);
  border-radius: 12px;
  background-image: linear-gradient(#262e43, #191f31);
  padding: 64px 56px;
  text-align: center;
}

.nf-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ============================================================ responsive == */

@media screen and (max-width: 991px) {
  .nf-h1 { font-size: 46px; }
  .nf-h1.nf-h1-wide { font-size: 46px; }
  .nf-lede { font-size: 18px; }

  /* 4 -> 2, 3 -> 2, 2 stays until mobile */
  .nf-grid-4 { grid-template-columns: 1fr 1fr; }
  .nf-grid-3 { grid-template-columns: 1fr 1fr; }

  .nf-steps { grid-template-columns: 1fr 1fr; }
  .nf-step-offset-1,
  .nf-step-offset-2 { margin-top: 0; }

  /* Detail template B: at one column the "on this page" rail and its CTA are
     redundant — every section they point at is directly below. Hidden at the
     same breakpoint the layout collapses. */
  .nf-rail-layout { grid-template-columns: 1fr; gap: 40px; }
  .nf-rail { position: static; display: none; }
}

@media screen and (max-width: 767px) {
  .nf-h1 { font-size: 38px; }
  .nf-h1.nf-h1-wide { font-size: 38px; }
  .nf-section { padding-bottom: 90px; }
  .nf-section-top { padding: 48px 20px 48px; }

  /* Everything reaches a single column. */
  .nf-grid-2,
  .nf-grid-3,
  .nf-grid-4 { grid-template-columns: 1fr; }

  .nf-steps { grid-template-columns: 1fr; }

  .nf-group-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nf-compare { grid-template-columns: 1fr; }
  .nf-compare-before { border-right: none; border-bottom: none; padding-bottom: 4px; }

  .nf-cta { padding: 44px 24px; }
  .nf-partner-row { gap: 32px; }
}

@media screen and (max-width: 479px) {
  .nf-h1 { font-size: 32px; }
  .nf-h1.nf-h1-wide { font-size: 32px; }
  .nf-card-body { padding: 24px 22px 28px; }
  .nf-card { padding: 22px 22px 26px; }
}

/* ====================================================== solution details == */

.nf-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral--400);
  font-weight: 700;
  flex-wrap: wrap;
}

.nf-crumb a { color: var(--neutral--400); white-space: nowrap; }
.nf-crumb-sep { color: var(--neutral--600); }
.nf-crumb-current { color: var(--system--blue); }

/* Section eyebrow used throughout the detail templates. */
.nf-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral--400);
  font-weight: 700;
  margin-bottom: 24px;
}

/* Hairline that separates stacked detail sections. */
.nf-rule-top {
  border-top: 1px solid var(--neutral--600);
  padding-top: 56px;
}

.nf-rule-top.nf-rule-tight { padding-top: 48px; }

.nf-detail-section { padding: 90px 20px 0; font-family: Fustat, sans-serif; }
.nf-detail-section.nf-detail-tight { padding-top: 72px; }
.nf-detail-hero { padding: 60px 20px 80px; font-family: Fustat, sans-serif; }
.nf-detail-flush { padding: 0 20px; font-family: Fustat, sans-serif; }

.nf-detail-h1 { font-size: 60px; margin-bottom: 30px; }
.nf-detail-h1.nf-size-56 { font-size: 56px; margin-bottom: 26px; }
.nf-detail-h1.nf-size-52 { font-size: 52px; margin-bottom: 26px; }
.nf-detail-h1.nf-size-50 { font-size: 50px; margin-bottom: 24px; }
.nf-detail-h1.nf-size-46 { font-size: 46px; line-height: 1.12em; margin-bottom: 22px; }

.nf-detail-lede { font-size: 22px; line-height: 1.55em; color: var(--neutral--300); max-width: 740px; }
.nf-detail-lede.nf-lede-19 { font-size: 19px; line-height: 1.6em; max-width: 720px; }
.nf-detail-lede.nf-lede-20 { font-size: 20px; line-height: 1.6em; }

.nf-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nf-actions.nf-actions-top { margin-top: 44px; }

/* Buttons in the detail templates use slightly tighter padding than the
   site-wide .btn-primary; these modifiers keep the shared class.
   tight = hero rows (22 × 38), sm = purchasing hero (20 × 34),
   lg = closing CTAs (24 × 44). */
.nf-btn-tight { padding-top: 22px; padding-bottom: 22px; }
.nf-btn-sm { padding: 20px 34px; }
.nf-btn-lg { padding: 24px 44px; }

.nf-h2-section {
  color: var(--neutral--100);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.24em;
  margin-bottom: 28px;
}

.nf-h2-section.nf-h2-36 { font-size: 36px; line-height: 1.22em; }
.nf-h2-section.nf-h2-34 { font-size: 34px; line-height: 1.24em; margin-bottom: 20px; }
.nf-h2-section.nf-h2-32 { font-size: 32px; line-height: 1.28em; margin-bottom: 32px; }
.nf-h2-section.nf-h2-30 { font-size: 30px; line-height: 1.28em; margin-bottom: 0; }

.nf-prose { color: var(--neutral--300); margin-bottom: 20px; }
.nf-prose:last-child { margin-bottom: 0; }
.nf-prose.nf-prose-17 { font-size: 17px; line-height: 1.7em; margin-bottom: 16px; }

/* --- triggers ("when companies call us") ---------------------------------- */

.nf-triggers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.nf-trigger {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid #262e43;
}

/* The final row of each column carries no rule. */
.nf-triggers > .nf-trigger:nth-last-child(-n + 2) { border-bottom-color: transparent; }

.nf-trigger-text { font-size: 19px; line-height: 1.55em; color: var(--neutral--100); }
.nf-trigger-text.nf-trigger-sm { font-size: 17px; color: var(--neutral--300); }

.nf-check {
  width: 26px;
  min-width: 26px;
  height: 26px;
  margin-top: 6px;
  border-radius: 1000px;
  background-image: linear-gradient(to right, var(--transparent), var(--secondary--color-1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-check.nf-check-sm { width: 20px; min-width: 20px; height: 20px; margin-top: 5px; }
.nf-check.nf-check-md { width: 24px; min-width: 24px; height: 24px; margin-top: 5px; }

/* Trigger cards (template B). */
.nf-trigger-card {
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  padding: 22px 24px;
  background-color: #1e2538;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* --- capabilities --------------------------------------------------------- */

.nf-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 56px;
}

.nf-cap { max-width: 460px; }

.nf-cap-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid #262e43;
}

.nf-cap-row:last-child { border-bottom-color: transparent; }

/* Spec-sheet capability rows (template C). */
.nf-spec-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid #262e43;
}

.nf-spec-row:last-child { border-bottom-color: transparent; }

.nf-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

/* --- proof bar (template C) ---------------------------------------------- */

.nf-specbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-top: 1px solid var(--neutral--600);
  border-bottom: 1px solid var(--neutral--600);
}

.nf-specbar-cell { padding: 28px 32px; border-right: 1px solid var(--neutral--600); }
.nf-specbar-cell:first-child { padding-left: 0; }
.nf-specbar-cell:last-child { border-right: none; padding-right: 0; }
.nf-specbar-title { color: var(--neutral--100); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.nf-specbar-body { font-size: 15px; line-height: 1.55em; color: var(--neutral--400); }

/* --- steps ---------------------------------------------------------------- */

.nf-steps-connected {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  position: relative;
}

/* Gradient rule threading the three numbered markers together. */
.nf-steps-line {
  position: absolute;
  top: 23px;
  left: 8%;
  right: 8%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--system--blue) 18%,
    var(--secondary--color-1) 82%,
    transparent
  );
  opacity: 0.65;
}

.nf-step-c { text-align: center; position: relative; z-index: 1; }

.nf-step-num {
  width: 48px;
  height: 48px;
  border-radius: 1000px;
  background-image: linear-gradient(90deg, var(--system--blue) 25%, var(--secondary--color-1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral--100);
  font-weight: 700;
  font-size: 18px;
  margin: 0 auto 24px;
}

.nf-step-c p { max-width: 320px; margin: 0 auto; }

/* Stacked step cards (template B). */
.nf-step-card {
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  background-image: linear-gradient(#262e43, #191f31);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
}

.nf-step-figure {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  background-image: linear-gradient(90deg, var(--system--blue) 40%, var(--secondary--color-1));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Divided step columns (template C). */
.nf-steps-divided {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-left: -40px;
}

.nf-step-divided { padding: 0 40px; border-right: 1px solid #262e43; }
.nf-step-divided:last-child { border-right: none; }
.nf-step-index {
  font-size: 15px;
  font-weight: 700;
  color: var(--system--blue);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

/* --- related -------------------------------------------------------------- */

.nf-related-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid #262e43;
  color: var(--neutral--300);
}

.nf-related-row:last-child { border-bottom-color: transparent; }

.nf-related-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid #262e43;
  color: var(--neutral--100);
  font-size: 19px;
  font-weight: 700;
}

.nf-related-line:last-child { border-bottom-color: transparent; }

/* --- statement band (template D) ----------------------------------------- */

.nf-statement {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 0;
  border-top: 1px solid var(--neutral--600);
  border-bottom: 1px solid var(--neutral--600);
}

.nf-statement-text {
  color: var(--neutral--100);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.45em;
}

/* --- closing CTA ---------------------------------------------------------- */

.nf-cta-centered { max-width: 760px; margin: 0 auto; text-align: center; }

/* The exported .btn-primary is a flex box, which stretches to the full width
   of a block container; the mockup's CTA button is inline-block. */
.nf-cta-centered .w-button { display: inline-block; width: auto; }

.nf-cta-panel {
  border: 1px solid var(--neutral--600);
  border-radius: 6px;
  background-image: linear-gradient(#262e43, #191f31);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.nf-cta-panel > div { max-width: 620px; }

/* Pillar-page variant of the panel: softer corner as in the mockup. */
.nf-cta-panel.nf-cta-panel-lg { border-radius: 10px; }

/* --- hero split (templates B and D) --------------------------------------- */

.nf-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* IT Purchasing hero: text column slightly wider than the illustration. */
.nf-hero-split.nf-hero-skew { grid-template-columns: 1.05fr 0.95fr; }

.nf-hero-panel {
  border: 1px solid var(--neutral--600);
  border-radius: 10px;
  background-image: linear-gradient(#262e43, #191f31);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* ------------------------------------------------- detail responsiveness -- */

@media screen and (max-width: 991px) {
  .nf-detail-h1,
  .nf-detail-h1.nf-size-56,
  .nf-detail-h1.nf-size-52,
  .nf-detail-h1.nf-size-50,
  .nf-detail-h1.nf-size-46 { font-size: 40px; }

  .nf-detail-lede,
  .nf-detail-lede.nf-lede-19,
  .nf-detail-lede.nf-lede-20 { font-size: 18px; }

  .nf-h2-section,
  .nf-h2-section.nf-h2-36,
  .nf-h2-section.nf-h2-34 { font-size: 30px; }

  .nf-hero-split,
  .nf-hero-split.nf-hero-skew { grid-template-columns: 1fr; gap: 40px; }
  .nf-hero-panel { grid-template-columns: 1fr; gap: 40px; padding: 44px; }

  .nf-caps { column-gap: 48px; row-gap: 40px; }
  .nf-triggers { column-gap: 40px; }

  .nf-specbar { grid-template-columns: 1fr 1fr; }
  .nf-specbar-cell:nth-child(2) { border-right: none; padding-right: 0; }
  .nf-specbar-cell:nth-child(3) { padding-left: 0; }
  .nf-specbar-cell:nth-child(-n + 2) { border-bottom: 1px solid var(--neutral--600); }

  .nf-split,
  .nf-spec-row { grid-template-columns: 1fr; gap: 20px; }

  .nf-steps-connected { grid-template-columns: 1fr; gap: 40px; }
  .nf-steps-line { display: none; }

  .nf-steps-divided { grid-template-columns: 1fr; margin-left: 0; }
  .nf-step-divided {
    padding: 0 0 24px;
    border-right: none;
    border-bottom: 1px solid #262e43;
  }
  .nf-step-divided:last-child { border-bottom: none; padding-bottom: 0; }

  .nf-cta-panel { grid-template-columns: 1fr; gap: 28px; padding: 48px 36px; }
}

@media screen and (max-width: 767px) {
  .nf-detail-h1,
  .nf-detail-h1.nf-size-56,
  .nf-detail-h1.nf-size-52,
  .nf-detail-h1.nf-size-50,
  .nf-detail-h1.nf-size-46 { font-size: 33px; }

  .nf-h2-section,
  .nf-h2-section.nf-h2-36,
  .nf-h2-section.nf-h2-34,
  .nf-h2-section.nf-h2-32,
  .nf-h2-section.nf-h2-30 { font-size: 26px; }

  .nf-detail-section { padding-top: 60px; }
  .nf-detail-hero { padding: 40px 20px 48px; }
  .nf-rule-top { padding-top: 36px; }

  .nf-triggers { grid-template-columns: 1fr; }
  .nf-triggers > .nf-trigger:nth-last-child(-n + 2) { border-bottom-color: #262e43; }
  .nf-triggers > .nf-trigger:last-child { border-bottom-color: transparent; }

  .nf-caps { grid-template-columns: 1fr; }
  .nf-specbar { grid-template-columns: 1fr; }
  .nf-specbar-cell {
    padding: 22px 0;
    border-right: none;
    border-bottom: 1px solid var(--neutral--600);
  }
  .nf-specbar-cell:last-child { border-bottom: none; }

  .nf-statement-text { font-size: 21px; }
  .nf-cta-panel { padding: 36px 24px; }
  .nf-hero-panel { padding: 32px 24px; }
  .nf-step-card { grid-template-columns: 1fr; gap: 8px; }
}

/* ========================================================== pillar pages == */

.nf-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--neutral--600);
  flex-wrap: wrap;
}

.nf-tab {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 16px 26px;
  font-family: Fustat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--neutral--400);
  cursor: pointer;
  transition: color 0.3s;
}

.nf-tab:hover { color: var(--neutral--100); }

.nf-tab-on {
  color: var(--neutral--100);
  font-weight: 700;
  border-color: var(--neutral--600);
  background-image: linear-gradient(#262e43, #191f31);
}

.nf-domain-body { padding-top: 56px; gap: 64px; }

/* The active domain's item list clears its final hairline. */
.nf-domain-items .nf-trigger:last-child { border-bottom-color: transparent; }

/* Before / after comparison table (IT Purchasing). */
.nf-compare-table {
  border: 1px solid var(--neutral--600);
  border-radius: 10px;
  background-color: #1e2538;
  overflow: hidden;
}

.nf-compare-head,
.nf-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nf-compare-head { border-bottom: 1px solid #2b3345; }
.nf-compare-pair { border-bottom: 1px solid #2b3345; }
.nf-compare-pair:last-child { border-bottom: none; }

.nf-compare-h {
  padding: 24px 40px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}

.nf-compare-h-a { color: #c3c7d2; border-right: 1px solid #2b3345; }
.nf-compare-h-b { color: var(--system--blue); }

.nf-compare-c {
  padding: 28px 40px;
  font-size: 17px;
  line-height: 1.6em;
}

.nf-compare-c-a { color: #8d93a5; border-right: 1px solid #2b3345; }
.nf-compare-c-b { color: var(--neutral--100); }

/* "Who this is for" / "Common questions" — narrow heading, wide body. */
.nf-aside {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 64px;
  align-items: start;
}

.nf-faq-item { padding: 24px 0; border-bottom: 1px solid #262e43; }
.nf-faq-item:last-child { border-bottom: none; }

.nf-chapter-num {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  background-image: linear-gradient(90deg, var(--system--blue) 40%, var(--secondary--color-1));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 20px;
}

/* Numbered "how we work" columns with a rule above each. */
.nf-process-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.nf-process-col { border-top: 2px solid var(--secondary--color-1); padding-top: 24px; }

.nf-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}

.nf-scope-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #262e43;
  color: var(--neutral--300);
}

.nf-scope-title {
  color: var(--neutral--100);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 4px;
  transition: color 0.3s;
}

.nf-scope > .nf-scope-item:nth-last-child(-n + 2) { border-bottom-color: transparent; }

.nf-band {
  border-top: 1px solid var(--neutral--600);
  border-bottom: 1px solid var(--neutral--600);
  padding: 44px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

@media screen and (max-width: 991px) {
  .nf-aside { grid-template-columns: 1fr; gap: 28px; }
  .nf-process-cols { grid-template-columns: 1fr; gap: 28px; }
  .nf-compare-c { padding: 22px 24px; }
  .nf-compare-h { padding: 18px 24px; }
  .nf-domain-body { padding-top: 36px; }
  .nf-chapter-num { font-size: 46px; }
}

@media screen and (max-width: 767px) {
  .nf-scope { grid-template-columns: 1fr; }
  .nf-scope > .nf-scope-item:nth-last-child(-n + 2) { border-bottom-color: #262e43; }
  .nf-scope > .nf-scope-item:last-child { border-bottom-color: transparent; }
  .nf-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .nf-tab { padding: 12px 16px; font-size: 15px; }

  /* The comparison table becomes stacked before/after pairs. */
  .nf-compare-head { display: none; }
  .nf-compare-pair { grid-template-columns: 1fr; }
  .nf-compare-c-a { border-right: none; padding-bottom: 8px; }
  .nf-compare-c-a::before {
    content: "Buying it yourself";
    display: block;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: #c3c7d2;
    margin-bottom: 6px;
  }
  .nf-compare-c-b::before {
    content: "Buying it through Nordfox";
    display: block;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--system--blue);
    margin-bottom: 6px;
  }
}

/* ============================================================== footer == */

/* Footer logo lockup (mark + wordmark) is wider than the square fox mark
   the export sized its wrapper for (129px). */
.footer-logo-wrapper.nf-footer-lockup {
  max-width: 250px;
  margin-bottom: 0;
}

/* ============================================================ header nav == */

/* Breathing room for the chrome at widths where .container-default runs
   full-bleed (the export gives the wrappers no side padding). This narrows
   the row available to the nav; the fold breakpoints below account for it. */
.header-wrapper,
.footer-wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

/* Smaller header mark, and the nav block centred in the middle column
   (the export sized the logo at 116px and pushed the nav 60px right). */
.header-logo-link { max-width: 65px; }
.header-middle {
  padding-left: 0;
  justify-content: center;
}

/* Commerce is display-only and not part of the offering; the header cart
   is hidden (the markup stays for DOM parity with the export). */
.w-commerce-commercecartwrapper { display: none; }

/* Language toggle: globe glyph + locale code ("EN" / "FR"). */
.text-language.nf-lang {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nf-globe { display: block; flex: 0 0 auto; }

.header-nav-menu-list .header-nav-list-item a { text-align: center; }

/* The redesigned nav carries six links plus the language dropdown and
   contact button. Measured with the 65px logo, centred middle, hidden cart
   and the 20px chrome side padding above (which stacks with
   .container-default's own 20px), the unfolded EN nav needs a 1115px layout
   viewport; with the per-pillar dropdown carets, the compact language
   toggle and no Home item, the EN nav needs ~1062px single-line, so the
   fold triggers at 1080 to leave room for a 15px classic scrollbar (media
   queries include it) plus rendering slack.
   Webflow's nav script decides it is in mobile mode by reading the computed
   display of the menu button, so the display flips below are enough for the
   overlay to work.

   min-width is 991.02 rather than 992 on purpose: browser zoom produces
   fractional viewport widths, and a width strictly between 991 and 992
   would match neither Webflow's (max-width: 991px) tablet rules nor a
   (min-width: 992px) band — the desktop nav would reappear, unfolded and
   unspaced, in that sliver. 991.02 closes the gap for every reachable
   fractional width while still excluding 991 itself. */
@media screen and (max-width: 1080px) and (min-width: 991.02px) {
  /* Closed state only. The OPEN state needs no rules here: Webflow's nav
     script moves the menu into `.w-nav-overlay` and stamps
     `data-nav-menu-open`, whose base rules in webflow.css (unmedia'd)
     display and position it. Do not set position/top on the closed menu —
     it would tie with `.w-nav-overlay [data-nav-menu-open] { top: 0 }` and,
     loading later, push the opened menu below the overlay. */
  .header-wrapper .header-nav-menu-wrapper {
    display: none;
  }

  .header-wrapper .hamburger-menu-wrapper {
    display: block;
  }

  /* The rest mirrors the site's own ≤991px rules, which style the opened
     menu panel and the hamburger/X geometry. They live behind Webflow's
     tablet query and never apply in this band on their own. */
  .header-nav-menu-wrapper {
    border-top: 1px solid var(--neutral--600);
    border-bottom: 1px solid var(--neutral--600);
    background-color: var(--neutral--800);
    height: 100vh;
    max-height: 90vh;
    padding: 50px 24px;
  }

  .header-nav-menu-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
  }

  .header-nav-link { font-size: 30px; }

  .header-nav-list-item { margin-bottom: 12px; padding-left: 0; }
  .header-nav-list-item.show-in-tablet { display: block; }
  .header-nav-list-item.show-in-tablet.header-nav-btn {
    width: 100%;
    margin-top: auto;
    padding-top: 40px;
  }
  .header-nav-list-item.middle,
  .header-nav-list-item.middle-copy {
    margin-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  /* The X animation (IX2 NAVBAR_OPEN) is authored against the tablet bar
     geometry; without it the rotated bars render a skewed X. */
  .hamburger-menu-wrapper.w--open { background-color: #0000; }
  .hamburger-menu-bar { width: 35px; height: 3px; }
  .hamburger-menu-bar.bottom { width: 20px; margin: 12px 0; }

  /* The export only spaces the contact button off the hamburger in its own
     tablet range (≤991px: margin-right 24px); this band shows the hamburger
     early, so it needs the same gap. */
  .btn-primary.small.header-btn-hidde-on-mb {
    margin-right: 24px;
  }
}

/* French labels are wider: the FR nav needs ~1194px single-line, so FR
   keeps the hamburger up to 1200. Same rules as the band above, scoped with
   :lang(fr-ca) (set on <html>) so EN keeps its 1080 fold. min-width 1080.02
   closes the fractional-zoom sliver above the shared band exactly as 991.02
   does below it. */
@media screen and (max-width: 1200px) and (min-width: 1080.02px) {
  :lang(fr-ca) .header-wrapper .header-nav-menu-wrapper {
    display: none;
  }

  :lang(fr-ca) .header-wrapper .hamburger-menu-wrapper {
    display: block;
  }

  :lang(fr-ca) .header-nav-menu-wrapper {
    border-top: 1px solid var(--neutral--600);
    border-bottom: 1px solid var(--neutral--600);
    background-color: var(--neutral--800);
    height: 100vh;
    max-height: 90vh;
    padding: 50px 24px;
  }

  :lang(fr-ca) .header-nav-menu-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
  }

  :lang(fr-ca) .header-nav-link { font-size: 30px; }

  :lang(fr-ca) .header-nav-list-item { margin-bottom: 12px; padding-left: 0; }
  :lang(fr-ca) .header-nav-list-item.show-in-tablet { display: block; }
  :lang(fr-ca) .header-nav-list-item.show-in-tablet.header-nav-btn {
    width: 100%;
    margin-top: auto;
    padding-top: 40px;
  }
  :lang(fr-ca) .header-nav-list-item.middle,
  :lang(fr-ca) .header-nav-list-item.middle-copy {
    margin-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  :lang(fr-ca) .hamburger-menu-wrapper.w--open { background-color: #0000; }
  :lang(fr-ca) .hamburger-menu-bar { width: 35px; height: 3px; }
  :lang(fr-ca) .hamburger-menu-bar.bottom { width: 20px; margin: 12px 0; }

  :lang(fr-ca) .btn-primary.small.header-btn-hidde-on-mb {
    margin-right: 24px;
  }

  /* The desktop dropdown block (min-width 1080.02) also matches this band;
     FR is folded here, so restore the accordion presentation, including the
     per-variant styles under comparison. */
  :lang(fr-ca) .nf-navdd { position: static; }
  :lang(fr-ca) .nf-navdd-panel,
  :lang(fr-ca) .nf-navdd:hover > .nf-navdd-panel,
  :lang(fr-ca) .nf-navdd:focus-within > .nf-navdd-panel {
    display: none;
    position: static;
    transform: none;
    padding: 0;
    min-width: 0;
  }
  :lang(fr-ca) .nf-navdd.nf-open > .nf-navdd-panel { display: block; margin-top: 14px; }
  :lang(fr-ca) .nf-navdd-panel::before { display: none; }
  :lang(fr-ca) .nf-navdd-item {
    font-size: 17px;
    padding: 10px 14px;
    border-top: none;
    border-radius: 0;
    background-color: transparent;
    margin-top: 0;
  }
  :lang(fr-ca) .nf-navdd-item::before { display: none; }
  :lang(fr-ca) .nf-navdd-title { font-size: inherit; font-weight: inherit; color: inherit; display: inline; }
  /* settled rail accordion */
  :lang(fr-ca) .nf-navdd.nf-open > .nf-navdd-panel {
    position: relative;
    padding: 6px 0 6px 16px;
    border-radius: 0 8px 8px 0;
    background-color: rgba(247, 248, 252, 0.04);
  }
  :lang(fr-ca) .nf-navdd.nf-open > .nf-navdd-panel::before {
    content: "";
    display: block;
    position: absolute;
    inset: auto;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background-image: linear-gradient(180deg, #62ade1, #3a36ff);
    background-color: transparent;
    box-shadow: none;
  }
  :lang(fr-ca) .nf-navdd .nf-navdd-item + .nf-navdd-item {
    border-top: 1px solid rgba(59, 65, 81, 0.55);
  }
  :lang(fr-ca) .header-nav-list-item.nf-navdd-li { width: 100%; }
  :lang(fr-ca) .nf-navdd-head { justify-content: flex-start; gap: 12px; }
  :lang(fr-ca) .header-nav-menu-list .header-nav-list-item .nf-navdd-head a {
    width: auto;
    flex: 0 0 auto;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===================================================== nav dropdowns ==== */

/* Per-pillar dropdowns. Desktop (unfolded nav): a single settled style — the
   minimal accent list — opens on hover/focus below the item. Folded/overlay
   menu: the caret expands the settled rail-list accordion. */
.nf-navdd-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nf-navdd-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--neutral--400);
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

.nf-navdd-toggle:hover { color: var(--neutral--100); }
.nf-navdd.nf-open > .nf-navdd-head .nf-navdd-toggle { transform: rotate(180deg); }

/* Beats the header's centering rule (.header-nav-menu-list … a). */
.header-nav-menu-list .header-nav-list-item a.nf-navdd-item { text-align: left; }

.nf-navdd-panel { display: none; }
.nf-navdd.nf-open > .nf-navdd-panel { display: block; margin-top: 14px; }

.nf-navdd-item {
  display: block;
  padding: 10px 14px;
  color: var(--neutral--300);
  font-size: 17px;
  line-height: 1.4em;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
}

.nf-navdd-item:hover { color: var(--neutral--100); }
.nf-navdd-item.nf-on .nf-navdd-title { color: var(--system--blue); }

/* Settled accordion: rail list — gradient rail down the left, faint tint,
   hairline rows. */
.nf-navdd.nf-open > .nf-navdd-panel {
  position: relative;
  padding: 6px 0 6px 16px;
  border-radius: 0 8px 8px 0;
  background-color: rgba(247, 248, 252, 0.04);
}
.nf-navdd.nf-open > .nf-navdd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background-image: linear-gradient(180deg, #62ade1, #3a36ff);
}
.nf-navdd .nf-navdd-item + .nf-navdd-item {
  border-top: 1px solid rgba(59, 65, 81, 0.55);
}

/* In the overlay the pillar row spans the menu width (folded contexts
   only — the desktop row must keep shrink-wrapped items). */
@media screen and (max-width: 1080px) {
  .header-nav-list-item.nf-navdd-li { width: 100%; }
  .nf-navdd-head { justify-content: flex-start; gap: 12px; }
  /* The overlay stretches .header-nav-link to full width and centres its
     text; keep the pillar label shrink-wrapped so the caret sits beside it. */
  .header-nav-menu-list .header-nav-list-item .nf-navdd-head a {
    width: auto;
    flex: 0 0 auto;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* -------------------------------------------------- desktop dropdowns -- */
/* Applies where the nav is unfolded (EN ≥1080.02; the FR band block
   re-asserts the accordion for :lang(fr-ca) up to 1200). One settled style
   for every pillar: the minimal accent list. */
@media screen and (min-width: 1080.02px) {
  .nf-navdd { position: relative; }

  .nf-navdd .nf-navdd-panel,
  .nf-navdd.nf-open > .nf-navdd-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    margin-top: 0;
    padding: 20px 6px 6px; /* top = hover bridge between link and panel */
    background: none;
    border-radius: 0;
    min-width: 280px;
  }

  .nf-navdd:hover > .nf-navdd-panel,
  .nf-navdd:focus-within > .nf-navdd-panel {
    display: block;
  }

  .nf-navdd:hover > .nf-navdd-head .nf-navdd-toggle {
    transform: rotate(180deg);
    color: var(--neutral--100);
  }

  /* Frameless dark sheet behind the items (the .nf-open variant keeps this
     ahead of the base rail ::before at equal specificity). */
  .nf-navdd .nf-navdd-panel::before,
  .nf-navdd.nf-open > .nf-navdd-panel::before {
    content: "";
    display: block;
    position: absolute;
    inset: 14px 0 0 0;
    width: auto;
    background-color: rgba(20, 25, 38, 0.97);
    background-image: none;
    border-radius: 8px;
    box-shadow: 0 20px 44px rgba(5, 8, 16, 0.65);
    z-index: -1;
  }

  /* Neutralise the mobile accordion variants, then the accent-list rows. */
  .nf-navdd .nf-navdd-panel .nf-navdd-item {
    position: relative;
    margin-top: 0;
    padding: 9px 14px 9px 18px;
    border-top: none;
    border-radius: 0;
    background-color: transparent;
    font-size: 14.5px;
  }
  .nf-navdd .nf-navdd-panel .nf-navdd-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background-image: linear-gradient(180deg, #62ade1, #3a36ff);
    opacity: 0;
    transition: opacity 0.25s;
  }
  .nf-navdd .nf-navdd-panel .nf-navdd-item:hover::before { opacity: 1; }
  .nf-navdd .nf-navdd-panel .nf-navdd-item:hover { color: var(--neutral--100); }
}

/* Language selector, rebuilt on the settled dropdown pattern (see
   components/redesign/LangSelect.tsx). Toggle = globe + locale code; the
   panel is the settled sheet and floats at every width. */
.nf-langdd { position: relative; }

.nf-langdd-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.nf-langdd-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 14px 6px 6px; /* top = hover bridge */
  min-width: 150px;
}

.nf-langdd:hover .nf-langdd-panel,
.nf-langdd:focus-within .nf-langdd-panel,
.nf-langdd.nf-open .nf-langdd-panel { display: block; }

.nf-langdd-panel::before {
  content: "";
  display: block;
  position: absolute;
  inset: 8px 0 0 0;
  background-color: rgba(20, 25, 38, 0.97);
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(5, 8, 16, 0.65);
  z-index: -1;
}

.nf-langdd-item {
  position: relative;
  display: block;
  padding: 9px 14px 9px 18px;
  color: var(--neutral--300);
  font-size: 14.5px;
  line-height: 1.4em;
  text-decoration: none;
  transition: color 0.3s;
}

.nf-langdd-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 1px;
  background-image: linear-gradient(180deg, #62ade1, #3a36ff);
  opacity: 0;
  transition: opacity 0.25s;
}

.nf-langdd-item:hover::before { opacity: 1; }
.nf-langdd-item:hover { color: var(--neutral--100); }
.nf-langdd-item.nf-on { color: var(--system--blue); }

/* Active nav item. The exported stylesheet gives `.w--current` the same
   colour as a resting link, and Webflow's nav script rewrites `w--current`
   to exact-match only — which would drop the highlight while a solution page
   under a practice is open. `nf-nav-current` is set server-side and left
   alone by that script. */
.header-nav-link.nf-nav-current {
  color: var(--system--blue);
}

/* ============================================== home featured solutions == */

/* The home cards reuse the exported `.card.service` shape — "Wide image
   cards" in the mockup: image slot on top, eyebrow, flush-left 21px title,
   16px blurb. Equal-height rows: every row shares the tallest card's height. */
.nf-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 28px;
}

.nf-card-link {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card bottom whitespace comes from the card's own padding alone. The text
   section carries its own background — the settled fading gradient, distinct
   from the illustration plate (#1e2538) — and stretches to the card's
   bottom edge. */
.nf-card-link .card-service-content { padding: 32px; flex: 1; }

.nf-card-text { background-image: linear-gradient(180deg, #252c41, #1c2235); }

/* Placeholder filling the card's image slot edge to edge. 240px is the
   mockup's rendered slot height (stated 200px + its 20px padding). */
.nf-art-card {
  border: none;
  border-radius: 0;
  height: 300px;
  width: 100%;
}

@media screen and (max-width: 991px) {
  .nf-featured-grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 767px) {
  .nf-featured-grid { grid-template-columns: 1fr; }
}

/* ======================================================== about page ====== */

/* Section rhythm. The sections carry no vertical padding of their own; the
   child container owns it — margin for the space OUTSIDE a separator line,
   padding for the space between the line and the section's content. The
   separator hairlines are the containers' borders (no divider elements), so
   each line fades in with its section's own reveal. */
.section.nf-sec-operate,
.section.nf-sec-team,
.section.nf-sec-principles { padding-top: 0; padding-bottom: 0; }

/* hairline · 140 · operate content · 140 · (team's hairline) */
.nf-sec-operate > .container-default {
  border-top: 1px solid var(--neutral--600);
  padding-top: 140px;
  margin-bottom: 140px;
}

/* hairline · 130 · team content */
.nf-sec-team > .container-default {
  border-top: 1px solid var(--neutral--600);
  padding-top: 130px;
}

/* 130 · principles content · 140 · closing hairline above the footer */
.nf-sec-principles > .container-default {
  margin-top: 130px;
  padding-bottom: 140px;
  border-bottom: 1px solid var(--neutral--600);
}

/* "How we operate": narrow heading column against a wide text column. */
.nf-operate-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 80px;
  row-gap: 24px;
  align-items: start;
}

/* Team cards: the exported .team-item forces aspect-ratio 2 with content-box
   padding; the mockup cards are compact. Every card fills its grid row so
   all six render at the same height. */
.card.link-card.team-item.nf-team-card {
  aspect-ratio: auto;
  box-sizing: border-box;
  height: 100%;
  padding: 44px 48px;
}

/* The exported grid centres items, which lets a short card float at its own
   height; stretch keeps rows uniform. */
.grid-2-columns.nf-team-grid { align-items: stretch; }

@media screen and (max-width: 991px) {
  .nf-operate-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .nf-sec-operate > .container-default { padding-top: 90px; margin-bottom: 90px; }
  .nf-sec-team > .container-default { padding-top: 90px; }
  .nf-sec-principles > .container-default { margin-top: 90px; }
}

@media screen and (max-width: 767px) {
  .card.link-card.team-item.nf-team-card { padding: 28px 24px; }
  .nf-sec-principles > .container-default { padding-bottom: 90px; }
}

/* ================================================= about page principles == */

/* "Divided grid": six principles separated by hairlines rather than cards. */
.nf-values {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #2b3345;
  border-bottom: 1px solid #2b3345;
}

.nf-value {
  padding: 44px 40px;
  border-right: 1px solid #2b3345;
}

/* Clear the trailing rule at the end of each row, and the rule under the
   final row, so the block reads as a grid rather than a boxed table. The
   first column starts flush left and the last ends flush right; inner
   columns keep padding on both sides. */
.nf-values > .nf-value:nth-child(3n + 1) { padding-left: 0; }
.nf-values > .nf-value:nth-child(3n) { border-right: none; padding-right: 0; }
.nf-values > .nf-value:nth-child(n + 4) { border-top: 1px solid #2b3345; }

.nf-value-title {
  color: var(--neutral--100);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.24em;
  margin-bottom: 20px;
}

.nf-value-body {
  font-size: 17px;
  line-height: 1.65em;
  color: #9aa0b0;
  max-width: 400px;
}

@media screen and (max-width: 991px) {
  .nf-values { grid-template-columns: 1fr 1fr; }
  .nf-values > .nf-value { padding: 36px 32px; border-right: 1px solid #2b3345; }
  .nf-values > .nf-value:nth-child(3n + 1) { padding-left: 32px; }
  .nf-values > .nf-value:nth-child(2n + 1) { padding-left: 0; }
  .nf-values > .nf-value:nth-child(2n) { border-right: none; padding-right: 0; }
  .nf-values > .nf-value:nth-child(n + 3) { border-top: 1px solid #2b3345; }
}

@media screen and (max-width: 767px) {
  .nf-values { grid-template-columns: 1fr; }
  .nf-values > .nf-value,
  .nf-values > .nf-value:nth-child(n) { padding: 28px 0; border-right: none; }
  .nf-values > .nf-value:nth-child(n + 2) { border-top: 1px solid #2b3345; }
  .nf-value-title { font-size: 22px; margin-bottom: 12px; }
}

/* Turnstile slot in the contact form: reserve the managed widget's height so
   the submit button does not jump when the challenge renders. */
.nf-turnstile { min-height: 65px; }