/* Site layout on top of the design system (tokens.css + components.css, copied from
   Operation-Forward/opfor-design). Only what the components don't already cover. */

html { scroll-padding-top: calc(var(--lms-header-h) + var(--lms-space-4)); scroll-behavior: smooth; }

.skip { position: absolute; top: var(--lms-space-2); left: var(--lms-space-2); z-index: 200; padding: var(--lms-space-2) var(--lms-space-4); border-radius: 12px; background: var(--lms-accent); color: var(--lms-on-accent); font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Header: brand and nav share a row on wide screens, stack on phones (and stop sticking there). */
.lms-header .bar { flex-wrap: wrap; }
.lms-nav ul { flex-wrap: wrap; }
.lms-nav { margin-inline-start: auto; }
@media (max-width: 719px) {
  .lms-header { position: static; }
  .lms-header .bar { padding-block: var(--lms-space-2); }
  .lms-nav { margin-inline: calc(-1 * var(--lms-space-3)) 0; }
}

/* Hero */
.lms-page-header.hero { flex-direction: column; align-items: flex-start; gap: var(--lms-space-6); padding: var(--lms-space-12) var(--lms-space-6) var(--lms-space-10); }
.lms-page-header h1.display { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.1; max-width: 22ch; }
.lms-page-header .lead { max-width: 60ch; }
@media (min-width: 900px) {
  .lms-page-header.hero { padding: var(--lms-space-16) var(--lms-space-12) var(--lms-space-12); }
  .lms-page-header .motif { top: 50%; inset-inline-end: var(--lms-space-12); transform: translateY(-50%); gap: var(--lms-space-2); }
  .lms-page-header .motif i { width: 4.5rem; height: 6.5rem; }
}
@media (max-width: 599px) { .lms-page-header .motif { display: none; } }

.lms-btn.big { min-height: 48px; font-size: var(--lms-text-base); }

/* Sections */
.block { padding-block: var(--lms-space-16) 0; }
.block:last-child { padding-block-end: var(--lms-space-16); }
.block h2 { margin-bottom: var(--lms-space-4); }
.block h3 { font-size: var(--lms-text-lg); }
.big { font-size: var(--lms-text-md); }
.lms-card p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--lms-space-4); }
@media (min-width: 720px) { .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Goals: each one marked with the forward chevron. */
.goals { display: grid; gap: var(--lms-space-4); max-width: var(--lms-measure); margin: 0; padding: 0; list-style: none; font-size: var(--lms-text-md); }
.goals li { position: relative; padding-inline-start: var(--lms-space-8); }
.goals li::before { content: ''; position: absolute; top: 0.3em; left: 0; width: 12px; height: 18px; background: var(--lms-accent); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
.goals strong { color: var(--lms-ink); }

/* Contact: the soft clay panel; everything on it uses the container's text colour. */
.cta { display: grid; gap: var(--lms-space-4); background: var(--lms-accent-container); border-color: transparent; }
.cta h2, .cta p, .cta .lms-eyebrow, .cta a:not(.lms-btn) { color: var(--lms-on-accent-container); }
.cta .actions { display: flex; flex-wrap: wrap; gap: var(--lms-space-2); align-content: center; }
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--lms-space-10); } }

/* Two columns once there is room: text beside a highlighted card. */
.split { display: grid; gap: var(--lms-space-6); align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, var(--lms-measure)) minmax(0, 28rem); gap: var(--lms-space-12); } }
.focus { display: grid; gap: var(--lms-space-2); justify-items: start; border-color: var(--lms-secondary); }
.focus h3, .focus p { margin: 0; }
.focus .lms-btn { margin-top: var(--lms-space-2); }

.lms-footer .legal { max-width: var(--lms-measure); margin: 0; }