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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--color-secondary-soft);
  outline-offset: 2px;
}

::selection { background: var(--color-primary-soft); }

/* ---------- Screen-reader only ---------- */
.sr-only {
  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 ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  z-index: 999;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Layout utilities ---------- */
.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.section {
  padding: var(--section-padding-y) 0;
}

.flow > * + * { margin-top: var(--space-5); }
.flow-tight > * + * { margin-top: var(--space-3); }

.h1, .h2, .h3 { margin: 0 0 var(--space-3) 0; }

.h1 + *,
.h2 + *,
.h3 + * {
  margin-top: var(--space-4);
}

.kicker { margin: 0 0 var(--space-3) 0; }

/* Section heading blocks (optional wrapper class you already use) */
.section-head { max-width: var(--max-width-narrow); }
.section-head .kicker { margin-bottom: var(--space-3); }
.section-head .h1,
.section-head .h2,
.section-head .h3 { margin-bottom: var(--space-4); }
.section-head .lead,
.section-head .body { margin-top: var(--space-3); }

@media (max-width: 900px) {
  .section-head { text-align: center; }
  .section-head .kicker,
  .section-head .h1,
  .section-head .h2,
  .section-head .h3 { text-align: center; }

  
  .section-head .lead,
  .section-head .body { text-align: center; } 

  
  .body, .body-sm, .list { text-align: left; }
}

/* ---------- Grid utilities ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
}

.align-center { align-items: center; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.divider {
  height: 1px;
  background: var(--color-border);
  width: 100%;
}

/* ---------- Type utilities ---------- */
.kicker {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.h1, .h2, .h3 {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.h3 { font-size: var(--text-xl);  line-height: var(--leading-tight); }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  margin: 0;
}

.body { margin: 0; color: var(--color-text-secondary); }
.body-sm { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

.meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Lists ---------- */
.list { margin: 0; padding-left: 1.1rem; color: var(--color-text-secondary); }
.list li + li { margin-top: var(--space-2); }

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.6rem;
}

.list-check li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

/* ---------- Chips ---------- */
.chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.section-soft{
  position: relative;
  overflow: hidden;

  
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    var(--color-section-soft) 18%,
    var(--color-section-soft) 82%,
    var(--color-bg) 100%
  );

  padding-top: clamp(7.5rem, 14vh, 13rem);
  padding-bottom: clamp(8rem, 16vh, 14rem);
}

.section-soft > .container{
  position: relative;
  z-index: 1;
}

.section-soft::before,
.section-soft::after{
  content: none !important;
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 600px){
  .section-soft{
    --shore-top: 180px;
    --shore-bot: 220px;

    padding-top: clamp(6.75rem, 12vh, 10.5rem);
    padding-bottom: clamp(7.25rem, 14vh, 11rem);
  }
}

/* ---------- Desktop tuning ---------- */
@media (min-width: 901px){
  .section-soft{
    --shore-top: 200px;
    --shore-bot: 250px;

    padding-top: clamp(12rem, 16vh, 16rem);
    padding-bottom: clamp(12rem, 16vh, 16rem);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: var(--space-6); }
  .h1 { font-size: var(--text-2xl); }
  .section { padding: var(--space-9) 0; }
}

@media (max-width: 520px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }
  .actions { align-items: stretch; }
}