/* ==========================================================================
   Ulicny — reset, typography, shared utilities
   Utility class names match docs/03-design-tokens.md so markup lifts into the
   theme (and into James Crafted) unchanged.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-body);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

/* Focus — visible on every interactive element, never removed. */
:focus-visible {
  outline: 3px solid var(--c-lime);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-lime);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.u-skip-link:focus { top: var(--sp-4); }

/* --- Layout ------------------------------------------------------------- */

.u-band {
  padding-block: var(--section-y);
  background: var(--c-surface);
}
.u-band--navy     { background: var(--c-navy);     color: var(--c-white); }
.u-band--alt      { background: var(--c-surface-alt); }
.u-band--charcoal { background: var(--c-charcoal); color: var(--c-white); }
.u-band--flush    { padding-block: 0; }

.u-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;                     /* let it shrink inside flex parents */
}

.u-measure { max-width: var(--measure); }

.u-stack > * + * { margin-top: var(--sp-4); }
.u-stack--lg > * + * { margin-top: var(--sp-8); }

.u-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) {
  .u-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .u-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .u-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* --- Type ---------------------------------------------------------------- */

/* The recurring small-caps label above every display heading. */
.u-eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--wt-eyebrow);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin: 0;
}

.u-display {
  overflow-wrap: break-word;
  font-size: var(--fs-2xl);
  /* 600, not 800. Measured against the comp: stem/capHeight there is 0.1538,
     which Manrope 600 matches exactly. 800 measures 0.2000 and reads as a
     different, much heavier typeface. */
  font-weight: var(--wt-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.u-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--c-blue);
}

.u-rule {
  border: 0;
  height: 1px;
  background: var(--c-rule);
  margin: 0;
}

/* --- The CTA pill -------------------------------------------------------- */

.u-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* .xd draws the pill 172x76 at 1920 */
  min-width: clamp(120px, 8.958vw, 172px);
  min-height: clamp(44px, 3.958vw, 76px);
  padding: var(--sp-2) clamp(1.5rem, 3vw, 2.75rem);
  border: 0;
  border-radius: 999px;
  background: var(--c-lime);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: clamp(0.875rem, 1.25vw, 1.5rem);   /* .xd: 24px */
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
/* Hover is a colour change and nothing else - no lift, no nudge. */
.u-pill:hover { background: var(--c-lime-hover); }

/* --- Motion hooks -------------------------------------------------------- */
/* NOTHING is hidden here, deliberately. GSAP sets every start state at
   runtime via gsap.from(), so if the libraries fail, JS is off, or reduced
   motion is requested, the page renders fully visible. There is no state in
   which content can be stranded at opacity 0.

   These attributes are markup contracts only — see assets/js/motion.js:
     data-reveal            element rises into place, once
     data-reveal-group      children stagger
     data-parallax="0.88"   layer trails the scroll
*/

/* SplitText line wrappers. Descenders need the small pad or the mask clips
   the tails of g/y/p. */
.split-line { padding-bottom: 0.08em; }

/* Lenis owns the scroll position; native smooth scrolling fights it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Nothing to cancel on .u-pill: its hover is a colour change, which is not
     motion and stays on. */
}

/* Accessible name for icon-only controls (the chevron CTA pills). */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}