/* ==========================================================================
   Cat Compact Waco landing page
   Used with the v3_Bare skin. Every rule is scoped under .ccw so DNN's
   default.css and the rest of holtcat.com cannot bleed in (or out).
   Fonts: Adobe Fonts kit ryh2ade (Univers Next Pro family)
   ========================================================================== */

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

.ccw {
  --ccw-yellow: #ffcd11;
  --ccw-yellow-light: #fce751;
  --ccw-black: #000;
  --ccw-white: #fff;
  --ccw-gray-bg: #f1f1f1;
  --ccw-gray-text: #4a4a4a;
  --ccw-gray-mid: #767676;
  --ccw-gray-line: #b5b5b5;
  --ccw-gray-hover: #e4e4e4;

  --ccw-font-body: univers-next-pro, "Helvetica Neue", Arial, sans-serif;
  --ccw-font-ext: univers-next-pro-extended, "Helvetica Neue", Arial, sans-serif;
  --ccw-font-cond: univers-next-pro-condensed, "Arial Narrow", Arial, sans-serif;

  --ccw-pad-x: 100px;
  --ccw-pad-y: 100px;
  --ccw-gap: 50px;
  --ccw-header-h: 80px;

  background: var(--ccw-gray-bg);
  color: var(--ccw-black);
  font-family: var(--ccw-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---------- Reset inside the page ---------- */
.ccw *,
.ccw *::before,
.ccw *::after { box-sizing: border-box; }

.ccw h1, .ccw h2, .ccw h3, .ccw h4, .ccw h5, .ccw h6,
.ccw p, .ccw ul, .ccw li, .ccw figure {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.ccw ul { list-style: none; }
.ccw img, .ccw video, .ccw iframe { display: block; max-width: 100%; border: 0; }
.ccw img { height: auto; }
.ccw a { color: inherit; font-weight: 700; text-decoration: none; }
.ccw sup { font-size: 0.5em; line-height: 0; position: relative; top: -0.8em; vertical-align: baseline; }
.ccw [id] { scroll-margin-top: var(--ccw-header-h); }

/* ---------- Typography ---------- */
.ccw .ccw-h1,
.ccw .ccw-h2,
.ccw .ccw-h3{
  font-family: var(--ccw-font-ext);
  font-weight: 200;
  text-transform: uppercase;
}
.ccw .ccw-h1{ font-size: 64px; line-height: 0.95; letter-spacing: 0.5px; }
.ccw .ccw-h2{ font-size: 45px; line-height: 0.98; }
.ccw .ccw-h3{ font-size: 26px; line-height: 1.02; letter-spacing: 1px; }

.ccw .ccw-sub{
  font-family: var(--ccw-font-cond);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ccw .ccw-yellow{ color: var(--ccw-yellow); }

/* ---------- Buttons ---------- */
.ccw .ccw-btns { display: flex; flex-wrap: wrap; gap: 15px; }

.ccw .ccw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 9999px;
  font-family: var(--ccw-font-cond);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.ccw .ccw-btn--yellow { background: var(--ccw-yellow); color: var(--ccw-black); }
.ccw .ccw-btn--yellow:hover { background: var(--ccw-black); color: var(--ccw-yellow); }

.ccw .ccw-btn--white { background: var(--ccw-white); color: var(--ccw-black); }
.ccw .ccw-btn--white:hover { background: var(--ccw-gray-hover); color: var(--ccw-black); }

.ccw .ccw-btn--black { background: var(--ccw-black); color: var(--ccw-white); }
.ccw .ccw-btn--black:hover { background: var(--ccw-white); color: var(--ccw-black); }

.ccw .ccw-btn--outline { background: transparent; border-color: var(--ccw-black); color: var(--ccw-black); }
.ccw .ccw-btn--outline:hover { background: var(--ccw-black); color: var(--ccw-white); }

.ccw .ccw-btn:focus-visible { outline: 3px solid var(--ccw-black); outline-offset: 3px; }

/* ---------- Section shell ---------- */
.ccw .ccw-section { position: relative; }
.ccw .ccw-container{ position: relative; padding: var(--ccw-pad-y) var(--ccw-pad-x); }
.ccw .ccw-center{ display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }

/* ---------- Header ---------- */
.ccw .ccw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ccw-white);
  box-shadow: 5px 20px 75px 0 rgba(0, 0, 0, 0.15);
}
.ccw .ccw-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 var(--ccw-pad-x);
}
.ccw .ccw-header__logo{
  display: block;
  width: 100px;
  margin: 15px 0 -30px;
  flex-shrink: 0;
}
.ccw .ccw-header__logo img{ width: 100px; }
.ccw .ccw-header__right{ display: flex; align-items: center; gap: 30px; }
.ccw .ccw-header__info{
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 15px;
  line-height: 1.2;
}
.ccw .ccw-header__info strong{ font-weight: 600; }
.ccw .ccw-header__info a{ font-weight: 400; }
.ccw .ccw-header__info a:hover{ text-decoration: underline; }
.ccw .ccw-dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ccw-yellow);
}

/* ---------- Hero ---------- */
.ccw .ccw-hero {
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000 url("/Portals/0/Cat%20Compact/hero-poster.jpg") center / cover no-repeat;
}
.ccw .ccw-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.ccw .ccw-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}
.ccw .ccw-hero__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 var(--ccw-pad-x) var(--ccw-pad-y);
  color: var(--ccw-white);
}
.ccw .ccw-hero__kicker{
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--ccw-font-cond);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ccw .ccw-hero__kicker::before{
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 27'%3E%3Cpath fill='%23ffcd11' d='M10 0C4.5 0 0 4.4 0 9.9 0 16.8 8.4 25.6 9 26.3c.5.6 1.5.6 2 0 .6-.7 9-9.5 9-16.4C20 4.4 15.5 0 10 0zm0 13.6a3.7 3.7 0 1 1 0-7.4 3.7 3.7 0 0 1 0 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ccw .ccw-hero .ccw-sub{ color: var(--ccw-white); }
.ccw .ccw-hero__text{ max-width: 742px; font-size: 18px; }
.ccw .ccw-hero .ccw-btns{ margin-top: 10px; }
.ccw .ccw-hero__wedge{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 440px;
}

/* ---------- Jump nav ---------- */
.ccw .ccw-jumpnav { background: var(--ccw-black); }
.ccw .ccw-jumpnav__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 30px var(--ccw-pad-x);
}
.ccw .ccw-jumpnav a {
  color: var(--ccw-white);
  font-family: var(--ccw-font-cond);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s ease-in-out;
}
.ccw .ccw-jumpnav a:hover { color: var(--ccw-yellow); }
.ccw .ccw-jumpnav__sep{
  display: inline-block;
  width: 2px;
  height: 24px;
  margin: 0 14px;
  background: var(--ccw-yellow);
}

/* ---------- Two column layout ---------- */
.ccw .ccw-cols {
  display: flex;
  gap: var(--ccw-gap);
}
.ccw .ccw-cols > *{ min-width: 0; }

/* ---------- Everything in one place ---------- */
.ccw .ccw-intro { background: var(--ccw-white); }
.ccw .ccw-intro .ccw-cols > *{ flex: 1 1 50%; }
.ccw .ccw-intro__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
.ccw .ccw-intro__media{ display: flex; flex-direction: column; justify-content: center; }
.ccw .ccw-checks{ display: flex; flex-direction: column; gap: 18px; }
.ccw .ccw-checks li{
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.8;
}
.ccw .ccw-checks li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%23ffcd11'/%3E%3Cpath d='M7.5 13.4l3.6 3.6 7.4-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Specials ---------- */
.ccw .ccw-specials {
  background: var(--ccw-yellow) url("/Portals/0/Cat%20Compact/aerial-blanchard.jpg") center / cover no-repeat fixed;
}
.ccw .ccw-specials::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ccw-yellow);
  opacity: 0.9;
}
.ccw .ccw-cards{
  display: flex;
  gap: 30px;
  width: 100%;
  text-align: left;
}
.ccw .ccw-card{
  flex: 1 1 33.33%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  padding: 30px;
  border-radius: 10px;
  background: var(--ccw-white);
}
.ccw .ccw-card__badge{
  padding: 10px 15px;
  border-radius: 5px;
  background: var(--ccw-yellow);
  font-family: var(--ccw-font-cond);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.ccw .ccw-card__tag{
  padding: 10px;
  border: 1px dashed var(--ccw-gray-line);
  border-radius: 100px;
  color: var(--ccw-gray-mid);
  font-family: var(--ccw-font-cond);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}
.ccw .ccw-fineprint{ font-size: 14px; font-style: italic; }

/* ---------- Support ---------- */
.ccw .ccw-support { background: var(--ccw-white); }
.ccw .ccw-support .ccw-lead{ margin-bottom: 30px; }
.ccw .ccw-feature{
  flex: 1 1 33.33%;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.ccw .ccw-feature img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: 10px 10px 0 0;
}
.ccw .ccw-feature__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  border-top: 5px solid var(--ccw-yellow);
  border-radius: 0 0 10px 10px;
  background: var(--ccw-gray-bg);
}
.ccw .ccw-feature__body p{ color: var(--ccw-gray-text); }

/* ---------- Team ---------- */
.ccw .ccw-team { background: radial-gradient(var(--ccw-yellow-light) 0%, var(--ccw-yellow) 100%); }
.ccw .ccw-team .ccw-container{ padding-right: 0; padding-bottom: 0; }
.ccw .ccw-team__copy{
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 100px;
}
.ccw .ccw-team__media{
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ---------- Visit ---------- */
.ccw .ccw-visit { background: var(--ccw-gray-bg); }
.ccw .ccw-visit .ccw-cols > *{ flex: 1 1 50%; }
.ccw .ccw-visit__card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 50px;
  border-radius: 10px;
  background: var(--ccw-white);
}
.ccw .ccw-visit__card hr{
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--ccw-black);
}
.ccw .ccw-visit__store{
  font-family: var(--ccw-font-cond);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ccw .ccw-visit__details a{ font-weight: 400; }
.ccw .ccw-visit__details a:hover{ text-decoration: underline; }
.ccw .ccw-visit__map{
  min-height: 450px;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e3df;
}
.ccw .ccw-visit__map iframe{ width: 100%; height: 100%; min-height: 450px; }

/* ---------- Contact form ---------- */
.ccw .ccw-contact { background: var(--ccw-yellow); }
.ccw .ccw-form{
  width: 100%;
  max-width: 1000px;
  text-align: left;
}

/* ---------- Cognito Forms (seamless embed, form 69) ----------
   Cognito drives its look from CSS variables on .cog-69, so the theme is
   set there. html body raises specificity above Cognito's own .cog-69 rule
   and also reaches the dropdown list, which Cognito can move to <body>.
   The few things the variables don't cover use :root:root... selectors,
   because Cognito's protected CSS uses five :root repeats. */
html body .cog-69 {
  --font-family: univers-next-pro, "Helvetica Neue", Arial, sans-serif;
  --font-size: 16px;
  --font-weight: 400;
  --line-height: 1.5;
  --color: #000;
  --gutter: 20px;
  --primary: #000;
  --primary-reverse: #fff;
  --highlight: #000;
  --highlight-reverse: #fff;
  --negative: #a50000;

  --form__background-color: transparent;
  --page__background-color: #fff;
  --form__margins: 0px;
  --form__margins--responsive: 0px;
  --form__width: 1000px;

  --label__color: #000;
  --label__font-family: univers-next-pro-condensed, "Arial Narrow", Arial, sans-serif;
  --label__font-size: 14px;
  --label__font-weight: 600;

  --input__background-color: #fff;
  --input__border-width: 0px;
  --input__border-color: transparent;
  --input__border-radius: 3px;
  --input__box-shadow: none;
  --input__color: #000;
  --input__padding-h: 12px;
  --input__padding-v: 12px;
  --input-focus__box-shadow: 0 0 0 2px #000;
  --placeholder__color: #767676;

  --button-primary__background-color: #fff;
  --button-primary__border-color: #fff;
  --button-primary__border-width: 2px;
  --button-primary__border-radius: 9999px;
  --button-primary__color: #000;
  --button-primary__font-family: univers-next-pro-condensed, "Arial Narrow", Arial, sans-serif;
  --button-primary__font-size: 16px;
  --button-primary__font-weight: 700;
}

/* Placeholders carry the field names, like the source design.
   Labels stay in the markup for screen readers. */
:root:root:root:root:root:root .ccw .cog-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:root:root:root:root:root:root .ccw .cog-form .el-textarea__inner {
  min-height: 130px !important;
}

:root:root:root:root:root:root .ccw .cog-page__navigation {
  justify-content: center;
}

:root:root:root:root:root:root .ccw .cog-button--primary {
  min-width: 0;
  padding: 14px 24px;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
:root:root:root:root:root:root .ccw .cog-button--primary:hover,
:root:root:root:root:root:root .ccw .cog-button--primary:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* ---------- Footer ---------- */
.ccw .ccw-footer { background: var(--ccw-black); color: var(--ccw-white); }
.ccw .ccw-footer .ccw-container{ display: flex; flex-direction: column; gap: 30px; }
.ccw .ccw-footer__top{ display: flex; justify-content: space-between; gap: var(--ccw-gap); }
.ccw .ccw-footer__brand{ display: flex; align-items: center; gap: 50px; }
.ccw .ccw-footer__brand > img{ width: 120px; flex-shrink: 0; }
.ccw .ccw-footer__about{ display: flex; flex-direction: column; gap: 10px; }
.ccw .ccw-footer__links{ display: flex; flex-wrap: wrap; gap: 10px 30px; }
.ccw .ccw-footer__links a {
  color: var(--ccw-white);
  font-family: var(--ccw-font-cond);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ccw .ccw-footer__links a:hover { color: var(--ccw-yellow); }
.ccw .ccw-footer__logos{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
}
.ccw .ccw-footer__logos img{ width: 150px; }
.ccw .ccw-footer hr{
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ccw-gray-text);
}
.ccw .ccw-footer__legal{
  color: var(--ccw-gray-line);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1119px) {
  .ccw { --ccw-pad-x: 50px; }

  .ccw .ccw-header__inner{ padding-bottom: 15px; }
  .ccw .ccw-header__logo{ margin-bottom: 0; }
  .ccw .ccw-header__info{ flex-direction: column; align-items: flex-start; gap: 5px; }
  .ccw .ccw-header__info .ccw-dot{ display: none; }

  .ccw .ccw-hero__wedge{ width: 250px; }

  .ccw .ccw-intro .ccw-cols,
  .ccw .ccw-team .ccw-cols,
  .ccw .ccw-visit .ccw-cols,
  .ccw .ccw-cards{ flex-direction: column; }

  .ccw .ccw-team .ccw-container{ padding-right: var(--ccw-pad-x); }
  .ccw .ccw-team__copy{ align-items: center; padding-bottom: 0; text-align: center; }

  .ccw .ccw-visit__map,
  .ccw .ccw-visit__map iframe{ height: 500px; }
}

@media (max-width: 1023px) {
  .ccw .ccw-h1{ font-size: 48px; }
  .ccw .ccw-hero__wedge{ width: 150px; }
  .ccw .ccw-cards{ gap: 20px; }
  .ccw .ccw-features{ flex-direction: column; }
  .ccw .ccw-footer__top{ flex-direction: column; }
  .ccw .ccw-footer__logos{ align-items: flex-start; }
}

@media (max-width: 767px) {
  .ccw { --ccw-pad-x: 30px; --ccw-pad-y: 50px; --ccw-gap: 30px; }

  .ccw .ccw-h1{ font-size: 40px; }
  .ccw .ccw-h2{ font-size: 30px; }
  .ccw .ccw-h3{ font-size: 24px; }
  .ccw .ccw-card__badge{ font-size: 28px; }

  .ccw .ccw-header__inner{ padding-top: 15px; }
  .ccw .ccw-header__logo{ margin: 0 0 -50px; }
  .ccw .ccw-header__info{ display: none; }

  .ccw .ccw-hero{ height: 800px; min-height: 0; }
  .ccw .ccw-hero__wedge{ display: none; }

  .ccw .ccw-jumpnav__inner{ padding-left: 15px; padding-right: 15px; gap: 1px; }
  .ccw .ccw-jumpnav__sep{ margin: 0 8px; }

  .ccw .ccw-team__media{ align-items: center; }

  .ccw .ccw-visit__card{ padding: 30px; }

  .ccw .ccw-footer__brand{ flex-direction: column; align-items: flex-start; gap: 30px; }
  .ccw .ccw-footer__links{ flex-direction: column; }
}

@media (max-width: 479px) {
  .ccw .ccw-jumpnav{ display: none; }
  .ccw .ccw-support .ccw-lead{ margin-bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccw .ccw-hero__video{ display: none; }
  .ccw .ccw-btn { transition: none; }
}

/* iOS ignores fixed backgrounds and scales them badly */
@media (hover: none) {
  .ccw .ccw-specials{ background-attachment: scroll; }
}