.oss-ct-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 72px;
  align-items: start;
}
.oss-ct-div {
  height: 1px;
  background: #e5e5e5;
  margin: 44px 0;
}
.oss-ct-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.oss-ct-quick li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.oss-ct-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9f8ff;
  color: var(--oss-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.oss-ct-ico svg {
  width: 19px;
  height: 19px;
}
.oss-ct-quick__text {
  font-size: 18px;
  color: #0a0a0f;
}
.oss-ct-quick__text a {
  color: #0a0a0f;
  text-decoration: none;
  transition: color 0.2s ease;
}
.oss-ct-quick__text a:hover {
  color: var(--oss-cyan);
}
.oss-ct-label {
  margin: 0 0 26px;
  font-family: var(--oss-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #0a0a0f;
}
.oss-ct-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oss-ct-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
}
.oss-ct-step__num {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--oss-cyan);
  padding-top: 2px;
}
.oss-ct-step__text {
  font-size: 17px;
  line-height: 1.6;
  color: #4a4a55;
}
.oss-ct-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 44px;
}
.oss-ct-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.oss-ct-form .elementor-form-fields-wrapper {
  align-items: flex-start;
}
.oss-ct-form .elementor-form-fields-wrapper span.elementor-message {
  display: block;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.oss-ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.oss-ct-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.oss-ct-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b8b95;
}
.oss-ct-field input,
.oss-ct-field textarea,
.oss-ct-field select {
  font-family: var(--oss-body);
  font-size: 16px;
  color: #0a0a0f;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 15px 18px;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}
.oss-ct-field textarea {
  resize: vertical;
  line-height: 1.6;
}
.oss-ct-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B8B95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 15px;
  padding-right: 46px;
}
.oss-ct-field input:focus,
.oss-ct-field textarea:focus,
.oss-ct-field select:focus {
  border-color: var(--oss-cyan);
}
.oss-ct-drop {
  border: 1px dashed #d4d4d8;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.oss-ct-drop:hover,
.oss-ct-drop:focus-visible {
  border-color: var(--oss-cyan);
  outline: none;
}
.oss-ct-drop.oss-is-over {
  border-color: var(--oss-cyan);
  background: #e9f8ff;
}
.oss-ct-drop__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9f8ff;
  color: var(--oss-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oss-ct-drop__ico svg {
  width: 20px;
  height: 20px;
}
.oss-ct-drop__main {
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0f;
  margin: 14px 0 0;
}
.oss-ct-drop__sub {
  font-size: 14px;
  color: #8b8b95;
  margin: 6px 0 0;
}
.oss-ct-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.oss-ct-files:empty {
  display: none;
}
.oss-ct-file {
  display: grid;
  grid-template-columns: 20px 1fr auto 28px;
  align-items: center;
  gap: 12px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 12px 14px;
}
.oss-ct-file__ico {
  color: #8b8b95;
  display: inline-flex;
}
.oss-ct-file__ico svg {
  width: 17px;
  height: 17px;
}
.oss-ct-file__name {
  font-size: 15px;
  color: #0a0a0f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oss-ct-file__size {
  font-size: 14px;
  color: #8b8b95;
}
.oss-ct-file__rm {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #8b8b95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.oss-ct-file__rm svg {
  width: 15px;
  height: 15px;
}
.oss-ct-file__rm:hover {
  color: #d93025;
}
.oss-ct-error {
  font-size: 14px;
  line-height: 1.5;
  color: #d93025;
  margin: 0;
}
.oss-ct-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.oss-ct-fine {
  font-size: 14px;
  line-height: 1.6;
  color: #8b8b95;
  margin: 0;
}
.oss-ct-success {
  text-align: center;
  padding: 40px 0;
}
.oss-ct-success__ico {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #e9f8ff;
  color: var(--oss-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oss-ct-success__ico svg {
  width: 30px;
  height: 30px;
}
.oss-ct-success__title {
  font-family: var(--oss-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #0a0a0f;
  margin: 24px 0 0;
}
.oss-ct-success__note {
  font-size: 17px;
  line-height: 1.6;
  color: #8b8b95;
  margin: 10px 0 0;
}
.oss-ct-book {
  text-align: center;
}
.oss-ct-book .oss-svc-h2 {
  max-width: none;
}
.oss-ct-booknote {
  max-width: none;
  margin: 20px auto 0;
}
.oss-ct-embed {
  margin-top: 48px;
  min-height: 520px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #9a9aa5;
  font-family: var(--oss-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.oss-ct-offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
}
.oss-ct-office {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 36px;
}
@media (max-width: 1180px) {
  .oss-ct-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .oss-ct-offices {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .oss-ct-card {
    padding: 28px;
  }
  .oss-ct-row {
    grid-template-columns: 1fr;
  }
}

/* ── Elementor Forms inside the contact card ──────────────────────────────
   Colours, radii and row gap are set on the form widget itself (build-forms.py) because
   Elementor compiles those into post-<id>.css at a specificity no stylesheet beats. What
   is left here is the design's label treatment and the field metrics Elementor has no
   control for. Selectors are doubled where they have to outrank Elementor's own resets. */
.oss-ct-form--elementor .elementor-field-group > label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b8b95;
  margin-bottom: 9px;
}
.oss-ct-form--elementor.oss-ct-form--elementor .elementor-field-textual {
  font-family: var(--oss-body);
  font-size: 16px;
  line-height: normal;
  padding: 15px 18px;
  min-height: 0;
  transition: border-color 0.2s ease;
}
/* Only the textarea carries a line-height in the design; applying 1.6 to every textual field
   made each single-line control 5px taller than designed. */
.oss-ct-form--elementor.oss-ct-form--elementor
  textarea.elementor-field-textual {
  line-height: 1.6;
}
/* Elementor compiles the form's field border colour to (0,4,0), which outranked this rule at
   (0,3,1) — so the border never turned cyan on focus while `outline: none` still removed the
   browser's own ring. The fields had NO visible focus state at all: tab through the form and
   nothing moves. Measured, not guessed: the winning rule is post-139.css at (0,6,0) — it counts a class
   inside its own :not() — and it loads after this file, so a tie lost. Seven classes here wins
   outright and lands the design's cyan border, and the outline fallback is kept for forced-colours/high-contrast mode. */
.oss-ct-card.oss-ct-card.oss-ct-card
  .oss-ct-form--elementor.oss-ct-form--elementor
  .elementor-field-textual:focus {
  border-color: var(--oss-cyan);
  box-shadow: 0 0 0 3px var(--oss-cyan-dim);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.oss-ct-form--elementor textarea.elementor-field-textual {
  resize: vertical;
}
.oss-ct-form--elementor.oss-ct-form--elementor select.elementor-field-textual {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B8B95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 15px;
  padding-right: 46px;
}
/* The design's submit is `.btn.btn--primary.ct-submit`: a full-width pill, uppercase 14px, with
   a 44px white circular arrow badge after the label. Elementor renders a plain button, so the
   metrics come from .oss-btn here and the badge is drawn as ::after on its content wrapper. */
.oss-ct-form--elementor.oss-ct-form--elementor .elementor-button {
  font-family: var(--oss-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 60px;
  padding: 8px 8px 8px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.oss-ct-form--elementor.oss-ct-form--elementor
  .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.oss-ct-form--elementor.oss-ct-form--elementor
  .elementor-button-content-wrapper::after {
  content: "";
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0A0F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: transform 0.18s ease;
}
.oss-ct-form--elementor.oss-ct-form--elementor .elementor-button:hover {
  transform: translateY(-1px);
}
.oss-ct-form--elementor.oss-ct-form--elementor
  .elementor-button:hover
  .elementor-button-content-wrapper::after {
  transform: translateX(3px);
}
.oss-ct-form--elementor .elementor-message {
  font-size: 14px;
  line-height: 1.6;
}
.oss-ct-form--elementor .elementor-message.elementor-message-success {
  margin-bottom: 0;
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(0 204 255);
  max-width: none;
  white-space: nowrap;
  font-weight: 600;
  text-align: center;
}

/* Elementor renders each field group as a flex row (label on one line, control on the next).
   The drop panel is injected into that flex container by oss-contact.js, so without a basis it
   shrink-wraps to its text — measured at 229px against the design's full-width panel. */
.oss-ct-card .elementor-field-group .oss-ct-drop,
.oss-ct-card .elementor-field-group .oss-ct-error {
  flex: 0 0 100%;
  width: 100%;
}

/* The fine print renders after the Elementor form rather than inside it, so it misses the
   form's 22px row gap and sat flush against the submit button. The design's own copy is one
   more row of the form grid, 22px below. */
.oss-ct-card .oss-ct-form--elementor + .oss-ct-fine {
  margin-top: 22px;
}

/* Elementor injects its own caret into `.select-caret-down-wrapper` alongside the select, so
   the field showed two chevrons: ours (the design's, drawn as a background image) and theirs.
   `appearance: none` does not remove it — it is a real element, not the native control. */
.oss-ct-form--elementor .elementor-select-wrapper .select-caret-down-wrapper {
  display: none;
}