/*
  Sections, in order:
  fonts, base, theme colors, shared layout, header, opening animation, hero, service cards,
  consultation form, cards in motion, footer, service pages, narrow screens, reduced motion.
  The last two stay at the end so they override the rules above them.
*/

/*
  Fonts, served from this site and cut down to the characters it uses (see tools/make-fonts.py).
  While Geist loads, Arial stands in, resized to take up exactly the same space, so no text moves when it arrives.
*/
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2?v=de44dd0a") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2?v=ab9b026d") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2?v=72a34cf7") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 103.04%;
  ascent-override: 97.54%;
  descent-override: 28.63%;
  line-gap-override: 0%;
}

/* Base */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
}
::selection {
  background: var(--select);
}
[hidden] {
  display: none !important;
}
#app {
  position: relative;
}
.rc {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Geist",
    "Geist Fallback",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
/* Controls, decoration and form chrome aren't text to copy. Everything else can be selected. */
.rc .logo,
.rc .lang,
.rc button,
.rc .glyph,
.rc .flow-head,
.rc .opt,
.rc .lbl,
.rc-ghost {
  -webkit-user-select: none;
  user-select: none;
}

/*
  Theme colors, on <html> so the page's scrollbar and text selection use them too.
  The canvases read theirs from colors() in js/site.js: keep the two in sync.
*/
html {
  --accent: #ff4f00;
  /* small orange text: the accent itself is too light to read at small sizes on white (3.3:1), so light mode darkens it */
  --accent-text: #ff4f00;
}
html[data-theme="light"],
html:not([data-theme]) {
  --bg: #ffffff;
  --raise: #f7f7f6;
  --text: #141414;
  --muted: #5d5d5d;
  --faint: #9b9b9b;
  --line: #e4e4e4;
  --line2: #d0d0d0;
  --node: #c6c6c6;
  --inv-bg: #141414;
  --inv-text: #ffffff;
  --field: #f2f2f0;
  --danger: #c4320a;
  --thumb: #c4c4c4;
  --select: #ffd8c7;
  --accent-text: #c73d00;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #000000;
  --raise: #0d0d0d;
  --text: #ececec;
  --muted: #a3a3a3;
  --faint: #636363;
  --line: #222222;
  --line2: #363636;
  --node: #3e3e3e;
  --inv-bg: #ececec;
  --inv-text: #000000;
  --field: #151515;
  --danger: #ff7a52;
  --thumb: #484848;
  --select: #611e00;
  color-scheme: dark;
}
/* Without JavaScript there is no data-theme, so follow the system. Must come after the light block. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #000000;
    --raise: #0d0d0d;
    --text: #ececec;
    --muted: #a3a3a3;
    --faint: #636363;
    --line: #222222;
    --line2: #363636;
    --node: #3e3e3e;
    --inv-bg: #ececec;
    --inv-text: #000000;
    --field: #151515;
    --danger: #ff7a52;
    --thumb: #484848;
    --select: #611e00;
    --accent-text: #ff4f00;
    color-scheme: dark;
  }
}

/* Shared layout: dashed bands and frames with square nodes at the corners */
.rc :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rc .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rc .skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 70;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--inv-bg);
  color: var(--inv-text);
  text-decoration: none;
  font-size: 14px;
}
.rc .skip:focus {
  top: 12px;
}
html:not(.js) .rc .ibtn,
html:not(.js) .rc .js-only {
  display: none !important;
}
.rc .band {
  position: relative;
  border-top: 1px dashed var(--line);
}
.rc .band.nob {
  border-top: 0;
}
.rc .frame {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  border-left: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
  transition: border-color 0.8s ease;
}
.rc .node {
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid var(--node);
  background: var(--bg);
  border-radius: 2px;
  z-index: 3;
  transition: opacity 0.8s ease;
}
.rc .node.nl {
  left: -5px;
}
.rc .node.nr {
  right: -5px;
}

/* Header: the logo and the theme switch */
.rc .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(16px, 2.5vw, 28px);
}
.rc .logo {
  position: relative;
  z-index: 60;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  text-decoration: none;
  color: var(--text);
  padding: 4px 0;
}
.rc .word {
  position: relative;
  display: inline-block;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
}
.rc .bl {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.rc .cur {
  display: inline-block;
  width: 0.28em;
  height: 0.66em;
  background: var(--accent);
  font-size: 27px;
  transform-origin: 50% 100%;
  transition:
    opacity 0.35s ease 0.4s,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s;
}
/* the language switch (a plain link, so it works without JavaScript) and the theme switch */
.rc .tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rc .lang {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.rc .lang:hover {
  border-color: var(--muted);
}
.rc .ibtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.rc .ibtn:hover {
  border-color: var(--muted);
}
html[data-theme="dark"] .rc .i-moon,
html[data-theme="light"] .rc .i-sun,
html:not([data-theme]) .rc .i-sun {
  display: none;
}

/*
  Opening: only the word exists until it has landed in the corner. It plays once per visit; afterwards
  (html.no-intro, set before the first paint) the page is simply there.
  The canvas sits at the top of the page, not fixed to the screen, so it stays aligned with the word
  even if the page scrolls. Its size is set by js/site.js.
*/
.rc .introcv {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  max-width: 100%;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.rc .reveal {
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* the content waits a beat for the flying word to clear it */
.rc .reveal.r2 {
  transition-delay: 0.22s;
}
.rc .reveal.r3 {
  transition-delay: 0.34s;
}
html.js:not(.no-intro) .rc.intro .reveal {
  opacity: 0;
  transform: translateY(8px);
}
html.js:not(.no-intro) .rc.intro .word {
  visibility: hidden;
}
html.js:not(.no-intro) .rc.intro .cur {
  opacity: 0;
  transform: scaleY(0.15);
}
html.js:not(.no-intro) .rc.intro .frame {
  border-color: transparent;
}
html.js:not(.no-intro) .rc.intro .band {
  border-top-color: transparent;
}
html.js:not(.no-intro) .rc.intro .node {
  opacity: 0;
}

/* Hero */
@keyframes rc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rc .hero {
  position: relative;
  overflow: hidden;
}
.rc .field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.rc .inner {
  position: relative;
  z-index: 1;
  max-width: min(940px, calc(100% - 240px));
  margin: 0 auto;
  padding: clamp(56px, 6.5vw, 88px) 0 clamp(56px, 6vw, 84px);
  text-align: center;
  /* the headline sizes itself to this width on phones (see Narrow screens) */
  container-type: inline-size;
}
.rc h1 {
  margin: 0 auto;
  max-width: 15em;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
/* each sentence of the headline starts on its own line, balanced on its own */
.rc h1 .ln {
  display: block;
}
.rc .sub {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}
/*
  Everything under the headline sits in one area whose height glides between states.
  flow-root keeps its children's margins inside it, so clipping it during the glide changes nothing.
*/
.rc .act {
  position: relative;
  display: flow-root;
}
.rc .cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
/* coming back after the form closes: it starts once the form has mostly faded, so the two don't overlap */
.rc .cta-row.appear {
  animation: rc-fade 0.35s ease 0.1s both;
}
/* without JavaScript the homepage shows the whole form instead; elsewhere the button is a plain link */
html:not(.js) .rc #rc-ctarow {
  display: none;
}
.rc .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  height: 52px;
  padding: 0 24px 0 26px;
  font: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--inv-text);
  background: var(--inv-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.rc .cta:hover {
  opacity: 0.86;
}
.rc .cta-note {
  font-size: 14px;
  color: var(--muted);
  text-wrap: balance;
  text-align: center;
}

/* What Sonnel does: the cards that become the form's first question */
.rc .cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 46px auto 0;
  text-align: left;
}
.rc .flow.open:not(.leaving) + .cards {
  margin-top: 30px;
}
.rc .cards.away {
  display: none;
}
.rc .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease;
  contain: layout paint;
}
/* each card leads to its service page: a small arrow in the corner, warmed to the accent on hover */
.rc .card-go {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--faint);
  transition:
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) {
  .rc a.card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  }
  .rc a.card:hover .card-go {
    color: var(--accent);
    transform: translateX(2px);
  }
}
.rc .card .glyph {
  margin: 0 0 14px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 7.4px;
  line-height: 1.25;
  white-space: pre;
  font-variant-ligatures: none;
  color: var(--muted);
  transition: color 0.45s ease;
}
.rc .card.on {
  border-color: var(--accent);
}
.rc .card.on .glyph {
  color: var(--accent);
}
/* in every glyph, the characters that carry the idea are in the accent color (see glyphsAt in js/site.js) */
.rc .glyph i {
  font-style: normal;
  color: var(--accent);
}
.rc .card-n {
  margin: 0;
  /* a word that still can't fit breaks rather than spilling out of its card */
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.rc .card-d {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* The consultation form */
@keyframes rc-open {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rc .flow {
  position: relative;
  max-width: 720px;
  margin: 30px auto 0;
  text-align: left;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
}
html.js .rc .flow:not(.open) {
  display: none;
}
/* it starts once the button it replaces has mostly faded, so the two don't overlap */
html.js .rc .flow.open {
  animation: rc-open 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both;
}
/* A new step (or the sent message) fades in just after the one it replaces has faded out (see leave in js/site.js) */
html.js .rc .step.active,
html.js .rc .sentmsg:not([hidden]) {
  animation: rc-fade 0.3s ease 0.1s both;
}

/* Form header: title, step names (desktop) or "Step n of 3" (phones), close button */
.rc .flow-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 10px 8px 20px;
  border-bottom: 1px solid var(--line);
}
.rc .flow-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rc .flow-steps {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}
.rc .flow-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.rc .flow-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
}
.rc .flow-steps li.done::before {
  background: currentColor;
}
.rc .flow-steps li.current {
  color: var(--text);
}
.rc .flow-steps li.current::before {
  background: var(--accent);
  border-color: var(--accent);
}
html:not(.js) .rc .flow-steps {
  display: none;
}
.rc .flow-count {
  display: none;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rc .flow-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.rc .flow-x:hover {
  color: var(--text);
  background: var(--field);
}

/* Form body: one step at a time (all three without JavaScript) */
.rc .flow-body {
  position: relative;
  background: var(--raise);
  padding: 22px 22px 36px;
  border-bottom: 1px solid var(--line2);
}
.rc .step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
html.js .rc .step:not(.active) {
  display: none;
}
html:not(.js) .rc .step + .step {
  margin-top: 26px;
}
.rc .q {
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.rc .hint {
  margin: 4px 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Step 1: the service options (the cards, once they have flown in) */
/*
  Filled column by column: the left two cards land in the left column and the right two in the right one,
  so on wide screens no card crosses another's path as they fly between the page and the form.
*/
.rc .opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.rc .opt[data-k="1"] {
  grid-area: 2 / 1;
}
.rc .opt[data-k="2"] {
  grid-area: 1 / 2;
}
.rc .opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.rc .opt:hover {
  border-color: var(--muted);
}
.rc .opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.rc .opt .box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.rc .opt .box::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rc .opt:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.rc .opt:has(input:checked) .box {
  background: var(--accent);
  border-color: var(--accent);
}
.rc .opt:has(input:checked) .box::after {
  opacity: 1;
}
.rc .opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rc .opt .glyph {
  flex: 0 0 auto;
  margin: 0;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 4.4px;
  line-height: 1.25;
  white-space: pre;
  font-variant-ligatures: none;
  color: var(--muted);
  transition: color 0.2s ease;
}
.rc .opt:has(input:checked) .glyph {
  color: var(--accent);
}
.rc .opt-n {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.rc .opt.wide {
  grid-row: 3;
  grid-column: 1 / -1;
  min-height: 48px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rc .opt.wide.enter {
  opacity: 0;
  transform: translateY(6px);
}

/* Steps 2 and 3: the message and the contact fields */
.rc .lbl {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.rc .lbl small {
  font-size: inherit;
  font-weight: 400;
  color: var(--muted);
}
.rc .ta {
  display: block;
  width: 100%;
  min-height: 128px;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 12px;
  resize: vertical;
}
.rc .row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.rc .row2 .full {
  grid-column: 1 / -1;
}
.rc .fld {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 10px;
}
.rc .ta::placeholder,
.rc .fld::placeholder {
  color: var(--faint);
  opacity: 1;
}
.rc .ta:focus-visible,
.rc .fld:focus-visible {
  outline: none;
  border-color: var(--text);
}
.rc .fld:-webkit-autofill,
.rc .fld:-webkit-autofill:hover,
.rc .fld:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 99999s ease-out 0s;
}
.rc .fld:autofill {
  background: var(--bg);
  color: var(--text);
}
.rc [aria-invalid="true"] {
  border-color: var(--danger) !important;
}
/* Errors sit in the body's bottom padding, which is always reserved, so they never shift the layout */
.rc .status {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 10px;
  margin: 0;
  font-size: 13.5px;
  line-height: 18px;
  color: var(--danger);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc .hp {
  display: none;
}

/* Form footer buttons, and the message shown after sending */
.rc .flow-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.rc .flow-foot .grow {
  flex: 1 1 auto;
}
.rc .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 132px;
  padding: 0 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--inv-text);
  background: var(--inv-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.rc .primary:hover {
  opacity: 0.86;
}
.rc .primary:disabled {
  opacity: 0.55;
  cursor: progress;
}
.rc .quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 92px;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 999px;
  cursor: pointer;
}
.rc .quiet:hover {
  border-color: var(--muted);
}
.rc .sentmsg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc .sentmsg:focus {
  outline: none;
}
.rc .done-t {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.rc .done-s {
  font-size: 15px;
  color: var(--muted);
}

/*
  The cards in motion: each one travels between the page and the form as a ghost (see ghosts and fly in js/site.js).
  The ghost draws the border, shadow and background; its two layers are copies of the card and the option,
  placed over the ghost's border so their contents line up exactly with the real elements.
*/
.rc-ghost {
  position: absolute;
  z-index: 45;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--line2);
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
  transition-property: left, top, width, height, border-radius, border-color, box-shadow, opacity;
  transition-duration: 0.62s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.2, 1);
}
.rc-ghost > .layer {
  position: absolute !important;
  left: -1px;
  top: -1px;
  margin: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: opacity 0.3s ease !important;
}

/* Footer: the ribbon */
.rc .ribbon {
  position: relative;
  height: clamp(150px, 17vw, 230px);
}
.rc .ribbon canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rc .foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px clamp(16px, 2.5vw, 28px) 20px;
  font-size: 13px;
  color: var(--muted);
}
.rc .foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.rc .foot-nav a,
.rc .foot a[data-lang],
.rc .crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.rc .foot-nav a:hover,
.rc .foot a[data-lang]:hover,
.rc .crumbs a:hover {
  color: var(--text);
}

/* Service pages (built by tools/make-pages.py): the hero, then sections in bands, like the homepage */
.rc .crumbs {
  margin: 0 0 22px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}
.rc .crumbs [aria-current] {
  color: var(--accent-text);
}
.rc .hero-mark .glyph {
  display: inline-block;
  margin: 0 0 26px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.25;
  white-space: pre;
  font-variant-ligatures: none;
  text-align: left;
  color: var(--muted);
}
.rc .sec {
  max-width: min(940px, calc(100% - 240px));
  margin: 0 auto;
  padding: 64px 0;
}
.rc .sec h2 {
  margin: 0 0 28px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.rc .sec h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rc .sec p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.rc .sec .lede {
  max-width: 38em;
  font-size: 18px;
}
.rc .num {
  display: block;
  margin-bottom: 14px;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--accent-text);
}
.rc .items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rc .item {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}
.rc .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc .steps li {
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}
.rc .faq {
  max-width: 46em;
}
.rc .qa {
  padding: 20px 0;
  border-top: 1px dashed var(--line);
}
.rc .qa:first-child {
  padding-top: 0;
  border-top: 0;
}
.rc .closing {
  text-align: center;
}
.rc .closing .lede {
  margin: 0 auto;
}
.rc .closing .cta-row {
  margin-top: 26px;
}
.rc .cards.related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

/* Narrow screens */
/*
  Phones: rather than four lines, the headline becomes a two-line lockup. Each sentence is sized to fill the
  width exactly (the numbers are each sentence's width in em, plus 1.5% to spare), the question large and the
  answer smaller. From the width where the question fits at full size, the normal headline takes over.
*/
@container (max-width: 360px) {
  .rc h1 {
    max-width: none;
  }
  /* never smaller than a size that follows the reader's text size and zoom (then a line may wrap instead) */
  .rc h1 .ln:first-child {
    font-size: max(calc(100cqi / 10), 1.5rem);
  }
  .rc h1 .ln:last-child {
    margin-top: 0.12em;
    font-size: max(calc(100cqi / 12.83), 1.125rem);
    letter-spacing: -0.03em;
  }
}
/* Spanish service names are long single words ("Automatización"): on the narrowest phones the cards stack */
@media (max-width: 374px) {
  .rc .cards:lang(es) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* the Spanish headline is longer, so its lockup starts at a wider container and uses its own sentence widths */
@container (max-width: 480px) {
  .rc h1:lang(es) {
    max-width: none;
  }
  .rc h1:lang(es) .ln:first-child {
    font-size: max(calc(100cqi / 13.45), 1.125rem);
  }
  .rc h1:lang(es) .ln:last-child {
    margin-top: 0.12em;
    font-size: max(calc(100cqi / 15.5), 0.9375rem);
    letter-spacing: -0.03em;
  }
}
@media (max-width: 900px) {
  .rc .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rc .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .rc .inner {
    max-width: none;
    padding: 50px 16px 40px;
  }
  .rc .sec {
    max-width: none;
    padding: 44px 16px;
  }
  .rc .items,
  .rc .steps,
  .rc .cards.related {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc .hero-mark .glyph {
    font-size: 9px;
  }
  .rc .sub {
    font-size: 16.5px;
  }
  .rc .cards {
    margin-top: 36px;
  }
  .rc .card {
    padding: 14px 14px 16px;
  }
  .rc .card .glyph {
    font-size: 5.6px;
    margin-bottom: 10px;
  }
  .rc .card-n {
    font-size: 15px;
  }
  .rc .card-d {
    font-size: 13.5px;
  }
  .rc .flow-head {
    padding-left: 16px;
  }
  .rc .flow-steps {
    display: none;
  }
  .rc .flow-count {
    display: inline;
  }
  .rc .flow-body {
    padding: 18px 16px 34px;
  }
  .rc .status {
    left: 16px;
    right: 16px;
  }
  .rc .opts {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc .opt[data-k] {
    grid-area: auto;
  }
  .rc .row2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion: no opening, no fades, no flying cards. The canvases are kept still by js/site.js. */
@media (prefers-reduced-motion: reduce) {
  html.js .rc .flow.open {
    animation: none;
  }
  .rc-ghost {
    transition: none;
  }
  .rc .reveal,
  .rc .cur {
    transition: none;
    animation: none;
  }
  html.js .rc .step.active,
  html.js .rc .sentmsg:not([hidden]),
  .rc .cta-row.appear {
    animation: none;
  }
  .rc .opt.wide {
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .rc .opt.wide.enter {
    opacity: 1;
    transform: none;
  }
}