html {
  color: var(--color-text-primary);
  background-color: var(--color-page-background);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-16);
  line-height: var(--line-height-body-16);
  font-synthesis: none;
}

/*
 * Scrolling remains fully functional, but the project uses a visually clean
 * canvas without native scrollbar tracks in the page or internal scrollers.
 */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  color: inherit;
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

[data-smooth-wrapper] {
  overflow: hidden;
}

[data-smooth-content] {
  display: flow-root;
  width: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.type-heading-1,
.type-heading-2,
.type-heading-3,
.type-heading-4,
.type-heading-5,
.type-heading-6 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-style: normal;
  letter-spacing: var(--letter-spacing-default);
  text-transform: none;
}

.type-hoss-display-72 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display-72);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display-72);
  letter-spacing: 1.44px;
  text-transform: uppercase;
}

h1,
.type-heading-1 {
  font-size: var(--font-size-heading-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-1);
}

h2,
.type-heading-2 {
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-2);
}

h3,
.type-heading-3 {
  font-size: var(--font-size-heading-3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading-3);
}

h4,
.type-heading-4 {
  font-size: var(--font-size-heading-4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading-4);
}

h5,
.type-heading-5 {
  font-size: var(--font-size-heading-5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-5);
}

h6,
.type-heading-6 {
  font-size: var(--font-size-heading-6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading-6);
}

.type-script-52,
.type-script-28,
.type-hoss-42-medium,
.type-hoss-32-medium,
.type-hoss-30-bold,
.type-hoss-24-bold,
.type-hoss-22-medium,
.type-hoss-22-bold,
.type-hoss-22-regular,
.type-hoss-20-medium,
.type-body-20-medium,
.type-body-18-medium,
.type-body-18-regular,
.type-hoss-18-medium,
.type-hoss-16-light,
.type-body-16-regular,
.type-body-16-medium,
.type-body-14-regular {
  margin: 0;
  font-style: normal;
  letter-spacing: var(--letter-spacing-default);
  text-transform: none;
}

.type-script-52 {
  font-family: var(--font-family-script);
  font-size: var(--font-size-script-52);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-script-52);
}

.type-hoss-42-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-42);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-hoss-42);
}

.type-hoss-32-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-32);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-hoss-32);
}

.type-hoss-30-bold {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-30);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-hoss-30);
}

.type-script-28 {
  font-family: var(--font-family-script);
  font-size: var(--font-size-script-28);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-script-28);
}

.type-script-28--white-stroke {
  --text-stroke-reveal-buffer: 16px;

  -webkit-text-stroke-width: 10px;
  -webkit-text-stroke-color: #FFF;
  paint-order: stroke fill;
}

/*
 * SplitText clips reveal lines to their line box. Expand that clip box for
 * outlined script text without changing its layout footprint, so the stroke
 * remains intact on every edge.
 */
.type-script-28--white-stroke .text-reveal__line-mask {
  margin: calc(var(--text-stroke-reveal-buffer) * -1);
  padding: var(--text-stroke-reveal-buffer);
}

.type-hoss-24-bold {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-hoss-24);
}

.type-hoss-22-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-22);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-hoss-22);
}

.type-hoss-22-bold {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-22);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-hoss-22);
}

.type-hoss-22-regular {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-22);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-hoss-22);
}

.type-hoss-20-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-hoss-20);
}

.type-body-20-medium {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-20);
}

.type-body-18-regular {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-18);
}

.type-body-18-medium {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-18);
}

.type-hoss-18-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-hoss-18);
}

.type-hoss-16-light {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-hoss-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-hoss-16);
}

.type-body-16-regular {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-16);
}

.type-body-16-medium {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-16-medium);
}

.type-body-14-regular {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-14);
}


.split-tagline {
  color: var(--color-secondary-ink);
  text-align: center;
}

.split-tagline__accent {
  display: block;
  color: var(--color-primary-orange);
  font-style: italic;
  font-weight: var(--font-weight-medium);
}

.type-split-tagline {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-split-tagline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-split-tagline);
  letter-spacing: var(--letter-spacing-default);
  text-transform: capitalize;
}

@media (prefers-reduced-motion: reduce) {
  [data-smooth-wrapper] {
    overflow: visible;
  }
}


/*
 * Keep image bitmaps out of the first paint until decoding completes. This
 * prevents visible-to-hidden resets when page-specific GSAP timelines install
 * their initial reveal state after the shared layout promise resolves.
 */
html.js main img:not([data-image-decoded="true"]) {
  opacity: 0;
  visibility: hidden;
}

/*
 * Page modules measure after fonts, critical media, and the loader settle. Keep
 * every viewport-motion scope out of paint until those modules have established
 * their GSAP start transforms. Visibility preserves layout and measurements, so
 * this guard prevents flashes without creating a layout shift.
 */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-viewport-motion-ready="true"]) main [data-animation],
  html.js:not([data-viewport-motion-ready="true"]) main [data-component="testimonials"],
  html.js:not([data-viewport-motion-ready="true"]) main [data-component="gallery"],
  html.js:not([data-viewport-motion-ready="true"]) [data-component="site-footer"] {
    visibility: hidden;
  }
}

/* Keep reveal copy out of the first paint while preserving its layout box. */
html.js [data-animation="text-reveal"]:not([data-text-reveal-active="true"]) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.js main img,
  html.js main img:not([data-image-decoded="true"]) {
    opacity: 1;
    visibility: visible;
  }

  html.js [data-animation="text-reveal"] {
    visibility: visible;
  }
}


/*
 * Keep bitmaps stable while their parent sections are transformed by GSAP or
 * ScrollSmoother. This prevents transient back-face repaints without forcing
 * every image onto a permanent GPU layer.
 */
[data-smooth-content] img,
[data-animation] img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}