/* TITECH v3 · pages.css: owned by WO-10 (work-orders/DESIGN-SPEC.md §1, §10.3). */
/* The featured page template: RUCKUS Networks, Cybersecurity, Network Security and Vision One SPC all use it, unchanged.
   Every class is .fp-*, on top of the legacy .page-hero, .section-head, .capability-card, .process-step and .faq-item
   markup, so WO-05's rhythm and WO-02's cards apply as they are. Text, surfaces and lines come only from --ctx-*.
   Section order and the class of each block: content/blocks/_featured-page-skeleton.html. */

:root {
  --fp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E");
  --fp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fp-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, Arial, sans-serif;
}

/* ---------------------------------------------------------------- 1. Hero: visual and trust strip */

/* The trust strip closes the banner, so the banner's own bottom padding shrinks to a short margin below it. */
.page-hero:has(> .fp-trust) { padding-block-end: clamp(28px, 3.5vw, 44px); }

.fp-hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0;
  justify-self: end;
}
/* An inline line drawing (§10.3): 1.25px strokes in the spectrum at .9, a soft signal glow. The stroke stays 1.25px
   on screen at any size. Shapes are unfilled unless they carry .fp-f1 to .fp-f4 (dots and LEDs). */
.fp-hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-width: 1.25px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgb(76 141 255 / .35));
}
.fp-hero-visual :is(path, line, rect, circle, ellipse, polyline, polygon) { vector-effect: non-scaling-stroke; }
.fp-hero-visual .fp-s1 { stroke: var(--c-spec-1); stroke-opacity: .9; }
.fp-hero-visual .fp-s2 { stroke: var(--c-spec-2); stroke-opacity: .9; }
.fp-hero-visual .fp-s3 { stroke: var(--c-spec-3); stroke-opacity: .9; }
.fp-hero-visual .fp-s4 { stroke: var(--c-spec-4); stroke-opacity: .9; }
.fp-hero-visual .fp-f1 { fill: var(--c-spec-1); stroke: none; }
.fp-hero-visual .fp-f2 { fill: var(--c-spec-2); stroke: none; }
.fp-hero-visual .fp-f3 { fill: var(--c-spec-3); stroke: none; }
.fp-hero-visual .fp-f4 { fill: var(--c-spec-4); stroke: none; }
.fp-hero-visual .fp-dash { stroke-dasharray: 2 6; }
/* Arabic mirrors the whole drawing, like every other horizontal movement. It carries no text, so nothing reads backwards. */
[dir="rtl"] .fp-hero-visual svg { scale: -1 1; }

/* One slow motion, and only when the visitor allows it: .fp-pulse fades an element in and out, staggered by --i so a set
   of arcs lights up outward. .fp-flow runs a dash along a line. The static drawing above is the reduced-motion state. */
@media (prefers-reduced-motion: no-preference) {
  .fp-hero-visual .fp-pulse {
    animation: fp-pulse 4.8s var(--ease-in-out) infinite;
    animation-delay: calc(var(--i, 0) * .45s);
  }
  .fp-hero-visual .fp-flow {
    stroke-dasharray: 3 9;
    animation: fp-flow 7s linear infinite;
  }
}
@keyframes fp-pulse {
  0%, 100% { opacity: .35; }
  45% { opacity: 1; }
}
@keyframes fp-flow {
  to { stroke-dashoffset: -48; }
}

/* Three facts on the banner's bottom edge: mono labels, each with a signal check mark. It is a .shell, so it lines up
   with the hero copy. */
.fp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 4vw, 56px);
  margin-block: clamp(40px, 5vw, 64px) 0;
  padding: 22px 0 0;
  border-block-start: 1px solid var(--ctx-line-strong);
  list-style: none;
}
.fp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ctx-body);
  font-family: var(--fp-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fp-trust li::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background-color: var(--c-signal);
  -webkit-mask: var(--fp-check) center / contain no-repeat;
  mask: var(--fp-check) center / contain no-repeat;
}

/* ---------------------------------------------------------------- 2. Why: kicker and title left, the lead right */
.fp-why .fp-why-grid { align-items: start; }
.fp-why .split > .section-intro {
  max-width: 62ch;
  margin-block: 0;
  padding-block-start: .5em; /* the title's first line sits a little below its box top, so the lead follows it */
}

/* ---------------------------------------------------------------- 3. Capabilities (dark): cards with chips */
.fp-capabilities .capability-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.fp-capabilities .capability-card {
  display: flex;
  flex-direction: column;
  padding-block: var(--cmp-card-pad);
}
.fp-capabilities .capability-card h3 { max-width: none; margin-block: 0 12px; }
.fp-capabilities .capability-card p { margin-block-end: 22px; font-size: 1rem; line-height: 1.65; }
/* The chips sit at the card's foot, so cards in a row line up whatever the length of their text. The card selector
   matches the legacy .capability-card ul rule, which indents lists, sets their colour and their size. */
.capability-card .fp-items {
  margin-block: auto 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.fp-items, .fp-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-items { gap: 8px; }
.fp-items li,
.fp-chips li {
  border: 1px solid var(--ctx-line-strong);
  border-radius: var(--r-pill);
  font-family: var(--fp-mono);
  font-weight: 400;
  /* Product names keep the case their owners write them in, so there is no uppercase transform here. */
}
.fp-items li {
  padding: 6px 10px;
  color: var(--ctx-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- 4. Strengths: numbered, two columns */
.fp-strengths-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-strengths-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 28px);
  padding-block-start: 28px;
  border-block-start: 1px solid var(--ctx-line-strong);
}
/* The numeral is the spectrum as text. Without background-clip support it falls back to the link ink. */
.fp-num {
  color: var(--ctx-link);
  font-family: var(--fp-mono);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fp-num {
    background-image: var(--g-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.fp-strengths-list h3 {
  margin-block: 0 10px;
  color: var(--ctx-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.fp-strengths-list p { color: var(--ctx-body); font-size: 1rem; line-height: 1.65; }

/* ---------------------------------------------------------------- 5. Technology: chips and the partner logo */
.fp-chips { gap: 10px 12px; }
.fp-chips li {
  padding: 9px 16px;
  color: var(--ctx-body);
  font-size: .8125rem;
  line-height: 1.4;
}
.fp-tech-logo { margin-block-start: clamp(32px, 4vw, 48px); }
.fp-tech-logo:empty { display: none; }

/* ---------------------------------------------------------------- 6. Delivery (dark): the existing process steps */
.fp-delivery .process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: 0;
}

/* ---------------------------------------------------------------- 7. Fits: environment cards */
.fp-fits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* A short last row stretches to fill it, so four or five cards look right at every width. */
.fp-fit { flex: 1 1 220px; padding: var(--cmp-card-pad); }
.fp-fit h3 {
  margin-block: 0 10px;
  color: var(--ctx-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.fp-fit p { color: var(--ctx-body); font-size: .9375rem; line-height: 1.6; }

/* ---------------------------------------------------------------- 8. Related: whole-card links */
.fp-related { padding-block: var(--space-block); }
.fp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.fp-related-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr; /* the label sits at the top of both cards, the arrow ring centres on the whole card */
  align-items: start;
  gap: 8px 24px;
  padding: clamp(24px, 3vw, 36px);
  color: var(--ctx-heading);
  text-decoration: none;
}
.fp-related-label {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.fp-related-reason {
  grid-column: 1;
  color: var(--ctx-body);
  font-size: 1rem;
  line-height: 1.6;
}
/* A 44px ring holding the same 14px mask arrow as the buttons. Internal links, so it points along the reading direction. */
.fp-related-arrow {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ctx-line-strong);
  border-radius: var(--r-pill);
  font-size: 0;
  line-height: 0;
  color: var(--ctx-link);
  transition: border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), translate var(--dur-fast) var(--ease-out);
}
.fp-related-arrow::before {
  content: "";
  position: absolute;
  inset: 15px;
  background-color: currentColor;
  -webkit-mask: var(--cmp-arrow) center / contain no-repeat;
  mask: var(--cmp-arrow) center / contain no-repeat;
}
[dir="rtl"] .fp-related-arrow::before { scale: -1 1; }
.fp-related-card:is(:hover, :focus-visible) .fp-related-arrow {
  border-color: var(--c-signal);
  background-color: rgb(76 141 255 / .08);
  translate: 3px 0;
}
[dir="rtl"] .fp-related-card:is(:hover, :focus-visible) .fp-related-arrow { translate: -3px 0; }

/* ---------------------------------------------------------------- Shared card behaviour (fit and related cards) */
/* The same card as WO-02's: a bordered surface, a spotlight behind the content (--mx and --my come from motion.js, and
   the light falls at the top centre without it), and on hover a 2px lift, the soft glow and a lit border. */
.fp-fit, .fp-related-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--ctx-line);
  border-radius: var(--r-lg);
  background: var(--ctx-surface);
  transition: translate var(--dur-base) var(--ease-out), border-color var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
.fp-fit::after, .fp-related-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(76 141 255 / .10), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-hover);
}
/* The accent line on the top edge: 2px, 48px wide, clear of the rounded corner, in the spectrum. */
.fp-fit::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: var(--r-lg);
  width: 48px;
  height: 2px;
  background: var(--g-spectrum);
}
@media (hover: hover) {
  .fp-fit:hover, .fp-related-card:hover {
    border-color: rgb(76 141 255 / .45);
    box-shadow: var(--shadow-card), var(--glow-soft);
    translate: 0 -2px;
  }
  .fp-fit:hover::after, .fp-related-card:hover::after { opacity: 1; }
}
.fp-related-card:focus-visible {
  border-color: rgb(76 141 255 / .45);
  box-shadow: var(--shadow-card);
}
.fp-related-card:focus-visible::after { opacity: 1; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .fp-delivery .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .fp-hero-visual { justify-self: center; max-width: 440px; }
}
@media (max-width: 800px) {
  .fp-strengths-list { grid-template-columns: minmax(0, 1fr); }
  .fp-related-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fp-hero-visual { max-width: 320px; }
  .fp-delivery .process-grid { grid-template-columns: minmax(0, 1fr); }
  .fp-trust { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- Arabic */
/* Plex Mono has no Arabic glyphs and tracking breaks joining (§3): labels and chips take the Arabic label rules, and the
   numeral follows the site's other numbered labels. Western digits stay. */
:is([dir="rtl"], html[lang^="ar"]) :is(.fp-trust li, .fp-items li, .fp-chips li, .fp-num) {
  font-family: var(--fp-arabic);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
:is([dir="rtl"], html[lang^="ar"]) .fp-trust li { font-size: .8125rem; line-height: 1.6; }
:is([dir="rtl"], html[lang^="ar"]) .fp-items li { font-size: .75rem; line-height: 1.6; }
:is([dir="rtl"], html[lang^="ar"]) .fp-chips li { font-size: .875rem; line-height: 1.6; }
:is([dir="rtl"], html[lang^="ar"]) :is(.fp-strengths-list h3, .fp-fit h3, .fp-related-label) { line-height: 1.35; letter-spacing: 0; }
:is([dir="rtl"], html[lang^="ar"]) :is(.fp-strengths-list p, .fp-fit p, .fp-related-reason) { line-height: 1.8; }

/* ---------------------------------------------------------------- Reduced motion and forced colours */
/* Lifts and nudges are movement and go. Colour and glow fades are not, so they stay: the legacy theme cuts every
   transition to .01ms with !important under reduced motion, and only another !important restores them (as WO-02 does). */
@media (prefers-reduced-motion: reduce) {
  .fp-fit:hover, .fp-related-card:hover,
  .fp-related-card:is(:hover, :focus-visible) .fp-related-arrow,
  [dir="rtl"] .fp-related-card:is(:hover, :focus-visible) .fp-related-arrow { translate: none; }
  :is(.fp-fit, .fp-related-card, .fp-related-arrow), :is(.fp-fit, .fp-related-card)::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: var(--dur-hover) !important;
    transition-timing-function: var(--ease-hover) !important;
  }
}
@media (forced-colors: active) {
  .fp-trust li::before, .fp-related-arrow::before { forced-color-adjust: none; background-color: CanvasText; }
  .fp-num { -webkit-text-fill-color: CanvasText; background: none; color: CanvasText; }
}
@media print {
  .fp-hero-visual { display: none; }
}

/* ================================================================ WO-22c: the owner's brand assets in the page */

/* ---------------------------------------------------------------- Solution-card icons (owner note 8)
   The four home solution cards take the owner's icons: a filled brand circle carrying white line art. The
   <svg class="service-icon"> already in the page content keeps the slot (48px, same margins) and only paints the
   icon, so no content patch is needed and the icons travel with the cards. The svg is aria-hidden, so the icon
   stays decorative and the card title carries the meaning (the empty-alt equivalent for inline SVG).
   The circle is CSS and the file is the line art alone. An <img> or a background svg cannot read a CSS variable,
   and a single flat file would put a Deep Navy circle on the navy section, where it disappears; drawing the circle
   here lets the dark sections use lightened tints, as the brandbook and DESIGN-SPEC require.
   The owner's art is drawn inside a 460-unit circle in a 500-unit box, so the background is scaled by 500/460 for
   the element itself to be that circle: the art-to-circle proportion stays exactly as supplied. */
.service-grid .service-card > .service-icon,
.service-grid .service-card > svg.service-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--service-icon-circle);
  background-image: var(--service-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 108.7% 108.7%;   /* 500 / 460 */
  color: transparent;               /* the legacy line art strokes currentColor */
}
.service-grid .service-card > .service-icon > * { display: none; }

/* Light sections: the brand colours as the owner supplied them. */
.service-grid .service-card.accent-green {
  --service-icon: url("icons/datacenter-cyber.svg");
  --service-icon-circle: #62966A;   /* Sage Green */
}
.service-grid .service-card.accent-plum {
  --service-icon: url("icons/digital.svg");
  --service-icon-circle: #634868;   /* Plum Shadow */
}
.service-grid .service-card.accent-rose {
  --service-icon: url("icons/telecom.svg");
  --service-icon-circle: #B94F62;   /* Rosewood */
}
.service-grid .service-card.accent-orange {
  --service-icon: url("icons/ict-ivms.svg");
  --service-icon-circle: #FF7700;   /* Solar Flare, as the owner's own icon file has it (owner, 2026-09-24) */
}

/* Dark sections: raw Plum Shadow and Deep Navy disappear against the navy card (1.1:1 once WO-22a moves
   --c-banner to #26436C), so those two and Rosewood are lifted within their own hue instead of being tinted
   towards white, which washed them out. Sage Green is light enough already. Every circle then clears the dark
   card by 2.0:1 or more with white line art at 3.4:1 or more, and a hairline ring gives all four the same crisp
   edge on the aurora (DESIGN-SPEC §2, the contrast rule for dark sections). */
:where(.solutions-section, .section:has(.industry-list), .section-navy) .service-grid .service-card {
  --service-icon-ring: 0 0 0 1px rgb(255 255 255 / .24);
}
:where(.solutions-section, .section:has(.industry-list), .section-navy) .service-grid .service-card.accent-plum {
  --service-icon-circle: #8F6A97;   /* Plum Shadow, lifted */
}
:where(.solutions-section, .section:has(.industry-list), .section-navy) .service-grid .service-card.accent-rose {
  --service-icon-circle: #C45D70;   /* Rosewood, lifted */
}
:where(.solutions-section, .section:has(.industry-list), .section-navy) .service-grid .service-card.accent-orange {
  --service-icon-circle: #FF7700;   /* Solar Flare needs no lift: 3.6:1 on the dark card already (owner, 2026-09-24) */
}
.service-grid .service-card > .service-icon { box-shadow: var(--service-icon-ring, none); }

/* Forced colours and print drop background images, so the slot goes back to the legacy bordered box and its
   line icon rather than printing as an empty disc. */
@media print, (forced-colors: active) {
  .service-grid .service-card > .service-icon,
  .service-grid .service-card > svg.service-icon {
    padding: 11px;
    border: 1px solid;
    border-radius: var(--r-md);
    background: none;
    box-shadow: none;
    color: inherit;
  }
  .service-grid .service-card > .service-icon > * { display: revert; }
}

/* ---------------------------------------------------------------- CTA band contact block (owner note 13)
   The phone was 22px and the email 16px. Both now read at the phone's size, so the two ways of reaching the team
   carry the same weight. /contact/ (15px) and the footer (14px) already match within themselves. */
.cta-band .cta-contact a.cta-contact-link,
.cta-band .cta-contact a[href^="tel:"],
.cta-band .cta-contact a[href^="mailto:"] {
  font-size: 22px;
  line-height: 1.35;
}

/* ---------------------------------------------------------------- Colour for two plain sections (colleague review, 2026-09-29, notes 8 and 12)
   "How we work" and the certifications were white cards on grey. They take the four brand colours, each in a job of its own,
   and stay one calm surface: the wash behind each section is the brandbook's supporting gradient (sage to navy) at a few
   percent, and the strong colour is confined to a 4px bar and a small chip on each card. */

/* Note 8, How we work: sage for the Oman card, rosewood for the Vision 2040 card; a pin and a rising line as the chips. */
.why-section {
  background:
    radial-gradient(720px 380px at 100% 0%, rgb(98 150 106 / .17), transparent 70%),
    radial-gradient(640px 360px at 0% 100%, rgb(38 67 108 / .11), transparent 70%),
    var(--c-porcelain);
}
.why-grid--pair .why-card {
  --why-rgb: 98 150 106;
  padding-block-start: calc(var(--cmp-card-pad) + 4px);
  background: var(--c-white);
}
.why-grid--pair .why-card:nth-child(2) { --why-rgb: 185 79 98; }
.why-grid--pair .why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgb(var(--why-rgb));
}
.why-grid--pair .why-card h3::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-block-end: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E") center / 22px no-repeat,
    rgb(var(--why-rgb));
}
.why-grid--pair .why-card:nth-child(2) h3::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l4 4 7.5-8'/%3E%3Cpath d='M15 7h5.5v5.5'/%3E%3C/svg%3E") center / 22px no-repeat,
    rgb(var(--why-rgb));
}
/* The photo gets a plate of the same sage, offset behind it. */
.why-split:has(.why-grid--pair) .feature-image { box-shadow: 16px 16px 0 rgb(98 150 106 / .28); }
[dir="rtl"] .why-split:has(.why-grid--pair) .feature-image { box-shadow: -16px 16px 0 rgb(98 150 106 / .28); }

/* Note 12, certifications: each standard has a colour, so the four cards read as four things, not one row of the same box.
   Navy for quality (the brand's primary), sage for environment, rosewood for health and safety, plum for information
   security. The colour is a top bar and a tint behind the badge; the text stays ink and the links stay blue. */
.cert-section {
  background:
    radial-gradient(760px 320px at 0% 0%, rgb(38 67 108 / .08), transparent 70%),
    radial-gradient(760px 320px at 100% 100%, rgb(99 72 104 / .08), transparent 70%),
    var(--c-white);
}
.cert-grid .cert-item { --cert-rgb: 38 67 108; }
.cert-grid .cert-item:nth-child(2) { --cert-rgb: 98 150 106; }
.cert-grid .cert-item:nth-child(3) { --cert-rgb: 185 79 98; }
.cert-grid .cert-item:nth-child(4) { --cert-rgb: 99 72 104; }
.cert-grid .cert-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: rgb(var(--cert-rgb));
}
.cert-grid .cert-item .cert-badge {
  border-color: rgb(var(--cert-rgb) / .22);
  background: rgb(var(--cert-rgb) / .07);
}