/* ==========================================================================
   About (sections/about.php, assets/js/about.js): the story, then the licences, on the site's night ground with the
   hero film's survey grid (as the map's sea and the fields' floor), the heads where every section has them.
   Animated mode: each part's stage is pinned for its run (--ab-l1, --ab-l2: set by about.js). The script sets on each
   word its light (--o), on the mark's letters theirs (--l), on the pictures their place, turn and second picture (--px,
   --ry, --x2), on the glow its place (--gx), on each year its light (--on) and on the line its length (--p), on the row
   of licences its place, on each card its turn (--ry). Only opacity and transforms change while scrolling.
   ========================================================================== */
.ab { --bg: #05080B; position: relative; z-index: 3; background: var(--bg); color: var(--white); }
.ab__gate { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.ab__gate--end { top: var(--ab-l2, 300vh); }
html:not(.js) .ab__gate, html.gr-static .ab__gate { display: none; }

/* ---------- the ground: the survey grid, fading to the edges, a grain over it ---------- */
.ab__stage, .ab__cstage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; overflow: clip; background: linear-gradient(#05080B, #070C10); }
.ab__ground { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ab__ground::before {   /* the sky: a faint light from above the head, and the dark coming down to the horizon */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 0%, rgb(91 230 198 / .07), transparent 70%), radial-gradient(90% 40% at 50% 62%, rgb(91 230 198 / .06), transparent 70%);
}
.ab__floor {   /* the survey floor in perspective, the fields' floor and the hero film's grid: drawn once (about.js), flat */
  position: absolute; left: 0; top: 59%; width: 100%; height: 41%; overflow: visible;
  -webkit-mask: linear-gradient(to top, #000 0%, rgb(0 0 0 / .6) 45%, transparent 100%); mask: linear-gradient(to top, #000 0%, rgb(0 0 0 / .6) 45%, transparent 100%);
}
.ab__horizon { position: absolute; left: 0; right: 0; top: 59%; height: 1px; background: linear-gradient(90deg, transparent, rgb(91 230 198 / .35), transparent); box-shadow: 0 0 24px 2px rgb(91 230 198 / .18); }
.ab__stage::after, .ab__cstage::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ab__glow {   /* a light behind the pictures, where they are */
  position: absolute; z-index: 0; top: 8%; left: 0; width: 56vw; height: 84%; pointer-events: none; will-change: transform; transform: translateX(var(--gx, 60vw));
  background: radial-gradient(closest-side, rgb(91 230 198 / .11), rgb(255 150 70 / .05) 55%, transparent);
}

/* ---------- heads, as in every section ---------- */
.ab__head { position: absolute; z-index: 5; top: calc(var(--header-h) + 26px); inset-inline-start: var(--gutter); max-width: 560px; }
.ab__mark { display: flex; direction: ltr; justify-content: flex-end; color: var(--wire); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.ab__mark span { display: inline-block; opacity: var(--l, 1); transform: translateY(calc((1 - var(--l, 1)) * 12px)); }
.ab__kicker { color: var(--wire); font-size: 13px; font-weight: 750; }
.ab__title { margin-top: 6px; font-size: clamp(32px, 3.8vw, 62px); font-weight: 300; line-height: 1.25; }
.ab__lead { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }

/* ---------- 1. the story ---------- */
.ab__story { position: relative; }
html.js:not(.gr-static) .ab__story { height: calc(100vh + var(--ab-l1, 280vh)); height: calc(100svh + var(--ab-l1, 280vh)); }
html.js:not(.gr-static) .ab__stage { position: sticky; top: 0; perspective: 1100px; }
.ab__text { position: absolute; z-index: 2; top: 31vh; width: min(34vw, 600px); }
.ab__text--a { left: var(--gutter); }
.ab__text--b { right: var(--gutter); z-index: 4; }
.ab__words { font-size: clamp(22px, 2.15vw, 36px); font-weight: 300; line-height: 1.7; }
html.js:not(.gr-static) .ab__words .w { opacity: var(--o, 0); transition: opacity .15s linear; }
.ab__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-top: 28px; padding-inline: 18px; border-radius: 999px;
  color: var(--white); font-size: 13.5px; font-weight: 750; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(91 230 198 / .4); background: rgb(91 230 198 / .06);
  opacity: var(--co, 1); transition: background-color .3s, color .3s;
}
.ab__chip:hover { background: var(--wire); color: var(--ink); }
.ab__chip .ico { width: 16px; height: 16px; }
.ab__chip:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }
/* the pictures: two frames standing turned in space (so each is a skewed four-sided shape, as on the reference) */
.ab__pics { position: absolute; z-index: 3; top: calc(var(--header-h) + 13vh); left: 0; width: 44vw; height: 62vh; transform: translateX(var(--px, 100vw)); transform-style: preserve-3d; will-change: transform; }
.ab__frame { position: absolute; margin: 0; overflow: hidden; border-radius: 30px; background: #0B1118; box-shadow: 0 60px 100px -40px rgb(0 0 0 / .9); backface-visibility: hidden; }
.ab__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(91 230 198 / .18); }
.ab__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab__frame-b { opacity: var(--x2, 0); }
.ab__frame--1 { right: 0; top: 0; width: 60%; height: 94%; transform: rotateY(var(--ry, -24deg)) rotateX(7deg) rotateZ(-5deg); }
.ab__frame--2 { left: 0; bottom: -2%; width: 40%; height: 56%; transform: translateZ(-40px) rotateY(calc(var(--ry, -24deg) * 1.25)) rotateX(-9deg) rotateZ(6deg); }
/* the years, along the bottom (clear of the next-section pill) */
.ab__years { position: absolute; z-index: 4; left: var(--gutter); right: calc(var(--gutter) + 300px); bottom: 26px; display: flex; gap: 18px; margin: 0; padding: 20px 0 0; list-style: none; }
.ab__years-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgb(255 255 255 / .12); }
.ab__years-line i { display: block; height: 100%; background: linear-gradient(to left, var(--wire), rgb(91 230 198 / .4)); transform: scaleX(var(--p, 0)); transform-origin: right; }
[dir="ltr"] .ab__years-line i { transform-origin: left; }
.ab__year { position: relative; flex: 1; min-width: 0; display: grid; gap: 2px; opacity: calc(.32 + .68 * var(--on, 0)); transition: opacity .5s; }
.ab__year::before { content: ""; position: absolute; top: -24px; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px rgb(91 230 198 / calc(.35 + .65 * var(--on, 0))), 0 0 12px rgb(91 230 198 / calc(var(--on, 0) * .8)); }
.ab__year b { color: var(--amber); font-size: 15px; font-weight: 800; }
.ab__year strong { font-size: 13px; font-weight: 750; }
.ab__year span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgb(255 255 255 / .55); font-size: 11.5px; line-height: 1.7; }

/* ---------- 2. the licences ---------- */
.ab__certs { position: relative; }
html.js:not(.gr-static) .ab__certs { height: calc(100vh + var(--ab-l2, 300vh)); height: calc(100svh + var(--ab-l2, 300vh)); }
html.js:not(.gr-static) .ab__cstage { position: sticky; top: 0; perspective: 1200px; }
.ab__track { position: absolute; z-index: 2; top: 0; left: 0; display: flex; width: max-content; height: 100%; margin: 0; padding: 0; list-style: none; direction: ltr; will-change: transform; transform: translateX(var(--tx, 50vw)); }
.crt { --slot: 27vw; --cw: clamp(220px, 18.5vw, 330px); position: relative; flex: none; width: var(--slot); height: 100%; direction: rtl; }
.crt:nth-child(6n+1) { --y: 50%; --rz: -2deg; } .crt:nth-child(6n+2) { --y: 57%; --rz: 1.5deg; } .crt:nth-child(6n+3) { --y: 48%; --rz: -1.5deg; }
.crt:nth-child(6n+4) { --y: 58%; --rz: 2deg; } .crt:nth-child(6n+5) { --y: 49%; --rz: -2deg; } .crt:nth-child(6n+6) { --y: 56%; --rz: 1.5deg; }
.crt__card {
  position: absolute; top: var(--y); left: 50%; width: var(--cw); aspect-ratio: 3 / 4; margin-left: calc(var(--cw) / -2); padding: 0; border: 0; border-radius: 10px;
  background: #0B1118; cursor: pointer; will-change: transform; transform: translateY(-50%) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
  box-shadow: 0 46px 70px -34px rgb(0 0 0 / .95); transition: box-shadow .4s;
}
.crt__card::before {   /* a thin gold frame a little off the paper; it never changes, so it is painted once */
  content: ""; position: absolute; inset: -7px; border-radius: 15px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, #8A6224, #F1D58C 30%, #FFF3C4 40%, #B8893A 58%, #6E4F1C 80%, #D7B062);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.crt__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.crt__card:hover { box-shadow: 0 46px 70px -34px rgb(0 0 0 / .95), 0 0 0 1px var(--wire), 0 0 40px rgb(91 230 198 / .25); }
.crt__card:focus-visible { outline: 2px solid var(--wire); outline-offset: 10px; }
.crt__n { position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 9px; border-radius: 999px; background: rgb(5 8 11 / .82); color: var(--wire); font-size: 11.5px; font-weight: 800; }
.crt__t, .crt__m { position: absolute; left: 50%; width: calc(var(--cw) + 60px); margin-left: calc(var(--cw) / -2 - 30px); text-align: center; }
.crt__t { top: calc(var(--y) + var(--cw) * .667 + 22px); font-size: 14px; font-weight: 800; line-height: 1.6; }
.crt__m { top: calc(var(--y) + var(--cw) * .667 + 48px); color: rgb(255 255 255 / .55); font-size: 12px; }

/* ---------- the licence's window ---------- */
.cm {
  width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); padding: 0; border: 0; border-radius: 26px;
  background: #0B1118; color: var(--white); overflow: hidden; box-shadow: 0 60px 140px -40px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(255 255 255 / .08);
}
.cm::backdrop { background: rgb(3 6 9 / .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cm[open] { animation: cm-in .6s var(--ease-out); }
.cm[open]::backdrop { animation: cm-fade .4s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@keyframes cm-fade { from { opacity: 0; } }
.cm__item { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); max-height: inherit; }
.cm__item[hidden] { display: none; }
.cm__pic {
  display: grid; place-items: center; align-content: center; gap: 12px; margin: 0; padding: 34px; perspective: 900px;
  background: radial-gradient(80% 70% at 50% 40%, rgb(91 230 198 / .12), transparent 70%), linear-gradient(#0E151C, #070C10);
}
.cm__pic img { display: block; width: 100%; max-width: 380px; height: auto; max-height: calc(100svh - 160px); object-fit: contain; border-radius: 6px; box-shadow: 0 40px 70px -30px #000, 0 0 0 1px rgb(255 255 255 / .1); transform: rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); transition: transform .35s var(--ease-out); }
.cm__pic figcaption { color: rgb(255 255 255 / .45); font-size: 11.5px; text-align: center; }
.cm__in { padding: 48px 40px 36px; overflow: auto; overscroll-behavior: contain; }
.cm__by { color: var(--wire); font-size: 12.5px; font-weight: 750; }
.cm__title { margin-top: 8px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.4; }
.cm__note { margin-top: 12px; color: rgb(255 255 255 / .72); font-size: 14.5px; line-height: 2; }
.cm__facts { margin: 20px 0 0; border-top: 1px solid rgb(255 255 255 / .08); }
.cm__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.cm__facts dt { flex: none; color: rgb(255 255 255 / .55); font-size: 13px; }
.cm__facts dd { margin: 0; font-size: 14px; font-weight: 700; text-align: end; }
.cm__more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.cm__more small { flex-basis: 100%; color: rgb(255 255 255 / .45); font-size: 11.5px; font-weight: 750; }
.cm__more span { padding: 4px 11px; border-radius: 999px; font-size: 12px; color: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.cm__x { position: absolute; z-index: 2; top: 16px; inset-inline-end: 16px; }
.cm__x button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: var(--white); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: transform .4s var(--ease-out), background-color .3s; }
.cm__x button:hover { background: rgb(255 255 255 / .16); transform: rotate(90deg); }
.cm__x svg { width: 18px; height: 18px; }
.cm__x button:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .ab__head { top: calc(var(--header-h) + 14px); inset-inline-end: var(--gutter); }
  .ab__title { font-size: clamp(28px, 8vw, 38px); }
  .ab__text { top: calc(var(--header-h) + 118px); left: var(--gutter); right: var(--gutter); width: auto; }
  .ab__words { font-size: clamp(19px, 5.2vw, 24px); }
  .ab__pics { top: auto; bottom: 150px; width: 82vw; height: 40vh; }
  .ab__text--b .ab__chip { display: none; }                      /* it would sit on the pictures; the licences come next anyway */
  .ab__glow { width: 100vw; }
  .ab__years { right: var(--gutter); bottom: 84px; gap: 10px; }
  .ab__year span { display: none; }
  .ab__year strong { font-size: 11.5px; }
  .ab__year b { font-size: 13px; }
  .crt { --slot: 72vw; --cw: 52vw; }
  .crt:nth-child(n) { --y: 50%; }
  .crt:nth-child(even) { --y: 56%; }
  .cm__item { grid-template-columns: 1fr; overflow: auto; }
  .cm__pic { padding: 56px 24px 16px; }
  .cm__pic img { max-height: 40vh; width: auto; }
  .cm__in { padding: 20px 22px 28px; overflow: visible; }
}

/* ---------- without the motion: the story side by side, the licences in a row that scrolls by itself ---------- */
html:not(.js) .ab__stage, html.gr-static .ab__stage { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: calc(var(--header-h) + 40px) var(--gutter) 60px; }
html:not(.js) .ab__head, html.gr-static .ab__head, html:not(.js) .ab__text, html.gr-static .ab__text, html:not(.js) .ab__pics, html.gr-static .ab__pics,
html:not(.js) .ab__years, html.gr-static .ab__years { position: relative; inset: auto; top: auto; width: auto; transform: none; }
html:not(.js) .ab__head, html.gr-static .ab__head { grid-column: 1 / -1; }
html:not(.js) .ab__text--a, html.gr-static .ab__text--a { grid-row: 2; grid-column: 1; }
html:not(.js) .ab__text--b, html.gr-static .ab__text--b { grid-row: 2; grid-column: 2; }
html:not(.js) .ab__pics, html.gr-static .ab__pics { grid-row: 3; grid-column: 1 / -1; height: 380px; }
html:not(.js) .ab__frame, html.gr-static .ab__frame { transform: none; }
html:not(.js) .ab__years, html.gr-static .ab__years { grid-row: 4; grid-column: 1 / -1; right: auto; }
html:not(.js) .ab__year, html.gr-static .ab__year { opacity: 1; }
html:not(.js) .ab__glow, html.gr-static .ab__glow { display: none; }
html:not(.js) .ab__cstage, html.gr-static .ab__cstage { height: auto; min-height: 0; padding: calc(var(--header-h) + 40px) 0 40px; }
html:not(.js) .ab__cstage .ab__head, html.gr-static .ab__cstage .ab__head { margin: 0 var(--gutter); }
html:not(.js) .ab__track, html.gr-static .ab__track { position: relative; width: auto; height: 560px; transform: none; overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 760px) {
  html:not(.js) .ab__stage, html.gr-static .ab__stage { grid-template-columns: 1fr; }
  html:not(.js) .ab__text--b, html.gr-static .ab__text--b { grid-row: 3; grid-column: 1; }
  html:not(.js) .ab__pics, html.gr-static .ab__pics { grid-row: 4; }
  html:not(.js) .ab__years, html.gr-static .ab__years { grid-row: 5; flex-wrap: wrap; }
}