/* Window Cowboy design layer. Loaded after the site stylesheet and service-updates.css.
   Values follow github.com/elayadesign/ai-design-skills (landing-page-design, Part B):
   Tailwind type scale, the spacing tokens, Tailwind radii, flat backgrounds and one motion curve.
   The brand stays as published: the western display lettering, DM Sans, and the orange, cream and charcoal palette. */
:root {
  --wc-orange: #c4571b; --wc-orange-dark: #a34512; --wc-cream: #f8f5e7; --wc-ink: #171717; --wc-text: #545454; --wc-line: #dfddd8;
  --space-0: 0; --space-25: 2px; --space-50: 4px; --space-75: 8px; --space-100: 12px; --space-200: 16px;
  --space-300: 24px; --space-400: 32px; --space-500: 40px; --space-600: 48px; --space-700: 64px;
  --space-800: 80px; --space-900: 96px;
  --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
  --ease: cubic-bezier(.22, 1, .36, 1); --fast: 300ms; --slow: 500ms;
  --display: Ddchardware, Georgia, sans-serif; --text: "DM Sans", sans-serif;
}

/* Named text styles (B1). Apply these instead of loose size and weight pairs.
   The display face ships in one weight, so heading styles set in it keep that weight. */
.heading-1 { font-size: 60px; line-height: 1; font-weight: 600; }
.heading-2 { font-size: 48px; line-height: 1; font-weight: 600; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
.button-lg { font-size: 18px; line-height: 28px; font-weight: 600; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.button-xsm { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

/* Base */
html { scroll-padding-top: var(--space-900); }
/* Nothing may scroll sideways at any width (B10). */
html, body { overflow-x: clip; }
em, i, cite, address, blockquote { font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; }
/* The longhand keeps inherited nowrap intact; the shorthand would reset it. */
p, li, dd, summary { text-wrap-style: pretty; }
main:focus { outline: none; }

/* Laptop widths: the 1280px container used to sit flush against the screen edge. */
@media (min-width: 992px) and (max-width: 1343px) {
  .regular-container { padding-left: var(--space-400); padding-right: var(--space-400); }
  .regular-container .regular-container { padding-left: 0; padding-right: 0; }
}

/* Hero (B5): heading and subheading share a 680px measure. */
.banner-title h1, .banner-title h2, .banner-title h4, .banner-title p { max-width: 680px; }

/* States (B9) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .w-button:focus-visible { outline: 2px solid var(--wc-orange); outline-offset: 4px; }
[tabindex="-1"]:focus-visible { outline: none; }
.top-bar a:focus-visible, .footer a:focus-visible, .anhs a:focus-visible { outline-color: #fff; }
.button, .button-2, .w-button { transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--slow) var(--ease); }
.button:hover, .button-2:hover, input.w-button:hover { background-color: var(--wc-orange-dark); }
.button:active, .button-2:active, .w-button:active, .wc-faq_question:active { transform: scale(.98); }
.nav-link, .footer a, .lm-link, .link-4 { transition: color var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.nav-link.w--current { text-decoration: underline; text-underline-offset: 8px; }
/* Main buttons (B2): 8px vertical padding. The right side keeps room for the brand arrow. */
.button, .button-2 { padding-top: var(--space-75); padding-bottom: var(--space-75); border-radius: var(--radius-lg); min-height: 44px; }

/* Phone and tablet header: the primary action stays visible beside the menu button (B10). */
.wc-nav-cta { display: none; }
@media (max-width: 991px) {
  .wc-nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-left: auto; margin-right: var(--space-75); padding: var(--space-75) var(--space-100); border-radius: var(--radius-lg); background: var(--wc-orange); color: #fff; font-family: Oswald, sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--fast) var(--ease), transform var(--slow) var(--ease); }
  .wc-nav-cta:hover { background: var(--wc-orange-dark); }
  .wc-nav-cta:active { transform: scale(.98); }
}

/* No single sided card borders (B4): the stat cards carry a full outline. */
.div-block-28 { border: 1px solid var(--wc-orange); border-radius: var(--radius-lg); padding: var(--space-100) var(--space-200); }

/* Forms: inline, specific errors (B9) */
.quote-form-status, .field-error, .preview-form-note { font-family: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; }
.quote-form-status, .field-error { margin: var(--space-50) 0 0; color: #9c2b0e; width: 100%; flex-basis: 100%; grid-column: 1 / -1; }
.quote-form-status:empty { display: none; }
[aria-invalid="true"] { outline: 2px solid #9c2b0e; outline-offset: 2px; }

/* Skip link (B10) */
.skip-link { position: fixed; left: var(--space-200); top: var(--space-200); z-index: 10000; padding: var(--space-75) var(--space-100); border-radius: var(--radius-lg); background: #fff; color: var(--wc-ink); font-family: var(--text); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transform: translateY(-64px); opacity: 0; transition: transform var(--slow) var(--ease), opacity var(--fast) var(--ease); }
.skip-link:focus { transform: none; opacity: 1; }

/* Tagline reveal (B11): large type, each word lights up as it crosses the trigger line. */
.wc-tagline { background: var(--wc-ink); padding: var(--space-900) var(--space-300); }
.wc-tagline_text { max-width: 680px; margin: 0 auto; color: #fff; font-family: var(--display); font-size: 48px; line-height: 1; font-weight: 400; text-align: left; text-wrap: balance; }
.wc-tagline_text .word { opacity: .3; transition: opacity var(--slow) var(--ease); }
.wc-tagline_text .word.is-lit { opacity: 1; }

/* FAQ (A2, A7): plain questions and answers, mirrored in FAQPage structured data. */
.wc-faq { background: #fff; padding: var(--space-800) var(--space-300); }
.wc-faq_layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-700); align-items: start; width: 100%; }
.wc-faq_intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-200); }
.wc-faq_intro .ts-heading { text-align: left; margin: 0; }
.wc-faq_intro p { margin: 0; color: var(--wc-text); font-family: var(--text); }
.wc-faq_intro a { color: var(--wc-orange); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.wc-faq_list { display: flex; flex-direction: column; gap: var(--space-100); }
.wc-faq_item { border: 1px solid var(--wc-line); border-radius: var(--radius-xl); background: var(--wc-cream); overflow: hidden; transition: border-color var(--fast) var(--ease); }
.wc-faq_item:hover, .wc-faq_item[open] { border-color: var(--wc-orange); }
.wc-faq_question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); padding: var(--space-200) var(--space-300); cursor: pointer; list-style: none; color: var(--wc-ink); font-family: var(--text); border-radius: var(--radius-xl); transition: transform var(--slow) var(--ease); }
.wc-faq_question::-webkit-details-marker { display: none; }
.wc-faq_icon { flex: 0 0 20px; color: var(--wc-orange); transition: transform var(--slow) var(--ease); }
.wc-faq_item[open] .wc-faq_icon { transform: rotate(180deg); }
/* The base stylesheet gives .body-3 a white fill; the answer must share the item's cream so the rounded corners stay intact. */
.wc-faq_answer { padding: 0 var(--space-300) var(--space-300); color: var(--wc-text); font-family: var(--text); background: transparent; }
.wc-faq_answer p { margin: 0; max-width: 680px; }

/* Form selects (application and quote forms): one chevron with room to breathe, matching the FAQ icon. */
select.form-dropdown, select.select-field { -webkit-appearance: none; appearance: none; padding: 0 var(--space-600) 0 var(--space-200); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23c4571b' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-200) center; background-size: 16px; cursor: pointer; }
select.form-dropdown:has(option:checked:not([value=""])), select.select-field:has(option:checked:not([value=""])) { color: var(--wc-ink); }
select.form-dropdown:hover, select.select-field:hover { border-color: var(--wc-orange); }

/* Application form rows: three equal columns that fit the container instead of overflowing it. */
@media (min-width: 768px) {
  .team-pg-title-sec .form-container { width: 100%; max-width: 1152px; }
  .team-pg-title-sec ._3-col-box > * { flex: 0 0 calc((100% - 64px) / 3); width: auto; min-width: 0; }
  .team-pg-title-sec ._2-col-box > * { flex: 0 0 calc((100% - 32px) / 2); width: auto; min-width: 0; }
}

/* Scroll reveal (B7): sections rise 32px and fade in once. Only active when site.js has run. */
.js-reveal [data-reveal], .js-reveal .reveal { opacity: 0; transform: translateY(var(--space-400)); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js-reveal [data-reveal].is-visible, .js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 991px) {
  .wc-faq_layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-400); }
  .wc-tagline_text { font-size: 36px; line-height: 40px; }
}
@media (max-width: 767px) {
  .wc-faq { padding: var(--space-600) var(--space-200); }
  .wc-tagline { padding: var(--space-700) var(--space-200); }
  .wc-tagline_text { font-size: 30px; line-height: 36px; }
  .wc-faq_question { padding: var(--space-200); }
  .wc-faq_answer { padding: 0 var(--space-200) var(--space-200); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color !important; scroll-behavior: auto !important; }
  .js-reveal [data-reveal], .js-reveal .reveal { transform: none; }
  .wc-tagline_text .word { opacity: 1; transition: none !important; }
}