/* Base: colours, fonts and pieces shared by more than one section */

:root {
  --navyDark: #03102d;
  --navy: #061a44;
  --blue: #087bff;
  --blueBright: #1e90ff;
  --cyan: #38bdff;
  --textDark: #0d1b3a;
  --textBody: #33415c;
  --textMuted: #5b6b85;
  --white: #ffffff;
  --radius: 14px;
  --headerHeight: 72px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--headerHeight);
}

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--textBody);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--textDark);
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
}

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* Section headings (My Services, Why Work With Me) */
.sectionTitle {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.75rem;
}

.sectionTitle::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 0.6rem auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #0a5fd8, var(--blueBright));
}

.sectionSubtitle {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--textBody);
}

/* Single-colour inline icons that follow the text colour */
.inlineIcon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.logoMark {
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: -1px;
  margin-right: 0.35rem;
}