/* Mesgona — site styles
   Palette comes from the logo: lime and leaf green, sky and royal blue,
   on a deep blue ink. Light "sheets" float above the 3D space. */

:root {
  --ink: #06141f;
  --ink-2: #0b2233;
  --ink-3: #133650;
  --paper: #f2f6f4;
  --paper-2: #ffffff;
  --paper-ink: #0a1f2e;
  --paper-muted: #4a6171;
  --text: #e6eff3;
  --muted: #a3b8c4;
  --line: rgba(170, 205, 225, 0.2);
  --line-paper: rgba(10, 31, 46, 0.14);
  --lime: #b8d432;
  --leaf: #6cbe45;
  --sky: #1fb1ea;
  --royal: #0c6cb8;
  --ribbon: linear-gradient(90deg, #b8d432 0%, #6cbe45 32%, #1fb1ea 68%, #3d9be6 100%);

  --display: "Syne", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gut: 20px;
  --hdr-h: 64px;
  --r-lg: 24px;
  --r-md: 14px;

  /* Colours that change with the surface (dark space or light sheet). */
  --fg: var(--text);
  --fg-muted: var(--muted);
  --rule: var(--line);
  --link: var(--sky);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* The brand palette is fixed, so light and dark mode look the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #06141f; --paper: #f2f6f4; }
}
:root[data-theme="dark"] { --ink: #06141f; --paper: #f2f6f4; }

@media (min-width: 600px) { :root { --gut: 32px; } }
@media (min-width: 980px) { :root { --gut: 48px; --hdr-h: 76px; } }

*, *::before, *::after { box-sizing: inherit; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  scroll-padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  background: #06141f;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture { display: block; max-width: 100%; }
img { height: auto; }
/* A word too long for a narrow screen wraps instead of running off the edge. */
h1, h2, h3 { font-family: var(--display); margin: 0; overflow-wrap: break-word; word-wrap: break-word; }
p { margin: 0 0 1em; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--link); text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a:focus, button:focus, input:focus, textarea:focus { outline: 2px solid var(--sky); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--leaf); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 1296px; margin: 0 auto;
  padding-left: var(--gut); padding-right: var(--gut);
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.wrap--narrow { max-width: 860px; }

/* ---------- the 3D space behind the page */

.space {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100%; height: 100lvh;
  pointer-events: none;
  opacity: 0; transition: opacity 0.9s ease;
}
.gl .space { opacity: 1; }

/* ---------- type */

h2 {
  font-weight: 700;
  font-size: 1.85rem;
  font-size: clamp(1.85rem, 1.1rem + 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.25; }

/* Section name, with the logo's twin lines in front of it. */
.label {
  display: flex; align-items: center;
  margin: 0 0 14px;
  font-weight: 600; font-size: 0.95rem;
  color: var(--fg-muted);
}
.label::before {
  content: ""; flex: 0 0 auto;
  width: 30px; height: 8px; margin-right: 12px;
  background:
    linear-gradient(var(--leaf), var(--leaf)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 2px no-repeat;
}

.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }

/* ---------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px;
  border: 0; border-radius: 999px;
  background: var(--leaf); color: var(--ink);
  font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--lime); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 8px 20px; font-size: 0.95rem; }

.round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.round:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--sky); }

.badge {
  display: inline-block; vertical-align: middle;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
  line-height: 1.5;
}
.badge--draft { background: #ffe9a8; color: #5a4200; }

/* ---------- header */

.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.hdr.is-solid, .menu-open .hdr {
  background: rgba(6, 20, 31, 0.96);
  box-shadow: 0 1px 0 var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hdr.is-solid { background: rgba(6, 20, 31, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.hdr__in {
  display: flex; align-items: center;
  height: var(--hdr-h);
  max-width: 1296px; margin: 0 auto;
  padding-left: var(--gut); padding-right: var(--gut);
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.hdr__logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; flex: 0 0 auto; }
.hdr__logo img { height: 36px; width: auto; }
.nav, .hdr__cta { display: none; }
.nav ul { display: flex; }
.nav li + li { margin-left: 30px; }
.nav a {
  display: inline-block; padding: 8px 0;
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  background: linear-gradient(var(--sky), var(--sky)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.25s ease;
}
.nav a:hover, .nav a:focus { background-size: 100% 2px; }
.hdr__cta { margin-left: 32px; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -10px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.burger__bars { position: relative; display: block; width: 26px; height: 12px; }
.burger__bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 0.3s ease, top 0.3s ease;
}
.burger__bars i:first-child { top: 0; background: var(--leaf); }
.burger__bars i:last-child { top: 10px; background: var(--sky); }
.burger[aria-expanded="true"] .burger__bars i:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:last-child { top: 5px; transform: rotate(-45deg); }

@media (min-width: 980px) {
  .nav, .hdr__cta { display: block; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .hdr__logo img { height: 42px; }
}

.menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ink);
  padding: 96px var(--gut) 32px;
  padding-top: calc(var(--hdr-h) + 28px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.menu__links li { border-bottom: 1px solid var(--line); }
.menu__links a {
  display: block; padding: 14px 0;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 1.9rem; font-size: clamp(1.7rem, 7.5vw, 2.5rem); line-height: 1.2;
  color: var(--text); text-decoration: none;
}
.menu-open, .modal-open { overflow: hidden; }

/* ---------- social links */

.social { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.social li { margin: 6px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--fg); text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.social a:hover { border-color: var(--sky); color: var(--sky); }
.social a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.social--named a { width: auto; padding: 0 18px 0 14px; border-radius: 999px; }
.social--named a span { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-left: 10px; font-weight: 500; font-size: 0.95rem; }
.social--menu { margin-top: 32px; }

/* ---------- hero */

.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--hdr-h) + 16px) 0 48px;
}
.hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__bg picture img { opacity: 0.62; }
/* A light veil keeps the words readable and blends the bottom into the next section. */
.hero__bg::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(6, 20, 31, 0.5) 0%, rgba(6, 20, 31, 0.12) 30%, rgba(6, 20, 31, 0.3) 70%, #06141f 100%);
}
@media (max-width: 899px) {
  /* on phones the words sit over the busiest part of the picture, so the veil is a little stronger there */
  .hero__bg::after {
    background: linear-gradient(180deg, rgba(6, 20, 31, 0.45) 0%, rgba(6, 20, 31, 0.1) 26%, rgba(6, 20, 31, 0.4) 56%, rgba(6, 20, 31, 0.62) 80%, #06141f 100%);
  }
}
/* Light running through the circuits. Each beam is a full-size layer holding a picture of only the
   glowing traces, seen through a soft slanted band. The layer slides one way and its picture slides
   back by the same amount, so the traces stay exactly on top of the background while the band of
   light travels across them. Only transforms move, so it stays smooth on phones. */
.hero__beams, .beam, .beam__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.beam { will-change: transform; }
.beam__img { will-change: transform; }
.beam--a {
  -webkit-mask-image: linear-gradient(104deg, rgba(0, 0, 0, 0) 36%, #000 49%, #000 51%, rgba(0, 0, 0, 0) 64%);
  mask-image: linear-gradient(104deg, rgba(0, 0, 0, 0) 36%, #000 49%, #000 51%, rgba(0, 0, 0, 0) 64%);
  -webkit-animation: beam-out 9s linear infinite; animation: beam-out 9s linear infinite;
}
.beam--a .beam__img { -webkit-animation: beam-back 9s linear infinite; animation: beam-back 9s linear infinite; }
.beam--b {
  -webkit-mask-image: linear-gradient(82deg, rgba(0, 0, 0, 0) 42%, #000 50%, rgba(0, 0, 0, 0) 58%);
  mask-image: linear-gradient(82deg, rgba(0, 0, 0, 0) 42%, #000 50%, rgba(0, 0, 0, 0) 58%);
  -webkit-animation: beam-out 6.2s linear -2.5s infinite; animation: beam-out 6.2s linear -2.5s infinite;
}
.beam--b .beam__img { -webkit-animation: beam-back 6.2s linear -2.5s infinite; animation: beam-back 6.2s linear -2.5s infinite; }
/* the third runs the other way, and up and down as well */
.beam--c {
  -webkit-mask-image: linear-gradient(158deg, rgba(0, 0, 0, 0) 38%, #000 50%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(158deg, rgba(0, 0, 0, 0) 38%, #000 50%, rgba(0, 0, 0, 0) 62%);
  -webkit-animation: beam-out 13s linear -6s infinite reverse; animation: beam-out 13s linear -6s infinite reverse;
}
.beam--c .beam__img { -webkit-animation: beam-back 13s linear -6s infinite reverse; animation: beam-back 13s linear -6s infinite reverse; }
@-webkit-keyframes beam-out { from { -webkit-transform: translate3d(-80%, 0, 0); } to { -webkit-transform: translate3d(80%, 0, 0); } }
@keyframes beam-out { from { transform: translate3d(-80%, 0, 0); } to { transform: translate3d(80%, 0, 0); } }
@-webkit-keyframes beam-back { from { -webkit-transform: translate3d(80%, 0, 0); } to { -webkit-transform: translate3d(-80%, 0, 0); } }
@keyframes beam-back { from { transform: translate3d(80%, 0, 0); } to { transform: translate3d(-80%, 0, 0); } }
/* The light rests while the top of the page is out of sight. */
.is-away .beam, .is-away .beam__img { -webkit-animation-play-state: paused; animation-play-state: paused; }
/* Less motion asked for: no travelling light, just a faint steady glow on the traces. */
.calm .beam--b, .calm .beam--c { display: none; }
.calm .beam--a { -webkit-mask-image: none; mask-image: none; opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
  .beam--b, .beam--c { display: none; }
  .beam--a { -webkit-mask-image: none; mask-image: none; opacity: 0.3; }
}
.hero__in { display: flex; flex-direction: column; }
.hero__stage {
  order: -1; position: relative; width: 100%;
  height: 36vh; min-height: 210px; max-height: 330px; margin-bottom: 20px;
}
.hero__mark {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
.hero__mark img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.gl .hero__mark { opacity: 0; }

.hero__title { margin: 0 0 14px; max-width: 100%; font-weight: 800; }
/* The name, on one line. The heading font is very wide at this weight: "Mesgona" is about
   seven times the font size across. These sizes keep it inside its column at every screen
   width; the script also shrinks it to fit if the name is ever changed to something longer. */
.hero__brand {
  display: block; white-space: nowrap;
  font-size: 2.6rem; font-size: clamp(2.2rem, 11.8vw, 4.5rem);
  line-height: 0.95; letter-spacing: -0.035em;
}
.hero__tag { color: #c3d3dc; font-size: 1.1rem; margin: 0 0 28px; max-width: 34ch; }
/* the words stay readable over the brighter background */
.hero__brand, .hero__tag { text-shadow: 0 2px 18px rgba(6, 20, 31, 0.9), 0 0 2px rgba(6, 20, 31, 0.6); }
.nowrap { white-space: nowrap; }
/* A tiny neon-pink sphere, the size of the letter o, sitting on the line after the last word. */
.pinkdot {
  display: inline-block; width: 0.54em; height: 0.54em; margin-left: 0.34em; border-radius: 50%;
  background: #ff4fb6;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #ffc9e8 14%, #ff5cba 44%, #e5178f 76%, #9e0d66 100%);
  box-shadow: 0 0 4px #ff9ad6, 0 0 10px #ff3fae, 0 0 22px rgba(255, 63, 174, 0.8), 0 0 42px rgba(255, 63, 174, 0.45);
  -webkit-animation: pinkdot 2.6s ease-in-out infinite; animation: pinkdot 2.6s ease-in-out infinite;
}
@-webkit-keyframes pinkdot {
  0%, 100% { -webkit-transform: scale(1); box-shadow: 0 0 4px #ff9ad6, 0 0 10px #ff3fae, 0 0 22px rgba(255, 63, 174, 0.8), 0 0 42px rgba(255, 63, 174, 0.45); }
  50% { -webkit-transform: scale(1.12); box-shadow: 0 0 6px #ffc2e6, 0 0 16px #ff3fae, 0 0 34px rgba(255, 63, 174, 0.95), 0 0 60px rgba(255, 63, 174, 0.6); }
}
@keyframes pinkdot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 4px #ff9ad6, 0 0 10px #ff3fae, 0 0 22px rgba(255, 63, 174, 0.8), 0 0 42px rgba(255, 63, 174, 0.45); }
  50% { transform: scale(1.12); box-shadow: 0 0 6px #ffc2e6, 0 0 16px #ff3fae, 0 0 34px rgba(255, 63, 174, 0.95), 0 0 60px rgba(255, 63, 174, 0.6); }
}

/* The hiring sign: a round neon light at the very top while a job is open. */
.neon { display: inline-flex; align-items: center; margin: 0 0 22px; color: var(--text); text-decoration: none; }
.neon__sign {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 50%;
  background: rgba(6, 20, 31, 0.72);
  background: radial-gradient(circle at 50% 42%, rgba(184, 212, 50, 0.2), rgba(6, 20, 31, 0.78) 70%);
  border: 3px solid #dcf763;
  box-shadow: 0 0 5px #dcf763, 0 0 16px #b8d432, 0 0 42px rgba(184, 212, 50, 0.7), inset 0 0 12px rgba(184, 212, 50, 0.6);
  font-family: var(--body); font-weight: 600; text-transform: uppercase; line-height: 1;
  -webkit-transform-origin: 50% -34%; transform-origin: 50% -34%;
  -webkit-animation: neon-on 2.2s linear 0.4s both, neon-buzz 7s linear 3.2s infinite, neon-swing 5.5s ease-in-out infinite;
  animation: neon-on 2.2s linear 0.4s both, neon-buzz 7s linear 3.2s infinite, neon-swing 5.5s ease-in-out infinite;
}
/* a second tube inside the first, in the logo's blue */
.neon__ring {
  position: absolute; top: 7px; left: 7px; right: 7px; bottom: 7px; border-radius: 50%;
  border: 2px solid #8fdcff;
  box-shadow: 0 0 5px #8fdcff, 0 0 13px #1fb1ea, inset 0 0 8px rgba(31, 177, 234, 0.55);
  -webkit-animation: neon-buzz 5.3s linear 1.4s infinite; animation: neon-buzz 5.3s linear 1.4s infinite;
}
/* a spark of light that runs round the rim */
.neon__sign::after {
  content: ""; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 285deg, rgba(255, 255, 255, 0.95) 345deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-animation: neon-spin 3.2s linear infinite; animation: neon-spin 3.2s linear infinite;
}
.neon__word { position: relative; white-space: nowrap; }
.neon__word--a {
  font-size: 1.12rem; letter-spacing: 0.07em; color: #f8ffdc;
  text-shadow: 0 0 2px #fff, 0 0 8px #dcf763, 0 0 18px #b8d432, 0 0 36px #6cbe45;
}
.neon__word--b {
  margin-top: 6px; font-size: 1.42rem; letter-spacing: 0.16em; margin-right: -0.16em; color: #eafaff;
  text-shadow: 0 0 2px #fff, 0 0 8px #8fdcff, 0 0 18px #1fb1ea, 0 0 36px #0c6cb8;
}
.neon:hover .neon__sign { -webkit-filter: brightness(1.25); filter: brightness(1.25); }
.neon__note { display: none; }
@-webkit-keyframes neon-on { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: 0.15; } 14% { opacity: 1; } 17% { opacity: 0.3; } 22% { opacity: 1; } 30% { opacity: 0.6; } 34%, 100% { opacity: 1; } }
@keyframes neon-on { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: 0.15; } 14% { opacity: 1; } 17% { opacity: 0.3; } 22% { opacity: 1; } 30% { opacity: 0.6; } 34%, 100% { opacity: 1; } }
@-webkit-keyframes neon-buzz { 0%, 90.5%, 93.5%, 96.5%, 100% { opacity: 1; } 92% { opacity: 0.4; } 95% { opacity: 0.7; } }
@keyframes neon-buzz { 0%, 90.5%, 93.5%, 96.5%, 100% { opacity: 1; } 92% { opacity: 0.4; } 95% { opacity: 0.7; } }
@-webkit-keyframes neon-swing { 0%, 100% { -webkit-transform: rotate(-3.5deg); } 50% { -webkit-transform: rotate(3.5deg); } }
@keyframes neon-swing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@-webkit-keyframes neon-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes neon-spin { to { transform: rotate(360deg); } }
/* On phones the sign hangs at the top left, over the corner of the logo, so it takes little room. */
@supports (display: contents) {
  @media (max-width: 899px) {
    .hero__in { align-items: flex-start; }
    .hero__copy { display: contents; }
    .neon { order: -2; position: relative; z-index: 2; margin: 0 0 -78px; }
  }
}
@media (min-width: 900px) {
  .neon { margin-bottom: 26px; }
  .neon__sign { width: 128px; height: 128px; }
  .neon__ring { top: 8px; left: 8px; right: 8px; bottom: 8px; }
  .neon__word--a { font-size: 1.3rem; }
  .neon__word--b { font-size: 1.7rem; margin-top: 7px; }
  /* beside the sign: which job, and where the link goes */
  .neon__note { display: block; margin-left: 20px; line-height: 1.35; }
  .neon__note strong { display: block; font-weight: 600; }
  .neon__more { display: inline-flex; align-items: center; color: var(--lime); font-size: 0.95rem; }
  .neon__more svg { width: 16px; height: 16px; margin-left: 2px; transition: transform 0.2s ease; }
  .neon:hover .neon__more svg { -webkit-transform: translateX(4px); transform: translateX(4px); }
}

/* The rotating services: one word per face of a prism. */
.flip {
  display: block; margin-top: 12px;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  font-size: 1.5rem; font-size: clamp(1.4rem, 6.6vw, 2.5rem);
  color: var(--sky);
}
.flip__prism { display: block; }
.flip__face { display: block; white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .flip__face {
    background: var(--ribbon); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;
  }
}
/* With scripts on, only one face shows until the prism is built (no jump). */
.js:not(.calm) .flip { height: 1.2em; overflow: hidden; }
.js:not(.calm) .flip.is-3d { overflow: visible; -webkit-perspective: 700px; perspective: 700px; }
.flip.is-3d .flip__prism {
  position: relative; height: 100%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.flip.is-3d .flip__face {
  position: absolute; top: 0; left: 0; height: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* Only the word in front is shown. (Some browsers let the edge of the next word peek through.) */
  opacity: 0; transition: opacity 0.4s ease;
}
.flip.is-3d .flip__face.is-on { opacity: 1; }

@media (min-width: 900px) {
  .hero { padding-bottom: 64px; }
  .hero__in { flex-direction: row; align-items: center; }
  .hero__copy { flex: 0 0 44%; max-width: 44%; }
  .hero__stage { order: 0; flex: 1 1 auto; height: 68vh; min-height: 380px; max-height: 660px; margin: 0 0 0 4%; }
  .hero__brand { font-size: clamp(2.9rem, 5.4vw, 4.5rem); }
  .flip { font-size: clamp(1.7rem, 3.1vw, 2.7rem); margin-top: 16px; }
  .hero__tag { font-size: 1.25rem; margin-bottom: 36px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero__stage { height: 42vh; max-height: 460px; }
}
/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__stage { height: 150px; min-height: 0; }
}

/* ---------- sections */

.sec { position: relative; padding: 72px 0; padding: clamp(64px, 9vw, 128px) 0; }
.sec__head { margin-bottom: 28px; }
.sec__head h2 { margin-bottom: 0; max-width: 20ch; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.sec__head--row > div { margin-right: 24px; }
.sec__head--row .more { margin-top: 12px; }
.alias { position: absolute; top: 0; }

/* Panels ("sheets") float over the space. They are dark, like the rest of the site. */
.sheet {
  position: relative; z-index: 1;
  margin: 0 8px; margin: 0 clamp(6px, 1.4vw, 22px);
  background: #0b2233;
  background: linear-gradient(180deg, #0d283c 0%, #0a1e2e 100%);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 22px; border-radius: clamp(22px, 3vw, 40px);
}
.sheet .wrap { padding-left: calc(var(--gut) - 6px); padding-right: calc(var(--gut) - 6px); }
.sheet .sec + .sec { padding-top: 0; }

/* ---------- tilt: cards that turn towards the pointer */

.tilt { display: block; -webkit-perspective: 900px; perspective: 900px; }
.tilt__in {
  display: block; position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  will-change: transform;
}
.tilt.is-live .tilt__in { transition-duration: 0.08s; }
.is-flow .tilt__in { transition: none; }

/* ---------- about */

.about__grid { display: flex; flex-direction: column; }
/* on phones the picture sits in the middle, above the text */
.about__media { width: 62%; max-width: 300px; margin: 0 auto 36px; }
.about__media img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
}
.about__copy h2 { max-width: 19ch; }
.about__text { color: var(--muted); max-width: 62ch; margin-bottom: 28px; }
@media (min-width: 900px) {
  .about__grid { flex-direction: row; align-items: center; }
  .about__media { flex: 0 0 34%; width: 34%; max-width: 420px; margin: 0 7% 0 0; }
  .about__copy { flex: 1 1 0; min-width: 0; }
}

/* ---------- services */

.filter { display: none; flex-wrap: wrap; margin: 0 -5px 22px; }
.js .filter { display: flex; }
.chip {
  margin: 5px; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--fg); font-weight: 500; font-size: 0.95rem; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover { border-color: var(--fg); }
.chip.is-on { background: var(--leaf); border-color: var(--leaf); color: var(--ink); }

/* On phones the cards are a deck you swipe; on desktop a row of four. */
.deck {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gut) + 6px);
  padding: 10px calc(var(--gut) - 6px) 30px;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.scard { flex: 0 0 72%; max-width: 330px; margin-right: 20px; scroll-snap-align: center; }
.scard:last-child { margin-right: 0; }
.scard__btn { width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: var(--r-lg); }
.scard img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line);
}
.scard__title { margin-top: 18px; }
.scard__cat { margin: 4px 0 0; color: var(--fg-muted); font-size: 0.95rem; }
@media (min-width: 1000px) {
  .deck { overflow: visible; margin: 0 -14px; padding: 0; }
  .scard { flex: 0 0 25%; max-width: 25%; margin: 0; padding: 0 14px; }
}

/* ---------- the small AT&T mark: a little turning globe and the word */

.attlogo { display: flex; align-items: center; margin: 0 0 14px; color: var(--fg); }
.attlogo__ball { position: relative; flex: 0 0 auto; width: 56px; height: 56px; margin-right: 12px; }
.attlogo__ball canvas, .attlogo__still { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; }
/* Shown when the script is off: a still, striped ball. */
.attlogo__still {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(-12deg, #009fdb, #009fdb 10%, rgba(0, 159, 219, 0) 10%, rgba(0, 159, 219, 0) 16.6%);
}
.attlogo.is-live .attlogo__still { display: none; }
.attlogo__word {
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900;
  font-size: 2.3rem; line-height: 1; letter-spacing: -0.04em;
}
.attlogo__word::before { content: attr(data-t); }
@media (min-width: 900px) {
  .attlogo__ball { width: 68px; height: 68px; margin-right: 14px; }
  .attlogo__word { font-size: 2.9rem; }
}

/* ---------- products */

.pgrid { display: flex; flex-wrap: wrap; margin: -14px; }
.pcard { flex: 0 0 100%; max-width: 100%; padding: 14px; }
.pcard__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.pcard__media { position: relative; padding-top: 68%; }
.pcard__media .tilt__in { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pcard__media img, .pcard__blank {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg);
  box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line);
}
.pcard__blank { background: var(--ribbon); }
.pcard__text { display: block; padding-top: 18px; }
.pcard__text .badge { margin-bottom: 8px; }
.pcard__title { display: block; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.pcard__link:hover .pcard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.pcard__sum { display: block; margin-top: 6px; color: var(--fg-muted); }
.pcard__price { display: block; margin-top: 10px; font-weight: 600; font-size: 1.1rem; }
@media (min-width: 700px) {
  .pcard { flex-basis: 50%; max-width: 50%; }
  .pgrid--1 .pcard { flex-basis: 100%; max-width: 100%; }
  .pgrid--1 .pcard__link { display: flex; align-items: center; }
  .pgrid--1 .pcard__media { flex: 0 0 46%; padding-top: 31%; }
  .pgrid--1 .pcard__text { padding: 0 0 0 6%; }
  .pgrid--1 .pcard__title { font-size: 1.9rem; }
}
@media (min-width: 1000px) {
  .pgrid--3 .pcard { flex-basis: 33.333%; max-width: 33.333%; }
}
/* Square pictures (adverts, posters) are shown whole. */
.pcard--square .pcard__media { padding-top: 100%; }
@media (min-width: 700px) {
  .pgrid--1 .pcard--square .pcard__media { flex: 0 0 40%; padding-top: 40%; }
}

/* ---------- dealer: a turning globe that grows behind the text, and a 3D wordmark */

/* The globe is drawn on its own fixed layer, behind the text and above the floor. */
.globe-space {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100%; height: 100lvh;
  pointer-events: none;
}
.dealer__grid { display: flex; flex-direction: column; }
/* The globe's place on the page. Drag here to spin it. */
.globe {
  position: relative; width: 100%; max-width: 420px; margin: 0 auto 8px;
  touch-action: pan-y; cursor: grab; cursor: -webkit-grab;
  -webkit-user-select: none; user-select: none;
}
.globe::before { content: ""; display: block; padding-top: 100%; }
.globe.is-drag { cursor: grabbing; cursor: -webkit-grabbing; }
.globe__glow {
  position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; margin: -40% 0 0 -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 159, 219, 0.3) 0%, rgba(0, 159, 219, 0.12) 42%, rgba(0, 159, 219, 0) 70%);
}
/* Shown when 3D is not available: a still, striped sphere. */
.globe__still {
  position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(-12deg, #009fdb, #009fdb 9%, rgba(0, 159, 219, 0.08) 9%, rgba(0, 159, 219, 0.08) 14.2%);
  transition: opacity 0.6s ease;
}
.globe.is-live .globe__still { opacity: 0; }

.dealer__copy { text-shadow: 0 2px 22px rgba(6, 20, 31, 0.85); }
.dealer__copy .btn { text-shadow: none; }
.dealer__title { margin-bottom: 0.8em; }
.dealer__rest { display: block; }
.dealer__text { color: var(--muted); max-width: 56ch; margin-bottom: 24px; }

/* The wordmark: a stack of letter layers, so it has real depth when it turns. */
.mark3d {
  margin: 0 0 0.12em;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900;
  font-size: 4.6rem; font-size: clamp(4.4rem, 23vw, 7.2rem);
  line-height: 1; letter-spacing: -0.04em;
  text-shadow: none;
}
.mark3d .tilt__in { display: inline-block; }
.mark3d__in {
  display: inline-block; position: relative;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  -webkit-transform: rotateY(-22deg) rotateX(7deg); transform: rotateY(-22deg) rotateX(7deg);
  -webkit-animation: mark-sway 7s ease-in-out infinite alternate; animation: mark-sway 7s ease-in-out infinite alternate;
}
.mark3d__l {
  display: block; position: absolute; top: 0; left: 0; white-space: nowrap;
  -webkit-transform: translateZ(calc((6.5 - var(--i)) * 0.026em)); transform: translateZ(calc((6.5 - var(--i)) * 0.026em));
}
.mark3d__l::before { content: attr(data-t); }
.mark3d__l:first-child { text-shadow: 0 0 0.3em rgba(0, 159, 219, 0.6), 0.05em 0.12em 0.3em rgba(0, 0, 0, 0.55); }
.mark3d__l:last-child { position: relative; }
@-webkit-keyframes mark-sway {
  from { -webkit-transform: rotateY(-26deg) rotateX(8deg); }
  to { -webkit-transform: rotateY(26deg) rotateX(-4deg); }
}
@keyframes mark-sway {
  from { transform: rotateY(-26deg) rotateX(8deg); }
  to { transform: rotateY(26deg) rotateX(-4deg); }
}
@media (min-width: 900px) {
  .dealer__grid { flex-direction: row; align-items: center; }
  .globe { flex: 0 0 46%; max-width: 580px; margin: 0 5% 0 0; }
  .dealer__copy { flex: 1 1 0; min-width: 0; }
  .mark3d { font-size: clamp(6rem, 11vw, 10.5rem); }
}

/* ---------- skills */

/* the big globe passes behind this text, so the words get a dark edge to stay clear */
.skills { text-shadow: 0 1px 10px rgba(6, 20, 31, 0.92), 0 0 2px rgba(6, 20, 31, 0.7); }

.skills__grid { display: flex; flex-direction: column; }
.skills__copy p { color: var(--muted); max-width: 62ch; }
.years { margin-top: 28px; }
.years__row { position: relative; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.years__row dt { font-family: var(--display); font-weight: 600; font-size: 1.15rem; padding-right: 96px; }
.years__n { position: absolute; top: 17px; right: 0; color: var(--muted); font-size: 0.98rem; }
.years__track { display: block; height: 8px; margin-top: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.years__bar { display: block; height: 100%; border-radius: 8px; background: var(--ribbon); }
@media (min-width: 900px) {
  .skills__grid { flex-direction: row; align-items: center; }
  .skills__copy { flex: 1 1 0; min-width: 0; margin-right: 8%; }
  .years { flex: 0 0 40%; margin-top: 0; }
}

/* ---------- artistic vision: a portrait that arrives in 3D, in front of doors of light */

.vision {
  position: relative; z-index: 1; overflow: hidden; color: #fff;
  background: #06141f;
  background: radial-gradient(120% 95% at 70% 38%, #10395a 0%, #0b2233 40%, #06141f 80%);
}
/* Soft edges, so the section melts into the dark space above and below it. */
.vision::before, .vision::after { content: ""; position: absolute; left: 0; right: 0; height: 110px; pointer-events: none; }
.vision::before { top: 0; background: linear-gradient(180deg, #06141f, rgba(6, 20, 31, 0)); }
.vision::after { bottom: 0; background: linear-gradient(0deg, #06141f, rgba(6, 20, 31, 0)); }
.vision__space { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.vision__in { display: flex; flex-direction: column; padding-top: 64px; padding-bottom: 64px; }
.vision h2 { max-width: 17ch; margin-bottom: 28px; text-shadow: 0 2px 22px rgba(6, 20, 31, 0.85); }
.vision__stage {
  order: -1; width: 64%; max-width: 290px; margin: 0 auto 44px;
  -webkit-perspective: 1100px; perspective: 1100px;
}
.vision__card {
  position: relative;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  will-change: transform, opacity;
}
.vision__card::before { content: ""; display: block; padding-top: 137%; }
/* The picture sits in a door shape: round at the top. */
.vision__photo {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
  border-radius: 50% 50% 26px 26px / 36.5% 36.5% 26px 26px;
  background: #0b2233;
  box-shadow: 0 44px 80px -34px rgba(0, 0, 0, 0.85);
}
.vision__photo picture, .vision__photo img { width: 100%; height: 100%; }
.vision__photo img { object-fit: cover; object-position: 50% 14%; }
.vision__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(0deg, rgba(6, 20, 31, 0.7), rgba(6, 20, 31, 0));
}
/* A ring of the logo's colours, floating in front of the picture. */
.vision__frame {
  position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px;
  border-radius: 50% 50% 36px 36px / 37% 37% 36px 36px;
  border: 3px solid var(--sky);
  -webkit-transform: translateZ(48px); transform: translateZ(48px);
  pointer-events: none;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .vision__frame {
    border: 0; padding: 3px;
    background: linear-gradient(160deg, #b8d432 0%, #6cbe45 30%, #1fb1ea 70%, #3d9be6 100%);
    -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 exclude, linear-gradient(#000 0 0);
  }
}
.vision__halo {
  position: absolute; top: -6%; left: -20%; right: -20%; bottom: -6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 177, 234, 0.5), rgba(108, 190, 69, 0.2) 58%, rgba(31, 177, 234, 0) 100%);
  -webkit-transform: translateZ(-90px); transform: translateZ(-90px);
  -webkit-filter: blur(16px); filter: blur(16px);
}
/* Until the script takes over, keep the portrait out of sight so it does not jump. */
.js:not(.calm) .vision__card { opacity: 0; }
.play { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.play__disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-right: 16px; border-radius: 50%;
  background: var(--leaf); color: var(--ink);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.play:hover .play__disc { background: var(--lime); transform: scale(1.06); }
@media (min-width: 900px) {
  .vision__in { flex-direction: row; align-items: center; padding-top: 120px; padding-top: clamp(100px, 10vw, 150px); padding-bottom: 120px; padding-bottom: clamp(100px, 10vw, 150px); }
  .vision__copy { flex: 1 1 0; min-width: 0; }
  .vision__stage { order: 0; flex: 0 0 32%; width: 32%; max-width: 390px; margin: 0 7% 0 4%; }
}

/* ---------- partners: logos gliding sideways on a curved band */

/* A dark strip in the site's own colours, with a hairline above and below. */
.band {
  position: relative; z-index: 1; overflow: hidden;
  background: #081b29;
  background: linear-gradient(180deg, #0b2233 0%, #06141f 100%);
  border-top: 1px solid var(--line);
}
/* A soft glow across the whole strip: the logo's green on one side, its blue on the other. */
.band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background:
    radial-gradient(48% 130% at 36% 50%, rgba(108, 190, 69, 0.1), rgba(108, 190, 69, 0) 100%),
    radial-gradient(48% 130% at 64% 50%, rgba(31, 177, 234, 0.1), rgba(31, 177, 234, 0) 100%);
}
.partners { position: relative; padding: 30px 0; }
.marquee { position: relative; padding: 0 var(--gut); }
.logos { display: flex; flex-wrap: wrap; align-items: center; margin: -10px -12px; }
.logos li { flex: 0 0 33.333%; padding: 10px 12px; display: flex; justify-content: center; }
.logos img { width: auto; max-height: 54px; }
@media (min-width: 700px) { .logos li { flex-basis: 20%; } }
@media (min-width: 1100px) { .logos { flex-wrap: nowrap; } .logos li { flex: 1 1 0; } }
/* With the script on, the list becomes the moving band. */
.marquee.is-live { padding: 0; height: 104px; overflow: hidden; -webkit-perspective: 900px; perspective: 900px; }
.marquee.is-live::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--ribbon); opacity: 0.9; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.marquee.is-live .marquee__track {
  display: block; position: relative; margin: 0; height: 100%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.marquee.is-live .marquee__track li {
  position: absolute; top: 0; left: 0; width: 150px; height: 100%; padding: 0 14px;
  align-items: center; will-change: transform, opacity;
}
@media (min-width: 700px) {
  .marquee.is-live { height: 128px; }
  .marquee.is-live .marquee__track li { width: 216px; padding: 0 22px; }
  .marquee.is-live .logos img { max-height: 62px; }
}

/* ---------- quotes: one quote per face of a prism */

.quotes__grid { display: flex; flex-direction: column; }
.quotes__head { margin-bottom: 28px; }
.quotes__head h2 { max-width: 14ch; }
.prism-ctl { display: none; align-items: center; margin-top: 8px; }
.js .prism-ctl { display: flex; }
.prism-ctl .round + .round { margin-left: 10px; }
.prism-ctl__n { margin-left: 16px; color: var(--muted); font-size: 0.95rem; }
.prism { position: relative; -webkit-perspective: 1500px; perspective: 1500px; }
/* A thin line that fills while the quote is on screen, so you can see how long it stays. */
.prism__time { display: none; position: absolute; left: 24px; right: 24px; bottom: -14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.js .prism__time { display: block; }
.prism__time span { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ribbon); transition: width 0.2s linear; }
.prism__face {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 24px; margin-bottom: 16px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.prism__face blockquote p {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.01em;
  font-size: 1.3rem; font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.9rem); line-height: 1.25;
  margin: 0 0 28px;
}
.prism__face figcaption { display: flex; align-items: center; }
.prism__who-img { flex: 0 0 auto; margin-right: 14px; }
.prism__who-img img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.prism__who strong { display: block; font-weight: 600; }
.prism__who span { display: block; color: var(--muted); font-size: 0.93rem; line-height: 1.35; }
.js .prism:not(.is-3d) .prism__face + .prism__face { display: none; }
.prism.is-3d { touch-action: pan-y; }
.prism.is-3d .prism__body {
  position: relative;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.prism.is-3d .prism__face {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  opacity: 0; transition: opacity 0.6s ease;
}
.prism.is-3d .prism__face.is-front { opacity: 1; }
@media (min-width: 900px) {
  .quotes__grid { flex-direction: row; align-items: center; }
  .quotes__head { flex: 0 0 34%; margin: 0 6% 0 0; }
  .prism { flex: 1 1 0; min-width: 0; }
  .prism__face { padding: 44px 44px 40px; }
}

/* ---------- news */

.ngrid { display: flex; flex-wrap: wrap; margin: -14px; }
.ncard { flex: 0 0 100%; max-width: 100%; padding: 14px; }
.ncard__link { display: block; color: inherit; text-decoration: none; }
.ncard__media { display: block; position: relative; padding-top: 62%; overflow: hidden; border-radius: var(--r-lg); background: #0e2a3f; }
.ncard__media picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
.ncard__link:hover .ncard__media img { transform: scale(1.04); }
.ncard__text { display: block; padding-top: 18px; }
.ncard__date { display: block; color: var(--fg-muted); font-size: 0.93rem; }
.ncard__title { display: block; margin-top: 4px; font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.45rem; line-height: 1.15; }
.ncard__link:hover .ncard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.ncard__sum { display: block; margin-top: 8px; color: var(--fg-muted); }
@media (min-width: 800px) {
  .ngrid--2 .ncard, .ngrid--3 .ncard { flex-basis: 50%; max-width: 50%; }
  .ngrid--1 .ncard__link { display: flex; align-items: center; }
  .ngrid--1 .ncard__media { flex: 0 0 52%; padding-top: 34%; }
  .ngrid--1 .ncard__text { padding: 0 0 0 6%; }
  .ngrid--1 .ncard__title { font-size: 2.1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
}
@media (min-width: 1100px) {
  .ngrid--3 .ncard { flex-basis: 33.333%; max-width: 33.333%; }
}

/* ---------- careers */

.jobs { border-bottom: 1px solid var(--rule); }
.job { border-top: 1px solid var(--rule); }
.job__link { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 44px 20px 0; position: relative; color: inherit; text-decoration: none; }
.job__title { flex: 1 1 260px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; margin-right: 16px; }
.job__title .badge { margin-left: 6px; }
.job__meta { display: flex; flex-wrap: wrap; color: var(--fg-muted); font-size: 0.97rem; }
.job__meta span + span::before { content: "/"; margin: 0 10px; opacity: 0.5; }
.job__go { position: absolute; right: 4px; top: 50%; margin-top: -11px; transition: transform 0.2s ease; }
.job__link:hover .job__go { transform: translateX(5px); }
.job__link:hover .job__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.job--pic .job__link { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; padding: 26px 0; }
.job__media { display: block; width: 100%; max-width: 380px; margin-bottom: 20px; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line); }
.job__media img { width: 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
.job--pic .job__link:hover .job__media img { transform: scale(1.03); }
.job__body { display: block; min-width: 0; }
.job--pic .job__title { display: block; flex: none; margin: 0 0 8px; font-size: 1.6rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); letter-spacing: -0.015em; }
.job__sum { display: block; margin-top: 12px; color: var(--fg-muted); max-width: 52ch; }
.job__cta { display: inline-flex; align-items: center; margin-top: 16px; font-weight: 600; color: var(--link); }
.job__cta svg { margin-left: 4px; transition: transform 0.2s ease; }
.job--pic .job__link:hover .job__cta svg { transform: translateX(5px); }
@media (min-width: 700px) {
  .job--pic .job__link { flex-direction: row; align-items: center; }
  .job__media { flex: 0 0 320px; width: 320px; margin: 0 36px 0 0; }
}
.zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: var(--r-lg); }
.h-sm { font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 18px; }
.empty p { font-size: 1.2rem; max-width: 46ch; margin-bottom: 24px; }
.apply { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.apply p { margin: 14px 0 0; color: var(--fg-muted); }

/* ---------- contact */

.cta { position: relative; overflow: hidden; padding: 72px 0 56px; padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 88px); }
.cta__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta__bg::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #06141f 0%, rgba(6, 20, 31, 0.45) 30%, rgba(6, 20, 31, 0.82) 70%, #06141f 100%);
}
.cta__stage { width: 100%; height: 200px; height: clamp(190px, 26vw, 320px); margin: 0 auto 18px; }
.cta__title {
  text-align: center; font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
  font-size: 2.3rem; font-size: clamp(2.2rem, 1.2rem + 5vw, 5rem);
  margin: 0 auto 48px; max-width: 14ch;
}
.contact { display: flex; flex-direction: column; }
.contact__info { margin-bottom: 36px; }
.contact__info h3, .form h3 { font-size: 1.35rem; margin-bottom: 18px; }
.contact__list { margin-bottom: 20px; }
.contact__list li { margin-bottom: 4px; }
.contact__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none; font-size: 1.15rem; font-weight: 500;
}
.contact__list a:hover span { text-decoration: underline; }
.contact__list svg { flex: 0 0 auto; margin-right: 12px; color: var(--leaf); }
.form {
  padding: 24px 20px 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(11, 34, 51, 0.86);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .form { background: rgba(11, 34, 51, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.form__trap { position: absolute; left: -9999px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; margin-bottom: 6px; font-size: 0.93rem; color: var(--muted); }
.field input, .field textarea {
  display: block; width: 100%; padding: 13px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: var(--r-md);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--sky); outline-offset: 0; border-color: transparent; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; }
.form__status { margin: 0 0 0 18px; flex: 1 1 200px; font-size: 0.97rem; color: var(--muted); }
.form__status.is-ok { color: #a5e07f; }
.form__status.is-bad { color: #ffc2a8; }
.form__status a { color: inherit; }
@media (min-width: 640px) {
  .form { padding: 34px 34px 36px; }
  .form__row { display: flex; margin: 0 -8px; }
  .form__row .field { flex: 1 1 0; margin-left: 8px; margin-right: 8px; }
}
@media (min-width: 900px) {
  .contact { flex-direction: row; align-items: flex-start; }
  .contact__info { flex: 0 0 34%; margin: 10px 6% 0 0; }
  .form { flex: 1 1 0; min-width: 0; }
}

/* ---------- footer */

.ftr { position: relative; border-top: 1px solid var(--line); padding: 40px 0 36px; }
.ftr__in { display: flex; flex-direction: column; align-items: flex-start; }
.ftr__logo { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__logo img { height: 34px; width: auto; }
.ftr__links { display: flex; flex-wrap: wrap; margin: 22px -12px 14px; }
.ftr__links a { display: inline-block; padding: 8px 12px; color: var(--text); text-decoration: none; font-weight: 500; }
.ftr__links a:hover { text-decoration: underline; }
.ftr__copy { margin: 22px 0 0; color: var(--muted); font-size: 0.93rem; }
.ftr__copy a { color: inherit; }
@media (min-width: 900px) {
  .ftr__in { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ftr__in nav { margin: 0 auto 0 36px; }
  .ftr__links { margin: 0 -12px; }
  .ftr__copy { flex: 0 0 100%; }
}

/* ---------- inner pages */

.phead { position: relative; padding: calc(var(--hdr-h) + 44px) 0 44px; padding-bottom: clamp(40px, 6vw, 72px); }
.phead--tall { min-height: 80vh; display: flex; align-items: center; }
.phead h1 {
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
  font-size: 2.3rem; font-size: clamp(2.2rem, 1.3rem + 4.4vw, 4.4rem);
  max-width: 18ch; margin-bottom: 18px;
}
.phead h1 .badge { margin-left: 12px; }
.phead__intro { color: var(--muted); font-size: 1.2rem; max-width: 56ch; margin-bottom: 20px; }
.crumbs { margin-bottom: 22px; font-size: 0.93rem; }
.crumbs ol { display: flex; flex-wrap: wrap; }
.crumbs li { color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 9px; opacity: 0.5; }
/* a taller touch area without moving the text */
.crumbs a { display: inline-block; padding: 13px 0; margin: -13px 0; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.facts { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.facts li { margin: 5px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.95rem; }

.product__grid { display: flex; flex-direction: column; }
.product__media { margin-bottom: 28px; }
.product__media img { width: 100%; border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line); }
/* More than one picture: they sit on the faces of a prism that turns by itself. */
.gallery__stage { -webkit-perspective: 1700px; perspective: 1700px; }
.gallery__item + .gallery__item { margin-top: 16px; }
.js .gallery__item + .gallery__item { margin-top: 0; }
.js .gallery__item:not(.is-on) { display: none; }
.is-3d .gallery__body {
  position: relative;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.js .is-3d .gallery__item, .js .is-3d .gallery__item:not(.is-on) {
  display: block; position: absolute; top: 0; left: 0; width: 100%; margin: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  opacity: 0; pointer-events: none; transition: opacity 0.7s ease;
}
.js .is-3d .gallery__item.is-on { opacity: 1; pointer-events: auto; }
.gallery__bar { display: none; align-items: center; margin-top: 14px; }
.js .gallery__bar { display: flex; }
.gallery__thumbs { display: flex; flex: 1 1 auto; margin: 0 -6px; }
.gallery__thumbs li { flex: 0 0 25%; max-width: 108px; padding: 0 6px; }
.gallery__thumb {
  display: block; width: 100%; padding: 0; background: transparent; cursor: pointer;
  border: 2px solid transparent; border-radius: 12px; overflow: hidden; opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-on { border-color: var(--sky); opacity: 1; }
.product__media .gallery__thumb img { border-radius: 0; box-shadow: none; }
.gallery__play { flex: 0 0 auto; margin-left: 12px; }
.playbtn .i-play, .playbtn.is-paused .i-pause { display: none; }
.playbtn.is-paused .i-play { display: block; }

/* What each picture says, shown beside it while it is in front. */
.shots { margin-bottom: 26px; }
.shot h2 { font-size: 1.7rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); margin-bottom: 0.5em; }
.shot__note { margin: 1.1em 0 0; max-width: 62ch; font-size: 0.88rem; line-height: 1.45; color: var(--fg-muted); }
.shot + .shot { margin-top: 30px; }
.js .shot + .shot { margin-top: 0; }
.js .shot:not(.is-on) { display: none; }
@supports (display: grid) {
  /* Stack them in one cell, so the page does not jump when the picture changes. */
  .js .shots { display: grid; }
  .js .shots > .shot { grid-area: 1 / 1; display: block; min-width: 0; transition: opacity 0.5s ease 0.25s; }
  .js .shots > .shot:not(.is-on) { visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}
.product__contact { margin-top: 22px; }
.product__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; font-weight: 500; }
.product__contact a:hover span { text-decoration: underline; }
.product__contact svg { flex: 0 0 auto; margin-right: 12px; color: var(--leaf); }

.product__price { font-family: var(--display); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 16px; }
.product__act { margin: 28px 0 0; }
@media (min-width: 900px) {
  .product__grid { flex-direction: row; align-items: flex-start; }
  .product__media { flex: 0 0 46%; margin: 0 7% 0 0; position: -webkit-sticky; position: sticky; top: calc(var(--hdr-h) + 24px); }
  .product__info { flex: 1 1 0; min-width: 0; }
}

.article__media { margin-bottom: 32px; }
.article__media img { width: 100%; border-radius: var(--r-lg); }
.share { display: flex; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--fg-muted); }
.share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 8px; border: 1px solid var(--rule); border-radius: 50%; color: var(--fg); }
.share a:hover { color: var(--sky); border-color: var(--sky); }

.prose { max-width: 68ch; font-size: 1.1rem; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.6rem; letter-spacing: -0.015em; margin: 1.6em 0 0.5em; }
.prose h3 { font-size: 1.25rem; margin: 1.5em 0 0.4em; }
.prose h4 { font-family: var(--display); font-size: 1.05rem; margin: 1.4em 0 0.3em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--leaf); }
.prose blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--leaf); font-size: 1.2rem; }
.prose img { border-radius: var(--r-md); margin: 1.4em 0; }
.prose code { font-size: 0.92em; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); }

/* ---------- viewer (video and image zoom) */

.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 16px 24px;
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
  background: rgba(3, 10, 16, 0.93);
}
.modal__close {
  position: absolute; top: 12px; right: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--ink-2); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.modal__body { width: 100%; max-width: 1100px; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.modal__body img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: var(--r-md); }
.modal__video { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--r-md); overflow: hidden; }
.modal__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.modal__alt { margin: 14px 0 0; font-size: 0.95rem; }

/* ---------- calm mode: people who ask for less motion get none */

.calm { scroll-behavior: auto; }
.calm *, .calm *::before, .calm *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .space, .hdr, .menu, .modal, .hero__bg, .cta__bg, .form { display: none !important; }
  body { background: #fff; color: #000; }
}