/* Company: the section page, About, Leadership and Working with us (assets/bodies-company.js). Every block reads in a
   plain layout of its own; the scenes take over only under html.bodies-live. No picture stands beside the words: the
   only pictures are the leaders' portraits and, on the section page's ways in, each page's own hero painting. */

[data-topic="company"] { --b-bg: #08090d; }
[data-topic="leadership"] { --b-bg: #07080b; }
[data-topic="team"] { --b-bg: #0a0d12; }

/* the hero kind the company pages add: a wall of portraits */
.t-hero.is-portraits { background: #050608; }
.t-faces { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.t-face { background: #0b0d11 50% 20% / cover no-repeat; filter: brightness(.5); }
[data-face="virgil-ignacio"] { background-image: url(/assets/company/virgil-ignacio-1200.webp); }
[data-face="caden-tacoronte"] { background-image: url(/assets/company/caden-tacoronte-1200.webp); }
[data-face="bryan-alexandros"] { background-image: url(/assets/company/bryan-alexandros-1200.webp); }
@media (prefers-reduced-motion: no-preference) { .js .t-face { opacity: 0; } }   /* bodies-company.js brings them up */
.t-hero.is-portraits::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 6, 8, .94) 0%, rgba(5, 6, 8, .78) 22%, rgba(5, 6, 8, 0) 50%), linear-gradient(180deg, rgba(5, 6, 8, .55), rgba(5, 6, 8, 0) 22%); }
.t-hero.is-portraits .t-hero-text { z-index: 2; }

/* the section page. Who the company is, as one statement set large across the page; under its right side the two things
   that means, side by side: the way the work is bounded, and the engineers beside your team (the hero's "the people and
   the way we deliver"). The eye reads down the diagonal from the statement to them. Then the three ways in, each a band
   of the picture of the page it opens, always shown */
.b-co-open { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.2vw, 40px); padding: 22vh var(--gutter) 13vh; text-align: left; }
.b-co-open .b-lede { grid-column: 1 / -1; max-width: 21ch; margin: 0; font: 200 clamp(40px, 5vw, 96px)/1.03 var(--sys-display); letter-spacing: -.022em; text-wrap: balance; }
.b-co-pair { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 64px); align-items: start; margin-top: 11vh; }
.b-co-pair .b-p { max-width: 32ch; margin: 0; font-size: clamp(17px, 1.32vw, 22px); line-height: 1.55; }
.b-co-ways { display: grid; gap: 3vh; padding: 6vh var(--gutter) 10vh; }
.b-co-way { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 46vh; min-height: 300px; padding: 5vh 5%; overflow: hidden; border-radius: 3px; color: inherit; isolation: isolate; }
.b-co-name { display: block; font: 200 clamp(42px, 5.6vw, 104px)/1 var(--sys-display); letter-spacing: -.015em; }
.b-co-says { display: block; margin-top: 12px; font: italic 400 clamp(19px, 1.5vw, 24px)/1.3 var(--sys-accent); color: #d5d9dd; }
.b-co-pic { position: absolute; inset: -9% 0; z-index: -1; background-size: cover; background-position: 50% 45%; transition: transform .9s var(--sys-ease); }
.b-co-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 13, .1) 30%, rgba(8, 9, 13, .82) 100%); }
/* the leaders' own portraits, three abreast: on the Leadership way in, and on the way on to Leadership from About */
.b-co-faces, .t-next-media[data-art="leaders"] { background-image: url(/assets/company/virgil-ignacio-600.webp), url(/assets/company/caden-tacoronte-600.webp), url(/assets/company/bryan-alexandros-600.webp); background-size: 33.4% auto; background-position: 0 30%, 50% 30%, 100% 30%; background-repeat: no-repeat; background-color: #0b0d11; filter: grayscale(1) brightness(.7); }
.t-next-media[data-art="leaders"] { background-position: 0 56%, 50% 27%, 100% 27%; }
@media (hover: hover) and (pointer: fine) { .b-co-way:hover .b-co-pic { transform: scale(1.03); } }

/* About and Working with us play their scenes on the hero itself (bodies-company.js). Their hero picture is laid out at
   the painting's own shape, centred, at the size the cover framing gave it: it arrives framed exactly as before, and the
   camera can reach every part of the painting, on a phone too (--pa is the painting's width over its height) */
:is([data-topic="about"], [data-topic="team"]) .t-img { --pa: 1.77683; --fw: max(108vw, max(100vh, 560px) * 1.14 * var(--pa)); left: calc(50% - var(--fw) / 2); right: auto; width: var(--fw); top: calc(50% - var(--fw) / var(--pa) / 2); bottom: auto; height: calc(var(--fw) / var(--pa)); }

/* About. With motion the scene plays on the hero itself (bodies-company.js, topic-bodies.js heroStage): a focus pull
   through its painting. A pre-blurred copy of the painting (.b-ab-soft, inside the hero picture, so the camera moves it
   with the paint) covers it, and a feathered window in that copy lets the picture's own sharp paint through at one depth
   after another: the lights at the end of the valley road, the road down to the astronaut with the tablet, the crew
   loading the racks. The words stand over the soft part; at the end the copy fades and the whole painting is sharp.
   The plain layout (reduced motion, no script) has no picture: the five statements step down the page, each a little
   further in than the one before, from what the firm builds to where its teams are, the way the work itself goes from
   the first assessment to running the system */
.b-ab-says { padding: 19vh var(--gutter) 8vh; }
.b-ab-list { display: grid; row-gap: 12vh; }
.b-ab-list .b-ab-say { --in: 0; width: min(100%, 40%); margin-left: calc(var(--in) * 15%); text-align: left; }
.b-ab-list .b-ab-say:first-child { width: min(100%, 52%); }
.b-ab-list .b-ab-say:nth-child(2) { --in: 1; }
.b-ab-list .b-ab-say:nth-child(3) { --in: 2; }
.b-ab-list .b-ab-say:nth-child(4) { --in: 3; }
.b-ab-list .b-ab-say:nth-child(5) { --in: 4; }
.b-ab-lede { max-width: 17ch; font: 200 clamp(34px, 3.8vw, 68px)/1.08 var(--sys-display); letter-spacing: -.014em; text-wrap: balance; }
.b-ab-big { max-width: 22ch; font: 200 clamp(30px, 3vw, 54px)/1.12 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-ab-big .accent { font-size: 1.04em; }
.b-ab-p { max-width: 42ch; margin-top: 22px; font: 400 clamp(17px, 1.25vw, 20px)/1.5 var(--sys-body); letter-spacing: -.01em; color: #3f4954; text-wrap: pretty; }
.b-ab-list .b-ab-lede { max-width: none; font-size: clamp(38px, 4.4vw, 84px); line-height: 1.04; letter-spacing: -.02em; }
.b-ab-list .b-ab-big { max-width: none; font-size: clamp(28px, 2.7vw, 50px); }
.bodies-live .b-ab-says.is-staged { display: none; }
/* the stage: the soft copy and its window, and the words over the picture */
.b-ab-focus { position: absolute; left: 0; right: 0; top: -100%; height: 300%; pointer-events: none; visibility: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 46.667%, transparent 53.333%, #000 56%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 44%, transparent 46.667%, transparent 53.333%, #000 56%, #000 100%); }
.b-ab-soft { position: absolute; left: 0; right: 0; top: calc(100% / 3); height: calc(100% / 3); background: url(/assets/art/detail/about-soft.webp) 50% 50% / cover no-repeat; background-position: var(--vt-pos, 50% 50%); }
[data-topic="about"] { --stage-shade: linear-gradient(180deg, rgba(8, 10, 10, .64) 0%, rgba(8, 10, 10, .2) 26%, rgba(8, 10, 10, 0) 40%, rgba(8, 10, 10, 0) 60%, rgba(8, 10, 10, .26) 76%, rgba(8, 10, 10, .78) 100%); }
.b-ab-stage .b-ab-say { position: absolute; left: 0; right: 0; min-height: 0; display: block; padding: 0 var(--gutter); text-align: center; opacity: 0; }
.b-ab-stage .b-ab-say.is-mid { top: 50%; translate: 0 -50%; }
.b-ab-stage .b-ab-say.is-top { top: 15vh; }
.b-ab-stage .b-ab-say.is-bottom { bottom: 9vh; }
.b-ab-stage .b-ab-lede { max-width: 18ch; margin: 0 auto; font-size: clamp(38px, 4.6vw, 84px); color: var(--sys-text); }
.b-ab-stage .b-ab-big { max-width: 24ch; margin: 0 auto; font-size: clamp(32px, 3.4vw, 60px); color: #f2f3f4; }
.b-ab-stage .b-ab-p { margin: 18px auto 0; color: #d6dbdf; }
/* behind the words, a soft dark of their own, so they hold their contrast over any part of the painting */
.b-ab-stage .b-ab-say > * { position: relative; }
.b-ab-stage .b-ab-say::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1040px, 92vw); height: 150%; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 8, 11, .46), rgba(6, 8, 11, 0)); }
/* About's ending: the promise on one line across the page, a hairline drawn under it from the left, and under the
   hairline the answer to it on the left and the ways to make the call on the right, like the foot of a letter */
.t-end > .b-ab-close { text-align: left; }
.b-ab-close .b-h { margin: 0; font-size: clamp(42px, 7.4vw, 140px); line-height: 1; letter-spacing: -.024em; }
.b-ab-rule { display: block; height: 1px; margin: 5.5vh 0 4.5vh; background: rgba(13, 17, 23, .24); transform-origin: 0 50%; }
.b-ab-reply { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 6vw; }
.b-ab-reply .b-p { max-width: 30ch; margin: 0; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; color: #2f3842; }
.t-end > .b-ab-close .b-ab-reply .b-actions { margin-top: 2px; justify-content: flex-end; }

/* Leadership: one person at a time; the portrait develops as their words come into focus */
.b-ld-people { display: grid; gap: 12vh; max-width: 1100px; margin: 0 auto; padding: 14vh var(--gutter) 8vh; }
.b-ld-person { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; column-gap: 6vw; }
.b-ld-face { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #101318; }
.b-ld-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-ld-words h3 { font: 200 clamp(40px, 4.4vw, 80px)/1.02 var(--sys-display); letter-spacing: -.012em; }
.b-ld-role { margin-top: 14px; font: italic 400 clamp(19px, 1.5vw, 24px)/1.3 var(--sys-accent); color: #e0707f; }
.b-ld-bio { max-width: 44ch; margin-top: 24px; font: 400 clamp(17px, 1.3vw, 20px)/1.6 var(--sys-body); color: #b4bcc4; }
.bodies-live .b-ld-people { position: relative; height: 100vh; max-width: none; padding: 0 var(--gutter); display: block; }
.bodies-live .b-ld-person { position: absolute; left: 50%; top: 50%; width: min(1100px, calc(100% - 2 * var(--gutter))); transform: translate(-50%, -46%); }
.bodies-live .b-ld-face { height: min(66vh, 560px); width: auto; }
.bodies-live .b-ld-face img { will-change: filter, transform; }

/* Working with us. With motion the scene plays on the hero: the camera crosses the operations room to each role's
   place (the engineers at their screens, the technical leads at the big console, the security specialists at the lock)
   and the role's words stand in a column on the far side of the frame, over a shade that slides in with them. The plain
   layout (reduced motion, no script) has no picture: who works alongside your team stands centred as the opening, and
   each role is then one sentence in a single reading column, led by its name in the serif, the way it is written */
.b-tm-room { padding: 19vh var(--gutter) 10vh; }
.b-tm-says .b-tm-say.is-lede { margin-bottom: 15vh; text-align: center; }
.b-tm-says .b-tm-say + .b-tm-say:not(.is-lede) { margin-top: 10vh; }
.b-tm-lede { max-width: 15ch; font: 200 clamp(34px, 3.4vw, 60px)/1.08 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-tm-says .b-tm-lede { max-width: 18ch; margin: 0 auto; font-size: clamp(40px, 4.6vw, 86px); line-height: 1.03; letter-spacing: -.02em; }
.b-tm-says .is-lede .b-p { max-width: 34ch; margin: 30px auto 0; }
.b-tm-role { max-width: 36ch; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sys-body); letter-spacing: -.01em; color: #b4bcc4; }
.b-tm-name { display: block; margin-bottom: 16px; font: italic 400 clamp(34px, 3.1vw, 56px)/1.02 var(--sys-accent); letter-spacing: -.005em; color: var(--sys-text); }
.b-tm-says .b-tm-role { max-width: 31ch; margin: 0 auto; font: 200 clamp(23px, 2.15vw, 38px)/1.32 var(--sys-display); letter-spacing: -.012em; color: #c9d0d6; text-wrap: pretty; }
.b-tm-says .b-tm-name { display: inline; margin: 0; font-size: 1.14em; line-height: 1; letter-spacing: -.004em; }
.bodies-live .b-tm-room.is-staged { display: none; }
/* the stage */
[data-topic="team"] { --stage-shade: linear-gradient(180deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 22%); --stage-shade-m: linear-gradient(180deg, rgba(8, 10, 10, .62) 0%, rgba(8, 10, 10, 0) 24%); }
.b-tm-shade { position: absolute; pointer-events: none; visibility: hidden; }
.b-tm-shade.is-l { left: 0; top: 0; bottom: 0; width: 66%; background: linear-gradient(90deg, rgba(6, 8, 11, .88) 0%, rgba(6, 8, 11, .74) 48%, rgba(6, 8, 11, 0) 100%); }
.b-tm-shade.is-r { right: 0; top: 0; bottom: 0; width: 66%; background: linear-gradient(270deg, rgba(6, 8, 11, .88) 0%, rgba(6, 8, 11, .74) 48%, rgba(6, 8, 11, 0) 100%); }
.b-tm-shade.is-b { left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(0deg, rgba(6, 8, 11, .9) 0%, rgba(6, 8, 11, .62) 46%, rgba(6, 8, 11, 0) 100%); }
.b-tm-stage .b-tm-say { position: absolute; top: 0; bottom: 0; width: min(500px, 34vw); min-height: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; opacity: 0; }
.b-tm-stage .b-tm-say[data-side="l"] { left: var(--gutter); }
.b-tm-stage .b-tm-say[data-side="r"] { right: var(--gutter); }
.b-tm-stage .b-tm-say[data-side="b"] { left: var(--gutter); top: auto; bottom: 10vh; display: block; width: min(760px, 56vw); }
.b-tm-stage .b-tm-lede { max-width: 17ch; font-size: clamp(42px, 4.4vw, 80px); color: var(--sys-text); }
.b-tm-stage .b-tm-say .b-p { margin: 22px 0 0; max-width: 36ch; color: #d3d9de; }
.b-tm-stage .b-tm-role { color: #d3d9de; font-size: clamp(18px, 1.35vw, 21px); }
.b-tm-stage .b-tm-name { font-size: clamp(40px, 3.8vw, 70px); margin-bottom: 20px; }

@media (max-width: 760px) {
  .b-co-open { display: block; padding: 14vh var(--gutter) 5vh; }
  .b-co-open .b-lede { font-size: clamp(34px, 9.6vw, 46px); line-height: 1.06; }
  .b-co-pair { display: block; margin: 7vh 0 0 16%; }
  .b-co-pair .b-p { font-size: 17px; }
  .b-co-pair .b-p + .b-p { margin-top: 20px; }
  .b-ab-says { padding: 13vh var(--gutter) 4vh; }
  .b-ab-list { row-gap: 9vh; }
  .b-ab-list .b-ab-say, .b-ab-list .b-ab-say:first-child { width: auto; margin-left: calc(var(--in) * 4.5%); }
  .b-ab-list .b-ab-lede { font-size: clamp(34px, 9.6vw, 46px); }
  .b-ab-list .b-ab-big { font-size: clamp(27px, 7.4vw, 34px); }
  .t-next-media[data-art="leaders"] { background-position: 0 62%, 50% 12%, 100% 12%; }
  .b-ab-stage .b-ab-say.is-top, .b-ab-stage .b-ab-say.is-bottom, .b-ab-stage .b-ab-say.is-mid { top: auto; bottom: 8vh; translate: none; }
  .b-ab-stage .b-ab-lede { font-size: clamp(34px, 9.4vw, 44px); }
  .b-ab-stage .b-ab-big { font-size: clamp(28px, 7.8vw, 36px); }
  .b-ab-stage .b-ab-p { font-size: 17px; }
  .b-ab-soft { background-position: var(--vt-pos-m, var(--vt-pos, 50% 50%)); }
  .b-ab-close .b-h { font-size: clamp(40px, 11.4vw, 54px); line-height: 1.02; }
  .b-ab-rule { margin: 3.4vh 0 2.8vh; }
  .b-ab-reply { display: block; }
  .b-ab-reply .b-p { font-size: 18px; }
  .t-end > .b-ab-close .b-ab-reply .b-actions { margin-top: 3vh; justify-content: flex-start; }
  /* the endings on a phone: the closing line keeps the spacing set here, not the browser's default margins round a
     heading, so the close, the way on and the footer hold one screen; Leadership's line sets on two lines, not three */
  .t-end > .b-close .b-h { margin: 0; }
  .t-end > .b-close .b-actions { margin-top: 5.5vh; }
  [data-topic="leadership"] .t-end > .b-close .b-h { font-size: clamp(36px, 10vw, 46px); }
  .t-faces { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .b-ld-person { grid-template-columns: 1fr; row-gap: 4vh; text-align: center; }
  .b-ld-bio { margin-left: auto; margin-right: auto; }
  .bodies-live .b-ld-face { height: 44vh; margin: 0 auto; }
  .b-tm-room { padding: 13vh var(--gutter) 6vh; }
  .b-tm-says .b-tm-say.is-lede { margin-bottom: 9vh; }
  .b-tm-says .b-tm-say + .b-tm-say:not(.is-lede) { margin-top: 6vh; }
  .b-tm-says .b-tm-lede { font-size: clamp(36px, 10vw, 46px); }
  .b-tm-says .b-tm-role { font-size: clamp(21px, 5.8vw, 24px); line-height: 1.36; }
  .b-tm-name { font-size: clamp(28px, 7.6vw, 36px); margin-bottom: 12px; }
  .b-tm-role { font-size: 16px; }
  .b-tm-stage .b-tm-say, .b-tm-stage .b-tm-say[data-side] { left: var(--gutter); right: var(--gutter); top: auto; bottom: 8vh; display: block; width: auto; }
  .b-tm-stage .b-tm-lede { font-size: clamp(34px, 9.4vw, 44px); }
  .b-tm-stage .b-tm-name { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 12px; }
  .b-tm-stage .b-tm-role { font-size: 17px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  /* a short phone: About's ending draws its lines a little closer, so it still holds one screen */
  .b-ab-close .b-h { font-size: 38px; }
  .b-ab-rule { margin: 2.4vh 0 2.2vh; }
  .b-ab-reply .b-p { font-size: 17px; }
  .t-end > .b-ab-close .b-ab-reply .b-actions { margin-top: 2.6vh; }
  .t-end > .b-ab-close { padding-bottom: 1.5vh; }
}

/* the heroes' own placements and sizes */
[data-topic="leadership"] .t-hero-text { bottom: 4vh; }
[data-topic="leadership"] .t-title { font-size: clamp(44px, 4.6vw, 88px); }
[data-topic="leadership"] .t-statement { font-size: clamp(22px, 2.2vw, 40px); }
/* Working with us: the name and its promise side by side in one band across the top, over the red sky in the room's
   window, the line under them; the room and its people stand clear below */
.t-hero-text.at-band { top: 10vh; bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .8em; text-align: center; }
.t-hero-text.at-band > * { position: relative; }
.t-hero-text.at-band .t-statement { margin-top: 0; }
.t-hero-text.at-band .t-line { flex-basis: 100%; max-width: none; margin-top: 16px; }
.t-hero-text.at-band :is(.t-title, .t-statement, .t-line)::before { content: ""; position: absolute; inset: -34% -12%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .5), rgba(6, 8, 11, 0)); }
[data-topic="team"] .t-hero-text .t-title { font-size: clamp(50px, 5vw, 96px); line-height: 1; }
[data-topic="team"] .t-hero-text .t-statement { font-size: clamp(26px, 2.4vw, 44px); }
/* (the ceiling above the window lies in its own shadow: its light strip runs along the very top of the frame, behind the
   header's search field, and travelled up through the field while the card's picture grew into the hero) */
.t-hero:has(.at-band) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .92) 0%, rgba(8, 10, 10, .9) 4.8%, rgba(8, 10, 10, .52) 7.6%, rgba(8, 10, 10, .3) 22%, rgba(8, 10, 10, 0) 40%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .5) 100%); }
/* the company's promise sits on a soft dark of its own, between the figures */
[data-topic="company"] .t-statement, [data-topic="company"] .t-line { position: relative; }
[data-topic="company"] .t-hero-text.at-giant .t-title { font-size: clamp(80px, 9.4vw, 180px); }
[data-topic="company"] .t-hero-text::before { content: ""; position: absolute; left: 50%; top: 66%; width: min(860px, 66vw); height: 52%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(8, 10, 10, .74), rgba(8, 10, 10, 0) 74%); }
/* About: down the left of the picture, the name on one line high in the evening sky over the road up to the base, the
   promise and its line low on the dark ground below the astronaut with the tablet */
.t-hero-text.at-sky { top: 13vh; bottom: 8vh; left: var(--gutter); width: min(800px, 54vw); display: flex; flex-direction: column; align-items: flex-start; }
.t-hero-text.at-sky .t-statement { margin-top: auto; }
.t-hero-text.at-sky > * { position: relative; }
.t-hero-text.at-sky :is(.t-title, .t-statement, .t-line)::before { content: ""; position: absolute; inset: -28% -12%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .5), rgba(6, 8, 11, 0)); }
[data-topic="about"] .t-hero-text.at-sky .t-title { font-size: clamp(56px, 6.6vw, 128px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
[data-topic="about"] .t-hero-text.at-sky .t-statement { max-width: 14ch; font-size: clamp(28px, 2.6vw, 48px); }   /* kept narrow, on the dark ground left of the astronaut with the tablet */
[data-topic="about"] .t-hero-text.at-sky .t-line { max-width: 29ch; }
.t-hero:has(.at-sky) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .55) 0%, rgba(8, 10, 10, .2) 30%, rgba(8, 10, 10, 0) 48%, rgba(8, 10, 10, 0) 66%, rgba(8, 10, 10, .7) 100%), linear-gradient(90deg, rgba(8, 10, 10, .45) 0%, rgba(8, 10, 10, 0) 50%); }
@media (max-width: 760px) {
  [data-topic="team"] .t-hero-text.at-band { top: auto; bottom: 9vh; display: block; }
  [data-topic="team"] .t-hero-text.at-band > * { margin-left: auto; margin-right: auto; }
  [data-topic="team"] .t-hero-text.at-band .t-statement { margin-top: .45em; }
  [data-topic="team"] .t-hero-text .t-title { font-size: clamp(46px, 12.6vw, 60px); }
  /* on a phone the picture's two corners take the words: the name very large in the sky at the top left, the promise
     and its line set right at the foot */
  [data-topic="about"] .t-hero-text.at-sky { top: 12vh; bottom: 8vh; right: var(--gutter); width: auto; }
  [data-topic="about"] .t-hero-text.at-sky .t-title { font-size: clamp(64px, 21vw, 92px); line-height: .9; white-space: normal; }
  [data-topic="about"] .t-hero-text.at-sky .t-statement { align-self: flex-end; max-width: 13ch; font-size: clamp(26px, 7.4vw, 36px); text-align: right; }
  [data-topic="about"] .t-hero-text.at-sky .t-line { align-self: flex-end; max-width: 26ch; text-align: right; }
}