@font-face {
  font-family: DM Sans;
  src: url(assets/dm-sans-regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: DM Sans;
  src: url(assets/dm-sans-bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Libre Baskerville;
  src: url(assets/libre-baskerville.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #19392d;
  --body: #4d5b53;
  --orange: #f18a43;
  --orange-hover: #ffa361;
  --paper: #fff;
  --mist: #f2f5f1;
  --line: #d8dfd6;
  --header: 84px;
  --gutter: 64px;
  --travel: 700px;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 24px);
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body:has(dialog[open]) {
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
img {
  max-width: 100%;
  display: block;
}
svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  flex-shrink: 0;
  vertical-align: middle;
}
button svg,
a svg {
  pointer-events: none;
}
button {
  color: inherit;
}
input,
textarea,
select {
  min-width: 0;
}
button,
a,
input,
textarea,
select,
summary {
  outline-offset: 5px;
}
:focus-visible {
  outline: 3px solid #e96c25;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
}
h1 {
  font-size: 62px;
  line-height: 1.16;
  margin-bottom: 24px;
}
h2 {
  font-size: 42px;
  line-height: 1.24;
  margin-bottom: 24px;
}
h3 {
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 14px;
}
p {
  margin-bottom: 20px;
}
.wrap {
  width: min(100% - var(--gutter) * 2, 1280px);
  margin-inline: auto;
}
.section {
  padding-block: 100px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 24px;
}
.section-number {
  display: inline-block;
  color: #788c7c;
  margin-right: 16px;
  font-weight: 400;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  padding: 13px 23px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  white-space: normal;
  text-align: center;
}
.button:hover {
  background: #2c5140;
}
.button-orange {
  background: var(--orange);
  color: #182c22;
  border-color: var(--orange);
}
.button-orange:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
}
.button-outline {
  background: transparent;
  color: var(--ink);
  border-color: #bac7b8;
}
.button-outline:hover {
  background: var(--mist);
}
.button-small {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13px;
}
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
}
.icon-button:hover {
  background: #e7eee4;
}
.text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #8d9d8a;
  padding-bottom: 5px;
}
.text-link:hover {
  color: #a84b20;
  border-color: #a84b20;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 10px 20px;
  background: white;
  transform: translateY(-180%);
  z-index: 100;
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid rgba(25, 57, 45, 0.1);
}
.header-inner {
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(100% - var(--gutter) * 2, 1440px);
  margin: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.brand img {
  object-fit: contain;
}
.brand-name {
  font-size: 23px;
  line-height: 1.08;
  font-weight: 700;
}
.brand-name > span {
  display: block;
  font-size: 10px;
  line-height: 1.7;
}
.desktop-nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
}
.desktop-nav a {
  padding: 12px 0;
  border-bottom: 1px solid transparent;
}
.desktop-nav a:hover {
  border-color: var(--ink);
}
.header-contact {
  margin-left: 14px;
}
.menu-toggle {
  display: none;
}
.mobile-nav {
  padding: 8px 24px 24px;
  border-top: 1px solid var(--line);
}
.mobile-nav a {
  display: block;
  padding: 12px 0;
  font-weight: 700;
}
.journey {
  height: calc(100svh - var(--header) + var(--travel));
  position: relative;
  background: var(--mist);
}
.journey-sticky {
  position: sticky;
  top: var(--header);
}
.road-scene {
  height: calc(100svh - var(--header) - 78px);
  min-height: 550px;
  max-height: 920px;
  overflow: hidden;
  position: relative;
  background: #49624c;
}
.road-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 58%;
  transform-origin: 72% 49%;
  will-change: transform;
}
.road-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 27, 17, 0.68),
    rgba(13, 30, 18, 0.47) 32%,
    rgba(18, 35, 23, 0.08) 64%,
    transparent 82%
  );
}
.hero-content {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  padding-block: 42px 66px;
  pointer-events: none;
}
.hero-copy {
  color: #fff;
  will-change: transform, opacity;
  pointer-events: auto;
}
.hero-copy[inert] {
  visibility: hidden;
  pointer-events: none;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f6f6e8;
  font-size: 11px;
  margin-bottom: 25px;
}
.small-line {
  width: 27px;
  height: 1px;
  background: var(--orange);
  display: block;
}
.hero-description {
  font-size: 17px;
  line-height: 1.6;
  color: #f4f6ef;
  margin-bottom: 29px;
  padding-right: 45px;
}
.hero-actions {
  display: flex;
  gap: 22px;
  align-items: center;
}
.hero-actions .button {
  flex-shrink: 0;
}
.hero-price {
  font-size: 12px;
  line-height: 1.6;
  color: white;
}
.hero-price > span {
  font-size: 11px;
  color: #e2e9dc;
}
.scene-bottom {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.scene-caption {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 11px;
}
.scene-dot {
  width: 5px;
  height: 5px;
  background: var(--orange);
  border-radius: 50%;
}
.motion-toggle {
  width: 35px;
  height: 35px;
  background: rgba(17, 34, 23, 0.45);
  border-color: rgba(255, 255, 255, 0.5);
}
.motion-toggle svg {
  width: 14px;
  height: 14px;
}
.motion-toggle:hover {
  background: #19392d;
}
.journey-progress {
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}
.journey-progress span {
  display: block;
  height: 100%;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
}
.road-next {
  display: block;
  height: 78px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.road-next-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 42px;
}
.road-next .eyebrow {
  margin: 0;
  color: #65775e;
  flex-shrink: 0;
  font-size: 10px;
}
.road-next-inner > span:nth-child(2) {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
}
.road-next svg {
  margin-left: auto;
  width: 19px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 100px;
  align-items: end;
  margin-bottom: 55px;
}
.section-heading h2 {
  margin-bottom: 0;
}
.section-heading > p {
  color: var(--body);
  margin-bottom: 2px;
  font-size: 16px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.service {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.service > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 22px;
  color: #6a8059;
}
.service h3 {
  font-size: 19px;
}
.service p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 22px;
}
.service > a {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}
.service > a:hover {
  color: #a84b20;
}
.service > a svg {
  width: 16px;
  height: 16px;
}
.plans-section {
  background: var(--mist);
}
.pricing-intro {
  color: var(--body);
}
.pricing-intro p {
  margin-bottom: 15px;
}
.pricing-intro .text-link {
  font-size: 12px;
  color: var(--ink);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.plan {
  background: white;
  border: 1px solid #ccd7c9;
  border-radius: 6px;
  padding: 28px;
  scroll-margin-top: 110px;
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.plan-top svg {
  color: #6a8059;
  width: 24px;
  height: 24px;
}
.plan-index {
  font-size: 10px;
  font-weight: 700;
  color: #65745e;
}
.plan h3 {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
  margin-bottom: 12px;
}
.plan-description {
  font-size: 13px;
  color: var(--body);
  min-height: 42px;
  margin-bottom: 24px;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1;
  font-size: 51px;
  margin-bottom: 12px;
  font-weight: 700;
}
.price-cents {
  font-size: 31px;
  font-weight: 400;
}
.price-period {
  font-size: 12px;
  font-weight: 400;
  color: var(--body);
}
.launch-fee {
  font-size: 12px;
  color: var(--body);
  margin-bottom: 26px;
}
.plan-button {
  width: 100%;
  font-size: 12px;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 28px;
}
.plan-button svg {
  width: 17px;
  height: 17px;
}
.features {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.features li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 14px;
  line-height: 1.5;
}
.features li:last-child {
  margin-bottom: 0;
}
.features svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  color: #557747;
  stroke-width: 1.8;
}
.plan-grow {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.plan-grow .plan-description,
.plan-grow .launch-fee,
.plan-grow .price-period {
  color: #d5dfd2;
}
.plan-grow .plan-index {
  color: #d7e8c5;
}
.plan-grow .plan-top svg,
.plan-grow .features svg {
  color: #c8d7a7;
}
.plan-grow .features {
  border-color: #54705b;
}
.plan-footnotes {
  font-size: 11px;
  color: #5f6a5b;
  padding-block: 20px 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
.plan-footnotes p {
  margin-bottom: 0;
}
.concept-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.concept-note svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 3px;
}
.chatbot-add-on {
  border-top: 1px solid #c5d0c1;
  padding-top: 35px;
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 60px;
}
.chatbot-heading {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.chatbot-heading > svg {
  width: 28px;
  height: 28px;
  margin-top: 2px;
}
.chatbot-heading h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 12px;
}
.chatbot-heading p:last-child {
  font-size: 14px;
  color: var(--body);
  margin-bottom: 0;
}
.chatbot-cost {
  padding-left: 32px;
  border-left: 1px solid var(--line);
  font-size: 13px;
}
.chatbot-cost p {
  margin-bottom: 5px;
}
.chatbot-cost strong {
  font-size: 29px;
  font-weight: 700;
}
.chatbot-cost > span {
  color: var(--body);
  font-size: 12px;
  display: block;
  margin-bottom: 13px;
}
.chatbot-cost .text-link {
  font-size: 12px;
}
.roots-section {
  background: #e3ebdf;
  padding-block: 76px;
}
.roots-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.2fr;
  gap: 100px;
  align-items: center;
}
.roots-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 35px 0;
  border-right: 1px solid #bdcdb5;
}
.roots-brand img {
  width: 170px;
  height: 193px;
  margin-bottom: 16px;
}
.roots-brand > span {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}
.roots-brand small {
  font-size: 12px;
}
.roots-copy h2 {
  font-size: 36px;
  margin-bottom: 23px;
}
.roots-copy p:not(.eyebrow) {
  color: #465b46;
  font-size: 15px;
}
.roots-copy .text-link {
  font-size: 12px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 95px;
}
.faq-layout > div:first-child > p:not(.eyebrow) {
  font-size: 14px;
  color: var(--body);
}
.faq-list {
  border-top: 1px solid var(--line);
}
details {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  font-size: 15px;
  font-weight: 700;
  padding-block: 22px;
  cursor: pointer;
  line-height: 1.5;
}
summary::-webkit-details-marker {
  display: none;
}
summary svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s;
}
details[open] summary svg {
  transform: rotate(45deg);
}
details p {
  font-size: 14px;
  color: var(--body);
  padding-right: 40px;
  margin-bottom: 24px;
}
.contact-section {
  background: #193b2d;
  color: white;
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.2fr;
  gap: 110px;
}
.contact-intro > .eyebrow {
  font-size: 10px;
  color: #c0d1b2;
}
.contact-intro h2 {
  font-size: 45px;
  line-height: 1.3;
  margin-bottom: 24px;
}
.contact-intro > p:not(.eyebrow) {
  font-size: 15px;
  color: #d0ddcb;
}
.contact-note {
  margin-top: 44px;
  display: flex;
  gap: 15px;
  border-top: 1px solid #54705b;
  padding-top: 24px;
}
.contact-note svg {
  width: 20px;
  height: 20px;
  color: #d0ddcb;
  margin-top: 3px;
}
.contact-note p {
  font-size: 13px;
  color: #d0ddcb;
  margin: 0;
}
.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.form-status {
  font-size: 11px;
  color: #c0d1b2;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.form-status > span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.inquiry-form label {
  font-size: 12px;
  font-weight: 700;
  display: block;
  min-width: 0;
}
.optional {
  font-weight: 400;
  color: #c0d1b2;
}
.inquiry-form input:not([type="radio"]),
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  display: block;
  margin-top: 8px;
  border: 1px solid #6d8572;
  border-radius: 3px;
  padding: 12px 13px;
  background: #274638;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: #b4c4b5;
  font-size: 12px;
  font-weight: 400;
}
.inquiry-form textarea {
  resize: vertical;
  min-height: 92px;
}
.inquiry-form select {
  appearance: auto;
  color-scheme: dark;
}
.inquiry-form input[type="date"] {
  color-scheme: dark;
}
.inquiry-form .button {
  align-self: flex-start;
  min-width: 210px;
  margin-top: 3px;
}
.form-privacy {
  font-size: 11px;
  color: #b5c8b1;
  margin: -6px 0 0;
}
.contact-method {
  padding: 0;
  border: 0;
  margin: 0;
  min-width: 0;
}
.contact-method legend {
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #6d8572;
  border-radius: 4px;
}
.segmented label {
  position: relative;
  cursor: pointer;
}
.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 4px;
  border-radius: 2px;
  font-size: 12px;
  color: #c6d6c3;
}
.segmented input:checked + span {
  background: #e5eedd;
  color: var(--ink);
}
.segmented input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
.segmented svg {
  width: 15px;
  height: 15px;
}
.schedule-fields > p {
  font-size: 11px;
  color: #c0d1b2;
  margin: 8px 0 0;
}
.site-footer {
  padding-block: 27px;
  background: white;
}
.footer-inner {
  display: flex;
  gap: 28px;
  align-items: center;
}
.footer-inner .brand-name {
  font-size: 17px;
}
.footer-inner .brand-name > span {
  font-size: 8px;
}
.footer-inner > p {
  font-size: 11px;
  color: var(--body);
  margin: 0 auto 0 0;
}
.footer-inner > span {
  font-size: 10px;
  color: var(--body);
}
.footer-inner .icon-button {
  width: 36px;
  height: 36px;
}
dialog {
  border: 0;
  border-radius: 6px;
  padding: 30px;
  color: var(--ink);
  width: min(560px, calc(100% - 32px));
  max-height: 85svh;
  overflow: auto;
  box-shadow: 0 20px 100px #132c2580;
}
dialog::backdrop {
  background: rgba(12, 30, 23, 0.66);
  backdrop-filter: blur(3px);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dialog-heading .eyebrow {
  margin: 0;
}
dialog h2 {
  font-size: 30px;
  margin-bottom: 12px;
}
dialog > p {
  font-size: 14px;
  color: var(--body);
}
dialog dl {
  border-block: 1px solid var(--line);
  padding-block: 20px;
  margin-block: 24px;
  overflow-wrap: anywhere;
}
dialog dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--body);
  margin-top: 12px;
}
dialog dt:first-child {
  margin-top: 0;
}
dialog dd {
  margin: 3px 0 0;
  font-size: 14px;
  white-space: pre-wrap;
}
.noscript-note {
  padding: 20px;
  margin: 0;
  background: #fff5df;
  font-size: 13px;
}
@media (min-width: 1700px) {
  :root {
    --gutter: 100px;
  }
  h1 {
    font-size: 74px;
  }
  .hero-content {
    width: min(100% - 200px, 1440px);
  }
  .hero-description {
    padding-right: 100px;
  }
  .hero-actions {
    gap: 30px;
  }
}
@media (max-width: 1190px) {
  :root {
    --gutter: 38px;
  }
  .header-inner {
    gap: 22px;
  }
  .desktop-nav {
    gap: 24px;
  }
  .header-contact {
    margin-left: 0;
  }
  .brand-name {
    font-size: 21px;
  }
  h1 {
    font-size: 51px;
  }
  .hero-content {
    grid-template-columns: 1.1fr 1fr;
  }
  .hero-description {
    padding-right: 35px;
    font-size: 16px;
  }
  .hero-actions {
    gap: 15px;
    flex-wrap: wrap;
  }
  .hero-price {
    font-size: 11px;
  }
  .section-heading {
    gap: 60px;
  }
  h2 {
    font-size: 36px;
  }
  .service-grid {
    gap: 24px;
  }
  .service h3 {
    font-size: 17px;
  }
  .plan {
    padding: 23px;
  }
  .plan-button {
    font-size: 11px;
    padding-inline: 12px;
  }
  .features {
    font-size: 12px;
  }
  .contact-layout {
    gap: 70px;
  }
  .contact-intro h2 {
    font-size: 40px;
  }
  .faq-layout {
    gap: 65px;
  }
}
@media (max-width: 950px) {
  :root {
    --gutter: 28px;
    --header: 76px;
  }
  .desktop-nav {
    gap: 20px;
    font-size: 12px;
  }
  .header-contact {
    font-size: 11px;
    padding-inline: 12px;
  }
  .header-contact svg {
    width: 15px;
  }
  .brand-name {
    font-size: 19px;
  }
  .brand img {
    width: 36px;
    height: 43px;
  }
  .header-inner {
    gap: 18px;
  }
  .hero-content {
    grid-template-columns: 1.2fr 0.8fr;
  }
  h1 {
    font-size: 47px;
  }
  .hero-description {
    padding-right: 30px;
  }
  .hero-price {
    display: none;
  }
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
  }
  .service h3 {
    font-size: 20px;
  }
  .plans-grid {
    gap: 14px;
  }
  .plan {
    padding: 19px 16px;
  }
  .plan h3 {
    font-size: 25px;
  }
  .price {
    font-size: 44px;
  }
  .price-cents {
    font-size: 27px;
  }
  .plan-description {
    font-size: 12px;
  }
  .plan-button {
    font-size: 11px;
    gap: 3px;
  }
  .plan-button svg {
    width: 14px;
  }
  .features {
    font-size: 12px;
  }
  .plan-top svg {
    width: 20px;
  }
  .plan-index {
    font-size: 8px;
  }
  .section {
    padding-block: 78px;
  }
  .section-heading {
    gap: 45px;
  }
  .roots-layout {
    gap: 55px;
  }
  .roots-copy h2 {
    font-size: 31px;
  }
  .contact-layout {
    gap: 40px;
  }
  .contact-intro h2 {
    font-size: 35px;
  }
  .chatbot-add-on {
    grid-template-columns: 1fr 240px;
    gap: 35px;
  }
  .chatbot-heading {
    gap: 17px;
  }
  .chatbot-heading h3 {
    font-size: 20px;
  }
  .footer-inner {
    gap: 20px;
  }
  .footer-inner > p {
    display: none;
  }
  .footer-inner > span {
    margin-left: auto;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
    --header: 72px;
    --travel: 450px;
  }
  .desktop-nav,
  .header-contact {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .brand-name {
    font-size: 22px;
  }
  .brand img {
    width: 38px;
    height: 46px;
  }
  .journey {
    height: calc(100svh - var(--header) + var(--travel));
  }
  .road-scene {
    height: calc(100svh - var(--header) - 65px);
    min-height: 0;
    max-height: none;
  }
  .road-image {
    object-position: 69% 50%;
    transform-origin: 69% 51%;
  }
  .road-shade {
    background: linear-gradient(
      180deg,
      rgba(16, 34, 22, 0.2) 0%,
      rgba(16, 34, 22, 0.15) 26%,
      rgba(16, 34, 22, 0.76) 76%,
      rgba(16, 34, 22, 0.82) 100%
    );
  }
  .hero-content {
    display: flex;
    align-items: flex-end;
    padding: 0 0 72px;
  }
  .hero-copy {
    width: 100%;
  }
  h1 {
    font-size: 41px;
    line-height: 1.17;
    margin-bottom: 19px;
  }
  h1 br:first-child {
    display: none;
  }
  .hero-eyebrow {
    font-size: 9px;
    margin-bottom: 15px;
  }
  .hero-description {
    font-size: 14px;
    line-height: 1.65;
    padding: 0;
    margin-bottom: 22px;
  }
  .hero-actions .button {
    min-height: 48px;
    font-size: 12px;
    padding: 12px 18px;
  }
  .hero-actions {
    gap: 14px;
  }
  .hero-price {
    display: none;
  }
  .scene-bottom {
    bottom: 16px;
  }
  .scene-caption {
    font-size: 9px;
  }
  .motion-toggle {
    width: 30px;
    height: 30px;
  }
  .road-next {
    height: 65px;
  }
  .road-next-inner {
    gap: 12px;
  }
  .road-next .eyebrow {
    display: none;
  }
  .road-next-inner > span:nth-child(2) {
    font-size: 14px;
  }
  .road-next svg {
    width: 17px;
  }
  .section {
    padding-block: 62px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 36px;
  }
  .section-heading h2 {
    font-size: 32px;
    line-height: 1.3;
  }
  .section-heading > p {
    font-size: 15px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 17px;
  }
  .service-grid {
    gap: 32px 24px;
  }
  .service {
    padding-top: 23px;
  }
  .service > svg {
    margin-bottom: 18px;
    width: 25px;
    height: 25px;
  }
  .service h3 {
    font-size: 17px;
  }
  .service p {
    font-size: 13px;
  }
  .service > a {
    font-size: 11px;
    gap: 4px;
  }
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .plan {
    padding: 27px;
  }
  .plan-top {
    margin-bottom: 20px;
  }
  .plan-index {
    font-size: 10px;
  }
  .plan h3 {
    font-size: 29px;
  }
  .plan-description {
    font-size: 14px;
    min-height: 0;
    margin-bottom: 24px;
  }
  .price {
    font-size: 50px;
  }
  .price-cents {
    font-size: 32px;
  }
  .launch-fee {
    font-size: 12px;
  }
  .plan-button {
    font-size: 13px;
    padding: 13px 18px;
  }
  .plan-button svg {
    width: 18px;
  }
  .features {
    font-size: 14px;
  }
  .plan-footnotes {
    grid-template-columns: 1fr;
    gap: 13px;
    padding-block: 23px 30px;
  }
  .chatbot-add-on {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .chatbot-heading h3 {
    font-size: 22px;
  }
  .chatbot-cost {
    margin-left: 45px;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .roots-section {
    padding-block: 55px;
  }
  .roots-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .roots-brand {
    border-right: 0;
    padding: 0;
    flex-direction: row;
    gap: 17px;
    justify-content: flex-start;
    text-align: left;
  }
  .roots-brand img {
    width: 64px;
    height: 74px;
    margin: 0;
  }
  .roots-brand > span {
    font-size: 22px;
  }
  .roots-brand small {
    font-size: 10px;
  }
  .roots-copy h2 {
    font-size: 30px;
  }
  .roots-copy p:not(.eyebrow) {
    font-size: 14px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .faq-layout h2 {
    font-size: 32px;
  }
  .faq-layout .eyebrow {
    margin-bottom: 16px;
  }
  .faq-layout > div:first-child > p:not(.eyebrow) {
    margin-bottom: 0;
  }
  .faq-list summary {
    font-size: 14px;
    padding-block: 20px;
    gap: 20px;
  }
  .faq-list p {
    padding-right: 20px;
    font-size: 13px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .contact-intro h2 {
    font-size: 34px;
  }
  .contact-intro h2 br:last-child {
    display: none;
  }
  .contact-note {
    display: none;
  }
  .form-row {
    gap: 13px;
  }
  .inquiry-form {
    gap: 18px;
  }
  .inquiry-form input:not([type="radio"]),
  .inquiry-form select,
  .inquiry-form textarea {
    font-size: 16px;
  }
  .contact-intro > p:not(.eyebrow) {
    margin-bottom: 0;
  }
  .footer-inner {
    flex-wrap: wrap;
    gap: 18px;
  }
  .footer-inner .brand {
    width: calc(100% - 54px);
  }
  .footer-inner > .icon-button {
    order: 2;
  }
  .footer-inner > span {
    order: 3;
    margin-left: 0;
  }
  .footer-inner > p {
    display: block;
    order: 4;
    width: 100%;
    font-size: 11px;
    margin-top: -10px;
  }
  .site-footer {
    padding-block: 26px;
  }
}
@media (max-width: 380px) {
  :root {
    --gutter: 19px;
  }
  h1 {
    font-size: 35px;
  }
  .hero-description {
    font-size: 13px;
  }
  .hero-content {
    padding-bottom: 62px;
  }
  .hero-eyebrow {
    font-size: 8px;
  }
  .hero-actions .button {
    font-size: 11px;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service p {
    font-size: 14px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .segmented span {
    gap: 6px;
    font-size: 11px;
  }
  .section-heading h2 {
    font-size: 29px;
  }
  .contact-intro h2 {
    font-size: 30px;
  }
  .road-next-inner > span:nth-child(2) {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  h1 {
    font-size: 34px;
  }
  h1 br:first-child {
    display: initial;
  }
  .road-image {
    object-position: 55% 20%;
    transform-origin: 64% 26%;
  }
}
@media (max-height: 700px) and (min-width: 761px) {
  .road-scene {
    min-height: 0;
  }
  .hero-content {
    padding-block: 25px 44px;
  }
  h1 {
    font-size: 43px;
    margin-bottom: 16px;
  }
  .hero-eyebrow {
    margin-bottom: 14px;
  }
  .hero-description {
    font-size: 14px;
    margin-bottom: 19px;
  }
  .scene-bottom {
    bottom: 12px;
  }
  .hero-actions .button {
    min-height: 44px;
  }
  .road-next {
    height: 65px;
  }
  .road-scene {
    height: calc(100svh - var(--header) - 65px);
  }
}
@media (max-height: 740px) and (max-width: 760px) {
  h1 {
    font-size: 34px;
    margin-bottom: 12px;
  }
  .hero-eyebrow {
    margin-bottom: 11px;
    font-size: 8px;
  }
  .hero-description {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 17px;
  }
  .hero-content {
    padding-bottom: 61px;
  }
  .hero-actions .button {
    min-height: 43px;
    font-size: 11px;
  }
  .scene-bottom {
    bottom: 13px;
  }
}
@media (max-height: 580px) and (max-width: 760px) {
  .hero-eyebrow,
  .hero-description {
    display: none;
  }
  h1 {
    font-size: 32px;
  }
  .hero-content {
    padding-bottom: 60px;
  }
  .road-next-inner > span:nth-child(2) {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .journey {
    height: auto;
  }
  .journey-sticky {
    position: relative;
    top: 0;
  }
  .road-image,
  .hero-copy {
    transform: none !important;
    opacity: 1 !important;
  }
  .journey-progress {
    display: none;
  }
}
/* The original artwork owns every wordmark. */
.brand .horizontal-logo { width: 225px; height: 65px; object-fit: contain; }
.roots-logo-motion { width: min(100%, 330px); aspect-ratio: 1; flex-shrink: 0; }
.roots-brand img { width: 100%; height: auto; margin: 0; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .roots-logo-motion {
    transform: perspective(900px) translateY(0) rotateY(0) rotateZ(0) scale(1);
    transition: transform 1.7s cubic-bezier(.2,.8,.25,1.15);
  }
  .motion-ready .roots-brand:not(.is-visible) .roots-logo-motion {
    transform: perspective(900px) translateY(28px) rotateY(-24deg) rotateZ(-5deg) scale(.84);
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .roots-logo-motion img {
    transform: perspective(800px) rotateX(var(--logo-tilt-x, 0deg)) rotateY(var(--logo-tilt-y, 0deg)) scale(var(--logo-scale, 1));
    filter: drop-shadow(0 0 0 #193b2d00);
    transition: transform .25s ease-out, filter .4s ease;
  }
  .roots-logo-motion.is-tilting img { filter: drop-shadow(0 14px 12px #193b2d26); }
}
.motion-paused .roots-logo-motion, .motion-paused .roots-logo-motion img {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.header-inner { gap: 22px; }
.desktop-nav { gap: 23px; }
.header-contact { margin-left: 0; }
.service > a.button { font-size: 12px; justify-content: space-between; color: var(--ink); }
.service-photo { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 24px; }
.service-photo img, .outcome-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.service { padding-top: 0; border-top: 0; }
.button { transition: transform .22s, background .22s, color .22s, box-shadow .22s; }
.button svg { transition: transform .22s; }
.plan { transition: transform .3s, box-shadow .3s; }
.store-story { position: relative; isolation: isolate; overflow: hidden; background: #f8faf7; }
.story-road { position: absolute; inset: -10% 0; z-index: -1; background: url(assets/dirt-road-background.webp) center 50% / cover; opacity: .065; will-change: transform; }
.story-opening { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; margin-bottom: 52px; align-items: start; }
.story-opening h2 { font-size: 37px; }
.business-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; border-top: 1px solid #bdcdb5; padding-top: 50px; margin-top: 30px; }
.outcome-photo { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 24px; }
.business-outcomes h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.4; }
.business-outcomes p:not(.eyebrow) { font-size: 14px; color: var(--body); }
.story-opening p:not(.eyebrow), .workflow-copy p, .season-layout p, .dusty-layout p:not(.eyebrow) { color: var(--body); }
.story-opening .small-copy { font-size: 12px; margin-bottom: 0; }
.development-label { display: inline-flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 700; padding: 7px 10px; background: #e9eee5; margin-bottom: 18px; border-left: 2px solid #b96731; }
.development-label > span { width: 5px; height: 5px; background: #a75928; border-radius: 50%; }
.store-photo { margin-top: 0; margin-bottom: 70px; }
.photo-window { aspect-ratio: 2.35; overflow: hidden; }
.photo-window img { width: 100%; height: 115%; object-fit: cover; object-position: center 43%; will-change: transform; }
.store-workflows { position: relative; --marker-size: 46px; --workflow-padding: 44px; }
.workflow { --workflow-gap: 42px; display: grid; grid-template-columns: var(--marker-size) .9fr 1.15fr; gap: var(--workflow-gap); padding: var(--workflow-padding) 0; position: relative; }
.workflow::before { content: ""; position: absolute; left: calc((var(--marker-size) - 1px) / 2); top: -1px; bottom: 0; width: 1px; background: #ccd7c9; }
.workflow:first-child::before { top: calc(var(--workflow-padding) + var(--marker-size) / 2); }
.workflow:last-child::before { bottom: auto; height: calc(var(--workflow-padding) + var(--marker-size) / 2 + 1px); }
.workflow:only-child::before { display: none; }
.workflow + .workflow { border-top: 1px solid transparent; }
.workflow + .workflow::after { content: ""; position: absolute; top: -1px; left: calc(var(--marker-size) + var(--workflow-gap)); right: 0; height: 1px; background: #ced9c9; }
.workflow-marker { width: var(--marker-size); height: var(--marker-size); border-radius: 50%; display: grid; place-items: center; background: #f8faf7; border: 1px solid #b6c7b0; z-index: 1; }
.workflow-marker svg { width: 21px; height: 21px; }
.workflow h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.4; }
.workflow p:last-child { margin-bottom: 0; }
.workflow-copy { font-size: 15px; }
.season-section { background: #fff; }
.season-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.season-example { border-block: 1px solid var(--line); padding: 25px 0 0; }
.schedule-heading { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.sample-label { margin-left: auto; font-size: 9px; font-weight: 400; color: #64745f; }
.campaign-steps { list-style: none; padding: 0; margin: 0; }
.campaign-steps li { position: relative; display: grid; grid-template-columns: 12px 1fr 22px; gap: 20px; padding: 27px 0; border-bottom: 1px solid #e3e8df; }
.campaign-steps li:last-child { border: 0; }
.campaign-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8723c; margin-top: 8px; }
.campaign-steps li > svg { width: 22px; height: 22px; margin-top: 1px; }
.campaign-steps h3 { font-size: 17px; line-height: 24px; margin: 0 0 8px; }
.campaign-steps p { font-size: 13px; margin: 0; }
.dusty-intro { background: #fff; padding-block: 64px; }
.dusty-intro .chatbot-add-on { margin-top: 48px; }
.dusty-layout { display: grid; grid-template-columns: .7fr 1fr; gap: 100px; align-items: center; }
.dusty-layout > img { width: 100%; height: 360px; object-fit: contain; }
.dusty-description { font-size: 21px; color: var(--ink) !important; line-height: 1.5; }
.final-stop { background: #193b2d; color: #fff; }
.final-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 90px; align-items: center; }
.final-layout > .button { justify-self: end; }
.final-layout p:not(.eyebrow) { color: #d6e2d0; margin-bottom: 0; }
.contact-page .contact-section { min-height: calc(100svh - var(--header)); }
.contact-intro h1 { font-size: 45px; }
[data-reveal] { transition: opacity 1.3s ease-in-out, transform 1.3s cubic-bezier(.22,.6,.3,1); }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(32px); transition: none; }
.service[data-reveal]:nth-child(2) { transition-delay: .3s; }
.service[data-reveal]:nth-child(3) { transition-delay: .6s; }
.service[data-reveal]:nth-child(4) { transition-delay: .9s; }
.plan[data-reveal]:nth-child(2) { transition-delay: .14s; }
.plan[data-reveal]:nth-child(3) { transition-delay: .28s; }
.motion-paused [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: #dc8046; transform: scaleX(0); transform-origin: left; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-3px); box-shadow: 0 6px 14px #19392d12; }
  .button:hover svg { transform: translateX(3px); }
  .service:hover .service-photo img, .business-outcomes article:hover .outcome-photo img { transform: scale(1.045); }
  .plan:hover { transform: translateY(-6px); box-shadow: 0 16px 30px #19392d12; }
  .workflow:hover .workflow-marker { background: #f7d9c2; border-color: #c8723c; }
  .motion-paused .button:hover, .motion-paused .button:hover svg, .motion-paused .plan:hover, .motion-paused .service:hover img { transform: none; }
}
@media (max-width: 1150px) {
  .desktop-nav { gap: 17px; font-size: 12px; }
  .brand .horizontal-logo { width: 200px; height: 58px; }
  .header-contact { font-size: 11px; padding-inline: 12px; }
  .story-opening, .season-layout, .dusty-layout { gap: 55px; }
  .workflow { --workflow-gap: 25px; }
}
@media (max-width: 980px) {
  .desktop-nav, .header-contact { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px; }
  .workflow h3 { font-size: 23px; }
}
@media (max-width: 760px) {
  .brand .horizontal-logo { width: 192px; height: 56px; }
  .story-opening, .season-layout, .dusty-layout, .final-layout { grid-template-columns: 1fr; gap: 30px; }
  .story-opening { margin-bottom: 32px; }
  .story-opening h2 { font-size: 28px; }
  .business-outcomes { grid-template-columns: 1fr; gap: 40px; }
  .photo-window { aspect-ratio: 1.35; }
  .store-photo { margin-bottom: 24px; }
  .store-workflows { --marker-size: 38px; --workflow-padding: 30px; }
  .workflow { --workflow-gap: 16px; grid-template-columns: var(--marker-size) 1fr; }
  .workflow-title h3 { margin-bottom: 0; font-size: 23px; }
  .workflow-copy { grid-column: 2; font-size: 14px; }
  .season-layout h2 br { display: none; }
  .season-layout { gap: 40px; }
  .dusty-layout { gap: 18px; }
  .dusty-intro .chatbot-add-on { margin-top: 32px; }
  .dusty-layout > img { height: 260px; }
  .dusty-description { font-size: 19px; }
  .final-layout > .button { justify-self: start; }
  .final-layout h2 { font-size: 30px; }
  .roots-logo-motion { width: min(100%, 230px); }
  .contact-intro h1 { font-size: 36px; }
  .footer-inner .brand img { width: 184px; height: 54px; }
  .service > a.button { width: 100%; padding-inline: 11px; font-size: 11px; gap: 5px; }
}
@media (max-width: 420px) {
  .service-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-photo { aspect-ratio: 1.65; margin-bottom: 18px; }
  .service > a.button { width: auto; align-self: flex-start; padding-inline: 16px; font-size: 12px; }
  .contact-intro h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .story-road, .photo-window img { transform: none !important; }
}