@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Page-scoped Gutenberg styles, shared by the editor and public canvas. */
.vios-footer__top > * { min-width: 0; }
.vios-footer__contact { overflow-wrap: anywhere; }
.vios-about {
  --about-navy: #1b2a4a;
  --about-teal: #0f5461;
  --about-ivory: #f8f5ee;
  --about-muted: #4b5768;
  --about-line: #d5dadd;
  color: var(--about-navy);
  background: var(--about-ivory);
  font-family: "Jost", Arial, sans-serif;
  line-height: 1.6;
}
.vios-about .has-jost-font-family,
.vios-about h1, .vios-about h2, .vios-about h3, .vios-about p, .vios-about a {
  font-family: "Jost", Arial, sans-serif !important;
}
.vios-about-page > .alignfull,
.vios-about > .alignfull {
  width: 100%;
  max-width: none;
  margin: 0;
}
.vios-about *, .vios-about *::before, .vios-about *::after { box-sizing: border-box; }
.vios-about p, .vios-about h1, .vios-about h2, .vios-about h3 { margin: 0; }
.vios-about-inner {
  position: relative;
  width: min(100% - 7rem, 78rem);
  margin-inline: auto;
}
.vios-about .vios-about-eyebrow {
  margin-bottom: 2rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .19em;
}
.vios-about-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 1px;
  margin-right: .85rem;
  vertical-align: middle;
  background: #c9a227;
}
.vios-about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block-start: calc(var(--vios-header-height, 7.25rem) + clamp(5rem, 9vw, 9rem));
  padding-block-end: clamp(5rem, 8vw, 8rem);
  background: var(--about-navy);
  color: #fff;
}
/* Same skewed brand geometry as the landing hero. */
.vios-about-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -18% 15%;
  inset-inline-end: -12%;
  width: min(34vw, 33rem);
  border-inline: 1px solid rgba(255,255,255,.18);
  transform: skewX(-20deg);
  pointer-events: none;
}
.vios-about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 1%;
  bottom: -9rem;
  width: min(40vw, 35rem);
  height: 29rem;
  background: url("../images/vios-symbol.png") center / contain no-repeat;
  opacity: .09;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.vios-about .vios-about-title {
  max-width: 19ch;
  color: #fff;
  font-size: clamp(2.8rem, 5.6vw, 5.8rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.vios-about .vios-about-lead {
  max-width: 41rem;
  margin-top: 2.25rem;
  color: #dce1e8;
  font-size: clamp(1.125rem, 1.5vw, 1.35rem);
  line-height: 1.65;
}
.vios-about-stats { padding-block: 3.2rem; background: #fff; }
.vios-about-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.vios-about-stats-grid > *, .vios-about-comparison-grid > *, .vios-about-team-grid > * { margin-block: 0 !important; }
.vios-about-stat { padding: .4rem 2.5rem; border-left: 1px solid var(--about-line); }
.vios-about-stat:first-child { border: 0; padding-left: 0; }
.vios-about .vios-about-number { font-size: clamp(3rem, 4.5vw, 4.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; margin-bottom: .7rem; color: var(--about-teal); }
.vios-about .vios-about-number--credential { font-size: clamp(2.5rem, 3.8vw, 3.8rem); line-height: 1.3; }
.vios-about-stat > p:not(.vios-about-number) { font-size: 1rem; }
.vios-about .vios-about-caption { color: var(--about-muted); font-size: .875rem !important; margin-top: .35rem; }
.vios-about-film {
  position: relative;
  isolation: isolate;
  min-height: 40rem;
  display: grid;
  align-items: center;
  padding-block: 6rem;
  color: #fff;
  background: #172c35 url("../images/service-buying.jpg") center 55% / cover;
}
.vios-about-film::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(5,20,29,.76); pointer-events: none; }
.vios-about-film-content { position: static; }
.vios-about-film-content > * { margin-block: 0 !important; min-width: 0; }
.vios-about-film-copy-column { pointer-events: none; }
.vios-about .vios-about-statement { max-width: 23ch; font-size: clamp(2.5rem, 4.5vw, 4.7rem); font-weight: 400; color: #fff; line-height: 1.08; letter-spacing: -.035em; }
.vios-about .vios-about-film-copy { max-width: 39rem; margin-top: 2rem; font-size: 1.2rem; color: #e5e8eb; line-height: 1.65; }
.vios-about-film-visual { position: absolute; z-index: -2; inset: 0; }
.vios-about-film-screen { width: 100%; height: 100%; }
.vios-about .vios-about-video { width: 100%; height: 100%; margin: 0; }
.vios-about-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vios-about-film:has(video[src]:not([src=""])) { padding-bottom: 7rem; }
.vios-about .vios-about-film-caption { display: none; }
.vios-about-comparison { padding-block: clamp(4rem, 7vw, 7rem); background: #fff; }
.vios-about .vios-about-section-title { color: var(--about-navy); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.vios-about-comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto repeat(4,minmax(6rem,auto)); column-gap: 4rem; row-gap: 0; margin-top: 3.5rem; }
.vios-about-comparison-column { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.vios-about .vios-about-column-title { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 1.4rem; border-bottom: 2px solid var(--about-line); line-height: 1.5; color: var(--about-muted); }
.vios-about-comparison-column--vios .vios-about-column-title { color: var(--about-teal); border-color: var(--about-teal); }
.vios-about .vios-about-comparison-item { display: flex; align-items: center; padding-block: 1.4rem; padding-right: 1rem; border-bottom: 1px solid var(--about-line); font-size: 1.1rem; line-height: 1.55; color: var(--about-muted); }
.vios-about-comparison-column--vios .vios-about-comparison-item { color: var(--about-navy); }
.vios-about-team { padding-block: clamp(4rem, 7vw, 7rem); }
.vios-about .vios-about-team-intro { max-width: 36rem; margin-top: 1.5rem; font-size: 1.15rem; color: var(--about-muted); }
.vios-about-team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto repeat(3,auto); column-gap: 2rem; row-gap: 0; margin-top: 3.5rem; }
.vios-about-person { border-top: 3px solid var(--about-teal); background: #fff; padding: clamp(1.75rem,3.5vw,3rem); }
.vios-about .vios-about-name { font-size: clamp(2.3rem, 3.5vw, 3.5rem); font-weight: 400; letter-spacing: -.04em; color: var(--about-navy); }
.vios-about .vios-about-role { max-width: 28rem; margin-top: 1rem; font-size: 1.08rem; line-height: 1.5; font-weight: 500; color: var(--about-teal); }
.vios-about .vios-about-bio { margin-top: 2rem; font-size: 1.05rem; line-height: 1.75; color: var(--about-muted); }
.vios-about-expertise { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-top: 2rem; }
.vios-about .vios-about-expertise-point { position: relative; padding: 1.25rem 0 1.25rem 1.35rem; border-top: 1px solid var(--about-line); font-size: 1rem; line-height: 1.65; color: var(--about-muted); }
.vios-about-expertise-point::before { content: ""; position: absolute; left: 0; top: 1.9rem; width: .55rem; height: 2px; background: var(--about-teal); }
.vios-about-expertise-point strong { color: var(--about-navy); font-weight: 500; font-size: 1.125rem; }
.vios-about-person { position: relative; overflow: hidden; display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.vios-about-person::after { content: ""; position: absolute; top: 1.75rem; right: 1.5rem; width: 1.8rem; height: 2.8rem; border-inline: 1px solid #d5dadd; transform: skewX(-20deg); pointer-events: none; }
/* Optional future portraits: insert an Image block before the name. */
.vios-about-person > .wp-block-image { margin: 0 0 2rem; aspect-ratio: 4 / 3; overflow: hidden; }
.vios-about-person > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.vios-about-cta { padding-block: clamp(4rem,7vw,7rem); background: var(--about-teal); color: #fff; }
.vios-about-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 3rem; }
.vios-about .vios-about-cta-title { font-size: clamp(2.8rem,4.7vw,4.7rem); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; color: #fff; }
.vios-about-cta-buttons .wp-block-button__link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 13rem; min-height: 3.8rem; gap: 3rem; padding: 1rem 1.5rem; background: #fff; color: #0f5461; border: 1px solid #fff; border-radius: 0; font-size: 1rem; text-decoration: none; transition: background 180ms, color 180ms; }
.vios-about-cta-buttons .wp-block-button__link::after { content: "↗"; font-size: 1.4rem; line-height: 1; }
.vios-about-cta-buttons .wp-block-button__link:hover { background: #1b2a4a; color: #fff; }
.vios-about a:focus-visible { outline: 3px solid #c9a227; outline-offset: 5px; }
/* Keep the native media picker available in Gutenberg. */
.editor-styles-wrapper .vios-about .vios-about-video { position: relative; z-index: auto; height: auto; min-height: 8rem; width: 100%; margin: 0; }
.editor-styles-wrapper .vios-about-film-screen { aspect-ratio: auto; min-height: 12rem; }
.editor-styles-wrapper .vios-about-film-content { pointer-events: auto; }
.editor-styles-wrapper .vios-about-film-visual { position: relative; z-index: auto; }
.editor-styles-wrapper .vios-about-film-copy-column { pointer-events: auto; }
@media (max-width: 63.99rem) {
  .vios-about-inner { width: calc(100% - 4rem); }
  .vios-about-comparison-grid { column-gap: 2rem; grid-template-rows: auto repeat(4,minmax(8rem,auto)); }
  .vios-about-stat { padding-inline: 1.5rem; }
}
@media (max-width: 47.99rem) {
  .vios-about-inner { width: calc(100% - 2.5rem); }
  .vios-about-hero { padding-block-start: calc(var(--vios-header-height, 7.25rem) + 4rem); padding-block-end: 4.5rem; }
  .vios-about .vios-about-eyebrow { font-size: .7rem; margin-bottom: 1.5rem; }
  .vios-about .vios-about-title { font-size: clamp(2.55rem,9vw,4rem); }
  .vios-about-stats { padding-block: 2rem; }
  .vios-about-stats-grid { grid-template-columns: 1fr; }
  .vios-about-stat, .vios-about-stat:first-child { padding: 1.4rem 0; border-left: 0; border-bottom: 1px solid var(--about-line); }
  .vios-about-stat:last-child { border: 0; }
  .vios-about-film { min-height: 36rem; padding-block: 4.5rem; }
  .vios-about .vios-about-film-copy { font-size: 1.125rem; }
  .vios-about-comparison-grid, .vios-about-team-grid { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
  .vios-about-comparison-grid { grid-template-rows: none; }
  .vios-about-comparison-column { grid-row: auto; grid-template-rows: none; }
  .vios-about .vios-about-comparison-item { min-height: 0; padding-block: 1.2rem; }
  .vios-about-team-grid { gap: 1.25rem; }
  .vios-about-team-grid, .vios-about-person, .vios-about-expertise { grid-template-rows: none; grid-row: auto; }
  .vios-about-cta-inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vios-about a { transition: none; }
  .vios-about-film-screen::before { transition: none; transform: none !important; }
}