/* css/about.css  only what about.html has that platform.html does not. The skin itself is
css/site.css (platform.html's stylesheet), which wins wherever the two overlap. */
/* skip link  platform has none */
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--dark); color: #fff;
padding: 12px 18px; font-weight: 700; font-size: 13px; text-decoration: none; transition: top .25s; }
.skip:focus { top: 16px; }
/* an inside a point card reads like its paragraph */
.pt address { font-style: normal; margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
.pts--ico .pt address { grid-column: 2; margin-top: 9px; max-width: 50ch; }
/* awards fineprint */
.fineprint { margin-top: 40px; text-align: center; font-size: 13px; color: var(--sub); }
.fineprint em { font-style: italic; }
/* =========================================================
about.html v2 (2026-09-04): the proofread copy deck. Components below are the
ones this page has that platform.html lacks: proof numbers on paper, the story
timeline with roadmap milestones held apart, the leadership grid, the chairman
feature, a static client row, and a two-line CTA headline. The four reason tiles
("All-in-One Compliance", .caps.c4) left the page on 2026-09-15 with their rules.
Everything else on the page is the platform skin from css/site.css.
========================================================= */
/* visually hidden, still read out (link names carry the person's name) */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* a head that carries two paragraphs: the second follows the first at reading distance */
.sec-head .lede + .lede { margin-top: 14px; }
/* --- proof numbers: the platform skin's .nums, measured for a light band --- */
.nums { margin-top: clamp(36px, 4vw, 52px); gap: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 32px); }
.num .v { color: var(--ink); }
/* #experience: no rules above the figures, every line centred, the figures in WIDTH blue */
#experience .num { border-top: 0; padding-top: 0; text-align: center; }
#experience .num .v { color: var(--blue); }
.num .v.v--word { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -0.024em; padding-top: 5px; }
.num .l sup { font-size: .72em; line-height: 0; vertical-align: super; color: var(--blue); }
.fineprint sup { font-size: .8em; line-height: 0; vertical-align: super; color: var(--blue); margin-right: 2px; }
#experience .fineprint { margin-top: clamp(28px, 3vw, 40px); }
/* --- story timeline: period | spine | milestone. Each milestone is a single line (the
deck's one-liners, no headline + paragraph). The spine runs down the middle column;
each node is the diamond the site draws everywhere else. Roadmap items (.is-plan)
switch to a dashed spine, a hollow node and a status chip, so what is planned never
reads as done. --- */
.story { --when: 136px; --rail: 44px; --node: 26px;
list-style: none; margin: clamp(40px, 4.4vw, 56px) auto 0; padding: 0; max-width: 880px; }
.story-item { position: relative; display: grid; grid-template-columns: var(--when) var(--rail) minmax(0, 1fr); }
.story-when { grid-column: 1; padding: 18px 18px 18px 0; text-align: right;
font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-rail { grid-column: 2; position: relative; }
.story-rail::before { content: ""; position: absolute; left: calc(50% - 0.5px); top: 0; bottom: 0; width: 0;
border-left: 1px solid rgba(13,79,211,.34); } /* a 1px line centred on 50%: its own centre, not its left edge, sits on the node axis */
.story-rail::after { content: ""; position: absolute; left: 50%; top: var(--node); width: 9px; height: 9px;
margin-left: -4.5px; background: var(--blue); transform: rotate(45deg); } /* no halo: the spine runs straight into the top and bottom corners */
.story-item:first-child .story-rail::before { top: calc(var(--node) + 4px); }
.story-item:last-child .story-rail::before { bottom: auto; height: calc(var(--node) + 4px); }
.story-body { grid-column: 3; padding: 18px 0; min-width: 0; } /* no rule between milestones: the spine is the structure */
.story-line { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.45;
color: var(--ink); max-width: 60ch; }
/* the roadmap chip runs on from the end of the line, wrapping with the text */
.story-status { position: relative; top: -1px; display: inline-flex; align-items: center; margin-left: 10px;
padding: 5px 9px 4px; line-height: 1.2; vertical-align: middle;
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
border: 1px solid rgba(13,79,211,.45); background: rgba(13,79,211,.06);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 6px) 100%, 0 100%); }
/* the clip removes the border along the cut, so the diagonal edge is redrawn the way the
skin does for .chip: an exact quad for this 6 x 7px cut, two points on the cut band and
two mitred into the inner edges of the side and bottom borders */
.story-status::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
background: rgba(13,79,211,.45);
clip-path: polygon(calc(100% - 1px) calc(100% - 8.753px), calc(100% - 1px) calc(100% - 6.602px),
calc(100% - 5.801px) calc(100% - 1px), calc(100% - 7.645px) calc(100% - 1px)); }
.story-item.is-plan .story-rail::before { border-left-style: dashed; border-left-color: rgba(13,79,211,.5); }
.story-item.is-plan .story-rail::after { background: var(--light); box-shadow: inset 0 0 0 1.5px var(--blue); }
.story-item.is-plan .story-when { color: var(--sub); }
@media (max-width: 620px) {
.story { --when: auto; --rail: 30px; --node: 26px; }
.story-item { grid-template-columns: var(--rail) minmax(0, 1fr); }
.story-when { grid-column: 2; grid-row: 1; padding: 20px 0 0; text-align: left; font-size: 13px; }
.story-rail { grid-column: 1; grid-row: 1 / span 2; }
.story-body { grid-column: 2; grid-row: 2; padding: 4px 0 20px; }
.story-item:first-child .story-rail::before { top: calc(var(--node) + 4px); }
.story-item:last-child .story-rail::before { height: calc(var(--node) + 4px); }
}
/* --- leadership grid: portrait, name, role, two short paragraphs, LinkedIn --- */
.leads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 40px);
max-width: 1000px; margin: clamp(40px, 4.4vw, 56px) auto 0; }
.lead { display: flex; flex-direction: column; min-width: 0; }
.lead-ph { position: relative; width: 100%; max-width: 240px; aspect-ratio: 3 / 4; overflow: hidden;
background: #E2EBFB;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 12.3px) 100%, 0 100%); }
.lead-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%;
display: block; transition: transform .9s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.lead:hover .lead-ph img { transform: scale(1.03); }
.lead h3 { margin-top: 18px; font-size: 19px; letter-spacing: -0.018em; line-height: 1.3; }
.lead-role { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--blue); }
.lead p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.lead .more { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 500; text-decoration: none; }
@media (max-width: 1100px) { .leads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobile: swipe one complete leader profile at a time. The next card peeks in so the
horizontal interaction is obvious without adding JavaScript or changing the HTML. */
@media (max-width: 820px) {
#leadership { overflow: hidden; }
.leads { display: flex; gap: 16px; max-width: none; margin-top: 34px; padding: 0 0 10px;
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
overscroll-behavior-inline: contain; scrollbar-width: none; }
.leads::-webkit-scrollbar { display: none; }
.lead { flex: 0 0 min(86%, 390px); scroll-snap-align: start; scroll-snap-stop: always; }
.lead-ph { width: 100%; max-width: none; aspect-ratio: 3 / 4; }
.lead h3 { margin-top: 18px; font-size: 22px; line-height: 1.25; }
.lead .lead-role { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--blue); }
.lead p:not(.lead-role) { margin-top: 12px; font-size: 16px; line-height: 1.68; }
.lead .more { margin-top: 2px; padding-top: 14px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .lead-ph img { transition: none; will-change: auto; } .lead:hover .lead-ph img { transform: none; } }
/* --- chairman feature: portrait beside the copy, the supporting statement set as a pull line --- */
.chair { display: grid; grid-template-columns: 240px minmax(0, 1fr);
gap: clamp(28px, 4vw, 48px); align-items: center; max-width: 880px; margin: 0 auto; }
.chair-ph { position: relative; width: 100%; max-width: 240px; aspect-ratio: 3 / 4; overflow: hidden;
background: #E2EBFB;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 12.3px) 100%, 0 100%); }
.chair-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; }
.chair-copy { min-width: 0; }
.chair-copy h2 { font-size: 19px; letter-spacing: -0.018em; line-height: 1.3; }
.chair-role { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--blue); }
.chair-copy > p:not(.chair-role):not(.chair-quote) { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--sub); }
.chair-quote { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--blue);
font-size: 15px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.6; color: var(--ink); }
.chair-copy .more { display: inline-flex; margin-top: 16px; font-size: 13.5px; font-weight: 500; text-decoration: none; }
@media (max-width: 860px) {
.chair { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 20px; }
}
@media (max-width: 620px) { .chair-ph { width: min(54vw, 200px); max-width: 200px; aspect-ratio: 3 / 4; } }
/* --- customers and recognition (#recognition): a white band between the chairman feature
and the proof numbers (both on tint), so it reads as its own section rather than a
continuation of the one above. It is a trust strip, not a chapter, so it runs on a
shorter measure than .sec-pad: 64px of padding instead of 84 and tighter gaps between
the head, the client row and the awards. --- */
#recognition.sec-pad { padding: 64px 0; }
@media (max-width: 760px) { #recognition.sec-pad { padding: 48px 0; } }
/* --- client row: the home page's marks, static and centred on paper --- */
.clients { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(22px, 3vw, 40px) clamp(28px, 4.6vw, 64px); list-style: none; padding: 0;
margin: clamp(28px, 3vw, 40px) auto 0; max-width: 1000px; }
.clients li { display: flex; align-items: center; }
.clients img { height: clamp(30px, 3.4vw, 44px); width: auto; max-width: 168px; object-fit: contain; display: block;
opacity: .88; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.clients img:hover { opacity: 1; transform: scale(1.04); }
#recognition .awards-band { margin-top: clamp(32px, 3.4vw, 40px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--line); }
/* --- final CTA: this headline is sixty characters, twice the home page line, so it
takes two lines at a readable size instead of the one-line fit formula --- */
.cta--two-line .cta-copy h2 { white-space: normal; font-size: clamp(30px, 3.4vw, 42px); max-width: 24ch; }
@media (max-width: 600px) { .cta--two-line .cta-copy h2 { font-size: clamp(28px, 7.6vw, 36px); max-width: none; } }
/* five marks, not ten: centred at a measured gap rather than spread edge to edge, and
a step larger, since these 300 x 300 badges carry detail the small size loses */
#recognition .awards { justify-content: center; gap: clamp(28px, 4.5vw, 64px); }
#recognition .awards span img { height: clamp(52px, 5.4vw, 72px); }
#recognition .awards span img.abf { height: calc(clamp(52px, 5.4vw, 72px) * .7); } /* the wide ABF mark sits at 70% */
@media (max-width: 1000px) { #recognition .awards span { flex: 0 0 auto; } }
@media (max-width: 620px) { #recognition .awards { gap: 22px 28px; } #recognition .awards span img { height: 48px; }
#recognition .awards span img.abf { height: 34px; } }
/* --- hero: an 11-character headline ("About WIDTH") at the shared subpage h1 size (64px at
desktop), one line at every width, as the other inner pages' first lines. The
photograph is cropped a little above centre so the world map and the skyline stay in
frame on wide screens; the portrait source is already framed, so phones take the centre. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--about .hero-media img { object-position: 50% 40%; }
@media (max-width: 760px) { .hero--about .hero-media img { object-position: 50% 50%; } }
/* --- the vision (#vision, inside #purpose, 2026-09-09): the name as one line of type across
the full column, "We Innovate Digital Trust Holistically", in dark blue with the five
initials in WIDTH blue. Behind each word its own letter cut from the wordmark path, at 8%
opacity and 2.5 times the type height. The five letters stand on one even pitch, a fifth
of the column each, and every word is centred on its letter, both ways: letter and word
share one grid cell with place-items center, and a 1em line box centred on the letter puts
the cap height within a hundredth of an em of the letter's centre. Measured in Gotham Bold
at -0.035em, "Holistically" is 5.19em wide, so the type is the column over 26em, which
sets the widest word exactly to its fifth of the column. The section head reads "Our
Vision"; the three words it is made of as a quiet centred row below, no rule. On phones the words
fall into two columns with the last spanning both. --- */
.vision { position: relative; margin-top: clamp(24px, 2.6vw, 36px); padding: 0; text-align: left; }
.vis-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vis-line { --wh: 2.5em; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
font-size: min(42.4px, calc((100vw - 56px) / 26)); font-weight: 700; letter-spacing: -0.035em;
line-height: 1; color: var(--dark); }
.vw { display: grid; place-items: center; white-space: nowrap; }
.vw > * { grid-area: 1 / 1; }
.wm { display: block; pointer-events: none; color: var(--dark); opacity: .08;
height: var(--wh); width: calc(var(--wh) * var(--ar)); }
.vw .t { position: relative; z-index: 1; }
.vw b { font-weight: inherit; color: var(--blue); }
.vis-beats { list-style: none; margin: clamp(32px, 3.5vw, 48px) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.vis-beats li { max-width: 34ch; margin: 0 auto; text-align: center; }
.vis-beats b { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.vis-beats span { font-size: 15px; line-height: 1.55; color: var(--sub); }
@media (max-width: 760px) {
.vis-line { --wh: 2.2em; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .5em;
font-size: clamp(28px, 8.6vw, 40px); }
.vw:last-child { grid-column: 1 / -1; }
.vis-beats { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.vis-beats li { max-width: none; }
}
/* --- mobile readability pass: keep desktop unchanged, lift small copy to a comfortable phone size --- */
@media (max-width: 820px) {
.sec-head h2 { font-size: clamp(30px, 8vw, 38px); line-height: 1.12; }
.sec-head .lede, .hero-sub, .cta .lede { font-size: 16px; line-height: 1.62; }
.vis-beats b { font-size: 15px; }
.vis-beats span { font-size: 16px; line-height: 1.6; }
.chair-copy h2 { font-size: 24px; }
.chair-role { font-size: 14.5px; }
.chair-copy > p:not(.chair-role):not(.chair-quote) { font-size: 16px; line-height: 1.68; }
.chair-quote { font-size: 16px; line-height: 1.6; }
.chair-copy .more { font-size: 14.5px; }
.num .l { font-size: 14.5px; line-height: 1.5; }
.fineprint, .awards-note { font-size: 13.5px; line-height: 1.55; }
}
/* --- mobile leadership slider navigation: controls only; existing slider layout stays unchanged --- */
.team-slider-nav { display: none; }
@media (max-width: 820px) {
.team-slider-nav {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin: 24px 0 14px;
}
.team-slider-nav__hint {
min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--sub);
}
.team-slider-nav__controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.team-slider-nav__count {
min-width: 42px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.team-slider-nav__btn {
width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0;
border: 1px solid rgba(21,87,255,.24); border-radius: 50%; background: #fff; color: var(--blue);
font: inherit; font-size: 21px; line-height: 1; cursor: pointer; touch-action: manipulation;
transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.team-slider-nav__btn:not(:disabled):active { transform: scale(.96); }
.team-slider-nav__btn--next:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.team-slider-nav__btn:disabled { opacity: .34; cursor: default; }
.team-slider-dots { display: flex; justify-content: center; gap: 7px; margin: 4px 0 0; }
.team-slider-dot {
width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
background: rgba(21,87,255,.24); cursor: pointer; transition: width .2s ease, background .2s ease;
}
.team-slider-dot[aria-current="true"] { width: 24px; background: var(--blue); }
}