/* =============================================================================
   Direct Skills UAE — base: reset, type, container, motion
   Rule for every ds-* file: no :hover / .is-active rule changes padding,
   margin, gap, width, font-size or font-weight — state is colour, background,
   box-shadow or transform (tests/Feature/StylesheetRulesTest.php).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ds-text);
  background: var(--ds-paper);
  overflow-x: hidden;
}
body.ds-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }

.ds-container { width: 100%; max-width: var(--ds-container); margin: 0 auto; padding: 0 28px; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ds-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ds-ink); color: var(--ds-parchment); padding: 10px 18px; border-radius: 3px; font-weight: 600; transition: transform .2s var(--ds-ease); }
.ds-skip:focus { transform: translateY(76px); }

h1, h2, h3, h4 { font-family: var(--ds-font-head); font-weight: 300; color: var(--ds-ink); margin: 0; letter-spacing: -.01em; line-height: 1.12; }
h1 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); text-wrap: balance; }
h3 { font-size: 1.45rem; font-weight: 400; line-height: 1.25; }
p { margin: 0; }
.ds-lede { color: var(--ds-muted); font-size: 1.08rem; max-width: 58ch; text-wrap: pretty; }

/* The gold stroke drawn under one word (or a short phrase) of a headline.
   Drawn as a background with box-decoration-break so a phrase that has to
   wrap on a phone keeps its stroke under each line instead of overflowing. */
.ds-stroke {
  font-weight: 400;
  padding-bottom: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 50 4, 120 3, 198 9' fill='none' stroke='%23c9a55c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ds-stroke--word { white-space: nowrap; }

/* Inner pages still carry markup from the previous design until they are
   rebuilt. Their inline icons have no size of their own; without this they
   would stretch to the width of the page. */
.ds-main svg:not([class*="ds-"]):not([width]) { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.2em; }

/* ---------------------------------------------------------------- reveal */
.ds-js .ds-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ds-ease), transform .8s var(--ds-ease); }
.ds-js .ds-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ds-js .ds-reveal { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .ds-container { padding: 0 20px; }
}