/* ==========================================================================
   Insights v2 — new sections for insights-2.html, verified against the Figma
   Dev Mode source (file CR70V8ZRQR9Qg7LWefymrS, desktop frame 1820:6665,
   mobile frame 1820:6898). Loaded only by insights-2.html, after
   insights.css / detail.css and before v2-shared.css, so insights.html is
   untouched. The "Featured" section reuses insights.css's .news__list /
   .news__featured components (they're standalone classes, not scoped under
   .news) — only the heading above them, the column split and the section
   name are new. Only what is genuinely new, or genuinely different from the
   old page's tuning, lives here.

   Figma's page is 12 columns / 32px gutters inside a 1376px container, so a
   4-column label block is 437px and the content track beside it starts at
   469px. v2-shared.css already puts .split on that grid; the headings and
   "View all" links below that are NOT inside a .split need the same offset,
   hence --track-offset.
   ========================================================================== */

:root {
  /* left edge of the 8-column content track, measured from the container */
  --track-offset: calc((100% - 352px) / 3 + 128px);
}

/* Distance from the container's outer edge to the viewport edge: zero until
   the viewport passes --container-max, then half the surplus. A plain
   --container-pad only reaches the container, so these bands stopped short
   of the screen on anything wider than 1440. 100vw counts the scrollbar, so
   the sections using it clip the few px of overshoot. */
.featured,
.pr,
.itn,
.videos,
.signup--dark {
  --page-bleed: calc((100vw - min(100vw, var(--container-max))) / 2);
  --bleed-x: calc(var(--container-pad) + var(--page-bleed));
  overflow-x: clip;
}

/* Figma runs the row bands, the newsletter field and every "View all" rule
   past the container's right gutter, out to the viewport edge. */
.bleed-right { margin-right: calc(var(--bleed-x) * -1); }
.u-mobile { display: none; }

/* ---------- Hero: deep-blue ground instead of forest ----------
   Same fix as company-2.html's hero--v2: hero.webm and the .hero::after
   legibility gradient are both baked in forest green for the homepage
   hero, so neutralise the video to a pure luminance map and screen it
   onto the deep-blue backdrop, and give the gradient its own deep-blue
   tint. */
.hero--v2 { background-color: var(--color-deep-blue); }
/* Figma's hero content box is 996px, but "The latest from Hilbert Group" is
   one line there (text node 1820:6672 is 76px tall = a single 84px/0.9 line)
   and needs ~1090px to stay on one line in the browser. Widen just the box. */
.hero--v2.hero--wide .hero__content { width: 1100px; }
/* hero.webm is forest-toned: greyed, its ground sits at ~49/255 and its
   lines at ~199. brightness() lifted the ground too, so screening it washed
   the section out to slate. contrast(1.7) maps that ground to black — which
   screen leaves untouched — so the deep-blue stays flat under the animation.
   Same treatment as company-2. */
.hero--v2 .hero__video {
  filter: grayscale(1) contrast(1.7);
  mix-blend-mode: screen;
  opacity: 0.5;
}
/* the design is a flat ground, so home.css's legibility gradient goes */
.hero--v2::after { background: none; }
@media (max-width: 768px) {
  .hero--v2 .hero__inner { align-items: stretch; text-align: left; }
  .hero--v2 .hero__content { display: flex; flex-direction: column; }
}

/* ---------- Featured ----------
   Heading sits on the content track (x=469), not centred. The two columns
   butt up against each other with no gutter (Figma: 437 | 939 inside 1376),
   unlike every other .split on the page — hence the local override, which
   needs 3 classes to outrank v2-shared's `.site-header--v2 ~ main .split`. */
.featured { background: var(--color-almost-white); padding: var(--sp-120) 0; }
.featured__head { margin-left: var(--track-offset); }
.featured__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.featured .split.featured__body {
  grid-template-columns: calc((100% - 352px) / 3 + 96px) 1fr;
  column-gap: 0;
  margin-top: var(--sp-80);
  align-items: stretch;
}
/* three equal 216px rows filling the 648px card beside them, divided
   between rather than under each other, with "Read" on the row's foot */
.featured .news__featured { min-height: 648px; }
.featured .news-item { flex: 1 1 0; border-bottom: 0; }
.featured .news-item + .news-item { border-top: 1px solid var(--color-blue-10); }
.featured .news-item .link { margin-top: auto; }
/* news-maze.svg carries width/height="100%", so a width-only rule collapses
   it to a band; Figma places the 1030x1030 vector centred on x, 53px below
   the card's centre on y. */
.featured .news__featured-maze { width: 1030px; height: 1030px; top: calc(50% + 53px); }

/* ---------- Press Releases ----------
   Filter is the shared Input component (203x44, 16/22 text, blue-50 rule).
   Each row is a 22px tag over a bordered band that bleeds 16px left and out
   to the viewport edge on the right (Figma: 955px wide against a 907px
   track), so the band — not the tag — carries the hover highlight. */
.pr { background: var(--color-light-blue); padding: var(--sp-120) 0; }
.pr__inner { align-items: start; }
/* the eyebrow is a 375-only element; the desktop frame leads straight with
   the filter, so it stays hidden above the mobile breakpoint */
.pr__label { display: none; }
.pr__filter { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 203px; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--color-blue-50); font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); background: none; cursor: pointer; }
.pr__filter svg { width: 24px; height: 24px; flex-shrink: 0; }
.pr__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); margin-bottom: var(--sp-80); }
.pr-list { display: flex; flex-direction: column; gap: var(--sp-40); }
.pr-row { position: relative; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.pr-row__tag { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.pr-row__body {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--color-blue-10);
  padding: 16px 32px 40px 16px;
  margin-left: -16px;
  margin-right: calc(var(--bleed-x) * -1);
}
.pr-row__body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(23, 34, 58, 0.05); opacity: 0; transition: opacity 0.2s ease; }
.pr-row__body > * { position: relative; }
.pr-row:hover .pr-row__body::before { opacity: 1; }
.pr-row__title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.pr-row__arrow { padding-left: 0.25em; opacity: 0; transition: opacity 0.2s ease; }
.pr-row:hover .pr-row__arrow { opacity: 1; }
.pr-row__date { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
@media (max-width: 992px) { .pr__inner { grid-template-columns: 1fr; row-gap: 24px; } }

/* ---------- "View all" rules ----------
   A 22px label on a 4px/4px bed, underlined the full width of its track and
   out to the viewport edge. */
.pr__more, .itn__more, .videos__more {
  display: block;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-night);
  font-family: var(--font-body); font-size: 16px; line-height: 22px;
  color: var(--color-night);
  margin-right: calc(var(--bleed-x) * -1);
}
.pr__more { margin-top: var(--sp-40); }
.itn__more { margin-top: 52px; margin-left: var(--track-offset); }
.videos__more { margin-top: var(--sp-64); margin-left: var(--track-offset); }

/* ---------- In the News ----------
   A full-bleed-to-container night band carrying a 10%-opacity ascii texture,
   with a 908px blue-5 card justified to its right edge; then three
   left-ruled columns and a "View all" rule on the content track.
   manifesto-ascii.png was authored for the forest-toned manifesto band, so
   grayscale + screen-blend neutralises it into a luminance map that tints
   toward the night ground here, matching the reference's subtle texture. */
.itn { background: var(--color-almost-white); padding: var(--sp-120) 0 var(--sp-80); }
.itn__head { align-items: start; }
.itn__head > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.itn__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.56px; color: var(--color-night); }

.itn__feature {
  position: relative; overflow: hidden;
  margin-top: var(--sp-80);
  background: var(--color-night);
  padding: 16px 16px 16px 0;
  display: flex; align-items: center; justify-content: flex-end;
}
.itn__feature-art {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; max-width: none; height: auto;
  opacity: 0.3; filter: grayscale(1); mix-blend-mode: screen;
  pointer-events: none;
}
.itn__feature-card {
  position: relative; z-index: 1;
  width: 908px; max-width: 100%; height: 300px;
  background: var(--color-blue-5);
  padding-top: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.itn__feature-top { display: flex; align-items: flex-start; padding: 0 16px; }
.itn__feature-title { width: 471px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.itn__feature-card .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.itn__feature-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.itn__feature-desc { width: 309px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.itn__feature-meta { display: flex; align-items: center; padding: 8px 16px; border-top: 1px solid var(--color-blue-10); }
.itn__feature-meta span { width: 470px; flex-shrink: 0; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.itn__feature-meta a { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-night); text-decoration: none; }

.itn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.itn-card { border-left: 1px solid var(--color-blue-10); padding: var(--sp-40) 16px; display: flex; flex-direction: column; gap: var(--sp-80); }
.itn-card__head { display: flex; flex-direction: column; gap: 8px; }
.itn-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.itn-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.itn-card .link { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-night); text-decoration: none; }
@media (max-width: 992px) {
  .itn__head { grid-template-columns: 1fr; row-gap: 16px; }
  .itn__feature { padding: 16px; justify-content: stretch; }
  .itn__feature-card { width: 100%; height: auto; }
  .itn__feature-top { flex-direction: column; gap: 16px; }
  .itn__feature-title, .itn__feature-desc { width: 100%; }
  .itn__feature-meta span { width: auto; flex: 1; }
  .itn__grid { grid-template-columns: 1fr; }
  /* stacked cards: the column rules and their 16px indent go away, so the
     text sits on the container edge like the mobile frame (1820:6980) */
  .itn-card { gap: var(--sp-40); border-left: 0; padding: var(--sp-24) 0; }
  .itn-card + .itn-card { border-top: 1px solid var(--color-blue-10); }
}

/* ---------- Videos & Webinars ----------
   Heading and "View all" sit on the content track; the three 4-column cards
   run the full container width. Thumbs are 437x225. */
.videos { background: var(--color-almost-white); padding: var(--sp-120) 0; }
.videos__head { margin-left: var(--track-offset); }
.videos__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.56px; color: var(--color-night); }
.videos__grid { margin-top: var(--sp-64); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); }
.video-card { display: flex; flex-direction: column; gap: var(--sp-32); }
.video-card__thumb { position: relative; aspect-ratio: 437 / 225; background: var(--color-blue-10); display: flex; align-items: center; justify-content: center; }
.video-card__thumb svg { width: 64px; height: 64px; color: rgba(23, 34, 58, 0.25); }
.video-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.video-card__title { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
@media (max-width: 992px) { .videos__grid { grid-template-columns: 1fr; } }

/* ---------- Newsletter ----------
   Same signup band on the night ground so it reads as one continuous panel
   with the (also night) footer below. Figma stacks a light-green
   "Newsletter" line over the muted sentence at 40px/1, 80px above the
   field, and runs the field's rule out to the viewport edge. */
.signup--dark { background: var(--color-night); }
.signup--dark .signup__main { gap: var(--sp-80); }
.signup--dark .signup__head h2 { color: var(--color-gray-40); }
.signup--dark .signup__kicker { display: block; color: var(--color-light-green); }
.signup--dark .signup__form { margin-right: calc(var(--bleed-x) * -1); border-bottom-color: var(--color-light-green); }
.signup--dark .signup__form input { padding: 10px 16px 10px 0; color: var(--color-light-green); }
.signup--dark .signup__form input::placeholder { color: var(--color-light-green); }
.signup--dark .signup__form button { padding: 10px 16px; border-left-color: var(--color-light-green); color: var(--color-light-green); }

/* ==========================================================================
   Responsive — the mobile frame (1820:6898) drops every content-track offset
   and full-bleed rule back to the container edges.
   ========================================================================== */
@media (max-width: 992px) {
  .featured__head, .videos__head, .itn__more, .videos__more { margin-left: 0; }
  .featured .split.featured__body { grid-template-columns: 1fr; column-gap: 0; }
  .featured .news__featured { min-height: 420px; }
  .featured .news-item { flex: 0 0 auto; }
  .featured .news-item .link { margin-top: 4px; }
}
@media (max-width: 768px) {
  .u-desktop { display: none; }
  .u-mobile { display: inline; }

  /* the 375 frame gives the hero 747px, where the shared component's 736
     collapses under the shorter mobile copy */
  .hero--v2 { min-height: 747px; }

  /* 80px above "Featured" — --sp-80 collapses to 40 at this breakpoint */
  .featured { padding: 80px 0 var(--sp-80); }
  .featured__head h2 { font-size: 36px; letter-spacing: -0.36px; }
  .featured .split.featured__body { margin-top: var(--sp-40); }

  .pr { padding: 80px 0 var(--sp-80); }
  /* the frame stacks label, heading, filter, list, link. .pr__main has to
     dissolve for the filter to sit between the heading and the list. */
  .pr__inner { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; }
  .pr__aside,
  .pr__main { display: contents; }
  .pr__label { display: block; order: 1; margin-bottom: 16px; }
  .pr__main h2 { order: 2; font-size: 36px; letter-spacing: -0.36px; margin-bottom: 0; }
  .pr__filter { order: 3; }
  .pr-list { order: 4; gap: var(--sp-24); }
  .pr__more { order: 5; }
  /* full-width control with its rule running to both screen edges */
  .pr__filter {
    width: auto;
    margin: 64px calc(var(--bleed-x) * -1) 40px;
    padding: 10px var(--bleed-x);
  }
  .pr-row__title { font-size: 24px; }
  .pr-row__body { padding: 16px 16px 24px; margin-left: calc(var(--bleed-x) * -1); padding-left: var(--bleed-x); }
  .pr-row__arrow { opacity: 1; }

  .itn { padding: 80px 0 var(--sp-80); }
  .itn__head h2 { font-size: 36px; letter-spacing: -0.36px; }
  /* the 375 frame runs the night band 556px tall with the card inset 16px
     and pinned to its foot, so 240px of the texture reads above it */
  .itn__feature {
    margin-top: var(--sp-40);
    min-height: 556px;
    padding: 240px 16px 16px;
    align-items: stretch;
    justify-content: stretch;
  }
  .itn__feature-card { height: auto; }
  /* height:auto left the texture as a short centred band on a 556px block,
     so most of it read as flat night — cover the band instead */
  .itn__feature-art { width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; transform: none; }
  .itn__feature-card h3 { font-size: 28px; }

  .videos { padding: 80px 0 var(--sp-80); }
  .videos__head h2 { font-size: 36px; letter-spacing: -0.36px; }
  .videos__grid { margin-top: var(--sp-40); }

  /* these rules run to BOTH screen edges here, with the padding giving back
     what the margin took so the label stays on the container */
  .pr__more, .itn__more, .videos__more {
    margin-left: calc(var(--bleed-x) * -1);
    margin-right: calc(var(--bleed-x) * -1);
    padding-left: var(--bleed-x);
    padding-right: var(--bleed-x);
  }
  /* the field's rule runs to both screen edges while the input and the
     Subscribe button stay on the container, so the padding gives back
     exactly what the margin took */
  .signup--dark .signup__form {
    margin-left: calc(var(--bleed-x) * -1);
    margin-right: calc(var(--bleed-x) * -1);
    padding-left: var(--bleed-x);
    padding-right: var(--bleed-x);
  }
  .signup--dark .signup__main { gap: var(--sp-40); }
}