/* Dreamteam About, v6: the picks from the review of v1 to v5, in one page. Loaded after about.css and about3.css.
   - Hero: the v3 photo grows to fill the screen, then the v1 paper desk is laid on top of it and the dream inks in.
     (Revision 2: the desk is now a single textured sheet of paper.)
   - Founders, investors and the dot that opens careers: v3, unchanged.
   - Team: the v2 film strip with a smaller photo.
   - Careers: the v5 sticky-note values, recoloured to the brand palette. */

/* ---------- Hero ---------- */
.about6 .section_about3-hero { overflow: clip; }
.about6-hero_desk { display: grid; place-items: center; margin-top: 2.5rem; }
.about6 .about-hero_halo { transition: none !important; }

.about3-hero_pin.about6-hero_pin.is-pinned { height: 360vh; }
.is-pinned .about6-hero_desk { position: absolute; z-index: 2; inset: 0; margin: 0; padding-top: 4rem; }
.is-pinned .about6-hero_desk .about-hero_stage { width: min(55.75rem, 92%, 104vh); }
.about6-hero_pin.is-pinned .about3-hero_foot { z-index: 3; }
/* On the photo the paper needs a firmer shadow than it has on white. */
.is-pinned .about6-hero_desk .about-hero_paper { background: #fff; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .34); }
.is-pinned .about6-hero_desk .about-hero_piece.is-back { filter: none; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3); }

/* ---------- Team: the film strip, smaller ---------- */
.about6 .is-pinned .about-team_layout { --card-w: min(20rem, 36vh); --gap: 1.75rem; --peek: 5.5rem; }
.about6 .is-pinned .about-team_names { width: min(100%, 17rem); }
.about6 .about-team_name { font-size: 2.125rem; overflow-wrap: normal; }
.about6 .is-pinned .about-team_strip .about-tag_inner { font-size: 1rem; }

/* ---------- Careers: the values as sticky notes ---------- */
.about6 .about-careers_text { display: block; max-width: 44rem; }
.about6 .about-careers_text mark { padding: 0 .15em; background: #eedd91; color: #121212; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about6 .about-careers_values { gap: 1.5rem; max-width: 62rem; }
.about6 .about-careers_value { position: relative; align-items: flex-start; gap: 1.5rem; width: 100%; max-width: 13rem; min-height: 12rem; padding: 1.25rem; background: radial-gradient(95% 65% at 0% 100%, rgba(238, 221, 145, .95), rgba(238, 221, 145, 0) 70%), radial-gradient(70% 70% at 110% 55%, rgba(254, 154, 140, .4), rgba(254, 154, 140, 0) 70%), #fbf9f4; color: #1c1d1f; font-size: 1.5rem; text-align: left; box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, .38); transition: rotate .2s ease-out, translate .2s ease-out; }
.about6 .about-careers_value:nth-child(1) { rotate: -4deg; }
.about6 .about-careers_value:nth-child(2) { rotate: 2.5deg; background: radial-gradient(95% 70% at 100% 100%, rgba(254, 154, 140, .85), rgba(254, 154, 140, 0) 70%), radial-gradient(70% 60% at 0% 0%, rgba(238, 221, 145, .5), rgba(238, 221, 145, 0) 70%), #fbf9f4; }
.about6 .about-careers_value:nth-child(3) { rotate: -2deg; background: radial-gradient(90% 65% at 0% 100%, rgba(254, 154, 140, .6), rgba(254, 154, 140, 0) 70%), radial-gradient(75% 75% at 105% 70%, rgba(238, 221, 145, .85), rgba(238, 221, 145, 0) 70%), #fbf9f4; }
.about6 .about-careers_value:nth-child(4) { rotate: 4deg; background: radial-gradient(95% 70% at 100% 0%, rgba(238, 221, 145, .9), rgba(238, 221, 145, 0) 70%), radial-gradient(75% 60% at 0% 100%, rgba(249, 40, 16, .22), rgba(254, 154, 140, 0) 72%), #fbf9f4; }
/* The notes are the page's own paper with the brand's warm washes (Soft Presence gold, Early Signal coral, a trace of
   Active Pulse as shadow), the same treatment as the founders cards. A strip of tape holds each one. */
.about6 .about-careers_value::before { content: ""; position: absolute; left: 50%; top: -.75rem; width: 4.5rem; height: 1.5rem; margin-left: -2.25rem; background: rgba(255, 255, 255, .28); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); rotate: -3deg; }
.about6 .about-careers_icon { width: 3rem; height: 3rem; border-radius: 50%; background: #1c1d1f; box-shadow: none; }
.about6 .about-careers_icon img { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .about6 .about-careers_value:hover { rotate: 0deg; translate: 0 -4px; }
  .about6 .about-careers_value:hover .about-careers_icon { background: #1c1d1f; transform: none; }
}

@media screen and (max-width: 991px) {
  .about6 .about-careers_value { max-width: none; min-height: 9rem; font-size: 1.25rem; }
}

/* ---------- Hero, revision 2: one sheet of paper on the photo. No clip, memo, tape, mark, lens or note. ---------- */
.about6 .about-hero_piece.is-memo, .about6 .about-hero_piece.is-tape, .about6 .about-hero_piece.is-clip,
.about6 .about-hero_piece.is-tile, .about6 .about-hero_piece.is-lens, .about6 .about-hero_piece.is-note { display: none; }
.about6 .about-hero_paper, .is-pinned .about6-hero_desk .about-hero_paper { background: #fbf9f4; border: 0; box-shadow: inset 0 0 0 .5px rgba(60, 45, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .1), 0 1.5rem 3.5rem rgba(0, 0, 0, .32); }
.about6 .about-hero_piece.is-back, .is-pinned .about6-hero_desk .about-hero_piece.is-back { background: #f1eadd; border: 0; filter: none; box-shadow: inset 0 0 0 .5px rgba(60, 45, 20, .16), 0 1.25rem 3rem rgba(0, 0, 0, .28); }
/* Paper tooth: a fine, even grain like uncoated stock. No streaks. The text sits above it. */
.about6 .about-hero_paper::before, .about6 .about-hero_piece.is-back::before, .about6-fold_face.is-back::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.1'%20numOctaves='2'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.35%20%200%200%200%200%20.3%20%200%200%200%200%20.24%20%200%200%200%20.55%20-.2'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.6'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.5%20-.18'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"); }
.about6 .about-hero_paper > * { position: relative; }
@media screen and (min-width: 992px) { .about6 .about-hero_canvas { translate: calc(-45 * var(--u)) 0; } }

/* Revision 3: the page rises from the bottom edge of the screen and stays attached to it. */
.is-pinned .about6-hero_desk { place-items: end center; padding-top: 0; }
.is-pinned .about6-hero_desk .about-hero_stage { width: min(55.75rem, 92%, 100vh); }

/* ---------- Story ribbon: drawn in code, like the staging homepage. The whole band fits; nothing is cut off. ---------- */
.about6-ribbon { position: relative; height: 34vw; margin-bottom: 2rem; pointer-events: none; }
.about6-ribbon canvas { display: block; position: absolute; left: 0; top: -9.9vw; width: 100%; height: 52vw; }
@media screen and (max-width: 991px) {
  .about6-ribbon { height: 59vw; }
  .about6-ribbon canvas { top: -17vw; height: 90vw; }
}

/* ---------- Revision 6: the page folds itself open; only its top right corner is torn ---------- */
.about6 .about-hero_piece.is-sheet { filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, .18)); }
.about6 .about-hero_paper, .is-pinned .about6-hero_desk .about-hero_paper { box-shadow: inset 0 0 0 .5px rgba(60, 45, 20, .18); }
/* The fibre band along the tear: paler and rougher than the face of the page. */
.about6-rim { position: absolute; inset: 0; background: #d6cfc2; pointer-events: none; }
.about6-rim::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.6'%20numOctaves='1'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.5%20-.18'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.1'%20numOctaves='2'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.35%20%200%200%200%200%20.3%20%200%200%200%200%20.24%20%200%200%200%20.55%20-.2'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"); }
.about6-fold { display: none; }
.is-pinned .about6-hero_desk .about-hero_piece.is-back, .is-pinned .about6-hero_desk .about-hero_edge { display: none; }
.is-pinned .about6-hero_desk .about-hero_piece.is-sheet { filter: drop-shadow(0 0 2.2rem rgba(0, 0, 0, .42)); }
/* The crease the fold leaves across the middle of the page. */
.is-pinned .about6-hero_desk .about-hero_paper::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 3 * var(--u)); height: calc(6 * var(--u)); pointer-events: none; background: linear-gradient(180deg, rgba(60, 45, 20, 0), rgba(60, 45, 20, .09) 48%, rgba(255, 255, 255, .7) 56%, rgba(255, 255, 255, 0)); }
.is-pinned .about6-fold { display: block; position: absolute; inset: 0; perspective: calc(1500 * var(--u)); perspective-origin: 50% 40%; }
.about6-fold_panel { position: absolute; left: 0; right: 0; height: 50%; }
.about6-fold_panel.is-bottom { top: 50%; overflow: hidden; }
.about6-fold_panel.is-bottom > * { top: -100%; bottom: 0; }
.about6-fold_panel.is-top { top: 0; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.about6-fold_face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.about6-fold_face.is-front > .about-hero_paper, .about6-fold_face.is-front > .about6-rim, .about6-fold_face.is-front > .about6-under { top: 0; bottom: -100%; }
.about6-fold_face.is-back { transform: rotateX(180deg); background: #f3f0e9; box-shadow: inset 0 0 0 .5px rgba(60, 45, 20, .2); }
.about6-fold_shade { position: absolute; inset: 0; background: #1c1d1f; opacity: 0; pointer-events: none; will-change: opacity; }
.about6-fold [data-about-words] span { opacity: .2; }
.about6-fold mark { --m: 0; }

/* ---------- Revision 9: the sheet under the page, seen through the torn corner. It carries the ribbon's slats,
   drawn as gradients so they stay sharp at any size and screen density. Only the corner is painted. ---------- */
.about6-under { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 78% 52% round 0 calc(16 * var(--u)) 0 0);
  /* Deep red slats: a thin lit edge, a red face falling into shadow, a dark gap. Sharp at any density. */
  background:
    linear-gradient(200deg, rgba(60, 6, 4, 0) 30%, rgba(60, 6, 4, .28) 100%),
    repeating-linear-gradient(118deg, #ff8a70 0, #ff8a70 calc(.9 * var(--u)), #f0442e calc(1.6 * var(--u)), #dc3220 calc(5.5 * var(--u)), #b92216 calc(9.6 * var(--u)), #8f150e calc(11.4 * var(--u)), #8f150e calc(12 * var(--u)));
}
.about6 .about-hero_piece.is-sheet, .about6-fold_face { border-top-right-radius: calc(16 * var(--u)); }

/* ---------- Careers: the value icons, drawn as strokes so their parts can move. Each plays once on hover. ---------- */
.about6-ico { display: block; width: 1.5rem; height: 1.5rem; overflow: visible; }
.about6-ico path { transform-box: fill-box; transform-origin: 50% 50%; }
.about6-ico .i-ray { transform-origin: 50% 100%; }
.about6-ico .i-wave { transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about6 .about-careers_value:hover .i-star { animation: about6-star .7s cubic-bezier(.3, 0, .2, 1); }
  .about6 .about-careers_value:hover .i-ray { animation: about6-ray .6s cubic-bezier(.2, .7, .3, 1) both; }
  .about6 .about-careers_value:hover .i-ray.is-2 { animation-delay: .08s; }
  .about6 .about-careers_value:hover .i-ray.is-3 { animation-delay: .16s; }
  .about6 .about-careers_value:hover .i-bar { animation: about6-bar .5s cubic-bezier(.3, 0, .2, 1); }
  .about6 .about-careers_value:hover .i-bar.is-2 { animation-delay: .07s; }
  .about6 .about-careers_value:hover .i-bar.is-3 { animation-delay: .14s; }
  .about6 .about-careers_value:hover .i-bolt { animation: about6-bolt .55s cubic-bezier(.2, .8, .3, 1); }
  .about6 .about-careers_value:hover .i-wave { animation: about6-wave .7s cubic-bezier(.2, .7, .3, 1) both; }
  .about6 .about-careers_value:hover .i-wave.is-2 { animation-delay: .14s; }
}
@keyframes about6-star { 40% { transform: rotate(72deg) scale(1.18); } 100% { transform: rotate(72deg) scale(1); } }
@keyframes about6-ray { 0% { opacity: 0; transform: translateY(3px) scaleY(.2); } 60% { opacity: 1; transform: translateY(-1.5px) scaleY(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes about6-bar { 45% { transform: translateY(-2.5px); } }
@keyframes about6-bolt { 0% { opacity: 0; transform: translate(3px, -9px); } 35% { opacity: 1; transform: translate(-.5px, 1.5px); } 55% { opacity: .35; } 70% { opacity: 1; transform: none; } }
@keyframes about6-wave { 0% { opacity: 0; transform: translateX(-3px) scale(.6); } 55% { opacity: 1; transform: translateX(1px) scale(1.06); } 100% { opacity: 1; transform: none; } }

/* ---------- Revision 13: depth. A hairline edge round the page, and two more sheets of the stack showing past its
   top and right edges. Built from hard drop-shadows so they follow the torn outline and the fold on their own. ---------- */
.about6 .about-hero_piece.is-sheet,
.is-pinned .about6-hero_desk .about-hero_piece.is-sheet {
  filter:
    drop-shadow(0 0 .5px rgba(40, 30, 15, .7))
    drop-shadow(calc(5 * var(--u)) calc(-5 * var(--u)) 0 #e6e1d7)
    drop-shadow(0 0 .5px rgba(40, 30, 15, .55))
    drop-shadow(calc(5 * var(--u)) calc(-5 * var(--u)) 0 #d2ccc0)
    drop-shadow(0 0 .5px rgba(40, 30, 15, .5))
    drop-shadow(0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .5));
}
/* A lit inner edge on the page itself. */
.about6 .about-hero_paper, .is-pinned .about6-hero_desk .about-hero_paper { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 0 0 1.5px rgba(60, 45, 20, .1); }

/* ---------- Footer cursors: a smear behind each one while it is moving fast ---------- */
.footer_cursor-box { position: relative; }
.footer_ghost { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* ---------- Revision 15: the page as a letter. Softer, rounder, real paper relief and a faint dot grid. ---------- */
.about6 .about-hero_paper, .is-pinned .about6-hero_desk .about-hero_paper {
  background: radial-gradient(circle, rgba(28, 29, 31, .13) calc(.75 * var(--u)), rgba(28, 29, 31, 0) calc(1.25 * var(--u))) calc(11 * var(--u)) calc(11 * var(--u)) / calc(22 * var(--u)) calc(22 * var(--u)), #fffdfa;
  box-shadow: none;
}
.about6 .about-hero_paper::before, .about6 .about-hero_piece.is-back::before, .about6-fold_face.is-back::before {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='p'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.07'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeDiffuseLighting%20lighting-color='%23fff'%20surfaceScale='1.6'%20diffuseConstant='1'%3E%3CfeDistantLight%20azimuth='40'%20elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23p%29'/%3E%3C/svg%3E") 0 0 / calc(320 * var(--u)) auto; mix-blend-mode: multiply; opacity: .55;
}
.about6-fold_face.is-back { background: #f6f3ec; }
.about6-under { clip-path: inset(0 0 78% 52% round 0 calc(30 * var(--u)) 0 0); }
.about6 .about-hero_piece.is-sheet, .about6-fold_face { border-top-right-radius: calc(30 * var(--u)); }
.about6 .about-hero_piece.is-sheet,
.is-pinned .about6-hero_desk .about-hero_piece.is-sheet {
  filter:
    drop-shadow(0 0 .5px rgba(40, 30, 15, .55))
    drop-shadow(calc(4 * var(--u)) calc(-4 * var(--u)) 0 #ece8df)
    drop-shadow(0 0 .5px rgba(40, 30, 15, .4))
    drop-shadow(calc(4 * var(--u)) calc(-4 * var(--u)) 0 #dcd6cb)
    drop-shadow(0 0 .5px rgba(40, 30, 15, .35))
    drop-shadow(0 calc(8 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .38));
}

/* ---------- Revision 16: performance. The page lagged because the sheet carried six drop-shadow filters and a
   blended texture, which the browser had to recompute on every frame of the fold. The stack of sheets and the
   shadow are now ordinary boxes, the texture is laid on without blending, and nothing here uses a filter. ---------- */
.about6 .about-hero_piece.is-sheet,
.is-pinned .about6-hero_desk .about-hero_piece.is-sheet { filter: none; will-change: transform; }
.about6 .about-hero_paper::before, .about6 .about-hero_piece.is-back::before, .about6-fold_face.is-back::before { mix-blend-mode: normal; opacity: .42; }
.about6-stack { position: absolute; inset: 0; border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; pointer-events: none; transition: opacity .25s ease-out; }
.about6-stack.is-1 { translate: calc(4 * var(--u)) calc(-4 * var(--u)); background: #ece8df; box-shadow: 0 0 0 .5px rgba(40, 30, 15, .4); }
.about6-stack.is-2 { translate: calc(8 * var(--u)) calc(-8 * var(--u)); background: #dcd6cb; box-shadow: 0 0 0 .5px rgba(40, 30, 15, .35), 0 calc(8 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .4); }
.about6-fold_panel.is-bottom { box-shadow: 0 0 calc(34 * var(--u)) rgba(0, 0, 0, .36); }
.about6-fold_face.is-back { box-shadow: inset 0 0 0 .5px rgba(60, 45, 20, .2), 0 0 calc(24 * var(--u)) rgba(0, 0, 0, .3); }
.about6 [data-about-words] span { will-change: opacity; }
/* The photo keeps one corner radius while it grows; it ends a little past the screen edges so the corners are out of
   sight, instead of the radius being rewritten on every frame. */
.about6-hero_pin.is-pinned .about3-hero_media { border-radius: 4.2rem; }

/* ---------- v7: a letter out of an envelope. The page is the v6 letter without the tear or the fold. ---------- */
.about7 .about6-rim, .about7 .about6-under, .about7 .about6-fold, .about7 .about6-stack { display: none; }
.about7 .about-hero_paper { overflow: hidden; border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; }
.about7 .is-pinned .about-hero_paper::after { content: none; }
.about7 .about-hero_paper, .about7 .is-pinned .about6-hero_desk .about-hero_paper { box-shadow: 0 0 0 .5px rgba(40, 30, 15, .4), 0 calc(8 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .34); }
.about7-env { display: none; }
.is-pinned .about7-env { display: block; position: absolute; left: calc(171.5 * var(--u)); width: calc(640 * var(--u)); will-change: transform; }
/* the inside of the envelope, seen above the pocket and behind the letter */
.is-pinned .about7-env.is-back { top: calc(452 * var(--u)); height: calc(240 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: linear-gradient(180deg, #d9d2c5, #cbc3b4); box-shadow: inset 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(40, 30, 15, .22); }
/* the front pocket: two side flaps and the bottom flap that meets them under the seal */
.is-pinned .about7-env.is-front { top: calc(478 * var(--u)); height: calc(215 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20200'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='s'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ebe6dc'/%3E%3Cstop%20offset='1'%20stop-color='%23f3efe7'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='b'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fdfbf7'/%3E%3Cstop%20offset='1'%20stop-color='%23f4f0e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='640'%20height='200'%20fill='url%28%23s%29'/%3E%3Cpath%20d='M0%200%20L320%2096%20L640%200'%20fill='none'%20stroke='%233c2d14'%20stroke-opacity='.10'%20stroke-width='1.2'/%3E%3Cpath%20d='M0%20200%20L0%20196%20L296%2082%20Q320%2073%20344%2082%20L640%20196%20L640%20200%20Z'%20fill='url%28%23b%29'%20stroke='%233c2d14'%20stroke-opacity='.14'/%3E%3C/svg%3E") center / 100% 100% no-repeat; box-shadow: 0 calc(-6 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .22), inset 0 0 0 .5px rgba(60, 45, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .8); overflow: visible; }
.is-pinned .about7-env.is-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='p'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.07'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeDiffuseLighting%20lighting-color='%23fff'%20surfaceScale='1.6'%20diffuseConstant='1'%3E%3CfeDistantLight%20azimuth='40'%20elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23p%29'/%3E%3C/svg%3E") 0 0 / calc(320 * var(--u)) auto; opacity: .4; pointer-events: none; }
/* the wax seal, pressed with the Dreamteam mark */
.about7-seal { position: absolute; left: 50%; top: calc(88 * var(--u)); width: calc(96 * var(--u)); height: calc(96 * var(--u)); transform: translate(-50%, -50%); border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%; will-change: transform, opacity;
  background: radial-gradient(circle at 34% 28%, #ff7a5f 0%, #ea3b25 34%, #c42616 68%, #96170e 100%);
  box-shadow: inset 0 calc(-5 * var(--u)) calc(9 * var(--u)) rgba(70, 0, 0, .5), inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(255, 190, 170, .45), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .32), 0 1px 1px rgba(0, 0, 0, .3); }
.about7-seal::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #f0452f, #b82015 85%); box-shadow: inset 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(70, 0, 0, .6), 0 calc(1.5 * var(--u)) 0 rgba(255, 170, 150, .5); }
.about7-seal::after { content: ""; position: absolute; inset: 27% 25%; background: #7d100a; -webkit-mask: url("../assets/mark-plain.svg") center / contain no-repeat; mask: url("../assets/mark-plain.svg") center / contain no-repeat; filter: drop-shadow(0 calc(1 * var(--u)) 0 rgba(255, 160, 140, .55)); }

/* ---------- Careers: close the gap under the pinned headline. The headline sits mid-screen when its scene ends, which
   left half a screen empty before the paragraph. The careers section now starts 30vh early, and the headline sits a touch below centre, so the paragraph rises
   into that space during the last part of the scene (after the dark circle has filled the screen). ---------- */
.about6 .section_about3-open:has(.is-pinned) + .section_about-careers { position: relative; z-index: 1; margin-top: -30vh; }
.about6 .is-pinned .about3-open_title { top: 4vh; }