.sec        { padding-block: var(--sec); position: relative; background: var(--surface); }
.sec--sm    { padding-block: var(--sec-sm); }
.sec--lg    { padding-block: var(--sec-lg); }

.sec--tint  { background: var(--paper); }
.sec--dark  { background: var(--dark); color: var(--on-dark-body); }
.sec--brand { background: var(--brand-800); color: rgba(255,255,255,.78); }

.sec--rule::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: min(100% - var(--gutter) * 2, var(--wrap)); height: 1px;
  transform: translateX(-50%); background: var(--line);
}

.sec--dark { --em-color: #fff; --em-accent: var(--brand-on-dark); }
.sec--brand        { --em-color: #fff; --em-accent: #fff; }

.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark a { color: var(--brand-on-dark); }
.sec--dark b, .sec--dark strong { color: #fff; }
.sec--brand h1, .sec--brand h2, .sec--brand h3 { color: #fff; }


.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.wrap--text   { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }

.bleed {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}


.lay {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
  align-items: start;
}
.lay--full { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }

.lay__rail { position: sticky; top: var(--rail-top); }
.lay__body { min-width: 0; }

.lay__rail--static { position: static; }


.sec-head { }
.sec-head h2 {
  font-size: var(--fs-h2); font-weight: var(--w-black);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  color: var(--ink);
  word-break: keep-all; overflow-wrap: break-word;
}
.sec-lead, .sec-head h3 { word-break: keep-all; overflow-wrap: break-word; }
.sec--dark .sec-head h2 { color: #fff; }

.sec-no {
  display: block;
  font-size: var(--fs-key); font-weight: var(--w-black);
  line-height: 1; letter-spacing: -.04em;
  color: var(--brand-400); margin-bottom: var(--s-4);
}
.sec--dark .sec-no { color: rgba(199,160,184,.55); }
body:not(.has-section-no) .sec-no { display: none; }

.eyebrow {
  display: block; margin-bottom: var(--s-3);
  font-size: var(--fs-label); font-weight: var(--w-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand);
}
.sec--dark .eyebrow  { color: var(--brand-on-dark); }
.sec--brand .eyebrow { color: var(--brand-200); }

.sec-head .rule {
  width: 44px; height: 3px; margin: var(--s-5) 0 0;
  border: 0; background: var(--brand);
}
.sec--dark .sec-head .rule { background: var(--brand-on-dark); }

.sec-lead {
  margin-top: var(--s-5);
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--ink-muted);
}
.sec--dark .sec-lead  { color: var(--on-dark-body); }
.sec--brand .sec-lead { color: rgba(255,255,255,.72); }

.sec-head--center { text-align: center; max-width: var(--wrap-narrow); margin-inline: auto; }
.sec-head--center .rule { margin-inline: auto; }
.sec-head--center .sec-lead { margin-inline: auto; max-width: 58ch; }
.sec-head--center + * { margin-top: var(--s-9); }

.sec-head--split {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-5);
}
.sec-head__more {
  flex: none;
  font-size: var(--fs-label); font-weight: var(--w-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-deep); white-space: nowrap;
}


.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--air { gap: var(--s-6); }


@media (max-width: 1100px) {
  .lay { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .lay__rail { position: static; }
  .sec-head .rule { margin-top: var(--s-4); }
}
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}


.ico    { display: block; stroke: var(--brand); fill: none;
          stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.2; }
.ico-md { width: var(--icon-md); height: var(--icon-md); }
.ico-sm { width: var(--icon-sm); height: var(--icon-sm); }
.sec--dark .ico { stroke: var(--brand-on-dark); }

.ico-badge {
  width: calc(var(--icon-lg) + 24px); height: calc(var(--icon-lg) + 24px);
  border-radius: var(--r-lg); background: var(--brand-soft);
  display: grid; place-items: center;
}
.sec--dark .ico-badge { background: rgba(199,160,184,.12); }


@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-anim] {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--anim-delay, 0ms);
    will-change: opacity, transform;
  }
  .js-anim [data-anim="up"]    { transform: translateY(26px); }
  .js-anim [data-anim="right"] { transform: translateX(-36px); }
  .js-anim [data-anim="left"]  { transform: translateX(36px); }
  .js-anim [data-anim="scale"] { transform: scale(1.03); }
  .js-anim [data-anim].is-in   { opacity: 1; transform: none; }
}
.stagger > * { --anim-delay: calc(var(--i, 0) * 70ms); }


.hr { height: 1px; border: 0; margin: 0; background: var(--line); }
.sec--dark .hr { background: var(--on-dark-line); }