/*
 * Susisiekite su mumis — the contact band on /partneriams/ and /kontaktai/.
 *
 * Design: docs/specs/2026-08-22-partneriams-page-design.md §7 and
 * docs/specs/2026-08-24-kontaktai-page-design.md §2. Tokens and the form
 * controls themselves (.rkl-input, .rkl-textarea, .rkl-checkbox, .rkl-cta) live
 * in assets/base.css; nothing here restyles them, it only lays them out and adds
 * the floating label the frames draw over them.
 */

.rkl-contact {
	align-items: flex-start;
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	font-family: var(--rkl-font);
	gap: 48px;
	padding: 48px;
	/*
	 * The hero's „Susisiekite" button jumps to this band's id, and the handler
	 * appends the same fragment to its redirect. The sticky header would cover
	 * the heading without an offset.
	 *
	 * **This is only the remainder.** twentytwentyfive sets
	 * `html { scroll-padding-top: 72px }`, and a scroll port's `scroll-padding`
	 * and a target's `scroll-margin` ADD — measured: with 96 here the landing put
	 * this section 168px below the viewport top instead of 96, which reads as the
	 * anchor overshooting into empty space. 24 + the theme's 72 is the ~96 the
	 * 100px bar needs, and the sum is what to check if this is ever tuned.
	 *
	 * Erring high is harmless and erring low is not: too much offset is air above
	 * the heading, too little hides it under the header. A logged-in admin bar
	 * adds another 32 for the same reason and is equally harmless.
	 */
	scroll-margin-top: 24px;
	/*
	 * The two columns are both definite — 400 max on the left, 580 on the right
	 * — so on the 1344 content column they do not fill the row. The slack goes
	 * *between* them rather than after the form: the design draws the form flush
	 * with the card's right padding edge, and `gap` stays the floor, so at the
	 * width where the columns do meet the spacing is still the design's 48.
	 */
	justify-content: space-between;
}

.rkl-contact *,
.rkl-contact *::before,
.rkl-contact *::after {
	box-sizing: border-box;
}

/* Left column ------------------------------------------------------------- */

/*
 * The frame's 400px text column, with a floor.
 *
 * The two columns share one row and only the right one has a design width, so
 * everything left over goes here — and between the breakpoint and about 1250
 * there is very little left over. Measured at a 1025 viewport before the floor:
 * the content row is 833, the card takes its rigid 580 and the 48 gap takes the
 * rest, leaving this column **205px** to hold a 33px Boldonse heading. It did not
 * overflow, which is why it went unnoticed; it just read as broken.
 *
 * `min-width` is what makes the row ask the card to shrink (see
 * `.rkl-contact__card`): with both columns rigid there is no negative free space
 * and flex has nothing to resolve. At 1025 the pair now lands at 320 + 465,
 * which is the design's proportions rather than its numbers — the honest answer
 * at a width the design never draws. Landmine 71 is the same lesson from the ad
 * rail: anything beside a fixed-width column needs checking at 1200 and just
 * above the breakpoint, not only at 1440.
 */
.rkl-contact__info {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 40px;
	max-width: 400px;
	min-width: 320px;
}

.rkl-contact__lead {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * The design's H1 type, on an `h2` element — the page's `h1` is the hero's.
 * 40/1.5 on the desktop frame, and the library's „H1 mobile" is 24/1.5 — not the
 * 28 this used to floor at. Measured at a 400 viewport: „SUSISIEKITE SU MUMIS"
 * wrapped to two 42px lines for 84 against the frame's single 36, and the whole
 * left column ran 48px long because of it. 3.2vw holds 24 up to a 750 viewport
 * and reaches 40 at 1250, so both frames land on their own number.
 *
 * The emphasis markers that used to sit around that 24 are gone on purpose. An
 * asterisk immediately before a slash ends a CSS comment, and writing the value
 * as a bolded number in front of „/1.5" closed this one eight lines early. The
 * parser then swallowed the whole ruleset below it while recovering, and the
 * heading silently fell back to the theme's h2 — Poppins 28.3/1.125 — while
 * every neighbouring rule went on applying, which is exactly how it hid.
 */
.rkl-contact__heading {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(24px, 3.2vw, 40px);
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	text-transform: uppercase;
}

/* Body 2. Every text rule states its weight — the theme inherits 300 (landmine 34). */
.rkl-contact__intro {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.rkl-contact__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* H4: 18 desktop, 16 mobile. */
.rkl-contact__group-label {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-transform: uppercase;
}

/*
 * A value that is not a link stays Body 2.
 *
 * `pre-line`, not `normal`: „Rekvizitai" on the Kontaktai frame is one group of
 * three lines — company code, bank, account — measured at 63px, which is three
 * 21px lines and not one wrapped paragraph. Splitting it into three groups would
 * put a 34px heading slot between each pair. `pre-line` collapses runs of spaces
 * the way `normal` does and honours only the newlines, so indentation in the
 * editor field cannot leak into the page.
 */
.rkl-contact__value {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	white-space: pre-line;
}

/*
 * A `tel:` or `mailto:` value: green and underlined, but still the Body 2 the
 * spec gives the contact value. Poppins 500 / 1.3 is the Button type, and it
 * made a linked phone number read heavier than the identical unlinked one two
 * groups above it.
 */
.rkl-contact__link {
	color: var(--rkl-green-03);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: underline;
}

.rkl-contact__link:hover,
.rkl-contact__link:focus-visible {
	color: #02784e;
}

/* Socials ---------------------------------------------------------------- */

.rkl-contact__socials {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rkl-contact__social {
	/*
	 * `flex`, not `inline-flex`: an inline-flex box sits on the text baseline and
	 * reserves room for a descender under the glyph, which is 4px of dead space
	 * inside a 24px row (landmine 25).
	 */
	align-items: center;
	color: var(--rkl-black);
	display: flex;
	text-decoration: none;
}

.rkl-contact__social:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 4px;
}

/* The helper writes width/height 24 on the SVG; this keeps it a block. */
.rkl-contact__social-icon {
	display: block;
	height: 24px;
	width: 24px;
}

/*
 * `dark` is the spec's default and it covers both frames: black on the desktop
 * one, green on the mobile one.
 */
.rkl-contact__socials--dark .rkl-contact__social {
	color: var(--rkl-black);
}

/* BREAKPOINT: 1024px. The mobile frame draws the glyphs green. */
@media (max-width: 1024px) {
	.rkl-contact__socials--dark .rkl-contact__social {
		color: var(--rkl-green-03);
	}
}

/*
 * `green` is the one that pins the colour at every width, so it comes *after*
 * the query — same specificity, and source order settles it (landmine 3).
 */
.rkl-contact__socials--green .rkl-contact__social {
	color: var(--rkl-green-03);
}

/* The card ---------------------------------------------------------------- */

/*
 * The box, and only the box. Everything the frame draws around the form — the
 * 580, the border, the radius, the shadow, the padding — is here, because three
 * different things live inside it in turn: the form, the spinner and the success
 * message. The padding is the one that changes (the success frame draws 80/24),
 * and it could not while the form owned it.
 */
.rkl-contact__card {
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	display: flex;
	/*
	 * The frame's 580: it never grows past it, and it gives ground only when the
	 * left column has hit its own floor. `0 0 580px` was the old value and it is
	 * what starved that column between 1025 and 1250 — with a shrink factor of
	 * zero there is nothing for flex to resolve, so every pixel the row was short
	 * came out of the text beside it. The 380 floor keeps the two name fields
	 * side by side at the narrowest desktop width.
	 */
	flex: 0 1 580px;
	flex-direction: column;
	max-width: 100%;
	min-width: 380px;
	/*
	 * So the honeypot's absolute box resolves inside the card rather than against
	 * the page, and so `overflow: hidden` below has a box to clip.
	 */
	position: relative;
	padding: 24px;
	/*
	 * The height is animated between the three panels, and view.js is what sets
	 * it: an explicit pixel height is pinned before the swap and removed after
	 * the transition, so the card is `auto` at rest and cannot be left at a stale
	 * number by a resize, a font load or a wrapped Lithuanian heading.
	 *
	 * `overflow: hidden` for the duration of that transition only — see
	 * `.is-animating`. Permanently clipping the card would cut the focus ring off
	 * every control that touches its padding edge.
	 */
	transition: height 0.28s ease, padding 0.28s ease;
}

.rkl-contact__card.is-animating {
	overflow: hidden;
}

/*
 * The loading and the success frames both draw this card at **576** —
 * 2590:61376 and 2590:61590 — where the form draws it at 648. Stating the floor
 * on both states is what makes the card move exactly once on the way to a sent
 * message, during the spinner rather than under the message being read.
 *
 * A floor and not a height: a longer heading or a `stored` warning grows the
 * panel, and clipping either would be worse than an extra 20px of card.
 */
.rkl-contact__card.is-sending,
.rkl-contact__card.is-done {
	min-height: 576px;
}

/*
 * The success frame's padding (2590:61590): 80 top and bottom, 24 either side.
 *
 * The panel sits at the *top* of that padding and not in the middle of the card:
 * the frame puts its 348px column at y = 80 in a 576px box, leaving 148 below.
 * Centring it would drop the message 34px and stop the „Ačiū" landing where the
 * „Kontaktų forma" heading was.
 */
.rkl-contact__card.is-done {
	justify-content: flex-start;
	padding: 80px 24px;
}

/*
 * The spinner *is* centred — 2590:61741 sits at y = 252 in the 576 card, which
 * is (576 − 72) / 2 to the pixel.
 */
.rkl-contact__card.is-sending {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.rkl-contact__card {
		transition: none;
	}
}

/*
 * The three panels are toggled with the `hidden` attribute, and a class-level
 * `display` beats the user-agent rule for it (landmine 2). Both are declared, so
 * the pair cannot come apart.
 */
.rkl-contact__form,
.rkl-contact__pending,
.rkl-contact__done {
	min-width: 0;
	width: 100%;
}

.rkl-contact__form[hidden],
.rkl-contact__pending[hidden],
.rkl-contact__done[hidden] {
	display: none;
}

/* The form ---------------------------------------------------------------- */

/*
 * A plain column now. 24 between the title, the field group, the consent row and
 * the button — the card's rhythm at every width, unlike the gap *between fields*
 * below.
 */
.rkl-contact__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* H3. */
.rkl-contact__form-title {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-transform: uppercase;
}

/*
 * The honeypot wrapper carries base.css's `.screen-reader-text`, not a ruleset
 * of its own: the section always has `rkl-card`, so `.rkl-card
 * .screen-reader-text` always applies, and a second copy of those nine
 * declarations could only drift from the shared one.
 */

/* Notices ---------------------------------------------------------------- */

/*
 * Black on the tinted field with a 3px accent, rather than green or red text:
 * `--rkl-green-03` on `--rkl-green-01` is 3.3:1 and `--rkl-red-02` on
 * `--rkl-red-01` is 3.3:1, both under the 4.5:1 a 14px message needs. The
 * accent is what still reads as „sent" or „failed" at a glance.
 */
.rkl-contact__notice {
	border-radius: var(--rkl-radius);
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	padding: 12px 16px;
}

/*
 * No ring, for the same reason as the success panel: `tabindex="-1"` makes this
 * a target view.js can move focus *to*, not a stop anyone can Tab *into*. The
 * green outline it used to draw landed around a red error field, which reads as
 * two different states arguing.
 *
 * The notice is a `role="status"` / `role="alert"` region and is announced on
 * its own; the tinted field with its 3px accent is what makes it visible.
 */
.rkl-contact__notice:focus {
	outline: none;
}

.rkl-contact__notice--sent {
	background: var(--rkl-green-01);
	border-left: 3px solid var(--rkl-green-03);
}

.rkl-contact__notice--error {
	background: var(--rkl-red-01);
	border-left: 3px solid var(--rkl-red-02);
}

.rkl-contact__notice[hidden] {
	display: none;
}

/* Fields ----------------------------------------------------------------- */

/*
 * The field group.
 *
 * A container of its own, because the card's gap and the fields' gap are
 * different numbers below 1024: the card stays at 24 (title → fields → consent →
 * button) and the fields drop to 16, which is what both mobile frames measure
 * (2591:66053 and 2591:67666: controls at 0, 64, 128, 192, 256 — 48 tall, 16
 * apart). One flex container has one gap.
 */
.rkl-contact__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/*
 * The name pair. Both halves need a definite basis and `min-width: 0` or the
 * inputs refuse to shrink below their intrinsic width (landmine 37).
 */
.rkl-contact__row {
	display: flex;
	gap: 16px;
}

/*
 * `position: relative` is not decoration here: the floating label is absolutely
 * placed against this box, and without it the label would resolve against the
 * card and every field's label would stack in one corner.
 */
.rkl-contact__field {
	min-width: 0;
	position: relative;
}

.rkl-contact__row .rkl-contact__field {
	flex: 1 1 0;
}

/*
 * The floating label (2587:60553).
 *
 * At rest it is the placeholder the design draws: Poppins 14/1.5 in
 * `--rkl-grey-05`, centred in the 48px box. Once the field is focused or holds a
 * value it shrinks to 12 and rises to the top, and the value sits under it. Both
 * states are the *same element*, which is the whole point — the alternative is a
 * real placeholder plus a label that appears from nowhere, and the two never
 * quite line up during the transition.
 *
 * `left: 17px` is the input's 16 of padding plus its 1px border: the label is
 * positioned against the field, and the input's border box starts one pixel in.
 *
 * `pointer-events: none` so a click lands on the control underneath. The input
 * fills the field, so there is nothing else it could land on.
 */
.rkl-contact__label {
	color: var(--rkl-grey-05);
	font-family: var(--rkl-font);
	font-size: 14px;
	font-weight: 400;
	left: 17px;
	line-height: 1.5;
	pointer-events: none;
	position: absolute;
	right: 17px;
	overflow: hidden;
	text-overflow: ellipsis;
	top: 50%;
	transform: translateY(-50%);
	transition: font-size 0.15s ease, top 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.rkl-contact__label {
		transition: none;
	}
}

/*
 * 48 = 1 border + 21 of label line + 21 of value line + 4 + 1 border. The frame
 * centres 18 + 21 = 39 in 48, which puts the label at 4.5 and the value at 22.5;
 * rounded to whole pixels that is a 21px top padding and a label at 4.
 *
 * The padding is on the control at every state, filled or not — it has to be, or
 * the value would move down by 17px the moment the first character is typed.
 * What moves is only the label.
 */
.rkl-contact__field .rkl-input {
	padding: 21px 16px 4px;
}

.rkl-input:focus + .rkl-contact__label,
.rkl-input:not(:placeholder-shown) + .rkl-contact__label {
	font-size: 12px;
	top: 4px;
	transform: none;
}

/*
 * The textarea's label never moves — the frame draws it at the content top in
 * both states (2587:60559: label at y = 8, text at 26) — so only its size
 * changes. 26 = 8 of the frame's padding plus the 18px line the label occupies.
 */
.rkl-contact__field--area .rkl-contact__label {
	top: 9px;
	transform: none;
}

.rkl-contact__field .rkl-textarea {
	padding: 26px 16px 8px;
}

.rkl-textarea:focus + .rkl-contact__label,
.rkl-textarea:not(:placeholder-shown) + .rkl-contact__label {
	font-size: 12px;
	top: 9px;
	transform: none;
}

/*
 * A rejected field turns its label red along with its border, so the two say the
 * same thing. `aria-invalid` drives both, which is why the styling and the
 * announcement cannot disagree.
 */
.rkl-input[aria-invalid="true"] + .rkl-contact__label,
.rkl-textarea[aria-invalid="true"] + .rkl-contact__label {
	color: var(--rkl-red-02);
}

/*
 * The block's own placeholder, when an editor set one that differs from the
 * label. It is hidden at rest — the resting label already occupies that line and
 * two grey strings on top of each other is unreadable — and revealed on focus,
 * by which time the label has moved up out of its way.
 *
 * When the placeholder *is* the label (the default, and what both frames draw)
 * render.php sends a single space, so there is nothing to reveal.
 */
.rkl-contact__field .rkl-input::placeholder,
.rkl-contact__field .rkl-textarea::placeholder {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.rkl-contact__field .rkl-input:focus::placeholder,
.rkl-contact__field .rkl-textarea:focus::placeholder {
	opacity: 1;
}

/*
 * The server's message for one field. `--rkl-red-02` on white is 4.7:1, so this
 * one can be red. It is only shown for a field the handler rejected, and
 * `aria-describedby` on the control points at it.
 */
.rkl-contact__field-error {
	color: var(--rkl-red-02);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 8px 0 0;
}

.rkl-contact__field-error[hidden] {
	display: none;
}

/*
 * The consent block is a column of the checkbox row and, when the server
 * rejected it, its message — no `gap`, because `.rkl-contact__field-error`
 * brings its own 8px top margin and that is what every other field's error sits
 * at. As a sibling of the row the message picked up the card's 24px gap as well
 * and sat 32px down.
 */
.rkl-contact__consent {
	display: flex;
	flex-direction: column;
}

.rkl-contact__consent-row {
	align-items: flex-start;
	display: flex;
	gap: 16px;
}

/*
 * Button 1 — Poppins Medium 14 / 1.3, which is what the frame gives „Sutinku su"
 * (2527:37696) and its link alike, not the Body 2 the fields use. The
 * difference is a line box of 18.2 against 21, and with a 20px checkbox beside
 * it that is the row's whole height: at 1.5 the consent row measured 21 and put
 * the card a pixel over the frame at every width.
 */
.rkl-contact__consent-label {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.rkl-contact__consent-link {
	color: var(--rkl-green-03);
	font-weight: 500;
	text-decoration: underline;
}

.rkl-contact__consent-link:hover,
.rkl-contact__consent-link:focus-visible {
	color: #02784e;
}

/*
 * A definite `width`, not `margin-inline: auto`: an auto inline margin on a flex
 * item suppresses `stretch`, which is how a full-width button once came out the
 * width of its label (landmine 38).
 */
.rkl-contact__submit {
	width: 100%;
}

/* Loading ---------------------------------------------------------------- */

/*
 * The spinner panel (2590:61355). It fills whatever height the card was pinned
 * to, so the ring is centred in the box the form left behind rather than in a
 * box of its own; the `min-height` is only the floor for the case where the
 * pinning did not happen.
 */
.rkl-contact__pending {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-height: 200px;
}

/*
 * No ring, for the same reason as the success panel and the notice: this is a
 * `tabindex="-1"` target view.js moves focus *to* when it hides the form, not a
 * stop anyone can Tab into. The spinner is what says „working".
 */
.rkl-contact__pending:focus {
	outline: none;
}

/*
 * 72px, an 8px track in `--rkl-grey-03` and a 90° arc in `--rkl-green-03`. Drawn
 * rather than exported: the frame's asset is a static arc, and an arc that has
 * to turn is one border colour and one keyframe — no file to go stale, nothing
 * to fetch before it can start.
 *
 * The rotation is kept under `prefers-reduced-motion`. A progress indicator that
 * does not move is not a progress indicator, and the guidance is about
 * decorative motion; what a still ring would communicate is „stuck".
 */
.rkl-contact__spinner {
	animation: rkl-contact-spin 0.8s linear infinite;
	border: 8px solid var(--rkl-grey-03);
	border-radius: 50%;
	border-top-color: var(--rkl-green-03);
	display: block;
	height: 72px;
	width: 72px;
}

@keyframes rkl-contact-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Success ---------------------------------------------------------------- */

/*
 * 2590:61590: a 416-wide column centred in the card, 48 between the message and
 * the button, 16 inside the message.
 */
.rkl-contact__done {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 48px;
	text-align: center;
}

.rkl-contact__done-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 416px;
	width: 100%;
}

/*
 * `height: auto` against the markup's stated 80: the mark's viewBox is
 * 44.63 × 35.86, an aspect of 1.2445 against the frame's 100 × 80, or 1.25.
 * Honouring both numbers would squash it for the sake of half a pixel.
 */
.rkl-contact__done-mark {
	display: block;
	height: auto;
	width: 100px;
}

/* H3, centred. */
.rkl-contact__done-heading {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-transform: uppercase;
}

/* Body 1 — 16, not the 14 the form uses. */
.rkl-contact__done-text {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/*
 * The `stored` line: the enquiry is in wp-admin and the notification did not go
 * out. Body 2 in the muted grey, under the message — it is information for us
 * that happens to be visible, not a failure the visitor has to act on.
 */
.rkl-contact__done-warning {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	max-width: 416px;
}

.rkl-contact__done-warning[hidden] {
	display: none;
}

/*
 * The frame strokes this button `#1E201E`, where the shared outline modifier
 * uses `--rkl-grey-02`. One declaration rather than a third modifier in
 * base.css: this is the only place in the design that draws it.
 */
.rkl-contact__done-again {
	border-color: var(--rkl-black);
	flex: 0 0 auto;
}

/*
 * No ring on the panel itself.
 *
 * The `tabindex="-1"` is there so view.js can *move* focus here when the form
 * the visitor was standing in disappears — it is not a tab stop and nobody can
 * reach it by keyboard. Chrome still matched `:focus-visible` on that
 * programmatic move, which drew a green outline around the whole card the moment
 * the message appeared and read as an error state on a success panel.
 *
 * The panel is a `role="status"` live region, so it announces itself; the ring
 * added nothing but noise.
 */
.rkl-contact__done:focus {
	outline: none;
}

/* BREAKPOINT: 1024px. The mobile frame stacks everything. */
@media (max-width: 1024px) {
	.rkl-contact {
		flex-direction: column;
		/*
		 * Both mobile frames — 2591:66033 here and 2591:67649 on Partneriams —
		 * put the info column at y = 48 and the card 48 below it, and close the
		 * section 24 under the card. The 16/32 this used to carry matched
		 * neither of them.
		 */
		gap: 48px;
		padding: 48px 16px 24px;
		/*
		 * The mobile bar is 92px tall, and the theme's 72px `scroll-padding-top`
		 * is added to whatever stands here — see the desktop rule. 24 keeps the
		 * total at ~96, just clear of the bar.
		 */
		scroll-margin-top: 24px;
		/*
		 * The desktop `space-between` distributes horizontal slack between two
		 * definite columns; in a column it would distribute *vertical* slack the
		 * moment anything gives this section a height, and push the form card to
		 * the bottom of it.
		 */
		justify-content: flex-start;
	}

	.rkl-contact__info {
		/* 32, not the desktop 40: 147 − 115 and 235 − 203 on the mobile frame. */
		gap: 32px;
		max-width: none;
		/*
		 * The desktop floor has to go, and not only because the column is now
		 * full width: a 320px minimum inside a 288px column — which is what a 320
		 * viewport gives — is 32px of horizontal scroll on the whole page.
		 */
		min-width: 0;
		width: 100%;
	}

	/*
	 * 24 top and bottom, 16 either side — both mobile frames put the card's
	 * content box at (16, 24) inside a 368 × 671 card (2591:66051, 2591:67664).
	 * A flat 16 made the card 16px short.
	 */
	.rkl-contact__card {
		flex: 0 1 auto;
		/* Same reason as the info column above: 380 is wider than a 288 column. */
		min-width: 0;
		padding: 24px 16px;
		width: 100%;
	}

	/*
	 * No floor on a phone. 576 is the desktop frame's card; the mobile frames
	 * draw neither state, and a 368-wide card holding four centred lines has no
	 * business reserving 576px of height for them.
	 */
	.rkl-contact__card.is-sending,
	.rkl-contact__card.is-done {
		min-height: 0;
	}

	.rkl-contact__card.is-done {
		padding: 48px 16px;
	}

	/* The card's own rhythm stays 24; only the gap between fields drops. */
	.rkl-contact__fields {
		gap: 16px;
	}

	/* The mobile frame puts the two names on their own lines. */
	.rkl-contact__row {
		flex-direction: column;
	}

	/*
	 * „H3 mobile" — Boldonse 18 / 1.6, the same library token
	 * `.rkl-section-card__title` takes in base.css. Both of these are H3s: the
	 * form's heading measures 29 on the mobile frame (2591:66052) and the desktop
	 * clamp put it at 38.
	 */
	.rkl-contact__form-title,
	.rkl-contact__done-heading {
		font-size: 18px;
		line-height: 1.6;
	}

	.rkl-contact__done {
		gap: 32px;
	}
}