/* ============================================================================
   McBride Digital — Phase II reset and base
   Owned by Task 0. Loaded after tokens.css and before any page stylesheet.
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Vertical overflow must stay scrollable — clipping it here would break the
     sticky logo strip on the portfolio page. */
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Headings inherit the family; each page sets its own sizes from the scale. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* --- Focus -----------------------------------------------------------------
   Keyboard focus is always visible. :focus-visible keeps it off mouse clicks
   without ever hiding it from keyboard users. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

/* --- Shared utilities ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--electric-blue);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Jumps a keyboard user past the nav. Visible only when focused. */
.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  background: var(--electric-blue);
  color: var(--dark-blue);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- Page header -----------------------------------------------------------
   The title block every page except the homepage opens on. Shared because four
   pages owned by three different tasks need it, and four separate versions is
   exactly the drift the QA pass is meant to catch. */
.page-header {
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-6);
}

.page-header__title {
  margin-top: var(--space-2);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.page-header__lead {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--ink-muted);
}

/* --- Closing CTA -----------------------------------------------------------
   "Let's Talk." — the block that closes the homepage and the services page.
   Shared for the same reason as the page header. */
.cta {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
  text-align: center;
}

.cta__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.cta__btn { margin-top: var(--space-4); }

/* --- Buttons ---------------------------------------------------------------
   Two fills, used site-wide: electric blue on dark, white on dark. Both carry
   hover and focus states; neither relies on colour alone. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.875rem var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn--primary {
  background: var(--electric-blue);
  color: var(--white);
}
.btn--primary:hover { background: var(--electric-blue-hover); transform: translateY(-2px); }

.btn--light {
  background: var(--white);
  color: var(--dark-blue);
}
.btn--light:hover { background: rgba(255, 255, 255, 0.86); transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

/* --- Scroll reveal ---------------------------------------------------------
   Opt in with data-reveal; js/reveal.js adds .is-revealed when the element
   enters the viewport. The start state is only applied when JS is present
   (html.js), so with JS off the content is simply visible rather than stuck
   at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion --------------------------------------------------------
   The duration tokens are already collapsed to 1ms in tokens.css; this removes
   transform-based movement outright and stops anything that loops. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover { transform: none; }
}