/* adamantus.com, v2 (the scroll concept, 27 October 2026): blue and white, Manrope headings, DM Sans text.
   Breakpoints: 1080 (the menu goes behind the button), 760 (one column), 480 (small phones). */

@font-face { font-family: Manrope; src: url(/assets/fonts/manrope-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(/assets/fonts/dm-sans-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --blue: #0879c9;      /* the logo's blue: art, accents, large text */
  --act: #0866ad;       /* buttons and links (4.5:1 on white and on --pale) */
  --act-dark: #054f87;
  --ink: #112d43;
  --muted: #5f7587;
  --soft: #345b77;
  --line: #d7e4ee;
  --field: #b9cfdf;
  --pale: #f1f7fb;
  --night: #0d2638;
  --night-line: #23435a;
  --night-text: #c9d9e5;
  --hh: 84px;           /* header height */
  --gut: 4.5%;
  --progress: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
/* the footer at the window's bottom on a page shorter than the window (a tall screen) */
body { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--act); text-decoration: none; }
a:hover { color: var(--act-dark); }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0088dc; outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: #fff; padding: 14px 18px; }
.skip:focus { top: 12px; }

.wide { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); }
.eb { font-size: 11px; letter-spacing: 1.4px; font-weight: 600; color: var(--act); text-transform: uppercase; line-height: 1.5; }
.eb_muted { color: var(--muted); font-size: 10px; }
.disp { font-family: Manrope, Arial, sans-serif; font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
.disp span, .disp > span { color: var(--blue); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.pill { display: inline-block; font-family: 'DM Sans', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.5; background: var(--blue); color: #fff; padding: 1px 7px; vertical-align: middle; }
.arr { color: var(--blue); font-size: 20px; }
.more { font-size: 14px; font-weight: 600; color: var(--act); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 13px 22px; border: 0; background: var(--act); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; }
.btn:hover { background: var(--act-dark); color: #fff; }
.btn_block { display: flex; justify-content: space-between; width: 100%; }
.btn_white { background: #fff; color: var(--act); }
.btn_white:hover { background: var(--pale); color: var(--act-dark); }
.btn_line { background: transparent; border: 1px solid rgba(255, 255, 255, .6); color: #fff; }
.btn_line:hover { background: rgba(255, 255, 255, .12); }
.btn_line_dark { background: transparent; border: 1px solid var(--act); color: var(--act); }
.btn_line_dark:hover { background: var(--pale); color: var(--act-dark); }
.line_link { display: inline-flex; gap: 38px; align-items: center; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); padding: 12px 0; }
.line_link span { color: var(--blue); }

/* ---------- header and the phone menu ---------- */

.hd { position: sticky; top: 0; z-index: 30; height: var(--hh); padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.hd_brand img { width: 190px; height: auto; }
.hd_nav { display: flex; gap: 34px; font-size: 14px; }
.hd_nav a { color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; }
.hd_nav a:hover { color: var(--act); }
.hd_nav a[aria-current] { color: var(--act); font-weight: 600; border-bottom-color: var(--act); }
.hd_cta[aria-current] { background: #fff; color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
.hd_open { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; }
.hd_open svg, .pm_close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.pm { position: fixed; inset: 0; z-index: 50; background: var(--night); color: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.pm[hidden] { display: none; }
.pm_top { height: 64px; flex: none; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--night-line); }
.pm_logo { background: #fff; padding: 7px 9px; }
.pm_logo img { width: 132px; height: auto; }
.pm_close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; }
.pm_nav { padding: 18px 20px; display: flex; flex-direction: column; }
.pm_item { font-family: Manrope, Arial, sans-serif; font-weight: 500; letter-spacing: -0.03em; color: #fff; font-size: 30px; padding: 12px 0; border-bottom: 1px solid var(--night-line); }
.pm_item:hover, .pm_item[aria-current] { color: #8fc8f2; }
.pm_sub { display: flex; flex-direction: column; padding: 6px 0 12px 16px; border-bottom: 1px solid var(--night-line); }
.pm_sub a { color: var(--night-text); font-size: 15px; padding: 7px 0; }
.pm_sub a:hover { color: #fff; }
.pm_foot { margin-top: auto; padding: 20px; }
.pm_foot .btn { width: 100%; }
.pm_foot p { font-size: 13px; color: var(--night-text); margin-top: 14px; text-align: center; }
.pm_foot p a { color: var(--night-text); }
body.pm_on { overflow: hidden; }

/* ---------- the home page's intro ---------- */

.intro { height: 100vh; height: 100svh; min-height: 420px; position: relative; isolation: isolate; overflow: hidden; background: #e9f0f5; }
.intro_img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 54%; filter: saturate(.73); z-index: -3; }
.intro::before { content: ""; position: absolute; inset: 0; background: var(--blue); opacity: .09; mix-blend-mode: color; z-index: -2; pointer-events: none; }
.intro::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #fffffff5 0%, #ffffffde 25%, #ffffff8c 40%, #ffffff0a 62%, #ffffff05 75%, #fffffff0 100%); }
.intro_id { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); width: min(390px, 72%); text-align: center; }
.intro_id h1 { margin: 0; }
.intro_id img { width: 100%; height: auto; }
/* site.js lifts the logo out (fixed, over the header) and moves it to the header logo's place with the scroll */
.intro_fly { position: fixed; left: 0; top: 0; z-index: 31; transform-origin: 0 0; will-change: transform; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); }
.intro_id p { font-size: 14px; color: var(--soft); letter-spacing: .5px; margin-top: 22px; }
.intro_bottom { position: absolute; left: var(--gut); right: var(--gut); bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.intro_bottom .eb { color: #315874; font-size: 10px; }
.intro_bottom a { display: flex; align-items: center; gap: 30px; min-height: 44px; font-size: 13px; color: var(--ink); border-bottom: 1px solid #719dbb; padding: 12px 0; }
.intro_bottom a span { color: var(--blue); font-size: 20px; }

/* ---------- home: from possibility to product (the three steps, the product drawn at each) ---------- */
/* "Scroll to explore" lands on it with the header just stuck at the top */
.how { scroll-margin-top: -16px; color: #fff; background-color: var(--night); background-image: linear-gradient(rgba(143, 200, 242, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 200, 242, .06) 1px, transparent 1px); background-size: 32px 32px; }
.how_in { padding-top: 88px; padding-bottom: 88px; }
.how .eb { color: #8fc8f2; }
.how_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.how_title { font-size: clamp(32px, 3.6vw, 48px); margin-top: 16px; line-height: 1.08; }
.how_title span { color: #4fa9ea; }
.how_more { flex: none; display: inline-flex; gap: 14px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #8fc8f2; border-bottom: 1px solid var(--night-line); }
.how_more:hover { color: #fff; }
.how_steps { --gap: 52px; list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.how_step { transition: opacity .7s ease, transform .7s ease; }
.how_step:nth-child(2) { transition-delay: .15s; } .how_step:nth-child(3) { transition-delay: .3s; }
.js .how:not(.seen) .how_step { opacity: 0; transform: translateY(24px); }
.how_art { position: relative; }
.how_art svg { display: block; width: 100%; height: auto; font-family: 'DM Sans', Arial, sans-serif; }
/* the arrow to the next step, in the gap */
.how_step:not(:last-child) .how_art::before { content: ''; position: absolute; top: 50%; right: calc(var(--gap) * -.5 - 13px); width: 26px; height: 2px; background: #3fa0e6; }
.how_step:not(:last-child) .how_art::after { content: ''; position: absolute; top: calc(50% - 4px); right: calc(var(--gap) * -.5 - 12px); width: 8px; height: 8px; border: solid #3fa0e6; border-width: 2px 2px 0 0; transform: rotate(45deg); }
/* the line under the drawings runs on through the gaps; a dot marks each step */
.how_txt { position: relative; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--night-line); display: flex; flex-direction: column; gap: 12px; }
.how_step:not(:last-child) .how_txt { margin-right: calc(var(--gap) * -1); padding-right: var(--gap); }
.how_txt::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #3fa0e6; }
.how_txt h3 { font-weight: inherit; }
.how_txt h3 .disp { display: block; margin-top: 10px; font-size: 23px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.how_txt p { font-size: 15px; line-height: 1.6; color: var(--night-text); max-width: 380px; }
.how_links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.how_links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 600; color: #8fc8f2; }
.how_links a:hover { color: #fff; }
.how_links a span { margin-left: 6px; }
@media (max-width: 1080px) { .how_steps { --gap: 40px; } .how_txt h3 .disp { font-size: 20px; } }
@media (max-width: 760px) {
  .how_in { padding-top: 64px; padding-bottom: 64px; }
  .how_head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .how_steps { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 36px; }
  .how_step:not(:last-child) .how_txt { padding-right: 0; margin-right: 0; }
  .how_step:not(:last-child) .how_art::before, .how_step:not(:last-child) .how_art::after { display: none; }
  .how_art svg { max-width: 420px; }
}

/* ---------- home: who we are ---------- */
/* the intro's link and the menu land on it with the header just stuck at the top (no strip of the photo above it) */
.who { scroll-margin-top: -16px; }

.who { border-bottom: 1px solid var(--line); }
.who_in { max-width: 1280px; margin: 0 auto; padding: 96px var(--gut) 64px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 6%; align-items: center; }
.who_title { font-size: clamp(32px, 3.6vw, 48px); margin-top: 22px; line-height: 1.12; }
.who_title .who_line { display: block; color: var(--ink); }
.who_title .who_line + .who_line { color: var(--blue); }
.who_text { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 520px; }
.who_map { margin: 0; width: 100%; max-width: 500px; justify-self: end; background-color: var(--pale); background-image: linear-gradient(rgba(8,121,201,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(8,121,201,.05) 1px, transparent 1px); background-size: 32px 32px; border-radius: 6px; padding: 4%; }
.who_map svg { width: 100%; height: auto; }
.who_arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .3s; }
.who_arc2 { transition-delay: .7s; }
.who_end { opacity: 0; transition: opacity .4s 1.5s; }
.who_end2 { transition-delay: 1.7s; }
.who.seen .who_arc { stroke-dashoffset: 0; }
.who.seen .who_end { opacity: 1; }
.who_pulse { transform-box: fill-box; transform-origin: center; animation: who-pulse 2.4s ease-out infinite; }
@keyframes who-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }
.who_copy, .who_map, .who_facts li { transition: opacity .7s ease, transform .7s ease; }
.js .who:not(.seen) .who_copy, .js .who:not(.seen) .who_map, .js .who:not(.seen) .who_facts li { opacity: 0; transform: translateY(24px); }
.who_map { transition-delay: .15s; }
.who_facts { list-style: none; max-width: 1280px; margin: 0 auto; padding: 0 var(--gut) 100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.who_facts li { border-top: 1px solid var(--line); }
.who_facts li + li { border-left: 1px solid var(--line); }
.who_facts li:nth-child(2) { transition-delay: .1s; } .who_facts li:nth-child(3) { transition-delay: .2s; } .who_facts li:nth-child(4) { transition-delay: .3s; }
.who_facts li > div, .who_facts a { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 4px; height: 100%; color: var(--muted); font-size: 14px; line-height: 1.5; }
.who_facts li:first-child > div { padding-left: 0; }
.who_facts strong { font-size: clamp(22px, 2vw, 28px); color: var(--ink); }
.who_facts a:hover strong { color: var(--act); }

/* ---------- section heads ---------- */

.sec { padding-top: 90px; padding-bottom: 90px; }
.sec_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec_title { font-size: clamp(38px, 4.1vw, 52px); margin-top: 20px; line-height: 1.08; }
.sec_lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 360px; }

/* ---------- home: services ---------- */

.services { position: relative; overflow: hidden; overflow: clip; padding: 130px 0 120px; background-color: var(--pale); background-image: linear-gradient(rgba(8,121,201,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(8,121,201,.045) 1px, transparent 1px); background-size: 40px 40px; border-bottom: 1px solid var(--line); }
.svc_in { position: relative; z-index: 1; }
.svc_card { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 40px 80px -40px rgba(13, 38, 56, .22); overflow: hidden; }
.svc_card .svc:last-child { border-bottom: 0; }
/* the layer behind the table: each piece lags the page by --d of the section's distance from the window's middle */
.svc_float { position: absolute; inset: 0; pointer-events: none; }
.fl { position: absolute; display: block; transform: translate3d(0, calc(var(--sy, 0) * var(--d) * 1px), 0); will-change: transform; color: #9cc6e6; }
.fl.far { color: #c4dced; }
.fl_icon svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; }
.fl_icon.far svg { stroke-width: 1; }
.fl_chip { padding: 7px 14px; border: 1px solid #b9d6ec; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; color: #4f86ad; white-space: nowrap; }
.fl_chip.far { font-size: 11px; padding: 5px 11px; color: #8fb3cd; border-color: #d3e4f0; background: rgba(255, 255, 255, .5); }
.fl_code { font-family: Manrope, Arial, sans-serif; font-size: 92px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: #b9d6ec; }
.fl_code.far { font-size: 60px; color: #d3e4f0; }
.fl_wire { width: 170px; height: 112px; border: 1.5px dashed #a9cbe4; border-radius: 6px; background: linear-gradient(#a9cbe4, #a9cbe4) 14px 16px / 60px 8px no-repeat, linear-gradient(#d3e4f0, #d3e4f0) 14px 36px / 120px 6px no-repeat, linear-gradient(#d3e4f0, #d3e4f0) 14px 50px / 96px 6px no-repeat, linear-gradient(rgba(8,121,201,.12), rgba(8,121,201,.12)) 14px 70px / 56px 24px no-repeat; }
.fl_wire2 { width: 110px; height: 76px; border-color: #d3e4f0; background: linear-gradient(#d3e4f0, #d3e4f0) 10px 12px / 44px 6px no-repeat, linear-gradient(#e3edf5, #e3edf5) 10px 28px / 80px 5px no-repeat; }
.fl_ring { width: 260px; height: 260px; border-radius: 50%; border: 1.5px solid #c4dced; }
.fl_ring.far { width: 150px; height: 150px; border-style: dashed; border-color: #d3e4f0; }
.fl_cross { width: 18px; height: 18px; background: linear-gradient(#8fb9d8, #8fb9d8) center / 100% 1.5px no-repeat, linear-gradient(#8fb9d8, #8fb9d8) center / 1.5px 100% no-repeat; }
.svc_list { margin-top: 56px; border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 40px; gap: 24px; align-items: center; padding: 30px 12px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .2s; }
.svc:hover { background: var(--pale); color: var(--ink); }
.svc_no { font-size: 13px; font-weight: 600; color: var(--act); }
.svc h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.svc_text { font-size: 15px; line-height: 1.55; color: var(--muted); }
.svc_tech { font-size: 13px; line-height: 1.6; color: var(--soft); }
.svc .arr { transition: transform .2s; }
.svc:hover .arr { transform: translateX(4px); }

/* ---------- home: work ---------- */

.work { padding-top: 40px; padding-bottom: 120px; }
/* the products as books on a shelf. Geometry: --bt is a book's thickness now (its --D, less while another book is
   open), --sh (0 to 1) how far the open book's cover has moved right to leave room for the opened cover, --H its height (--Ho when open, so the details fit), --W the cover's width. The book is drawn cover-flat in .book_3d (cover at z 0, spine on the
   left side going back) and turned 90deg so its spine faces us; opening turns it back to its cover while the book's
   box widens to a spread, then the cover swings open to the left. Closing runs the same steps backwards. */
@property --bt { syntax: '<length>'; inherits: true; initial-value: 80px; }
@property --sh { syntax: '<number>'; inherits: true; initial-value: 0; }
.shelf { --W: clamp(250px, calc((100vw - 2 * var(--gut) - 320px) / 2), 340px); --Ho: clamp(520px, calc(1060px - 40vw), 640px); position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: calc(var(--Ho) + 16px); margin-top: 56px; padding: 0 12px; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(#e3edf5, #c8d8e5); border-radius: 2px; box-shadow: 0 16px 24px -14px rgba(17, 45, 67, .45); }
.book { --bt: var(--D); --sh: 0; position: relative; flex: none; width: var(--bt); height: var(--H); transition: --bt .6s cubic-bezier(.6, 0, .25, 1) .42s, --sh .6s cubic-bezier(.6, 0, .25, 1) .42s, width .6s cubic-bezier(.6, 0, .25, 1) .42s, height .6s cubic-bezier(.6, 0, .25, 1) .42s; }
.shelf.has-open .book:not(.open) { --bt: calc(var(--D) * .55); }
.book.open { --sh: 1; width: calc(var(--W) * 2 + 16px); height: var(--Ho); transition-delay: 0s; z-index: 2; }
.book_lift { position: absolute; inset: 0; perspective: 2200px; transition: transform .35s cubic-bezier(.3, .7, .3, 1); }
.book:not(.open):hover .book_spine, .book:not(.open) .book_spine:focus-visible { filter: brightness(1.1); }
.book:not(.open):hover .book_lift, .book:not(.open):has(.book_spine:focus-visible) .book_lift { transform: translateY(-16px); }
.book:not(.open) { cursor: pointer; }
.book_3d { position: absolute; bottom: 0; left: calc(var(--bt) + var(--sh) * (var(--W) + 16px - var(--D))); width: var(--W); height: var(--H); transform-style: preserve-3d; transform-origin: 0 50%; transform: rotateY(90deg); transition: transform .6s cubic-bezier(.6, 0, .25, 1) .42s, height .6s cubic-bezier(.6, 0, .25, 1) .42s; }
.book.open .book_3d { height: var(--Ho); transform: rotateY(0deg); transition-delay: 0s; }
.book_spine, .bc_front, .bc_back, .book_page { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the 3D box itself would catch clicks in front of the page (which sits 1px behind the cover): only its faces take them */
.book_3d { pointer-events: none; }
.book_spine, .book.open .book_page { pointer-events: auto; }
.book_spine { position: absolute; top: 0; left: 0; width: var(--bt); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg) translateX(-100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 16px; border: 0; border-radius: 3px 3px 2px 2px; font: inherit; color: var(--t); cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .16) 16%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .2)), var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: filter .2s; }
.book_spine::before, .book_spine::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--b); opacity: .9; box-shadow: 0 6px 0 -1px var(--b); }
.book_spine::before { top: 11%; }
.book_spine::after { bottom: 15%; }
.bs_no { font-size: 11px; font-weight: 600; letter-spacing: .12em; opacity: .85; }
.bs_title { writing-mode: vertical-rl; font-family: Manrope, 'DM Sans', Arial, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; margin-top: 24px; }
.bs_label { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: .8; transition: opacity .3s; }
.bs_mark { margin-top: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; padding: 2px; }
.shelf.has-open .book:not(.open) .bs_label, .shelf.has-open .book:not(.open) .bs_mark { opacity: 0; }
.book_cover { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.5, 0, .2, 1) 0s; }
.book.open .book_cover { transform: rotateY(-180deg); transition-delay: .55s; }
.bc_front, .bc_back { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 2px 4px 4px 2px; overflow: hidden; }
.bc_front { justify-content: space-between; gap: 14px; padding: 28px; color: var(--t); background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .12) 4%, rgba(255, 255, 255, 0) 12%), var(--c); }
.bc_front .eb { color: var(--t); opacity: .85; }
.bc_front .disp { font-size: 34px; line-height: 1.05; color: var(--t); }
.bc_front img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 3px var(--b); }
.bc_back { transform: rotateY(180deg); padding: 26px 22px 26px 26px; gap: 14px; background: linear-gradient(270deg, rgba(17, 45, 67, .14), rgba(17, 45, 67, 0) 34px), #f8f6f1; box-shadow: inset 0 0 0 1px rgba(17, 45, 67, .08); }
.bc_back img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.bc_cap { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.book_page { position: absolute; inset: 0; transform: translateZ(-1px); background: linear-gradient(90deg, rgba(17, 45, 67, .14), rgba(17, 45, 67, 0) 34px), #fbfaf6; border-radius: 2px 4px 4px 2px; box-shadow: inset 0 0 0 1px rgba(17, 45, 67, .08), 14px 18px 30px -18px rgba(17, 45, 67, .45); }
.bp_in { height: 100%; }
.bp_card { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 26px 26px 22px 30px; overflow: auto; }
.bp_card > .eb:first-of-type { color: var(--blue); }
.book_page:focus { outline: none; }
.book.open { cursor: pointer; }
.book.open .bp_card a { cursor: pointer; }
.bp_card h3 { font-size: 30px; line-height: 1.1; margin-bottom: 2px; }
.bp_text { font-size: 14.5px; line-height: 1.55; color: var(--soft); margin-bottom: 6px; }
.bp_card .eb_muted { margin-top: 4px; }
.bp_links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.bp_links a { color: var(--act); border-bottom: 1px solid currentColor; }
.bp_go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.bp_go .btn { padding: 11px 16px; font-size: 14px; }
.bp_img { display: none; }
.book_slot .book_lift { perspective: none; }
.book_slot .book_spine { position: absolute; transform: none; width: 100%; color: var(--act); background: repeating-linear-gradient(-45deg, rgba(8, 102, 173, .05) 0 8px, transparent 8px 16px); border: 1.5px dashed #9fc1da; box-shadow: none; }
.book_slot .book_spine::before, .book_slot .book_spine::after { display: none; }
.book_slot:hover .book_spine { border-color: var(--act); background-color: rgba(8, 102, 173, .06); }
.industries { display: flex; gap: 40px; align-items: baseline; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; margin-top: 80px; }
.industries .eb { white-space: nowrap; }
.industries p { font-size: 17px; line-height: 1.6; }
.industries p span { color: #9bb4c6; }

/* ---------- forms ---------- */

.form { display: flex; flex-direction: column; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--field); border-radius: 16px; padding: 12px 16px; width: 100%; }
.form input:focus, .form textarea:focus { border-color: var(--act); outline: 2px solid rgba(8, 102, 173, .25); outline-offset: 0; }
.form input:not([type=file]):focus, .form textarea:focus { --px: .035; --py: .12; animation: field-pop .62s linear; }
.form textarea:focus { --px: .02; --py: .045; }
/* the focused field swells like a bubble about to pop (taller than wide, rounder), then springs back with a few shrinking wobbles */
@keyframes field-pop {
  0% { transform: scale(1); border-radius: 16px; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28% { transform: scale(calc(1 + var(--px)), calc(1 + var(--py))); border-radius: 26px; animation-timing-function: ease-in-out; }
  50% { transform: scale(calc(1 - var(--px) * .3), calc(1 - var(--py) * .33)); border-radius: 14px; animation-timing-function: ease-in-out; }
  68% { transform: scale(calc(1 + var(--px) * .3), calc(1 + var(--py) * .3)); border-radius: 19px; animation-timing-function: ease-in-out; }
  84% { transform: scale(calc(1 - var(--px) * .08), calc(1 - var(--py) * .08)); border-radius: 15px; animation-timing-function: ease-in-out; }
  100% { transform: scale(1); border-radius: 16px; }
}
.form textarea { resize: vertical; min-height: 120px; }
.form .btn { align-self: flex-start; }
.form_row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 !important; min-height: 65px; }

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

.ft { background: var(--night); color: var(--night-text); }
.ft a { color: var(--night-text); }
.ft a:hover { color: #fff; }
.ft_main { padding-top: 70px; padding-bottom: 50px; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 14px; line-height: 1.7; }
.ft_logo { display: inline-block; background: #fff; padding: 12px 14px; }
.ft_logo img { width: 162px; height: auto; }
.ft_about p { margin-top: 18px; line-height: 1.65; }
.ft_about p a { color: #fff; }
.ft_col { display: flex; flex-direction: column; align-items: flex-start; }
.ft_col .eb { color: #8fb6d3; margin-bottom: 10px; }
.ft_col a { padding: 4px 0; }
.ft_col .ft_all { color: #fff; }
.ft_bottom { padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--night-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }
.ft_links { display: flex; align-items: center; gap: 10px; }
.ft_links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; }
.ft_links svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft_top { color: #fff !important; padding-left: 10px; }

/* ---------- inner pages: the title band ---------- */

.cv { background: var(--pale); border-bottom: 1px solid var(--line); overflow: hidden; }
.cv_in { padding-top: 56px; padding-bottom: 64px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--act); }
.cv_eb { margin-top: 34px; display: flex; align-items: center; gap: 9px; }
.cv h1 { font-size: clamp(52px, 7.2vw, 92px); margin-top: 16px; }
.crumbs + h1 { margin-top: 34px; }
.cv_lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 440px; padding-bottom: 10px; flex: none; }
.cv_lead small { display: block; font-size: 13px; margin-top: 10px; }

/* ---------- service page (board https://claude.ai/artifact/VQ2YLeczXCZSwArfbmUeAD) ---------- */

.sh { background-color: var(--pale); background-image: linear-gradient(rgba(8, 121, 201, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 121, 201, .06) 1px, transparent 1px); background-size: 48px 48px; border-bottom: 1px solid var(--line); }
.sh_in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 64px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.sh .crumbs + .eb { margin-top: 30px; }
.sh h1 { font-size: clamp(48px, 6.6vw, 92px); margin-top: 16px; }
.sh h1.sh_long { font-size: clamp(42px, 4.8vw, 64px); }
.sh_lead { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 540px; margin-top: 22px; }
.sh_actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
/* the service's icon drawn on a blueprint, its tools along the bottom */
.bp { position: relative; height: 420px; overflow: hidden; color: #8fc8f2; background-color: var(--night); background-image: linear-gradient(rgba(143, 200, 242, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 200, 242, .1) 1px, transparent 1px); background-size: 24px 24px; }
.bp_top { position: absolute; left: 20px; right: 20px; top: 16px; display: flex; justify-content: space-between; gap: 12px; color: #8fc8f2; }
.bp_cross { position: absolute; inset: 0; }
.bp_cross::before, .bp_cross::after { content: ""; position: absolute; border: 0 dashed rgba(143, 200, 242, .35); }
.bp_cross::before { left: 50%; top: 44px; bottom: 50px; border-left-width: 1px; }
.bp_cross::after { top: 46%; left: 20px; right: 20px; border-top-width: 1px; }
.bp_ring { position: absolute; left: 50%; top: 46%; width: 280px; height: 280px; transform: translate(-50%, -50%); border: 1px solid rgba(143, 200, 242, .25); border-radius: 50%; }
.bp_icon { position: absolute; left: 50%; top: 46%; width: 190px; height: 190px; transform: translate(-50%, -50%); fill: var(--night); stroke: #8fc8f2; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.bp_num { position: absolute; right: 22px; bottom: 62px; font: 500 120px/.8 Manrope, Arial, sans-serif; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(143, 200, 242, .5); }
.bp_chips { position: absolute; left: 0; right: 0; bottom: 0; list-style: none; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--night-line); background: var(--night); }
.bp_chips li { padding: 12px 16px; font-size: 12px; color: var(--night-text); border-right: 1px solid var(--night-line); }

/* the six services beside the content */
.sb { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; padding-top: 80px; padding-bottom: 100px; }
.sx { position: sticky; top: calc(var(--hh) + 26px); display: flex; flex-direction: column; gap: 14px; }
.sx ol { position: relative; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.sx li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; color: var(--ink); }
.sx li a:hover { color: var(--act); }
.sx li a span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--muted); padding-top: 2px; }
.sx li a[aria-current] { color: var(--act); font-weight: 600; background: var(--pale); padding-left: 10px; }
.sx li a[aria-current] span:first-child { color: var(--act); }
.sx .btn { justify-content: space-between; margin-top: 6px; }
.blk + .blk { margin-top: 80px; }
.blk_title { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; margin: 12px 0 32px; }
.dl { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dl li { background: #fff; padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 18px; min-height: 168px; }
.dl_no { font: 600 15px/1 Manrope, Arial, sans-serif; color: var(--blue); }
.dl p { font: 500 21px/1.3 Manrope, Arial, sans-serif; letter-spacing: -0.02em; }
.dl .dl_ask { background: var(--pale); justify-content: space-between; align-items: flex-start; }
.dl_ask p { color: var(--soft); }
.tech { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tech li { font: 500 20px/1.3 Manrope, Arial, sans-serif; letter-spacing: -0.02em; padding: 12px 20px; border: 1px solid var(--field); }
.flow { list-style: none; padding: 0; }
.flow li { display: grid; grid-template-columns: 64px minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.flow li:last-child { border-bottom: 1px solid var(--line); }
.flow .num { font-size: 34px; line-height: 1; }
.flow h3 { font-size: 22px; letter-spacing: -0.02em; }
.flow p { font-size: 16px; line-height: 1.6; color: var(--muted); }
/* previous and next service */
.pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.pg a { display: flex; flex-direction: column; gap: 12px; padding: 40px var(--gut); color: var(--ink); transition: background .2s; }
.pg a:hover { background: var(--pale); color: var(--ink); }
.pg a + a { border-left: 1px solid var(--line); text-align: right; align-items: flex-end; }
.pg .disp { font-size: clamp(24px, 2.6vw, 32px); }

/* the blue band */
.talk { background: var(--act); color: #fff; }
.talk_in { padding-top: 60px; padding-bottom: 60px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.talk h2 { font-size: clamp(30px, 3.4vw, 42px); }
.talk_actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- What we do (board https://claude.ai/artifact/VQ2YLeczXCZSwArfbmUeAD) ---------- */

.wh { background-color: var(--night); background-image: linear-gradient(rgba(143, 200, 242, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 200, 242, .08) 1px, transparent 1px); background-size: 48px 48px; color: #fff; }
.wh_in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: end; padding-top: 64px; padding-bottom: 56px; }
.wh .crumbs { color: #9fb6c8; }
.wh .crumbs a, .wh .eb { color: #8fc8f2; }
.wh_eb { margin-top: 30px; }
.wh h1 { font-size: clamp(60px, 8.2vw, 104px); margin-top: 16px; color: #fff; }
.wh h1 span { color: #4fa9ea; }
.wh_lead { font-size: 18px; line-height: 1.6; color: var(--night-text); max-width: 520px; margin-top: 24px; }
.wh_index { list-style: none; padding: 0; border-top: 1px solid var(--night-line); }
.wh_index a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--night-line); color: #fff; font: 500 20px/1.25 Manrope, Arial, sans-serif; letter-spacing: -0.02em; }
.wh_index a:hover { color: #8fc8f2; }
.wh_index .arr { color: #4fa9ea; font-size: 18px; }
.wh .wh_foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--night-line); color: #9fb6c8; }
/* outlined numbers */
.num { font: 500 72px/.9 Manrope, Arial, sans-serif; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--blue); }
/* a chapter per service */
.ch { padding-top: 110px; padding-bottom: 80px; }
.ch_list { margin-top: 56px; }
.ch_row { display: grid; grid-template-columns: 150px minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); }
.ch_row:last-child { border-bottom: 1px solid var(--line); }
.ch_no { display: flex; flex-direction: column; gap: 22px; }
.ch_icon { width: 44px; height: 44px; fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ch_main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ch_main h3 { font-size: clamp(28px, 2.9vw, 36px); }
.ch_main p { font-size: 17px; line-height: 1.6; color: var(--soft); max-width: 470px; }
.line_more { display: inline-flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--act); font-size: 15px; font-weight: 600; }
.sec_lead .line_more { display: flex; width: fit-content; margin-top: 14px; }
.ch_side { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.ticks { list-style: none; padding: 0; border-top: 1px solid #e7eff5; }
.ticks li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e7eff5; font-size: 15px; line-height: 1.45; }
.ticks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 2; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12px; line-height: 1.4; padding: 5px 10px; border: 1px solid var(--line); color: var(--soft); }
/* how we work, four points on a line */
.pr { background: var(--pale); }
.pr > .wide { padding-top: 96px; padding-bottom: 100px; }
.pr_line { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.pr_line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--blue); }
.pr_line li { position: relative; }
.pr_dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--pale); border: 2px solid var(--blue); margin-bottom: 22px; }
.pr_line li:first-child .pr_dot { background: var(--blue); }
.pr_line h3 { font-size: 24px; letter-spacing: -0.02em; margin-top: 10px; }
.pr_line p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 10px; }
/* our products */
.pd { padding-top: 110px; padding-bottom: 110px; }
.pd_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.pd_card { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.pd_card:hover { color: var(--ink); }
.pd_img { aspect-ratio: 1; background: var(--pale); overflow: hidden; margin-bottom: 6px; }
.pd_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pd_card:hover .pd_img img { transform: scale(1.03); }
.pd_card .disp { font-size: 22px; }

/* Work page: a chapter per product, the picture and the text taking turns on each side */
.wk { padding-top: 40px; padding-bottom: 110px; }
/* Work's hero: the products as books on a shelf; the wall takes a pale tint of the book the pointer rests on (--wc,
   set by site.js; registered so the tint fades) */
@property --wc { syntax: '<color>'; inherits: true; initial-value: #cf0f24; }
.wkh { background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 9%, #fff), color-mix(in srgb, var(--wc) 19%, #fff)); transition: --wc .5s; border-bottom: 1px solid var(--line); overflow: hidden; }
.wkh_in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; padding-top: 48px; }
.wkh_copy { padding-bottom: 64px; }
.wkh .crumbs { color: #3f5567; }
.wkh_eb { margin-top: 30px; }
.wkh h1 { font-size: clamp(60px, 8.2vw, 112px); margin-top: 16px; color: var(--night); letter-spacing: -0.04em; }
.wkh h1 span { color: var(--act); }
.wkh_lead { font-size: 18px; line-height: 1.6; color: #3f5567; max-width: 470px; margin-top: 24px; }
.wkh_now { margin-top: 34px; display: inline-flex; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(255, 255, 255, .72); border-radius: 12px; color: var(--ink); transition: background .2s; }
.wkh_now:hover { background: #fff; color: var(--ink); }
.wkh_chip { flex: none; width: 14px; height: 44px; border-radius: 3px; background: var(--nc); box-shadow: inset 0 -10px 0 var(--nb); }
.wkh_now_t { display: flex; flex-direction: column; gap: 2px; }
.wkh_now .eb { color: #4d6477; }
.wkh_now_name { font: 600 22px/1.2 Manrope, Arial, sans-serif; letter-spacing: -0.02em; }
.wkh_open { margin-left: 18px; font-size: 14px; font-weight: 600; color: var(--act); }
.wkh_shelf { --s: 1; padding-bottom: 56px; }
.wkh_books { list-style: none; margin: 0; padding: 0 0 0 24px; display: flex; align-items: flex-end; gap: 12px; }
.wkb { position: relative; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: calc(var(--D) * var(--s)); height: calc(var(--H) * var(--s)); border-radius: 4px 4px 2px 2px; color: var(--t);
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .18) 16%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .2)), var(--c);
  box-shadow: 0 16px 24px -16px rgba(13, 38, 56, .3); transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s; }
.wkb::before, .wkb::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--b); box-shadow: 0 8px 0 -1px var(--b); }
.wkb::before { top: 11%; }
.wkb::after { bottom: 17%; }
.wkb:hover { color: var(--t); }
.wkb.on { transform: translateY(-22px); box-shadow: 0 30px 36px -16px rgba(13, 38, 56, .4); }
.wkb_no { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.wkb_name { margin-top: calc(42px * var(--s)); writing-mode: vertical-rl; font: 600 calc(25px * var(--s))/1 Manrope, Arial, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.wkb_label { position: absolute; bottom: calc(17% + 18px); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.wkb_slot { --D: 74px; --H: 300px; justify-content: flex-end; background: none; border: 1.5px dashed rgba(18, 50, 74, .35); box-shadow: none; color: #3f5567; }
.wkb_slot::before, .wkb_slot::after { display: none; }
.wkb_slot .wkb_name { margin: 0 0 14px; font-size: 15px; }
.wkb_slot .wkb_label { position: static; margin-bottom: 16px; }
.wkb_slot:hover { color: var(--act); border-color: var(--act); }
.wkh_ledge { height: 14px; background: #fff; box-shadow: 0 1px 0 rgba(18, 50, 74, .12), 0 24px 28px -14px rgba(13, 38, 56, .3); }
@media (max-height: 800px) and (min-width: 861px) { .wkh_shelf { --s: .82; } .wkb:not(.wkb_slot) .wkb_label { display: none; } }
@media (max-width: 1080px) {
  .wkh_in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wkh_copy { padding-bottom: 48px; }
}
@media (max-width: 760px) {
  .wkh_in { padding-top: 28px; }
  .wkh_copy { padding-bottom: 40px; }
  .wkh_lead { font-size: 16px; }
  .wkh_now { display: flex; }
  .wkh_open { margin-left: auto; }
  .wkh_shelf { --s: .58; padding-bottom: 36px; }
  .wkh_books { padding-left: 0; gap: 8px; justify-content: center; }
  .wkb_label { display: none; }
  .wkb_no { margin-top: 12px; font-size: 10px; }
  .wkb_slot .wkb_name { font-size: 12px; }
  .wkb.on { transform: translateY(-14px); }
}

.wk_row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 72px 0; border-bottom: 1px solid var(--line); }
.wk_row:nth-of-type(even) .wk_img { order: 2; }
.wk_img { display: block; aspect-ratio: 1; max-width: 460px; width: 100%; background: var(--pale); overflow: hidden; }
.wk_row:nth-of-type(even) .wk_img { justify-self: end; }
.wk_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wk_img:hover img { transform: scale(1.03); }
.wk_main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.wk_main > .eb { color: var(--blue); }
.wk_no { color: var(--soft); margin-right: 10px; }
.wk_main h2 { font-size: clamp(36px, 4.4vw, 56px); }
.wk_text { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 500px; }
.wk_facts { display: flex; flex-direction: column; gap: 10px; }
.wk_links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.wk_links a { color: var(--act); border-bottom: 1px solid currentColor; }
.wk_main .btn { margin-top: 8px; }
.wk_next { aspect-ratio: auto; min-height: 260px; margin-top: 80px; }

/* ---------- Get a quote ---------- */

.qp { padding-top: 60px; padding-bottom: 100px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 50px; align-items: start; }
.qp_step { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 600; }
.qp_step span { width: 34px; height: 34px; border-radius: 50%; background: var(--act); color: #fff; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#quote-form-title { margin-top: 60px; margin-bottom: 24px; }
.qp_tabs { display: flex; flex-wrap: wrap; margin-top: 26px; border-bottom: 1px solid var(--line); }
.qp_tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 18px; min-height: 44px; font-size: 15px; color: var(--soft); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.qp_tabs button:hover { color: var(--act); }
.qp_tabs button[aria-selected="true"] { color: var(--act); font-weight: 600; border-bottom-color: var(--act); }
.qp_count { font-size: 11px; font-weight: 600; background: var(--act); color: #fff; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.qp_count[hidden] { display: none; }
.qp_hint { font-size: 14px; color: var(--muted); margin-top: 22px; }
.qp_techs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.qp_tech { position: relative; cursor: pointer; }
.qp_tech input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qp_tech span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 18px; font-size: 15px; border: 1px solid var(--field); background: #fff; }
.qp_tech:hover span { border-color: var(--act); }
.qp_tech input:checked + span { background: var(--act); border-color: var(--act); color: #fff; }
.qp_tech input:checked + span::after { content: "✓"; }
.qp_tech input:focus-visible + span { outline: 3px solid #0088dc; outline-offset: 3px; }
/* app platforms in their own brand: the logo in its colour, the brand colour when chosen */
.qp_brand span { border-radius: 999px; }
.qp_logo { width: 20px; height: 20px; flex: none; color: var(--mark); }
.qp_logo_wide { width: 30px; height: 30px; margin: -5px -2px; }
.qp_brand .qp_logo[viewBox] { transition: color .15s; }
.qp_brand:hover span { border-color: var(--mark); }
.qp_brand input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on); }
.qp_brand input:checked + span .qp_logo { color: var(--on); }
.qp_brand .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qp_opts_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.qp_opts_grid:not(:has(.qp_opts:not([hidden]))) { margin-top: 0; }
.qp_opts { border: 1px solid var(--line); padding: 16px 22px; margin: 0; min-width: 0; }
.qp_opts[hidden] { display: none; }
.qp_opts legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.qp_opt { display: flex; gap: 12px; padding: 8px 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.qp_opt input { width: 18px; height: 18px; accent-color: var(--act); margin: 2px 0 0; flex: none; }
.qp_opt strong { font-weight: 600; display: block; }
.qp_opt span span { color: var(--muted); font-size: 14px; }
.qp_summary { border: 1px solid var(--line); background: #f8fbfd; padding: 26px; position: sticky; top: calc(var(--hh) + 20px); }
.qp_list { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.qp_empty { color: var(--muted); padding: 9px 0; }
.qp_item { border-bottom: 1px solid #e3edf4; padding: 9px 0; }
.qp_item_head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qp_item_head strong { font-weight: 600; }
.qp_item > span { color: var(--soft); font-size: 14px; }
.qp_remove { background: none; border: 0; color: var(--muted); font-size: 20px; width: 32px; height: 32px; cursor: pointer; flex: none; }
.qp_remove:hover { color: var(--act); }
.qp_summary .btn { margin-top: 22px; }
.qp_clear { display: block; margin: 12px auto 0; background: none; border: 0; font-size: 13px; color: var(--soft); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* ---------- Jobs ---------- */

.jobs { padding-top: 60px; padding-bottom: 100px; }
/* on a window taller than the page (a 2K screen) the cards' band takes the rest of the height, the cards in its middle */
#main:has(> .jobs) { display: flex; flex-direction: column; }
#main > .jobs { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.jobs_in { width: 100%; }
.job_cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.job_card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); padding: 25px; color: var(--ink); min-height: 220px; transition: border-color .2s, background .2s; }
.job_card:hover { color: var(--ink); border-color: var(--act); }
.job_card[aria-current] { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); background: var(--pale); }
.job_card .eb { font-size: 10px; }
.job_card h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.job_card p { font-size: 14px; line-height: 1.55; color: var(--muted); flex-grow: 1; }
.job_card { position: relative; }
.job_no { position: absolute; top: 22px; right: 24px; font-family: Manrope, 'DM Sans', Arial, sans-serif; font-size: 13px; font-weight: 600; color: #a9c3d6; }
.job_card .more { transition: gap .2s; display: inline-flex; gap: 6px; }
.job_card:hover .more { gap: 12px; }
.job_card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(17, 45, 67, .5); }
.job_card { transition: border-color .2s, background .2s, transform .25s, box-shadow .25s; }
/* without JavaScript: every ad above the form */
.job_panel { margin-top: 48px; border: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + 20px); }
.job_panel:focus { outline: none; }
.job_bar, .job_jump { display: none; }
.job_hero .wide { padding: 0; }
.job_hero, .job_body { padding: 36px 44px 0; }
.job_ad { padding-bottom: 36px; }
.job_hero .eb { color: var(--blue); }
.job_ad h2 { font-size: clamp(30px, 3.2vw, 40px); margin-top: 10px; }
.job_summary { font-size: 16px; line-height: 1.65; color: var(--muted); margin-top: 16px; max-width: 640px; }
.job_body h3 { margin: 28px 0 12px; }
.job_body h3:first-child { margin-top: 0; }
.job_form { background: var(--pale); padding: 44px; }
.job_form_title { margin-bottom: 4px; }
.job_for::before { content: " for "; }
.job_for:empty::before { content: none; }
/* with JavaScript: a full-screen sheet that grows out of the card that opened it (site.js sets --ct/--cr/--cb/--cl to
   the card's edges and drops .from), dark while it grows, then the ad and the form come in */
.js .job_panel { position: fixed; inset: 0; z-index: 50; margin: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff;
  display: grid; grid-template-columns: [full-start] minmax(var(--gut), 1fr) [main-start] minmax(0, 700px) [side-start] minmax(0, 440px) [main-end] minmax(var(--gut), 1fr) [full-end]; grid-template-rows: auto auto 1fr; align-content: start; column-gap: 0;
  clip-path: inset(0 round 0); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), background-color .35s .4s; }
.js .job_panel:not(.on) { display: none; }
.js .job_panel.from { clip-path: inset(var(--ct) var(--cr) var(--cb) var(--cl) round 12px); background-color: var(--night); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1) .12s, background-color .2s; }
.js .job_ads, .js .job_ad.on { display: contents; }
.js .job_ad:not(.on) { display: none; }
.js .job_bar { grid-column: full; position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 max(var(--gut), calc((100% - 1140px) / 2)); background: rgba(13, 38, 56, .94); backdrop-filter: blur(8px); color: #fff; }
.job_back { color: #cfe0ec; font-size: 15px; font-weight: 600; display: inline-flex; gap: 10px; }
.job_back:hover { color: #fff; }
.job_x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #cfe0ec; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; }
.job_x:hover { color: #fff; border-color: #fff; }
.job_x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.js .job_hero { grid-column: full; padding: 56px 0 72px; background-color: var(--night); background-image: linear-gradient(rgba(143, 200, 242, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 200, 242, .08) 1px, transparent 1px); background-size: 48px 48px; color: #fff; }
.js .job_hero .wide { width: min(1140px, calc(100% - 2 * var(--gut))); max-width: none; margin: 0 auto; padding: 0; }
.js .job_hero .eb { color: #8fc8f2; }
.js .job_hero h2 { font-size: clamp(48px, 7.4vw, 104px); line-height: 1; letter-spacing: -.035em; color: #fff; margin-top: 18px; }
.js .job_hero .job_summary { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--night-text); max-width: 760px; margin-top: 24px; }
.js .job_jump { display: inline-flex; margin-top: 32px; }
.js .job_body { grid-column: main-start / side-start; padding: 64px 56px 96px 0; }
.js .job_body h3 { margin: 44px 0 16px; }
.js .job_body h3:first-child { margin-top: 0; }
.js .job_body .ticks li { font-size: 16.5px; padding: 13px 0; }
.js .job_ad { padding: 0; }
.js .job_apply { grid-column: side-start / main-end; padding: 48px 0 96px; margin-top: -120px; position: relative; z-index: 1; }
.js .job_form { position: sticky; top: 88px; border-radius: 20px; padding: 36px 32px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(17, 45, 67, .45); scroll-margin-top: 88px; }
/* the content comes in once the sheet has grown */
.js .job_panel .job_bar, .js .job_panel .job_hero .wide, .js .job_panel .job_body, .js .job_panel .job_apply { transition: opacity .35s .45s, transform .5s cubic-bezier(.2, .7, .3, 1) .45s; }
.js .job_panel.from .job_bar, .js .job_panel.from .job_hero .wide, .js .job_panel.from .job_body, .js .job_panel.from .job_apply { opacity: 0; transform: translateY(28px); transition: opacity .15s, transform .15s; }
html.sheet_open { overflow: hidden; }
.file { position: relative; }
.file input[type=file] { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file_box { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px dashed #8fb0c8; border-radius: 16px; background: #fff; padding: 18px; font-weight: 400; font-size: 14px; color: var(--soft); text-align: center; }
.file:hover .file_box, .file input:focus-visible ~ .file_box { border-color: var(--act); }
.file input:focus-visible { outline: none; }
.file:focus-within .file_box { outline: 3px solid #0088dc; outline-offset: 3px; }
.file_pick { color: var(--act); text-decoration: underline; }
.file_box small { font-size: 12px; color: var(--muted); }
.site-form-file { font-weight: 600; color: var(--ink); }
.site-form-file:empty { display: none; }

/* ---------- legal pages, 404 ---------- */

.legal { max-width: 860px; margin-left: auto; margin-right: auto; padding-top: 70px; padding-bottom: 100px; font-size: 16px; line-height: 1.7; color: var(--soft); }
.legal h2 { font-family: Manrope, Arial, sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 24px; line-height: 1.25; color: var(--ink); margin: 48px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 28px 0 8px; }
.legal p, .legal ul, .legal ol { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal a { text-decoration: underline; overflow-wrap: anywhere; }
.legal_note { background: var(--pale); border-left: 3px solid var(--act); padding: 4px 24px 6px; margin: 24px 0; }
.err { padding-top: 110px; padding-bottom: 130px; }
.err h1 { font-size: clamp(48px, 7.6vw, 96px); margin-top: 22px; }
.err_text { font-size: 18px; line-height: 1.6; color: var(--muted); margin-top: 26px; max-width: 520px; }
.err_links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- widths ---------- */

@media (min-width: 1600px) {
  .hd { padding-left: calc((100vw - 1400px) / 2); padding-right: calc((100vw - 1400px) / 2); }
  /* every column as wide as the header: 4.5% of a 2560 window would be 115px a side, the column only 1050px */
  .wide { max-width: 1400px; padding-left: 0; padding-right: 0; }
  .job_cards { gap: 22px; }
  .job_card { padding: 34px 32px 30px; min-height: 300px; gap: 16px; }
  .job_card h2 { font-size: 31px; }
  .job_card p { font-size: 16px; }
  .job_card .eb { font-size: 11px; }
  .job_card .more { font-size: 16px; }
}

@media (max-width: 1080px) {
  .ch_row { grid-template-columns: 110px minmax(0, 1fr); }
  .ch_side { grid-column: 2; }
  .sb { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sx { position: static; }
  .sx ol { display: flex; gap: 8px; overflow-x: auto; border: 0; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .sx ol::-webkit-scrollbar { display: none; }
  .sx li a { display: flex; white-space: nowrap; border: 1px solid var(--line); padding: 10px 14px; }
  .sx li a[aria-current] { padding-left: 14px; border-color: var(--act); }
  .sx .btn { display: none; }
  .hd_nav, .hd_cta { display: none; }
  .hd_open { display: flex; }
  .svc { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.3fr) 30px; }
  .svc_tech { display: none; }
  .job_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job_card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .qp { grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; }
  .qp_opts_grid { grid-template-columns: minmax(0, 1fr); }
  .ft_main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft_about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .wh_in, .sh_in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pr_line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .pr_line::before { display: none; }
  .pd_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qp { grid-template-columns: minmax(0, 1fr); }
  .qp_summary { position: static; }
}

@media (max-width: 760px) {
  :root { --hh: 64px; --gut: 20px; }
  .hd { padding: 0 20px; gap: 12px; }
  .hd_brand img { width: 150px; }
  .intro_id { top: 21%; width: 72%; }
  .intro_id p { font-size: 12px; margin-top: 18px; }
  .intro_bottom { bottom: 26px; justify-content: center; }
  .intro_bottom .eb { display: none; }
  .intro_bottom a { gap: 50px; background: #ffffff99; padding: 13px 18px; border-bottom: 0; }
  .who_in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 64px; padding-bottom: 40px; }
  .who_title { font-size: 34px; }
  .who_text { margin-top: 24px; font-size: 16px; }
  .who_facts { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
  .who_facts li + li { border-left: 0; }
  .who_facts li > div, .who_facts a { padding: 18px 0 16px; }
  .sec_head { display: block; }
  .sec_lead { margin-top: 20px; font-size: 16px; }
  .services { padding-top: 72px; padding-bottom: 60px; }
  .svc_list { margin-top: 32px; }
  .services { padding: 72px 0 76px; }
  .fl:not(.fl_m) { display: none; }
  .fl_icon { max-width: 80px; }
  .svc { grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 6px 12px; padding: 22px 4px; align-items: start; }
  .svc_no { grid-row: 1 / 3; padding-top: 5px; }
  .svc h3 { font-size: 22px; }
  .svc_text { grid-column: 2; grid-row: 2; font-size: 14px; }
  .svc .arr { grid-column: 3; grid-row: 1; }
  .work { padding-top: 20px; padding-bottom: 72px; }
  .industries { display: block; margin-top: 50px; }
  .industries p { margin-top: 10px; font-size: 16px; }
  .form_row { grid-template-columns: minmax(0, 1fr); }
  .form .btn { align-self: stretch; }
  .ft_main { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 50px; padding-bottom: 36px; }
  .ft_bottom { flex-direction: column; align-items: flex-start; padding-left: 20px; padding-right: 20px; }
  .ft_links { margin-left: -12px; }
  .cv_in { display: block; padding-top: 32px; padding-bottom: 40px; }
  .cv h1 { font-size: clamp(44px, 13vw, 56px); margin-top: 22px; }
  .cv_eb { margin-top: 26px; }
  .cv_lead { margin-top: 18px; font-size: 16px; padding: 0; }
  .sec { padding-top: 56px; padding-bottom: 56px; }
  .wh_in { padding-top: 32px; padding-bottom: 36px; }
  .wh_lead, .sh_lead { font-size: 16px; }
  .wh_index a { font-size: 18px; }
  .ch { padding-top: 64px; padding-bottom: 56px; }
  .ch_list { margin-top: 32px; }
  .ch_row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .ch_side { grid-column: auto; }
  .ch_no { flex-direction: row; align-items: center; justify-content: space-between; }
  .ch_row .num { font-size: 52px; }
  .ch_main p { font-size: 16px; }
  .pr > .wide { padding-top: 56px; padding-bottom: 60px; }
  .pr_line { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 34px; margin-top: 32px; }
  .pr_line::before { display: block; left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .pr_dot { position: absolute; left: -34px; top: 2px; margin: 0; }
  .pd { padding-top: 64px; padding-bottom: 64px; }
  .pd_grid { gap: 28px 14px; margin-top: 32px; }
  .wk { padding-top: 8px; padding-bottom: 72px; }
  .wk_row { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 44px 0; }
  .wk_row:nth-of-type(even) .wk_img { order: 0; justify-self: start; }
  .wk_main { gap: 14px; }
  .wk_text { font-size: 17px; }
  .wk_next { margin-top: 48px; min-height: 220px; padding: 26px; }
  .pd_card .disp { font-size: 18px; }
  .sh_in { padding-top: 28px; padding-bottom: 36px; gap: 32px; }
  .sh_actions .btn { flex: 1 1 100%; }
  .bp { height: 300px; }
  .bp_icon { width: 130px; height: 130px; top: 42%; }
  .bp_ring { width: 190px; height: 190px; top: 42%; }
  .bp_cross::after { top: 42%; }
  .bp_num { font-size: 80px; bottom: 100px; }
  .bp_chips li { padding: 9px 12px; font-size: 11px; }
  .sb { padding-top: 32px; padding-bottom: 56px; }
  .blk + .blk { margin-top: 56px; }
  .blk_title { margin: 10px 0 22px; }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl li { min-height: 0; padding: 22px 20px; gap: 10px; }
  .dl p { font-size: 18px; }
  .tech li { font-size: 16px; padding: 9px 14px; }
  .flow li { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; }
  .flow p { grid-column: 2; }
  .pg { grid-template-columns: minmax(0, 1fr); }
  .pg a { padding: 26px var(--gut); }
  .pg a + a { border-left: 0; border-top: 1px solid var(--line); }
  .talk_in { flex-direction: column; align-items: flex-start; padding-top: 44px; padding-bottom: 48px; }
  .talk h2 { font-size: 30px; }
  .talk_actions { width: 100%; flex-direction: column; }
  .talk_actions .btn { width: 100%; }
  .qp { padding-top: 36px; padding-bottom: 64px; gap: 36px; }
  .qp_step { font-size: 20px; }
  .qp_tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 12px; scrollbar-width: none; }
  .qp_tabs::-webkit-scrollbar { display: none; }
  .qp_tabs button { white-space: nowrap; padding: 14px 10px; }
  .qp_summary { padding: 22px 20px; }
  .jobs { padding-top: 32px; padding-bottom: 64px; }
  .job_cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .job_card { min-height: 0; padding: 20px; }
  .job_card h2 { font-size: 22px; }
  .job_panel { margin-top: 28px; }
  .job_hero, .job_body { padding: 24px 20px 0; }
  .job_form { padding: 28px 20px 32px; }
  .js .job_panel { grid-template-columns: [full-start] var(--gut) [main-start side-start] minmax(0, 1fr) [main-end] var(--gut) [full-end]; }
  .js .job_hero { padding: 36px 0 44px; }
  .js .job_hero h2 { font-size: 46px; }
  .js .job_body { grid-column: main-start / main-end; padding: 36px 0 12px; }
  .js .job_body .ticks li { font-size: 15.5px; }
  .js .job_apply { grid-column: main-start / main-end; margin-top: 0; padding: 12px 0 56px; }
  .js .job_form { position: static; padding: 26px 20px; }
  .legal { padding-top: 44px; padding-bottom: 64px; font-size: 15px; }
  .legal h2 { font-size: 21px; margin-top: 38px; }
  .err { padding-top: 64px; padding-bottom: 80px; }
  .err_links .btn { flex: 1 1 140px; }
}



/* phones: the books lie in a pile, spines facing us; a book opens downwards and pushes the ones below it */
@media (max-width: 860px) {
  .shelf { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; margin-top: 32px; padding: 0; }
  .shelf::after { display: none; }
  .book, .book.open { width: auto; height: auto; transition: none; }
  .book { scroll-margin-top: calc(var(--hh) + 12px); }
  .book:nth-child(odd) { margin-right: 14px; }
  .book:nth-child(even) { margin-left: 10px; }
  .book_lift, .book_3d, .book.open .book_3d { position: relative; inset: auto; left: auto; width: auto; height: auto; transform: none; perspective: none; transition: none; }
  .book:not(.open):hover .book_lift { transform: translateX(8px); }
  .book_spine, .book_slot .book_spine { position: relative; transform: none; width: 100%; height: calc(var(--D) * .72); flex-direction: row; gap: 14px; padding: 0 16px; text-align: left;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .14) 18%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .2)), var(--c); }
  .book_slot .book_spine { background: repeating-linear-gradient(-45deg, rgba(8, 102, 173, .05) 0 8px, transparent 8px 16px); }
  .book_spine::before, .book_spine::after { left: auto; right: auto; top: 0; bottom: 0; width: 3px; height: auto; box-shadow: 6px 0 0 -1px var(--b); }
  .book_spine::before { left: 7%; }
  .book_spine::after { display: none; }
  .bs_no { margin-left: 22px; }
  .bs_title, .bs_label { writing-mode: horizontal-tb; margin: 0; }
  .bs_title { font-size: 19px; }
  .bs_label { font-size: 9.5px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bs_mark { display: none; }
  .shelf.has-open .book:not(.open) .bs_label { opacity: .8; }
  .book_cover { display: none; }
  .book_page { position: relative; inset: auto; transform: none; display: grid; grid-template-rows: 0fr; background: none; box-shadow: none; transition: grid-template-rows .55s cubic-bezier(.5, 0, .2, 1); }
  .book.open .book_page { grid-template-rows: 1fr; }
  .bp_in { min-height: 0; overflow: hidden; perspective: 1200px; }
  .bp_card { height: auto; overflow: visible; margin: 0 4px; padding: 20px 18px 22px; background: linear-gradient(180deg, rgba(17, 45, 67, .12), rgba(17, 45, 67, 0) 22px), #fbfaf6; border: 1px solid rgba(17, 45, 67, .1); border-top: 0;
    transform-origin: 50% 0; transform: rotateX(-75deg); opacity: 0; transition: transform .6s cubic-bezier(.3, .7, .3, 1), opacity .3s; }
  .book.open .bp_card { transform: none; opacity: 1; transition-delay: .12s; }
  .bp_img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 8px; }
}

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