:root {
   --ground:#e9edf1;
   --surface:#dadee3;
   --surface-2:#c7ccd2;
   --line:#a5aaae;
   --ink-soft:#4a4d51;
   --ink:#27292b;
   --accent:#2f7f8a;
   --accent-ink:#ffffff;

   --lado-76b:'Space Grotesk', "Space Grotesk Fallback", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --lado-73f:'Bitter', "Bitter Fallback", Georgia, serif;
   --lado-969:'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

   --step--1:clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
   --lado-639:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --lado-013:clamp(1.2rem, 1.12rem + 0.4vw, 1.35rem);
   --lado-66d:clamp(1.44rem, 1.3rem + 0.7vw, 1.75rem);
   --lado-785:clamp(1.728rem, 1.5rem + 1.14vw, 2.25rem);
   --lado-c73:clamp(2.074rem, 1.74rem + 1.67vw, 2.85rem);
   --lado-06a:clamp(2.488rem, 1.98rem + 2.54vw, 3.8rem);
   --step-display:clamp(2.8rem, 2.2rem + 3.8vw, 5.2rem);

   --space-3xs:0.25rem;
   --space-2xs:0.5rem;
   --space-xs:0.75rem;
   --space-s:1rem;
   --space-m:1.5rem;
   --space-l:2rem;
   --space-xl:3rem;
   --space-2xl:4.5rem;
   --space-3xl:6rem;
   --space-section:clamp(4rem, 3rem + 4vw, 7.5rem);

   --sidebar-w:280px;
   --header-condensed-h:60px;
   --content-max:1280px;
   --measure:65ch;
   --measure-narrow:46ch;

   --radius-xs:1px;
   --radius-s:2px;
   --radius-m:3px;

   --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
   --dur-fast:140ms;
   --dur-med:240ms;
   --dur-slow:420ms;
}

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

html {
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--lado-73f);
   font-size:100%;
   line-height:1.55;
   -webkit-text-size-adjust:100%;
   tab-size:4;
   scroll-behavior:smooth;
   scroll-padding-block-start:var(--header-condensed-h);
}

body {
   min-height:100vh;
   background-color:var(--ground);
   color:var(--ink);
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   overflow-x:hidden;
}

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

img {
   font-style:italic;
   background-repeat:no-repeat;
   background-size:cover;
   shape-margin:1rem;
}

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

button {
   cursor:pointer;
   background:none;
   border:none;
}

a {
   color:inherit;
   text-decoration-skip-ink:auto;
}

table {
   border-collapse:collapse;
   border-spacing:0;
   width:100%;
}

ul,
ol { list-style:none; }

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family:var(--lado-76b);
   font-weight:700;
   line-height:1.1;
   color:var(--ink);
   letter-spacing:-0.02em;
   overflow-wrap:break-word;
}

h1 {
   font-size:var(--lado-06a);
   line-height:1.05;
   max-width:16ch;
}

h2 {
   font-size:var(--lado-c73);
   line-height:1.12;
   letter-spacing:-0.025em;
}

h3 {
   font-size:var(--lado-66d);
   line-height:1.2;
   letter-spacing:-0.015em;
}

h4 {
   font-size:var(--lado-013);
   line-height:1.3;
}

p {
   font-size:var(--lado-639);
   line-height:1.62;
   max-width:var(--measure);
   color:var(--ink);
}

p + p { margin-top:var(--space-s); }

small {
   font-size:var(--step--1);
   line-height:1.45;
   color:var(--ink-soft);
}

strong,
b {
   font-weight:600;
   color:var(--ink);
}

em,
i { font-style:italic; }

hr {
   border:none;
   border-top:1px solid var(--line);
   margin:var(--space-l) 0;
}

blockquote {

   border-left:2px solid var(--accent);
   padding-left:var(--space-m);
   margin:var(--space-l) 0;
   font-size:var(--lado-013);
   font-style:italic;
   color:var(--ink);
   max-width:var(--measure);
}

code,
pre,
kbd,
samp {
   font-family:var(--lado-969);
   font-size:0.9em;
   font-feature-settings:'tnum' 1;
}

.numeral,
.figure-unit,
.spec-value,
.price-display {
   font-family:var(--lado-969);
   font-variant-numeric:tabular-nums;
   letter-spacing:-0.01em;
}

.skip-link {
   position:absolute;
   top:-100px;
   left:var(--space-s);
   background:var(--ink);
   color:var(--ground);
   padding:var(--space-xs) var(--space-m);
   z-index:9999;
   font-family:var(--lado-969);

   font-size:var(--step--1);
   font-weight:500;
   border:1px solid var(--accent);
   border-radius:var(--radius-s);
   text-decoration:none;
   transition:top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top:var(--space-s); }

.icon {
   display:inline-block;
   width:1.15em;

   height:1.15em;
   stroke-width:0;
   stroke:currentColor;
   fill:currentColor;
   vertical-align:-0.15em;
   flex-shrink:0;
}

.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;
}

.page-layout {
   display:flex;
   min-height:100vh;
   min-height:100dvh;
   width:100%;
}

.page-main-column {
   flex:1 1 auto;
   min-width:0;
   display:flex;
   flex-direction:column;
}

.container {
   width:100%;
   max-width:var(--content-max);
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1rem, 0.8rem + 1.2vw, 2.5rem);
   padding-right:clamp(1rem, 0.8rem + 1.2vw, 2.5rem);
}

.section {
   padding-top:var(--space-section);
   padding-bottom:var(--space-section);
   border-bottom:1px solid var(--line);
   position:relative;
}

.section-full {
   min-height:calc(100vh - var(--header-condensed-h));
   min-height:calc(100dvh - var(--header-condensed-h));
   display:flex;
   flex-direction:column;
   justify-content:center;
   padding-top:var(--space-xl);
   padding-bottom:var(--space-xl);
   border-bottom:1px solid var(--line);
}

.lockup-headline {
   position:relative;
   display:inline-block;
   margin-bottom:var(--space-l);
}

.lockup-headline .lockup-primary {
   display:block;
   font-family:var(--lado-76b);
   font-size:var(--lado-06a);
   line-height:0.95;
   letter-spacing:-0.03em;
   text-transform:uppercase;
}

.lockup-headline .lockup-offset {
   display:block;
   font-family:var(--lado-76b);
   font-size:var(--lado-c73);
   line-height:1.05;
   padding-left:clamp(1.5rem, 1rem + 3vw, 4rem);
   color:var(--ink-soft);
   position:relative;
}

.lockup-headline .lockup-rule {
   position:absolute;
   left:0;
   top:50%;
   width:clamp(1.2rem, 0.8rem + 2vw, 3rem);
   height:2px;
   background-color:var(--accent);
}

.number-opener { margin-bottom:var(--space-l); }

.number-opener .quantity-lead {
   font-family:var(--lado-969);
   font-size:clamp(2.8rem, 2.2rem + 3.2vw, 5.2rem);
   font-weight:700;
   line-height:1;
   color:var(--ink);
   letter-spacing:-0.03em;
   display:flex;
   align-items:baseline;
   gap:var(--space-2xs);
}

.number-opener .quantity-unit {
   font-family:var(--lado-76b);
   font-size:var(--lado-013);
   font-weight:600;
   color:var(--accent);
   text-transform:uppercase;
   letter-spacing:0.05em;
}

.number-opener .quantity-sentence {
   margin-top:var(--space-xs);
   font-family:var(--lado-73f);
   font-size:var(--lado-013);
   line-height:1.45;
   color:var(--ink);
   max-width:var(--measure-narrow);
}

.lead-paragraph {
   font-size:var(--lado-013);
   line-height:1.5;
   color:var(--ink);
   max-width:var(--measure);
}

.caption-line {
   display:block;
   font-family:var(--lado-969);
   font-size:var(--step--1);
   color:var(--ink-soft);
   margin-top:var(--space-xs);
   letter-spacing:0.02em;
}

@media (max-width: 1024px) {
   :root { --sidebar-w:0px; }
   .page-layout { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
}