/* =========================================================================
   PAGE FURNITURE  —  Haibridge  v4.11.0

   The homepage rendered as unbroken black type on unbroken white. Every word
   was right and the page had no shape: nothing signalled where a section began
   or which claim mattered most, and the mark that identifies the business
   appeared nowhere above the fold.

   This is the visual layer, and it is built from three things only:

     the keystone silhouette   used at scale as a structural element
     three surfaces            paper, a pale wash, and the brand blue
     the type ramp             already defined, now given room

   No photography. Not out of purity — a training provider that opens with a
   stock image of people around a laptop looks like every other one, and the
   brief rejects it. The mark and the typography are the identity; using them
   at scale is cheaper, faster to load, and cannot date.

   Tokens only. verify-code.py fails the build on an undeclared token, and
   verify-contrast.py holds every pairing below to WCAG 2.1 AA.
   ====================================================================== */

/* -------------------------------------------------------------------------
   FULL-BLEED

   Sections need to reach the viewport edge while their text stays in the
   measure. This escapes the container without requiring the page to be
   restructured, which matters because the pages are already provisioned and
   editable by the client.
   ---------------------------------------------------------------------- */

.hie-band {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
  padding-block: var(--hie-space-3xl);
  overflow: hidden;
}

.hie-band__inner {
  max-inline-size: var(--hie-container-max);
  margin-inline: auto;
  padding-inline: var(--hie-gutter);
  position: relative;
  z-index: 1;
}

.hie-band--paper  { background-color: var(--hie-color-surface); }
.hie-band--wash   { background-color: var(--hie-color-bg-sunken); }

.hie-band--ink {
  background-color: var(--hie-ink-blue);
  color: var(--hie-color-text-inverse);
}

.hie-band--ink h1,
.hie-band--ink h2,
.hie-band--ink h3,
.hie-band--ink p { color: var(--hie-color-text-inverse); }

.hie-band--ink a:not(.hie-btn) { color: var(--hie-color-link-inverse); }

/* A hairline between two like-coloured bands, so they read as separate
   sections rather than one long scroll. */
.hie-band--paper + .hie-band--paper,
.hie-band--wash + .hie-band--wash {
  border-block-start: 1px solid var(--hie-color-border);
}

/* -------------------------------------------------------------------------
   THE KEYSTONE, AT SCALE

   The mark is a trapezoid. Enlarged and set at low contrast behind the
   content it does the job a photograph would — depth, and something for the
   eye to rest against — while being 600 bytes of vector that cannot date and
   is unmistakably this business rather than a stock library's.

   aria-hidden in the markup: it carries no information a reader needs.
   ---------------------------------------------------------------------- */

.hie-keystone-bg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  transform: translateY(-50%);
  inline-size: clamp(320px, 42vw, 620px);
  block-size: auto;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .hie-keystone-bg {
    inset-inline-end: -25%;
    opacity: 0.05;
  }
}

/* -------------------------------------------------------------------------
   HERO

   A landing page needs a floor you land on. This is a dark blue field that
   holds the viewport, with the subject matter drawn into it — a network of
   nodes and links, which for a telecommunications and networking training
   company is what the business is about rather than an ornament.

   The hard edge where the white header meets the blue is the demarcation.
   Without it the header reads as content that happens to be at the top.
   ---------------------------------------------------------------------- */

.hie-hero {
  min-block-size: min(78vh, 680px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--hie-space-2xl), 7vw, var(--hie-space-4xl));
  background-color: var(--hie-ink-blue);

  /* Depth without a gradient blob: two very large, very soft radial washes
     placed off-centre, so the field is not a flat rectangle of one colour. */
  background-image:
    radial-gradient(ellipse 70% 90% at 78% 18%, rgba(37, 99, 235, 0.30), transparent 62%),
    radial-gradient(ellipse 60% 80% at 12% 96%, rgba(10, 47, 123, 0.85), transparent 58%);
}

/* The network graphic. Right half on desktop, bled to the edge. */
.hie-hero__net {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 58%;
  block-size: 100%;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to right, transparent, #000 32%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32%, #000 100%);
}

@media (max-width: 900px) {
  .hie-hero {
    min-block-size: auto;
  }

  .hie-hero__net {
    inline-size: 100%;
    opacity: 0.45;
    mask-image: linear-gradient(to bottom, transparent, #000 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
  }
}

.hie-hero__inner {
  max-inline-size: var(--hie-container-max);
  margin-inline: auto;
  padding-inline: var(--hie-gutter);
  position: relative;
  z-index: 1;
  inline-size: 100%;
}

.hie-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hie-space-2xs);
  font-family: var(--hie-font-mono);
  font-size: var(--hie-text-xs);
  letter-spacing: var(--hie-tracking-label);
  text-transform: uppercase;
  color: var(--hie-signal-blue-on-dark);
  margin: 0 0 var(--hie-space-lg);
  padding: var(--hie-space-3xs) var(--hie-space-sm);
  border: 1px solid var(--hie-ink-blue-raised);
  border-radius: var(--hie-radius-pill);
}

.hie-hero__title {
  font-family: var(--hie-font-display);
  font-weight: var(--hie-weight-bold);
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: var(--hie-tracking-display);
  color: var(--hie-color-text-inverse);
  margin: 0;
  max-inline-size: 15ch;
}

.hie-hero__lede {
  font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.5rem);
  line-height: var(--hie-leading-snug);
  color: var(--hie-signal-blue-on-dark);
  max-inline-size: 48ch;
  margin: var(--hie-space-lg) 0 0;
}

.hie-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hie-space-sm);
  margin-block-start: var(--hie-space-xl);
}

/* On the blue ground the primary action inverts: white fill, ink text at
   12.31:1. Signal Blue on Ink Blue is 2.38:1 and unusable. */
.hie-hero .hie-btn--primary {
  background-color: var(--hie-white);
  color: var(--hie-ink-blue);
  border-color: var(--hie-white);
}

.hie-hero .hie-btn--primary:hover,
.hie-hero .hie-btn--primary:focus-visible {
  background-color: var(--hie-signal-blue-on-dark);
  border-color: var(--hie-signal-blue-on-dark);
  color: var(--hie-ink-blue);
}

.hie-hero .hie-btn--ghost {
  color: var(--hie-color-text-inverse);
  border-color: var(--hie-signal-blue-on-dark);
  background-color: transparent;
}

.hie-hero .hie-btn--ghost:hover,
.hie-hero .hie-btn--ghost:focus-visible {
  background-color: var(--hie-ink-blue-raised);
  border-color: var(--hie-white);
}

.hie-hero__meta {
  margin-block-start: var(--hie-space-2xl);
  padding-block-start: var(--hie-space-md);
  border-block-start: 1px solid var(--hie-ink-blue-raised);
  font-size: var(--hie-text-sm);
  color: var(--hie-color-text-inverse-muted);
  max-inline-size: var(--hie-measure-prose);
}

.hie-hero :focus-visible {
  outline: var(--hie-border-thick) solid var(--hie-color-focus-inverse);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   HEADER / PAGE DEMARCATION

   A white bar above a dark field needs an edge or it reads as content that
   happens to sit at the top. One solid rule in the brand blue does it.
   ---------------------------------------------------------------------- */

.hie-header--bar {
  border-block-end: 3px solid var(--hie-ink-blue);
}

/* -------------------------------------------------------------------------
   SECTION HEADINGS

   A rule above the heading rather than a box around it. Cheaper visually, and
   it survives a client editing the text underneath.
   ---------------------------------------------------------------------- */

.hie-band h2 {
  font-family: var(--hie-font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: var(--hie-leading-heading);
  max-inline-size: 22ch;
  margin-block: 0 var(--hie-space-md);
}

.hie-band--paper h2,
.hie-band--wash h2 { color: var(--hie-ink-blue); }

.hie-band__lede {
  font-size: var(--hie-text-lg);
  line-height: var(--hie-leading-snug);
  max-inline-size: var(--hie-measure-prose);
  color: var(--hie-color-text-muted);
}

.hie-band--ink .hie-band__lede { color: var(--hie-signal-blue-on-dark); }

/* -------------------------------------------------------------------------
   CATEGORY CARDS — presence

   Previously a bordered rectangle with three lines in it. The count is the
   useful part: it tells a visitor whether a category is a shelf or a single
   course before they spend a click on it. So the count gets the accent, and
   the card gets a keystone-derived corner so ten cards read as a set rather
   than a table.
   ---------------------------------------------------------------------- */

.hie-cat-card__link {
  position: relative;
  padding: var(--hie-space-lg);
  border-radius: var(--hie-radius-md);
  border: 1px solid var(--hie-color-border);
  background-color: var(--hie-color-surface);
  overflow: hidden;
  transition:
    transform var(--hie-dur-fast) var(--hie-ease-out),
    box-shadow var(--hie-dur-fast) var(--hie-ease-out),
    border-color var(--hie-dur-fast) var(--hie-ease-out);
}

/* The keystone silhouette, clipped into the top-right corner. Same trapezoid
   as the mark, so the shape is recognisable rather than decorative. */
.hie-cat-card__link::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 84px;
  block-size: 84px;
  background-color: var(--hie-navy-050);
  clip-path: polygon(100% 0, 100% 100%, 18% 0);
  transition: background-color var(--hie-dur-fast) var(--hie-ease-out);
}

.hie-cat-card__link:hover,
.hie-cat-card__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--hie-shadow-md);
  border-color: var(--hie-ink-blue);
}

.hie-cat-card__link:hover::before,
.hie-cat-card__link:focus-visible::before {
  background-color: var(--hie-navy-100);
}

.hie-cat-card__title {
  font-size: var(--hie-text-lg);
  max-inline-size: 18ch;
}

.hie-cat-card__count {
  display: inline-block;
  margin-block-start: var(--hie-space-md);
  padding: var(--hie-space-3xs) var(--hie-space-xs);
  border-radius: var(--hie-radius-xs);
  background-color: var(--hie-navy-050);
  color: var(--hie-ink-blue);
  font-family: var(--hie-font-mono);
  font-size: var(--hie-text-xs);
  letter-spacing: var(--hie-tracking-label);
}

@media (prefers-reduced-motion: reduce) {
  .hie-cat-card__link { transition: none; }
  .hie-cat-card__link:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   BRIDGE METHOD — on the blue band
   ---------------------------------------------------------------------- */

.hie-band--ink .hie-bridge__step {
  border-block-start-color: var(--hie-signal-blue-on-dark);
}

.hie-band--ink .hie-bridge__letter { color: var(--hie-signal-blue-on-dark); }
.hie-band--ink .hie-bridge__name   { color: var(--hie-color-text-inverse); }
.hie-band--ink .hie-bridge__body   { color: var(--hie-color-text-inverse-muted); }

/* -------------------------------------------------------------------------
   VERIFICATION — the differentiator, given its own weight

   Anyone can sell a course. A credential a stranger can check without
   contacting anybody is the commercial proposition, and it was previously a
   paragraph like any other.
   ---------------------------------------------------------------------- */

.hie-verify-band__id {
  display: inline-block;
  margin-block: var(--hie-space-md);
  padding: var(--hie-space-sm) var(--hie-space-md);
  border: 1px dashed var(--hie-signal-blue-on-dark);
  border-radius: var(--hie-radius-sm);
  font-family: var(--hie-font-mono);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--hie-color-text-inverse);
}

/* -------------------------------------------------------------------------
   AUDIENCE CARDS on a wash
   ---------------------------------------------------------------------- */

.hie-band--wash .hie-audience__link {
  background-color: var(--hie-color-surface);
  border-inline-start-color: var(--hie-signal-blue);
}

.hie-band--wash .hie-audience__link:hover,
.hie-band--wash .hie-audience__link:focus-visible {
  background-color: var(--hie-navy-050);
}

@media print {
  .hie-band { inline-size: auto; margin-inline-start: 0; transform: none; padding-block: var(--hie-space-md); }
  .hie-band--ink { background: none; color: var(--hie-structure-black); }
  .hie-band--ink h1, .hie-band--ink h2, .hie-band--ink p { color: var(--hie-structure-black); }
  .hie-keystone-bg { display: none; }
}