/* About: people, practical expertise and customer control. */
.about-refresh {
  --ab-paper: #ffffff;
  --ab-soft: #f2f5f7;
  --ab-ink: #28323a;
  --ab-muted: #56636d;
  --ab-line: #d4dde1;
  --ab-blue: #365f85;
  --ab-green: #336d5d;
  --ab-plum: #80586e;
  --ab-hero: #edf1f4;
  --ab-hero-ink: #263944;
  --ab-hero-muted: #4d6572;
  --ab-hero-rule: #bfcdd4;
  --ab-statement: #eee8ee;
  --ab-values: #edf3f0;
  --ab-mission: #28383b;
  --ab-mission-ink: #f0f5f4;
  --ab-mission-muted: #c1d3cf;
  color: var(--ab-ink);
  background: var(--ab-paper);
}
html[data-theme="dark"] .about-refresh {
  --ab-paper: #1e2429;
  --ab-soft: #272f35;
  --ab-ink: #edf2f4;
  --ab-muted: #bdcbd2;
  --ab-line: #485861;
  --ab-blue: #aed0ee;
  --ab-green: #a4d4c0;
  --ab-plum: #dcbbcf;
  --ab-hero: #2b353d;
  --ab-hero-ink: #f0f6f8;
  --ab-hero-muted: #c4d4de;
  --ab-hero-rule: #5b717e;
  --ab-statement: #38323b;
  --ab-values: #2a3832;
  --ab-mission: #192b2c;
}
html[data-nav-experiment="floating"] body.about-refresh nav.site-nav:not(.is-scrolled) {
  --masthead-ink: var(--ab-hero-ink);
  --masthead-muted: var(--ab-hero-muted);
  --masthead-line: var(--ab-hero-rule);
  --masthead-surface: transparent;
  --masthead-blur: none;
}
.about-refresh main { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 1.75; }
.about-refresh main *, .about-refresh main *::before, .about-refresh main *::after { box-sizing: border-box; letter-spacing: 0; }
.about-refresh main :where(h1,h2,h3,p,ul,ol,figure,blockquote) { margin: 0; }
.about-refresh main :where(h1,h2,h3) { color: inherit; text-wrap: balance; }
.about-refresh main :where(h1,h2) { font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif; font-weight: 200; line-height: 1.15; }
.about-refresh main h2 { font-size: 48px; }
.about-refresh main h3 { font-size: 22px; line-height: 1.4; font-weight: 500; }
.about-refresh main p { text-wrap: pretty; }
.about-refresh main strong { font-weight: 550; }
.about-refresh main :where(a,button,summary):focus-visible { outline: 2px solid var(--ab-blue); outline-offset: 5px; }
.about-refresh main a { color: var(--ab-blue); text-underline-offset: 5px; }
.about-refresh main button { font: inherit; cursor: pointer; }
.about-refresh main [hidden] { display: none !important; }
.about-refresh main [id] { scroll-margin-top: 125px; }
.about-refresh main .lucide, .about-refresh main i[data-lucide] { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.5; }
.ab-shell { width: min(100% - 64px, 1200px); margin-inline: auto; }
.ab-skip { position: fixed; z-index: 10002; top: 20px; left: 20px; padding: 12px 18px; background: #fff; color: #28323a; transform: translateY(-200%); }
.ab-skip:focus { transform: none; }
.ab-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ab-section { padding-block: 88px; }
.about-refresh .ab-eyebrow { font-size: 14px; line-height: 1.5; font-weight: 550; color: var(--ab-blue); margin-bottom: 18px; }
.ab-section-heading { max-width: 850px; margin-bottom: 46px; }
.ab-section-heading > p:not(.ab-eyebrow) { max-width: 720px; margin-top: 22px; font-size: 19px; color: var(--ab-muted); }
.ab-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.ab-copy { color: var(--ab-muted); }
.ab-copy p + p { margin-top: 22px; }
.ab-lead { color: var(--ab-ink); font-size: 21px; line-height: 1.65; }

.ab-hero { position: relative; padding: 146px 0 40px; background: var(--ab-hero); color: var(--ab-hero-ink); overflow: clip; }
.ab-hero-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.ab-hero-copy { max-width: 500px; }
.about-refresh .ab-hero h1 { font-size: 76px; font-weight: 300; line-height: 1.07; }
.about-refresh .ab-promise { font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif; font-size: 38px; font-weight: 300; line-height: 1.2; margin-top: 22px; color: var(--ab-blue); }
.ab-hero-description { margin-top: 22px !important; color: var(--ab-hero-muted); font-size: 19px; line-height: 1.75; max-width: 465px; }
.ab-hero-belief { margin-top: 26px !important; padding-left: 18px; border-left: 2px solid var(--ab-green); color: var(--ab-hero-muted); font-size: 15px; line-height: 1.7; }
.ab-people-figure { width: 100%; max-width: 600px; min-width: 0; justify-self: end; }
.ab-people-scene { position: relative; width: 100%; aspect-ratio: 600 / 460; }
#ab-people-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-people-peeks { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
.about-refresh .ab-person-peek { position: relative; display: block; min-width: 0; color: var(--ab-hero-ink); text-decoration: none; --ab-person-colour: var(--ab-blue); }
.ab-person-peek img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.ab-peek-wayne { margin-top: 16px; --ab-person-colour: var(--ab-green) !important; }
.ab-peek-matt { margin-top: 32px; --ab-person-colour: var(--ab-plum) !important; }
.ab-peek-johan { margin-top: 48px; }
.ab-peek-harish { margin-top: 64px; --ab-person-colour: var(--ab-green) !important; }
.ab-peek-doug img, .ab-person-doug .ab-portrait { object-position: 50% 35%; }
.ab-peek-matt img, .ab-person-matt .ab-portrait { object-position: 63% 35%; }
.ab-peek-name { display: block; font-size: 15px; line-height: 1.4; font-weight: 550; margin-top: 12px; }
.ab-peek-role { display: block; min-height: 36px; font-size: 12px; line-height: 1.5; margin-top: 5px; color: var(--ab-hero-muted); }
.ab-person-peek:hover .ab-peek-name, .ab-person-peek:focus-visible .ab-peek-name { text-decoration: underline; text-underline-offset: 5px; color: var(--ab-person-colour); }
.ab-company-line { position: absolute; left: 0; right: 0; bottom: 0; min-height: 64px; padding: 11px 0; text-align: center; border-block: 1px solid var(--ab-hero-rule); }
.ab-company-line span { display: block; font-size: 13px; line-height: 1.5; color: var(--ab-hero-muted); }
.about-refresh .ab-company-line strong { display: block; font-size: 20px; line-height: 1.4; font-weight: 450; margin-top: 4px; }
.ab-motion-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 10px; color: var(--ab-hero-muted); font-size: 13px; }
.ab-motion-button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border: 1px solid var(--ab-hero-rule); border-radius: 50%; padding: 0; background: transparent; color: var(--ab-hero-ink); }
.ab-motion-button > span { display: flex; }
.ab-motion-button:hover { border-color: var(--ab-hero-ink); }
.ab-motion-button .lucide { width: 16px !important; height: 16px !important; }
.ab-motion-button i { display: none !important; }
.ab-motion-button:has(svg) .ab-icon-fallback { display: none; }
.ab-icon-fallback { font-size: 13px; line-height: 1; }

.ab-intro-band { padding-block: 28px; border-bottom: 1px solid var(--ab-line); }
.ab-intro-layout { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ab-intro-layout > p { color: var(--ab-muted); font-size: 18px; line-height: 1.7; }
.ab-intro-layout strong { color: var(--ab-ink); }
.ab-deployment > span { display: block; font-size: 12px; color: var(--ab-muted); margin-bottom: 8px; }
.ab-deployment ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--ab-blue); }

.ab-approach { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 80px; margin-top: 64px; border-top: 1px solid var(--ab-line); padding-top: 28px; }
.ab-approach h3 { margin-bottom: 18px !important; }
.ab-approach ul { padding: 0; list-style: none; }
.ab-approach li { min-height: 50px; padding-block: 10px; border-bottom: 1px solid var(--ab-line); font-size: 17px; line-height: 1.65; }
.ab-approach-before { color: var(--ab-muted); }
.ab-approach-after { color: var(--ab-green); }
.ab-approach-after li { display: flex; align-items: center; gap: 13px; }
.ab-statement { background: var(--ab-statement); padding-block: 54px; }
.ab-statement p { max-width: 980px; font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif; font-size: 36px; font-weight: 300; line-height: 1.3; }
.ab-statement span { display: block; font-size: 17px; color: var(--ab-plum); margin-top: 20px; }

.ab-experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 42px 64px; }
.ab-experience-grid article { border-top: 2px solid var(--ab-blue); padding-top: 24px; }
.ab-experience-grid article:nth-child(2) { border-color: var(--ab-green); }
.ab-experience-grid article:nth-child(3) { border-color: var(--ab-plum); }
.ab-experience-grid article > .lucide { width: 26px; height: 26px; color: var(--ab-blue); margin-bottom: 16px; }
.ab-experience-grid article:nth-child(2) > .lucide { color: var(--ab-green); }
.ab-experience-grid article:nth-child(3) > .lucide { color: var(--ab-plum); }
.ab-experience-grid p { color: var(--ab-muted); margin-top: 16px !important; font-size: 18px; }
.ab-leadership-values { border-top: 1px solid var(--ab-line); margin-top: 52px; padding-top: 28px; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; }
.ab-leadership-values p { color: var(--ab-muted); font-size: 17px; }
.ab-leadership-values p + p { margin-top: 18px; }
.ab-team-section { background: var(--ab-soft); }
.ab-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 42px 32px; align-items: start; }
.ab-person { flex: 0 1 calc((100% - 64px) / 3); min-width: 0; }
.ab-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.about-refresh .ab-person h3 { margin-top: 24px; font-size: 25px; font-weight: 450; }
.ab-role { color: var(--ab-muted); font-size: 15px; line-height: 1.65; margin-top: 8px !important; min-height: 50px; }
.ab-biography { border-block: 1px solid var(--ab-line); margin-top: 22px; }
.ab-biography summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 16px; line-height: 1.5; color: var(--ab-blue); }
.ab-biography summary::-webkit-details-marker { display: none; }
.ab-biography summary:hover { text-decoration: underline; text-underline-offset: 5px; }
.ab-biography summary::after { content: "+"; margin-left: auto; font-size: 20px; }
.ab-biography summary:has(svg)::after { display: none; }
.ab-biography[open] summary::after { content: "-"; }
.ab-biography summary i { display: none !important; }
.ab-biography summary .lucide { width: 18px; height: 18px; }
.ab-bio-close, .ab-biography[open] .ab-bio-open { display: none; }
.ab-biography[open] .ab-bio-close { display: inline; }
.ab-biography[open] summary .lucide { transform: rotate(180deg); }
.ab-bio-copy { padding: 4px 0 24px; font-size: 16px; line-height: 1.8; color: var(--ab-muted); }
.ab-bio-copy p + p { margin-top: 18px; }
.ab-expertise-tags { padding: 18px 0 0; margin-top: 24px !important; border-top: 1px solid var(--ab-line); display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; color: var(--ab-blue); font-size: 13px; }
.ab-values-section { background: var(--ab-values); }
.ab-values-section .ab-eyebrow { color: var(--ab-green); }
.ab-values { padding: 0; list-style: none; }
.ab-values li { display: flex; align-items: flex-start; gap: 22px; padding-block: 25px; border-top: 1px solid var(--ab-line); }
.ab-values li:first-child { padding-top: 0; border-top: 0; }
.ab-values li:last-child { padding-bottom: 0; }
.ab-values li > span { flex: 0 0 28px; font-size: 13px; line-height: 2; color: var(--ab-green); font-variant-numeric: tabular-nums; }
.ab-values p { margin-top: 10px !important; color: var(--ab-muted); }

.ab-mission { background: var(--ab-mission); color: var(--ab-mission-ink); }
.ab-mission .ab-eyebrow { color: var(--ab-mission-muted); }
.ab-mission-layout { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 100px; align-items: center; }
.ab-mission blockquote { font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif; font-size: 36px; font-weight: 300; line-height: 1.45; }
.ab-quote-credit { font-size: 16px; margin-top: 30px !important; }
.ab-quote-credit span { color: var(--ab-mission-muted); display: block; font-size: 13px; margin-top: 4px; }
.ab-mission-principles { padding: 0; list-style: none; }
.ab-mission-principles li { border-top: 1px solid #77938b70; padding-block: 20px; }
.ab-mission-principles li:last-child { border-bottom: 1px solid #77938b70; }
.ab-mission-principles strong { display: block; font-size: 24px; font-weight: 400 !important; line-height: 1.4; }
.ab-mission-principles span { display: block; color: var(--ab-mission-muted); font-size: 14px; margin-top: 5px; }
.ab-close { background: var(--ab-hero); }
.ab-close-layout { display: flex; align-items: center; justify-content: space-between; gap: 80px; }
.ab-close p:not(.ab-eyebrow) { color: var(--ab-muted); font-size: 18px; margin-top: 22px; max-width: 630px; }
.ab-contact-link { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; flex-shrink: 0; font-size: 18px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ab-blue); }
.ab-contact-link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .ab-hero-layout { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .ab-hero-copy { max-width: 650px; }
  .ab-people-figure { justify-self: center; }
  .about-refresh .ab-hero h1 { font-size: 64px; }
  .ab-hero-description { font-size: 18px; }
  .ab-people-peeks { gap: 12px; }
  .ab-people-scene { aspect-ratio: 600 / 510; }
  .ab-peek-name { font-size: 14px; }
  .ab-peek-role { font-size: 11px; }
  .ab-split, .ab-approach, .ab-leadership-values { gap: 48px; }
  .ab-mission-layout { gap: 64px; }
  .ab-team-grid { gap: 42px 24px; }
  .ab-person { flex-basis: calc((100% - 24px) / 2); }
  .ab-portrait { aspect-ratio: 3 / 4; }
}
@media (max-width: 900px) {
  .ab-hero-layout { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .ab-hero-copy { max-width: 650px; }
  .ab-people-figure { max-width: 570px; justify-self: center; }
  .ab-people-scene { aspect-ratio: 600 / 460; }
  .ab-peek-name { font-size: 15px; }
  .ab-peek-role { font-size: 12px; }
  .ab-hero-belief { display: none; }
  .ab-intro-layout { align-items: flex-start; }
  .ab-split { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .ab-leadership-values { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .ab-mission-layout { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .ab-mission-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
  .ab-mission-principles li:last-child { border-bottom: 0; }
  .ab-close-layout { gap: 40px; }
}
@media (max-width: 767px) {
  .ab-shell { width: calc(100% - 40px); }
  .ab-section { padding-block: 60px; }
  .about-refresh main { font-size: 17px; }
  .about-refresh main h2 { font-size: 36px; }
  .about-refresh main h3 { font-size: 21px; }
  .ab-hero { padding: 114px 0 24px; }
  .about-refresh .ab-hero h1 { font-size: 48px; }
  .about-refresh .ab-promise { font-size: 30px; margin-top: 14px; }
  .ab-hero-description { font-size: 17px; line-height: 1.7; margin-top: 18px !important; }
  .ab-hero-layout { gap: 30px; }
  .ab-people-figure { max-width: 470px; }
  .ab-people-peeks { gap: 12px; }
  .ab-peek-role { display: none; }
  .ab-peek-name { font-size: 13px; min-height: 38px; line-height: 1.45; margin-top: 8px; }
  .ab-company-line { min-height: 50px; padding: 9px 0; }
  .ab-company-line span { font-size: 11px; }
  .about-refresh .ab-company-line strong { font-size: 16px; }
  .ab-motion-row { font-size: 12px; min-height: 42px; }
  .ab-intro-layout { flex-direction: column; gap: 18px; }
  .ab-intro-layout > p { font-size: 17px; }
  .ab-intro-band { padding-block: 24px; }
  .ab-deployment ul { gap: 8px 20px; font-size: 14px; }
  .ab-lead { font-size: 19px; }
  .ab-section-heading > p:not(.ab-eyebrow) { font-size: 17px; }
  .ab-approach { gap: 30px; margin-top: 36px; }
  .ab-approach li { font-size: 16px; }
  .ab-statement { padding-block: 42px; }
  .ab-statement p { font-size: 28px; }
  .ab-statement span { font-size: 16px; }
  .ab-experience-grid { gap: 30px; }
  .ab-experience-grid p { font-size: 17px; }
  .ab-team-grid { gap: 42px; max-width: 500px; }
  .ab-person { flex-basis: 100%; }
  .ab-portrait { aspect-ratio: 4 / 5; max-height: 530px; }
  .ab-role { min-height: 0; }
  .ab-biography { margin-top: 18px; }
  .ab-mission blockquote { font-size: 28px; }
  .ab-mission-principles { gap: 18px; }
  .ab-mission-principles strong { font-size: 20px; }
  .ab-mission-principles span { font-size: 12px; }
  .ab-close-layout { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ab-close p:not(.ab-eyebrow) { font-size: 17px; }
  .about-refresh main [id] { scroll-margin-top: 104px; }
}
@media (max-width: 767px) {
  .ab-people-scene { aspect-ratio: auto; }
  #ab-people-canvas { display: none; }
  .ab-people-peeks { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 12px; }
  .about-refresh .ab-person-peek { flex: 0 1 calc((100% - 24px) / 3); }
  .ab-peek-johan { margin-top: 0; }
  .ab-peek-harish { margin-top: 16px; }
  .ab-peek-name { overflow-wrap: anywhere; }
  .ab-company-line { position: static; margin-top: 28px; }
}
@media (max-width: 540px) {
  .ab-peek-wayne { margin-top: 10px; }
  .ab-peek-matt { margin-top: 20px; }
  .ab-peek-harish { margin-top: 10px; }
  .ab-approach, .ab-experience-grid { grid-template-columns: minmax(0,1fr); }
  .ab-approach { gap: 30px; }
  .ab-mission-principles { grid-template-columns: minmax(0,1fr); gap: 0; }
  .ab-mission-principles li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
  .ab-mission-principles span { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-refresh main { scroll-behavior: auto; }
}
