/* Superposition Digital — site styles. Palette and scale from the Superposition Digital design system. */

@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/EBGaramond-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #000000;
  --gray: #A0A0A0;
  --paper: #FFFFFF;
  --scarlet: #C8200E;
  --coral: #FF644E;
  --charcoal: #2C2C2C;
  --line: #EAEAEA;
  --slate: #6B6B6B;
  --emphasis: var(--scarlet);
  --on-coral: var(--ink);

  --font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --button-x: 33px;
  --section-y: 80px;
  --section-y-sm: 60px;
  --header-h: 60px;
  --radius-pill: 20px;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #000000;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 27px; letter-spacing: -0.16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--emphasis); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
a:hover { color: var(--emphasis); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Type */
.display { font-weight: 500; font-size: clamp(48px, 6vw, 96px); line-height: .95; letter-spacing: -0.04em; }
.h1 { font-weight: 500; font-size: clamp(42px, 7vw, 64px); line-height: 1; letter-spacing: -0.04em; }
.h2 { font-weight: 500; font-size: clamp(32px, 4vw, 42px); line-height: 1.1; letter-spacing: -1.2px; }
.h3 { font-weight: 500; font-size: 27px; line-height: 31px; letter-spacing: -0.4px; }
.eyebrow { font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 4.8px; text-transform: uppercase; }
.legal { font-family: var(--font-sans); font-weight: 400; font-size: 10px; line-height: 40px; letter-spacing: 2px; text-transform: uppercase; }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 500; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; padding: 8px var(--button-x); border: 0; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.btn--coral { background: var(--coral); color: var(--on-coral); }
.btn--coral:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--coral); color: var(--on-coral); }

/* Header */
.header { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: var(--paper); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 22px; line-height: 23px; letter-spacing: -0.4px; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.wordmark img { width: 28px; height: 28px; }
.header__right { display: flex; align-items: center; gap: 28px; }
.menu-toggle { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .2s ease, top .2s ease; }
.menu-toggle::before { top: 7px; }
.menu-toggle::after { top: 14px; }
.menu-open .menu-toggle::before { top: 10.5px; transform: rotate(45deg); }
.menu-open .menu-toggle::after { top: 10.5px; transform: rotate(-45deg); }

/* Menu overlay */
.menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 19; background: var(--paper); padding: var(--section-y-sm) var(--gutter); display: none; }
.menu-open .menu { display: block; }
.menu-open { overflow: hidden; }
.menu ul { display: flex; flex-direction: column; gap: 8px; width: max-content; margin-left: auto; text-align: left; }
.menu a { font-weight: 500; font-size: clamp(42px, 7vw, 64px); line-height: 1.1; letter-spacing: -0.04em; text-decoration: none; }
.menu a[aria-current="page"] { color: var(--emphasis); }

/* Home: hero. One column read top to bottom: what we do, how, the two ways in, then the brand line.
   The hero's font-size is .display's size; the lede and brand line scale from it in em. The brand line closes it. */
.hero { font-size: clamp(48px, 6vw, 96px); padding: 95px var(--gutter) 0; }
.hero__title { max-width: 16em; font-size: 1em; text-wrap: balance; }
.hero__lede { max-width: 34em; margin-top: 32px; font-size: max(20px, .25em); line-height: 1.35; letter-spacing: -0.01em; }
/* A booking button beside a plain link; used on the home hero and the contact page. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-size: 18px; line-height: 27px; }
.hero__actions { margin: 32px 0 64px; }
/* The brand line in a coral band across the bottom of the hero, between the two white sections. */
.hero__band { margin: 0 calc(-1 * var(--gutter)); padding: 32px var(--gutter) 36px; background: var(--coral); color: var(--on-coral); }
.hero__band em { color: var(--paper); }
.hero__brand { max-width: 16em; font-size: .66em; text-wrap: balance; }

/* Home: what we build (paper). Three offers, each under a coral rule. */
.offers { background: var(--paper); color: var(--ink); padding: var(--section-y) var(--gutter) 40px; }
.offers__title { max-width: 1200px; margin: 0 auto 48px; text-wrap: balance; }
.offers__item { padding-top: 20px; border-top: 1px solid var(--coral); }
.offers__item p { margin-top: 12px; }

/* Home: suits metaphor (paper). Strokes don't scale, so all three drawings share one weight; .p shapes hide what they overlap. */
.suits { background: var(--paper); color: var(--ink); padding: 40px var(--gutter) 96px; }
.suits__title { max-width: 1200px; margin: 0 auto 20px; padding-top: 20px; text-align: right; text-wrap: balance; }
.suits__lede { max-width: 30em; margin: 0 max(0px, calc((100% - 1200px) / 2)) 56px auto; text-align: right; text-wrap: balance; }
.offers__grid, .suits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; max-width: 1200px; margin: 0 auto; }
.suits__art { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 24px; }
.suits__art * { vector-effect: non-scaling-stroke; }
.suits__art .p { fill: var(--paper); }
.suits__art .red { stroke: var(--emphasis); }
.suits__item p { margin-top: 12px; }
.suits__label { margin-bottom: 12px; text-align: center; }


/* Home: studies (coral band, like the hero band). */
.studies { background: var(--coral); color: var(--on-coral); padding: var(--section-y) var(--gutter) 100px; }
.studies em { color: var(--paper); }
.studies__title { max-width: 760px; margin: 0 auto 32px; text-align: center; text-wrap: balance; }
.studies__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.studies__list li { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; background: var(--paper); color: var(--ink); }
.studies__source { flex: none; font-family: var(--font-sans); font-size: 13px; line-height: 18px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); }



/* Contact */
.contact { min-height: 580px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 100px var(--gutter) var(--section-y); max-width: 1440px; margin: 0 auto; }
.contact__title { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; padding-left: calc(160px - var(--gutter)); }
.contact__intro { margin-top: 24px; max-width: 420px; text-wrap: pretty; }
/* The rotating line and the three suits, under the introduction. */
.contact__more { margin-top: 48px; }
.contact__aside { max-width: 380px; color: var(--emphasis); transition: opacity .2s ease, transform .2s ease; }
.contact__aside.is-fading { opacity: 0; transform: translateY(6px); }
.wisdom { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 400 15px/20px var(--font-serif); letter-spacing: -0.1px; cursor: pointer; transition: color .2s ease; }
.wisdom[hidden] { display: none; }
.wisdom:hover { color: var(--emphasis); }
.wisdom__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wisdom__icon { width: 18px; height: 18px; flex: none; color: var(--coral); transform-origin: 48.6% 49.8%; }
.wisdom.is-spinning .wisdom__icon { animation: wisdom-orbit .8s cubic-bezier(.45, -.25, .35, 1.25); }
@keyframes wisdom-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.contact__suits { max-width: 440px; margin-top: 48px; }
.contact__suits-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
/* Each figure spans three shared rows (label, drawing, caption), so the drawings line up when a label wraps. */
.contact__suit { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin: 0; }
.contact__suit .suits__art { max-width: none; margin: 0 0 6px; }
.contact__suit figcaption { font-size: 15px; line-height: 20px; text-align: center; }
.contact__suit-label { align-self: end; margin-bottom: 6px; font-weight: 500; font-size: 15px; line-height: 20px; text-align: center; text-wrap: balance; }
.contact__suit--ours figcaption, .contact__suit--ours .contact__suit-label { color: var(--emphasis); }
.contact__actions { margin-top: 32px; }
.contact__info { display: grid; grid-template-columns: minmax(0, 492px); align-content: start; }
.contact__label { margin-bottom: 16px; padding-top: 18px; border-top: 1px solid var(--ink); color: var(--emphasis); font-size: 27px; line-height: 31px; letter-spacing: -0.4px; text-transform: none; font-weight: 500; }
.contact__info > dd + dt { margin-top: 120px; }
.contact__label { scroll-margin-top: calc(var(--header-h) + 24px); }
.form { display: flex; flex-direction: column; gap: 22px; }
.field label { display: block; margin-bottom: 4px; }
.field input, .field textarea { display: block; width: 100%; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 18px/27px var(--font-serif); letter-spacing: -0.16px; }
.field textarea { min-height: 135px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 0 var(--ink); }
.req { color: var(--emphasis); font-weight: 500; }
.field label .req { margin-left: -2px; font-size: 15px; }
.field__hint { margin-bottom: 6px; }
.form__foot { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.form__status { color: var(--emphasis); }
.form__status a { color: inherit; }
.form--inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; align-items: end; }
.form--inline .form__status { grid-column: 1 / -1; }
.form--inline .form__status:empty { display: none; }
.form--inline .form__note { grid-column: 1 / -1; }
.form__note { font-size: 14px; line-height: 20px; color: var(--charcoal); }
.form__note a { color: inherit; }
.contact__offer { margin-bottom: 20px; }
/* The guide choice on the contact page: two questions, each a radio with its one-line answer. */
.guides { grid-column: 1 / -1; display: grid; gap: 20px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.guide { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; cursor: pointer; }
.guide input { width: 18px; height: 18px; margin: 7px 0 0; accent-color: var(--emphasis); cursor: pointer; }
.guide__ask, .guide__about { display: block; }
.guide__ask { margin-bottom: 6px; }
.hidden-field { display: none; }

/* Footer */
.footer { padding: var(--gutter) var(--gutter) 0; }
.footer__rule { height: 1px; margin: 0; border: 0; background: var(--ink); }
.footer__grid { display: grid; grid-template-columns: 66% minmax(0, 1fr) minmax(0, 1fr); padding: 40px 0 56px; }
.footer__logo { display: flex; align-items: center; gap: 24px; }
.footer__brand img { width: 140px; height: 140px; flex: none; }
.footer__name { font-weight: 500; font-size: clamp(27px, 3vw, 42px); line-height: 1.1; letter-spacing: -1.2px; }
.footer__col { padding-right: 24px; }
.footer__label { color: var(--emphasis); margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; font-size: 16px; line-height: 24px; }
.footer__links a { position: relative; display: block; padding: 3px 0; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__links a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 32px; padding: 18px 0 22px; border-top: 1px solid var(--line); }
.footer__base .legal { font-size: 11px; line-height: 16px; letter-spacing: 1.6px; }
.footer__legal { display: flex; flex-wrap: wrap; column-gap: 28px; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover, .footer__legal a[aria-current="page"] { text-decoration: underline; }

/* Legal pages */
.doc { max-width: 760px; margin: 0 auto; padding: 100px var(--gutter) var(--section-y); }
.doc .doc__date { margin: 12px 0 48px; font-family: var(--font-sans); font-size: 11px; line-height: 16px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--charcoal); }
.doc h2 { margin: 40px 0 12px; font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.3px; }
.doc p, .doc li, .doc address { font-size: 17px; line-height: 26px; }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 12px 0; padding-left: 22px; list-style: disc; }
.doc ol { list-style-type: decimal; }
.doc li + li { margin-top: 6px; }
.doc address { margin-top: 12px; font-style: normal; }

/* Home: business processes showcase (charcoal). Cards reuse the Patterns card, set as white cards on the dark band. */
.functions { background: var(--charcoal); color: var(--paper); padding: var(--section-y-sm) var(--gutter) 100px; }
.functions em { color: var(--coral); }
.functions__title { max-width: 760px; margin: 0 auto; text-align: center; text-wrap: balance; }
.functions__lede { max-width: 640px; margin: 20px auto 64px; text-align: center; text-wrap: balance; }
.functions__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.functions__more { margin-top: 72px; text-align: center; }
.functions .patterns__card { padding: 24px; border-top: 0; background: var(--paper); color: var(--ink); }
.functions__more a:hover { color: var(--coral); }

/* Home: Operational Assurance (paper). Reuses the offers grid; six guarantees in two rows. */
.assurance { padding-bottom: var(--section-y); }
.assurance .offers__title { max-width: 760px; margin-bottom: 0; text-align: center; }
.assurance__lede { max-width: 640px; margin: 20px auto 64px; text-align: center; text-wrap: balance; }
.assurance .offers__grid { row-gap: 48px; }
.assurance__more { max-width: 1200px; margin: 56px auto 0; text-align: center; }

/* Home: start, the closing offer (charcoal). The four steps are a real sequence, so they carry numerals. */
.start { background: var(--charcoal); color: var(--paper); text-align: center; padding: var(--section-y) var(--gutter) 100px; }
.start em { color: var(--coral); }
.start__kicker { margin-bottom: 12px; }
.start__title { max-width: 760px; margin: 0 auto 56px; text-wrap: balance; }
.start__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; max-width: 1200px; margin: 0 auto 64px; text-align: left; counter-reset: step; }
.start__steps li { counter-increment: step; border-top: 1px solid var(--coral); padding-top: 20px; }
.start__steps li::before { content: counter(step); display: block; margin-bottom: 14px; color: var(--coral); font-weight: 500; font-size: 42px; line-height: 1; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.start__step { margin-bottom: 8px; }
.start .btn--coral:hover { background: var(--paper); color: var(--ink); }
.start__fallback { margin-top: 20px; }
.start__fallback a:hover { color: var(--gray); }

/* Patterns catalog: a tailor's pattern book. Each function card and component row carries its own id, so any one can be
   commented out alone. Group titles and component names share the left column, so both parts line up. */
.patterns > * { padding-inline: max(var(--gutter), calc((100% - 1200px) / 2)); }
.patterns [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.patterns__intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 48px; align-items: end; padding-block: 100px 72px; }
.patterns__lede { max-width: 20em; margin-top: 28px; text-wrap: balance; }
.patterns__art { margin: 0; }
.patterns__art .suits__art { margin: 0 0 -8px; }
.patterns__art figcaption { font-size: 15px; line-height: 20px; text-align: center; text-wrap: balance; }
/* Jump links to each business function and to the two sections after them; they reuse the chip. */
.patterns__jump { padding-block: 0 24px; }
.patterns__jump ul { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.patterns__part { padding-block: var(--section-y) 100px; }
.patterns__part-title { margin-bottom: 48px; text-wrap: balance; }
.patterns__part-lede { max-width: 32em; margin: -24px 0 56px; text-wrap: pretty; }
.patterns__group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 48px; padding-top: 20px; border-top: 1px solid var(--ink); }
.patterns__group + .patterns__group { margin-top: 80px; }
.patterns__group-title { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; text-wrap: balance; }
.patterns__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.patterns__card { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--coral); }
.patterns__cards > .patterns__card:nth-child(-n+2) { padding-top: 0; border-top: 0; }
.patterns__name { margin: 0; font-weight: 500; font-size: 27px; line-height: 31px; letter-spacing: -0.4px; text-wrap: balance; }
.patterns__card p { font-size: 17px; line-height: 26px; }
.patterns__facts dd { font-size: 17px; line-height: 26px; }
.patterns__facts dd + dt { margin-top: 12px; }
.patterns__label { display: block; margin-bottom: 4px; font-family: var(--font-sans); font-size: 11px; line-height: 16px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emphasis); }
.patterns__built { margin-top: auto; }
.patterns__chip { display: inline-block; margin: 2px 2px 4px 0; padding: 3px 13px 4px; border: 1px solid var(--gray); border-radius: var(--radius-pill); font-size: 15px; line-height: 20px; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.patterns__chip:hover { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.patterns__part--components { background: var(--charcoal); color: var(--paper); }
.patterns__components { border-top: 1px solid var(--coral); }
.patterns__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 48px; padding: 18px 0 20px; border-bottom: 1px solid var(--gray); }
.patterns__row dt { font-weight: 500; font-size: 22px; line-height: 27px; letter-spacing: -0.3px; transition: color .2s ease; }
.patterns__row dd { font-size: 17px; line-height: 26px; color: var(--gray); }
.patterns__row:target dt { color: var(--coral); }
.patterns__part--assurance .patterns__art { max-width: 320px; margin: 0 auto 56px; }
.patterns__part--assurance .patterns__row dd { color: var(--slate); }
.patterns__components + .patterns__label { margin-top: 56px; }
@media (prefers-reduced-motion: reduce) { .patterns__chip, .patterns__row dt { transition: none; } }

/* Advisory thank-you page: its button row */
.advisory__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }

/* Medium screens */
@media (max-width: 1099px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 48px; }
  .footer__col { padding-right: 0; }
  .footer__brand img { width: 96px; height: 96px; }
  .patterns__group, .patterns__row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .patterns__group-title { position: static; }
  .functions__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patterns__row { row-gap: 4px; }
}

/* Narrow screens */
@media (max-width: 767px) {
  .hero { padding-top: 48px; padding-bottom: 0; font-size: min(48px, calc((100vw - 2 * var(--gutter)) / 8.6)); }
  .suits { padding-top: 12px; padding-bottom: 64px; }
  .offers { padding-top: 56px; }
  .offers__title { margin-bottom: 32px; }
  .suits__lede { margin-bottom: 40px; }
  .offers__grid, .suits__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .studies { padding-top: 56px; padding-bottom: 64px; }
  .studies__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding-top: 48px; min-height: 0; }
  .form--inline { grid-template-columns: minmax(0, 1fr); }
  .form--inline .btn { justify-self: start; }
  .contact__title { position: static; padding-left: 0; }
  .wisdom { margin-top: 8px; padding: 12px 0; }
  .contact__more { margin-top: 32px; }
  .contact__info { grid-template-columns: minmax(0, 1fr); }
  .contact__info > dd + dt { margin-top: 88px; }
  .contact .btn { padding-top: 12px; padding-bottom: 12px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 28px 0 32px; }
  .footer__logo { gap: 16px; }
  .footer__brand img { width: 72px; height: 72px; }
  .footer__label { margin-bottom: 2px; }
  .footer__links a { padding: 10px 0; }
  .footer__links a[aria-current="page"]::before { top: 19px; }
  .footer__base { flex-direction: column; align-items: flex-start; padding: 12px 0 16px; }
  .footer__base .legal { line-height: 20px; }
  .footer__legal a { padding: 12px 0; }
  .doc { padding-top: 56px; }
  .patterns__intro { grid-template-columns: minmax(0, 1fr); padding-block: 56px 48px; }
  .patterns__art { display: none; }
  .patterns__part { padding-block: 56px 64px; }
  .patterns__part-title { margin-bottom: 32px; }
  .patterns__part-lede { margin: -16px 0 40px; }
  .patterns__group + .patterns__group { margin-top: 56px; }
  .patterns__cards { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .patterns__cards > .patterns__card:nth-child(2) { padding-top: 20px; border-top: 1px solid var(--coral); }
  .patterns__name { font-size: 22px; line-height: 26px; }
  .functions { padding-bottom: 72px; }
  .functions__lede { margin-bottom: 40px; }
  .assurance__lede { margin-bottom: 40px; }
  .functions__cards { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .functions__more { margin-top: 48px; }
  .start { padding-top: 56px; padding-bottom: 72px; }
  .start__title { margin-bottom: 40px; }
  .start__steps { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-bottom: 48px; }
}
@media (max-width: 767px) {
  .header__right { gap: 16px; }
  .header__cta { padding: 8px 16px; }
}
@media (max-width: 420px) {
  .header__right { gap: 14px; }
  .header__cta { padding: 8px 14px; }
  .wordmark { gap: 8px; font-size: clamp(15px, 4.9vw, 22px); }
  .contact__suit figcaption, .contact__suit-label { font-size: 13px; }
}
@media (max-width: 359px) {
  .header__right { gap: 10px; }
  .header__cta { padding: 7px 10px; }
  .wordmark img { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .wisdom.is-spinning .wisdom__icon { animation: none; } }