/*
 * Webdev Zimbabwe — About / culture template (v2026)
 * Load AFTER webdev-base.css.
 *
 * page-architecture "Information": evergreen trust-led hero, structured content,
 * factual proof, one soft CTA. Used by /about-us.
 *
 * Hero, chips, .wd-split, .wd-checklist, .wd-stats, .wd-ctaband and
 * .wd-link-arrow all come from webdev-base.css.
 */

/* Dark photograph, so the default .wd-subhero scrim suits it as-is. */
/*
 * The company group photograph. Shared by /about-us and /careers, which is
 * deliberate: both are About-family pages and both should lead with the team
 * rather than the stock developer shot this used to carry. Bright artwork, so
 * both sections take .wd-subhero--light-art.
 */
.wd-subhero--about {
  --wd-subhero-art: url("../img/team/team-company-wide.jpg");
  /* Faces sit just above the middle of this frame. */
  --wd-subhero-art-pos: right 32%;
}

/*
 * /careers only. The developer-at-monitors photograph, which led the homepage
 * until the support-floor shot replaced it there — the work it depicts is the
 * work being advertised, so it belongs on Careers more than on a landing page.
 * /about-us keeps the group photo above.
 *
 * A dark frame: unlit wall on the left, lit monitors and the subject on the
 * right. That runs with the DEFAULT scrim, so no --light-art — the copy sits
 * over the plain wall and the screens stay bright where the gradient clears.
 *
 * The same file is declared as .wd-subhero--certs in webdev-certificates.css.
 * Two page layers, two names, one asset — /careers and /certificates never load
 * each other's stylesheet, so neither can reach the other's modifier.
 */
.wd-subhero--developer {
  --wd-subhero-art: url("../img/hero-developer.jpg");
  /*
   * Not the default `center`. The band shows about two-thirds of this frame's
   * height, and centring that window starts it below the top of his head — the
   * beanie gets sliced off against the header. Pulling the window up keeps him
   * whole and costs only empty desk at the bottom.
   */
  --wd-subhero-art-pos: right 20%;
}

/* ---------- values ----------
 * Five cards on a dark panel. The badge used to carry an initialism ("TW" for
 * The Triple Win); the client asked for icons across the page, so each card now
 * takes a Lucide mark instead. Sizing for it is at the foot of this file.
 */
.wd-values {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-value {
  background: var(--wd-charcoal-950);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--wd-card-radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.wd-value__no {
  color: var(--wd-grey-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
}

.wd-value__badge {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-500);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  margin: 0.25rem 0 0.5rem;
  width: 2.5rem;
}

.wd-value h3 {
  color: var(--wd-white);
  font-size: 1.0625rem;
}

.wd-value__tag {
  color: var(--wd-orange-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.wd-value p:last-child {
  color: var(--wd-grey-200);
  font-size: 0.875rem;
  margin: 0;
}

@media (max-width: 1099.98px) {
  .wd-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .wd-values {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The five values compressed into one sentence, as a closing restatement. */
.wd-cultureline {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--wd-card-radius);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.wd-cultureline p:last-child {
  color: var(--wd-white);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  margin: 0;
}

/* ---------- culture in practice ---------- */

.wd-practice {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/*
 * Photo with a caption plate over its lower edge. `position: relative` here is
 * what the plate is positioned against, so it must stay.
 */
.wd-practice__media {
  border-radius: var(--wd-card-radius);
  margin: 0;
  overflow: hidden;
  position: relative;
}

/*
 * `height`/`width` are !important for the same reason as every other image rule
 * in this project: custom.css carries a global `li img { height: 42px
 * !important }` above 768px and this may sit inside a list.
 */
.wd-practice__media img {
  aspect-ratio: 4 / 3;
  display: block;
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.wd-practice__plate {
  background: var(--wd-charcoal-950);
  border-radius: var(--wd-radius-md);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  left: clamp(0.75rem, 2vw, 1.25rem);
  padding: 0.875rem 1.125rem;
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.25rem);
}

.wd-practice__plate span {
  color: var(--wd-orange-500);
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-practice__plate strong {
  color: var(--wd-white);
  display: block;
  font-size: 0.9375rem;
  margin-top: 0.25rem;
}

.wd-steplist {
  display: grid;
  gap: 1.125rem;
  list-style: none;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding: 0;
}

.wd-steplist li {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.wd-steplist__no {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.wd-steplist h3 {
  font-size: 1rem;
}

.wd-steplist p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.25rem 0 0;
}

@media (max-width: 991.98px) {
  .wd-practice {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- experience as a living system ---------- */

.wd-living {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
}

/* The one figure that carries the section, so it gets the brand fill. */
.wd-living__figure {
  align-content: center;
  background: var(--wd-orange-500);
  border-radius: var(--wd-card-radius);
  color: var(--wd-white);
  display: grid;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.wd-living__figure span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-living__figure b {
  display: block;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0.375rem 0 0.25rem;
}

.wd-living__figure em {
  font-size: 0.9375rem;
  font-style: normal;
}

.wd-living__body {
  background: var(--wd-charcoal-950);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--wd-card-radius);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.wd-living__body h3 {
  color: var(--wd-white);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.wd-living__body p:last-child {
  color: var(--wd-grey-200);
  margin: 0.75rem 0 0;
}

.wd-livinggrid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
  padding: 0;
}

.wd-livinggrid li {
  background: var(--wd-charcoal-950);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--wd-card-radius);
  padding: clamp(1rem, 2vw, 1.375rem);
}

.wd-livinggrid h3 {
  color: var(--wd-white);
  font-size: 1rem;
  margin-top: 0.5rem;
}

.wd-livinggrid p {
  color: var(--wd-grey-200);
  font-size: 0.875rem;
  margin: 0.375rem 0 0;
}

@media (max-width: 991.98px) {
  .wd-living {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-livinggrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .wd-livinggrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- team expertise ---------- */

.wd-expertise {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wd-expertise__top {
  align-items: center;
  display: flex;
  gap: 0.625rem;
}

.wd-expertise h3 {
  font-size: 1.0625rem;
}

.wd-expertise p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0.625rem 0 0;
}

/* Closing strip under the four cards. */
.wd-expertise__band {
  align-items: center;
  background: var(--wd-charcoal-950);
  border-radius: var(--wd-card-radius);
  color: var(--wd-white);
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.wd-expertise__band h3 {
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
}

.wd-expertise__band p {
  color: var(--wd-grey-200);
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
}

@media (max-width: 991.98px) {
  .wd-expertise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .wd-expertise__band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .wd-expertise {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- offices ----------
 * Named .wd-officecards, not .wd-office: webdev-nav.css already owns .wd-office
 * for the footer address blocks, and reusing that class here would inherit the
 * footer's dark-panel styling on a light section.
 */
.wd-officecards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-officecard__top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.wd-officecard__badge {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

@media (max-width: 767.98px) {
  .wd-officecards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- corrections to inherited base rules ----------
 * base sets `.wd-split__card--dark h3 { color: orange-500 }` — right on
 * /vps-hosting, where that heading IS the card's label. Here the card already
 * has a .wd-fit__label above the heading, so an orange h3 read as a second label
 * and the real heading disappeared. Restated as white for this page only.
 */
.wd-about .wd-split__card--dark h3 {
  color: var(--wd-white);
}

/* ---------- stats on a light section ----------
 * base's .wd-stats is written for a dark panel: its labels are --wd-grey-200 and
 * its dividers are white at 12%, both invisible on white. This variant puts the
 * band on the light section the design uses, which also stops the stats and the
 * values panel merging into one long black run.
 */
.wd-stats--light {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.wd-stats--light li + li {
  border-left-color: var(--wd-grey-200);
}

.wd-stats--light span {
  color: var(--wd-grey-700);
}

/* ---------- vacancies ----------
 * Also used by /careers, which shares this stylesheet because it belongs to the
 * same About family and reuses .wd-values, .wd-steplist and the hero variant.
 */
/*
 * `auto-fit` with a max track, not a fixed two columns: the number of open roles
 * changes. The track cap stops a lone card stretching across the full 1320px
 * container, and cards align to the start of the row so the first vacancy lines
 * up with the section content rather than floating mid-page.
 */
.wd-jobs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 28rem));
  justify-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-job {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wd-job__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.wd-job h3 {
  font-size: 1.1875rem;
  margin-right: auto;
}

.wd-job p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0;
}

/* Actions sit on the card floor so a row of cards keeps its buttons level. */
.wd-job__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (max-width: 767.98px) {
  .wd-jobs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Speculative-application panel. The HR address is injected by script so it is
 * absent from the static HTML that scrapers read — the previous page did the
 * same. The markup ships a working fallback link so the block is still useful
 * with scripts off, which the previous version was not.
 */
.wd-cvpanel {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: auto minmax(0, 1fr);
}

.wd-cvpanel .wd-icon {
  color: var(--wd-orange-600);
}

.wd-cvpanel__mail {
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .wd-cvpanel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- icons in place of numbers ----------
 * The values, the living grid and the expertise cards used to carry initials
 * ("RV", "TW") or a repeated 01-04 that added no meaning. They now carry Lucide
 * marks instead.
 *
 * .wd-icon-plate defaults to grey and only turns orange on a dark panel, so the
 * two dark sections needed nothing — but the expertise cards sit on a light
 * tint, where grey reads as disabled. Orange matches .wd-why__item, which is
 * the same treatment on the product pages.
 *
 * The practice steplist KEEPS its 01-03: those are an ordered process where the
 * sequence is the point, so a number carries meaning an icon would lose.
 */
.wd-expertise .wd-icon-plate {
  color: var(--wd-orange-600);
}

/* Sized down from the 2.75rem default: these sit inline beside the heading
   rather than above it, so a full-size plate would tower over the h3. */
.wd-expertise .wd-icon-plate,
.wd-expertise .wd-icon-plate .wd-icon {
  height: 1.75rem;
  width: 1.75rem;
}

.wd-livinggrid .wd-icon-plate,
.wd-livinggrid .wd-icon-plate .wd-icon,
.wd-value .wd-icon-plate,
.wd-value .wd-icon-plate .wd-icon {
  height: 2rem;
  width: 2rem;
}

.wd-value .wd-icon-plate {
  margin: 0.25rem 0 0.5rem;
}

/* ---------- step marker ----------
 * The icon lives IN the circle, where the 01/02/03 number used to be.
 *
 * The first attempt kept the number and put the icon beside the heading; the
 * client read the two as saying the same thing twice, which they were. One mark
 * per step. Sequence is still carried by the <ol>, so it survives for screen
 * readers even though the digits are no longer painted.
 *
 * Geometry is inherited from .wd-steplist__no above so the two stay identical
 * if either is retuned.
 */
.wd-steplist__icon {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-600);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.wd-steplist__icon .wd-icon {
  height: 1rem;
  width: 1rem;
}

/* The vacancy's stack label, e.g. "WordPress and React". */
.wd-fit__label .wd-icon {
  height: 1rem;
  margin-right: 0.4375rem;
  vertical-align: -0.1875rem;
  width: 1rem;
}

/* ---------- team photo strip ----------
 * Three frames: one wide company shot spanning two columns, then two portrait-
 * ish group shots beside it.
 *
 * The photographs are a mix of ~2:1 and ~1.4:1, so each frame fixes its own
 * ratio and the image is cropped to fill it. Without that the row would step up
 * and down in height as the source ratios differ.
 */
.wd-teamstrip {
  display: grid;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-teamstrip li {
  border-radius: var(--wd-card-radius);
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* The company shot earns the extra width — it is the one with everyone in it. */
.wd-teamstrip__wide {
  grid-column: span 2;
}

.wd-teamstrip img {
  aspect-ratio: 4 / 3;
  display: block;
  /*
   * !important for the same reason as the certificate thumbnails: the Antler
   * theme carries a global `li img { height: 42px !important }` for the footer
   * payment marks, and these frames are list items.
   */
  height: auto !important;
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
}

.wd-teamstrip__wide img {
  aspect-ratio: 8 / 3;
}

/* Caption sits over the foot of the frame rather than below it, so the row
   stays a clean band of images. */
.wd-teamstrip figcaption {
  background: linear-gradient(to top, rgb(17 20 22 / 78%), rgb(17 20 22 / 0%));
  bottom: 0;
  color: var(--wd-white);
  font-size: 0.8125rem;
  font-weight: 600;
  left: 0;
  padding: 2.25rem 1rem 0.875rem;
  position: absolute;
  right: 0;
}

@media (max-width: 991.98px) {
  .wd-teamstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wd-teamstrip__wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .wd-teamstrip {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-teamstrip__wide img,
  .wd-teamstrip img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- office card photograph ----------
 * The card led with a letter badge and a "Plan a visit" link; the client asked
 * for a photograph instead of the link, so the people are now the first thing
 * in the card and the badge sits under them beside the heading.
 *
 * NOT !important here: this is a direct child of a div, not a list item, so the
 * theme's `li img` rule never applies.
 */
.wd-officecard {
  overflow: hidden;
  padding: 0;
}

.wd-officecard__shot {
  aspect-ratio: 16 / 9;
  display: block;
  /*
   * Explicit `auto`, because the <img> carries width/height attributes for
   * layout stability. Those land as a presentational height, and aspect-ratio
   * is only honoured when height resolves to auto -- without this the card
   * rendered the photo at its full 1123px intrinsic height.
   */
  height: auto;
  object-fit: cover;
  object-position: center 28%;
  width: 100%;
}

.wd-officecard > :not(.wd-officecard__shot) {
  padding-inline: clamp(1.25rem, 2vw, 2rem);
}

.wd-officecard .wd-officecard__top {
  padding-top: clamp(1.25rem, 2vw, 1.5rem);
}

.wd-officecard > p:last-child {
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
}