/* About page (Stux "About", video v8917). Every rule is scoped to .sx-pg-about, the class every section of this page carries (a section copied to another page keeps it).
   Sizes were measured on the Stux recording at a 1280px-wide viewport; the comments give the value at 1280.
   The heading column starts where .sx-head's second column starts: calc(33.333% - var(--sx-pad) / 3). */
.sx-pg-about { --ab-col: calc(33.333% - var(--sx-pad) / 3); --ab-ink: #1c1c1c; }
.sx-pg-about .sx-about-br { display: inline; }

/* ---------------------------------------------------------- hero: copy low in the frame, wide tight title */
.sx-pg-about .sx-hero-page, .sx-pg-about.sx-hero-page {
	min-height: clamp(460px, 78vh, 760px); align-content: end;
	padding: 120px var(--sx-pad) max(56px, 13vh);
}
.sx-pg-about .sx-hero-page .sx-cover-title, .sx-pg-about.sx-hero-page .sx-cover-title {
	font-size: clamp(40px, 7.3vw, 124px) !important; font-stretch: 115%; letter-spacing: -.035em; word-spacing: -.06em; line-height: .92 !important;
}
.sx-pg-about .sx-hero-page .sx-cover-sub, .sx-pg-about.sx-hero-page .sx-cover-sub { font-size: 16px; line-height: 1.32; margin-top: 21px !important; }
.sx-pg-about .sx-hero-page::after, .sx-pg-about.sx-hero-page::after { background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 40%, rgba(0,0,0,.28)); }

/* ---------------------------------------------------------- 01 intro: 41px sentence, first line indented 2em */
.sx-pg-about .sx-about-intro .sx-head, .sx-pg-about.sx-about-intro .sx-head { margin-bottom: 0 !important; }
.sx-pg-about .sx-big-sentence {
	font-size: clamp(25px, 3.2vw, 52px) !important; font-weight: 400; font-stretch: 100%; line-height: 1.01; letter-spacing: -.025em;
	text-indent: 2em; color: var(--ab-ink); max-width: none; text-wrap: wrap;
}
.sx-pg-about .sx-about-p { font-size: clamp(14px, 1.31vw, 19px); line-height: 1.36; letter-spacing: -.005em; color: #4d4d4d; max-width: max(300px, 41vw); }

/* ---------------------------------------------------------- stat rows: in the heading column, 164px pitch */
.sx-pg-about .sx-about-rows, .sx-pg-about.sx-about-rows { padding-top: clamp(64px, 9.3vw, 140px); }
.sx-pg-about .sx-rows { margin: 0 0 0 var(--ab-col) !important; }
.sx-pg-about .sx-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 3.4vw, 50px) 0 clamp(32px, 4.2vw, 60px); border-bottom: 1px solid #d6d6d6; }
.sx-pg-about .sx-row:first-child { padding-top: 0; }
.sx-pg-about .sx-row > * { margin: 0 !important; }
.sx-pg-about .sx-row-n { font-size: clamp(42px, 5vw, 80px) !important; font-weight: 400; font-stretch: 125%; line-height: 1; letter-spacing: -.035em; color: var(--ab-ink); white-space: nowrap; }
.sx-pg-about .sx-row-l { flex: none; width: 6.4em; font-size: clamp(15px, 1.45vw, 21px); line-height: 1.25; letter-spacing: -.01em; color: #333; text-align: left; }

/* ---------------------------------------------------------- founder: mark top left, words at the bottom, portrait right */
.sx-pg-about .sx-ceo-sec, .sx-pg-about.sx-ceo-sec { padding-top: clamp(48px, 6.6vw, 100px); }
.sx-pg-about .sx-ceo { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; margin: 0 0 0 var(--ab-col) !important; }
.sx-pg-about .sx-ceo-text { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.sx-pg-about .sx-ceo-text > *, .sx-pg-about .sx-ceo-words > * { margin: 0 !important; }
.sx-pg-about .sx-ymark {
	display: grid; place-items: center; box-sizing: border-box; width: clamp(40px, 4vw, 60px); height: clamp(40px, 4vw, 60px); padding-top: .15em;
	background: var(--sx-yellow); color: var(--sx-ink); font: 800 clamp(40px, 4.3vw, 62px)/1 var(--edol-font-head); font-stretch: 125%; letter-spacing: 0;
}
.sx-pg-about .sx-ceo-quote { font-size: clamp(16px, 1.6vw, 24px) !important; font-weight: 700; font-stretch: 118%; line-height: 1.15; letter-spacing: -.035em; word-spacing: -.04em; text-transform: uppercase; color: #202020; max-width: 16.5em; }
.sx-pg-about .sx-quote-by { margin-top: clamp(12px, 1.4vw, 20px) !important; font-size: clamp(13px, 1.2vw, 17px); font-stretch: 100%; line-height: 1.3; color: #444; }
.sx-pg-about .sx-ceo-img { flex: none; width: clamp(150px, 19vw, 300px); margin: 0 !important; }
.sx-pg-about .sx-ceo-img img { width: 100%; aspect-ratio: 242 / 295; height: auto; object-fit: cover; border-radius: 0; }

/* ---------------------------------------------------------- the EDOL band: full-bleed 3:2 photo, letters in its sky
   The letters (ink 2.70em wide, centred: from 1% to 99% of the width; cap about 25vw) sit at the top and trail the photo as it scrolls
   (page-about.js sets --bt). Lower down they fade into the horizon, where Stux's house covers them.
   Without motion --bt is unset and they rest .155em down (E top about 66px below the band top at 1280, as in Stux f012), not clipped by its edge. */
.sx-pg-about .sx-band, .sx-pg-about.sx-band { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin-top: clamp(96px, 13.7vw, 210px) !important; padding: 0 !important; background: #b9bcbf; container-type: inline-size; }
.sx-pg-about .sx-band-img { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; }
.sx-pg-about .sx-band-img img { width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.sx-pg-about .sx-band-word {
	position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; pointer-events: none; margin: 0 !important;
	-webkit-mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,0) 64%); mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,0) 64%);
}
.sx-pg-about .sx-watermark {
	flex: none; margin: -.06em 0 0 -.077em !important; padding: 0; text-align: center; white-space: nowrap; max-width: none;
	font-size: 36.3vw !important; font-size: calc(98cqw / 2.70) !important; font-weight: 800; font-stretch: 100%; line-height: .8; letter-spacing: -.03em;
	color: #dedede; translate: 0 var(--bt, .155em); will-change: translate;
}

/* ---------------------------------------------------------- 02 services: three columns between four hairlines */
.sx-pg-about .sx-why .sx-h2, .sx-pg-about.sx-why .sx-h2, .sx-pg-about .sx-awards .sx-h2, .sx-pg-about.sx-awards .sx-h2, .sx-pg-about .sx-team-sec .sx-h2, .sx-pg-about.sx-team-sec .sx-h2 { max-width: none; }
.sx-pg-about .sx-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-pg-about .sx-feat { display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(28px, 3.7vw, 54px) clamp(16px, 2.2vw, 32px) clamp(24px, 2.6vw, 38px); border-left: 1px solid #d4d4d4; }
.sx-pg-about .sx-feat:last-child { border-right: 1px solid #d4d4d4; }
.sx-pg-about .sx-feat > * { margin: 0 !important; }
.sx-pg-about .sx-feat-icon { color: #2b2b2b; line-height: 0; }
.sx-pg-about .sx-feat-svg { display: block; width: clamp(92px, 10.2vw, 150px); height: auto; overflow: visible; }
.sx-pg-about .sx-feat-svg * { vector-effect: non-scaling-stroke; }
.sx-pg-about .sx-feat h3 { margin-top: clamp(48px, 6.4vw, 96px) !important; font-size: clamp(18px, 1.92vw, 28px) !important; font-weight: 400 !important; font-stretch: 100%; line-height: 1.2; letter-spacing: -.02em; color: var(--ab-ink); }
.sx-pg-about .sx-feat-d { margin-top: clamp(8px, .9vw, 12px) !important; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.3; color: #555; max-width: 17.5em; }
.sx-pg-about .sx-feat .sx-stat-i { margin-top: clamp(40px, 5.4vw, 78px) !important; font-size: 11px; font-weight: 700; font-stretch: 125%; line-height: 1; letter-spacing: 0; color: var(--ab-ink); }

/* ---------------------------------------------------------- awards (owner's list): rows open on hover or focus */
.sx-pg-about .sx-awards .sx-head, .sx-pg-about.sx-awards .sx-head { margin-bottom: clamp(44px, 6.2vw, 90px) !important; }
.sx-pg-about .sx-aw-list { list-style: none; margin: 0 !important; padding: 0; }
.sx-pg-about .sx-aw {
	position: relative; display: grid; grid-template-columns: var(--ab-col) minmax(0, 1fr) auto; align-items: start;
	min-height: clamp(84px, 9.4vw, 140px); box-sizing: border-box; padding: clamp(26px, 3.1vw, 46px) 0 clamp(20px, 2.3vw, 34px);
	border-top: 1px solid #d6d6d6; margin: 0;
}
.sx-pg-about .sx-aw:last-child { border-bottom: 1px solid #d6d6d6; }
.sx-pg-about .sx-aw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #111; transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--sx-ease); z-index: 1; }
.sx-pg-about .sx-aw > * { margin: 0 !important; }
.sx-pg-about .sx-aw-y span { display: inline-block; padding: 3px 6px 2px; background: var(--sx-yellow); color: #111; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.2; letter-spacing: -.01em; }
.sx-pg-about .sx-aw-t { margin: 0 !important; font-size: clamp(18px, 1.78vw, 26px) !important; font-weight: 400 !important; font-stretch: 100%; line-height: 1.2; letter-spacing: -.02em; color: var(--ab-ink); text-wrap: pretty; }
.sx-pg-about .sx-aw-t a { color: inherit; text-decoration: none; }
.sx-pg-about .sx-aw-t a::after { content: ""; position: absolute; inset: 0; }
.sx-pg-about .sx-aw-t a:focus-visible { outline: none; }
.sx-pg-about .sx-aw:has(a:focus-visible) { outline: 2px solid var(--sx-ink); outline-offset: 4px; }
.sx-pg-about .sx-aw-i { align-self: start; padding: clamp(10px, 1.1vw, 16px) 0 0 16px; font-size: 12px; font-stretch: 112%; line-height: 1; color: #666; }
.sx-pg-about .sx-aw-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--sx-ease); }
.sx-pg-about .sx-aw-more > div { overflow: hidden; min-height: 0; }
.sx-pg-about .sx-aw-d { margin: clamp(40px, 5vw, 72px) 0 0 !important; max-width: 26ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.3; color: #444; opacity: 0; translate: 0 10px; transition: opacity .4s, translate .5s var(--sx-ease); }
.sx-pg-about .sx-aw:hover::after, .sx-pg-about .sx-aw:focus-within::after { transform: scaleX(1); }
.sx-pg-about .sx-aw:hover .sx-aw-more, .sx-pg-about .sx-aw:focus-within .sx-aw-more { grid-template-rows: 1fr; }
.sx-pg-about .sx-aw:hover .sx-aw-d, .sx-pg-about .sx-aw:focus-within .sx-aw-d { opacity: 1; translate: 0 0; transition-delay: .12s; }
.sx-pg-about .sx-aw:has(a):hover { cursor: pointer; }
/* touch screens cannot hover: the rows stay open */
@media (hover: none) {
	.sx-pg-about .sx-aw-more { grid-template-rows: 1fr; }
	.sx-pg-about .sx-aw-d { opacity: 1; translate: none; margin-top: 12px !important; }
}

/* ---------------------------------------------------------- wide photo: full-bleed 16:8.5 */
.sx-pg-about .sx-wide, .sx-pg-about.sx-wide { margin-top: var(--sx-gap) !important; padding: 0 !important; }
.sx-pg-about .sx-wide-img { margin: 0 !important; }
.sx-pg-about .sx-wide-img img { width: 100%; aspect-ratio: 16 / 8.5; height: auto; object-fit: cover; border-radius: 0; }

/* ---------------------------------------------------------- team (owner's list): 3:4 portraits, two per row */
.sx-pg-about .sx-team-sec .sx-head, .sx-pg-about.sx-team-sec .sx-head { margin-bottom: clamp(40px, 6.6vw, 96px) !important; }
.sx-pg-about .sx-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 52px) clamp(12px, 1.6vw, 24px); margin-left: var(--ab-col); }
.sx-pg-about .sx-member { margin: 0; min-width: 0; }
.sx-pg-about .sx-member-img { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #dcdcdc; }
.sx-pg-about .sx-member-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-pg-about .sx-member-ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(36px, 6vw, 88px); font-weight: 500; font-stretch: 125%; letter-spacing: -.03em; color: #b4b4b4; }
.sx-pg-about .sx-member-plus { position: absolute; right: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px); width: clamp(32px, 3.3vw, 46px); height: clamp(32px, 3.3vw, 46px); background: var(--sx-yellow); }
.sx-pg-about .sx-member-plus::before, .sx-pg-about .sx-member-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 1.5px; background: #111; translate: -50% -50%; }
.sx-pg-about .sx-member-plus::after { rotate: 90deg; }
.sx-pg-about .sx-member-n { margin: clamp(10px, 1.2vw, 16px) 0 0 !important; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.02em; color: var(--ab-ink); }
.sx-pg-about .sx-member-r { margin: 4px 0 0 !important; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.3; color: #777; }

/* ---------------------------------------------------------- client logos (owner's list): centred heading, 4 grey tiles a row */
.sx-pg-about .sx-about-logos, .sx-pg-about.sx-about-logos { padding-top: clamp(80px, 9.4vw, 140px); }
.sx-pg-about .sx-team-sec + .sx-about-logos, .sx-pg-about.sx-team-sec + .sx-about-logos { padding-top: clamp(72px, 9.4vw, 130px); }
.sx-pg-about .sx-about-logos-h { margin: 0 0 clamp(32px, 4.8vw, 66px) !important; text-align: center; font-size: clamp(14px, 1.25vw, 17px) !important; font-weight: 700 !important; font-stretch: 125%; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: #2b2b2b; }
.sx-pg-about .sx-logos { --ab-lg: clamp(6px, .7vw, 10px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ab-lg); }
.sx-pg-about .sx-logos > * { flex: 0 0 calc((100% - 3 * var(--ab-lg)) / 4); }
.sx-pg-about .sx-logo-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 2.15 / 1; box-sizing: border-box; margin: 0; padding: 0 12px; background: #e3e3e3; color: #444; text-decoration: none; overflow: hidden; }
.sx-pg-about .sx-logo-tile img { display: block; width: 36%; height: 42%; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .8; transition: opacity .3s; }
.sx-pg-about a.sx-logo-tile:hover img { opacity: 1; }
.sx-pg-about .sx-logo-name { font-size: clamp(13px, 1.3vw, 18px); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; text-align: center; }

/* ---------------------------------------------------------- tablets and phones */
@media (max-width: 760px) {
	.sx-pg-about { --ab-col: 0px; }
	.sx-pg-about .sx-about-br, .sx-pg-about :is(.sx-big-sentence, .sx-ceo-quote, .sx-h2) br { display: none; } /* also a break retyped in the editor (it loses its class) */
	.sx-pg-about .sx-hero-page, .sx-pg-about.sx-hero-page { padding-bottom: 64px; }
	.sx-pg-about .sx-big-sentence { text-indent: 1.5em; }
	.sx-pg-about .sx-about-p { max-width: 34em; }
	.sx-pg-about .sx-row-l { width: 6.2em; }
	.sx-pg-about .sx-ceo { flex-direction: column; gap: 32px; }
	.sx-pg-about .sx-ceo-text { gap: 40px; }
	.sx-pg-about .sx-ceo-img { width: min(62%, 300px); }
	.sx-pg-about .sx-feats { grid-template-columns: minmax(0, 1fr); }
	.sx-pg-about .sx-feat { border-left: 0; border-right: 0 !important; border-top: 1px solid #d4d4d4; padding: 28px 0 24px; }
	.sx-pg-about .sx-feat:last-child { border-bottom: 1px solid #d4d4d4; }
	.sx-pg-about .sx-feat h3 { margin-top: 36px !important; }
	.sx-pg-about .sx-feat .sx-stat-i { margin-top: 28px !important; }
	.sx-pg-about .sx-aw { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
	.sx-pg-about .sx-aw-y { grid-column: 1 / -1; }
	.sx-pg-about .sx-aw-i { padding-top: 4px; }
	.sx-pg-about .sx-logos > * { flex-basis: calc((100% - var(--ab-lg)) / 2); }
}
@media (prefers-reduced-motion: reduce) {
	.sx-pg-about .sx-aw::after, .sx-pg-about .sx-aw-more, .sx-pg-about .sx-aw-d { transition: none; }
}