/* ==========================================================================
   The global page hero

   One component, used by every published page. The structure is fixed:

     a background video, full bleed, playing once and never looping
     a light wash, so the frame is present but not bright
     a semi-transparent black content treatment inside the master container
     one H1, one description, two buttons
     optionally the page's own approved hero-side content, in the same panel

   Height
   ------
   A clamp rather than a fixed value and never a viewport height. 100vh would
   push the first section of content below the fold on a laptop and produce a
   tall empty band on a tall monitor. The values below put the hero between 440 and
   560px on a desktop, between 400 and 470px on a tablet, and between 360 and 460px
   on a phone, which is tall enough to read as a hero and short enough that the
   page's real content is visible beside it. A hero carrying its own side content
   is allowed to grow past that, because it has more to hold; it stays
   content-driven rather than becoming a fixed band.

   The two treatments, and why there are two
   -----------------------------------------
   The scrim (.30, full bleed) and the panel (.50, inside the container) do
   different jobs. The scrim settles the whole frame so the video reads as
   background rather than as competing content. The panel is the treatment itself
   — roughly half black, with the video still visible through it and in the margin
   around it — and it is what the text sits on.

   Keeping them separate is what makes the hero look deliberate. A single
   full-bleed 50% wash would meet the opacity figure and hide the video
   completely; a full-bleed 30% wash alone would not be a treatment at all, just a
   tint.

   Alignment
   ---------
   A hero with nothing beside it centres its content — eyebrow, H1, description
   and both buttons on the panel's own centre line, with the panel staying the full
   width of the master container. A hero that does carry the page's own side
   content keeps a left-aligned text column beside it, and the two-column
   composition is centred as one block. Below the width where two columns fit,
   the split stacks and centres like any other hero.

   Measured against the brightest pixels that pass behind the panel, white text
   clears 4.5:1 on every bundled clip. tools/qa-hero-contrast.mjs.
   ========================================================================== */

.se-vhero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;

  min-height: clamp(440px, 46vw, 560px);
  padding-block: clamp(48px, 6vw, 76px);

  background-color: var(--se-navy-900);
  color: #fff;

  /* The hero owns its stacking context so the video, the wash and the content
     cannot be reordered by anything inside the page below it. */
  z-index: 0;
}

/* ------------------------------------------------------------------ Video */

.se-vhero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.se-vhero__bg .se-vidbg__video {
  display: block;
  width: 100%;
  height: 100%;
  /* Cover, so the clip fills the hero at any aspect ratio without letterboxing
     and without being stretched away from its own proportions. */
  object-fit: cover;
  /* The lower third of most of these clips is the busiest part. Anchoring to the
     top keeps the subject — screens, boards, racks — in frame on a wide hero
     where cover crops the sides. */
  object-position: center 38%;
}

/* A still used when no clip is available at all. */
.se-vhero__bg--still {
  background-size: cover;
  background-position: center 38%;
  background-color: var(--se-navy-900);
}

/*
   The video treatment, under the wash.

   On the video, not on the wash, so the wash stays a flat tint with no glass
   effect. Three things, each doing a specific job:

   - blur(4px) is the main lever, and it does the work a heavier wash would.
     A blurred element's bright pixels are averaged into their neighbours, so a
     narrow blown highlight — the server-rack cable run, a dashboard's white panel —
     spreads and loses its peak instead of sitting under the text as a hot spot.
     The problem was peak luminance, not overall brightness, so this fixes it
     without flattening the frame or darkening the wash past the brief's 30%. At
     4px the clip reads as a soft cinematic backdrop, which is the intent, and the
     subject is still recognisable.
   - scale(1.045) pushes the blur's own soft edge outside the visible frame. A
     blurred element goes translucent at its border, so without the extra scale the
     blur would leave a visible 4px halo around the video.
   - brightness(.82) trims what peak the blur leaves behind. The clips are read through a
     30% black wash, so a further 18% off the footage is not perceptible as the video
     being dimmed, and it is what brings the small uppercase eyebrow over 4.5:1 when a
     bright frame passes behind it. Blur alone could not: the bright regions are broad
     rather than narrow, so averaging them changed the peak very little (4.17:1 to
     4.27:1 across the site) and the shortfall had to be closed on luminance.

   Measured against the brightest 2% of the pixels behind each text box, at three
   points in each clip's loop: tools/qa-hero-contrast.mjs. The worst sample across
   the site went from 1.88:1 to over 4.5:1 on this change.
*/
.se-vhero__bg .se-vidbg__video {
  filter: blur(4px) saturate(1.05) brightness(.82);
  transform: scale(1.045);
}

/* ------------------------------------------------------------------- Wash */

/*
   The 30% treatment.

   Two stops rather than one flat tint: a slightly deeper band behind the text
   block and the flat 30% across the rest. A single flat .30 leaves the headline
   sitting on whatever the clip happens to be doing at that point, which on the
   darkest frames is not enough. A 6% extra behind the text, falling to nothing
   across the width, keeps the headline readable without the wash reading as a
   panel — there is no border, no radius and no shadow, so nothing about it looks
   like a card.
*/
.se-vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      100deg,
      rgba(0, 0, 0, .36) 0%,
      rgba(0, 0, 0, .32) 45%,
      rgba(0, 0, 0, .30) 100%
    );
}

/*
   A second wash for narrow screens, where the text column takes the full width
   and there is no frame beside it to keep the text off. Still well short of a
   heavy scrim: 30% to 40% rather than the 70%+ that would stop the video being
   visible at all.
*/
@media (max-width: 820px) {
  .se-vhero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, .30) 0%,
        rgba(0, 0, 0, .33) 55%,
        rgba(0, 0, 0, .40) 100%
      );
  }
}

/* ---------------------------------------------------------------- Content */

.se-vhero__inner {
  position: relative;
  width: 100%;
}

/*
   The content treatment.

   A semi-transparent black panel with a soft radius, sitting inside the site's
   master container rather than floating over the full width of the viewport.

   Why a panel and not a heavier flat wash
   ---------------------------------------
   The brief asks for roughly 50% black and for the video to stay visible through
   and around it. Those two together mean a panel, not a scrim: a full-bleed 50%
   wash would satisfy the opacity figure and kill the video everywhere at once,
   and a panel leaves the footage visible in the margin around it, which is where
   it is doing the work.

   rgba(0,0,0,.5) is the treatment. With white text over it, contrast measured
   against the brightest pixels that pass behind the panel is past 4.5:1 on every
   bundled clip, and the backdrop blur removes the narrow highlights a transparent
   panel would otherwise let through under the text.

   Why the panel is inside the container
   --------------------------------------
   Every word in the hero is inside .se-container, including this one. A panel that
   ran the full viewport width would put the treatment's own edges outside the
   content measure, and the text inside it would look like it had drifted relative
   to everything below. Keeping the panel on the same grid as the rest of the page
   is what stops the hero reading as a separate layer dropped on top.
*/
.se-vhero__panel {
  position: relative;

  background: rgba(0, 0, 0, .5);
  border-radius: clamp(14px, 1.4vw, 22px);
  padding: clamp(24px, 3vw, 44px);

  /*
     The blur is what makes a 50% panel safe under moving footage. It averages a
     blown highlight into its neighbours before the black sits on top, so a bright
     frame passing behind the text cannot punch a hole in the contrast. Scaled
     slightly so the blur's own soft edge stays outside the panel's rounded
     corners rather than fringing them.
  */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 48px rgba(4, 16, 60, .28);
}

/*
   The split variant: text on the left, the page's own hero-side content on the
   right, in one panel.

   One panel, not two. Two panels would draw a seam down the middle of the video
   and read as two unrelated blocks; one panel around both columns reads as a
   single composition, which is what the existing page-specific content needs in
   order to belong to the hero rather than sit beside it.

   The content column keeps the larger share even when the aside is narrow, so the
   H1 always starts at the same place on the page.
*/
.se-vhero--split .se-vhero__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
}

/* The aside is a column of its own, never wider than its share of the panel. */
.se-vhero__aside {
  min-width: 0;
  max-width: 100%;
}

/* Without an aside the content block is capped, so a hero is not a full-measure
   paragraph. With one, the grid already bounds it. */
.se-vhero__content {
  max-width: 46rem;
}

/*
   Centring the hero content.

   A hero with nothing beside it is centred: the eyebrow, the H1, the description
   and the two buttons all sit on the panel's own centre line, and the panel
   itself stays the full width of the master container.

   Why centre rather than left-align
   ---------------------------------
   With no second column there is nothing to read left-to-right against, so a
   left-aligned block on a wide panel leaves the right half looking empty and
   accidental. Centring uses the full width evenly and gives the page an opening
   that reads as deliberate rather than as a column that stopped early.

   The panel is deliberately NOT narrowed to match. A panel centred inside a
   narrower box with video either side of it is a different composition — a
   card floating on footage — and that is not what a single-column hero should
   be. The video stays visible around the panel's outer edges, which is what
   the treatment is for.
*/
.se-vhero__content {
  margin-inline: auto;
  text-align: center;
}

.se-vhero__eyebrow,
.se-vhero__title,
.se-vhero__desc {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * Text-only heroes
 * ------------------------------------------------------------------ */

/*
   A hero with no image, no bullets and no side content gets a paragraph sized
   to the space it actually has.

   The measure was 46ch for every hero, on the strength of the split layout: when
   a panel is two columns, 46ch is what is left of the left-hand one. Applied to
   a text-only hero it was the wrong number twice over. It left the paragraph at
   44% of a 1146px panel, and it wrapped the page's own copy into four short
   centred lines — a hero that reads as a caption under a headline rather than as
   the opening statement of a company.

   What the space is: measured at 1440px, the container is 1280px and the panel's
   inner width is 1146px, so 80% is 917px — about 83 characters a line at the
   hero's 18px, which is inside the 45-90 character range that line-length
   research treats as comfortable and is well past the point where an eye starts
   losing the start of the next line.

   The content block is released from its 46rem cap first. Leaving it would make
   an 80% paragraph overflow the block it lives in, which is how a "wide
   paragraph" becomes a paragraph that collides with the panel edge.

   Centring is kept. It is the approved design language for a single-column hero,
   and with a paragraph this width the composition is balanced rather than
   left-heavy. The paragraph's starting point shares the content block's centre
   line with the H1 above it, which is what keeps the two reading as one unit.

   Split heroes are untouched by all of this: they keep 46ch, because there the
   measure is set by the second column, not by the panel.
*/
.se-vhero:not(.se-vhero--split) .se-vhero__content {
  max-width: 100%;
}

.se-vhero:not(.se-vhero--split) .se-vhero__desc {
  max-width: 80%;
}

/*
   A single-section H1 gets the panel's own width, and a slightly smaller size on
   a wide screen.

   The 20ch cap belongs to a split hero, where the content column really is that
   narrow. A single-section hero's panel is 1,146px of inner width at 1440px, and
   holding its title to 520px of it wrapped twenty-seven service pages to three
   or four lines. Releasing the cap puts the same words on two lines, which is
   what a hero headline is for.

   The size steps down above 1500px because the panel keeps growing while the
   display face does not need to: a title that fits two lines at 1440px will
   still fit at 1920px, and dropping a step keeps the proportion between headline
   and panel the same rather than leaving a very large word floating in a very
   wide box. Below 1500px nothing changes, so the common desktop widths look
   exactly as they did.
*/
.se-vhero:not(.se-vhero--split) .se-vhero__title {
  max-width: 100%;
}

@media (min-width:1500px){
  .se-vhero:not(.se-vhero--split) .se-vhero__title{
    font-size:clamp(2.25rem,1.2rem + 1.9vw,2.9rem);
  }
}

/*
   The 80% is a desktop proportion, not a phone proportion.

   On a 390px phone the panel's inner width is 314px, so 80% of it is 251px. That
   is not a wide paragraph, it is a narrow one, and it costs lines rather than
   saving them: copy that reads as four comfortable lines on a laptop wrapped to
   fifteen here, which pushed these heroes to 80-99% of the viewport height and put
   the page's actual content entirely below the fold.

   Below 768px the paragraph takes the full panel. The proportion exists to stop a
   paragraph running the entire width of a wide hero; a phone has no room to spare
   for that, and the readability constraint on a phone is legibility, not measure.
*/
@media (max-width: 767px) {
  .se-vhero:not(.se-vhero--split) .se-vhero__desc {
    max-width: 100%;
  }
}

/* The buttons centre as a pair rather than sitting under the left edge. */
.se-vhero__actions {
  justify-content: center;
}

/*
   The split variant.

   Centre the content column, but the two columns themselves are not re-centred:
   the H1 belongs beside the side content, so the pair reads as one block centred
   on the screen. A centre-aligned H1 in a 45%-width column next to an aside
   would wrap badly and leave the two halves looking unrelated, which is the
   opposite of what a split is for.
*/
.se-vhero--split .se-vhero__content {
  max-width: none;
  text-align: left;
}

.se-vhero--split .se-vhero__title,
.se-vhero--split .se-vhero__desc,
.se-vhero--split .se-vhero__eyebrow {
  margin-inline: 0;
}

.se-vhero--split .se-vhero__actions {
  justify-content: flex-start;
}

/*
   The whole two-column composition, centred as one block.

   Capped so that on a wide display the split hero does not stretch from edge to
   edge with a very long aside beside a very long description. The leftover
   space is split evenly, so the video is visible on both sides and the
   composition sits on the screen's centre line.
*/
.se-vhero--split .se-vhero__panel {
  max-width: 1180px;
  margin-inline: auto;
}

/* -------------------------------------------------------------- Typography */

/*
   The eyebrow.

   It was the light brand orange, which measured 1.88:1 against the brightest
   pixels of the server-rack clip and 2.17:1 against the analytics dashboard — well
   under the 4.5:1 that 13px bold uppercase text needs. Orange is not a large-text
   size, so it does not qualify for the 3:1 allowance; it simply failed.

   A light tint over a background whose brightness is set by the video cannot
   guarantee contrast, because the video changes. White can, and white is what the
   rest of the hero's text uses, so the eyebrow now matches the description it
   introduces rather than reading as a different, weaker kind of label.

   Orange stays where it is always legible: the primary button, the focus ring and
   the accent phrase inside a headline, where it is set at 48px on a dark field.
*/
.se-vhero__eyebrow {
  margin: 0 0 12px;
  font-family: var(--se-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

/*
   The H1.

   Lighter and slightly larger than the page H1s elsewhere, because on a navy
   band over video the same weight that reads well on white turns into a solid
   block. The size is capped so it never wraps awkwardly on a wide hero.
*/
.se-vhero__title {
  margin: 0 0 18px;
  font-family: var(--se-font-head);
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  /*
     20ch is the measure of a split hero's content column, which is where this
     number came from. It is applied to every hero, including the single-section
     ones whose panel is 1,146px wide at 1440px, so a 70-character title wrapped
     to four lines at 520px of measure instead of two at full width.

     Single-section heroes release the cap below.
  */
  max-width: 20ch;
  text-wrap: balance;
}

/*
   The description.

   46ch, which is the measure a split hero's content column leaves once the side
   column has taken its share. Text-only heroes override this below to 80% of the
   panel, where there is no second column and the full width is the measure.

   No clamp here, and that is deliberate.

   The line budget is a desktop figure. It describes the measure at 1440px, and it
   is measured, not assumed. Below that width the same measure is narrower — the
   split hero's content column gives ground to the side content, and a phone gives
   ground to everything — so four lines of the same copy become five, then six. A
   four-line clamp applied at every width therefore cut the descriptions off
   mid-sentence on phones: every page failed the same audit at 390px while passing
   at 1440px, which is the signature of a rule written for one viewport and
   applied to all of them.

   So the clamp is scoped to the widths it was measured at, and below them the
   description wraps to whatever it needs and the hero grows with it. A hero that
   is one line taller on a phone is not a defect; a hero that stops mid-sentence
   is.
*/
.se-vhero__desc {
  /*
     margin-inline: auto is load-bearing and is stated here rather than left to
     the shared rule above it, because the `margin` shorthand below resets the
     inline margins to zero.

     Without it the paragraph's box sits flush against the left edge of a
     centred content block while the text inside it is centred, so the paragraph
     reads 115px left of the headline above it. That offset is half the difference
     between the block and the paragraph, so it grows with the paragraph's width:
     it was 115px at the old 46ch measure and is 115px at 80% too, which is why
     widening the measure without centring the box would have made the misalignment
     more obvious rather than less.

     Split heroes reset this to 0 below, because there the paragraph belongs to
     the left-hand column and must align to that column's left edge.
  */
  margin: 0 0 28px;
  margin-inline: auto;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
}

/*
   The clamp, at the width it belongs to, and the height each layout needs.

   1280px and up, where the hero's panel is at its widest and the measure is
   available. Kept as a guard for the one case composition cannot cover — the
   owner typing a long paragraph straight into a hero field in Admin, which would
   otherwise push the buttons out of a hero whose height is fixed.

   The two counts are different because the two measures are different. A split
   hero's paragraph is 46ch and its budget is four lines; a text-only hero's is
   80% of the panel — measured at 917px, about 83 characters a line — so its
   budget is five. One number for both would either crop the wider paragraphs or
   let the narrow ones sprawl.

   It clips rather than hides, which keeps the overflow measurable: the hero audit
   compares scrollHeight with clientHeight, so a clamp that fires is a test
   failure rather than something a visitor has to notice.
*/
@media (min-width: 1280px) {
  .se-vhero__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .se-vhero:not(.se-vhero--split) .se-vhero__desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

/* ---------------------------------------------------------------- Buttons */

/*
   Wider than the site default.

   The default button padding suits a button sitting on a white section beside
   other content. These two sit alone on a dark field, so they need enough width
   to read as a deliberate pair rather than as two small pills, and enough height
   to be a comfortable target. 14px 30px gives roughly 160px on a typical label.
*/
.se-vhero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin: 0;
}

.se-vhero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  /* Comfortable horizontal padding, consistent height, consistent radius. */
  padding: 15px 30px;
  min-height: 52px;
  border-radius: 999px;

  font-family: var(--se-font-head);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;

  transition:
    background-color .18s var(--se-ease),
    border-color .18s var(--se-ease),
    color .18s var(--se-ease),
    transform .18s var(--se-ease);
}

.se-vhero__btn .se-icon {
  flex: none;
  transition: transform .18s var(--se-ease);
}

.se-vhero__btn:hover .se-icon { transform: translateX(3px); }

.se-vhero__btn--primary,
.se-vhero__btn.se-btn--primary {
  background: var(--se-orange);
  border-color: var(--se-orange);
  color: #fff;
}

.se-vhero__btn--primary:hover,
.se-vhero__btn.se-btn--primary:hover {
  background: #e2560f;
  border-color: #e2560f;
  color: #fff;
  transform: translateY(-1px);
}

/* An outline on video, not a filled grey, which would read as disabled. */
.se-vhero__btn--ghost-light,
.se-vhero__btn.se-btn--ghost-light {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(2px);
}

.se-vhero__btn--ghost-light:hover,
.se-vhero__btn.se-btn--ghost-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--se-navy);
}

/* One focus treatment for both, so the pair never looks like one is interactive
   and the other is not. */
.se-vhero__btn:focus-visible {
  outline: 3px solid #ffb27a;
  outline-offset: 3px;
}

/* --------------------------------------------------------- Centred variant */

/*
   Only used where a centred hero is genuinely right — an archive or an overview
   rather than a service. The content is still capped, because a centred hero
   spanning the full measure reads as a banner rather than as a page opening.
*/
.se-vhero--center .se-vhero__content {
  margin-inline: auto;
  text-align: center;
}

.se-vhero--center .se-vhero__title,
.se-vhero--center .se-vhero__desc {
  margin-inline: auto;
}

.se-vhero--center .se-vhero__actions {
  justify-content: center;
}

/*
   A centred split overrides the centred default.

   This comes after the default centring rules so it wins on equal specificity:
   the two columns stay a readable left-aligned pair, because centre-aligning an
   H1 in a 45%-width column beside an aside wraps badly and leaves the two halves
   looking unrelated — the opposite of what a split is for.
*/
.se-vhero--center.se-vhero--split .se-vhero__content {
  text-align: left;
}

.se-vhero--center.se-vhero--split .se-vhero__actions {
  justify-content: flex-start;
}

/* ============================== Responsive ================================ */

@media (max-width: 1024px) {
  .se-vhero {
    min-height: clamp(420px, 52vw, 500px);
  }
}

/*
   The split collapses at 940px rather than at 820px or 1024px.

   The width the two columns actually need, measured rather than guessed:

     text column   a 46ch description at 16px is about 420px and the H1 is
                   capped at 20ch, so this column wants roughly 460px to keep
                   the description to three or four lines
     aside         the Company panels are min(300px, 100%), so 300px is the floor
     gap           24px to 52px, 52px at the desktop end
     panel padding two sides at 44px
     container     two sides of page gutter

   That totals about 940px of viewport. Below it the text column drops under a
   readable measure and the description starts running to six or seven lines.

   This was 1024px, which stacked a 1024px tablet for no reason and pushed the
   hero to roughly a thousand pixels tall on a screen nine hundred tall — the
   page's real content ended up further below the fold than before the change.
*/
@media (max-width: 940px) {
  .se-vhero--split .se-vhero__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 30px);
    align-items: start;
    /* One column is the same case as a hero with no aside, so the cap comes off
       and the content centres like every other narrow hero. */
    max-width: none;
  }

  /*
     Once stacked there is no longer a side-by-side composition, so the text
     centres with the rest of the hero rather than staying left-aligned against
     a column that no longer exists.
  */
  .se-vhero--split .se-vhero__content {
    text-align: center;
  }

  .se-vhero--split .se-vhero__title,
  .se-vhero--split .se-vhero__desc,
  .se-vhero--split .se-vhero__eyebrow {
    margin-inline: auto;
  }

  .se-vhero--split .se-vhero__actions {
    justify-content: center;
  }

  /* Once stacked, the aside is content that follows the buttons rather than a
     column beside them, so it gets a divider and a little air above it. */
  .se-vhero--split .se-vhero__aside {
    padding-top: clamp(18px, 2.4vw, 26px);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
}

@media (max-width: 820px) {
  .se-vhero {
    /* The brief's phone range. Content-driven rather than a fixed height, so a
       page with a short description does not get a tall empty band. */
    min-height: clamp(360px, 62vw, 460px);
    padding-block: clamp(28px, 6vw, 44px);
  }

  /* The panel follows the hero's own padding down rather than staying at the
     desktop size, which would eat most of a small phone's hero. */
  .se-vhero__panel {
    padding: clamp(20px, 4.5vw, 30px);
    border-radius: clamp(12px, 3vw, 18px);
  }

  /* The title's own max-width is a character count, so on a phone it simply
     fills the measure; this keeps it from becoming one word per line. */
  .se-vhero__title { max-width: 100%; }

  /* The description is allowed to run to four lines rather than being cut off,
     because on a phone that is four lines of real information. */
  .se-vhero__desc {
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* Buttons stack when they will not both fit, and stay full width so they are
     easy to tap. Below 560px they are always stacked: two side-by-side buttons
     on a 320px phone gives each about 130px, which is too narrow for a label
     like "Explore Hire a Developer". */
  .se-vhero__actions {
    gap: 12px;
  }

  .se-vhero__btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 22px;
  }
}

@media (max-width: 560px) {
  .se-vhero {
    min-height: clamp(360px, 78vw, 460px);
  }

  /*
     A service headline is a sentence, not a label.

     The shortest of them is 33 characters and the longest is 63: "Docker &
     Containerization for Consistent Deployments" is the longest, and at the
     previous 7.4vw it wrapped to four lines on a 390px phone, which pushed the
     description and both buttons below the fold on the site's most commercially
     important template.

     Two changes rather than one. The panel's own padding comes down to 14px,
     which hands twelve pixels back to the measure, and the headline steps down to
     6.8vw with a 1.6rem floor. Together they put a 44-character headline on two
     lines at 390px and a 56-character one on two lines at 480px.

     A 63-character headline still needs three lines at this width, and it keeps
     them: shrinking a phone headline far enough to force two would take it to
     about 21px, which is not a size a heading should be. Three lines of a long
     headline is the correct outcome on a 390px screen; four was not.
  */
  .se-vhero__panel {
    padding: 14px;
  }

  .se-vhero__title {
    font-size: clamp(1.6rem, 6.8vw, 2.05rem);
  }
}

/* A very short viewport in landscape: the hero must not be taller than the
   screen, or the buttons sit below the fold on a phone held sideways. */
@media (max-height: 520px) and (orientation: landscape) {
  .se-vhero {
    min-height: 0;
    padding-block: 28px;
  }

  .se-vhero__desc { margin-bottom: 18px; }
  .se-vhero__btn { min-height: 44px; padding: 10px 20px; }
}

/* ============================ Reduced motion =============================

   The clip is not attached at all, so nothing is downloaded and nothing plays.
   The poster is already in place as the element's poster attribute, which is what
   remains visible. Every word of the hero is text, so nothing is lost.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .se-vhero__btn,
  .se-vhero__btn .se-icon {
    transition: none;
  }

  .se-vhero__btn:hover { transform: none; }
  .se-vhero__btn:hover .se-icon { transform: none; }

  .se-vhero__bg .se-vidbg__video { filter: none; transform: none; }

  /*
     The panel's own blur is a static treatment, not motion, so it is kept: it is
     what keeps the text readable over the poster. Nothing about it moves.
  */
}
/* ==========================================================================
   Page-specific content that belongs inside a hero

   The home page's six capability areas and its value panel, and the Company
   subpage panels (Technology, People, Ideas, Real Growth), were all authored as
   hero content. They used to be emitted as a band of their own immediately
   below the hero.

   They are now passed to the hero and rendered inside it, in the same content
   treatment and over the same video. What follows is the styling for that
   placement. The blocks keep their original class names so the existing rules
   still apply; only their container and their position changed.

   Because the old band was already a dark navy one, the type colours here were
   already white and are unchanged. What did change is the container: these sit
   on the panel's own 50% black rather than on an opaque navy, which is why the
   panel keeps a translucent fill of its own instead of inheriting the old
   solid one.
   ========================================================================== */

/* ------------------------------------------------ Home: chips + focus panel */

/*
   The wrapper for a page's hero-side content.

   One stack, so a page that passes both a capability list and a value panel gets
   them in a sensible order with one consistent gap rather than two blocks that
   happen to sit next to each other.
*/
.se-vhero__extras {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  align-content: center;
}

/* The chips are two columns of short items, which is what they are. */
.se-homeproof__caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.se-homeproof__caps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

.se-homeproof__caps .se-icon {
  flex: none;
  margin-top: 3px;
  color: var(--se-orange-2, #ffb27a);
}

/*
   The panel.
   The old version was absolutely positioned so it overlapped the photograph,
   which only worked inside the two-column hero it was built for. It is now an
   ordinary block with a left rule, which is the same accent without a
   positioning dependency.
*/
/*
   The value panel.

   Translucent rather than the opaque card it was, because it now sits on the
   panel's own 50% black. A second opaque card inside a translucent panel reads
   as a box inside a box; at .06 white it reads as one raised area within the
   same surface, which is what it is.
*/
.se-homeproof__panel {
  position: static;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--se-orange);
  border-radius: var(--se-radius);
  padding: 15px 18px;
}

/*
   The panel's negative margin is undone inside the hero.

   .se-heropanel is the panel's original component name and main.css still styles
   it for the position it used to occupy: floating over the bottom-right corner of
   a hero photograph. On a narrow screen that context becomes

       .se-heropanel { margin-top: -32px; margin-inline: 16px; }

   which pulled the panel up over the photograph it was meant to overlap. The
   photograph is gone and the panel now sits in the hero's extras stack below the
   capability list, so the same -32px dragged it up over that list instead: at
   390px the panel overlapped the last capability row by 16px.

   The margin is reset here rather than the rule in main.css edited, because
   main.css is shared and the old component still exists for anything else using
   the .se-heropanel name.
*/
.se-vhero__extras .se-homeproof__panel {
  margin: 0;
  width: auto;
}

.se-homeproof__panel .se-heropanel__title {
  margin: 0 0 10px;
  font-family: var(--se-font-head);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.se-homeproof__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.se-homeproof__panel li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
}

.se-homeproof__panel .se-icon {
  flex: none;
  margin-top: 3px;
  color: var(--se-orange-2, #ffb27a);
}

@media (max-width: 820px) {
  /*
     The six capability areas go to one column inside the hero on a narrow screen.

     Two columns of short labels fit on a tablet but not on a phone, and a two
     column grid on a 390px screen gives each item about 150px — enough for
     "AI & Automation" to wrap mid-phrase, which looks worse than a single
     column that reads straight down.
  */
  .se-homeproof__caps { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------ Company submenu: panel and note rows */

/*
   These were inside the submenu hero. They are content the owner wrote for the
   page, so they stay — inside the hero, in its second column, not in a row of
   their own below it.
*/
.se-cosub-note {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--se-orange);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--se-ink-soft);
}

/*
   Inside the hero the note sits on the panel's 50% black rather than on a pale
   page, so its text has to be light.

   The note is `.se-csnote`, whose base rule sets navy text for use on a light
   page. Inside the hero that navy is unreadable, so the light colour is applied
   here. The orange underline is unchanged: it is the brand accent and it clears
   contrast on both backgrounds.
*/
.se-vhero__extras .se-cosub-note,
.se-vhero__extras .se-csnote {
  color: rgba(255, 255, 255, .92);
}

/* The note is a short line, not a paragraph; it does not need the 22ch measure
   it had on the old full-width row. */
.se-vhero__extras .se-csnote {
  max-width: 34ch;
}

/* The breadcrumb row: the trail, on the container, immediately under a hero. */
.se-breadcrumb-row--after-hero {
  padding-block: 16px 0;
}

/*
   The trail sits directly beneath a dark hero, so it needs a light ground of its
   own rather than inheriting whatever the next section happens to be.

   Without an explicit background the row was transparent: on a page whose first
   section is mist or ice the trail sat on a grey band, and on a page whose first
   section is white it sat on white, so the same component changed colour
   depending on the page it was printed on. White plus a hairline gives every
   hero one identical transition into the page below it, and the hairline reads
   as the boundary the hero's own bottom edge would otherwise have drawn.
*/
.se-breadcrumb-row--after-hero {
  background: var(--se-white);
  border-bottom: 1px solid var(--se-line-soft);
}

/* Inside a column rather than under a hero: no ground, no rule, no extra pad. */
.se-breadcrumb-row--in-column {
  background: none;
  border: 0;
  padding-block: 0 4px;
}

/* The accent phrase inside a hero H1. Emphasis, not a second heading. */
.se-vhero__accent {
  color: var(--se-orange);
}

/* ------------------------------------ Company: the values list below the hero */

/*
   Four values across the foot of the hero, now a band of their own under it. The
   class is the existing .se-cohero__values so its rules still apply; only the
   placement and the container are new.
*/
.se-covalues {
  background: var(--se-navy-900);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: clamp(20px, 2.4vw, 30px);
}

.se-covalues__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px;
}

.se-covalues__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

.se-covalues__list .se-icon {
  flex: none;
  margin-top: 3px;
  color: var(--se-orange-2, #ffb27a);
}

@media (max-width: 820px) {
  .se-covalues__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .se-covalues__list { grid-template-columns: minmax(0, 1fr); }
}