*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); font-variation-settings: var(--fv-auto); }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font-text); font-size: var(--p);
  line-height: 1.6; font-weight: 400; font-feature-settings: "kern", "liga"; overflow-x: clip; }
body :where(*) { letter-spacing: inherit; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; font-variation-settings: var(--fv-auto); }
h1, h2, .h1, .h2 { font-variation-settings: var(--fv-display); }
h1, .h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -.02em; margin-bottom: .3em; }
h2, .h2 { font-size: var(--h2); line-height: 1.04; letter-spacing: -.02em; margin-bottom: .3em; }
h3, .h3 { font-size: var(--h3); line-height: 1.1; letter-spacing: -.01em; margin-bottom: .3em; }
h4, .h4 { font-size: var(--h4); line-height: 1.1; letter-spacing: -.01em; margin-bottom: .2em; font-weight: 500; }
h5, .h5 { font-size: var(--h5); line-height: 1.25; margin-bottom: .5em; }
h6, .h6 { font-size: var(--h6); line-height: 1.2; margin-bottom: .6em; }
p { margin: 0 0 1em; }

.eyebrow { font-size: var(--eyebrow); line-height: 1.45; font-weight: 500; color: var(--head); margin: 0 0 1em; letter-spacing: 0; }
.lead { max-width: 50ch; }
.sec { position: relative; padding: var(--section-y) 0; background: var(--ground); isolation: isolate; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between;
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.bg-grid i { width: 1px; height: 100%; background: var(--grid-light); }
.ulink { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; padding-bottom: 6px; font-size: var(--eyebrow);
  font-weight: 500; line-height: 1.45; color: var(--head); cursor: pointer; }
.ulink__t { display: inline-flex; gap: .45em; align-items: center; }
.ulink__t svg { width: .9em; height: .9em; flex: none; }
.ulink::before, .ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ul); }
h3, .h3 { font-size: var(--h3); line-height: 1.1; letter-spacing: -.01em; margin-bottom: .3em; }
.cmp { align-items: center; row-gap: 1.5rem; }
.cmp__text { grid-column: 1 / span 4; }
.cmp__text p { margin: 0 0 .8em; color: var(--text); }
.cmp__fig { grid-column: 5 / -1; position: relative; margin: 0; aspect-ratio: 15 / 8; --pos: 50%; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #f6f4ee; box-shadow: 0 0 0 1px rgba(18, 24, 38, .35); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--ink); border: 2px solid #f6f4ee; pointer-events: none; }
.cmp__knob::before, .cmp__knob::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.cmp__knob::before { left: 5px; border-right-color: #f6f4ee; }
.cmp__knob::after { right: 5px; border-left-color: #f6f4ee; }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; font: inherit;
  -webkit-appearance: none; appearance: none; background: transparent; }
.cmp__range::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; border: 0; }
.cmp__range::-moz-range-track { background: transparent; height: 100%; }
.cmp__range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; }

.cmp__range:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.cmp__range:focus-visible ~ .cmp__knob { outline: 3px solid #f6f4ee; outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.cmp__tag { position: absolute; bottom: 12px; padding: 4px 10px; background: rgba(18, 24, 38, .86); color: #f6f4ee; font-size: var(--p-sm); pointer-events: none; }
.cmp__tag--b { left: 12px; }
.cmp__tag--a { right: 12px; }
@media (max-width: 767px) { .cmp__text, .cmp__fig { grid-column: 1 / -1; } .cmp__fig { aspect-ratio: 13 / 22; } }
.ulink::before { transform-origin: right; transition: transform .5s var(--ease); }
.ulink::after { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.ulink:hover::before { transform: scaleX(0); }
.ulink:hover::after { transform: scaleX(1); }

.bar { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.bar__mark { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--ink); letter-spacing: -.01em; min-height: 44px; display: inline-flex; align-items: center; }
.bar__link { font-size: var(--eyebrow); font-weight: 500; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.foot { background: var(--dark); color: var(--on-dark); }
.foot .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; font-size: var(--eyebrow); font-weight: 500; gap: var(--gap); }
.foot a { color: var(--on-dark); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.foot :focus-visible { outline-color: var(--accent); }

.ph-sec { padding-top: var(--section-y); border-bottom: 1px solid var(--rule); }
.ph h1 { max-width: 20ch; }
.ph__lead { max-width: 60ch; color: var(--text); }
.ph .eyebrow { color: var(--muted-ink); margin-bottom: 1.2em; }
.cmp-sec + .cmp-sec { border-top: 1px solid var(--rule); }
.cmp-sec { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
@media (prefers-reduced-motion: reduce) { .ulink::before, .ulink::after { transition: none; } }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 1000; background: var(--dark); color: var(--on-dark); padding: .7em 1em; font-weight: 500; font-size: var(--eyebrow); }
.skip:focus { top: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }