/* Marketing composition follows the user-supplied references. Values reuse app tokens. */
@font-face {
  font-family:Anton;
  src:url('/assets/fonts/Anton-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Inter;
  src:url('/assets/fonts/Inter-Variable.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap
}
:root  {
  --c-ink: #090909;
  --c-paper: #fff4dc;
  --c-homePaperLight: #FFFFFF;
  --c-textSection: #b0a89d;
  --c-textTagline: #d7d0c6;
  --c-textEyebrow: #b4aea4;
  --c-textMeta: #6a6460;
  --c-accent: #FF4D17;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-hero: 42px;
  --w-regular: 400;
  --w-bold: 700;
  --ch-compact: 44px;
  --ch-button: 56px;
  color-scheme:light;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--s-6)
}
body {
  margin:0;
  background:color-mix(in srgb,var(--c-homePaperLight) 98%,var(--c-ink));
  color:var(--c-ink);
  font:var(--w-regular) var(--fs-base)/1.5 Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p,figure {
  margin:0
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  width:var(--s-8);
  height:var(--s-8);
  flex-shrink:0
}
a:focus-visible,summary:focus-visible {
  outline:2px solid var(--c-accent);
  outline-offset:var(--s-1)
}
.shell {
  max-width:1440px;
  width:calc(100% - var(--s-8) * 2);
  margin-inline:auto
}
.top {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-8);
  border-bottom:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent)
}
.brand {
  display:inline-flex;
  flex-direction:column;
  text-decoration:none;
  gap:var(--s-1);
  flex-shrink:0
}
.brand img {
  width:152px;
  filter:brightness(0)
}
.brand>span {
  font-size:calc(var(--fs-xs) * .7);
  font-weight:var(--w-bold);
  letter-spacing:.27em;
  text-align:center
}
.top nav {
  display:flex;
  gap:var(--s-8);
  margin-left:auto;
  margin-right:var(--s-8)
}
.top nav a {
  text-decoration:none;
  font-size:var(--fs-sm)
}
.top nav a:hover,.text-link:hover {
  color:var(--c-accent)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-5);
  padding:var(--s-3) var(--s-6);
  min-height:var(--ch-compact);
  border:1px solid var(--c-ink);
  border-radius:9999px;
  background:var(--c-ink);
  color:var(--c-homePaperLight);
  font-size:var(--fs-sm);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s
}
.button:hover {
  background:var(--c-textMeta)
}
.button span {
  font-size:var(--fs-lg);
  line-height:1
}
.eyebrow {
  font-size:calc(var(--fs-xs) * .8);
  letter-spacing:.25em;
  font-weight:var(--w-bold);
  line-height:1.6;
  text-transform:uppercase
}
.eyebrow i {
  font-style:normal;
  color:var(--c-accent);
  padding-inline:var(--s-2)
}
.hero {
  position:relative;
  overflow:hidden;
  border-bottom:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent)
}
.hero-photo {
  position:absolute;
  right:0;
  top:0;
  width:49%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
  mask-image:linear-gradient(90deg,transparent,var(--c-ink) 30%);
  filter:saturate(.35)
}
.hero::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c-homePaperLight) 98%,var(--c-ink)) 38%,transparent 70%)
}
.hero-inner {
  position:relative;
  min-height:510px;
  z-index:1;
  display:flex;
  align-items:center
}
.hero-copy {
  width:43%;
  position:relative;
  z-index:3;
  padding-block:var(--s-8)
}
h1 {
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(var(--fs-3xl),3.9vw,calc(var(--fs-hero) * 1.4));
  font-weight:var(--w-regular);
  line-height:1.09;
  letter-spacing:-.025em;
  margin-top:var(--s-3)
}
.hero-description {
  max-width:470px;
  font-size:var(--fs-base);
  line-height:1.5;
  margin-top:var(--s-4);
  color:var(--c-textMeta)
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-5);
  align-items:center;
  margin-top:var(--s-5)
}
.watch {
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-sm);
  text-decoration:none
}
.play {
  display:grid;
  place-items:center;
  width:var(--s-8);
  height:var(--s-8);
  border:1px solid var(--c-textMeta);
  border-radius:50%;
  font-size:var(--fs-lg)
}
.watch:hover .play {
  border-color:var(--c-accent);
  color:var(--c-accent)
}
.hero-values {
  display:flex;
  margin-top:var(--s-8);
  gap:var(--s-4)
}
.hero-values>span {
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding-right:var(--s-4);
  border-right:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent)
}
.hero-values>span:last-child {
  border:0;
  padding-right:0
}
.hero-values svg {
  width:var(--s-6);
  height:var(--s-6)
}
.hero-values small {
  font-size:var(--fs-xs);
  line-height:1.4
}
.phones {
  position:absolute;
  left:44%;
  width:32%;
  height:100%;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  perspective:1200px
}
.phone {
  width:50%;
  flex-shrink:0;
  aspect-ratio:1206/2622;
  border:6px solid var(--c-ink);
  border-radius:16% / 7.36%;
  overflow:hidden;
  background:var(--c-homePaperLight);
  box-shadow:0 0 0 2px var(--c-textMeta),0 16px 24px -16px var(--c-ink)
}
.phone img {
  width:100%;
  height:100%;
  object-fit:cover
}
.phone-one {
  transform:rotate(-7deg) translateY(var(--s-2));
  z-index:1
}
.phone-two {
  transform:rotate(4deg) translateY(var(--s-3));
  z-index:2
}
.phones>p {
  position:absolute;
  bottom:var(--s-3);
  font-size:calc(var(--fs-xs) * .8);
  color:var(--c-textMeta);
  white-space:nowrap
}
.hero-side {
  position:absolute;
  right:0;
  top:var(--s-8);
  text-align:center;
  letter-spacing:.26em;
  font-size:var(--fs-xs);
  line-height:1.8;
  color:var(--c-homePaperLight);
  text-shadow:0 1px 4px var(--c-ink)
}
.band {
  display:grid;
  gap:var(--s-5);
  padding-block:var(--s-6);
  border-bottom:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent)
}
.section-intro .eyebrow {
  position:relative;
  margin-bottom:var(--s-4)
}
.section-intro .eyebrow::after {
  content:'';
  position:absolute;
  left:0;
  bottom:calc(var(--s-2) * -1);
  height:2px;
  width:var(--s-6);
  background:var(--c-accent)
}
h2 {
  font-size:var(--fs-xl);
  font-weight:var(--w-bold);
  line-height:1.12;
  letter-spacing:-.05em
}
h3 {
  font-size:var(--fs-base);
  font-weight:var(--w-bold);
  line-height:1.3;
  letter-spacing:-.025em
}
.section-intro>p:not(.eyebrow) {
  font-size:var(--fs-sm);
  color:var(--c-textMeta);
  margin-top:var(--s-3);
  line-height:1.5
}
.text-link {
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--w-bold);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  margin-top:var(--s-4)
}
.audience {
  grid-template-columns:1.05fr 3.4fr .8fr
}
.audience-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-3)
}
.person-card {
  padding:var(--s-2);
  border:1px solid color-mix(in srgb,var(--c-ink) 7%,transparent);
  border-radius:var(--s-2)
}
.person-image {
  height:102px;
  background-image:url('/assets/site/training-people.png');
  background-size:300% auto;
  background-repeat:no-repeat;
  border-radius:var(--s-1);
  filter:saturate(.3)
}
.person-athlete {
  background-position:0% 12%
}
.person-return {
  background-position:50% 12%
}
.person-start {
  background-position:100% 12%
}
.person-card h3 {
  margin-top:var(--s-2)
}
.person-card>p {
  font-size:var(--fs-xs);
  color:var(--c-textMeta);
  margin-top:var(--s-2);
  line-height:1.6
}
.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  margin-top:var(--s-3)
}
.card-bottom>span {
  font-size:calc(var(--fs-xs) * .65);
  letter-spacing:.15em;
  color:var(--c-textMeta)
}
.card-bottom svg {
  color:var(--c-accent);
  width:var(--s-5);
  height:var(--s-5)
}
.belief {
  background:color-mix(in srgb,var(--c-ink) 3%,transparent);
  padding:var(--s-4);
  border-radius:var(--s-2);
  position:relative
}
.quote-mark {
  font-size:var(--fs-hero);
  line-height:1;
  color:var(--c-textTagline)
}
.belief p {
  font-size:var(--fs-xs);
  line-height:1.6;
  font-style:italic
}
.red-line {
  display:block;
  width:var(--s-6);
  height:2px;
  background:var(--c-accent);
  margin-block:var(--s-3)
}
.belief strong {
  font-size:var(--fs-xs);
  font-weight:var(--w-regular)
}
.technology {
  grid-template-columns:1.05fr 4.3fr
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s-3)
}
.feature-grid article {
  border:1px solid color-mix(in srgb,var(--c-ink) 6%,transparent);
  border-radius:var(--s-2);
  padding:var(--s-4) var(--s-3)
}
.feature-grid h3 {
  font-size:var(--fs-xs);
  margin-top:var(--s-3)
}
.feature-grid p {
  font-size:var(--fs-sm);
  color:var(--c-textMeta);
  margin-top:var(--s-2);
  line-height:1.55
}
.method {
  grid-template-columns:1.05fr 3.4fr .8fr
}
.journey {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s-5);
  padding:0;
  margin:0;
  list-style:none
}
.journey li {
  position:relative
}
.step-number {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:var(--s-8);
  height:var(--s-8);
  font-size:var(--fs-sm);
  color:var(--c-textMeta);
  background:color-mix(in srgb,var(--c-ink) 6%,transparent)
}
.journey li:nth-child(3) .step-number {
  color:var(--c-accent);
  background:color-mix(in srgb,var(--c-accent) 12%,transparent)
}
.journey li:not(:last-child)::after {
  content:'⟶';
  position:absolute;
  left:45%;
  top:0;
  font-size:var(--fs-xl);
  color:var(--c-textMeta)
}
.journey h3 {
  font-size:var(--fs-xs);
  margin-top:var(--s-3)
}
.journey p {
  font-size:var(--fs-xs);
  color:var(--c-textMeta);
  margin-top:var(--s-1)
}
.mountain {
  background:var(--c-ink) url('/assets/site/mountain.png') center/cover;
  border-radius:var(--s-2);
  padding:var(--s-4);
  color:var(--c-homePaperLight);
  min-height:130px
}
.mountain p {
  font-size:var(--fs-sm);
  line-height:1.3
}
.research {
  grid-template-columns:1.05fr 4.3fr;
  padding-block:var(--s-8)
}
.research-copy>p {
  max-width:860px;
  color:var(--c-textMeta);
  font-size:var(--fs-sm)
}
details {
  margin-top:var(--s-4);
  border-top:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent)
}
summary {
  display:flex;
  justify-content:space-between;
  padding-block:var(--s-3);
  font-size:var(--fs-sm);
  cursor:pointer;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  color:var(--c-accent)
}
details[open] summary span {
  transform:rotate(45deg)
}
.refs {
  padding-left:var(--s-5);
  font-size:var(--fs-xs);
  color:var(--c-textMeta)
}
.refs li {
  padding-block:var(--s-2);
  overflow-wrap:anywhere
}
.access {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-6);
  padding-block:var(--s-8);
  border-bottom:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent)
}
.access h2 {
  margin-top:var(--s-2)
}
.access p:not(.eyebrow) {
  font-size:var(--fs-sm);
  color:var(--c-textMeta);
  margin-top:var(--s-3)
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-6);
  padding-block:var(--s-6)
}
footer .brand img {
  width:120px
}
footer .brand span {
  font-size:calc(var(--fs-xs) * .55)
}
footer p {
  font-size:var(--fs-xs);
  color:var(--c-textMeta)
}
footer nav {
  display:flex;
  gap:var(--s-4);
  font-size:var(--fs-xs)
}
footer nav a {
  text-decoration:none
}
footer nav a:hover {
  text-decoration:underline
}
.skip {
  position:absolute;
  left:var(--s-4);
  top:var(--s-4);
  transform:translateY(-200%);
  background:var(--c-homePaperLight);
  z-index:10;
  padding:var(--s-3)
}
.skip:focus {
  transform:none
}
@media(min-width:1500px) {
  .hero-inner {
    min-height:570px
  }
  .hero-photo {
    object-position:center
  }
  .phone {
    max-width:225px
  }
}
@media(max-width:1100px) {
  .top nav {
    gap:var(--s-4);
    margin-right:0
  }
  .hero-copy {
    width:44%
  }
  .hero-values {
    gap:var(--s-2)
  }
  .hero-values>span {
    gap:var(--s-2);
    padding-right:var(--s-2)
  }
  .hero-values small {
    font-size:calc(var(--fs-xs) * .85)
  }
  .hero-side {
    display:none
  }
  .phones {
    left:46%;
    width:33%
  }
  .hero-inner {
    min-height:470px
  }
  .audience {
    grid-template-columns:1fr 3fr
  }
  .belief {
    display:none
  }
  .technology,.research {
    grid-template-columns:1fr 3fr
  }
  .method {
    grid-template-columns:1fr 3fr
  }
  .mountain {
    display:none
  }
  .feature-grid {
    gap:var(--s-2)
  }
  .feature-grid article {
    padding:var(--s-3) var(--s-2)
  }
  h2 {
    font-size:var(--fs-lg)
  }
  footer {
    flex-wrap:wrap
  }
}
@media(max-width:760px) {
  .shell {
    width:calc(100% - var(--s-5) * 2)
  }
  .top {
    height:76px;
    gap:var(--s-4)
  }
  .brand img {
    width:128px
  }
  .top nav {
    display:none
  }
  .button {
    padding:var(--s-3) var(--s-4);
    gap:var(--s-3)
  }
  .hero-inner {
    display:block;
    min-height:850px
  }
  .hero-copy {
    width:100%;
    padding-top:var(--s-8);
    padding-bottom:0
  }
  .hero h1 {
    font-size:clamp(var(--fs-3xl),7.8vw,var(--fs-hero));
    max-width:540px
  }
  .hero-description {
    max-width:500px
  }
  .hero-values {
    margin-top:var(--s-6);
    gap:var(--s-3)
  }
  .hero-values small {
    font-size:calc(var(--fs-xs) * .9)
  }
  .hero-values>span {
    gap:var(--s-2);
    padding-right:var(--s-3)
  }
  .hero-photo {
    top:auto;
    bottom:0;
    width:100%;
    height:370px;
    object-position:75% center
  }
  .hero::after {
    background:linear-gradient(180deg,color-mix(in srgb,var(--c-homePaperLight) 98%,var(--c-ink)) 49%,transparent 65%)
  }
  .phones {
    top:auto;
    bottom:0;
    left:var(--s-4);
    width:57%;
    height:360px;
    justify-content:flex-start
  }
  .phone {
    border-width:4px;
    width:48%;
    max-height:315px
  }
  .phones>p {
    bottom:var(--s-2);
    left:0;
    font-size:calc(var(--fs-xs) * .65);
    background:var(--c-homePaperLight);
    padding:var(--s-1)
  }
  .band {
    grid-template-columns:1fr;
    padding-block:var(--s-6);
    gap:var(--s-5)
  }
  .section-intro>p:not(.eyebrow) {
    max-width:500px
  }
  .section-intro h2 {
    font-size:var(--fs-xl)
  }
  .audience-cards {
    gap:var(--s-2)
  }
  .person-image {
    height:160px;
    background-size:300% auto
  }
  .person-card h3 {
    font-size:var(--fs-sm)
  }
  .person-card>p {
    font-size:var(--fs-xs)
  }
  .card-bottom>span {
    display:none
  }
  .card-bottom {
    margin-top:var(--s-2)
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr);
    gap:var(--s-3)
  }
  .feature-grid article {
    padding:var(--s-4)
  }
  .feature-grid article:last-child {
    grid-column:1/-1
  }
  .feature-grid h3 {
    font-size:var(--fs-sm)
  }
  .journey {
    grid-template-columns:1fr;
    gap:var(--s-4)
  }
  .journey li {
    padding-left:var(--s-12);
    min-height:var(--s-12)
  }
  .step-number {
    position:absolute;
    left:0
  }
  .journey h3 {
    margin-top:0;
    font-size:var(--fs-sm)
  }
  .journey li:not(:last-child)::after {
    content:'';
    height:var(--s-5);
    width:1px;
    background:var(--c-textTagline);
    left:var(--s-4);
    top:var(--s-10)
  }
  .journey p {
    font-size:var(--fs-sm)
  }
  .access {
    flex-direction:column;
    align-items:flex-start
  }
  footer {
    align-items:flex-start
  }
  footer nav {
    flex-wrap:wrap
  }
  footer p {
    flex-basis:100%;
    order:3
  }
}
@media(max-width:380px) {
  .hero-inner {
    min-height:850px
  }
  .hero-values svg {
    width:var(--s-5)
  }
  .hero-values {
    gap:var(--s-2)
  }
  .hero-values>span {
    padding-right:var(--s-2)
  }
  .audience-cards {
    grid-template-columns:1fr
  }
  .person-image {
    height:150px;
    background-size:300% auto
  }
  .person-card {
    padding:var(--s-3)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* Company identity presents ROREPS as the product, matching the supplied reference. */
.company-brand strong {
  font-size:var(--fs-lg);
  font-weight:var(--w-bold);
  font-style:italic;
  letter-spacing:-.06em;
  line-height:1;
}
.company-brand > span {
  display:flex;
  align-items:center;
  gap:var(--s-3);
  text-align:left;
  letter-spacing:.4em;
}
.company-brand > span::before {
  content:"";
  width:var(--s-6);
  height:2px;
  background:var(--c-accent);
}