@font-face { font-family: "Manrope"; src: url("/assets/manrope-cyrillic.c268b459a9.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("/assets/manrope-latin.a30ddcd349.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #fafaf9;
  --bg-2: #ffffff;
  --ink: #17171a;
  --ink-2: #5e5e66;
  --line: #e6e5e2;
  --card: #ffffff;
  --chip: #f2f2f0;
  --glass: rgba(250, 250, 249, .86);
  --edge: rgba(255, 255, 255, 0);
  --field: #ffffff;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235e5e66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --on-link: #ffffff;
  --scrim: rgba(250, 250, 249, .7);
  --err: #c4161f;
  --blue: #17171a;
  --blue-hover: #34343a;
  --btn-ink: #ffffff;
  --link: #c2410c;
  --soft: rgba(194, 65, 12, .07);
  --shadow: 0 1px 2px rgba(16, 16, 20, .05);
  --glow: 0 0 0 transparent;
  --il-line: #dddcd8;
  --il-a: #ffffff;
  --il-b: #f4f4f2;
  --il-c: #f7f7f5;
  --il-d: #ebebe8;
  --il-edge: #d4d3cf;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --gutter: max(20px, calc((100vw - 1200px) / 2));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e10;
  --bg-2: #131315;
  --ink: #ededef;
  --ink-2: #a0a0a8;
  --line: #27272b;
  --card: #151517;
  --chip: #1c1c1f;
  --glass: rgba(14, 14, 16, .82);
  --edge: rgba(255, 255, 255, .04);
  --field: #111113;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a0a0a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --on-link: #0e0e10;
  --scrim: rgba(8, 8, 10, .6);
  --err: #ff6b66;
  --blue: #ededef;
  --blue-hover: #ffffff;
  --btn-ink: #0e0e10;
  --link: #ff7a4d;
  --soft: rgba(255, 122, 77, .1);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03);
  --glow: 0 0 0 transparent;
  --il-line: #2a2a2f;
  --il-a: #1d1d20;
  --il-b: #141416;
  --il-c: #232327;
  --il-d: #18181b;
  --il-edge: #36363c;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; background: var(--bg); }
html.locked { overflow: hidden; }
body { margin: 0; color: var(--ink); font: 400 15px/1.6 "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.015em; line-height: 1.22; text-wrap: balance; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--bg); border-radius: 8px; }
.skip:focus { top: 8px; }
.skip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* pictures follow the theme; a hidden lazy image is never downloaded */
.for-light { display: block; }
.for-dark { display: none; }
[data-theme="dark"] .for-light { display: none; }
[data-theme="dark"] .for-dark { display: block; }

/* links and buttons */
/* buttons: one solid colour, a clear press and a focus ring; secondary ones stay neutral */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; background: var(--blue); color: var(--btn-ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.btn:hover { background: var(--blue-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 8px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn .arr { width: 16px; height: 16px; margin-right: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.btn-line { background: var(--chip); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn-line:hover { background: var(--chip); border-color: var(--ink-2); color: var(--ink); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.loading, .btn.loading:disabled { opacity: 1; cursor: progress; }
.btn.loading .arr { display: none; }
.btn.loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: turn .7s linear infinite; }
@keyframes turn { to { transform: rotate(1turn); } }
.more { color: var(--link); font-weight: 600; }
.more::after { content: "›"; display: inline-block; margin-left: 5px; transition: transform .2s var(--ease); }
.more:hover::after, .card:hover .more::after { transform: translateX(3px); }
.round { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--il-edge); border-radius: 50%; background: var(--chip); color: var(--ink); font-style: normal; font-size: 14px; font-weight: 600; }
.round svg { width: 20px; height: 20px; }

/* floating top bar */
.nav { position: sticky; top: 12px; z-index: 50; margin: 12px var(--gutter) 0; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-in { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-inline: 18px 12px; font-size: 14px; }
.logo { display: inline-flex; align-items: center; gap: 9px; margin-right: 22px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.logo::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 4.5px solid var(--link); }
.nav-item > button { height: 34px; padding: 0 12px; background: none; border: 0; border-radius: 9px; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.nav-item > button:hover, .nav-item.open > button { background: var(--chip); color: var(--ink); }
.nav-gap { flex: 1; }
.nav-order { margin-right: 4px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--chip); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.icon-btn:hover { border-color: var(--link); }
.icon-btn svg { width: 17px; height: 17px; }
.burger { display: none; margin-left: 4px; }
.sun { display: none; }
[data-theme="dark"] .sun { display: block; }
[data-theme="dark"] .moon { display: none; }

.fly { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; border-radius: 16px; background: var(--bg-2); transition: max-height .3s var(--ease), opacity .18s, visibility .3s; }
.nav-item.open .fly { max-height: 560px; opacity: 1; visibility: visible; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fly-in { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 26px; }
.fly h3 { font-size: 22px; }
.fly-line { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.fly-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.fly-list a { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 12px; transition: background .15s; }
.fly-list a:hover { background: var(--chip); }
.fly-list img { flex: none; width: 52px; height: 52px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.fly-list b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fly-list span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* first screen: the headline names the four directions in their colours, the film sits beside it */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: -68px; padding: 140px var(--gutter) clamp(120px, 15vw, 230px); }
.hero-copy, .hero-media { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(36px, 4.3vw, 64px); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; }
.hero h1 b { font-weight: inherit; color: var(--g); }
.hero-copy > p { max-width: 32em; margin-top: 18px; color: var(--ink-2); font-size: clamp(15px, 1.25vw, 17px); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 28px; color: var(--ink-2); font-size: 13.5px; }
.hero-facts b { display: block; color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.hero-media .promo { width: 100%; margin: 0; }
.ask { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; max-width: 520px; margin: 28px 0 0; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); transition: border-color .15s, box-shadow .15s; }
.ask:focus-within { border-color: var(--ink-2); }
.ask input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 0; background: none; outline: 0; font-size: 15px; }
.ask input::placeholder { color: var(--ink-2); opacity: 1; }
.ask .btn { flex: none; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 17vw, 270px); animation: wave-in 1.5s var(--ease) both; }
.hero-wave.live img { opacity: 0; }
.hero-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); }
.hero-wave img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: opacity .8s; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent); }
/* only movement, no fade: if animations never run, the wave is still there */
@keyframes wave-in { from { transform: translateY(36px) scale(1.03); } to { transform: none; } }
/* promo video in a glass frame, over the wave */
.promo { position: relative; z-index: 1; width: min(980px, 100%); aspect-ratio: 16 / 9; margin: 40px auto 0; overflow: hidden; border: 1px solid var(--il-edge); border-radius: 14px; background: var(--card); animation: rise .9s var(--ease) .3s both; }
.promo video { width: 100%; height: 100%; object-fit: cover; vertical-align: top; }
.promo-toggle { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--il-edge); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; opacity: .85; transition: opacity .2s, border-color .2s; }
.promo-toggle:hover, .promo-toggle:focus-visible { opacity: 1; border-color: var(--link); }
.promo-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promo-toggle .play { display: none; fill: currentColor; }
.promo.paused .promo-toggle .play { display: block; }
.promo.paused .promo-toggle .pause { display: none; }

/* directions: four coloured chapters to jump to */
.dirs { padding: 10px var(--gutter) 0; }
.dirs-label { color: var(--ink-2); font-size: 14px; }
.dirs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.dirs-list a { display: grid; align-content: start; gap: 6px; padding: 20px 20px 18px; border: 1px solid transparent; border-radius: 16px; background: var(--g-tint); color: var(--ink); transition: border-color .2s, transform .3s var(--ease); }
.dirs-list a:hover { transform: translateY(-2px); }
.dir-n { color: var(--g); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.dirs-list b { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.dirs-list svg { flex: none; width: 22px; height: 22px; }
.dirs-list small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.dirs-list em { margin-top: 10px; color: var(--g); font-size: 13.5px; font-style: normal; font-weight: 600; }

/* sections */
.sec { padding: clamp(60px, 7vw, 100px) var(--gutter) 0; }
.sec-title { font-size: clamp(27px, 3.1vw, 40px); font-weight: 600; letter-spacing: -.02em; text-align: center; }
.sec-sub { max-width: 42em; margin: 12px auto 0; color: var(--ink-2); text-align: center; font-size: clamp(14px, 1.2vw, 16px); }

/* a direction as a chapter: its number, name and services stay in view on the left, photo cards fill the right */
.chapter { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.chapter-side { position: sticky; top: 100px; }
.chapter-n { display: block; color: var(--g); font-size: clamp(48px, 5.4vw, 80px); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.chapter-side .sec-title { margin-top: 16px; text-align: left; }
.chapter-side .sec-sub { margin: 10px 0 0; text-align: left; }
.chapter-list { display: grid; margin-top: 24px; border-top: 1px solid color-mix(in srgb, var(--g) 28%, var(--line)); }
.chapter-list a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--g) 28%, var(--line)); font-size: 15px; font-weight: 500; transition: color .15s, padding .25s var(--ease); }
.chapter-list a::after { content: "›"; color: var(--g); }
.chapter-list a:hover { color: var(--g); padding-left: 4px; }
.chapter-side .btn { margin-top: 24px; }

/* service cards: two columns; the first card and a last card left alone take the whole row */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color .25s, transform .3s var(--ease); }
.cards > .card:first-child, .cards > .card:last-child:nth-child(even) { grid-column: 1 / -1; }
.card:hover { border-color: var(--il-edge); }
.anim .card[data-reveal].in:hover { transform: translateY(-2px); }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.card-pic { position: relative; display: block; height: 220px; flex: none; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--chip); }
.cards > .card:first-child .card-pic { height: clamp(260px, 26vw, 360px); }
.cards > .card:last-child:nth-child(even) .card-pic { height: clamp(220px, 20vw, 280px); }
.card-pic picture { height: 100%; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: scale .9s var(--ease); }
.card:hover .card-pic img { scale: 1.045; }
.card-text { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.card h3 { font-size: 20px; font-weight: 600; }
.cards > .card:first-child h3 { font-size: 24px; }
.card-text > p { margin: 6px 0 16px; max-width: 34em; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.card-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; font-size: 14px; }
.card .btn { position: relative; z-index: 2; }

/* problem chooser */
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 1000px; margin: 34px auto 0; border-top: 1px solid var(--line); }
.pick a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 500; line-height: 1.4; transition: color .15s, padding .25s var(--ease); }
.pick a span { flex: none; color: var(--link); font-weight: 500; font-size: 13px; }
.pick a:hover { padding-left: 6px; }

/* comparison */
.compare-wrap { max-width: 980px; margin: 34px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge); }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.compare th, .compare td { padding: 16px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-weight: 600; }
.compare tbody th { width: 26%; font-weight: 500; }
.compare .other { width: 37%; color: var(--ink-2); }
.compare .ours { width: 37%; background: var(--chip); }
.compare thead .ours { color: var(--link); }
.compare tbody td { position: relative; padding-left: 48px; }
.compare tbody .ours::before { content: ""; position: absolute; left: 25px; top: 22px; width: 11px; height: 6px; border-left: 1.8px solid var(--link); border-bottom: 1.8px solid var(--link); transform: rotate(-45deg); }
.compare tbody .other::before { content: "×"; position: absolute; left: 25px; top: 13px; font-size: 18px; color: var(--ink-2); }

/* small cards */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.points.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.point { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background-color: var(--card); background-image: linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge); transition: border-color .25s, box-shadow .3s var(--ease); }
.point:hover { border-color: var(--il-edge); box-shadow: inset 0 1px 0 var(--edge), var(--glow); }
.point .round { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
.point h3 { font-size: 18px; }
.point p { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; counter-reset: s; text-align: center; }
.steps li { position: relative; counter-increment: s; }
.steps li::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border: 1px solid var(--il-edge); border-radius: 50%; background-color: var(--chip); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); font-size: 18px; font-weight: 600; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 44px); right: calc(-50% - 12px + 44px); top: 32px; border-top: 1px dashed var(--il-edge); transform-origin: left; transition: transform 1s var(--ease) .4s; }
.anim .steps li:not(.in)::after { transform: scaleX(0); }
.steps h3 { font-size: 18px; }
.steps p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* closing call */
.closing { margin: clamp(60px, 7vw, 100px) var(--gutter) 0; padding: clamp(56px, 7vw, 96px) 24px; border-top: 1px solid var(--line); text-align: center; }
/* the four direction colours as one bar: the brand in one line */
.closing::before { content: ""; display: block; width: min(320px, 70%); height: 6px; margin: 0 auto 34px; border-radius: 3px; background: linear-gradient(90deg, var(--c-infra) 0 25%, var(--c-dev) 25% 50%, var(--c-auto) 50% 75%, var(--c-ai) 75%); }
.closing h2 { font-size: clamp(27px, 3.1vw, 42px); }
.closing p { max-width: 36em; margin: 12px auto 24px; color: var(--ink-2); }
.cta-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* service: sticky bar */
.subnav { position: sticky; top: 76px; z-index: 30; margin: 8px var(--gutter) 0; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.subnav-in { display: flex; align-items: center; gap: 22px; min-height: 46px; padding-inline: 18px 8px; }
.subnav b { margin-right: auto; font-size: 15px; font-weight: 600; white-space: nowrap; }
.subnav a:not(.btn) { font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: color .15s; }
.subnav a:not(.btn):hover, .subnav a.on { color: var(--link); }

/* service: hero, text on the left and the photo on the right */
.s-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(40px, 5vw, 72px) var(--gutter) 0; }
.s-hero h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
.s-hero .lead { max-width: 34em; margin-top: 16px; color: var(--ink-2); font-size: clamp(15px, 1.25vw, 17px); }
.s-hero .cta-row { justify-content: flex-start; margin-top: 26px; }
.s-pic { height: clamp(260px, 30vw, 440px); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--chip); }
.s-pic picture { height: 100%; }
.s-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* service: plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--line); border-radius: 14px; background-color: var(--card); background-image: linear-gradient(180deg, var(--card), var(--bg-2)); box-shadow: inset 0 1px 0 var(--edge); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.plan:hover { box-shadow: inset 0 1px 0 var(--edge), var(--glow); }
.plan.best, .plan.best:hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--glow); }
.badge { position: absolute; left: 24px; top: -11px; padding: 3px 10px; border-radius: 6px; background: var(--blue); color: var(--btn-ink); font-size: 12px; font-weight: 600; }
.plan h3 { font-size: 22px; }
.plan .for { margin-top: 4px; min-height: 2.9em; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.plan ul { margin: 14px 0 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan .btn { margin-top: auto; }
.plan-price { margin-top: 8px; font-size: 15px; font-weight: 600; }
.ticks li { position: relative; padding: 5px 0 5px 26px; font-size: 14px; line-height: 1.4; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 11px; height: 6px; border-left: 1.8px solid var(--link); border-bottom: 1.8px solid var(--link); transform: rotate(-45deg); }

/* service: questions */
.faq { max-width: 860px; margin: 30px auto 0; padding: 4px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.faq details:not(:last-child) { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 17px 0; list-style: none; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.4; transition: color .15s; }
.faq summary:hover { color: var(--link); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 12px; height: 12px; color: var(--ink-2); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .25s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }
.faq details p { padding-bottom: 18px; max-width: 44em; color: var(--ink-2); }

.buybar { display: none; }

/* order */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(60px, 7vw, 96px); }
.order h1 { font-size: clamp(30px, 3.6vw, 48px); }
.order-side > p { margin-top: 12px; max-width: 28em; color: var(--ink-2); font-size: clamp(14px, 1.2vw, 16px); }
.next { margin-top: 30px; }
.next li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.next b { color: var(--ink); font-weight: 600; }
.next span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--il-edge); border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 600; }
.direct { margin-top: 24px; display: grid; gap: 4px; justify-items: start; }
.direct span { font-size: 13px; color: var(--ink-2); }
.direct a { color: var(--link); font-size: 17px; }
form.lead { align-self: start; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
/* form fields: label above, roomy input, a hint under it that turns into the error */
.lead-head { display: grid; gap: 3px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lead-head b { font-size: 20px; font-weight: 600; }
.lead-head span { color: var(--ink-2); font-size: 13.5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.fld { display: block; margin-bottom: 18px; }
.fld > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fld > span em { font-style: normal; font-weight: 500; color: var(--ink-2); }
.fld input, .fld textarea, .fld select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); font-size: 15px; outline: 0; box-shadow: inset 0 1px 2px rgba(10, 8, 40, .05); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.fld input:hover, .fld textarea:hover, .fld select:hover { border-color: var(--il-edge); }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--link); box-shadow: 0 0 0 4px var(--soft); }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: var(--chevron); background-position: right 14px center; background-size: 16px 16px; background-repeat: no-repeat; cursor: pointer; }
.fld textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.fld ::placeholder { color: var(--ink-2); opacity: 1; }
.fld small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.fld.invalid input { border-color: var(--err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 16%, transparent); }
.fld.invalid small { color: var(--err); }
.plan-box { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; padding: 10px 12px; border: 1px dashed var(--il-edge); border-radius: 10px; background: var(--soft); font-size: 14px; color: var(--ink-2); }
.plan-box[hidden] { display: none; }
.plan-box b { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; }
form.lead .btn { width: 100%; margin-top: 4px; }
.err { min-height: 1.4em; margin-top: 10px; color: var(--err); font-size: 14px; }
/* a field error is already shown under the field; the summary stays for screen readers only */
form.lead:has(.fld.invalid) .err { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.consent { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.consent a { color: var(--link); }
.ok { align-self: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 14px; background: var(--card); outline: 0; }
.ok-mark { position: relative; display: block; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--soft); border: 1px solid var(--il-edge); }
.ok-mark::after { content: ""; position: absolute; left: 17px; top: 17px; width: 16px; height: 9px; border-left: 2.2px solid var(--link); border-bottom: 2.2px solid var(--link); transform: rotate(-45deg); }
.ok h2 { font-size: 28px; }
.ok p { margin: 8px 0 20px; color: var(--ink-2); }

/* text pages */
.doc { max-width: 760px; margin-inline: auto; padding: clamp(44px, 6vw, 80px) 20px clamp(56px, 7vw, 92px); }
.doc h1 { overflow-wrap: break-word; font-size: clamp(28px, 3.6vw, 44px); }
.doc .meta { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.doc h2 { margin: 28px 0 6px; font-size: 20px; }
.doc p { color: var(--ink-2); }
.lost { min-height: 62vh; display: grid; place-content: center; justify-items: center; padding: 60px 20px; text-align: center; }
.lost h1 { font-size: clamp(30px, 3.6vw, 48px); }
.lost p { margin: 10px 0 22px; color: var(--ink-2); font-size: 17px; }

/* footer */
.foot { padding: 44px var(--gutter) 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-bottom: 30px; }
.foot h4 { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.foot li { margin-bottom: 7px; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 26px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13px; }
.foot-end div { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* reveal */
.anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .25s, box-shadow .3s var(--ease); }
.anim [data-reveal].in { opacity: 1; transform: none; }
.cards > [data-reveal]:nth-child(2), .plans > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .points > [data-reveal]:nth-child(2) { transition-delay: .07s; }
.cards > [data-reveal]:nth-child(3), .plans > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .points > [data-reveal]:nth-child(3) { transition-delay: .14s; }
.steps > [data-reveal]:nth-child(4) { transition-delay: .21s; }

/* page changes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }

@media (max-width: 1000px) {
  .nav-item { display: none; }
  .burger { display: grid; }
  .nav.mobile-open { position: fixed; inset: 0; z-index: 55; margin: 0; border: 0; border-radius: 0; background: var(--bg); overflow-y: auto; }
  .nav.mobile-open .nav-in { padding-inline: 20px; }
  .m-menu { display: none; }
  .nav.mobile-open .m-menu { display: block; padding: 6px 20px 60px; }
  .m-menu h4 { margin: 22px 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .m-menu a { display: block; padding: 7px 0; font-size: 20px; font-weight: 500; line-height: 1.25; }
  .hero, .s-hero { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 124px; }
  .dirs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter { grid-template-columns: 1fr; }
  .chapter-side { position: static; }
  .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li::after { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan .for { min-height: 0; }
  .order { grid-template-columns: 1fr; }
  .subnav a:not(.btn) { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1001px) { .m-menu { display: none; } }

@media (max-width: 734px) {
  .nav-in { padding-inline: 14px 8px; }
  .logo { margin-right: 8px; }
  .nav-order { padding-inline: 10px; }
  .hero { padding-top: 108px; }
  .dirs-list { grid-template-columns: 1fr; }
  /* on a phone the cards follow right away, so the list of their names would only repeat them */
  .chapter-list { display: none; }
  .ask .btn { padding: 0 14px; }
  .cards, .points, .points.two, .pick, .steps { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare tbody td { padding: 0; border: 0; }
  .compare tbody td { padding-left: 24px; margin-top: 8px; }
  .compare tbody .other::before { left: 3px; top: -8px; }
  .compare tbody .ours { padding: 8px 8px 8px 30px; border-radius: 8px; }
  .compare tbody .ours::before { left: 10px; top: 15px; }
  .s-pic { height: 230px; }
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
  .with-bar .foot { padding-bottom: 76px; }
  .subnav .btn { display: none; }
  .steps { gap: 28px; }
}

/* first screen arrives in order */
.hero-copy > p, .ask, .hero-facts { animation: rise .8s var(--ease) both; }
.hero-copy > p { animation-delay: .45s; }
.ask { animation-delay: .55s; }
.hero-facts { animation-delay: .65s; }
/* the headline rises one word at a time */
.hero h1 .w { display: inline-block; animation: rise .8s var(--ease) both; }
.hero h1 .w:nth-child(2) { animation-delay: .05s; } .hero h1 .w:nth-child(3) { animation-delay: .1s; } .hero h1 .w:nth-child(4) { animation-delay: .15s; }
.hero h1 .w:nth-child(5) { animation-delay: .2s; } .hero h1 .w:nth-child(6) { animation-delay: .25s; } .hero h1 .w:nth-child(7) { animation-delay: .3s; } .hero h1 .w:nth-child(8) { animation-delay: .35s; }
.dirs-list a { animation: rise .7s var(--ease) both; }
.dirs-list a:nth-child(2) { animation-delay: .08s; }
.dirs-list a:nth-child(3) { animation-delay: .16s; }
.dirs-list a:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* top bar: reading progress and a firmer look once scrolled */
.nav { transition: box-shadow .3s; }
.nav.scrolled { box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.nav::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--link)); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; }
.nav.mobile-open::after { display: none; }

/* running list of services */
.marquee { position: relative; margin-top: 26px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: run 48s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee a { display: inline-flex; align-items: center; gap: 8px; margin-right: 34px; color: var(--ink-2); font-size: 14px; white-space: nowrap; transition: color .15s; }
.marquee a:hover { color: var(--link); }
.marquee svg { width: 18px; height: 18px; }
@keyframes run { to { transform: translateX(-50%); } }

/* comparison rows arrive one by one */
.anim .compare-wrap.in tbody tr { animation: rise .55s var(--ease) both; }
.compare-wrap.in tbody tr:nth-child(2) { animation-delay: .07s; }
.compare-wrap.in tbody tr:nth-child(3) { animation-delay: .14s; }
.compare-wrap.in tbody tr:nth-child(4) { animation-delay: .21s; }
.compare-wrap.in tbody tr:nth-child(5) { animation-delay: .28s; }
.compare-wrap.in tbody tr:nth-child(6) { animation-delay: .35s; }

/* colour of each direction: infrastructure blue, development orange, automation green, AI amber.
   --g is the colour itself, --g-tint the quiet background of its section, --g-ink the text that sits on --g. */
/* picked in OKLCH at one lightness and strength, so no direction shouts louder than another */
:root { --c-infra: #2068cb; --c-dev: #b63f00; --c-auto: #007e3a; --c-ai: #8e6400; --t-infra: #ebf4ff; --t-dev: #ffefe8; --t-auto: #e8f8ee; --t-ai: #faf3e3; --g-ink: #ffffff; }
:root[data-theme="dark"] { --c-infra: #7db9ff; --c-dev: #ff9868; --c-auto: #5bd295; --c-ai: #e3ae28; --t-infra: #111924; --t-dev: #22140e; --t-auto: #0e1c14; --t-ai: #1e170a; --g-ink: #0e0e10; }
.g-infra { --g: var(--c-infra); --g-tint: var(--t-infra); }
.g-dev { --g: var(--c-dev); --g-tint: var(--t-dev); }
.g-auto { --g: var(--c-auto); --g-tint: var(--t-auto); }
.g-ai { --g: var(--c-ai); --g-tint: var(--t-ai); }

/* home: every direction gets its own tinted band and a coloured mark beside its title */
.cat { margin: clamp(48px, 6vw, 80px) 12px 0; padding: clamp(48px, 6vw, 84px) max(16px, calc(var(--gutter) - 12px)); border-radius: 22px; background: var(--g-tint); }
.cat .sec-sub { color: var(--ink-2); }
.card[class*="g-"] .more { color: var(--g); }
.card[class*="g-"]:hover { border-color: var(--g); }
.dirs-list a[class*="g-"] svg, .marquee a[class*="g-"] svg { color: var(--g); }
.dirs-list a[class*="g-"]:hover { border-color: var(--g); box-shadow: none; }
.pick a[class*="g-"] span { color: var(--g); }
.pick a[class*="g-"]:hover { border-bottom-color: var(--g); }
.fly-in[class*="g-"] h3 { color: var(--g); }

/* service pages take the colour of their direction */
body[class*="g-"] .s-hero { margin: 8px 12px 0; padding: clamp(36px, 5vw, 64px) max(16px, calc(var(--gutter) - 12px)); border-radius: 22px; background: var(--g-tint); }
body[class*="g-"] .s-pic { border-color: color-mix(in srgb, var(--g) 30%, var(--line)); }
body[class*="g-"] .subnav a.on, body[class*="g-"] .subnav a:not(.btn):hover { color: var(--g); }
body[class*="g-"] .ticks li::before { border-color: var(--g); }
body[class*="g-"] .point .round { background: var(--g-tint); border-color: color-mix(in srgb, var(--g) 40%, var(--line)); color: var(--g); }
body[class*="g-"] .steps li::before { border-color: var(--g); color: var(--g); }
body[class*="g-"] .plan.best, body[class*="g-"] .plan.best:hover { border-color: var(--g); box-shadow: inset 0 0 0 1px var(--g); }
body[class*="g-"] .badge { background: var(--g); color: var(--g-ink); }

/* sound switch: shown where there is a mouse to hear it with */
.sound-btn .snd-on, .sound-btn[aria-pressed="true"] .snd-off { display: none; }
.sound-btn[aria-pressed="true"] .snd-on { display: block; }
.sound-btn[aria-pressed="true"] { border-color: var(--link); color: var(--link); }
@media (hover: none) { .sound-btn { display: none; } }

/* pictures open like a curtain as their card arrives */
.anim .card[data-reveal] .card-pic { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .12s; }
.anim .card[data-reveal].in .card-pic { clip-path: inset(0); }

::selection { background: color-mix(in srgb, var(--link) 28%, transparent); }

/* motion tied to the scroll, where the browser supports it; elsewhere the page simply stays still */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* parallax: a photo moves slower than its card */
    .card-pic img, .s-pic img { scale: 1.14; animation: drift-y linear both; animation-timeline: view(); animation-range: cover; }
    .card:hover .card-pic img { scale: 1.19; }
    @keyframes drift-y { from { translate: 0 -6%; } to { translate: 0 6%; } }
    /* the film stands at an angle and turns to face you as the page scrolls */
    .hero { perspective: 1600px; }
    .hero-media { transform-origin: 30% 50%; animation: face-you linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
    @keyframes face-you { from { transform: rotateY(-16deg) rotateX(7deg) translateZ(-40px); } to { transform: none; } }
    /* the headline drifts up and the wave sinks behind it */
    .hero-copy { animation: lift-away linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes lift-away { to { translate: 0 -70px; opacity: .25; } }
    .hero-wave { animation: wave-in 1.5s var(--ease) both, sink linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    @keyframes sink { to { translate: 0 110px; } }
    /* chapter numbers come up to meet you */
    .chapter-n { animation: number-up linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes number-up { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
[data-vt="hosting"]{view-transition-name:pic-hosting}[data-vt="servers"]{view-transition-name:pic-servers}[data-vt="domains"]{view-transition-name:pic-domains}[data-vt="security"]{view-transition-name:pic-security}[data-vt="support"]{view-transition-name:pic-support}[data-vt="sites"]{view-transition-name:pic-sites}[data-vt="shop"]{view-transition-name:pic-shop}[data-vt="mobile"]{view-transition-name:pic-mobile}[data-vt="software"]{view-transition-name:pic-software}[data-vt="automation"]{view-transition-name:pic-automation}[data-vt="bots"]{view-transition-name:pic-bots}[data-vt="ai"]{view-transition-name:pic-ai}