/*----------------------------------------------------
@File: Content-doc sections
@Note: Built strictly on the existing e7 tokens.
       Ink #3c3333 | Black #000 | Cyan #02fcfa | Grey #f4f4f4
       Helvetica Now Pro (Light / Regular / Medium / Black)
       Cyan is an ACCENT only on light grounds (fails contrast
       as text on white); it is used as text on black only.
---------------------------------------------------- */

/* ---------- shared section furniture ---------- */

.section_heading {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1px;
  font-weight: 500;
  color: #3c3333;
  margin-bottom: 0;
}

.section_intro {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.1px;
  max-width: 680px;
  padding-top: 18px;
  color: #3c3333;
}

.on_dark .section_heading,
.on_dark .section_intro {
  color: #fff;
}

.eyebrow {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3c3333;
  margin-bottom: 22px;
  display: block;
}

.on_dark .eyebrow {
  color: #02fcfa;
}

/* ---------- hero additions ---------- */

#videoMessage2 .hero_sub {
  color: #fff;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.1px;
  max-width: 560px;
  margin-top: 22px;
  margin-bottom: 30px;
}

#videoMessage2 .hero_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

#videoMessage2 .hero_actions .git-button,
#videoMessage2 .hero_actions .cta-white {
  margin-bottom: 0;
  display: inline-block;
}

#videoMessage2 .hero_actions .cta-white:hover {
  background: #02fcfa;
  color: #000;
  border-color: #02fcfa;
}

/* ---------- at a glance ---------- */

.stats_area {
  background: #000;
  color: #fff;
  padding: 92px 67px;
}

.stats_area .stat_item {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 26px;
}

.stat_figure {
  font-family: "HelveticaNowBlack", sans-serif;
  font-size: 5rem;
  line-height: 5rem;
  letter-spacing: -2px;
  color: #02fcfa;
  display: block;
}

.stat_figure.is_word {
  font-size: 3rem;
  line-height: 5rem;
}

.stat_label {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  padding-top: 10px;
  display: block;
}

/* ---------- industries ---------- */

.industries_area {
  background: #f4f4f4;
  padding: 92px 67px;
}

.industry_grid {
  margin-top: 46px;
}

/* five across on desktop -- Bootstrap 4 has no 1/5 column */
@media (min-width: 992px) {
  .industry_grid > [class*="col-"] {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .industry_card .label .name {
    font-size: 19px;
    line-height: 23px;
  }
  .industry_card .label {
    padding: 18px;
  }
  .industry_card .idx_badge {
    left: 18px;
  }
}

.industry_card {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  background: #000;
}

.industry_card .thumb {
  display: block;
  position: relative;
  padding-bottom: 71.11%; /* 900x640 source -- reserves space, no CLS */
  overflow: hidden;
}

.industry_card .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.industry_card:hover .thumb img,
.industry_card:focus-visible .thumb img {
  transform: scale(1.05);
}

.industry_card .scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.industry_card .idx_badge {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #fff;
  opacity: 0.8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.industry_card .label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px;
}

.industry_card .label .name {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #fff;
}

.industry_card .label .fa {
  color: #02fcfa;
  font-size: 22px;
  line-height: 26px;
  flex: 0 0 auto;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

.industry_card:hover .label .fa {
  transform: translateX(5px);
}

.industry_card:focus-visible {
  outline: 3px solid #02fcfa;
  outline-offset: 3px;
}

/* ---------- why choose e7 ---------- */

.why_area {
  background: #000;
  color: #fff;
  padding: 92px 67px;
}

.why_col {
  display: flex;
}

.why_media {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 320px;
  margin-top: 46px;
}

/* absolute so the image never dictates the row height -- the list does */
.why_media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why_list {
  list-style: none;
  margin: 46px 0 0 0;
  padding: 0;
}

.why_list li {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.02em;
  color: #fff;
}

.why_list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.why_list .fa {
  color: #02fcfa;
  font-size: 15px;
  line-height: 25px;
  margin-right: 18px;
  flex: 0 0 auto;
}

/* ---------- case studies ---------- */

.case_area {
  padding: 92px 67px;
}

.case_card {
  border: 1px solid #e2e2e2;
  border-top: 3px solid #02fcfa;
  padding: 34px 30px 30px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.case_card:hover {
  border-color: #02fcfa;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.case_card .thumb {
  display: block;
  position: relative;
  padding-bottom: 56.22%; /* 900x506 source */
  overflow: hidden;
  margin: -34px -30px 26px -30px;
}

.case_card .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.case_card:hover .thumb img {
  transform: scale(1.04);
}

.case_card .case_tag {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d8888;
  display: block;
  margin-bottom: 12px;
}

.case_card h3 {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.7px;
  color: #3c3333;
  margin-bottom: 24px;
}

.case_card dl {
  margin: 0 0 24px 0;
}

.case_card dt {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3c3333;
  margin-top: 18px;
}

.case_card dt:first-child {
  margin-top: 0;
}

.case_card dd {
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #3c3333;
  margin: 8px 0 0 0;
}

.case_card .case_link {
  margin-top: auto;
  padding-top: 8px;
}

/* ---------- final cta ---------- */

.bs_area .bs_sub {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.02em;
  max-width: 560px;
  padding-top: 18px;
  color: #3c3333;
}

.bs_area .bs_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.bs_area .bs_actions .cta-button {
  margin-bottom: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .stats_area,
  .industries_area,
  .why_area,
  .case_area {
    padding: 70px 40px;
  }
  .stat_figure {
    font-size: 4rem;
    line-height: 4rem;
  }
  .stat_figure.is_word {
    font-size: 2.4rem;
    line-height: 4rem;
  }
}

@media (max-width: 991px) {
  .section_heading {
    font-size: 27px;
    line-height: 33px;
    letter-spacing: -0.6px;
  }
  .section_intro {
    font-size: 17px;
    line-height: 23px;
  }
  .stats_area,
  .industries_area,
  .why_area,
  .case_area {
    padding: 56px 15px;
  }
  .stats_area .stat_item {
    margin-bottom: 30px;
  }
  .industry_card .label .name {
    font-size: 19px;
    line-height: 23px;
  }
  .why_media {
    min-height: 240px;
    margin-bottom: 10px;
  }
  .case_card {
    margin-bottom: 24px;
  }
  #videoMessage2 .hero_sub {
    font-size: 15px;
    line-height: 21px;
    padding-left: 10px;
    max-width: 420px;
  }
  #videoMessage2 .hero_actions {
    padding-left: 10px;
  }
}

@media (max-width: 576px) {
  #videoMessage2 .hero_sub {
    display: none;
  }
  .stat_figure {
    font-size: 3.2rem;
    line-height: 3.4rem;
  }
  .stat_figure.is_word {
    font-size: 2rem;
    line-height: 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry_card .thumb img,
  .case_card .thumb img,
  .industry_card .label .fa {
    transition: none;
  }
  .industry_card:hover .thumb img,
  .case_card:hover .thumb img {
    transform: none;
  }
}

/*----------------------------------------------------
@Section: About Us page
Same tokens as above. Navy #0b2036 is the site's own
dark-panel colour (used by .ceo_area / .leadership_area).
---------------------------------------------------- */

.answer_capsule {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.4px;
  color: #3c3333;
}

/* ---------- our story ---------- */

.story_area {
  padding: 92px 67px;
}

.story_area p {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.02em;
  max-width: 620px;
}

.milestones_title {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: #3c3333;
  margin: 54px 0 0 0;
}

.milestones {
  list-style: none;
  margin: 26px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #d7d7d7;
}

.milestones .milestone {
  flex: 1 1 0;
  min-width: 180px;
  padding: 26px 24px 26px 0;
  border-right: 1px solid #e6e6e6;
  position: relative;
}

.milestones .milestone:last-child {
  border-right: 0;
}

/* the cyan tick that sits on the rule above each milestone */
.milestones .milestone::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: #02fcfa;
}

.milestones .ms_year {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #3c3333;
  margin-bottom: 8px;
}

.milestones .ms_label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #3c3333;
  padding-right: 14px;
}

/* unconfirmed dates read as clearly provisional, not broken */
.milestones .is_pending::before {
  background: #b9b9b9;
}

.milestones .is_pending .ms_year {
  color: #8d8888;
  border-bottom: 1px dashed #b9b9b9;
  display: inline-block;
  margin-bottom: 10px;
}

.ms_flag {
  display: inline-block;
  margin-top: 8px;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d8888;
  border: 1px solid #d7d7d7;
  padding: 3px 8px;
}

/* ---------- by the numbers: supporting note ---------- */

.stats_note {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.03em;
  color: #fff;
  opacity: 0.82;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---------- backed by ADQ ---------- */

.adq_area {
  background: #0b2036;
  color: #fff;
  padding: 92px 67px;
}

.adq_area .section_heading,
.adq_area p {
  color: #fff;
}

.adq_area .eyebrow {
  color: #02fcfa;
}

.adq_area p {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.03em;
  max-width: 620px;
}

/* ---------- leadership ---------- */

.leaders_area {
  padding: 92px 67px;
}

/* the site's .container is uncapped (bootstrap's max-width block is commented
   out), so the grid caps itself -- otherwise 3 cards span ~1740px at 1900px
   viewport and the portraits become enormous */
.leaders_grid {
  max-width: 1050px;
}

.leader_card {
  display: block;
  border: 1px solid #e2e2e2;
  padding: 0 0 26px 0;
  height: 100%;
  transition: border-color 0.25s ease;
}

.leader_card:hover {
  border-color: #b9b9b9;
}

.leader_card .leader_photo {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  background: #191919;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

/* portraits are 2:3 studio shots on a dark ground; a 1:1 well with
   object-position top keeps head and torso and crops only the lower third */
.leader_card .leader_photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.leader_card .leader_name {
  display: block;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 19px;
  line-height: 25px;
  letter-spacing: -0.3px;
  color: #3c3333;
  padding: 0 22px;
}

.leader_card .leader_role {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8d8888;
  padding: 8px 22px 0 22px;
}

.leader_card .leader_bio {
  display: block;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 13.5px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #5c5555;
  padding: 14px 22px 0 22px;
}

.leaders_note {
  margin-top: 30px;
}

.leaders_note a {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #3c3333;
  border-bottom: 1px solid #d5d5d5;
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}

.leaders_note a:hover {
  color: #3c3333;
  border-bottom-color: #3c3333;
}

.leaders_note .fa {
  margin-left: 8px;
  font-size: 13px;
}

/* ---------- explore more ---------- */

.links_strip {
  background: #f4f4f4;
  padding: 70px 67px;
}

.quick_links {
  list-style: none;
  margin: 22px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.quick_links a {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.3px;
  color: #3c3333;
  border-bottom: 1px solid transparent;
}

.quick_links a:hover {
  border-bottom-color: #02fcfa;
  color: #000;
}

.quick_links .fa {
  color: #02fcfa;
  font-size: 18px;
  padding-left: 8px;
  vertical-align: middle;
}

/* ---------- about page responsive ---------- */

@media (max-width: 1199px) {
  .story_area,
  .adq_area,
  .leaders_area,
  .links_strip {
    padding: 70px 40px;
  }
}

@media (max-width: 991px) {
  .answer_capsule {
    font-size: 20px;
    line-height: 27px;
  }
  .story_area,
  .adq_area,
  .leaders_area,
  .links_strip {
    padding: 56px 15px;
  }
  .milestones {
    display: block;
  }
  .milestones .milestone {
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
    padding: 22px 0;
  }
  .milestones .milestone:last-child {
    border-bottom: 0;
  }
  .leader_card {
    margin-bottom: 24px;
  }
  .quick_links {
    gap: 4px 26px;
  }
  .quick_links a {
    font-size: 17px;
  }
}

/*----------------------------------------------------
@Section: Secure Identity Solutions page
Same tokens as above. Navy #0b2036 is the site's own
dark-panel colour, shared with .adq_area.

Note on cyan: the spec lists on WHITE grounds carry no
cyan tick. #02fcfa is ~1.3:1 on white, so a 13px glyph
would be an invisible bullet. Those lists are delimited
by hairlines instead. Cyan ticks appear only on the
black and navy bands, where they are legible.
---------------------------------------------------- */

/* ---------- hero ---------- */

/* this page's h1 runs to 66 characters -- roughly double the homepage's -- so
   the measure widens rather than the type shrinking, keeping the 4rem scale
   the other two pages use. Steps down with banner.css's own breakpoints. */
.si_hero #videoMessage2 h1 {
  max-width: 1040px;
}

.si_hero #videoMessage2 .hero_sub {
  max-width: 720px;
}

@media (max-width: 1199px) {
  .si_hero #videoMessage2 h1 {
    max-width: 760px;
  }
  .si_hero #videoMessage2 .hero_sub {
    max-width: 560px;
  }
}

@media (max-width: 991px) {
  .si_hero #videoMessage2 h1 {
    max-width: 520px;
  }
}

@media (max-width: 576px) {
  .si_hero #videoMessage2 h1 {
    max-width: 280px;
  }
}

/* .view_more is ink-on-white by default; the dark bands need the reverse */
.on_dark .view_more {
  color: #fff;
}

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

.caps_area {
  padding: 92px 67px;
}

.cap_block {
  border-top: 1px solid #e2e2e2;
  padding-top: 42px;
  margin-top: 54px;
  position: relative;
}

/* the same 34px cyan tick the milestone rail uses, so the two read as one system */
.cap_block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: #02fcfa;
}

.cap_ord {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c5555;
  margin-bottom: 14px;
}

.cap_title {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.8px;
  color: #3c3333;
  margin: 0;
}

.cap_text {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.02em;
  color: #3c3333;
  max-width: 640px;
  margin-bottom: 28px;
}

.cap_body {
  margin-top: 26px;
}

/* one spec per row: the list now occupies its own column beside the paragraph
   rather than running full width beneath a title, so it no longer needs to
   fold into two columns of its own */
.cap_specs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cap_specs li {
  padding: 14px 0 16px 0;
  border-top: 1px solid #ececec;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #3c3333;
}

.cap_link {
  margin-top: 26px;
}

/* ---------- certifications ---------- */

.certs_area {
  background: #0b2036;
  color: #fff;
  padding: 92px 67px;
}

.certs_area .section_heading,
.certs_area .section_intro {
  color: #fff;
}

.certs_area .eyebrow {
  color: #02fcfa;
}

/* a bordered register rather than a plate grid: the five entries are quoted
   verbatim and vary from 32 to 74 characters, which a fixed grid renders
   unevenly. Full-width rows take any length without looking broken. */
.cert_register {
  list-style: none;
  margin: 46px 0 0 0;
  padding: 0;
  max-width: 1000px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.cert_register li {
  display: flex;
  align-items: flex-start;
  padding: 22px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #fff;
}

.cert_register li:first-child {
  border-top: 0;
}

/* on desktop the register sits beside the heading rather than beneath it, so
   it aligns to the top of the column instead of clearing a section intro */
@media (min-width: 992px) {
  .cert_register {
    margin-top: 6px;
  }
}

.cert_register .fa {
  color: #02fcfa;
  font-size: 14px;
  line-height: 24px;
  margin-right: 18px;
  flex: 0 0 auto;
}

.certs_note {
  margin-top: 30px;
}

.certs_note a {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}

.certs_note a:hover {
  color: #fff;
  border-bottom-color: #02fcfa;
}

.certs_note .fa {
  color: #02fcfa;
  margin-left: 10px;
  font-size: 14px;
}

/* ---------- industries served ---------- */

/* Three across, not the homepage's five. `.industry_grid` carries a
   `flex: 0 0 20%` override above 992px, so this grid uses its own class and
   keeps Bootstrap's col-lg-4 — wider cards, and the base 22px label size
   holds instead of dropping to 19px. */
.sectors_grid {
  margin-top: 46px;
}

/* these six cards are not links (the doc gives the sectors no destinations),
   so nothing on them should behave like one: no chevron in the markup, no
   hover zoom, no focus ring, no pointer cursor */
.industry_card.is_static {
  cursor: default;
}

.industry_card.is_static:hover .thumb img {
  transform: none;
}

/* ---------- implementation approach ---------- */

.process_area {
  padding: 92px 67px;
}

.process_rail {
  list-style: none;
  margin: 46px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #d7d7d7;
}

.process_rail .ps_item {
  flex: 1 1 0;
  min-width: 200px;
  padding: 26px 26px 26px 0;
  border-right: 1px solid #e6e6e6;
  position: relative;
}

.process_rail .ps_item:last-child {
  border-right: 0;
}

.process_rail .ps_item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: #02fcfa;
}

.process_rail .ps_step {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c5555;
  margin-bottom: 10px;
}

.process_rail .ps_name {
  display: block;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #3c3333;
  margin-bottom: 10px;
}

.process_rail .ps_text {
  display: block;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #3c3333;
  padding-right: 14px;
}

/* ---------- secure identity responsive ---------- */

@media (max-width: 1199px) {
  .caps_area,
  .certs_area,
  .process_area {
    padding: 70px 40px;
  }
  .cap_title {
    font-size: 27px;
    line-height: 32px;
  }
}

@media (max-width: 991px) {
  .caps_area,
  .certs_area,
  .process_area {
    padding: 56px 15px;
  }
  .cap_block {
    margin-top: 38px;
    padding-top: 32px;
  }
  .cap_ord {
    margin-bottom: 10px;
  }
  .cap_body {
    margin-top: 18px;
  }
  .cap_specs {
    margin-top: 22px;
  }
  .cert_register {
    margin-top: 30px;
  }
  .cert_register li {
    padding: 18px 20px;
    font-size: 15px;
    line-height: 22px;
  }
  .certs_note a {
    font-size: 14px;
  }
  .sectors_grid {
    margin-top: 34px;
  }
  .process_rail {
    display: block;
  }
  .process_rail .ps_item {
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
    padding: 22px 0;
  }
  .process_rail .ps_item:last-child {
    border-bottom: 0;
  }
}

/* ---------- view_more hover ---------- */

/* the page's four .view_more CTAs were the only interactive elements with no
   feedback. This reuses the exact nudge .industry_card already applies to its
   chevron (translateX 5px / 0.3s ease) rather than inventing a new motion. */
.view_more .fa {
  transition: transform 0.3s ease;
}

.view_more:hover .fa {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .view_more .fa {
    transition: none;
  }
  .view_more:hover .fa {
    transform: none;
  }
  .certs_note a {
    transition: none;
  }
}

/* ---------- symmetric bottom padding for intro bands ---------- */

/* `.section_gap` (e7group.css) ships `padding: 60px 69px 0px 67px` — zero
   bottom. The site leans on the *next* section's top padding for separation,
   which works while the next band is white. It fails against a dark band:
   `.stats_area`'s 92px sits inside its own black background, so the text above
   ran flush into the black edge with only the trailing paragraph's 1rem margin
   between them. Reviewer-reported 4 Sep 2026. This restores a bottom pad equal
   to the top at both of `.section_gap`'s breakpoints. */
.section_gap.section_gap_bottom {
  padding-bottom: 60px;
}

/* the trailing paragraph's own margin would otherwise overshoot the 60px, so
   the measured gap ends up larger at the bottom than at the top */
.section_gap_bottom .row:last-child p:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  /* innerpages.css sets `.section_gap` to `30px 15px 0px 15px !important`
     here, so matching that 30px top needs !important to land */
  .section_gap.section_gap_bottom {
    padding-bottom: 30px !important;
  }
}


/* ==========================================================================
   BUSINESS UNIT PAGES  (printing / packaging / education / tawzea),
   BUSINESS UNITS HUB, and the CERTIFICATIONS page.
   Added 7 Sep 2026. Six new patterns, no new tokens: every colour below is
   already in the palette in DESIGN-BRIEF section 2.
   ========================================================================== */

/* ---------- business-unit hero ---------- */

/* These h1s run 76-98 characters, against secure-identity's 66 and the
   homepage's 49. Widening the measure alone - the fix `.si_hero` applies -
   is not enough at that length, so the scale steps down one notch on these
   pages only. The uppercase HelveticaNowBlack voice is unchanged; below
   991px banner.css's own `font-size: 40px !important` still governs. */
.bu_hero #videoMessage2 h1 {
  max-width: 1180px;
  font-size: 3.4rem;
  line-height: 3.6rem;
}

.bu_hero #videoMessage2 .hero_sub {
  max-width: 760px;
}

/* ---------- industries, typographic ---------- */

/* The unit pages name five or six sectors with a short qualifier each and
   give them no destinations. secure-identity's `.sectors_grid` needs six
   photographs per page; e7's entire published library is sixteen files and
   the audit in section 11 already spent it. So this is the typographic
   route section 4 sets out for At a Glance / Why Choose - a numbered,
   rule-separated register rather than a sourced or invented image. */
.sector_list {
  list-style: none;
  margin: 46px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  border-top: 1px solid #dcdcdc;
  /* the same 34px cyan tick `.cap_block` and `.process_rail` set on their top
     edge. Painted as a background rather than a ::before, because a
     pseudo-element on a grid container becomes a grid item and would take a
     cell of its own. */
  background-image: linear-gradient(to right, #02fcfa 0, #02fcfa 34px, transparent 34px);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 0;
}

.sector_list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0 24px 0;
  border-bottom: 1px solid #e4e4e4;
}

.sector_list .sc_ord {
  flex: 0 0 auto;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.16em;
  color: #5c5555;
}

.sector_list .sc_name {
  display: block;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.3px;
  color: #000;
}

.sector_list .sc_note {
  display: block;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #3c3333;
  margin-top: 6px;
}

/* ---------- certifications, light ground ---------- */

/* On the unit pages the approved section order puts Certifications directly
   before the black "Why choose" band. `.certs_area`'s navy #0b2036 against
   #000 reads as one muddy band with a seam, so these four pages take the
   grey ground and the dark bands stay alternating. The cyan tick is dropped
   with it: #02fcfa is about 1.3:1 on #f4f4f4, so the glyph would be an
   invisible bullet - the hairlines delimit the rows instead, exactly as
   `.cap_specs` does on white. Navy is kept for secure-identity, where the
   register sits between two light bands, and for the Certifications page. */
.certs_area.certs_light {
  background: #f4f4f4;
  color: #3c3333;
}

.certs_area.certs_light .section_heading {
  color: #000;
}

.certs_area.certs_light .section_intro {
  color: #3c3333;
}

.certs_area.certs_light .eyebrow {
  color: #5c5555;
}

.certs_area.certs_light .cert_register {
  border-color: #dcdcdc;
}

.certs_area.certs_light .cert_register li {
  border-top-color: #e4e4e4;
  color: #3c3333;
}

/* ---------- business units hub ---------- */

.units_area {
  padding: 92px 67px;
}

.unit_row {
  border-top: 1px solid #e2e2e2;
  padding-top: 42px;
  margin-top: 54px;
  position: relative;
}

.unit_row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: #02fcfa;
}

.unit_media img {
  display: block;
  width: 100%;
  height: auto;
}

.unit_ord {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c5555;
  margin-bottom: 14px;
}

.unit_title {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.8px;
  color: #3c3333;
  margin: 0 0 20px 0;
}

.unit_text {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.02em;
  color: #3c3333;
  margin-bottom: 0;
}

.unit_link {
  margin-top: 26px;
}

/* ---------- featured platform band (education / Minhaji) ---------- */

/* One featured callout, not a second final CTA: it takes the grey ground and
   the hairline-plus-tick head that the rest of the system uses for a block,
   so it does not compete with `.bs_area`'s white full-width band. */
.platform_band {
  background: #f4f4f4;
  padding: 92px 67px;
}

.platform_band .pb_inner {
  border-top: 1px solid #d7d7d7;
  padding-top: 40px;
  position: relative;
}

.platform_band .pb_inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: #02fcfa;
}

.pb_title {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.8px;
  color: #000;
  margin: 0 0 20px 0;
}

.pb_text {
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.02em;
  color: #3c3333;
  max-width: 760px;
  margin-bottom: 0;
}

.pb_link {
  margin-top: 28px;
}

/* ---------- certifications page hero ---------- */

/* No image. e7 publishes no accreditations photograph, `/accreditations`
   404s on the live site, and every candidate in the library is either
   already carrying another page's hero or off-topic - about_us_banner_v2 and
   contact_banner are the same headquarters photograph, and About Us has it.
   Rather than repeat a hero or invent one, this band is typographic on the
   navy that banner.css already uses for the hero scrim gradient, so it reads
   as the same family as the photographic heroes. */
.cert_hero {
  background: #0b2036;
  padding: 168px 67px 104px 67px;
}

.cert_hero h1 {
  color: #fff;
  font-family: "HelveticaNowBlack", sans-serif;
  font-size: 4rem;
  line-height: 4rem;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 900px;
  margin: 0;
}

.cert_hero .hero_sub {
  color: rgba(255, 255, 255, 0.86);
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0.02em;
  max-width: 760px;
  margin: 28px 0 0 0;
}

.cert_hero .hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ---------- grouped certification register ---------- */

/* The Certifications page carries seventeen entries in five named groups,
   each entry a standard plus its scope. secure-identity's flat five-row
   register would run as one undifferentiated seventeen-row block, so the
   group label carries the structure and the standard is set in the medium
   weight ahead of its scope. Split on the first colon only in the markup -
   "Intergraf ISO 14298:2021" has a colon inside the standard number. */
.cert_groups {
  margin-top: 46px;
}

.cert_group + .cert_group {
  margin-top: 44px;
}

.cg_label {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c5555;
  margin-bottom: 16px;
}

.cert_grouped {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #dcdcdc;
  background-image: linear-gradient(to right, #02fcfa 0, #02fcfa 34px, transparent 34px);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 0;
}

.cert_grouped li {
  padding: 18px 0 19px 0;
  border-bottom: 1px solid #e4e4e4;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #3c3333;
}

.cert_grouped li strong {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-weight: normal;
  color: #000;
}

/* ---------- responsive ---------- */

@media (max-width: 1399px) {
  .bu_hero #videoMessage2 h1 {
    max-width: 1000px;
    font-size: 3rem;
    line-height: 3.2rem;
  }
}

@media (max-width: 1199px) {
  .units_area,
  .platform_band {
    padding: 70px 40px;
  }
  .cert_hero {
    padding: 130px 40px 80px 40px;
  }
  .cert_hero h1 {
    font-size: 3.2rem;
    line-height: 3.4rem;
  }
  .bu_hero #videoMessage2 h1 {
    max-width: 860px;
    font-size: 2.7rem;
    line-height: 2.9rem;
  }
  .unit_title,
  .pb_title {
    font-size: 27px;
    line-height: 32px;
  }
}

@media (max-width: 991px) {
  .units_area,
  .platform_band {
    padding: 56px 15px;
  }
  .cert_hero {
    padding: 96px 15px 60px 15px;
  }
  .cert_hero h1 {
    font-size: 40px;
    line-height: 42px;
  }
  .cert_hero .hero_sub {
    font-size: 15px;
    line-height: 23px;
    margin-top: 22px;
  }
  /* one column: at tablet width a two-column sector register leaves a
     35-40 character measure per cell, which breaks the qualifier onto three
     lines and loses the scan */
  .sector_list {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-top: 30px;
  }
  .cert_groups {
    margin-top: 30px;
  }
  .unit_row {
    margin-top: 38px;
    padding-top: 32px;
  }
  .unit_media {
    margin-bottom: 24px;
  }
  .platform_band .pb_inner {
    padding-top: 32px;
  }
}

@media (max-width: 576px) {
  .cert_hero h1 {
    font-size: 34px;
    line-height: 36px;
  }
}


/* ==========================================================================
   ROUND 2 - 8 Sep 2026. Reviewer feedback: stranded CTA, thin explore-more
   strip, and "looks very plain" on the unit pages.
   Still no new tokens - every colour below is already in DESIGN-BRIEF s2.
   ========================================================================== */

/* ---------- explore more, rebuilt as a register ---------- */

/* Was a loose flex row of text links, which on the hub (only three entries)
   left a mostly empty grey band - the reviewer screenshot. Rebuilt in the
   same rule-separated language as .cap_specs / .sector_list / .process_rail,
   so the strip has structure at three entries and still holds at nine
   (accreditations). Chevrons align right instead of trailing the text, which
   is what gives the column its edge. */
.quick_links {
  margin: 34px 0 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  border-top: 1px solid #dcdcdc;
  /* the 34px cyan tick the other registers set on their top edge, painted as
     a background because a pseudo-element would become a grid item */
  background-image: linear-gradient(to right, #02fcfa 0, #02fcfa 34px, transparent 34px);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 0;
}

.quick_links li {
  border-bottom: 1px solid #e0e0e0;
}

.quick_links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 0 20px 0;
  font-size: 19px;
  line-height: 26px;
  color: #3c3333;
  border-bottom: 0;
  transition: color 0.3s ease;
}

.quick_links a:hover {
  color: #000;
  border-bottom-color: transparent;
}

.quick_links .fa {
  padding-left: 0;
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.quick_links a:hover .fa {
  transform: translateX(5px);
}

/* ---------- feature band ---------- */

/* A container-width photograph between two text sections, to break up pages
   that are otherwise an unrelieved run of type. Container width rather than
   full bleed deliberately: at full bleed the two source images would need a
   1.4-1.5x upscale, and these are the only wide frames e7 owns. The caption
   restates a figure already on the same page - no new copy is introduced. */
.feature_band {
  padding: 0 67px 92px 67px;
}

.feature_band figure {
  margin: 0;
}

.feature_band img {
  display: block;
  width: 100%;
  height: auto;
}

.feature_band figcaption {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2e2e2;
}

.fb_figure {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.5px;
  color: #000;
  flex: 0 0 auto;
}

.fb_label {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c5555;
}

/* ---------- plain image block ---------- */

/* Unlike .why_media this does not absolutely position the image, because on
   the certifications page the picture sits beside prose rather than a list
   and should keep its own height. */
.band_media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .feature_band {
    padding: 0 40px 70px 40px;
  }
}

@media (max-width: 991px) {
  .feature_band {
    padding: 0 15px 56px 15px;
  }
  .feature_band figcaption {
    margin-top: 16px;
    padding-top: 14px;
  }
  .fb_figure {
    font-size: 21px;
    line-height: 25px;
  }
  /* one column: three link columns at tablet width leave a ~14 character
     measure per cell, which wraps every label */
  .quick_links {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-top: 26px;
  }
  .band_media {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick_links a,
  .quick_links .fa {
    transition: none;
  }
  .quick_links a:hover .fa {
    transform: none;
  }
}

/*----------------------------------------------------
@Section: Client round 3 (20 Oct 2026)
Feedback from the Website Content Refresh Tracker.
Same tokens as everything above.
---------------------------------------------------- */

/* ---------- brand casing ---------- */

/* The hero h1s, eyebrows and band headings are all set uppercase, which
   rendered the lowercase brand mark as "E7". Wrap the mark in .brand_e7
   and it keeps its own casing inside any uppercase context. */
.brand_e7 {
  text-transform: none;
}

/* ---------- journey timeline (Integrated Report 2025, p.6) ---------- */

/* Ten dated entries outgrow the flex rail the four-item milestones used:
   it wrapped 9 + 1 at desktop. A fixed grid keeps two even rows of five,
   and each entry carries its own hairline and cyan tick so the rows hold
   together when the grid folds to two columns or one. */
.milestones.is_journey {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 0;
}

.milestones.is_journey .milestone {
  min-width: 0;
  padding: 26px 0 34px 0;
  border-top: 1px solid #d7d7d7;
  border-right: 0;
}

.milestones.is_journey .ms_title {
  display: block;
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: #3c3333;
  margin-bottom: 6px;
}

.milestones.is_journey .ms_label {
  padding-right: 0;
}

/* on the black stats ground the same rail reverses */
.on_dark .milestones.is_journey .milestone {
  border-top-color: rgba(255, 255, 255, 0.25);
}

.on_dark .milestones.is_journey .ms_year,
.on_dark .milestones.is_journey .ms_title,
.on_dark .milestones.is_journey .ms_label {
  color: #fff;
}

/* ---------- stats grid ---------- */

/* Nine figures (About) and five (Business Units, identity capacity) don't
   divide by the four-column Bootstrap row the homepage band uses. */
.stats_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
  margin-top: 8px;
}

.stats_grid.is_five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats_grid .stat_item {
  margin-bottom: 0;
}

.stats_subhead {
  font-family: "HelveticaNowProTextMedium", sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 72px 0 26px 0;
}

.stats_source {
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.03em;
  color: #b9b9b9;
  margin: 48px 0 0 0;
}

/* ---------- unit capability list (hub) ---------- */

.unit_specs {
  list-style: none;
  margin: 22px 0 0 0;
  padding: 0;
}

.unit_specs li {
  padding: 11px 0 12px 0;
  border-top: 1px solid #ececec;
  font-family: "HelveticaNowProTextLight", sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #3c3333;
}

.unit_specs li:last-child {
  border-bottom: 1px solid #ececec;
}

.capsule_body p {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.02em;
  max-width: 620px;
}

@media (max-width: 1199px) {
  .milestones.is_journey {
    column-gap: 24px;
  }
  .stats_grid.is_five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .milestones.is_journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats_grid,
  .stats_grid.is_five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
  .stats_subhead {
    margin-top: 52px;
  }
}

@media (max-width: 576px) {
  .milestones.is_journey {
    grid-template-columns: minmax(0, 1fr);
  }
  .milestones.is_journey .milestone {
    padding-bottom: 24px;
  }
}

/* ---------- business units hero (night shot of the e7 facility) ---------- */

/* At phone width the 1920x900 frame is cropped to a tall column, and the
   centre of the photo is the lit hoarding, which sits directly behind the
   headline. Pull the crop to the darker left of the frame and deepen the
   text gradient so the h1 reads against it. */
@media (max-width: 991px) {
  .units_hero #videoDiv2 img {
    object-position: 18% 50%;
  }
  .units_hero #videoMessage2 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Tawzea: the truck sits right of centre in the frame; a centred phone crop
   showed only the sun, so hold the crop on the truck. */
@media (max-width: 991px) {
  .tawzea_hero #videoDiv2 img {
    object-position: 80% 50%;
  }
}