/* =============================================================================
 * Prelect — BASE
 * =============================================================================
 * Reset, typography, accessibility, and prose.
 *
 * Loads AFTER tokens.css and BEFORE layout.css.
 *
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. RESET
 * -----------------------------------------------------------------------------
 * A small, targeted reset rather than a library. Only what is actually needed,
 * so nothing has to be un-reset later.
 * -------------------------------------------------------------------------- */

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

/* Remove default margins. Components own their spacing, which makes vertical
 * rhythm predictable instead of a fight with browser defaults. */
* {
  margin: 0;
}

html {
  /*
	 * `-webkit-text-size-adjust: 100%` prevents iOS Safari enlarging text in
	 * landscape, which breaks the layout unpredictably.
	 */
  -webkit-text-size-adjust: 100%;

  /* Smooth anchor scrolling, but only when the visitor has not asked for
	 * reduced motion. Overridden in tokens.css for reduced-motion users. */
  scroll-behavior: smooth;

  /* Offset for the sticky header when jumping to an anchor. Without this, an
	 * anchored heading lands underneath the header and looks cut off. */
  scroll-padding-top: var(--space-3xl, 6rem);

  /*
	 * Tell the browser the page supports both schemes, so form controls,
	 * scrollbars and the canvas render in the correct mode before our CSS loads.
	 */
  color-scheme: light;

  /*
	 * Clip sideways overflow at the root. Full-bleed bands and marquees must
	 * never create a page-level horizontal scrollbar (§8).
	 */
  overflow-x: clip;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Thin, quiet scrollbars — page + nested panes (drawer, dock, forms). */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-muted, #5a6b7d) 55%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-muted, #5a6b7d) 45%, transparent);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--color-accent, #c9a24a) 55%, var(--color-muted, #667384));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  /* Kill browser default blue on checkboxes, ranges, progress, etc. */
  accent-color: var(--color-primary);
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  background-color: var(--color-bg);
  color: var(--color-text);

  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  accent-color: var(--color-primary);

  /*
	 * Antialiasing. Applied to text rather than globally, because applying it to
	 * the whole document degrades the rendering of transforms and animations.
	 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /*
	 * `overflow-wrap: anywhere` on the body is the single most effective guard
	 * against horizontal overflow. Long URLs, email addresses, hashes and
	 * unbroken strings are the usual cause (section 8).
	 */
  overflow-wrap: anywhere;
  overflow-x: clip;

  /* Prevent iOS from adding its own layout shift when the keyboard opens. */
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
 * 2. MEDIA
 * -----------------------------------------------------------------------------
 * Images must never exceed their container (section 8). Not scoped — every image
 * on the site should behave this way.
 * -------------------------------------------------------------------------- */

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

img,
video {
  height: auto;
}

/* An image inside a figure should not leave a gap underneath from the baseline. */
figure img {
  vertical-align: middle;
}

/* -----------------------------------------------------------------------------
 * 3. FORMS
 * -----------------------------------------------------------------------------
 * Form controls do not inherit typography by default, which is why unstyled forms
 * look like a different website.
 * -------------------------------------------------------------------------- */

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

/* Prevent a long placeholder or value from forcing the input wider than its
 * container (section 8). */
input,
textarea,
select {
  max-width: 100%;
}

button {
  /* A button in a flex row should not be stretched. */
  background: none;
  border: none;
  cursor: pointer;
}

textarea {
  /* Only textareas should resize vertically; horizontal resize breaks layouts. */
  resize: vertical;
}

fieldset {
  border: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/* -----------------------------------------------------------------------------
 * 4. TYPOGRAPHY
 * -----------------------------------------------------------------------------
 * Every heading is fluid (section 11) and inherits the display face. Nothing
 * uses a fixed pixel size, so text scales smoothly rather than jumping between
 * breakpoints.
 * -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 500);
  line-height: var(--leading-tight);

  /*
	 * `text-wrap: balance` distributes heading words evenly across lines, which
	 * removes single-word orphan lines. Progressive: ignored by older browsers
	 * without breaking anything.
	 */
  text-wrap: balance;

  /* No margin here — section spacing is handled by the layout module. */
}

h1 {
  font-size: var(--step-5);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--step-3);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--step-2);
  font-weight: var(--weight-heading, 600);
}

h5 {
  font-size: var(--step-1);
  font-weight: var(--weight-heading, 600);
}

h6 {
  font-size: var(--step-0);
  font-weight: var(--weight-heading, 600);
}

p {
  text-wrap: pretty;
}

/* Constrain body copy to a comfortable measure. Long lines are the most common
 * readability problem on wide screens (section 34). */
p,
li {
  max-width: var(--measure);
}

/* Reset the measure inside narrow containers, where the container is already the
 * constraint. Button rows must never inherit the prose measure. */
blockquote p,
figure figcaption,
.agency-btns,
p.agency-btns {
  max-width: none;
}

strong,
b {
  font-weight: 600;
  color: var(--color-text);
}

small {
  font-size: var(--step--1);
}

/* Links in prose are underlined. Removing the underline is a common "design"
 * choice that makes links invisible to anyone not perceiving colour (section 14). */
a {
  color: var(--color-accent);
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover:not(.btn):not(.agency-btn):not(.prelect-cinematic__btn):not(.prelect-cinematic__enter) {
  color: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto; /* A code block scrolls itself rather than the page (section 42). */
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-lg);
}

blockquote {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-md);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

/* -----------------------------------------------------------------------------
 * 5. LISTS
 * -------------------------------------------------------------------------- */

ul,
ol {
  padding-inline-start: 1.25em;
}

li + li {
  margin-block-start: var(--space-3xs);
}

/* A list used purely for layout (nav, card grids) should have no markers or
 * padding. Explicit class rather than resetting all lists, because a content list
 * SHOULD look like a list. */
.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-plain li {
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * 6. TABLES
 * -----------------------------------------------------------------------------
 * Tables must not break the page on mobile (section 42). The wrapper scrolls
 * horizontally; the table itself never forces the layout wider.
 * -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  /* Enables momentum scrolling on iOS. */
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-width) solid var(--color-border);
}

th {
  font-weight: 650;
}

/* -----------------------------------------------------------------------------
 * 7. ACCESSIBILITY
 * -------------------------------------------------------------------------- */

/*
 * Screen-reader-only content.
 *
 * Uses the clip technique rather than `display: none` or `visibility: hidden`,
 * because those remove the element from the accessibility tree entirely — the
 * text then announces to nobody.
 */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Skip link.
 *
 * Hidden until focused, then revealed. This is the first thing a keyboard user
 * needs: a way past a long navigation to the content.
 */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: var(--space-sm);
  z-index: var(--z-toast);

  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;

  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-sm);
  color: var(--color-accent-contrast);
}

/*
 * Focus visibility.
 *
 * Never removed. Every focusable element gets a clearly visible ring, because a
 * keyboard user who cannot see where they are cannot use the site (section 13).
 *
 * `:focus-visible` shows the ring for keyboard navigation but not on mouse click,
 * which is the behaviour sighted mouse users expect.
 */
:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Remove the default outline only where a replacement ring is drawn above. */
:focus:not(:focus-visible) {
  outline: none;
}

/*
 * High-contrast mode.
 *
 * Forces a visible border on interactive elements, because Windows High Contrast
 * ignores background colours and a button can otherwise vanish entirely.
 */
@media (forced-colors: active) {
  button,
  a.button,
  input[type="submit"] {
    border: 1px solid ButtonText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* -----------------------------------------------------------------------------
 * 8. PROSE
 * -----------------------------------------------------------------------------
 * Long-form content styling for blog posts, case studies and service pages.
 * Applies the McKinsey-style editorial rhythm: generous spacing, a comfortable
 * measure, and clear hierarchy.
 * -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  font-family: var(--font-body, inherit);
}

.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose p {
  margin-block: 0;
  color: inherit;
}

.prose h2 {
  margin-block-start: var(--space-xl);
  margin-block-end: 0;
  color: var(--color-text);
  font-family: var(--font-display, inherit);
  font-size: var(--step-3);
  font-weight: 650;
  line-height: var(--leading-snug, 1.25);
}

.prose h3 {
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  color: var(--color-text);
  font-family: var(--font-display, inherit);
  font-size: var(--step-2);
  font-weight: 650;
  line-height: var(--leading-snug, 1.3);
}

.prose h4 {
  margin-block-start: var(--space-md);
  margin-block-end: 0;
  color: var(--color-text);
  font-family: var(--font-display, inherit);
  font-size: var(--step-1);
  font-weight: 650;
}

.prose ul,
.prose ol {
  margin-block: 0;
  padding-inline-start: 1.35em;
  color: inherit;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-block: 0;
  padding-inline-start: 0.15em;
  color: inherit;
}

.prose li + li {
  margin-block-start: var(--space-2xs, 0.35rem);
}

.prose li > ul,
.prose li > ol {
  margin-block-start: var(--space-2xs, 0.35rem);
}

.prose strong,
.prose b {
  color: var(--color-text);
  font-weight: 700;
}

.prose em,
.prose i {
  font-style: italic;
}

.prose blockquote {
  margin-inline: 0;
  color: var(--color-muted);
}

/* A lead paragraph, set larger to draw the reader in. */
.prose .lead {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.prose img {
  border-radius: 0;
}

.prose figcaption {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* A wider prose variant for feature layouts. */
.prose--wide {
  max-width: var(--measure-wide);
}

/* -----------------------------------------------------------------------------
 * 9. PRINT
 * -------------------------------------------------------------------------- */

@media print {
  /* Hide everything that has no meaning on paper. */
  .site-header,
  .site-footer,
  .prelect-mode-toggle,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  /* Reveal anything JS had not yet shown, so nothing is missing on paper. */
  [data-agency-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Do not append the URL for internal anchors — it is noise. */
  a[href^="#"]::after {
    content: "";
  }
}

/* -----------------------------------------------------------------------------
 * 12. LINKS — UNDERLINE RUNNING TEXT, NOT CHROME
 *
 * The base rule sets `text-decoration-thickness` on every `a` and lets the
 * browser's default underline supply the rest. Inside prose that is exactly
 * right; everywhere else it is what made navigation items, card titles, buttons,
 * the logo link and the footer columns all arrive underlined, which is a large
 * part of why the site read as a template rather than as a corporate site
 * (docs/16 §1 E4).
 *
 * Deleting the underline everywhere would be the wrong fix: WCAG 1.4.1 needs a
 * cue beyond colour where a link sits among words. So the underline is removed
 * only where the link *is* the control — nav, button, card, logo — and kept, and
 * made explicit, wherever a link sits inside running text.
 * -------------------------------------------------------------------------- */
a {
  text-decoration: none;
}

.prose a,
.entry-content a,
blockquote a,
.agency-block p a,
.agency-block li a,
.agency-block dd a {
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.15em;
}

/* Controls that already look like controls: a nav item, a button, a mark. */
.site-nav a,
.site-header a,
.site-footer a,
.agency-btn,
.agency-logos__link,
.agency-carousel__title a,
.agency-card__title a,
.skip-link {
  text-decoration: none;
}

/* A focused link must still be findable without an underline to lean on. */
.agency-block p a:focus-visible,
.prose a:focus-visible,
.entry-content a:focus-visible {
  text-decoration-thickness: max(2px, 0.12em);
}