/* COMNIO theme.css — every component and page, measured from the comps at 1440 / 768 / 390.
   Tokens (colour, type ramp, margins, focus, motion) are inlined from tokens.css; this file only
   places things. Breakpoints: desktop by default, ≤1023px tablet comp, ≤599px mobile comp. */

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.42; font-weight: 400; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
.screen-reader-text, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.comnio-dot { color: var(--seq-01); }
.comnio-dot--01 { color: var(--seq-01); } .comnio-dot--02 { color: var(--seq-02); } .comnio-dot--03 { color: var(--seq-03); }
.comnio-dot--04 { color: var(--seq-04); } .comnio-dot--05 { color: var(--seq-05); }
.comnio-label { font-size: var(--t-label); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); line-height: normal; }
.comnio-muted { color: var(--muted); }

/* ---------- header ----------
   Sticky from the first scroll (Ross, 21 Aug): paper ground, and the hairline the comps deliberately
   leave off appears only once the page has moved, so the resting state is still what Design drew. */
:root { --header-h: 70px; }
.comnio-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.comnio-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity var(--dur) var(--ease); }
.is-scrolled .comnio-header::after { opacity: 1; }
.comnio-header__row { display: flex; justify-content: space-between; align-items: center; padding-top: 44px; padding-bottom: 20px; }
.comnio-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.comnio-orbit { width: 25.6px; height: 25.6px; flex: none; }
.comnio-wordmark { height: 16px; width: auto; flex: none; }
.comnio-nav ul { display: flex; gap: 38px; margin-block: -14px; }
.comnio-nav a { display: inline-block; padding: 14px 0; font-size: var(--t-nav); line-height: normal; color: var(--ink); }
.comnio-nav a > span { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.comnio-nav a[aria-current="page"] > span, .comnio-nav a:hover > span, .comnio-nav a:focus-visible > span { border-bottom-color: var(--ink); }

/* ---------- footer ---------- */
.comnio-footer { color: var(--ink); }
.comnio-footer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-top: 32px; padding-bottom: 36px; border-top: var(--hairline); color: var(--muted); font-size: 15px; line-height: normal; }
.comnio-footer ul { display: flex; flex-wrap: wrap; gap: 28px; }
.comnio-footer a { color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.comnio-footer a:hover, .comnio-footer a:focus-visible { border-bottom-color: var(--ink); }

/* ---------- button ---------- */
.comnio-button { display: inline-flex; align-items: center; gap: 18px; padding: 20px 30px; font-size: var(--t-body); font-weight: 600; line-height: normal; color: var(--ink); background-color: #F68A1E; background-image: var(--cta-fill); border: 0; border-radius: 0; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.comnio-button { position: relative; overflow: hidden; isolation: isolate; }
/* The wipe: the logo's green crosses the button in one 160ms move. Type stays ink (7.18:1 on #3CB64A). */
.comnio-button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--chip-05); transform: translateX(-101%); transition: transform var(--dur) var(--ease); }
.comnio-button:hover::before, .comnio-button:focus-visible::before, .comnio-button:active::before { transform: translateX(0); }
.comnio-button:disabled { background-image: none; background-color: var(--rule); color: var(--muted); cursor: default; }
.comnio-button:disabled::before { transform: translateX(-101%); }
.comnio-button__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.comnio-button:hover .comnio-button__arrow { transform: translateX(4px); }

/* secondary link: the underline moves from rule to ink; the text never changes colour */
.comnio-link { display: inline-block; font-size: var(--t-lead); line-height: normal; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease); }
.comnio-link:hover, .comnio-link:focus-visible { border-bottom-color: var(--ink); }

/* ---------- hero (Home, 404): header on top, content centred, nothing else above the fold ---------- */
.comnio-hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
.comnio-hero__content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; box-sizing: border-box; padding-bottom: 40px; }
.comnio-line { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 500; }
.comnio-button--hero { margin-top: 64px; }
.comnio-404__sub { margin-top: 56px; font-size: var(--t-arg); font-weight: 400; letter-spacing: var(--ls-arg); line-height: normal; }
.comnio-404__form { margin-top: 26px; width: 100%; }

/* ---------- Home block 2: the sequence ---------- */
.comnio-seq__body { border-top: var(--hairline); padding: 96px 0 100px; }
.comnio-seq__names { font-size: var(--t-name); line-height: 1.2; letter-spacing: var(--ls-name); font-weight: 500; }
.comnio-seq__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 40px; }
.comnio-seq__sub { color: var(--muted); font-size: var(--t-lead); line-height: normal; }

/* ---------- Home block 3: proof (the logo row) — off until six logos and permission exist ---------- */
.comnio-proof { display: var(--proof, block); }
.comnio-proof__body { border-top: var(--hairline); padding: 64px 0 68px; }
.comnio-proof__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-left: var(--hairline); }
.comnio-proof__cell { height: 92px; box-sizing: border-box; border-right: var(--hairline); display: flex; align-items: center; justify-content: center; padding: 16px 20px; color: var(--muted); }
.comnio-proof__cell svg, .comnio-proof__cell img { max-height: 60px; max-width: 100%; width: auto; height: auto; }
.comnio-proof__cell svg { fill: currentColor; }

/* ---------- Home block 4: three statements ---------- */
.comnio-claims__body { border-top: var(--hairline); padding: 96px 0 100px; }
.comnio-claims__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.comnio-claims__grid > p { font-size: 27px; line-height: 1.34; letter-spacing: -.018em; padding: 0 48px; border-right: var(--hairline); text-wrap: pretty; }
.comnio-claims__grid > p:first-child { padding-left: 0; }
.comnio-claims__grid > p:last-child { padding-right: 0; border-right: 0; }

/* ---------- close block (Home, Services, About) ---------- */
.comnio-close { border-top: var(--hairline-strong); }
.comnio-close__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; padding-top: 120px; padding-bottom: 128px; }
.comnio-close__heading { font-size: var(--t-page); line-height: 1; letter-spacing: var(--ls-page); font-weight: 500; }
/* The close block ends every page, so it carries its own gap from whatever came before. Home is the
   exception: block 4's 100px of padding already provides it, as drawn. */
.comnio-close { margin-top: 112px; }
.comnio-home .comnio-close { margin-top: 0; }
.comnio-no-proof.comnio-home .comnio-close, .comnio-no-proof .comnio-home .comnio-close { margin-top: 112px; }  /* the logo row usually makes this gap */
.comnio-about .comnio-close { margin-top: 120px; }

/* ---------- title band (Services, page.html, blog) ---------- */
.comnio-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 120px; padding-bottom: 32px; border-bottom: var(--hairline-strong); }
.comnio-title__heading { font-size: var(--t-page); line-height: 1; letter-spacing: var(--ls-page); font-weight: 500; }
.comnio-title__sub { color: var(--muted); font-size: var(--t-lead); line-height: normal; }

/* ---------- Services rows ---------- */
.comnio-service { display: grid; grid-template-columns: 96px 1fr; padding: 56px 0 60px; border-bottom: var(--hairline); }
.comnio-service:last-of-type { border-bottom: var(--hairline-strong); }
.comnio-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 2px; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.comnio-chip--01 { background: var(--chip-01); } .comnio-chip--02 { background: var(--chip-02); } .comnio-chip--03 { background: var(--chip-03); }
.comnio-chip--04 { background: var(--chip-04); } .comnio-chip--05 { background: var(--chip-05); }
.comnio-service__name { font-size: var(--t-name); line-height: var(--lh-name); letter-spacing: var(--ls-name); font-weight: 500; }
.comnio-service__what { margin-top: 12px; color: var(--muted); font-size: var(--t-lead); line-height: normal; }
.comnio-service__why { margin-top: 38px; }
.comnio-service__arg { margin-top: 14px; max-width: 544px; font-size: var(--t-arg); line-height: var(--lh-arg); letter-spacing: var(--ls-arg); text-wrap: pretty; }
.comnio-service__included { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 44px; color: var(--muted); font-size: 16px; line-height: normal; }

/* ---------- About ---------- */
.comnio-about__head { padding-top: 140px; }
.comnio-about__statement { font-size: var(--t-page); line-height: 1.08; letter-spacing: var(--ls-page); font-weight: 500; max-width: 1050px; text-wrap: pretty; }
.comnio-about__rows { margin-top: 112px; }
.comnio-row { display: grid; grid-template-columns: 240px 1fr; padding: 44px 0; border-top: var(--hairline); }
.comnio-row:first-child { border-top: var(--hairline-strong); }
.comnio-row:last-child { padding-bottom: 0; }
.comnio-row__label { padding-top: 8px; }
.comnio-row__content { max-width: 704px; font-size: var(--t-arg); line-height: var(--lh-arg); letter-spacing: var(--ls-arg); text-wrap: pretty; }
.comnio-row__content > p + p { margin-top: 26px; padding-top: 26px; border-top: var(--hairline); }

/* ---------- Contact: the page is the form ---------- */
.comnio-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; padding-top: 140px; padding-bottom: 160px; }
.comnio-contact__heading { font-size: var(--t-page); line-height: 1.04; letter-spacing: var(--ls-page); font-weight: 500; }
.comnio-contact__place { margin-top: 36px; color: var(--muted); font-size: var(--t-lead); line-height: normal; }
.comnio-contact .comnio-form { gap: 40px; }
.comnio-contact .comnio-form .comnio-button { margin-top: 8px; }
.comnio-contact textarea.comnio-form__control { height: 132px; }

/* ---------- form (comnio/form) ---------- */
.comnio-form { display: flex; flex-direction: column; gap: 32px; position: relative; }
.comnio-form__row { display: flex; flex-direction: column; }
.comnio-form__label { font-size: var(--t-label); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); line-height: normal; margin-bottom: 10px; transition: color var(--dur) var(--ease); }
.comnio-form__control { display: block; width: 100%; height: 38px; box-sizing: border-box; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 20px; line-height: 1.42; box-shadow: inset 0 -1px var(--rule); -webkit-appearance: none; appearance: none; }
.comnio-form__control:focus, .comnio-form__control:focus-visible { outline: none; box-shadow: inset 0 -2px var(--ink); }
textarea.comnio-form__control { height: 96px; resize: none; padding-top: 4px; }
.comnio-form__row:focus-within .comnio-form__label { color: var(--ink); }
.comnio-form__row.is-error .comnio-form__label { color: var(--seq-01); }
.comnio-form__row.is-error .comnio-form__control { box-shadow: inset 0 -2px var(--seq-01); }
.comnio-form__error { margin-top: 12px; color: var(--seq-01); font-size: var(--t-body); }
.comnio-form__error[hidden] { display: none; }
.comnio-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.comnio-form__status { font-size: var(--t-body); color: var(--ink); }
.comnio-form__status:empty { display: none; }
.comnio-form .comnio-button { align-self: flex-start; }
.comnio-form__success { opacity: 0; animation: comnio-in var(--dur) var(--ease) forwards; }
.comnio-form__success:focus { outline: none; }
.comnio-form__bar { display: block; width: 34px; height: 3px; background-image: var(--cta-fill); margin-bottom: 22px; }
.comnio-form__success p { font-size: var(--t-arg); line-height: 1.34; letter-spacing: var(--ls-arg); }
@keyframes comnio-in { to { opacity: 1; } }
/* 404: one Email field inline with Send at 1440 */
.comnio-form--email-only { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; }
.comnio-form--email-only .comnio-form__row { width: 320px; }
.comnio-form--email-only .comnio-form__status { order: 3; flex-basis: 100%; }

/* ---------- page.html (Privacy, Terms) and the blog, minimally ---------- */
.comnio-doc { padding-top: 120px; padding-bottom: 120px; }
.comnio-doc .comnio-title { padding-top: 0; }
.comnio-prose { margin-top: 48px; max-width: 68ch; font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); text-wrap: pretty; }
.comnio-prose > * + * { margin-top: 1em; }
.comnio-prose h2, .comnio-prose h3 { font-size: var(--t-arg); line-height: var(--lh-arg); letter-spacing: var(--ls-arg); font-weight: 500; margin-top: 48px; padding-top: 24px; border-top: var(--hairline); }
.comnio-prose ul, .comnio-prose ol { padding-left: 1.2em; list-style: disc; }
.comnio-prose ol { list-style: decimal; }
.comnio-prose a { border-bottom: 1px solid var(--rule); }
.comnio-prose a:hover { border-bottom-color: var(--ink); }
.comnio-prose img { height: auto; }
.comnio-prose blockquote { margin: 0; padding-left: 24px; border-left: var(--hairline-strong); }
.comnio-prose pre, .comnio-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.comnio-prose iframe, .comnio-prose video { max-width: 100%; }
.comnio-post__meta { margin-top: 20px; color: var(--muted); font-size: var(--t-body); }
.comnio-posts { margin-top: 8px; }
.comnio-posts .wp-block-post { padding: 28px 0; border-bottom: var(--hairline); }
.comnio-post__date { color: var(--muted); font-size: var(--t-body); }
.comnio-post__title { margin-top: 6px; font-size: var(--t-arg); line-height: var(--lh-arg); letter-spacing: var(--ls-arg); font-weight: 500; }
.comnio-post__title a { border-bottom: 1px solid transparent; }
.comnio-post__title a:hover { border-bottom-color: var(--ink); }
.comnio-pagination { display: flex; justify-content: space-between; margin-top: 40px; font-size: var(--t-body); color: var(--muted); }
.comnio-pagination a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.comnio-pagination a:hover { border-bottom-color: var(--ink); }
.comnio-back { display: inline-block; margin-top: 48px; }
.comnio-search { margin-top: 40px; }
.wp-block-search__inside-wrapper { display: flex; gap: 16px; align-items: flex-end; max-width: 480px; }
.wp-block-search__input { flex: 1; height: 38px; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px var(--rule); font-size: 20px; color: var(--ink); }
.wp-block-search__input:focus { outline: none; box-shadow: inset 0 -2px var(--ink); }
.wp-block-search__button { padding: 12px 20px; border: 0; background: var(--ink); color: var(--ink-on-dark); font-weight: 600; font-size: var(--t-body); cursor: pointer; }
.wp-block-search__label { font-size: var(--t-label); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }

/* ---------- anchored CTAs ---------- */
#get-in-touch { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- editor-only ---------- */
.editor-styles-wrapper .comnio-editor-block { min-height: 24px; }

/* =========================================================================
   Tablet comp — 768 (≤1023)
   ========================================================================= */
@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .comnio-header__row { padding-top: 36px; padding-bottom: 18px; }
  .comnio-lockup { gap: 7px; }
  .comnio-orbit { width: 22.4px; height: 22.4px; }
  .comnio-wordmark { height: 14px; }
  .comnio-nav ul { gap: 28px; }
  .comnio-footer__row { padding-top: 28px; padding-bottom: 32px; }
  .comnio-footer ul { gap: 20px; }
  .comnio-button { gap: 16px; padding: 19px 28px; }
  .comnio-button--hero { margin-top: 48px; }
  .comnio-404__sub { margin-top: 48px; }
  .comnio-seq__body { padding: 72px 0 76px; }
  .comnio-seq__names { line-height: 1.3; }
  .comnio-seq__row { margin-top: 32px; }
  .comnio-proof__body { padding: 52px 0 56px; }
  .comnio-proof__grid { grid-template-columns: repeat(3, 1fr); border-top: var(--hairline); }
  .comnio-proof__cell { height: 84px; border-bottom: var(--hairline); }
  .comnio-claims__body { padding: 72px 0 76px; }
  .comnio-claims__grid { display: block; }
  .comnio-claims__grid > p { padding: 0; border-right: 0; line-height: 1.3; }
  .comnio-claims__grid > p + p { margin-top: 28px; padding-top: 28px; border-top: var(--hairline); }
  .comnio-close__grid { display: block; padding-top: 88px; padding-bottom: 96px; }
  .comnio-close__heading { line-height: 1.04; }
  .comnio-close__form { margin-top: 44px; }
  .comnio-close, .comnio-about .comnio-close { margin-top: 88px; }
  .comnio-home .comnio-close { margin-top: 0; }
  .comnio-no-proof.comnio-home .comnio-close, .comnio-no-proof .comnio-home .comnio-close { margin-top: 88px; }
  .comnio-title { padding-top: 88px; padding-bottom: 26px; }
  .comnio-service { grid-template-columns: 64px 1fr; padding: 44px 0 48px; }
  .comnio-chip { width: 36px; height: 36px; margin-top: -3px; }
  .comnio-service__what { margin-top: 10px; }
  .comnio-service__why { margin-top: 28px; }
  .comnio-service__arg { margin-top: 12px; max-width: none; }
  .comnio-service__included { gap: 0 12px; margin-top: 30px; font-size: 15px; }
  .comnio-about__head { padding-top: 88px; }
  .comnio-about__statement { line-height: 1.1; max-width: 676px; }
  .comnio-about__rows { margin-top: 80px; }
  .comnio-row { display: block; padding: 36px 0; }
  .comnio-row__label { padding-top: 0; margin-bottom: 16px; }
  .comnio-row__content { max-width: none; }
  .comnio-row__content > p + p { margin-top: 20px; padding-top: 20px; }
  .comnio-contact { display: block; padding-top: 104px; padding-bottom: 120px; }
  .comnio-contact__heading { line-height: 1.06; }
  .comnio-contact__place { margin-top: 28px; }
  .comnio-contact__form { margin-top: 72px; padding-top: 44px; border-top: var(--hairline-strong); }
  .comnio-contact .comnio-form { gap: 34px; }
  .comnio-contact textarea.comnio-form__control { height: 120px; }
  .comnio-form { gap: 28px; }
  .comnio-form__control { height: 36px; }
  textarea.comnio-form__control { height: 88px; }
  .comnio-doc { padding-top: 88px; padding-bottom: 88px; }
  .comnio-prose { margin-top: 40px; }
}

/* =========================================================================
   Mobile comp — 390 (≤599)
   ========================================================================= */
@media (max-width: 599px) {
  :root { --header-h: 48px; }
  /* Ross, 22 Aug: on mobile the lockup and nav sat 6px below centre in the sticky header.
     Symmetric padding centres them; header height is unchanged at 62px. Tablet and desktop keep
     the drawn asymmetry. (Was made in the WP file editor; folded into source here.) */
  .comnio-header__row { padding-top: 20px; padding-bottom: 20px; }
  .comnio-lockup { gap: 6px; }
  .comnio-orbit { width: 20.8px; height: 20.8px; }
  .comnio-wordmark { height: 13px; }
  .comnio-nav ul { gap: 18px; }
  .comnio-footer__row { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 24px; padding-bottom: 24px; }
  .comnio-footer ul { gap: 18px; }
  .comnio-button { gap: 14px; padding: 18px 24px; min-height: 48px; box-sizing: border-box; }
  .comnio-hero__content { padding-bottom: 32px; }
  .comnio-button--hero { margin-top: 40px; }
  .comnio-404__sub { margin-top: 40px; }
  .comnio-seq__body { padding: 56px 0 60px; }
  .comnio-seq__names { line-height: 1.28; }
  .comnio-seq__row { display: block; margin-top: 0; }
  .comnio-seq__sub { margin-top: 26px; font-size: 15px; }
  .comnio-seq__row .comnio-link { margin-top: 14px; }
  .comnio-proof__body { padding: 44px 0 48px; }
  .comnio-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .comnio-proof__cell { height: 76px; }
  .comnio-claims__body { padding: 56px 0 60px; }
  .comnio-claims__grid > p { font-size: 20px; line-height: 1.34; letter-spacing: -.012em; }
  .comnio-claims__grid > p + p { margin-top: 22px; padding-top: 22px; }
  .comnio-close__grid { padding-top: 68px; padding-bottom: 72px; }
  .comnio-close__heading { line-height: 1.14; }
  .comnio-close__form { margin-top: 34px; }
  .comnio-close, .comnio-about .comnio-close { margin-top: 64px; }
  .comnio-home .comnio-close { margin-top: 0; }
  .comnio-no-proof.comnio-home .comnio-close, .comnio-no-proof .comnio-home .comnio-close { margin-top: 64px; }
  .comnio-title { display: block; padding-top: 64px; padding-bottom: 22px; }
  .comnio-title__sub { margin-top: 14px; }
  .comnio-service { grid-template-columns: 32px 1fr; column-gap: 14px; align-items: center; padding: 34px 0 36px; }
  .comnio-service__body { display: contents; }
  .comnio-service__body > :not(.comnio-service__name) { grid-column: 1 / -1; }
  .comnio-chip { width: 32px; height: 32px; margin-top: 0; }
  .comnio-service__what { margin-top: 10px; }
  .comnio-service__why { margin-top: 24px; }
  .comnio-service__arg { margin-top: 10px; }
  .comnio-service__included { gap: 0 10px; margin-top: 24px; }
  .comnio-about__head { padding-top: 72px; }
  .comnio-about__statement { line-height: 1.2; max-width: none; }
  .comnio-about__rows { margin-top: 56px; }
  .comnio-row { padding: 30px 0; }
  .comnio-row__label { margin-bottom: 14px; }
  .comnio-row__content > p + p { margin-top: 18px; padding-top: 18px; }
  .comnio-contact { padding-top: 72px; padding-bottom: 88px; }
  .comnio-contact__heading { line-height: 1.14; }
  .comnio-contact__place { margin-top: 24px; font-size: 15px; }
  .comnio-contact__form { margin-top: 56px; padding-top: 36px; }
  .comnio-contact .comnio-form { gap: 28px; }
  .comnio-contact textarea.comnio-form__control { height: 112px; }
  .comnio-form { gap: 24px; }
  .comnio-form__control { height: 34px; }
  textarea.comnio-form__control { height: 80px; }
  .comnio-form .comnio-button { width: 100%; justify-content: space-between; }
  .comnio-form--email-only { flex-direction: column; align-items: flex-start; gap: 24px; }
  .comnio-form--email-only .comnio-button { width: auto; justify-content: flex-start; }
  .comnio-form--email-only .comnio-form__row { width: 100%; }
  .comnio-404 .comnio-button { padding: 16px 22px; }

  /* Tap targets at 390. The comps draw these small; the acceptance criterion is 48px. Expanding the
     hit area with a pseudo-element (and padding on the lockup) leaves every drawn position alone —
     the underlines stay 4px under their text, nothing shifts. */
  .comnio-lockup { padding-block: 14px; margin-block: -14px; }
  .comnio-footer a, .comnio-link { position: relative; }
  .comnio-footer a::after { content: ''; position: absolute; inset: -14px -8px; }
  .comnio-link::after { content: ''; position: absolute; inset: -13px -8px; }
  .comnio-doc { padding-top: 64px; padding-bottom: 64px; }
  .comnio-prose { margin-top: 32px; }
}