/* =============================================================================
   Direct Skills UAE — components shared by every page
   Buttons, links, section headings, seals, arch photographs, tick lists,
   underlined fields and form messages.
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 26px; border-radius: 3px; border: 1px solid transparent;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background-color .25s var(--ds-ease), color .25s var(--ds-ease), border-color .25s var(--ds-ease), box-shadow .25s var(--ds-ease);
}
.ds-btn__arrow { display: inline-block; transition: transform .3s var(--ds-ease); }
.ds-btn:hover .ds-btn__arrow { transform: translateX(4px); }
.ds-btn--ink { background: var(--ds-ink); color: var(--ds-parchment); box-shadow: inset 0 -2px 0 var(--ds-gold); }
.ds-btn--ink:hover { background: var(--ds-ink-deep); color: var(--ds-parchment); }
.ds-btn--frame { border-color: var(--ds-ink); color: var(--ds-ink); background: transparent; }
.ds-btn--frame:hover { background: var(--ds-ink); color: var(--ds-parchment); }
.ds-btn--gold { background: var(--ds-gold); color: var(--ds-ink-deep); }
.ds-btn--gold:hover { background: var(--ds-gold-soft); }
.ds-btn--frame-light { border-color: rgb(var(--ds-gold-soft-rgb) / .7); color: var(--ds-parchment); background: transparent; }
.ds-btn--frame-light:hover { background: rgb(var(--ds-gold-soft-rgb) / .12); border-color: var(--ds-gold-soft); }

.ds-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ds-ink); box-shadow: inset 0 -1px 0 var(--ds-gold); padding-bottom: 2px; transition: color .25s var(--ds-ease); }
.ds-link:hover { color: var(--ds-gold-deep); }
.ds-link:hover .ds-btn__arrow { transform: translateX(4px); }

/* ------------------------------------------------------- section heading */
.ds-section { padding: 110px 0; position: relative; }
.ds-section--parchment { background: var(--ds-parchment); }
.ds-section--parchment-2 { background: var(--ds-parchment-2); }
.ds-section--ink { background: var(--ds-ink-deep); color: var(--ds-parchment); }
.ds-section--ink h2, .ds-section--ink h3 { color: var(--ds-parchment); }
.ds-section--ink .ds-lede { color: rgb(var(--ds-parchment-rgb) / .75); }
.ds-section--divided { border-top: 1px solid var(--ds-line); }

.ds-head { display: grid; gap: 18px; margin-bottom: 56px; }
.ds-head--flush { margin-bottom: 0; }
.ds-head__mark { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ds-head__no { font-family: var(--ds-font-caps); font-size: .82rem; letter-spacing: .22em; color: var(--ds-gold-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-head__rule { flex: 1; min-width: 40px; height: 1px; background: linear-gradient(90deg, var(--ds-gold) 0, var(--ds-gold) 56px, var(--ds-line) 56px); }
.ds-head__row { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ds-head__row > div { min-width: 0; }
.ds-head__row .ds-lede { margin-top: 14px; }
.ds-head > .ds-lede { margin-top: -4px; }

/* ---------------------------------------------------------------- seals */
.ds-seal {
  --size: 64px;
  width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--ds-paper), var(--ds-parchment-2));
  color: var(--ds-ink); font-family: var(--ds-font-caps); font-weight: 600; letter-spacing: .04em; line-height: 1;
  box-shadow: 0 0 0 1px var(--ds-gold), 0 0 0 5px var(--ds-paper), 0 0 0 6px rgb(var(--ds-gold-rgb) / .55), var(--ds-shadow-soft);
}
.ds-seal--ink { background: radial-gradient(circle at 35% 30%, var(--ds-ink-2), var(--ds-ink-deep)); color: var(--ds-gold-soft); box-shadow: 0 0 0 1px var(--ds-gold), 0 0 0 5px var(--ds-ink-deep), 0 0 0 6px rgb(var(--ds-gold-rgb) / .5); }

/* ------------------------------------------------------ arch photograph */
.ds-arch-img { overflow: hidden; border-radius: var(--ds-arch); position: relative; background: var(--ds-parchment-2); }
.ds-arch-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* ------------------------------------------------------------ tick list */
.ds-ticks { list-style: none; padding: 0; margin: 26px 0 34px; display: grid; gap: 12px; }
.ds-ticks li { display: flex; gap: 14px; align-items: baseline; }
.ds-ticks li::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg) translateY(-2px); background: var(--ds-gold); }

/* ------------------------------------------------------ fields and forms */
.ds-underline { border: 0; border-bottom: 1px solid var(--ds-ink); border-radius: 0; background: transparent; padding: 10px 0; width: 100%; min-width: 0; }
.ds-underline::placeholder { color: var(--ds-muted); opacity: 1; }
.ds-underline:focus { outline: none; border-bottom-color: var(--ds-gold); box-shadow: inset 0 -1px 0 var(--ds-gold); }
.ds-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ds-note { font-size: .92rem; padding: 10px 14px; border-left: 2px solid var(--ds-gold); background: var(--ds-paper); color: var(--ds-ink); }
.ds-note--error { border-left-color: var(--ds-error); color: var(--ds-error); }