@charset "UTF-8";
/*!
 * Contact page.
 *
 * Pairs with wp/hello-elementor-child/template-contact.php.
 * Built from Figma 19658:22556 ("Contact - desktop - eng") for layout, with
 * pixel values and copy taken from staging where the two disagree.
 *
 * There is NO mobile frame for this page in the Figma file. Every <768px rule
 * here is an implementation decision rather than a transcription.
 *
 * Values use var(--rs-*) with the hex as a fallback, so the file still renders
 * correctly if it loads before the token sheet.
 *
 * `.container` is 1146px at xl (config/variables.scss) — the same 1146 the Figma
 * grid and the map artwork use — so the page needs no width declarations of its
 * own, and the map sits at exactly its intrinsic size.
 */
/* The form skin: inputs, textarea, consent row, error tips, the submit's
   idle/sending faces. A neutral scope shared with every other CF7 form on the
   site, which is the whole reason this page's form looks like the others rather
   than like the bespoke inline layout Figma draws for it. It pulls its own
   $input-* variables from config/_survey-atoms.scss. */
/*
 * rs-form — the shared Contact Form 7 field skin.
 *
 * Neutral scope for RS form fields, so a form does not have to wear another
 * form's name to inherit its styling. Values are the ones book-call-survey
 * established and the Figma popup spec independently matches: 1px #B2C9CB,
 * radius 4, #FFFFFE, 48px tall, Hind Madurai 14px.
 *
 * Imported by the page stylesheets that need it (only one loads per page, so the
 * duplication across compiled files costs nothing over the wire). Layout —
 * rows, columns, submit placement — stays with the page; this is only the skin.
 *
 * pages/book-call-survey.scss imports this too. Its CF7 bodies (post 84320 EN /
 * 84330 PL) wrap their fields in <div class="rs-form">, added alongside the
 * existing .book-call-survey scope rather than replacing it — panels, radios
 * and buttons there are still scoped to .book-call-survey and stay page-local.
 */
/* ---- Text inputs ------------------------------------------------------------ */
.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel],
.rs-form textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #B2C9CB;
  border-radius: 4px;
  background-color: #fffffe;
  color: #5d636a;
  /* No space: config/fonts.scss now declares the face under both spellings,
     but the unspaced one is the canonical self-hosted name. */
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form input[type=text],
.rs-form input[type=email],
.rs-form input[type=tel] {
  height: 48px;
}

.rs-form textarea {
  height: 111px;
  min-height: 111px;
  resize: vertical;
}

/* Grow downward with the content instead of scrolling inside the fixed box.
   111px is ~3.5 lines at this line-height, while the Diagnostic form's blocker
   field asks for "2-3 things that can't wait" — overflow was near-guaranteed.
   The @supports wrapper is load-bearing, not politeness: an explicit `height`
   beats field-sizing where it works, and dropping `height` unconditionally
   would let a non-supporting browser fall back to CF7's rows="10" (~10 lines).
   So unsupported engines keep exactly the old box. max-height keeps a long
   answer from pushing the submit button off screen; the controls' own
   maxlength (2000 on that field) already caps the realistic worst case.
   Baseline newly available 2026-06-16, Firefox 152 last in. */
@supports (field-sizing: content) {
  .rs-form textarea {
    field-sizing: content;
    height: auto;
    max-height: 50vh;
  }
}
.rs-form input::placeholder,
.rs-form textarea::placeholder {
  color: #5d636a;
  opacity: 1;
}

/* Active state = the amber border, per Figma `molecula/form` (component set
 * 30589:1977, variant state=active). This was #69B9C9 plus a translucent teal
 * ring — a two-part focus treatment the design system does not have; the ladder
 * is border-colour only, and its six values now live in config/_survey-atoms.scss
 * rather than being spelled out here as well.
 *
 * Only active is corrected here. The other states are NOT added at component
 * level on purpose: pages/book-call-survey.scss already implements the full
 * ladder scoped to .book-call-survey, and a second copy here would be two
 * places to keep in step. See the note in that file. */
.rs-form input:focus,
.rs-form textarea:focus {
  border-color: #FFC94B;
  outline: none;
}

/* CF7 wraps every control in an inline <span>. */
.rs-form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- Consent checkbox (CF7 [acceptance]) ------------------------------------ */
.rs-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.rs-form .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d636a;
  cursor: pointer;
  font-family: HindMadurai, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.rs-form .wpcf7-acceptance input[type=checkbox] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #408897;
  cursor: pointer;
}

.rs-form .wpcf7-acceptance a {
  color: #408897;
  text-decoration: none;
}

.rs-form .wpcf7-acceptance a:hover,
.rs-form .wpcf7-acceptance a:focus-visible {
  text-decoration: underline;
}

/* ---- Validation ------------------------------------------------------------- */
.rs-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #f35b54;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ---- reCAPTCHA: hidden badge + required attribution note -------------------- */
/* Google permits hiding the v3 badge only when the attribution text is shown. */
.grecaptcha-badge {
  visibility: hidden !important;
}

.rs-form__recaptcha-note {
  margin: 0;
  color: #84a1a4;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Colour highlighting, not an underline — the house rule (Raman, 2026-08-13).
   css/rs-cf7-base.css says the same thing for every link inside a CF7 form; this
   rule has to say it too, because its own two classes outrank that sheet's
   `.wpcf7-form a`. */
.rs-form__recaptcha-note a {
  color: #84a1a4;
  text-decoration: none;
}

.rs-form__recaptcha-note a:hover,
.rs-form__recaptcha-note a:focus-visible {
  text-decoration: underline;
}

/* ---- Submit: the sending state ----------------------------------------------
 *
 * Replaces Contact Form 7's stock spinner — a grey dot orbiting a dark circle,
 * shipped in the plugin's includes/css/styles.css and never designed for us —
 * with the design system's own disabled button face plus an hourglass and a
 * "Sending…" label. Ruling: Raman, 2026-09-01 on Asana 1217585069349335.
 *
 * WHY THE DISABLED FACE AND NOT A NEW ONE
 * atom/btns (30592:2267) has 118 variants and its `state` axis is
 * default / hover / click / tap / disabled / focus — there is no `sending`.
 * Nor is there one anywhere else in the file: `btn - lazy loading`
 * (20294:13762) sounds like a candidate and is not, it is a "Show more"
 * paginator. So the disabled face is the only design-system-grounded surface
 * for an inert button, and the values below are read from
 * 30592:2280 (desktop) and 30650:1646 (mobile):
 *
 *     fill    #D8E2E3      ink (label AND icon)  #B2C9CB
 *     radius  4            shadow                none — disabled leaves the ladder
 *     icon    18px desktop / 14px mobile
 *
 * ⚠️ That same node is ALSO the design for the consent-gated state — CF7
 * disables the submit until [acceptance] is ticked. Two different meanings, one
 * surface, deliberately: the icon and the label are what tell them apart, so a
 * gated button must keep its own glyph and its own words. Do not "unify" them
 * by dropping the label swap.
 *
 * NO ANIMATION, BY DESIGN
 * The specified treatment is static — the moving part is the label, not a
 * spinner. That makes the prefers-reduced-motion equivalent CF7 ships (spin ->
 * blink) unnecessary rather than omitted: there is nothing here to reduce.
 *
 * SCOPE
 * `form.submitting` is CF7's own hook (it also sets data-status="submitting" on
 * the same element) and .rs-form sits inside that form, so these selectors run
 * (0,3,1) and clear the (0,1,1) `button.<page>__submit` faces the page sheets
 * declare. Any RS form that adopts the two label spans gets this for free; a
 * form without them is untouched except that CF7's own spinner stops rendering.
 */
/* CF7 injects <span class="wpcf7-spinner"> after any control carrying
   .has-spinner. Keep the class — it is what inserts the element, and its
   companion .wpcf7-submit is what gates the button on [acceptance] — and hide
   the element instead, because the button now carries the state itself. */
.rs-form .wpcf7-spinner {
  display: none;
}

/* Both labels ship in the markup and CSS chooses between them. They are NOT
   gettext strings: a CF7 body is post content, so the EN and PL copies of a form
   are two separate posts and each carries its own words — the PL "Sending…"
   lives in inc/cf7/free-audit-toolkit-pl.html, not in pl_PL.po. Each label is
   its own flex row so the atom's 12px label-to-icon gap survives the wrapping. */
.rs-form__submit-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.rs-form__submit-label--sending {
  display: none;
}

form.submitting .rs-form .rs-form__submit-label--idle {
  display: none;
}

form.submitting .rs-form .rs-form__submit-label--sending {
  display: inline-flex;
}

/* Own keyframes rather than Font Awesome's `fa-spin`, which would put the
   animation in the markup and make it depend on FA's utility CSS being present.
   The theme self-hosts the icon faces; betting a state on a utility class it may
   or may not ship is a bet with no upside. */
@keyframes rs-form-hourglass {
  to {
    transform: rotate(360deg);
  }
}
/* The disabled face, held for as long as the request is in flight. */
form.submitting .rs-form .wpcf7-submit {
  box-shadow: none;
  background-color: #d8e2e3;
  color: #b2c9cb;
  opacity: 1;
  /* Not a decoration: CF7 does not disable the control while submitting, and a
     second click on a live submit is the whole reason the user sees a spinner
     at all. `disabled` would need JS; this does not, and reads the same. */
  cursor: default;
  pointer-events: none;
}

form.submitting .rs-form .wpcf7-submit i {
  color: #b2c9cb;
  animation: rs-form-hourglass 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  form.submitting .rs-form .wpcf7-submit i {
    animation: none;
  }
}

/* The submit button's box + the shadow ladder. The button is a raw <button> and
   never carries `.btn`, so main.scss's global button block cannot reach it. */
/*!
 * The design system's button atom — atom/btns, Figma component set 30592:2267.
 *
 * WHY THIS FILE EXISTS
 * The same button box was written out longhand in eight places: four faces on the
 * Reliability Protocol LP, both survey submits, and the two hero faces. Every copy
 * was a place to drift, and it did drift — `.protocol-survey__next` ended up with
 * `min-height: 56px` and a second, higher-specificity `button.protocol-survey__next`
 * rule 400 lines away correcting it back to 48. Reviews kept surfacing button
 * findings page by page for exactly this reason.
 *
 * WHAT BELONGS HERE
 * Only the atom's BOX — the numbers that are identical across every colour.
 * Fill, border colour and label colour deliberately stay with the caller, because
 * that is the only axis the atom actually varies (yellow / teal / black / white),
 * and Bootstrap's own .btn-* variants already carry those for the global buttons.
 *
 * WHAT IS NOT HERE
 * The shadow ladder's hover and click steps, the disabled face and the radius
 * custom property live on the global `.btn` block in main.scss, which every button
 * in the theme already gets. Repeating them here would give two owners to one rule.
 *
 * Imported by main.scss and by the standalone page stylesheets that need it — the
 * pages/ entry points do not include main.scss, so a shared partial is the only way
 * they can share a definition.
 */
/* State shadows. The ladder tightens and strengthens as the button is pressed:
     default   0 20px 40px -10px rgba(38,50,56,.2)
     hover     0 10px 20px  -5px rgba(38,50,56,.3)
     click     0  5px 10px  -5px rgba(38,50,56,.4)
   Figma's ON_HOVER motion is 200ms ease-out, not Bootstrap's 150ms ease-in-out. */
/* The design system's inline text link (Figma component set 33721:24628) is NOT
   imported here. Both text links on this page used to be styled page-locally —
   coral in the hero, yellow in the closing CTA, both underlining on hover.
   Raman, 2026-09-07: "here, in the Hero section and globally - we are not using
   underline style for a Text Links", and the hero link's face is
   `color=black`. Those page-local rules are gone, and the component itself now
   lives in main.scss, which every page sheet loads before its own rules. */
/* ---- Page-wide button behaviour ----------------------------------------- */
/*
 * No icon travel on this page.
 *
 * The shared atom nudges its glyph 3px right on hover (main.scss:267), which
 * reproduces Figma's align-items flip inside the 24x18 icon frame. It is the
 * site's normal affordance, but it also means the gap between label and icon
 * changes under the cursor. On this page the buttons are asked to hold their
 * spacing, so the travel is cancelled — the transition on `i` stays, it simply
 * has nothing left to move.
 *
 * Scoped to `.rs-contact`, which is one class more specific than the atom's own
 * `.btn.btn-atom:hover i`, and this sheet is printed after main.min.css because
 * rs_enqueue_template_style() declares it as a dependency. So it wins on both
 * counts, and every other page keeps the animation.
 *
 * Covers both buttons that carry an icon here — the hero CTA's arrow-down and
 * the closing CTA's LinkedIn mark — plus any added later.
 */
.rs-contact .btn.btn-atom:hover i,
.rs-contact .btn.btn-atom:focus-visible i {
  transform: none;
}

/* ---- Hero -------------------------------------------------------------- */
/*
 * White, not the ivory this shipped with. Raman, 2026-09-07: "I've changed a bg
 * colors in the hero section and in some section below / in the hero it's white
 * now" — paired with the form band below dropping to grey-light-50, which gives
 * the page a white / grey / white rhythm instead of ivory / white / white.
 *
 * Flagged: the Figma frame's own fill still reads #f9faf4 and the form group
 * still inherits it, so this pair comes from the review comment rather than
 * from the file. The geometry in 19658:23420 IS current (teal button, one-row
 * actions, black link), so the frame is stale on fills only.
 */
.rs-contact-hero {
  padding: 60px 0 80px;
  background-color: var(--rs-white-pure, #fffffe);
}
@media (max-width: 767.98px) {
  .rs-contact-hero {
    padding: 32px 0 40px;
  }
}

/*
 * The left column's rhythm is Figma 19658:23420, re-read 2026-09-07 after
 * Raman's "check out the gaps and paddings between elements in the left part":
 * an outer 40px column gap between the copy block and the actions row, and a
 * 24px gap inside the copy block (emoji -> H1 -> lead). Each element carries
 * its own margin-bottom rather than the frame's flex gap, because the emoji and
 * the H1 are separate blocks in the markup, not children of one flex box.
 */
.rs-contact-hero__wave {
  margin: 0 0 24px;
  font-size: 32px;
  line-height: 1.3;
}

.rs-contact-hero__title {
  margin: 0 0 24px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  /*
   * The H1 is two lines in EN and one in PL, and the natural break leaves
   * "setup?" alone on the second line. `balance` splits it "What needs /
   * the right setup?" instead, and is a no-op on the single-line PL string,
   * so one rule covers both without hard-coding a break per language.
   */
  text-wrap: balance;
}
@media (max-width: 767.98px) {
  .rs-contact-hero__title {
    font-size: 32px;
  }
}

.rs-contact-hero__lead {
  margin: 0 0 40px;
  max-width: 480px;
  color: var(--rs-black-second, #5d636a);
  font-family: "Hind Madurai", sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
}
@media (max-width: 767.98px) {
  .rs-contact-hero__lead {
    font-size: 1rem;
  }
}

/*
 * Button and text link on one line — the frame's `actions` row (43750:36552):
 * flow row, align center, gap 24. Raman: "now prime btn and text link in a one
 * stroke". It used to stack, with the link on its own line 20px below.
 *
 * Wraps rather than overflows: the PL label is longer than the EN one, and at
 * the tablet widths where the column is narrowest the pair would otherwise push
 * past the column edge.
 */
.rs-contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

/* The frame's `bottom link` (43750:36535): "or" and the link 6px apart, both on
   the same centre line. The link's own face comes from .rs-link-text. */
.rs-contact-hero__alt {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: "Hind Madurai", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/*
 * The offset-card figure — Figma group `img` 19658:23417, 588x420.
 *
 *   plate  `cnt`   19658:23418   558x420 at x30 y0,  #f9f9f9, radius 4
 *   photo  `image` 19658:23419   558x360 at x0  y30, radius 4, the two-stop
 *                                drop shadow
 *
 * So the plate is visible above, below and to the right of the photo, and the
 * photo overhangs it on the left. That layering is the whole point of the
 * composition, and it is what disappeared when the hero band turned white while
 * the plate was still a white rectangle baked into the bitmap.
 *
 * Everything is a percentage of the 588x420 box so the plate tracks the photo
 * at every width — the column is narrower than 588 from about 1200px down, and
 * fixed 30px offsets would drift out of proportion as it shrinks.
 */
.rs-contact-hero__figure {
  text-align: right;
}
@media (max-width: 991.98px) {
  .rs-contact-hero__figure {
    margin-top: 32px;
    text-align: center;
  }
}

.rs-contact-hero__frame {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 588px;
  /* Holds the box open: the photo is absolutely positioned, so without this
     the wrapper would collapse to zero and take the plate with it. */
  aspect-ratio: 588/420;
  vertical-align: top;
  /* The plate. 558 of 588 wide, pushed 30 of 588 right, full height. */
}
.rs-contact-hero__frame::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 94.898%;
  height: 100%;
  border-radius: 4px;
  background-color: var(--rs-grey-light-50, #f9f9f9);
  content: "";
}

.rs-contact-hero__photo {
  position: absolute;
  z-index: 1;
  /* 30 / 420 down, 558 / 588 wide, 360 / 420 tall. */
  top: 7.1429%;
  left: 0;
  width: 94.898%;
  height: 85.7143%;
  border-radius: 4px;
  /* Was baked into the old composite bitmap; the frame's own effect stack. */
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  object-fit: cover;
}

/* ---- Form + client logos ----------------------------------------------- */
/* grey-light-50, on Raman's 2026-09-07 review ("bg color: grey-light-50"). The
   band the hero's white now hands off to — see the note on .rs-contact-hero. */
.rs-contact-form-band {
  padding: 90px 0;
  background-color: var(--rs-grey-light-50, #f9f9f9);
}
@media (max-width: 767.98px) {
  .rs-contact-form-band {
    padding: 40px 0;
  }
}

/*
 * The teal card — Figma form-2 (19658:23393): the design system's
 * --rs-gradient-teal-light (135deg, #4b9eb0 -> #408897), radius 4, and the
 * soft double drop-shadow, with 30px padding.
 *
 * The FIELDS inside are untouched: they are the shared .rs-form skin, white on
 * their own, which is exactly why they still read correctly on a teal ground.
 * Only the copy that sits DIRECTLY on the teal needs re-inking, below.
 */
.rs-contact-form-card {
  padding: 30px;
  border-radius: 4px;
  background: var(--rs-gradient-teal-light, linear-gradient(135deg, #4b9eb0 0%, #408897 100%));
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}
@media (max-width: 767.98px) {
  .rs-contact-form-card {
    padding: 20px;
  }
}

/* Consent row and its privacy-policy link sit on the teal, so they invert. */
.rs-contact-form-card .rs-contact-form__consent,
.rs-contact-form-card .wpcf7-list-item-label,
.rs-contact-form-card .rs-contact-form__consent a {
  color: var(--rs-white-pure, #fffffe);
}

.rs-contact-form-card .rs-contact-form__consent a {
  text-decoration: underline;
}

/*
 * Field errors: the shared skin sets #f35b54, which is ~2.3:1 on this teal and
 * effectively unreadable. Lightened to keep the "something is wrong" reading
 * without losing it against the card.
 */
.rs-contact-form-card .wpcf7-not-valid-tip {
  color: #ffd5d2;
}

/*
 * The reCAPTCHA attribution, hidden on Oskar's instruction (2026-09-05), the
 * same call already made for the self-audit modal.
 *
 * COMPLIANCE: components/_rs-form.scss hides the reCAPTCHA badge site-wide with
 * `.grecaptcha-badge { visibility: hidden !important }`. Google permits hiding
 * the badge ONLY while this attribution text is shown, so with both hidden this
 * form no longer meets the reCAPTCHA branding requirement. Undo by deleting
 * this rule, or unhide the badge for this form instead.
 */
.rs-contact-form-card .rs-form__recaptcha-note {
  display: none;
}

/*
 * The brands card — Figma 19658:23360, 558x441, 30px padding, column, gap 30,
 * contents centred.
 */
.rs-contact-brands {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  padding: 30px;
}
@media (max-width: 991.98px) {
  .rs-contact-brands {
    padding: 40px 0 0;
  }
}

/*
 * The design system's H4 — Montserrat 700 24px/1.4 #34383c, the same style
 * .rs-cs-stagebox h4 already implements in pages/case-study.scss.
 *
 * It shipped as Hind Madurai 400 24/1.4 because that is what the frame's text
 * node still says (19658:23361, re-read 2026-09-07 — unchanged). Raman ruled
 * against the frame: "wrong style for the 'You're in great company' title /
 * should be H4 from DS". The ruling wins; the node is expected to move.
 */
.rs-contact-brands__title {
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 767.98px) {
  .rs-contact-brands__title {
    font-size: 20px;
  }
}

/*
 * The client-logo grid — Figma 22975:17341: a 460x300 block of 152x60 cells,
 * three per row, 20px between rows, centred. The logos are a shared LIST
 * rendered by this page's own layout, not the shared marquee component (a
 * full-width scrolling band that belongs to other pages).
 *
 * The source images have wildly different intrinsic sizes (147x30, 166x60,
 * 50x50, 137x18 all appear in the current set), so the CELL defines the box and
 * object-fit letterboxes each logo inside it. Without that the square marks
 * render about three times the visual weight of the wide ones.
 */
/*
 * TWO logos per row, at every width. Raman, 2026-09-07: "I'd suggest here to
 * use a two-row logic for a logos as on mobiles now - it would be visibly more
 * corrected. Not 3-rows." The shared list is 10 logos, which does not divide by
 * three — three-across left one orphan on a row of its own, which is what he is
 * looking at. Two-across is 5 even rows.
 *
 * That also collapsed the two breakpoint overrides this rule used to carry: the
 * only reason they existed was to step 3 -> 3 fluid -> 2, and 2 is now the only
 * count. `minmax(0, 152px)` keeps the design's cell width where there is room
 * and lets the pair shrink below ~330px rather than overflow.
 */
.rs-contact-brands__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 152px));
  /* 20px both ways. The 2px column gap this used to carry was never a design
     value — Figma's instance sets only gapCross (20) and lets `justify: center`
     with wrap distribute the horizontal space, which at 3 x 152 inside 460
     worked out to ~2px. With two columns there is no packing constraint left,
     and 2px reads as two logos touching. */
  gap: 20px;
  justify-content: center;
  max-width: 324px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-contact-brands__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 60px;
  /*
   * Figma applies opacity .5 with a luminosity blend; against the white card
   * that is the same result as desaturating, and saturate(0) is what
   * pages/logo-marquee.scss already uses for this identical logo list — so a
   * client's mark looks the same here as on every other page. Colour on hover
   * is the marquee's affordance too.
   */
}
.rs-contact-brands__cell img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.5;
  filter: saturate(0);
  transition: all 0.3s ease-in-out;
}
.rs-contact-brands__cell img:hover {
  opacity: 1;
  filter: saturate(1);
}

/* ---- The form itself ---------------------------------------------------- */
/*
 * Field skin, error tips and the submit's idle/sending faces all come from the
 * `.rs-form` scope imported at the top of this file. Only the row rhythm and
 * the button's fill are page-scoped, matching pages/cta-two-path.scss so the
 * two forms measure the same.
 *
 * The reCAPTCHA attribution note is deliberately NOT hidden here. The modal
 * hides its copy, but components/_rs-form.scss hides the badge site-wide and
 * Google permits that only while this text is visible — so on a standalone page
 * form the note stays.
 */
.rs-contact-form__row + .rs-contact-form__row {
  margin-top: 20px;
}

/*
 * The conversational rows — Figma 19658:23394.
 *
 * Each row is a sentence: a fragment, the fields that complete it, and the
 * comma that joins it to the next. Baselines align on `flex-end` so the text
 * sits on the same line as the bottom of the inputs rather than floating at
 * their vertical centre.
 *
 * The lead is a fixed 150px so both rows' fields start at the same x — the
 * frame's alignment, and what stops the form reading as ragged.
 */
.rs-contact-form__line {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

/*
 * The lead hugs its text - no fixed basis.
 *
 * A fixed column (the frame uses 150) buys alignment between the two rows and
 * pays for it in dead space: at 184px, "to jest mój e-mail:" left 30px of gap
 * before its field and the row stopped reading as a sentence. Hugging trades
 * that alignment away deliberately, so "Cześć, nazywam się [ ]" sits together
 * as one line of prose, which is the whole point of the conversational form.
 *
 * The consequence to know: rows 1 and 2 now start their fields at DIFFERENT x,
 * because their lead-ins are different lengths (168 vs 154 in Polish). That is
 * intended, not drift.
 *
 * `nowrap` stays. Without it a long translation silently wraps and the row
 * grows to two lines, which is the bug this replaced.
 */
.rs-contact-form__lead {
  flex: 0 0 auto;
  max-width: 100%;
  padding-bottom: 14px;
  color: var(--rs-white-pure, #fffffe);
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.rs-contact-form__fields {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.rs-contact-form__fields .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
}

/* The comma between clauses. Decorative punctuation, aria-hidden in the markup. */
.rs-contact-form__punct {
  flex: 0 0 auto;
  padding-bottom: 14px;
  color: var(--rs-white-pure, #fffffe);
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 1;
}

/* The message row: its lead sits ABOVE a full-width textarea, per the frame. */
.rs-contact-form__line--stacked {
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
}

.rs-contact-form__lead--wide {
  flex: 0 0 auto;
  padding-bottom: 0;
  line-height: 1.6;
  /* Full-width line above the textarea - it may wrap, unlike the inline leads. */
  white-space: normal;
}

/*
 * Below 992px every row stacks. PL runs 10-15% longer than EN — "Cześć,
 * nazywam się" and "i chciałem porozmawiać o:" both overrun the 150px lead —
 * and two 152px inputs plus a fragment cannot share 375px at any type size.
 */
@media (max-width: 991.98px) {
  .rs-contact-form__line {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .rs-contact-form__lead {
    flex: 0 0 auto;
    padding-bottom: 0;
    font-size: 1rem;
    line-height: 1.4;
    /* Stacked here, so it may wrap and must not hold a 184px basis. */
    white-space: normal;
  }
  /* The commas only make sense while the clauses share a line. */
  .rs-contact-form__punct {
    display: none;
  }
}
.rs-contact-form__consent {
  margin-top: 30px;
}

/*
 * `button.` is not redundant. The parent hello-elementor theme's reset.css
 * targets `[type=submit], button` and paints an unstyled button as a pink
 * (#c36) pill; it loads after this sheet, so a single class loses the tie on
 * source order. The element qualifier is what wins it.
 */
button.rs-contact-form__submit {
  min-height: 48px;
  padding: 15px 20px 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 15px;
  border: 0;
  background-color: var(--rs-yellow-00, #ffc94b);
  color: var(--rs-black-prime, #34383c);
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
button.rs-contact-form__submit:hover, button.rs-contact-form__submit:focus-visible {
  background-color: var(--rs-yellow-btn-hover, #ffb710);
}

@media (max-width: 767.98px) {
  .rs-contact-form__row + .rs-contact-form__row {
    margin-top: 8px;
  }
  .rs-contact-form__consent {
    margin-top: 16px;
  }
  button.rs-contact-form__submit {
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    margin-top: 12px;
  }
}
/* ---- Offices map -------------------------------------------------------- */
.rs-contact-map-band {
  padding: 90px 0;
  background-color: var(--rs-white-pure, #fffffe);
}
@media (max-width: 767.98px) {
  .rs-contact-map-band {
    padding: 40px 0;
  }
}

/* Centred in the frame, and set at the 40px display size, not 32. */
.rs-contact-map__title {
  max-width: 620px;
  margin: 0 auto 64px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 767.98px) {
  .rs-contact-map__title {
    margin-bottom: 24px;
    font-size: 24px;
  }
}

.rs-contact-map {
  position: relative;
  /* The artwork is 1146x547 and .container is 1146 wide, so this box is the
     map's intrinsic size on desktop and scales proportionally below that.
     Percentage pin offsets stay correct at every width because of it. */
  aspect-ratio: 1146/547;
}
@media (max-width: 767.98px) {
  .rs-contact-map {
    display: none;
  }
}

.rs-contact-map__art {
  width: 100%;
  height: 100%;
}

/*
 * The pin — Figma 19658:23295/23301/23319. Three concentric parts:
 * a 43px halo of teal-00 at 15%, a 23px solid teal-light-20 dot, and an 11px
 * white glyph. The halo is the pin box itself, so the anchor's hit area is the
 * full 43px rather than just the visible dot.
 */
.rs-contact-map__pin {
  position: absolute;
  /* --rs-pin-x / --rs-pin-y are set per pin as a style attribute in the
     template — the values are data (one row per office), the rule is not. */
  top: var(--rs-pin-y);
  left: var(--rs-pin-x);
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(64, 136, 151, 0.15);
  text-decoration: none;
}

.rs-contact-map__dot {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: var(--rs-teal-light-20, #69b9c9);
  color: var(--rs-white-pure, #fffffe);
  transition: background-color 300ms ease-in, width 300ms ease-in, height 300ms ease-in;
}

/*
 * The 11px glyph. `fort` / `location-dot`, Font Awesome regular — both were
 * added to the kit on 2026-09-07, which is what let the two inlined SVG paths
 * this rule used to size come out of the template. The ink is inherited so the
 * dot owns it.
 */
.rs-contact-map__glyph {
  color: inherit;
  font-size: 11px;
  line-height: 1;
}

.rs-contact-map__pin:hover .rs-contact-map__dot,
.rs-contact-map__pin:focus-visible .rs-contact-map__dot {
  width: 26px;
  height: 26px;
  background-color: var(--rs-teal-00, #408897);
}

.rs-contact-map__pin:focus-visible {
  outline: 2px solid var(--rs-teal-00, #408897);
  outline-offset: 4px;
}

/*
 * The pulse.
 *
 * `.spinner-grow` is Bootstrap's, already in main.min.css: its keyframes scale
 * from 0 to 1 while fading 1 -> 0, which is the same gesture as Elementor's
 * `e-hotspot--expand` ring this page used to have. Reusing it means no new
 * @keyframes block anywhere in the theme. Only the size, colour and tempo are
 * overridden here; Elementor ran the ring at 2s, so this does too.
 */
.rs-contact-map__pulse {
  position: absolute;
  width: 43px;
  height: 43px;
  animation-duration: 2s;
  color: var(--rs-teal-light-20, #69b9c9);
  pointer-events: none;
}

/*
 * Bootstrap's own reduced-motion rule only slows spinners to 1.5s, because a
 * loading spinner that stops looks broken. This one is decorative, so it stops
 * completely and rests at the ring's full extent.
 */
@media (prefers-reduced-motion: reduce) {
  .rs-contact-map__pulse {
    animation: none;
    opacity: 0.25;
    transform: none;
  }
}
/*
 * The <768px fallback for the map.
 *
 * Hover does not exist on touch and four pins inside a ~180px-tall image are
 * not a tap target, so below 768px the artwork is dropped and the same four
 * offices render as plain, reachable rows.
 */
.rs-contact-map__list {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) {
  .rs-contact-map__list {
    display: grid;
    gap: 16px;
  }
}

.rs-contact-map__list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 16px;
  border-radius: 4px;
  background-color: var(--rs-grey-light-50, #f9f9f9);
  /* No hover underline, per the same standing ruling the DS Link text encodes
     — this one keeps its own teal/14px face because it is an address, not a
     navigational text link. */
}
.rs-contact-map__list-item i {
  grid-row: 1/span 2;
  color: var(--rs-teal-00, #408897);
  font-size: 20px;
  line-height: 1.4;
}
.rs-contact-map__list-item a {
  color: var(--rs-teal-00, #408897);
  font-family: "Hind Madurai", sans-serif;
  font-size: 0.875rem;
  text-decoration: none;
}

.rs-contact-map__place {
  color: var(--rs-black-prime, #34383c);
  font-family: "Hind Madurai", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

/* ---- The map tooltip ---------------------------------------------------- */
/*
 * Figma 19658:24900. A white card — glyph, then "<city> • <country>" over the
 * address — rather than Bootstrap's dark chip.
 *
 * Themed through Bootstrap's own tooltip CSS variables, scoped by the
 * `data-bs-custom-class="rs-map-tip"` the template sets on each pin. Driving
 * --bs-tooltip-bg is what paints the ARROW too: Bootstrap's .tooltip-arrow::before
 * takes its border colour from that variable, so the pointer follows the card
 * without a second rule.
 *
 * NOT scoped under .rs-contact: Bootstrap appends the tooltip to <body>, outside
 * the page wrapper, so a .rs-contact ancestor selector would never match. The
 * custom class is the scope.
 */
.rs-map-tip {
  --bs-tooltip-bg: #fffffe;
  --bs-tooltip-color: var(--rs-black-prime, #34383c);
  --bs-tooltip-max-width: none;
  --bs-tooltip-border-radius: 4px;
  --bs-tooltip-opacity: 1;
}

.rs-map-tip .tooltip-inner {
  display: flex;
  gap: 20px;
  align-items: center;
  /* 20/30/20/20 — the icon side is 10px tighter, as on every RS icon row. */
  padding: 20px 30px 20px 20px;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  font-family: "Hind Madurai", sans-serif;
  text-align: left;
}

/*
 * `house-user`, Font Awesome regular at 32px in #d8e2e3 — Figma 19658:24902.
 * Raman replaced the `city` glyph on 2026-09-07 ("more vital vibe") with
 * `house-heart`, then replaced THAT on 2026-09-08 — "this icon is very strange
 * / almost like a love house" — with `house-user`, which is what the node says
 * today. Asana 1218248426729911.
 *
 * A real <i> now, where `city` had to be a 30x24 PNG background. The reason for
 * the PNG was that `city` was missing from the kit subset, not the sanitiser:
 * Bootstrap's allowList carries `i` with `class` permitted on every tag, so an
 * <i> in tooltip content always survived. Only <svg> is stripped.
 *
 * ⚠️ `house-user` has to be present in the FA kit. The kit auto-subsets, so an
 * icon nobody has added renders as a silent blank gap — no console error, no
 * tofu, just a reserved 32px of nothing. `fort`, `location-dot` and
 * `house-heart` were added in Regular on 2026-09-07 (verified in the browser:
 * the retired `city` still resolves to `content: none`, which is what the
 * failure looks like). `house-user` is the FOURTH, and it was checked the same
 * way on staging before this shipped.
 */
.rs-map-tip .rs-map-tip__icon {
  flex: 0 0 32px;
  /* grey-light-30, not teal-light-40 — measured, that token resolves to
     #bde6ef, which is a step too saturated for this glyph. */
  color: var(--rs-grey-light-30, #d8e2e3);
  font-size: 32px;
  line-height: 1;
}

.rs-map-tip__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rs-map-tip__loca {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--rs-black-prime, #34383c);
  font-size: 20px;
  line-height: 1.6;
  white-space: nowrap;
}

/* The 6px coral separator. An empty span so it is not read aloud. */
.rs-map-tip__dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rs-coral-00, #f35b54);
}

.rs-map-tip__mail {
  color: var(--rs-black-second, #5d636a);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Postal address ----------------------------------------------------- */
.rs-contact-address {
  padding: 0 0 90px;
  background-color: var(--rs-white-pure, #fffffe);
}
@media (max-width: 767.98px) {
  .rs-contact-address {
    padding-bottom: 40px;
  }
}

.rs-contact-address__title {
  max-width: 507px;
  margin: 0;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  .rs-contact-address__title {
    font-size: 24px;
  }
}

/* The 90x2 divider between the heading and the hint (Figma rectangle-52). */
.rs-contact-address__rule {
  display: block;
  width: 90px;
  height: 2px;
  margin: 20px 0;
  background-color: var(--rs-teal-light-40, #d8e2e3);
}

.rs-contact-address__hint {
  margin: 0;
  color: var(--rs-black-second, #5d636a);
  font-family: "Hind Madurai", sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
}
@media (max-width: 767.98px) {
  .rs-contact-address__hint {
    font-size: 1rem;
  }
}

.rs-contact-address__hand {
  margin-left: 8px;
  color: var(--rs-black-prime, #34383c);
}

.rs-contact-address__hand--narrow {
  display: none;
}

@media (max-width: 991.98px) {
  .rs-contact-address__hand--wide {
    display: none;
  }
  .rs-contact-address__hand--narrow {
    display: inline-block;
  }
}
/*
 * The postcard stack. Figma draws two panels: a flat #f9f9f9 rectangle, and the
 * postcard itself offset 30px down and right of it, so the card appears to sit
 * ON something. Reproducing that offset is the whole effect — dropping it (as
 * the first pass did) leaves a card floating with no depth.
 *
 * Sized by aspect-ratio rather than a fixed height so the card keeps its
 * proportions as the column narrows.
 */
.rs-contact-address__media {
  position: relative;
  /* The card is the offset one: it sits 30px down and right of the flat
     panel, so the panel shows along the TOP and LEFT edges. */
  padding: 30px 0 0 30px;
}
@media (max-width: 991.98px) {
  .rs-contact-address__media {
    margin-top: 40px;
  }
}

.rs-contact-address__backdrop {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 30px;
  left: 0;
  border-radius: 4px;
  background-color: var(--rs-grey-light-50, #f9f9f9);
}

/*
 * Height comes from the content, with the frame's 368px as a floor. Setting
 * aspect-ratio instead pins the height and the address simply spills out of
 * the bottom of the card — which is exactly what it did on the first attempt.
 */
.rs-contact-postcard {
  position: relative;
  min-height: 368px;
  padding: 15px;
  border-radius: 4px;
  /* The airmail stripes are the design's own artwork. A
     repeating-linear-gradient lands the angle but not the stripe rhythm. */
  background: url("../img/contact-postcard-frame.png") center/cover no-repeat, var(--rs-white-pure, #fffffe);
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

/* The white writing area, inset 15px, leaving the stripes as a border. */
.rs-contact-postcard__inner {
  height: 100%;
  min-height: 338px;
  padding: 20px;
  background: linear-gradient(135deg, #fffffe 0%, #f9f9f9 100%);
}

/*
 * Lora, not the page's Hind Madurai — the frame sets the address in the
 * editorial face, which is what makes it read as handwriting-adjacent rather
 * than as UI text. <address> is italic in every UA sheet; a postal address is
 * not an aside, so that is reset.
 */
.rs-contact-postcard__body,
.rs-contact-postcard__reg,
.rs-contact-postcard__geo {
  max-width: 62%;
  margin: 0 0 16px;
  color: var(--rs-black-second, #5d636a);
  font-family: Lora, Georgia, serif;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6;
  white-space: pre-line;
}
.rs-contact-postcard__body strong,
.rs-contact-postcard__reg strong,
.rs-contact-postcard__geo strong {
  color: var(--rs-black-second, #5d636a);
  font-weight: 700;
}
.rs-contact-postcard__body:last-child,
.rs-contact-postcard__reg:last-child,
.rs-contact-postcard__geo:last-child {
  margin-bottom: 0;
}
@media (max-width: 1199.98px) {
  .rs-contact-postcard__body,
  .rs-contact-postcard__reg,
  .rs-contact-postcard__geo {
    max-width: none;
    font-size: 1rem;
  }
}

.rs-contact-postcard__geo a {
  color: var(--rs-teal-00, #408897);
}
.rs-contact-postcard__geo a:hover, .rs-contact-postcard__geo a:focus-visible {
  color: var(--rs-coral-00, #f35b54);
}

/* Postmark, top-right of the writing area (Figma stamp at 392,35 / 130x97). */
.rs-contact-postcard__stamp {
  position: absolute;
  top: 35px;
  right: 35px;
  width: 130px;
  height: auto;
}
@media (max-width: 575.98px) {
  .rs-contact-postcard__stamp {
    width: 90px;
  }
}

/* ---- Closing CTA -------------------------------------------------------- */
.rs-contact-cta {
  padding: 0 0 90px;
  background-color: var(--rs-white-pure, #fffffe);
}
@media (max-width: 767.98px) {
  .rs-contact-cta {
    padding-bottom: 40px;
  }
}

/*
 * Teal panel, photo bled into the right half, gradient over the full width so
 * the copy sits on solid colour while the picture fades in behind it.
 * Figma 19658:22560 — 1146x442, base #35717d, gradient 90deg #35717d to
 * #35717d1a at 48.73%. The copy block sits at (60,102), which is what the
 * 60px inline padding and centred alignment reproduce.
 */
.rs-contact-cta__panel {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  min-height: 442px;
  padding-left: 60px;
  border-radius: 4px;
  background-color: var(--rs-teal-dark-10, #35717d);
}
@media (max-width: 991.98px) {
  .rs-contact-cta__panel {
    min-height: 0;
    padding-left: 0;
  }
}

/*
 * Full-bleed, anchored right — NOT a 588px block pinned to the right edge.
 *
 * A hard-edged image cannot be softened by a gradient that has already faded
 * out before the image starts, which is why the first version had a visible
 * seam at 48.7%. blog-single.scss:161 solves the same problem by letting the
 * picture span the whole box and running a long fade across it; this is that
 * technique, with the photo's right side kept in frame by object-position.
 */
.rs-contact-cta__photo {
  position: absolute;
  top: 0;
  right: 0;
  /* 58%, so the photo's LEFT edge lands at 42% — inside the gradient's solid
     zone, which runs to 46%. That is what removes the seam: the edge is painted
     over, not blended at. Full-bleeding it instead would hide the edge too, but
     the source is a 588px crop and stretching it to 1146 zooms the subject by
     ~2x; this keeps it near native scale. */
  width: 58%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  object-position: center right;
}
@media (max-width: 991.98px) {
  .rs-contact-cta__photo {
    width: 100%;
    opacity: 0.5;
  }
}

.rs-contact-cta__scrim {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  /* Solid to 46%, then a long fade to 10% by 79% — the blog CTA's stops. The
     33% overlap is what makes the photo converge into the teal instead of
     butting against it. */
  background: linear-gradient(90deg, rgb(53, 113, 125) 46%, rgba(53, 113, 125, 0.1) 79%);
}
@media (max-width: 991.98px) {
  .rs-contact-cta__scrim {
    background: linear-gradient(90deg, rgb(53, 113, 125) 20%, rgba(53, 113, 125, 0.75) 100%);
  }
}

/*
 * The watermark's clip box — Figma masks the glyph to a 558x442 rect pinned to
 * the panel's top-left (bg / cnt-3), so the icon is cropped by THIS box, not by
 * the panel. Collapsing the two puts a 575x573 glyph where a 558x442 crop
 * belongs, which is what the first fit round measured.
 */
.rs-contact-cta__bg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 558px;
  height: 442px;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  .rs-contact-cta__bg {
    display: none;
  }
}

.rs-contact-cta__watermark {
  position: absolute;
  top: 60px;
  left: -192px;
  /* max-width:none, because the glyph is deliberately WIDER than the 558px box
     that clips it. The theme's global `img { max-width: 100% }` otherwise
     shrinks it to fit and the crop stops being a crop. */
  width: 575px;
  max-width: none;
  height: auto;
  opacity: 0.15;
}

/* cta-3 — 647x238, column, gap 50, NO padding of its own. */
.rs-contact-cta__body {
  position: relative; /* above the photo, the scrim and the watermark */
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 647px;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .rs-contact-cta__body {
    width: auto;
    gap: 30px;
    padding: 32px 20px;
  }
}

/* text — 647x136, column, gap 20. */
.rs-contact-cta__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rs-contact-cta__title {
  margin: 0;
  color: var(--rs-white-pure, #fffffe);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  .rs-contact-cta__title {
    font-size: 24px;
  }
}

/*
 * #d8e2e3, written literally. --rs-teal-light-40 is #bde6ef, a visibly bluer
 * step; the frame uses the border-soft grey-teal here, and reaching for the
 * nearest-named token instead of the stated value is what put this 9 ΔE out.
 */
.rs-contact-cta__lead {
  max-width: 532px;
  margin: 0;
  color: #d8e2e3;
  font-family: "Hind Madurai", sans-serif;
  font-size: 20px;
  line-height: 1.6;
}
@media (max-width: 767.98px) {
  .rs-contact-cta__lead {
    font-size: 1rem;
  }
}

/* action — row, gap 15, centred. */
.rs-contact-cta__action {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

/*
 * The atom's `&:has(i)` rule tightens the icon side to 20px and the gap to
 * 12px. This instance is the plain 15/30 cut with a 20px gap, so both are
 * restored here rather than the button being given a different class.
 */
.rs-contact-cta__btn.btn.btn-atom {
  gap: 20px;
  /* 52, not the atom's default 48 — this instance is the taller cut. */
  min-height: 52px;
  padding: 15px 30px;
  /*
   * The label is the longest on the page and Polish is the binding case:
   * "Myślimy podobnie? Sprawdź:" measures 213px at 375px, against 214px of
   * label room once 60px of padding, the 17px brand glyph and this gap are
   * taken out — one pixel of headroom, which a font swap or a wider fallback
   * face would eat, wrapping the button to two lines.
   *
   * Halving the gap below the inline breakpoint buys 10px without touching
   * padding or type. Scoped here, and this class exists only in
   * template-contact.php, so no other button on the site shifts.
   */
}
@media (max-width: 767.98px) {
  .rs-contact-cta__btn.btn.btn-atom {
    gap: 10px;
  }
}

/*
 * The closing CTA's `bottom link` — Figma 43751:36571: "or" and the link 6px
 * apart on one centre line, both 16px/1.5, the link on the component's
 * `color=yellow` face. The link's own rules are gone; .rs-link-text--yellow
 * carries them, which is what drops the hover underline Raman flagged.
 *
 * The "or" went 20px -> 16px with it. Raman only named the underline, but the
 * frame has always said 16/1.5 here and the DS link is 16/700 — leaving the
 * "or" at 20 would have put two different sizes on one baseline.
 */
.rs-contact-cta__alt {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: #d8e2e3;
  font-family: "Hind Madurai", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/*
 * The page is drawn on Figma's 147 / 1146 / 147 grid, where 1146 is the
 * CONTENT width. Bootstrap's .container is max-width 1146 PLUS a 12px gutter
 * each side, so its content box is 1122 and every section measured 24px narrow.
 * Above 1200px the viewport already supplies the 147px margin, so the gutter is
 * dropped and the content lands at exactly 1146; below that it is still doing
 * real work and stays.
 */
@media (min-width: 1200px) {
  .rs-contact .container {
    padding-right: 0;
    padding-left: 0;
  }
}