/* decodingit homepage — new design.
   Lives in a real stylesheet rather than an inline <style> in the node body:
   Drupal HTML-escapes quotes inside <style>, which silently broke the
   @font-face (font-family: &#039;Exo 2&#039;). The current homepage avoids
   the problem by using no quotes at all in its CSS; a file avoids it properly.
   Everything is scoped under .dit-hp so it cannot touch the theme. */

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/sites/default/files/fonts/exo2-variable-latin.woff2) format("woff2");
}

/* ── Exo 2, the brand face ────────────────────────────────────────────────
   The real thing, embedded. It is a VARIABLE font, so one 40 KB file covers
   the entire 100–900 axis — hence the weight range on the @font-face rather
   than a separate file per weight. Latin subset only.
   Licensed under the SIL Open Font License, which permits embedding.
   ─────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   Tokens. Every colour is lifted from the new logo SVG — nothing invented.
   #005598 deepest facet · #007ACD wordmark · #42afea bright facet
   #9ec5ec lightest facet · #b3b3b3 the "SOLUTIONS" grey
   ───────────────────────────────────────────────────────────────────────── */
.dit-hp {
  --deep:   #005598;
  --brand:  #007ACD;
  --azure:  #42afea;
  --tint:   #9ec5ec;

  /* Neutrals biased toward the brand hue so they read chosen, not inherited */
  --ink:    #0b1a2b;
  --ink-2:  #12263b;
  --page:   #ffffff;
  --mist:   #eff5fb;
  --line:   #dbe6f0;
  --text:   #1d2c3a;
  --muted:  #5b6f81;
  --on-dark:        #eaf2f9;
  --on-dark-muted:  #9fb4c6;

  /* Header and hero share one ambient wash — see the .hdr/.hero block. */
  --hdr-h:     60px;   /* the THEME header height. The designed .hdr was dropped at deploy, so this must track #header.header-one, which measures 60px. It was 94px, leaving the hero wash 34px out of step with the header and producing a visible seam. */

  --card:   #ffffff;
  --shadow: 0 1px 2px rgba(11,26,43,.05);

  /* #005598 is a fine FILL but a poor foreground on a dark ground, so every
     place it is used as text or a border reads this token instead. */
  --accent-fg: #005598;

  --f-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --wrap: 1180px;
}

/* ─────────────────────────────────────────────────────────────────────────
   DELIBERATELY LIGHT-FIRST — this page does not invert to a dark theme.

   Two reasons, and both are decisions rather than omissions. The wordmark is
   near-black on transparent, so on a dark ground it disappears and the mark's
   negative-space triangle fills in — the identity is a light-ground asset.
   And a wall-to-wall dark homepage was not wanted.

   Instead the page is hybrid: a light base with three deliberate dark
   accents — the announcement bar, the proof band and the closing call to
   action. The logo never appears on any of them.
   ───────────────────────────────────────────────────────────────────────── */

.dit-hp *, .dit-hp *::before, .dit-hp *::after{ box-sizing: border-box; }

.dit-hp{
  margin: 0;
  font-family: var(--f-sans);
  background: var(--page);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.dit-hp .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Eyebrows and labels take the utility face — a nod to "decoding" that a
   system stack can actually deliver, since the brand face cannot be loaded. */
.dit-hp .eyebrow{
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent-fg);
  margin: 0 0 14px;
}

/* Headlines are lowercase and tightly tracked, echoing the "decodingit"
   wordmark. That is the identity link, not a stylistic whim. */
.dit-hp h1, .dit-hp h2, .dit-hp h3{ text-wrap: balance; letter-spacing: -.022em; margin: 0; }
.dit-hp h1{ font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 800; line-height: 1.04; }
.dit-hp h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.1; }
.dit-hp h3{ font-size: 1.06rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.dit-hp p{ margin: 0; max-width: 66ch; }

.dit-hp a{ color: var(--brand); }
.dit-hp :where(a, .dit-hp button, .dit-hp input, .dit-hp summary):focus-visible{
  outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 3px;
}

/* ── The lockup ───────────────────────────────────────────────────────────
   The supplied master artwork, trimmed of its transparent margin and embedded
   directly — so the Exo 2 wordmark and the Cairo Arabic are the real thing,
   not a font substitution. Full lockup, 2.5:1.
   ───────────────────────────────────────────────────────────────────────── */
/* The lockup stacks three lines of type beside the mark, so it needs real
   height to stay legible — below about 60px the SOLUTIONS line and the Arabic
   turn to mush. Hence a taller header than a wordmark-only brand would need.
   A reduced horizontal variant would let this shrink; see the brand notes. */
.dit-hp .lockup{ display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.dit-hp .lockup img{ display: block; height: 66px; width: auto; }
.dit-hp .ftr .lockup img{ height: 78px; }
@media (max-width: 620px) { .dit-hp .lockup img{ height: 52px; } }

/* ── Buttons ──────────────────────────────────────────────────────────────
   No orange anywhere. The old logo carried an orange figure and the site
   inherited #f05a28 for actions; the new identity is single-hue, so actions
   earn attention through weight, fill and isolation instead of a second hue.
   ───────────────────────────────────────────────────────────────────────── */
.dit-hp .btn{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-sans); font-size: .93rem; font-weight: 700;
  padding: 13px 24px; border-radius: 4px;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .16s, color .16s, border-color .16s;
}
.dit-hp .btn-primary{ background: var(--deep); color: #fff; }
.dit-hp .btn-primary:hover{ background: #00426f; color: #fff; }
.dit-hp .btn-ghost{ background: transparent; color: var(--accent-fg); border-color: var(--line); }
.dit-hp .btn-ghost:hover{ border-color: var(--accent-fg); background: rgba(0,85,152,.05); }
.dit-hp .btn-on-dark{ background: var(--azure); color: #06263c; }
.dit-hp .btn-on-dark:hover{ background: #6bc3f2; color: #06263c; }
.dit-hp .btn-on-dark-ghost{ background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.dit-hp .btn-on-dark-ghost:hover{ border-color: var(--on-dark); background: rgba(255,255,255,.07); }
.dit-hp .btn-arrow{ transition: transform .16s; }
.dit-hp .btn:hover .btn-arrow{ transform: translateX(3px); }

/* ── Announcement ─────────────────────────────────────────────────────── */
.dit-hp .announce{
  background: var(--ink); color: var(--on-dark);
  font-size: .81rem; text-align: center; padding: 9px 24px;
}
.dit-hp .announce b{ color: #fff; font-weight: 700; }
.dit-hp .announce .dot{ color: var(--azure); margin: 0 9px; }

/* ── Header ───────────────────────────────────────────────────────────────
   Tinted from the same blue family as the hero, with the nav and the
   secondary button as white rounded panels sitting on it.

   The tint stays light on purpose: the wordmark is near-black and the mark's
   play-triangle is transparent negative space, so both fail on a strong blue.
   This is about as deep as the header can go while the logo still sits
   directly on it without a chip behind it. */
/* ── The shared wash ──────────────────────────────────────────────────────
   Header and hero paint the SAME gradient in the SAME 900px-tall coordinate
   space; the hero simply shifts it up by the header's height. Give each its
   own gradient and the blooms land in different places, which is exactly what
   produced a visible seam down the left where the main bloom sits.
   Consequence: --hdr-h below must stay equal to .hdr-in's height.
   ─────────────────────────────────────────────────────────────────────── */
.dit-hp .hdr, .dit-hp .hero{
  background-color: #f3f8fc;
  background-image:
    radial-gradient(1250px 700px at 50% 28%, rgba(158, 197, 236, .58), transparent 66%),
    radial-gradient(820px 460px at 18% 6%,  rgba(66, 175, 234, .16), transparent 62%),
    radial-gradient(820px 520px at 84% 88%, rgba(0,122,205, .09), transparent 64%),
    linear-gradient(180deg, #f7fafd 0%, #eaf2fb 50%, #f5f9fd 100%);
  background-repeat: no-repeat;
  background-size: 100% 900px;
}
.dit-hp .hdr{ background-position: 0 0; }
.dit-hp .hero{ background-position: 0 calc(-1 * var(--hdr-h)); }

.dit-hp .hdr{
  position: sticky; top: 0; z-index: 40;
  /* No border and no backdrop-filter: both drew a line at the seam — the
     filter by shifting saturation on one side of it. */
}
.dit-hp .hdr-in{ display: flex; align-items: center; justify-content: space-between; gap: 22px; height: var(--hdr-h); }

/* Fully rounded. 999px clamps to half the height, so this is the maximum —
   a larger number changes nothing from here. */
/* Translucent rather than solid white — the wash reads through it, so the nav
   sits on the gradient instead of covering it. The blur keeps the labels
   legible where the bloom underneath is strongest. */
.dit-hp .nav{
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .42); border-radius: 999px; padding: 6px;
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.dit-hp .nav a{
  font-size: .9rem; font-weight: 600; color: var(--text);
  text-decoration: none; padding: 9px 18px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.dit-hp .nav a:hover{ color: var(--accent-fg); background: var(--mist); }
/* Capsule, to match the nav sitting beside them. Scoped to the header only —
   buttons in the body keep the 4px radius that goes with the clipped card
   corners and triangular bullets. */
.dit-hp .hdr-cta{ display: flex; align-items: center; gap: 12px; }
.dit-hp .hdr-cta .btn{ border-radius: 999px; padding-inline: 26px; }
/* On a blue ground an outlined button reads as a hole and its hairline border
   all but disappears; white makes it a panel, matching the nav. Applies in the
   hero too, which now sits on the same wash. */
.dit-hp .hdr .btn-ghost, .dit-hp .hero .btn-ghost{ background: #fff; border-color: #fff; }
.dit-hp .hdr .btn-ghost:hover, .dit-hp .hero .btn-ghost:hover{ background: var(--mist); border-color: var(--mist); }
@media (max-width: 1000px) { .dit-hp .nav, .dit-hp .hdr-cta .btn-ghost{ display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Flat overlapping planes clipped into triangles — the mark's own geometry.
   No gradient washes: the identity is faceted and flat.
   ───────────────────────────────────────────────────────────────────────── */
/* Ambient wash rather than a flat fill: soft blue blooms weighted to the left,
   where the copy sits, fading to near-white at the edges. The faceted planes
   still sit on top at the right — the gradient is the ground, the geometry is
   the brand. */
.dit-hp .hero{ position: relative; overflow: hidden; }
.dit-hp .hero-facets{ position: absolute; inset: 0; pointer-events: none; }
.dit-hp .hero-facets span{ position: absolute; display: block; }
/* All four planes stay right of ~56% so they never sit under the headline —
   the copy column ends around there at every width the hero is two-column. */
/* Lighter than they were: over a flat fill these carried the whole hero, but
   over the wash the same opacities go muddy. */
.dit-hp .f1{ top: 0; right: 0; width: 44%; height: 100%;
      background: var(--tint); opacity: .26;
      clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); }
.dit-hp .f2{ top: 0; right: 0; width: 26%; height: 60%;
      background: var(--brand); opacity: .12;
      clip-path: polygon(100% 0, 100% 100%, 0 0); }
.dit-hp .f3{ bottom: 0; right: 0; width: 30%; height: 46%;
      background: var(--deep); opacity: .09;
      clip-path: polygon(0 100%, 62% 0, 100% 100%); }
.dit-hp .f4{ top: 52%; right: 30%; width: 9%; height: 22%;
      background: var(--azure); opacity: .28;
      clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* padding-block, NOT the padding shorthand: this element also carries .wrap,
   and a shorthand here would reset .wrap's 24px inline padding to zero —
   putting the headline flush against the screen edge on a phone. */
.dit-hp .hero-in{ position: relative; padding-block: 88px 92px; }
/* Below the two-column threshold the planes would sit behind the text, so
   they step back to a quiet corner instead of being dropped entirely. */
@media (max-width: 900px) {
  .dit-hp .f1{ width: 62%; opacity: .3; }
  .dit-hp .f2, .dit-hp .f4{ display: none; }
  .dit-hp .f3{ width: 46%; opacity: .1; }
}
/* ── CENTRED VARIANT ──────────────────────────────────────────────────────
   Centred copy needs a symmetrical field behind it, so the wash is re-weighted
   to the middle and the faceted planes are mirrored to frame rather than sit
   to one side. Wider measure than the left-aligned version: centred text needs
   more width before the ragged edges start looking arbitrary. */
.dit-hp .hero-in{ text-align: center; }
.dit-hp .hero-in > *{ margin-inline: auto; }
.dit-hp .hero-copy{ max-width: 780px; margin-inline: auto; }
/* The headline now shares the wordmark's typeface, so "your entire IT stack"
   and "decodingit" are visibly the same voice. Exo 2 runs a little wider than
   the system stack, so the tracking tightens to compensate. */
.dit-hp .hero h1{
  font-family: 'Exo 2', var(--f-sans);
  font-weight: 700;
  /* Tracking was tuned at 800; lighter strokes open the letterfit slightly, so
     this eases off a fraction to match. */
  letter-spacing: -.028em;
}
/* "one team." runs a horizontal gradient, light azure into deeper blue —
   both taken from the mark. Guarded by @supports because background-clip:text
   needs transparent text, and where it is unsupported that would render the
   phrase invisible rather than merely unstyled. */
.dit-hp .hero h1 em { font-style: normal; color: var(--accent-fg); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .dit-hp .hero h1 em{
    background-image: linear-gradient(95deg, #42afea 0%, #1a86d2 45%, #0067b2 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* the gradient must not be clipped by the descender of the 'y' above */
    padding-bottom: .04em;
  }
}
/* Same face as the headline so the hero reads as one typographic unit. Weight
   stated rather than inherited, so a later change to a parent cannot shift it. */
.dit-hp .hero-sub{
  font-family: 'Exo 2', var(--f-sans);
  font-weight: 400;
  font-size: 1.14rem; color: var(--muted);
  margin-top: 22px; margin-inline: auto;
}
.dit-hp .hero-btns{ display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; justify-content: center; }

/* ── Rotator — carried over from the current hero ─────────────────────────
   All five slides share ONE grid cell, so the rotator is as tall as its
   tallest slide and the page never jumps as the copy changes. Absolute
   positioning would collapse the height instead. */
.dit-hp .rotator{ display: grid; }
.dit-hp .rotator .slide{
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.dit-hp .rotator .slide.is-active{ opacity: 1; visibility: visible; }

/* Capability labels, not buttons. A background, a border and a full radius
   made these read as five clickable pills; they are a statement of scope, so
   all the chrome comes off and only the type remains. */
.dit-hp .hero-tags{ display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: 26px; }
.dit-hp .hero-tags span{
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
  background: none; border: 0; border-radius: 0; padding: 0;
}
/* Separator is the mark's own triangle rather than a bullet or a slash. */
.dit-hp .hero-tags span:not(:last-child)::after{
  content: ''; display: block;
  width: 5px; height: 5px; margin: 0 15px;
  background: var(--azure);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* On a phone the row wraps; the triangle would then dangle at a line end. */
@media (max-width: 620px){
  .dit-hp .hero-tags{ gap: 6px 0; }
  .dit-hp .hero-tags span:not(:last-child)::after{ margin: 0 10px; }
}

.dit-hp .hero-check{
  display: inline-block; margin-top: 24px; font-size: .87rem;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.dit-hp .hero-check:hover{ color: var(--accent-fg); border-bottom-color: var(--accent-fg); }

@media (prefers-reduced-motion: reduce) { .dit-hp .rotator .slide{ transition: none; } }
/* Mirrored copy of the same planes, held back so the pair frames the copy
   without reading as wallpaper. */
.dit-hp .hero-facets-m{ transform: scaleX(-1); opacity: .5; }

/* With copy in the middle, the planes have to retreat to the outer edges —
   at their left-aligned widths they cross the headline, and the small azure
   triangle lands squarely behind the buttons. Copy occupies the middle ~780px,
   so nothing decorative belongs inside roughly the central 60%. */
.dit-hp .hero .f1{ width: 26%; opacity: .22; }
.dit-hp .hero .f2{ width: 15%; opacity: .10; }
.dit-hp .hero .f3{ width: 20%; opacity: .08; }
.dit-hp .hero .f4{ display: none; }

/* ── Partner strip ────────────────────────────────────────────────────── */
.dit-hp .partners{ border-bottom: 1px solid var(--line); background: var(--page); }
/* padding-block for the same reason as .hero-in — this element carries .wrap too. */
.dit-hp .partners-in{ padding-block: 26px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.dit-hp .partners-lbl{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.dit-hp .partners-list{ display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dit-hp .partners-list span{ font-size: .93rem; font-weight: 700; color: var(--muted); letter-spacing: -.01em; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.dit-hp .sec{ padding: 84px 0; }
.dit-hp .sec-mist{ background: var(--mist); }
.dit-hp .sec-hd{ max-width: 720px; margin-bottom: 44px; }
.dit-hp .sec-hd p{ color: var(--muted); margin-top: 14px; font-size: 1.03rem; }

.dit-hp .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dit-hp .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 940px) { .dit-hp .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dit-hp .grid-3, .dit-hp .grid-2{ grid-template-columns: 1fr; } }

/* One clipped corner per card — the facet motif at component scale, used
   once rather than everywhere. */
.dit-hp .card{
  background: var(--card); border: 1px solid var(--line);
  padding: 26px 24px 24px; position: relative;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
  transition: border-color .16s, transform .16s;
}
.dit-hp .card:hover{ border-color: var(--accent-fg); transform: translateY(-2px); }
.dit-hp .card-ico{
  width: 34px; height: 34px; margin-bottom: 15px;
  background: var(--deep); opacity: .9;
  display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.dit-hp .card-ico svg{ width: 18px; height: 18px; }
.dit-hp .card p{ font-size: .91rem; color: var(--muted); margin-top: 9px; }
.dit-hp .card-link{
  display: inline-flex; align-items: center; gap: 7px; margin-top: 15px;
  font-size: .85rem; font-weight: 700; color: var(--deep); text-decoration: none;
}
.dit-hp .card-link:hover{ gap: 11px; }

/* ── Plans ────────────────────────────────────────────────────────────── */
.dit-hp .plans{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .dit-hp .plans{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dit-hp .plans{ grid-template-columns: 1fr; } }
.dit-hp .plan{
  border: 1px solid var(--line); background: var(--card);
  padding: 24px; display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}
.dit-hp .plan-tag{
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 11px;
}
.dit-hp .plan-name{ font-size: 1.22rem; font-weight: 800; letter-spacing: -.025em; }
.dit-hp .plan-name b{ color: var(--brand); font-weight: 800; }
.dit-hp .plan p{ font-size: .89rem; color: var(--muted); margin-top: 10px; flex: 1; }
.dit-hp .plan-for{
  font-size: .82rem; color: var(--text); margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.dit-hp .plan-for b{ font-weight: 700; }
.dit-hp .plan-featured{ border-color: var(--accent-fg); border-width: 1.5px; }
.dit-hp .plan-featured .plan-tag{ color: var(--accent-fg); }

/* ── Proof band ───────────────────────────────────────────────────────── */
.dit-hp .band{
  background: var(--ink); color: var(--on-dark);
  padding: 86px 0; position: relative; overflow: hidden;
}
.dit-hp .band-facets{ position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.dit-hp .band-facets span{ position: absolute; display: block; }
.dit-hp .b1{ top: 0; left: 0; width: 30%; height: 100%; background: var(--deep); opacity: .5;
      clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%); }
.dit-hp .b2{ top: 0; left: 14%; width: 16%; height: 62%; background: var(--brand); opacity: .35;
      clip-path: polygon(0 0, 100% 0, 0 100%); }
.dit-hp .b3{ bottom: 0; right: 0; width: 24%; height: 74%; background: var(--azure); opacity: .17;
      clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dit-hp .band .eyebrow{ color: var(--azure); }
.dit-hp .band h2{ color: #fff; }
.dit-hp .band-in{ position: relative; }
.dit-hp .band-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; }
@media (max-width: 800px) { .dit-hp .band-grid{ grid-template-columns: 1fr; gap: 26px; } }
.dit-hp .stat-n{
  font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.dit-hp .stat-l{
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--azure); margin: 12px 0 9px;
}
.dit-hp .band-grid p{ color: var(--on-dark-muted); font-size: .93rem; }

/* ── Tools ────────────────────────────────────────────────────────────── */
.dit-hp .tools{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 940px) { .dit-hp .tools{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dit-hp .tools{ grid-template-columns: 1fr; } }
.dit-hp .tool{
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  padding: 17px 18px; text-decoration: none; color: inherit;
  transition: border-color .16s;
}
.dit-hp .tool:hover{ border-color: var(--accent-fg); }
.dit-hp .tool-ico{ width: 8px; height: 8px; background: var(--azure); flex: none; margin-top: 8px;
            clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* These are spans inside an <a>, so they need to be told to stack — left
   inline they run the name and description together on one line. */
.dit-hp .tool > span:last-child{ display: block; min-width: 0; }
.dit-hp .tool-n{ display: block; font-size: .93rem; font-weight: 700; letter-spacing: -.01em; }
.dit-hp .tool-d{ display: block; font-size: .8rem; color: var(--muted); margin-top: 3px; }
.dit-hp .tool-new{
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-fg);
  border: 1px solid var(--accent-fg); padding: 1px 6px; margin-left: 8px;
  white-space: nowrap; vertical-align: 2px;
}

/* ── Insights ─────────────────────────────────────────────────────────── */
.dit-hp .post{ text-decoration: none; color: inherit; display: block; }
.dit-hp .post-thumb{
  height: 122px; background: var(--mist); border: 1px solid var(--line);
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.dit-hp .post-thumb span{ position: absolute; display: block; }
.dit-hp .pt1{ inset: 0; background: var(--tint); opacity: .5;
       clip-path: polygon(0 100%, 100% 22%, 100% 100%); }
.dit-hp .pt2{ top: 0; right: 0; width: 46%; height: 62%; background: var(--brand); opacity: .22;
       clip-path: polygon(100% 0, 100% 100%, 0 0); }
.dit-hp .post-meta{
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 15px 0 8px;
}
.dit-hp .post h3{ font-size: 1rem; }
.dit-hp .post:hover h3{ color: var(--accent-fg); }

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.dit-hp .close{
  background: var(--deep); color: #fff; padding: 76px 0;
  position: relative; overflow: hidden; text-align: center;
}
.dit-hp .close-facets{ position: absolute; inset: 0; pointer-events: none; }
.dit-hp .close-facets span{ position: absolute; display: block; }
.dit-hp .c1{ top: 0; left: 0; width: 38%; height: 100%; background: #00426f; opacity: .55;
      clip-path: polygon(0 0, 72% 0, 0 100%); }
.dit-hp .c2{ bottom: 0; right: 0; width: 34%; height: 88%; background: var(--azure); opacity: .16;
      clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dit-hp .close-in{ position: relative; max-width: 640px; margin: 0 auto; }
.dit-hp .close h2{ color: #fff; }
.dit-hp .close p{ color: rgba(255,255,255,.8); margin: 16px auto 0; }
.dit-hp .close-btns{ display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.dit-hp .close-note{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 22px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
/* Light footer — the lockup lands here at its largest, and a dark ground is
   exactly where the near-black wordmark stops working. */
.dit-hp .ftr{ background: var(--mist); color: var(--muted); border-top: 1px solid var(--line);
       padding: 52px 0 28px; font-size: .88rem; }
.dit-hp .ftr-top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .dit-hp .ftr-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dit-hp .ftr-top{ grid-template-columns: 1fr; } }
.dit-hp .ftr h4{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-fg); margin: 0 0 14px; font-weight: 600;
}
.dit-hp .ftr ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dit-hp .ftr a{ color: var(--muted); text-decoration: none; }
.dit-hp .ftr a:hover{ color: var(--accent-fg); }
.dit-hp .ftr-about{ max-width: 34ch; margin-top: 16px; }
.dit-hp .ftr-bot{
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem;
}

/* ── Brand notes — preview scaffolding, not part of the page ──────────── */
.dit-hp .notes{ background: var(--page); border-top: 4px solid var(--azure); padding: 66px 0 80px; }
.dit-hp .notes-tag{
  display: inline-block; font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--mist); border: 1px solid var(--line);
  color: var(--muted); padding: 5px 11px; margin-bottom: 20px;
}
.dit-hp .notes h2{ margin-bottom: 10px; }
.dit-hp .notes-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 36px; }
@media (max-width: 820px) { .dit-hp .notes-grid{ grid-template-columns: 1fr; } }
.dit-hp .note{ border: 1px solid var(--line); padding: 22px 22px 24px; background: var(--card); }
.dit-hp .note h3{ margin-bottom: 10px; }
.dit-hp .note p{ font-size: .9rem; color: var(--muted); }
.dit-hp .note p + p{ margin-top: 10px; }
.dit-hp .note-flag{ border-left: 3px solid var(--azure); }
.dit-hp .sw{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.dit-hp .sw div{ width: 88px; }
.dit-hp .sw i{ display: block; height: 46px; border: 1px solid var(--line); }
.dit-hp .sw code{ font-family: var(--f-mono); font-size: .66rem; color: var(--muted); display: block; margin-top: 5px; }
.dit-hp .cmp{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.dit-hp .cmp figure{ margin: 0; }
.dit-hp .cmp figcaption{
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.dit-hp .cmp-box{ border: 1px solid var(--line); padding: 14px; display: grid; place-items: center; min-height: 84px; }
.dit-hp .cmp-dark{ background: var(--deep); }
.dit-hp .q{ font-family: var(--f-mono); font-size: .78rem; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .dit-hp *{ transition: none !important; animation: none !important; }
  .dit-hp .card:hover{ transform: none; }
}

/* ── Full-bleed inside the theme container ────────────────────────────────
   The theme wraps node content in a ~1200px container, which would trap the
   hero wash, the dark proof band and the closing CTA at 1170px instead of
   letting them run edge to edge as designed. Each section breaks out to the
   viewport; the .wrap inside still centres content at 1180.

   overflow-x on the wrapper is not optional: 100vw includes the scrollbar
   while the container width does not, so without it the breakout introduces
   a few pixels of horizontal scroll. */
.dit-hp > section {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* ── Carried from the previous homepage: the partner marquee ─────────── */
/* PARTNERS */
.hp-partners {background:#f8fafc;padding:44px 20px}
.hp-partners-inner {max-width:960px;margin:0 auto;text-align:center}
.hp-partners-label {font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#94a3b8;margin:0 0 18px;display:block}
.hp-partner-pill {background:#fff;border:1px solid #e2e8f0;color:#475569;font-size:.8rem;font-weight:700;padding:7px 16px;border-radius:20px}
.hp-partner-pill--logo {display:flex;align-items:center;padding:6px 18px}
.hp-partner-pill--logo img {height:25px;width:auto;display:block}
.hp-partner-pills {overflow:hidden;width:100%;position:relative}
.hp-partner-pills::before,.hp-partner-pills::after {content:"";position:absolute;top:0;bottom:0;width:34%;z-index:2;pointer-events:none}
.hp-partner-pills::before {left:0;background:linear-gradient(to right,#f8fafc 0%,#f8fafc 35%,transparent 100%)}
.hp-partner-pills::after {right:0;background:linear-gradient(to left,#f8fafc 0%,#f8fafc 35%,transparent 100%)}
.hp-partner-track {display:flex;gap:10px;width:max-content;animation:hp-marquee-scroll 45s linear infinite}
.hp-partner-pills:hover .hp-partner-track {animation-play-state:paused}
.hp-partner-track {animation:none}
@keyframes hp-marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* The clip must sit on an ANCESTOR of the breakout, not on .dit-hp itself —
   overflow-x there clips the very sections that are trying to escape it, which
   silently pins them back to the container width.
   Unscoped on purpose: this stylesheet is loaded only by the homepage node, so
   it cannot affect any other page. If it is ever moved into the theme's global
   CSS, this rule must be re-scoped. */
body { overflow-x: hidden; }

/* The theme prints the node title above the content. The homepage does not want
   it — the hero is the page's opening statement. Unscoped deliberately: this
   stylesheet is loaded only by the homepage node, so no other page is affected. */
.header-title { display: none; }

/* ── Seam, final piece ────────────────────────────────────────────────────
   The header and hero now paint one continuous wash, but the decorative
   planes begin at the hero's top edge — which IS the seam — so their tint
   switched on abruptly there and re-drew the very line the shared wash had
   just removed. Fade the planes in over the first 90px instead: below the
   header the decoration is unchanged, at the join it contributes nothing.
   ─────────────────────────────────────────────────────────────────────── */
.dit-hp .hero-facets,
.dit-hp .hero-facets-m{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
}