@import url("https://use.typekit.net/hxz2fpu.css");

:root {
  --cream: #e7e3d9;
  --ink: #30261d;
  --font-body: "alternate-gothic-extra-cond", sans-serif;
  --font-veneer: "veneer-three", "alternate-gothic-extra-cond", sans-serif;
  --type-heading: clamp(3.25rem, 4.6vw, 5.4rem);
  --type-body: clamp(1.75rem, 2.35vw, 2.55rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--font-body); font-weight: 100; }
a { color: inherit; }

.range-page { position: relative; min-height: 100vh; }
.range-background {
  position: fixed;
  z-index: -2;
  inset: 0;
  background: url("assets/robot-range-background.png") top center / cover no-repeat;
}
.range-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(231, 227, 217, .08);
}

.fixed-brand {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 33.333vw;
  padding: clamp(2rem, 4vw, 4.75rem);
}
.fixed-brand img { display: block; width: min(22vw, 18rem); height: auto; }
.brand-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; margin-top: 2.25rem; }
.brand-nav a { font-size: var(--type-body); font-weight: 100; line-height: 1.08; text-decoration: none; }
.brand-nav a { letter-spacing: .02em; transform: scaleX(1.04); transform-origin: left center; }
.brand-nav a:hover,.brand-nav a:focus-visible {
  font-weight: 500;
  letter-spacing: 0;
  transform: none;
}

.range-content {
  width: 66.667%;
  margin-left: 33.333%;
  background: transparent;
}
.cover,
.content-section {
  min-height: 100svh;
  padding: clamp(4rem, 7vw, 8rem) clamp(2.2rem, 6vw, 7rem);
}
.cover { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(2rem, 4vw, 4.75rem); }

h1, h2, h3 {
  font-family: var(--font-veneer);
  font-weight: 400;
  text-transform: uppercase;
  opacity: .8;
}
h1 {
  max-width: none;
  margin: 0;
  font-size: var(--type-heading);
  line-height: .85;
}
.cover h1 span { display: block; }
.cover h1 .proving-line { margin-top: .5em; }
.cover > p {
  max-width: none;
  width: 100%;
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  font-size: var(--type-body);
  font-weight: 100;
  line-height: 1.08;
  letter-spacing: .02em;
  transform: scaleX(1.04);
  transform-origin: left top;
  width: calc(100% / 1.04);
}

.content-section { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(2rem, 4vw, 4.75rem); scroll-margin-top: 0; }
.content-section h2 {
  max-width: none;
  margin: 0 0 clamp(3rem, 7vh, 5rem);
  font-size: var(--type-heading);
  line-height: .85;
}
.body-copy { width: 100%; margin-left: 0; }
.content-section p {
  max-width: none;
  width: 100%;
  margin: 0 0 1.35rem;
  font-size: var(--type-body);
  font-weight: 100;
  line-height: 1.18;
  letter-spacing: .02em;
  transform: scaleX(1.04);
  transform-origin: left top;
  width: calc(100% / 1.04);
}
.content-section .lead { font-size: clamp(2rem, 2.8vw, 3rem); font-weight: 500; line-height: 1.08; }
.content-section strong { display: inline-block; font-weight: 500; letter-spacing: 0; transform: scaleX(.96154); transform-origin: left center; }
.content-section p:has(> strong:only-child),
.content-section p:has(> a > strong:only-child) { width: 100%; letter-spacing: 0; transform: none; }
.content-section p:has(> strong:only-child) > strong,
.content-section p:has(> a > strong:only-child) > a > strong { transform: none; }

.building { background: transparent; color: var(--ink); }
.building p:not(.lead) { color: var(--ink); }
.scenario-lines { padding-left: 1.2em; }
.scenario-lines span { display: block; }

.three-cs { min-height: 100svh; padding-top: clamp(2rem, 4vw, 4.75rem); padding-bottom: clamp(7rem, 10vw, 11rem); }
.three-cs strong { font-weight: 500; }
.benchmark-list { width: calc(100% / 1.04); margin: .4rem 0 2.4rem; padding-left: 1.2em; font-size: var(--type-body); font-weight: 100; line-height: 1.2; letter-spacing: .02em; transform: scaleX(1.04); transform-origin: left top; }
.benchmark-close { margin-top: 2rem !important; }

.three-framework { min-height: auto; padding-bottom: clamp(7rem,10vw,11rem); }
.c-list { width: 100%; }
.c-list article { display: grid; grid-template-columns: .72fr 1.28fr; gap: 2rem; align-items: start; padding: 1.3rem 0 1.6rem; }
.c-list article + article { border-top: 1px solid rgba(48,38,29,.5); }
.c-list h3 { margin: 0; font-size: var(--type-heading); line-height: .87; }
.c-list strong { display: block; margin-bottom: .45rem; font-size: var(--type-body); font-weight: 500; line-height: 1.08; }
.c-list p { margin: 0; }
.c-list article:last-child { padding-bottom: 1rem; }
.three-close { margin-top: .85rem !important; }

.proof { background: transparent; }
.proof strong { font-weight: 500; }
.stakeholder-lines { margin: 1.2rem 0 1.6rem; }
.stakeholder-lines p { margin-bottom: .4em; }
.melbourne { min-height: 115svh; }
.melbourne strong { font-weight: 500; }
.close { min-height: 100svh; padding-bottom: clamp(8rem,12vw,14rem); color: var(--ink); background: transparent; }
.close h2 { max-width: none; margin-bottom: 3rem; }
.close p { margin: 0 0 1.35rem; font-size: var(--type-body); font-weight: 100; }
.close strong { font-weight: 500; }
.standard-proof { padding-left: 1.2em; }
.join-statement { color: inherit; text-decoration: none; }
.join-statement:hover,.join-statement:focus-visible { opacity: .72; }

footer {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  gap: 2rem;
  min-height: 16rem;
  padding: 4rem clamp(2.2rem, 6vw, 7rem);
  background: transparent;
}
footer p { width: calc(100% / 1.04); margin: 0; font-size: clamp(1.4rem, 1.7vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: .02em; transform: scaleX(1.04); transform-origin: left bottom; }

@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root { --font-veneer: "veneer", "alternate-gothic-extra-cond", sans-serif; }
}

@media (max-width: 56rem) {
  .range-background { background-position: 54% top; }
  .fixed-brand { width: 100%; padding: 1.7rem 1.5rem; background: rgba(231,227,217,.54); box-shadow: 0 1px rgba(48,38,29,.14); }
  .fixed-brand img { width: min(48vw, 13rem); }
  .brand-nav { display: none; }
  .range-content { width: 100%; margin-left: 0; padding-top: 6.7rem; }
  .cover,.content-section { min-height: auto; padding: clamp(6rem,16vw,9rem) 1.5rem; }
  .cover { min-height: calc(100svh - 6.7rem); padding-top: 1.7rem; }
  h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); }
  .cover>p,.body-copy { margin-left: 0; }
  .content-section h2 { font-size: clamp(4.5rem, 18vw, 7rem); }
  .c-list article { grid-template-columns: 1fr; gap: 1rem; }
  .c-list h3 { font-size: clamp(3.8rem, 15vw, 5.5rem); }
  .close { min-height: 100svh; }
  footer { min-height: 13rem; padding: 3rem 1.5rem; }
}

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