:root {
  --ground:#ede6e4;
  --surface:#dfd7d5;
  --surface-2:#cec5c2;
  --line:#aba2a0;
  --ink-soft:#514c4a;
  --ink:#2b2827;
  --accent:#a9605f;
  --accent-ink:#fff;

  --kubi-35d:"Cormorant Garamond", 'Cormorant Garamond Fallback', Georgia, serif;
  --kubi-bf9:'Crimson Pro', "Crimson Pro Fallback", Georgia, serif;
  --kubi-314:"JetBrains Mono", "JetBrains Mono Fallback", Consolas, monospace;

  --ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --ease-out:cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:400ms;

  --dock-height:64px;
  --header-height:68px;
  --spine-width:3px;
  --container-max:1280px;

  --space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --space-xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-sm:clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem);
  --space-md:clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
  --space-lg:clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
  --space-xl:clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
  --space-2xl:clamp(4.5rem, 3.8rem + 3.8vw, 8rem);

  --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-md:clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --text-lg:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-xl:clamp(1.875rem, 1.65rem + 1.1vw, 2.5rem);
  --text-2xl:clamp(2.35rem, 2rem + 1.8vw, 3.5rem);
  --text-display:clamp(2.85rem, 2.3rem + 2.8vw, 4.75rem);
  --text-num-hero:clamp(2.05rem, 1.8rem + 1.8vw, 5.75rem);
}

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

html {
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--kubi-bf9);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height);
}

body {
  background-color:var(--ground);
  color:var(--ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  padding-bottom:var(--dock-height);
}

@media (min-width: 1024px) {
  body {
    padding-bottom:0;
  }
}

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

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

  color:inherit;

}

a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  font-family:var(--kubi-35d);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  text-wrap:balance;
  overflow-wrap:break-word;
}

h1 {
  font-size:var(--text-display);
  letter-spacing:-0.02em;
}

h2 {
  font-size:var(--text-2xl);
  letter-spacing:-0.015em;
}

h3 {
  font-size:var(--text-xl);
  letter-spacing:-0.01em;
}

h4 {
  font-size:var(--text-lg);
}

p, li, dd {
  font-family:var(--kubi-bf9);
  font-size:var(--text-base);
  color:var(--ink);
  max-width:65ch;
  line-height:1.6;
}

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

small {
  font-size:var(--text-sm);
  line-height:1.45;
}

code, kbd, samp, pre, .mono {
  font-family:var(--kubi-314);
  font-feature-settings:"tnum" 1, "zero" 1;
}

.figure-num, .price-val, .spec-data {
  font-family:var(--kubi-314);

  font-feature-settings:"tnum" 1;
}

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

.skip-link {
  position:absolute;
  top:var(--space-xs);
  left:var(--space-xs);
  z-index:1000;
  background:var(--ink);
  color:var(--accent-ink);
  padding:0.6rem 1.2rem;
  font-family:var(--kubi-314);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform var(--dur-fast) var(--ease-out);
  border:1px solid var(--accent);
}

.skip-link:focus {
  transform:translateY(0);
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.container {
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--space-md);
}

.grid-cols-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

@media (min-width: 768px) {
  .grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.grid-cols-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

@media (min-width: 768px) {
  .grid-cols-3 {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

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

.flow-lg > * + * {
  margin-top:var(--space-md);
}

.flow-xl > * + * {
  margin-top:var(--space-lg);
}

.rule {
  border:0;
  border-top:1px solid var(--line);
  margin:0;
  width:100%;
}

.badge-tag {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--kubi-314);
  font-size:var(--text-xs);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:0.25rem 0.6rem;
  background:var(--surface-2);
  border:1px solid var(--line);
}

.icon {
  width:1.25rem;
  height:1.25rem;
  fill:currentColor;
  flex-shrink:0;
  display:inline-block;
}

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

.tech-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--space-md);
  position:relative;
}

.coord-label {
  font-family:var(--kubi-314);
  font-size:var(--text-xs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  user-select:none;
}

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

.section-ledger:first-of-type {
  border-top:1px solid var(--line);
}

.display-figure {
  font-family:var(--kubi-314);
  font-size:var(--text-num-hero);
  line-height:0.95;
  letter-spacing:-0.03em;
  color:var(--ink);
  font-feature-settings:"tnum" 1;
  display:block;
  font-weight:500;
}

.figure-unit {
  font-family:var(--kubi-314);
  font-size:var(--text-base);
  color:var(--ink-soft);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-left:0.4rem;
  font-weight:400;
}

.figure-caption {
  font-family:var(--kubi-bf9);
  font-size:var(--text-md);
  line-height:1.5;
  color:var(--ink);
  max-width:60ch;
  margin-top:var(--space-xs);
}

.figure-secondary {
  font-family:var(--kubi-bf9);
  font-size:var(--text-base);
  color:var(--ink-soft);
  max-width:65ch;
  margin-top:var(--space-xs);
}

.scroll-spine {
  display:none;
  position:fixed;
  top:0;
  right:0;
  width:var(--spine-width);
  height:100vh;
  min-height:100svh;
  background-color:var(--surface-2);
  z-index:900;
  pointer-events:none;
}

.scroll-spine-fill {
  width:100%;
  height:0%;
  background-color:var(--accent);
  transition:height var(--dur-fast) linear;
}

.scroll-spine-marks {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:4rem;
  pointer-events:auto;
}

.spine-mark {
  width:12px;
  height:2px;
  background-color:var(--line);
  margin-left:max(-9px, calc(50% - 50vw));
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

.spine-mark:hover,
.spine-mark.is-active {
  background-color:var(--accent);
  width:16px;
  margin-left:max(-13px, calc(50% - 50vw));
}

@media (min-width: 1024px) {
  .scroll-spine {
    display:block;
  }
}

.full-bleed-frame {
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:max(-50vw, calc(50% - 50vw));
  margin-right:max(-50vw, calc(50% - 50vw));
  overflow:hidden;
  background-color:var(--surface);
}

.full-bleed-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Spec Sheet Inset */
.spec-box {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-md);
  border-radius:0;
}

.spec-box-header {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding-bottom:var(--space-xs);
  margin-bottom:var(--space-sm);
}

.spec-box-title {
  font-family:var(--kubi-314);
  font-size:var(--text-xs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
}

.spec-box-status {
  font-family:var(--kubi-314);
  font-size:var(--text-xs);
  color:var(--ink-soft);
}