@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0F1B2D;
  --ink-2: #1E3A5F;
  --paper: #F5F8FB;
  --white: #FFFFFF;
  --slate: #536479;
  --rule: #D5DEE8;
  --teal: #38E1C6;
  --teal-deep: #0A7566;
  --blue: #2B6CB0;
  --on-ink: #E8EEF5;
  --on-ink-muted: #A9B8CA;
  --max: 1120px;
  --text: 70ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 "Schibsted Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }

a { color: var(--teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, .hero :focus-visible, .work :focus-visible, .products :focus-visible, .contact :focus-visible, .site-footer :focus-visible { outline-color: var(--teal); }
[id] { scroll-margin-top: 80px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 12px 18px; background: var(--teal); color: var(--ink); font-weight: 650; text-decoration: none; border-radius: 10px; }
.skip:focus { top: 12px; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 760; }
h2 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { background: var(--ink); color: var(--on-ink); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; color: var(--on-ink); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand:hover { color: var(--white); }
.brand svg { width: 34px; height: 34px; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.site-nav a { color: var(--on-ink-muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--white); }
.langs { display: flex; border: 1px solid var(--blue); border-radius: 6px; overflow: hidden; }
.site-nav .langs a { padding: 4px 8px; font-size: 14px; font-weight: 650; letter-spacing: .04em; }
.site-nav .langs a + a { border-left: 1px solid var(--blue); }
.site-nav .langs a[aria-current] { background: var(--ink-2); color: var(--teal); }

.button {
  display: inline-block; padding: 14px 24px; border-radius: 10px;
  background: var(--teal); color: var(--ink); font-weight: 650; text-decoration: none;
  transition: background-color .15s ease, translate .2s ease;
}
.site-nav .button { color: var(--ink); }
.button:hover, .site-nav .button:hover { background: #6BEBD6; color: var(--ink); translate: 0 -1px; }
.button:active { translate: 0 0; }
.button.small { padding: 10px 18px; font-size: 16px; white-space: nowrap; }
.button.on-paper { background: var(--teal-deep); color: var(--white); }
.button.on-paper:hover { background: var(--ink); color: var(--white); }

/* Hero */
.hero { background: var(--ink); color: var(--on-ink); padding: 72px 0 96px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.hero h1 { color: var(--white); font-size: clamp(36px, 4.4vw, 50px); }
@media (min-width: 901px) { .problems li .line { display: block; } }
.hero .lead { font-size: 21px; color: var(--on-ink-muted); max-width: 38ch; margin: 28px 0 40px; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero .actions a:not(.button) { color: var(--on-ink); }
.hero .actions a:not(.button):hover { color: var(--teal); }
.facts { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 15px; color: var(--on-ink-muted); }
.facts li { position: relative; padding-left: 18px; }
.facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--teal); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.stack { display: block; width: 100%; height: auto; overflow: visible; }
.stack .layer-label { font: 500 17px "Schibsted Grotesk", sans-serif; fill: var(--on-ink-muted); }
.stack .layer-title { font: 650 19px "Schibsted Grotesk", sans-serif; fill: var(--white); }
.stack .pulse { stroke-dasharray: 6 8; }

@media (prefers-reduced-motion: no-preference) {
  .stack .layer { animation: settle 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .stack .layer-top { --from: 120px; animation-delay: .15s; }
  .stack .layer-mid { --from: 60px; animation-delay: .05s; }
  .stack .labels { animation: fade .6s ease 1.1s both; }
  .stack .pulse { animation: flow 1.6s linear 1.2s infinite; }
  .stack .layer { transition: translate .45s cubic-bezier(.2,.7,.2,1); }
  .stack:hover .layer-top { translate: 0 -10px; }
  .stack:hover .layer-mid { translate: 0 -4px; }
}

/* Scroll reveal: the script adds .reveal only to elements below the fold,
   and only when motion is allowed. Without it, everything is simply visible. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }
.reveal:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .reveal { opacity: 1; transform: none; transition: none; } .site-header { position: static; } }
@keyframes settle { from { transform: translateY(var(--from, 0)); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* Sections */
section { padding: 112px 0; }
.section-head { max-width: var(--text); margin-bottom: 64px; }
.section-head h2::before,
.about h2::before {
  content: ""; display: block; width: 72px; height: 30px; margin-bottom: 28px;
  background:
    linear-gradient(var(--teal), var(--teal)) 0 0 / 24px 8px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 0 11px / 48px 8px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 0 22px / 72px 8px no-repeat;
}
.section-head p { color: var(--slate); font-size: 21px; margin-top: 20px; max-width: 48ch; }

/* Seams: the layered edge between dark and light sections.
   No background and no shared edges: the first band paints the lower colour,
   each later band overlaps the one before it, and the seam runs 4px into both
   neighbouring sections, so every edge sits over its own colour and no hairline
   of background can show through at fractional zoom. */
.seam { position: relative; height: 136px; margin: -4px 0; z-index: 1; }
.seam i { position: absolute; inset: 0; display: block; }
.seam.to-light i:nth-child(1) { background: var(--paper); clip-path: polygon(0 64%, 100% 34%, 100% 110%, 0 110%); }
.seam.to-light i:nth-child(2) { background: var(--ink); clip-path: polygon(0 -10%, 100% -10%, 100% 18%, 0 48%); }
.seam.to-light i:nth-child(3) { background: var(--blue); clip-path: polygon(0 44%, 100% 14%, 100% 34%, 0 64%); }
.seam.to-light i:nth-child(4) { background: var(--teal); clip-path: polygon(0 60%, 100% 30%, 100% 44%, 0 74%); }
.seam.to-dark i:nth-child(1) { background: var(--ink); clip-path: polygon(0 32%, 100% 62%, 100% 110%, 0 110%); }
.seam.to-dark i:nth-child(2) { background: var(--white); clip-path: polygon(0 -10%, 100% -10%, 100% 48%, 0 18%); }
.seam.to-dark i:nth-child(3) { background: var(--teal); clip-path: polygon(0 14%, 100% 44%, 100% 62%, 0 32%); }
.seam.to-dark i:nth-child(4) { background: var(--blue); clip-path: polygon(0 28%, 100% 58%, 100% 74%, 0 44%); }
.problems + .seam.to-dark i:nth-child(2), .process + .seam.to-dark i:nth-child(2), .about + .seam.to-dark i:nth-child(2) { background: var(--paper); }

/* Problems */
.problems { background: var(--paper); padding-top: 72px; }
.problems ul { list-style: none; margin: 0; padding: 0; max-width: 960px; }
.problems li { position: relative; font-size: clamp(24px, 2.9vw, 36px); line-height: 1.22; font-weight: 700; letter-spacing: -0.025em; padding: 30px 0 30px 64px; border-bottom: 2px solid var(--ink); }
.problems li:first-child { border-top: 3px solid var(--ink); }
.problems li::before {
  content: ""; position: absolute; left: 0; top: 46px; width: 36px; height: 18px;
  background: var(--teal); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.problems li:nth-child(2)::before { background: var(--blue); }
.problems li:nth-child(3)::before { background: var(--ink-2); }
.problems .answer { margin-top: 48px; font-size: 22px; color: var(--ink); max-width: 50ch; font-weight: 500; }

/* Services */
.services { background: var(--white); }
.services dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--ink); border-left: 2px solid var(--ink); }
.services dl > div { padding: 40px 40px 44px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.services dt, .services dd { margin: 0; }
.services dt { font-weight: 760; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.1; margin: 28px 0 14px; }
.services dt { text-wrap: balance; }
.services dd { color: var(--slate); font-size: 18px; max-width: 42ch; }
.glyph { display: block; width: 120px; height: 92px; overflow: visible; }
.glyph .top { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.services dl > div:hover .glyph .top { transform: translateY(-6px); }
.tools { margin-top: 40px; color: var(--slate); font-size: 17px; max-width: 70ch; }
.tools strong { color: var(--ink); font-weight: 650; }

/* Work examples */
.work { background: var(--ink); color: var(--on-ink); }
.work .section-head p { color: var(--on-ink-muted); }
.work ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; border-top: 2px solid var(--teal); }
.work li { padding: 32px 0 36px; border-bottom: 1px solid #2A4363; }
.work h3 { font-size: 24px; color: var(--white); }
.work .kind { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--teal); }
.work .kind + p { margin-top: 14px; color: var(--on-ink-muted); }
.work .section-head a { color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.work .section-head a:hover { color: var(--white); }
.more { margin-top: 48px; max-width: 880px; }
.more summary { cursor: pointer; list-style: none; position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 10px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--white); }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 36px; height: 36px; display: grid; place-items: center; background: var(--teal); color: var(--ink); font-size: 26px; font-weight: 400; transition: transform .2s ease; }
.more[open] summary::before { transform: rotate(45deg); }
.more summary:hover { color: var(--teal); }
.work .more ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; border-top: 1px solid #2A4363; }
.more li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid #2A4363; color: var(--on-ink); font-size: 17px; }
.more li a { color: var(--teal); }
.more li a:hover { color: var(--white); }
.more .tag { flex: none; font-size: 15px; font-weight: 600; color: var(--teal); white-space: nowrap; }

/* Process */
.process { background: var(--paper); }
.process-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.3fr; gap: 72px; align-items: center; }
.steps { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.steps text { font: 800 44px "Schibsted Grotesk", sans-serif; fill: var(--white); text-anchor: middle; }
.steps text.on-teal { fill: var(--ink); }
.process ol { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 3px solid var(--ink); }
.process li { counter-increment: step; position: relative; padding: 26px 0 28px 76px; border-bottom: 2px solid var(--ink); }
.process li::before {
  content: counter(step);
  position: absolute; top: 24px; left: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--c, var(--ink-2)); color: var(--white); font-weight: 800; font-size: 24px;
}
.process li:nth-child(1) { --c: #1E3A5F; }
.process li:nth-child(2) { --c: #2B6CB0; }
.process li:nth-child(3) { --c: #1A9C88; }
.process li:nth-child(4) { --c: #38E1C6; }
.process li:nth-child(4)::before { color: var(--ink); }
.process h3 { margin-bottom: 8px; font-size: 24px; }
.process p { color: var(--slate); }
.ownership { margin-top: 72px; padding: 32px 36px; background: var(--ink); color: var(--on-ink-muted); max-width: 820px; font-size: 19px; border-left: 10px solid var(--teal); }
.ownership strong { color: var(--white); font-weight: 760; font-size: 22px; display: block; margin-bottom: 6px; letter-spacing: -0.02em; }
.process .ownership p { color: var(--on-ink-muted); }

@media (prefers-reduced-motion: no-preference) {
  .steps .step { animation: settle 1s cubic-bezier(.2,.7,.2,1) both; }
  .steps .step-2 { --from: 40px; animation-delay: .1s; }
  .steps .step-3 { --from: 80px; animation-delay: .2s; }
  .steps .step-4 { --from: 120px; animation-delay: .3s; }
}

/* Pricing */
.pricing { background: var(--white); }
.pricing table { width: 100%; border-collapse: collapse; max-width: 960px; border-top: 3px solid var(--ink); }
.pricing th, .pricing td { text-align: left; padding: 30px 24px 30px 0; border-bottom: 2px solid var(--ink); vertical-align: top; }
.pricing thead th { font-size: 15px; font-weight: 600; color: var(--slate); padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.pricing tbody th { font-size: 24px; font-weight: 760; width: 30%; letter-spacing: -0.02em; }
.pricing td { color: var(--slate); }
.pricing td.price { color: var(--ink); font-weight: 800; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; width: 22%; }
.pricing .note { margin-top: 28px; color: var(--slate); font-size: 16px; max-width: 70ch; }

/* Products */
.products { background: var(--ink); color: var(--on-ink); }
.products .section-head p { color: var(--on-ink-muted); }
.product { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; padding: 40px 0; border-top: 1px solid #2A4363; }
.product:first-of-type { border-top: 2px solid var(--teal); }
.product:last-child { border-bottom: 1px solid #2A4363; }
.product h3 { color: var(--white); font-size: clamp(26px, 2.6vw, 32px); }
.product .status { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--teal); }
.product .status a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.product p { color: var(--on-ink-muted); }
.product ul { margin: 16px 0 0; padding-left: 20px; color: var(--on-ink-muted); }
.product li + li { margin-top: 6px; }

/* About */
.about { background: var(--paper); }
.about .wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.about p + p { margin-top: 18px; }
.about-mark { display: block; margin-top: 40px; width: 220px; height: auto; }
@media (max-width: 900px) { .about-mark { display: none; } }
.about .body { color: var(--slate); max-width: 60ch; font-size: 19px; padding-top: 58px; }
.about .body p:first-child { color: var(--ink); font-size: 23px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.about .body strong { color: var(--ink); font-weight: 700; }

/* FAQ */
.faq { background: var(--white); }
.faq details { border-bottom: 2px solid var(--ink); max-width: 880px; }
.faq details:first-of-type { border-top: 3px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 56px 26px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; background: var(--ink); color: var(--teal); font-size: 26px; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--slate); padding: 0 0 28px; max-width: 64ch; }

/* Contact */
.contact { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; padding: 128px 0 160px; }
.contact .wrap { position: relative; z-index: 1; max-width: var(--max); }
.contact .wrap > div { max-width: 640px; }
.contact h2 { color: var(--white); font-size: clamp(40px, 6.4vw, 84px); max-width: 12ch; }
.contact p { color: var(--on-ink-muted); font-size: 21px; margin-top: 24px; max-width: 42ch; }
.contact .wrap > div + div { margin-top: 48px; }
.contact .mail { display: inline-block; font-size: clamp(24px, 2.8vw, 34px); font-weight: 760; letter-spacing: -0.02em; color: var(--white); text-decoration-color: var(--teal); text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-skip-ink: none; word-break: break-word; }
.contact .mail:hover { color: var(--teal); }
.contact .small { font-size: 16px; margin-top: 16px; }
.contact .next { margin-top: 56px; padding-top: 32px; border-top: 1px solid #2A4363; }
.contact .next h3 { color: var(--white); font-size: 20px; }
.contact .next ol { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: next; }
.contact .next li { counter-increment: next; position: relative; padding: 6px 0 6px 48px; color: var(--on-ink-muted); font-size: 18px; }
.contact .next li + li { margin-top: 8px; }
.contact .next li::before { content: counter(next); position: absolute; left: 0; top: 4px; width: 32px; height: 32px; display: grid; place-items: center; background: var(--c, var(--ink-2)); color: var(--white); font-weight: 800; font-size: 16px; }
.contact .next li:nth-child(2) { --c: #2B6CB0; }
.contact .next li:nth-child(3) { --c: #38E1C6; }
.contact .next li:nth-child(3)::before { color: var(--ink); }
.contact-stack { position: absolute; right: max(-60px, calc((100% - var(--max)) / 2 - 80px)); top: 50%; transform: translateY(-50%); width: 520px; height: auto; pointer-events: none; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink-muted); font-size: 15px; padding: 32px 0; border-top: 1px solid #2A4363; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer a { color: var(--on-ink-muted); display: inline-block; padding: 8px 0; }
.site-footer .wrap { align-items: center; }
.site-footer a:hover { color: var(--white); }

/* Legal pages */
.legal { padding: 72px 24px 104px; max-width: 760px; }
.legal h1 { font-size: clamp(34px, 4vw, 46px); margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin: 40px 0 10px; letter-spacing: -0.01em; line-height: 1.2; }
.legal p, .legal li { color: var(--slate); }
.legal p + p { margin-top: 12px; }

.todo { background: #FFF1B8; color: #5C4600; padding: 0 4px; border-radius: 3px; }

@media (min-width: 1340px) {
  :root { --max: 1280px; }
  .hero h1 { font-size: 58px; }
}
@media (max-width: 1000px) {
  .work ul { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: 1fr; gap: 48px; }
  .steps { max-width: 360px; }
  .services dl > div { padding: 32px 28px 36px; }
}
@media (max-width: 900px) {
  .hero .wrap, .about .wrap, .contact .wrap, .product { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 72px; }
  .hero .wrap { gap: 24px; }
  .stack { max-width: 520px; }
  .services dl { grid-template-columns: 1fr; }
  .work ul { grid-template-columns: 1fr; }
  .about .wrap { gap: 24px; }
  .about .body { padding-top: 0; }
  .contact { padding: 96px 0 120px; }
  .contact-stack { width: 420px; right: -160px; top: auto; bottom: -140px; transform: none; opacity: .4; }
}
@media (max-width: 680px) {
  body { font-size: 17px; }
  .site-nav { gap: 10px; }
  .site-header .wrap { height: 60px; gap: 12px; }
  .brand { font-size: 17px; gap: 10px; }
  .button.small { padding: 11px 13px; font-size: 15px; }
  [id] { scroll-margin-top: 72px; }
  .hero h1 { font-size: clamp(28px, 8.2vw, 40px); }
  .facts { margin-top: 32px; flex-direction: column; gap: 8px; font-size: 14px; }
  .more summary { font-size: 19px; }
  .work .more ul { grid-template-columns: 1fr; }
  .more li { flex-direction: column; gap: 4px; padding: 12px 0; }
  .contact .next { margin-top: 40px; padding-top: 24px; }
  .contact .next li { font-size: 17px; padding-left: 44px; }
  .stack .labels, .stack .pulse { display: none; }
  .stack { max-width: 300px; margin: 8px auto 0; }
  .wrap { padding: 0 20px; }
  section { padding: 72px 0; }
  .seam { height: 80px; }
  .section-head { margin-bottom: 40px; }
  .section-head h2::before, .about h2::before { margin-bottom: 20px; }
  .problems li { padding: 22px 0 22px 48px; }
  .problems li::before { top: 32px; width: 28px; height: 14px; }
  .services dl > div { padding: 28px 20px 32px; }
  .glyph { width: 100px; height: 77px; }
  .process li { padding-left: 64px; }
  .process li::before { width: 44px; height: 44px; font-size: 20px; }
  .ownership { padding: 24px 22px; border-left-width: 8px; }
  .pricing thead { display: none; }
  .pricing tr { display: block; padding: 22px 0; border-bottom: 2px solid var(--ink); }
  .pricing th, .pricing td { display: block; border: 0; padding: 0; width: auto !important; }
  .pricing td.price { margin: 6px 0 8px; }
  .faq summary { font-size: 19px; padding-right: 48px; }
  .contact { padding-bottom: 230px; }
  .contact-stack { width: 260px; right: -70px; bottom: -110px; opacity: .55; }
}
@media (max-width: 1000px) {
  .site-nav > a:not(.button) { display: none; }
}
@media (max-width: 400px) {
  .brand { font-size: 15px; gap: 8px; }
  .brand svg { width: 28px; height: 28px; }
}
@media (max-width: 500px) {
  .site-nav .button { display: none; }
}