.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 a{font-family:"DM Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   TRNK Hero Crossfade Slider (v4) — 3 slides, no skipping, clean crossfade
   Requires:
   - Parent container class: trnk-hero
   - Slides wrapper class:  trnk-hero__slides
   - Slide classes:
       trnk-hero__slide trnk-hero__slide--1
       trnk-hero__slide trnk-hero__slide--2
       trnk-hero__slide trnk-hero__slide--3

   IMPORTANT:
   - Do NOT set a background image on the parent .trnk-hero
   - Set each slide container's Background Image in Elementor
   ========================================================= */

/* HERO WRAPPER */
.trnk-hero{
  position: relative;
  overflow: hidden;

  /* fallback behind slides */
  background: #111;

  /* hero height */
  min-height: 84vh;

  /* gradient controls */
  --trnk-grad-opacity: 0.62;  /* 0.00–0.85 */
  --trnk-grad-stop: 62%;      /* how high the fade rises */

  /* timing */
  --trnk-cycle: 27s;          /* total loop for 3 slides */
  --trnk-step:  calc(var(--trnk-cycle) / 3);
  --trnk-step2: calc(var(--trnk-step) * 2);

  /* preload so Slide 1 is visible immediately on load */
  --trnk-preload: 1.3s;       /* ~ just past fade-in */
}

/* Mobile height tweak */
@media (max-width: 767px){
  .trnk-hero{ min-height: 72vh; }
}

/* Slide stack wrapper (fills hero) */
.trnk-hero__slides{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Each slide layer */
.trnk-hero__slide{
  position: absolute;
  inset: 0;

  /* Elementor background behaves like a hero */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  opacity: 0;
  will-change: opacity;

  /* This is where the ease-in-out goes */
  animation: trnkHeroFade var(--trnk-cycle) ease-in-out infinite;
  animation-fill-mode: both;
}

/* Force a stable stacking order so no slide gets “masked forever” */
.trnk-hero__slide--1{ z-index: 3; }
.trnk-hero__slide--2{ z-index: 2; }
.trnk-hero__slide--3{ z-index: 1; }

/* Stagger (shift all by preload so Slide 1 is already “on” at load) */
.trnk-hero__slide--1{ animation-delay: calc(0s - var(--trnk-preload)); }
.trnk-hero__slide--2{ animation-delay: calc(var(--trnk-step) - var(--trnk-preload)); }
.trnk-hero__slide--3{ animation-delay: calc(var(--trnk-step2) - var(--trnk-preload)); }

/* Keyframes:
   - fade in quickly
   - HOLD fully visible
   - crossfade ONLY at the boundary (no long double-image)
*/
@keyframes trnkHeroFade{
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* fade in */
  33%  { opacity: 1; }   /* hold (full visibility) */
  37%  { opacity: 0; }   /* fade out (overlaps next fade-in) */
  100% { opacity: 0; }
}

/* Bottom gradient overlay for legibility */
.trnk-hero::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,var(--trnk-grad-opacity)) 0%,
    rgba(0,0,0,0) var(--trnk-grad-stop)
  );
}

/* Keep hero content above slides + overlay */
.trnk-hero > *:not(.trnk-hero__slides){
  position: relative;
  z-index: 2;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .trnk-hero__slide{ animation: none; opacity: 0; }
  .trnk-hero__slide--1{ opacity: 1; }
}

/* =========================================================
   TRNK Hero Rotating Messages — synced to the 3-slide cycle
   FIXED for multi-line messages on mobile (no button overlap)
   Requires:
   - Text Editor widget CSS class: trnk-hero_msg
   - HTML inside the widget:
     <div class="trnk-msgs">
       <span class="trnk-msg trnk-msg--1">...</span>
       <span class="trnk-msg trnk-msg--2">...</span>
       <span class="trnk-msg trnk-msg--3">...</span>
     </div>
   ========================================================= */

/* Optional: keep lines from running too wide on desktop */
.trnk-hero_msg{
  max-width: 52ch;
}

/* Key change: stack messages with GRID so the container’s height
   becomes the height of the tallest message (even when hidden). */
.trnk-hero_msg .trnk-msgs{
  display: grid;
}

.trnk-hero_msg .trnk-msg{
  grid-area: 1 / 1;           /* all messages occupy the same grid cell */
  opacity: 0;
  will-change: opacity;
  animation: trnkMsgFade var(--trnk-cycle) ease-in-out infinite;
  animation-fill-mode: both;
}

/* Match your slide delays (and preload offset) */
.trnk-hero_msg .trnk-msg--1{ animation-delay: calc(0s - var(--trnk-preload)); }
.trnk-hero_msg .trnk-msg--2{ animation-delay: calc(var(--trnk-step) - var(--trnk-preload)); }
.trnk-hero_msg .trnk-msg--3{ animation-delay: calc(var(--trnk-step2) - var(--trnk-preload)); }

/* Same fade rhythm as the slides */
@keyframes trnkMsgFade{
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  33%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Space between message + button (fluid so it behaves on mobile too) */
.trnk-hero .trnk-hero_msg{
  margin-bottom: clamp(18px, 4vw, 44px);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .trnk-hero_msg .trnk-msg{ animation: none; opacity: 0; }
  .trnk-hero_msg .trnk-msg--1{ opacity: 1; }
}

/* Space between hero message + button */
.trnk-hero .trnk-hero_msg{
  margin-bottom: 50px;
}

@media (max-width: 767px){
  .trnk-hero .trnk-hero_msg{ margin-bottom: 34px; }
}

@media (max-width: 767px) {
  .timeline-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 60px;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .timeline-step {
    flex: 0 0 auto;
    min-width: 240px;
    scroll-snap-align: start;
  }

  .timeline-line {
    display: none;
  }
}  /* closes @media */

.timeline-container {
  position: relative;
  max-width: 1140px;
  margin: 10px auto;
  padding: 60px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

/* LINE FIX — put it through center of dots */
.timeline-line {
  position: absolute;
  top: 70px; /* Adjust this to center-align with dots */
  left: 0;
  right: 0;
  height: 4px;
  background-color: #ccc;
  z-index: 1;
}

.timeline-step {
  position: relative;
  z-index: 2;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* DOT ANIMATION FIXED */
.timeline-dot {
  width: 24px;
  height: 24px;
  background-color: #ff4d00;
  border-radius: 50%;
  margin-bottom: 12px;
  opacity: 0;
  animation: dotFade 0.6s forwards;
}

/* STAGGERED ANIMATION DELAY */
.timeline-step:nth-child(2) .timeline-dot { animation-delay: 1.2s; }
.timeline-step:nth-child(3) .timeline-dot { animation-delay: 1.8s; }
.timeline-step:nth-child(4) .timeline-dot { animation-delay: 2.4s; }
.timeline-step:nth-child(5) .timeline-dot { animation-delay: 3.0s; }

.timeline-label {
  margin-top: 8px;
}

.timeline-label strong {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #222;
  margin-bottom: 4px;
}

.timeline-sub {
  font-size: 14px;
  color: #666;
}

@keyframes dotFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .timeline-container,
  .timeline-desktop,
  .timeline-step,
  .timeline-line,
  .timeline-dot {
    display: none !important;
  }
}

/* Turnkey Legal: +24px list indent + consistent spacing */
.trnk-legal ul,
.trnk-legal ol{
  padding-left: calc(1.2em + 24px); /* base + extra indent */
  margin-top: 0;
  margin-bottom: 0;
}

.trnk-legal li{
  margin-bottom: 0.35em; /* spacing between bullets */
}

/* Prevent extra gap before lists (p bottom margin + ul top margin stacking) */
.trnk-legal p + ul,
.trnk-legal p + ol{
  margin-top: 0;
}

/* Keep a consistent gap after lists before the next paragraph */
.trnk-legal ul + p,
.trnk-legal ol + p{
  margin-top: 0.75em;
}

/* Add spacing after lists when the next element is a heading */
.trnk-legal ul + h1,
.trnk-legal ul + h2,
.trnk-legal ul + h3,
.trnk-legal ul + h4,
.trnk-legal ul + h5,
.trnk-legal ul + h6,
.trnk-legal ol + h1,
.trnk-legal ol + h2,
.trnk-legal ol + h3,
.trnk-legal ol + h4,
.trnk-legal ol + h5,
.trnk-legal ol + h6{
  margin-top: 0.9em; /* adjust to taste */
}

/* =========================================
   TRNK Legal — FINAL OVERRIDES (place last)
   Keeps: +24px indent
   Fixes: uneven gaps around lists + headings
========================================= */

.trnk-legal ul,
.trnk-legal ol{
  padding-left: calc(1.2em + 24px);
  margin: 6px 0 22px; /* consistent space above + below */
}

.trnk-legal li{
  margin-bottom: 0.35em;
}
.trnk-legal li:last-child{
  margin-bottom: 0;
}

/* If a paragraph sits right above a list, avoid a "double gap" */
.trnk-legal p + ul,
.trnk-legal p + ol{
  margin-top: 6px;
}

/* Ensure a clean gap when a heading follows a list */
.trnk-legal ul + h1,
.trnk-legal ul + h2,
.trnk-legal ul + h3,
.trnk-legal ul + h4,
.trnk-legal ul + h5,
.trnk-legal ul + h6,
.trnk-legal ol + h1,
.trnk-legal ol + h2,
.trnk-legal ol + h3,
.trnk-legal ol + h4,
.trnk-legal ol + h5,
.trnk-legal ol + h6{
  margin-top: 22px;
}

/* =========================================
   TRNK Legal — FINAL RHYTHM (paste LAST)
   Goal: consistent spacing between H5, paragraphs, and lists
========================================= */

/* Headings: slightly tighter than Elementor defaults */
.trnk-legal h1,
.trnk-legal h2,
.trnk-legal h3,
.trnk-legal h4,
.trnk-legal h5,
.trnk-legal h6{
  margin: 22px 0 10px;   /* top / bottom */
}

/* Paragraphs: consistent and slightly tighter */
.trnk-legal p{
  margin: 0 0 14px;      /* bottom space after paragraph */
}

/* Lists: keep +24px indent + consistent spacing above/below */
.trnk-legal ul,
.trnk-legal ol{
  padding-left: calc(1.2em + 24px);
  margin: 8px 0 18px;    /* top / bottom */
}

/* Bullet line spacing (inside the list only) */
.trnk-legal li{
  margin: 0 0 0.32em;
}
.trnk-legal li:last-child{
  margin-bottom: 0;      /* prevents extra “tail” inside list */
}

.elementor-kit-6 .trnk-h2{
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;      /* Roboto Light */
  font-size: 36px;
  line-height: 1.15;
  color: #54595F;
  text-align: left;
  margin: 0;
}

/* =========================================================
   Responsive Logo Scaling (Elementor) — works for IMG *and* inline SVG
   Classes:
   - "site-brand-logo" on the Site Logo widget
   - "site-brand-lockup" on the logo wrapper container (optional)
   ========================================================= */

/* Desktop default */
.site-brand-logo{
  --logo-w: clamp(275px, 18vw, 360px);
}

/* Targets both Elementor Site Logo output types */
.site-brand-logo img,
.site-brand-logo svg{
  width: var(--logo-w) !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto !important; /* kill top/bottom margin too */
}

/* Lockup padding controls header height the most */
.site-brand-lockup{
  --lockup-pad: clamp(8px, 1.4vw, 18px);
  padding-top: var(--lockup-pad) !important;
  padding-bottom: var(--lockup-pad) !important;
}

/* Laptop / Tablet */
@media (max-width: 1024px){
  .site-brand-logo{ --logo-w: clamp(240px, 20vw, 360px); }
  .site-brand-lockup{ --lockup-pad: clamp(6px, 1.6vw, 14px); }
}

/* Mobile */
@media (max-width: 767px){
  .site-brand-logo{ --logo-w: clamp(200px, 52vw, 220px); }
  .site-brand-lockup{ --lockup-pad: clamp(6px, 2.4vw, 12px); }
}/* End custom CSS */