/* Hansen Trucking - Clean Warm Redesign.
   Exported from Elementor Kit post 877 on 2026-09-15.
   This is the site design. Put overrides in style.css, which loads after it. */

/* =========================================================
   Hansen Trucking – Clean Warm Redesign (v2.0)
   Mobile-first, fast, minimal, “Seminole stripe” motif
   Paste into Elementor > Site Settings > Custom CSS
   ========================================================= */

:root{
  /* Type */
  --ht-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --ht-max: 1180px;
  --ht-pad: clamp(18px, 3vw, 34px);
  --ht-gap: clamp(14px, 2vw, 22px);
  --ht-radius: 18px;

  /* Warm + trustworthy palette */
  --ht-ink: #121A33;         /* deep navy */
  --ht-ink-2: #2A3556;       /* secondary navy */
  --ht-paper: #FBF6EE;       /* warm cream */
  --ht-white: #FFFFFF;
  --ht-line: rgba(18,26,51,.14);

  /* Seminole-inspired accents */
  --ht-gold: #C7A15A;        /* warm gold */
  --ht-tan:  #E9DDCB;        /* sand */
  --ht-rust: #8F3E2A;        /* subtle rust (sparingly) */

  /* Shadows */
  --ht-shadow-sm: 0 10px 24px rgba(18,26,51,.10);
  --ht-shadow-md: 0 18px 42px rgba(18,26,51,.14);

  /* Type scale */
  --ht-body: clamp(16px, 1.1vw, 17px);
  --ht-h1: clamp(34px, 4.3vw, 54px);
  --ht-h2: clamp(26px, 3.2vw, 40px);
  --ht-h3: clamp(20px, 2.4vw, 28px);
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--ht-font);
  font-size: var(--ht-body);
  line-height: 1.65;
  color: var(--ht-ink);
  background: var(--ht-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--ht-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }
p{ margin: 0 0 1em; }

/* Elementor headings normalize */
h1,h2,h3,h4,h5,h6{
  font-family: var(--ht-font);
  letter-spacing: -0.02em;
  margin: 0 0 .45em;
  color: var(--ht-ink);
}
h1{ font-size: var(--ht-h1); line-height: 1.04; font-weight: 850; }
h2{ font-size: var(--ht-h2); line-height: 1.12; font-weight: 850; }
h3{ font-size: var(--ht-h3); line-height: 1.18; font-weight: 800; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Layout helpers ---------- */
.ht-wrap{ max-width: var(--ht-max); margin: 0 auto; padding: 0 var(--ht-pad); }
.ht-section{ padding: clamp(44px, 6vw, 84px) 0; }
.ht-grid{ display: grid; gap: var(--ht-gap); }
.ht-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){
  .ht-grid--2, .ht-grid--3{ grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.ht-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 850;
  line-height: 1;
  border: 1px solid transparent;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.ht-btn:active{ transform: translateY(1px); }

.ht-btn--primary{
  background: var(--ht-ink);
  color: var(--ht-white);
  border-color: var(--ht-ink);
}
.ht-btn--primary:hover{ filter: brightness(.93); text-decoration: none; }

.ht-btn--secondary{
  background: transparent;
  color: var(--ht-ink);
  border-color: var(--ht-line);
}
.ht-btn--secondary:hover{
  background: rgba(18,26,51,.05);
  text-decoration: none;
}

/* Elementor Button widget compatibility (add class ht-btn--primary/secondary on the widget) */
.elementor-widget-button.ht-btn--primary .elementor-button{
  background: var(--ht-ink) !important;
  color: var(--ht-white) !important;
  border: 1px solid var(--ht-ink) !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
  padding: 12px 18px !important;
}
.elementor-widget-button.ht-btn--secondary .elementor-button{
  background: transparent !important;
  color: var(--ht-ink) !important;
  border: 1px solid var(--ht-line) !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
  padding: 12px 18px !important;
}

/* ---------- Header (Elementor template) ---------- */
.ht-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(251,246,238,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ht-line);
}
.ht-header__inner{
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ht-header__logo img{ height: 40px; width: auto; display:block; }

.ht-header__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ht-header__phone a{
  font-weight: 900;
  color: var(--ht-ink);
  text-decoration: none;
}
.ht-header__phone a:hover{ text-decoration: underline; }

/* Elementor Nav Menu styling (assign class "ht-nav" to the Nav Menu widget) */
.ht-nav .elementor-nav-menu--main .elementor-item{
  color: var(--ht-ink) !important;
  font-weight: 800;
  padding: 10px 12px !important;
  border-radius: 10px;
}
.ht-nav .elementor-nav-menu--main .elementor-item:hover{
  background: rgba(18,26,51,.05);
  text-decoration: none;
}
.ht-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  background: rgba(199,161,90,.18);
}

/* Mobile hamburger visibility */
.ht-nav .elementor-menu-toggle{
  border: 1px solid var(--ht-line) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.65) !important;
}
.ht-nav .elementor-menu-toggle i,
.ht-nav .elementor-menu-toggle svg{
  fill: var(--ht-ink) !important;
  color: var(--ht-ink) !important;
  width: 22px; height: 22px;
}

/* Dropdown panel */
.ht-nav .elementor-nav-menu--dropdown{
  border-radius: 16px;
  border: 1px solid var(--ht-line);
  background: var(--ht-white);
  overflow: hidden;
  box-shadow: var(--ht-shadow-md);
}
.ht-nav .elementor-nav-menu--dropdown a{
  font-weight: 850;
  padding: 14px 16px !important;
}

/* Hide phone on tight widths */
@media (max-width: 980px){
  .ht-header__phone{ display:none; }
}

/* ---------- Hero ---------- */
.ht-hero{
  padding: clamp(34px, 5.2vw, 76px) 0;
  background: radial-gradient(1200px 500px at 20% 0%, rgba(199,161,90,.16), transparent 55%),
              radial-gradient(1000px 520px at 90% 10%, rgba(18,26,51,.10), transparent 60%);
}
.ht-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}
@media (max-width: 900px){
  .ht-hero__grid{ grid-template-columns: 1fr; }
}

.ht-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ht-ink-2);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--ht-line);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ht-hero__title{ margin-bottom: 12px; }
.ht-hero__sub{
  color: rgba(18,26,51,.78);
  max-width: 62ch;
  margin-bottom: 18px;
}
.ht-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.ht-hero__meta{
  font-weight: 700;
  color: rgba(18,26,51,.82);
}
.ht-hero__meta a{ font-weight: 900; }
.ht-dot{ margin: 0 8px; color: rgba(18,26,51,.35); }

.ht-media{
  border-radius: var(--ht-radius);
  overflow: hidden;
  border: 1px solid var(--ht-line);
  box-shadow: var(--ht-shadow-md);
  background: var(--ht-white);
}
.ht-media img{ width: 100%; height: auto; display:block; }
.ht-media--compact{ box-shadow: var(--ht-shadow-sm); }

/* ---------- Seminole stripe motif ---------- */
.ht-stripe{ position: relative; overflow: hidden; }
.ht-stripe::after{
  content:"";
  position:absolute;
  inset: auto -20% 8% -20%;
  height: 150px;
  background:
    linear-gradient(90deg,
      rgba(18,26,51,.00) 0%,
      rgba(18,26,51,.10) 18%,
      rgba(199,161,90,.22) 45%,
      rgba(18,26,51,.10) 68%,
      rgba(18,26,51,.00) 100%);
  border-radius: 999px;
  transform: skewX(-12deg);
  pointer-events: none;
}
.ht-stripe > *{ position: relative; }

/* ---------- Chip bar ---------- */
.ht-chipbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px var(--ht-pad);
  background: rgba(255,255,255,.65);
  border-top: 1px solid var(--ht-line);
  border-bottom: 1px solid var(--ht-line);
}
.ht-chip{
  display: inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ht-line);
  background: var(--ht-white);
  font-weight: 850;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 640px){
  .ht-chipbar{
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ht-chipbar::-webkit-scrollbar{ display:none; }
}

/* ---------- Cards / sections ---------- */
.ht-section__head{
  margin-bottom: 18px;
  max-width: 70ch;
}
.ht-section__head p{ color: rgba(18,26,51,.75); margin: 0; }

.ht-card{
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--ht-shadow-sm);
}
.ht-card__title{ margin: 0 0 8px; }
.ht-card__text{ margin: 0 0 10px; color: rgba(18,26,51,.74); }
.ht-card__link{ font-weight: 900; text-decoration: none; }
.ht-card__link:hover{ text-decoration: underline; }

.ht-callout{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--ht-radius);
  border: 1px solid var(--ht-line);
  background: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ht-callout__sub{
  margin-top: 4px;
  color: rgba(18,26,51,.70);
  font-weight: 750;
}
.ht-callout__sub a{ font-weight: 900; }

.ht-section--tint{
  background: linear-gradient(180deg, rgba(199,161,90,.10), rgba(199,161,90,.00));
  border-top: 1px solid rgba(18,26,51,.06);
  border-bottom: 1px solid rgba(18,26,51,.06);
}

.ht-list{
  margin: 0;
  padding-left: 18px;
}
.ht-list li{ margin: 10px 0; color: rgba(18,26,51,.80); }

.ht-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- CTA blocks ---------- */
.ht-cta{
  background: var(--ht-ink);
  color: var(--ht-white);
  border-radius: calc(var(--ht-radius) + 4px);
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: center;
  box-shadow: var(--ht-shadow-md);
}
.ht-cta h2, .ht-cta p{ color: var(--ht-white); }
.ht-cta p{ margin: 0 0 .6em; opacity: .92; }
.ht-cta__meta a{ color: var(--ht-white); font-weight: 900; text-decoration: none; }
.ht-cta__meta a:hover{ text-decoration: underline; }
.ht-cta__buttons{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
@media (max-width: 900px){
  .ht-cta{ grid-template-columns: 1fr; }
  .ht-cta__buttons{ align-items: flex-start; }
}

/* Make CTA buttons readable on dark */
.ht-cta .ht-btn--primary{ background: var(--ht-gold); border-color: var(--ht-gold); color: var(--ht-ink); }
.ht-cta .ht-btn--primary:hover{ filter: brightness(.95); }
.ht-cta .ht-btn--secondary{ border-color: rgba(255,255,255,.35); color: var(--ht-white); }
.ht-cta .ht-btn--secondary:hover{ background: rgba(255,255,255,.10); }

/* Driver band */
.ht-driverband{
  margin-top: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ht-driverband p{ margin: 0; color: rgba(18,26,51,.72); }

/* ---------- Accessibility focus ---------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{
  outline: 3px solid rgba(199,161,90,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* =========================================================
   HEADER CTA FIX (paste at very bottom of ht-css-working.txt)
   ========================================================= */

/* Make the sticky header feel more premium + readable */
.ht-header{
  background: rgba(251,246,238,.92) !important; /* warmer, slightly more solid */
}

/* Keep header actions tight + aligned */
.ht-header__actions{
  gap: 10px !important;
}

/* Normalize all header buttons (prevents “blob” + wrapping) */
.ht-header__actions .elementor-widget-button .elementor-button{
  min-height: 44px;
  padding: 10px 14px !important; /* overrides the larger 12/18 padding you set globally */
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Force button text to stay on one line */
.ht-header__apply .elementor-button-text,
.ht-header__quote .elementor-button-text{
  white-space: nowrap;
}

/* Give Apply a confident “premium” presence without being huge */
.ht-header__apply .elementor-button{
  box-shadow: 0 10px 26px rgba(18,26,51,.16);
}

/* Secondary should look like a clean outline button */
.ht-header__quote .elementor-button{
  background: rgba(255,255,255,.55) !important;
}

/* Better hover/focus for accessibility */
.ht-header__actions .elementor-button:hover{
  transform: translateY(-1px);
}
.ht-header__actions .elementor-button:active{
  transform: translateY(0px);
}
.ht-header__actions .elementor-button:focus-visible{
  outline: 3px solid rgba(18,26,51,.35);
  outline-offset: 3px;
}
/* =========================================================
   HEADER CTA FIX (paste at very bottom of ht-css-working.txt)
   ========================================================= */

/* Make the sticky header feel more premium + readable */
.ht-header{
  background: rgba(251,246,238,.92) !important; /* warmer, slightly more solid */
}

/* Keep header actions tight + aligned */
.ht-header__actions{
  gap: 10px !important;
}

/* Normalize all header buttons (prevents “blob” + wrapping) */
.ht-header__actions .elementor-widget-button .elementor-button{
  min-height: 44px;
  padding: 10px 14px !important; /* overrides the larger 12/18 padding you set globally */
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Force button text to stay on one line */
.ht-header__apply .elementor-button-text,
.ht-header__quote .elementor-button-text{
  white-space: nowrap;
}

/* Give Apply a confident “premium” presence without being huge */
.ht-header__apply .elementor-button{
  box-shadow: 0 10px 26px rgba(18,26,51,.16);
}

/* Secondary should look like a clean outline button */
.ht-header__quote .elementor-button{
  background: rgba(255,255,255,.55) !important;
}

/* Better hover/focus for accessibility */
.ht-header__actions .elementor-button:hover{
  transform: translateY(-1px);
}
.ht-header__actions .elementor-button:active{
  transform: translateY(0px);
}
.ht-header__actions .elementor-button:focus-visible{
  outline: 3px solid rgba(18,26,51,.35);
  outline-offset: 3px;
}
/* =========================
   HTML HEADER (drop-in)
   ========================= */

.ht-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(251,246,238,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(18,26,51,.14);
}

.ht-header__inner{
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ht-header__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.ht-header__logo{
  height: 40px;
  width: auto;
  display:block;
}

.ht-nav{
  display:flex;
  align-items:center;
  gap: 6px;
}
.ht-nav__link{
  font-weight: 850;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: #121A33;
}
.ht-nav__link:hover{
  background: rgba(18,26,51,.05);
  text-decoration:none;
}

.ht-header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* phone */
.ht-header__phone{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  white-space: nowrap;
  text-decoration:none;
}
.ht-phone__icon{ opacity: .75; }
.ht-phone__text{ color:#121A33; }

/* buttons (safe even if you have global ht-btn) */
.ht-header .ht-btn{
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 900;
}
.ht-header .ht-btn--primary{
  background:#121A33;
  color:#fff;
  border:1px solid #121A33;
  box-shadow: 0 10px 26px rgba(18,26,51,.16);
}
.ht-header .ht-btn--secondary{
  background: rgba(255,255,255,.65);
  color:#121A33;
  border:1px solid rgba(18,26,51,.14);
}

/* mobile toggle */
.ht-menu-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(18,26,51,.14);
  background: rgba(255,255,255,.65);
  padding: 10px;
}
.ht-menu-toggle__bar{
  display:block;
  height: 2px;
  background:#121A33;
  border-radius: 2px;
  margin: 5px 0;
}

/* mobile panel */
.ht-mobile{
  border-top: 1px solid rgba(18,26,51,.14);
  background: rgba(251,246,238,.98);
}
.ht-mobile__inner{
  padding: 14px var(--ht-pad);
  display:grid;
  gap: 10px;
}
.ht-mobile__link{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(18,26,51,.12);
  background: rgba(255,255,255,.65);
  font-weight: 850;
  text-decoration:none;
}
.ht-mobile__link:hover{ text-decoration:none; filter: brightness(.98); }
.ht-mobile__strong{ font-weight: 950; }
.ht-mobile__divider{
  height: 1px;
  background: rgba(18,26,51,.14);
  margin: 6px 0;
}
.ht-mobile__cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ht-mobile__cta .ht-btn{ width: 100%; }

/* responsive behavior */
@media (max-width: 980px){
  .ht-nav{ display:none; }
  .ht-header__phone{ display:none; }
  .ht-header__cta{ display:none; } /* keep header clean on mobile */
  .ht-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* prevent background scroll when menu open */
body.ht-menu-open{ overflow: hidden; }

/* =========================
   HERO TIGHTEN + STRIPE POSITION
   ========================= */

/* tighten hero block so content sits higher */
.ht-hero{
  padding-top: clamp(12px, 4vw, 54px) !important;
  padding-bottom: clamp(24px, 4vw, 52px) !important;
}

/* tighten the text block a bit */
.ht-hero .ht-hero__title{ margin-bottom: 18px !important; }
.ht-hero .ht-hero__sub{ margin-bottom: 14px !important; max-width: 56ch; }

/* if you’re using the stripe pseudo-element version */
.ht-stripe::after{
  bottom: 18% !important;       /* was lower; bring it up */
  height: 130px !important;     /* slightly slimmer */
  opacity: .90 !important;
}

/* keep hero image from looking too low relative to text */
.ht-hero .ht-media{
  margin-top: 4px;
}
/* =========================
   SERVICE CARD HOVER INTERACTIONS
   ========================= */

.ht-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
.ht-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(18,26,51,.16);
  border-color: rgba(199,161,90,.40);
  background: rgba(255,255,255,.92);
}

/* Make the card link feel like an “action” */
.ht-card__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  text-decoration: none;
}
.ht-card__link:hover{ text-decoration: none; }
.ht-card__link::after{
  content: "→";
  transition: transform .18s ease;
}
.ht-card:hover .ht-card__link::after{
  transform: translateX(3px);
}

/* Optional: subtle top accent line (adds “designed” feel) */
.ht-card::before{
  content:"";
  display:block;
  height: 3px;
  border-radius: 999px;
  background: rgba(199,161,90,.00);
  margin-bottom: 12px;
  transition: background .18s ease;
}
.ht-card:hover::before{
  background: rgba(199,161,90,.70);
}
/* =========================
   FOOTER (HT)
   ========================= */

.ht-footer{
  --ft-bg: rgba(18,26,51,.97);
  --ft-ink: rgba(255,255,255,.92);
  --ft-muted: rgba(255,255,255,.72);
  --ft-line: rgba(255,255,255,.14);

  background:
    radial-gradient(900px 420px at 18% 0%, rgba(199,161,90,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 20%, rgba(255,255,255,.06), transparent 60%),
    var(--ft-bg);
  color: var(--ft-ink);
  margin-top: 14px;
  overflow: hidden;
}

/* “Kenworth stripe” accent */
.ht-footer__stripe{
  height: 8px;
  background: linear-gradient(90deg,
    rgba(199,161,90,.95) 0%,
    rgba(199,161,90,.95) 18%,
    rgba(255,255,255,.14) 18%,
    rgba(255,255,255,.14) 68%,
    rgba(199,161,90,.55) 68%,
    rgba(199,161,90,.55) 100%);
}

.ht-footer__top{
  padding: clamp(44px, 5vw, 78px) 0;
  display: grid;
  grid-template-columns: 1.2fr .9fr 1fr;
  gap: clamp(18px, 3vw, 34px);
}

@media (max-width: 980px){
  .ht-footer__top{ grid-template-columns: 1fr; }
}

/* Brand column */
.ht-footer__logo{
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 14px;
  background: transparent !important;
  filter: brightness(1.05);
}
.ht-footer__tagline{
  margin: 0 0 14px;
  max-width: 46ch;
  color: var(--ft-muted);
  line-height: 1.55;
  font-weight: 600;
}

/* Pills */
.ht-footer__trust{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ht-footer__pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
}

/* Titles + links */
.ht-footer__title{
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 900;
}

.ht-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ht-footer a{
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.ht-footer a:hover{
  color: rgba(255,255,255,.98);
  text-decoration: underline;
}

/* Dispatch column */
.ht-footer__phone{
  display: inline-block;
  font-weight: 950;
  font-size: 20px;
  margin-bottom: 6px;
}
.ht-footer__email{
  display: inline-block;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}

.ht-footer__cta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .ht-footer__cta{ grid-template-columns: 1fr; }
}

.ht-footer__cta .ht-btn{
  width: 100%;
  min-height: 46px;
}

/* Make footer primary button pop on dark */
.ht-footer .ht-btn--primary{
  background: rgba(199,161,90,.95);
  border-color: rgba(199,161,90,.95);
  color: #121A33;
}
.ht-footer .ht-btn--primary:hover{ filter: brightness(.96); }

.ht-footer .ht-btn--secondary{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.ht-footer .ht-btn--secondary:hover{
  background: rgba(255,255,255,.10);
}

.ht-footer__meta{
  margin-top: 14px;
  color: rgba(255,255,255,.70);
  font-weight: 650;
}

/* Bottom bar */
.ht-footer__bottom{
  border-top: 1px solid var(--ft-line);
  padding: 16px 0;
  color: rgba(255,255,255,.70);
  font-weight: 650;
  font-size: 14px;
}
.ht-footer__bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
@media (max-width: 700px){
  .ht-footer__bottom-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}
.ht-footer__bottom-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* =========================
   GLOBAL HOVER / FOCUS SYSTEM
   Paste at VERY BOTTOM
   ========================= */

:root{
  /* make sure these exist even if older CSS doesn’t define them */
  --ht-ink: #121A33;
  --ht-gold: #C7A15A;
  --ht-line: rgba(18,26,51,.14);
}

/* ---------- LINKS (default / light backgrounds) ---------- */
a{
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover{
  color: rgba(18,26,51,.86);
}
a:focus-visible{
  outline: 3px solid rgba(199,161,90,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Nav links (header) should feel “button-like” on hover */
.ht-nav__link:hover,
.ht-nav .elementor-item:hover{
  color: var(--ht-ink) !important;
  background: rgba(18,26,51,.06);
  text-decoration: none !important;
}

/* ---------- BUTTONS ---------- */
.ht-btn,
.elementor-button{
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.ht-btn:hover,
.elementor-button:hover{
  transform: translateY(-1px);
}

.ht-btn--primary:hover,
.elementor-button.ht-btn--primary:hover{
  filter: brightness(.96);
  box-shadow: 0 14px 32px rgba(18,26,51,.18);
}

.ht-btn--secondary:hover,
.elementor-button.ht-btn--secondary:hover{
  background: rgba(18,26,51,.04);
  border-color: rgba(18,26,51,.22);
}

/* ---------- FOOTER LINK COLORS (dark background) ---------- */
.ht-footer a{
  color: rgba(255,255,255,.84);
}
.ht-footer a:hover{
  color: rgba(255,255,255,.98);
  text-decoration: underline;
}
.ht-footer a:focus-visible{
  outline: 3px solid rgba(199,161,90,.65);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Footer buttons should “pop” correctly */
.ht-footer .ht-btn--primary:hover{
  filter: brightness(.95);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.ht-footer .ht-btn--secondary:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.34);
}

/* ---------- SERVICE CARD ACTION LINKS ---------- */
.ht-card a:hover{
  text-decoration: none;
}
.ht-card a:hover .ht-card__link,
.ht-card a:hover{
  color: var(--ht-ink);
}

/* =========================
   10% BUTTON POLISH + CONTRAST FIX
   ========================= */

/* Force readable button text (Elementor sometimes inherits a dark color) */
.ht-btn--primary,
.ht-btn--primary *{
  color: #fff !important;
}
.ht-footer .ht-btn--primary,
.ht-footer .ht-btn--primary *{
  color: #121A33 !important; /* footer primary is gold */
}

/* Make button labels crisp */
.ht-btn,
.elementor-button{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Add “premium depth” without looking animated */
.ht-btn--primary,
.elementor-button.ht-btn--primary{
  box-shadow:
    0 18px 38px rgba(18,26,51,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.ht-btn--secondary,
.elementor-button.ht-btn--secondary{
  box-shadow:
    0 10px 24px rgba(18,26,51,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* Better hover: subtle lift + slightly brighter */
.ht-btn:hover,
.elementor-button:hover{
  transform: translateY(-1px);
}
.ht-btn--primary:hover,
.elementor-button.ht-btn--primary:hover{
  filter: brightness(1.02);
  box-shadow:
    0 22px 46px rgba(18,26,51,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.ht-btn--secondary:hover,
.elementor-button.ht-btn--secondary:hover{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,26,51,.22);
}
/* =========================
   10% HEADER LOGO POLISH
   ========================= */

/* Slightly more breathing room in header */
.ht-header__inner{
  min-height: 82px !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* If logo is an image widget in the header */
.ht-header .elementor-widget-image img,
.ht-header img.custom-logo{
  height: 44px !important;
  width: auto !important;
  max-width: 260px;
  background: transparent !important;
  display: block;
  object-fit: contain;
  /* “printed” look: subtle depth */
  filter: drop-shadow(0 10px 14px rgba(18,26,51,.10));
}

/* Add a soft “badge” behind logo ONLY if you want it */
.ht-header__brand,
.ht-header a:has(img.custom-logo),
.ht-header a:has(.elementor-widget-image img){
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(18,26,51,.10);
}

/* On hover, barely change — keeps it classy */
.ht-header__brand:hover,
.ht-header a:has(img.custom-logo):hover{
  background: rgba(255,255,255,.68);
  text-decoration: none;
}
/* =========================
   10% FOOTER LOGO POLISH
   ========================= */

.ht-footer__logo{
  filter:
    drop-shadow(0 18px 26px rgba(0,0,0,.35))
    brightness(1.06)
    contrast(1.05);
  opacity: .96;
}

/* Tighten footer top spacing slightly so it feels designed */
.ht-footer__top{
  padding-top: clamp(38px, 4.6vw, 68px) !important;
  padding-bottom: clamp(34px, 4.6vw, 64px) !important;
}
:root{
  --ht-primary: #121A33;
  --ht-accent: #C7A15A;
}

.ht-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(18,26,51,.18);
}
/* Contact form styling (scoped) */
.ht-form .elementor-field-group,
.ht-form .elementor-form-fields-wrapper{
  gap: 12px;
}

.ht-form input[type="text"],
.ht-form input[type="email"],
.ht-form input[type="tel"],
.ht-form select,
.ht-form textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(18,26,51,.16);
  background: rgba(255,255,255,.78);
  padding: 12px 14px;
  font-weight: 650;
  color: var(--ht-ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ht-form textarea{ min-height: 130px; resize: vertical; }

.ht-form input:focus,
.ht-form select:focus,
.ht-form textarea:focus{
  outline: none;
  border-color: rgba(199,161,90,.55);
  box-shadow: 0 0 0 4px rgba(199,161,90,.20);
  background: #fff;
}

/* Make the submit button match the system */
.ht-form .elementor-button{
  background: var(--ht-ink) !important;
  border-color: var(--ht-ink) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
}
/* =========================
   Color blocks (works inside one HTML widget)
   ========================= */
.ht-bg{ position: relative; overflow: hidden; }
.ht-bg > .ht-wrap{ position: relative; z-index: 2; }

.ht-bg--hero{
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(199,161,90,.22), transparent 55%),
    radial-gradient(1000px 600px at 85% 10%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(16,24,40,0.04), rgba(16,24,40,0.00));
}
.ht-bg--paper{
  background: linear-gradient(180deg, rgba(251,247,240,.65), rgba(255,255,255,1));
}
.ht-bg--tint{
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(199,161,90,.18), transparent 62%),
    linear-gradient(180deg, rgba(247,240,227,1), rgba(255,255,255,1));
}
.ht-bg--ink{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(199,161,90,.18), transparent 60%),
    linear-gradient(180deg, #101828, #0B1220);
  color: #fff;
}
.ht-bg--ink h1,
.ht-bg--ink h2,
.ht-bg--ink h3,
.ht-bg--ink p{ color:#fff; }

/* Client code badge */
.ht-badge--code{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(18,26,51,.12);
  box-shadow:0 12px 28px rgba(18,26,51,.10);
  font-weight: 850;
}

/* Pay table */
.ht-pay{ padding:18px; }
.ht-pay__row{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(18,26,51,.10);
}
.ht-pay__row strong{ font-weight: 900; }
.ht-pay__note{ margin-top:10px; font-size:.92rem; opacity:.8; }
/* =========================
   HTML Form styling (scoped to .ht-form)
   ========================= */
.ht-form__grid{ display: grid; gap: 12px; margin-top: 14px; }
.ht-form__row{ display: grid; gap: 12px; }
.ht-form__row--2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .ht-form__row--2{ grid-template-columns: 1fr; } }

.ht-field label{
  display:block;
  font-weight: 850;
  font-size: 14px;
  margin: 0 0 6px;
  color: rgba(18,26,51,.92);
}

.ht-field input,
.ht-field select,
.ht-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(18,26,51,.16);
  background: rgba(255,255,255,.82);
  padding: 12px 14px;
  font-weight: 650;
  color: var(--ht-ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ht-field textarea{ min-height: 130px; resize: vertical; }

.ht-field input:focus,
.ht-field select:focus,
.ht-field textarea:focus{
  outline: none;
  border-color: rgba(199,161,90,.55);
  box-shadow: 0 0 0 4px rgba(199,161,90,.20);
  background: #fff;
}

.ht-form__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.ht-form__fineprint{
  margin: 8px 0 0;
  font-size: .92rem;
  opacity: .82;
}
/* Contact “Copy/Paste Template” box */
.ht-copybox{
  border: 1px solid rgba(18,26,51,.14);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: auto;
}
.ht-pre{
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(18,26,51,.86);
}
.ht-quote-card{ height: 100%; }
/* Contact CTA band (dark, matches the site CTA system) */
.ht-contact-cta{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(199,161,90,.18), transparent 60%),
    linear-gradient(180deg, #101828, #0B1220);
  color: #fff;
}
.ht-contact-cta h1,
.ht-contact-cta h2,
.ht-contact-cta h3,
.ht-contact-cta p{ color:#fff; }

.ht-contact-cta a{ color: inherit; }
/* Copy/paste template box */
.ht-copybox{
  border: 1px solid rgba(18,26,51,.14);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: auto;
}
.ht-pre{
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(18,26,51,.86);
}
.ht-quote-card{ height: 100%; }

/* Dark CTA band */
.ht-contact-cta{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(199,161,90,.18), transparent 60%),
    linear-gradient(180deg, #101828, #0B1220);
  color: #fff;
}
.ht-contact-cta h1,
.ht-contact-cta h2,
.ht-contact-cta h3,
.ht-contact-cta p{ color:#fff; }
.ht-contact-cta a{ color: inherit; }

/* =========================================
   ABOUT: Home-style color rhythm (light touch)
   Add these classes to About sections:
   ht-about--paper / ht-about--tint / ht-about--ink
   ========================================= */

.ht-about--paper{
  background: linear-gradient(180deg, rgba(251,247,240,.60), rgba(255,255,255,1));
}

.ht-about--tint{
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(199,161,90,.16), transparent 62%),
    linear-gradient(180deg, rgba(247,240,227,1), rgba(255,255,255,1));
}

.ht-about--ink{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(199,161,90,.18), transparent 60%),
    linear-gradient(180deg, #101828, #0B1220);
  color: #fff;
}
.ht-about--ink h1,
.ht-about--ink h2,
.ht-about--ink h3,
.ht-about--ink p{ color:#fff; }
.ht-about--ink a{ color: inherit; }

/* Optional: subtle top/bottom separators so blocks feel designed */
.ht-about--paper,
.ht-about--tint{
  border-top: 1px solid rgba(16,24,40,.06);
  border-bottom: 1px solid rgba(16,24,40,.06);
}
/* =========================================
   ABOUT PAGE: add Home-style color rhythm
   Scoped to /about-us/ only
   ========================================= */
body.page-about-us .ht-section{
  position: relative;
}

/* Light “paper” block behind the history area */
body.page-about-us .ht-about-story,
body.page-about-us .ht-about-history,
body.page-about-us .ht-about-main{
  background: linear-gradient(180deg, rgba(251,247,240,.62), rgba(255,255,255,1));
}

/* Warm tinted block behind the timeline / “Keep on Truckin’” */
body.page-about-us .ht-about-timeline,
body.page-about-us .ht-about-milestones{
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(199,161,90,.16), transparent 62%),
    linear-gradient(180deg, rgba(247,240,227,1), rgba(255,255,255,1));
}

/* Soft paper block behind services */
body.page-about-us .ht-about-services{
  background: linear-gradient(180deg, rgba(251,247,240,.55), rgba(255,255,255,1));
}

/* Dark CTA band at the bottom (if present) */
body.page-about-us .ht-about-cta{
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(199,161,90,.18), transparent 60%),
    linear-gradient(180deg, #101828, #0B1220);
  color: #fff;
}
body.page-about-us .ht-about-cta h1,
body.page-about-us .ht-about-cta h2,
body.page-about-us .ht-about-cta h3,
body.page-about-us .ht-about-cta p{ color:#fff; }
body.page-about-us .ht-about-cta a{ color: inherit; }

/* Optional: subtle separators so blocks feel intentional */
body.page-about-us .ht-about-story,
body.page-about-us .ht-about-timeline,
body.page-about-us .ht-about-services{
  border-top: 1px solid rgba(16,24,40,.06);
  border-bottom: 1px solid rgba(16,24,40,.06);
}