/* iTrim4U site header (Concept D) with mega menus, and site-wide motion.
   Used on every page: the hand-built homepage and the mirrored WordPress
   pages. Every rule is scoped to .sh / .sh-* classes so it cannot clash
   with the Elementor styles on the inner pages, and so Elementor's global
   rules (links, buttons, lists) cannot leak into the header. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.sh {
  --sh-ink: #0F1A13;
  --sh-deep: #0B140E;
  --sh-line: #1F3326;
  --sh-muted: #C9D6CC;
  --sh-muted-2: #A9B8AD;
  --sh-accent: #82C449;
  --sh-accent-light: #B9E08F;
  --sh-accent-dark: #2F6B1E;
  --sh-cta: #F5A300;
  --sh-cta-hover: #FFB72B;
  --sh-paper: #F3F5F2;
  --sh-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh ul { margin: 0; padding: 0; list-style: none; }
.sh li { margin: 0; padding: 0; }
.sh p { margin: 0; }
.sh a { text-decoration: none; transition: color .18s ease, background-color .18s ease; }
.sh img { max-width: 100%; height: auto; display: block; border: 0; }
.sh :focus-visible { outline: 3px solid var(--sh-cta); outline-offset: 3px; }
.sh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sh .sh-icon { width: 18px; height: 18px; flex: none; }
.sh-wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Button */
.sh .sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 22px; border-radius: 6px;
  background: var(--sh-cta); color: var(--sh-ink);
  font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center;
  transition: background-color .18s ease, transform .18s var(--sh-ease), box-shadow .18s ease;
}
.sh .sh-btn:hover { background: var(--sh-cta-hover); color: var(--sh-ink); box-shadow: 0 6px 18px rgba(245, 163, 0, 0.3); }

/* Dropdowns and mega panels (details/summary: they work without JavaScript) */
.sh .sh-dd { position: relative; }
.sh .sh-dd > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.sh .sh-dd > summary::-webkit-details-marker { display: none; }
.sh .sh-chev { width: 14px; height: 14px; transition: transform .2s var(--sh-ease); }
.sh .sh-dd[open] > summary .sh-chev { transform: rotate(180deg); }
.sh .sh-dd__menu, .sh .sh-mega {
  position: absolute; top: 100%; left: 0; z-index: 60;
  margin-top: 4px; background: #FFFFFF; color: var(--sh-ink); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}
.sh .sh-dd__menu { min-width: 240px; padding: 8px; }
.sh .sh-dd__menu a, .sh .sh-mega__col a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: var(--sh-ink); font-size: 15px; font-weight: 600;
}
.sh .sh-dd__menu a:hover, .sh .sh-mega__col a:hover, .sh .sh-dd__menu a[aria-current], .sh .sh-mega__col a[aria-current] {
  background: #EEF3EA; color: var(--sh-accent-dark);
}

/* Mega panels */
.sh .sh-mega { padding: 28px; }
.sh .sh-mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
.sh .sh-mega__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 12px 10px;
  border-bottom: 2px solid var(--sh-paper);
  color: var(--sh-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.sh .sh-mega__title .sh-icon { width: 18px; height: 18px; color: var(--sh-accent-dark); }
.sh .sh-mega__foot { margin-top: 14px; padding: 14px 12px 0; border-top: 2px solid var(--sh-paper); }
.sh .sh-mega__foot a, .sh .sh-mega__all { color: var(--sh-accent-dark); font-weight: 700; font-size: 15px; }
.sh .sh-mega__foot a:hover, .sh .sh-mega__all:hover { color: var(--sh-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Services panel: three columns, a card, and an area strip, spanning the header */
.sh .sh-nav__mega { position: static; }
.sh .sh-nav__mega > .sh-dd { position: static; }
.sh .sh-mega--services {
  left: 24px; right: 24px; margin-top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px 32px;
}
.sh .sh-mega__card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--sh-ink); color: #FFFFFF; border-radius: 10px;
}
.sh .sh-mega__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.sh .sh-mega__card p { font-size: 16px; line-height: 1.4; font-weight: 700; }
.sh .sh-mega__card .sh-btn { width: 100%; }
.sh .sh-mega__phone { color: var(--sh-accent); font-weight: 800; font-size: 18px; text-align: center; }
.sh .sh-mega__phone:hover { color: var(--sh-accent-light); }
.sh .sh-mega__strip {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding-top: 16px; border-top: 2px solid var(--sh-paper);
}
.sh .sh-mega__strip .sh-mega__title { margin: 0; padding: 0 6px 0 12px; border: 0; }
.sh .sh-mega__strip ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sh .sh-mega__strip a:not(.sh-mega__all) { color: var(--sh-ink); font-size: 15px; font-weight: 600; }
.sh .sh-mega__strip a:not(.sh-mega__all):hover { color: var(--sh-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.sh .sh-mega__alls { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Location panel in the top bar */
.sh .sh-mega--loc { width: min(640px, calc(100vw - 48px)); padding: 22px; }
.sh .sh-mega--loc .sh-mega__col a { padding: 6px 12px; font-size: 14px; }

/* Top bar */
.sh-topbar { position: relative; z-index: 45; background: var(--sh-deep); color: var(--sh-muted); font-size: 14px; }
.sh .sh-topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 12px; padding-top: 2px; padding-bottom: 2px;
}
.sh-topbar > .sh-wrap > a, .sh-topbar .sh-social a, .sh-topbar .sh-dd > summary { color: var(--sh-muted); font-weight: 600; }
.sh-topbar > .sh-wrap > a:hover, .sh-topbar .sh-social a:hover, .sh-topbar .sh-dd > summary:hover { color: #FFFFFF; }
.sh .sh-social { display: flex; align-items: center; gap: 2px; }
.sh .sh-social a { display: inline-flex; padding: 11px; }
.sh .sh-topbar__pay { display: inline-flex; align-items: center; min-height: 44px; }

/* Header: sticks to the top on wide screens, where it is one row */
.sh-header {
  position: relative; z-index: 40; background: var(--sh-ink); color: #FFFFFF;
  border-bottom: 1px solid var(--sh-line); transition: box-shadow .25s ease;
}
.sh .sh-header__inner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; padding-top: 14px; padding-bottom: 14px;
}
.sh .sh-logo { display: inline-flex; }
.sh .sh-logo img { height: 54px; width: auto; }
.sh .sh-toggle { display: none; }
.sh .sh-nav__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px;
  font-size: 15px; font-weight: 600;
}
.sh .sh-nav__list > li > a, .sh .sh-nav__list > li > .sh-dd > summary {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF;
}
/* A thin underline grows from the left on hover and marks the current page. */
.sh .sh-nav__list > li > a::after, .sh .sh-nav__list > li > .sh-dd > summary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: var(--sh-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--sh-ease);
}
.sh .sh-nav__list > li > a:hover::after, .sh .sh-nav__list > li > a[aria-current]::after,
.sh .sh-nav__list > li > .sh-dd > summary:hover::after, .sh .sh-nav__list > li > .sh-dd[open] > summary::after { transform: scaleX(1); }
.sh .sh-nav__list > li > a:hover, .sh .sh-nav__list > li > .sh-dd > summary:hover { color: var(--sh-accent-light); }
.sh .sh-header__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.sh .sh-header__phone { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sh .sh-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--sh-muted-2); }
.sh .sh-header__phone a { font-size: 22px; font-weight: 800; color: var(--sh-accent); letter-spacing: -0.01em; line-height: 1.15; }
.sh .sh-header__phone a:hover { color: var(--sh-accent-light); }

@media (min-width: 1261px) {
  .sh-header { position: sticky; top: 0; }
  .sh-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
}

/* Tablets and phones: the menu sits behind a button (only when JavaScript
   runs; without it the links stay visible), and panels open in place. */
@media (max-width: 1260px) {
  .sh .sh-header__inner { gap: 12px 16px; }
  .sh-header .sh-logo { order: 1; }
  .sh .sh-toggle { order: 2; }
  .sh .sh-header__cta { order: 3; flex-basis: 100%; justify-content: space-between; }
  .sh .sh-nav { order: 4; flex-basis: 100%; }
  .sh .sh-header__phone { align-items: flex-start; }
  .js .sh .sh-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 14px;
    background: transparent; color: #FFFFFF; border: 2px solid #3A5443; border-radius: 6px;
    font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; text-transform: none;
    box-shadow: none;
  }
  .js .sh .sh-toggle:hover, .js .sh .sh-toggle:focus { background: transparent; color: #FFFFFF; border-color: var(--sh-accent); }
  .js .sh .sh-nav { display: none; }
  .js .sh .sh-nav.is-open { display: block; }
  .sh .sh-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .sh .sh-nav__list > li { border-top: 1px solid var(--sh-line); }
  .sh .sh-nav__list > li > a, .sh .sh-nav__list > li > .sh-dd > summary { width: 100%; }
  .sh .sh-nav__list > li > a::after, .sh .sh-nav__list > li > .sh-dd > summary::after { display: none; }
  .sh .sh-nav .sh-dd__menu, .sh .sh-nav .sh-mega {
    position: static; margin: 0 0 12px; box-shadow: none; background: #16261B; color: #FFFFFF;
  }
  .sh .sh-nav .sh-mega { padding: 14px; }
  .sh .sh-mega--services { display: flex; flex-direction: column; gap: 16px; }
  .sh .sh-mega__cols { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .sh .sh-nav .sh-dd__menu a, .sh .sh-nav .sh-mega__col a, .sh .sh-nav .sh-mega__strip a:not(.sh-mega__all) { color: #FFFFFF; }
  .sh .sh-nav .sh-dd__menu a:hover, .sh .sh-nav .sh-mega__col a:hover,
  .sh .sh-nav .sh-dd__menu a[aria-current], .sh .sh-nav .sh-mega__col a[aria-current] { background: #22392A; color: #FFFFFF; }
  .sh .sh-nav .sh-mega__title, .sh .sh-nav .sh-mega__title .sh-icon { color: var(--sh-accent-light); border-color: #22392A; }
  .sh .sh-nav .sh-mega__strip { border-color: #22392A; }
  .sh .sh-nav .sh-mega__all { color: var(--sh-accent-light); }
  .sh .sh-nav .sh-mega__alls { margin-left: 12px; }
  .sh .sh-mega__card { display: none; }
}
@media (max-width: 700px) {
  .sh .sh-mega--loc .sh-mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sh .sh-header__cta .sh-btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .sh-topbar { font-size: 13px; }
  .sh-topbar .sh-wrap { padding-left: 16px; padding-right: 16px; }
  .sh .sh-topbar__inner { gap: 4px 8px; flex-wrap: nowrap; }
  .sh .sh-social a { padding: 11px 8px; }
}

/* Call-to-action band (inner pages; the homepage has its own) */
.sh-cta { background: var(--sh-cta); color: var(--sh-ink); }
.sh .sh-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
.sh .sh-cta__title { flex: 1 1 480px; min-width: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--sh-ink); }
.sh .sh-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sh .sh-btn--dark { background: var(--sh-ink); color: #FFFFFF; min-height: 56px; padding: 16px 28px; font-size: 16px; }
.sh .sh-btn--dark:hover { background: #22392A; color: #FFFFFF; box-shadow: 0 8px 22px rgba(15, 26, 19, 0.25); }
.sh .sh-btn--ghost { background: transparent; border: 2px solid var(--sh-ink); color: var(--sh-ink); min-height: 56px; padding: 16px 28px; font-size: 16px; }
.sh .sh-btn--ghost:hover { background: var(--sh-ink); color: #FFFFFF; box-shadow: none; }

/* Footer */
.sh-footer { background: var(--sh-deep); color: var(--sh-muted); }
.sh-footer a { color: var(--sh-muted); }
.sh-footer a:hover { color: #FFFFFF; }
.sh .sh-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px; padding-top: 72px; padding-bottom: 40px; }
.sh .sh-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.sh .sh-footer__col--brand { gap: 18px; }
.sh .sh-footer__col--brand .sh-logo img { height: 52px; }
.sh-footer address { font-style: normal; line-height: 1.7; margin: 0; }
.sh-footer .sh-footer__phone { color: var(--sh-accent); font-weight: 700; }
.sh-footer .sh-footer__reviews { color: #FFFFFF; font-weight: 700; }
.sh .sh-footer__heading { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; font-weight: 700; }
.sh .sh-footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.sh .sh-footer__bottom { border-top: 1px solid var(--sh-line); }
.sh .sh-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 20px; padding-bottom: 20px; font-size: 14px; }
.sh-footer .sh-footer__bottom a { text-decoration: underline; }
.sh-footer .sh-footer__credit a { color: #FFFFFF; }

/* ---------------------------------------------------------------------
   Motion. Everything below runs only for visitors who have not asked for
   reduced motion. It animates opacity and transform only, so nothing moves
   the page layout.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sh-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes sh-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  .sh .sh-dd[open] > .sh-dd__menu, .sh .sh-dd[open] > .sh-mega { animation: sh-drop .22s var(--sh-ease); }
  .sh .sh-dd[open] .sh-mega__col, .sh .sh-dd[open] .sh-mega__card { animation: sh-fade-up .35s var(--sh-ease) both; }
  .sh .sh-dd[open] .sh-mega__col:nth-child(2) { animation-delay: .04s; }
  .sh .sh-dd[open] .sh-mega__col:nth-child(3) { animation-delay: .08s; }
  .sh .sh-dd[open] .sh-mega__card { animation-delay: .1s; }
  .js .sh .sh-nav.is-open { animation: sh-drop .22s var(--sh-ease); }

  /* Hero entrance, the same on every page: the opening section's content
     rises in sequence once, on load (CSS only, 0.8 s). Homepage hero, the
     first section of each Elementor page and blog post, the Locations list,
     the 404 page and canvas landing pages. */
  @keyframes sh-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
  .hero__inner > *, .itr-links__wide > *, .error404 .site-main > *,
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"]) > .elementor-top-section:first-child .elementor-widget,
  body > [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-element {
    animation: sh-rise .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero__inner > :nth-child(2), .itr-links__wide > :nth-child(2), .error404 .site-main > :nth-child(2),
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"]) > .elementor-top-section:first-child .elementor-widget:nth-child(2),
  body > [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-element:nth-child(2) { animation-delay: .08s; }
  .hero__inner > :nth-child(3), .itr-links__wide > :nth-child(3),
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"]) > .elementor-top-section:first-child .elementor-widget:nth-child(3),
  body > [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-element:nth-child(3) { animation-delay: .16s; }
  .hero__inner > :nth-child(4), .itr-links__wide > :nth-child(4),
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"]) > .elementor-top-section:first-child .elementor-widget:nth-child(4),
  body > [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-element:nth-child(4) { animation-delay: .24s; }
  .hero__inner > :nth-child(n+5), .itr-links__wide > :nth-child(n+5),
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="archive"]) > .elementor-top-section:first-child .elementor-widget:nth-child(n+5),
  body > [data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-element:nth-child(n+5) { animation-delay: .32s; }

  /* Hover: the same lift on buttons and link cards everywhere. */
  .sh .sh-btn:hover { transform: translateY(-2px); }
  .itr-links a { transition: color .18s ease; }

  /* Scroll reveal: site.js adds .sh-rv to content below the first screen
     and .is-in when it scrolls into view. */
  .sh-motion .sh-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--sh-ease, ease), transform .7s cubic-bezier(.2, .7, .2, 1); }
  .sh-motion .sh-rv.is-in { opacity: 1; transform: none; }
}