/*
* Janitech design system.
* Colours and type come from Elementor Site Settings via --e-global-* variables.
* The only literal values here are geometry from the approved design
* (radii, circle sizes, gaps) and neutral photo-shade tints.
*/
:root {
--jt-radius-sm: 16px;
--jt-radius-md: 18px;
--jt-radius-lg: 20px;
--jt-radius-xl: 22px;
--jt-shadow-card: 0 18px 45px rgba(0, 0, 0, .10);
--jt-shadow-sm: 0 8px 24px rgba(0, 0, 0, .08);
--jt-shade-warm: 20 15 10; /* photo-card overlays */
--jt-shade-umber: 20 16 13; /* bottom fades */
--jt-shade-page: 33 29 26; /* page hero scrim */
--jt-ease: cubic-bezier(.2, .65, .25, 1);
}
.jt-accent { font-style: italic; font-weight: 800; color: var(--e-global-color-primary); }
/* ---------- Accent Heading ---------- */
.jt-heading__title { margin: 0; margin-inline: var(--jt-mi-start, 0) var(--jt-mi-end, 0); text-wrap: balance; }
.jt-heading__lede { margin-bottom: 0; margin-inline: var(--jt-mi-start, 0) var(--jt-mi-end, 0); text-wrap: pretty; }
.jt-heading--break-yes .jt-accent { display: block; }
/* ---------- Eyebrow ---------- */
.jt-eyebrow { display: inline-block; border-radius: 999px; line-height: 1; white-space: nowrap; }
.elementor-widget-jt-eyebrow.jt-eyebrow--seam {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
z-index: 3; width: max-content; max-width: calc(100% - 32px); margin: 0;
}
/* ---------- Pill Button ---------- */
.elementor-widget-jt-button { display: flex; justify-content: var(--jt-button-align, flex-start); }
.elementor-widget-jt-button .jt-button {
--_bg: transparent; --_color: var(--e-global-color-jt_white); --_border: transparent;
--_icon-bg: transparent; --_icon-color: currentColor;
display: inline-flex; align-items: center; justify-content: var(--jt-button-justify, center);
width: var(--jt-button-width, auto); gap: 14px;
padding: 8px 8px 8px 26px; border-radius: 999px; border: 0 solid var(--jt-button-border, var(--_border));
background: var(--jt-button-bg, var(--_bg)); color: var(--jt-button-color, var(--_color));
line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.elementor-widget-jt-button .jt-button:hover, .elementor-widget-jt-button .jt-button:focus-visible {
background: var(--jt-button-bg-hover, var(--_bg-hover, var(--jt-button-bg, var(--_bg))));
color: var(--jt-button-color-hover, var(--_color-hover, var(--jt-button-color, var(--_color))));
border-color: var(--jt-button-border-hover, var(--_border-hover, var(--jt-button-border, var(--_border))));
}
.jt-button:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; }
.jt-button__icon {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--jt-button-icon-bg, var(--_icon-bg)); color: var(--jt-button-icon-color, var(--_icon-color));
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.elementor-widget-jt-button .jt-button:hover .jt-button__icon {
background: var(--jt-button-icon-bg-hover, var(--_icon-bg-hover, var(--jt-button-icon-bg, var(--_icon-bg))));
color: var(--jt-button-icon-color-hover, var(--_icon-color-hover, var(--jt-button-icon-color, var(--_icon-color))));
}
.jt-button__glyph { width: 18px; height: 18px; stroke-width: 2.4; }
.jt-button--red .jt-button {
--_bg: var(--e-global-color-primary); --_bg-hover: var(--e-global-color-jt_red_dark);
--_color: var(--e-global-color-jt_white);
--_icon-bg: var(--e-global-color-jt_white); --_icon-color: var(--e-global-color-primary);
}
.jt-button--gold .jt-button {
--_bg: var(--e-global-color-accent); --_bg-hover: var(--e-global-color-jt_gold_soft);
--_color: var(--e-global-color-jt_badge_text);
--_icon-bg: var(--e-global-color-jt_badge_text); --_icon-color: var(--e-global-color-accent);
gap: 12px;
}
.jt-button--gold .jt-button__icon { flex-basis: 32px; width: 32px; height: 32px; }
.jt-button--gold .jt-button__glyph { width: 14px; height: 14px; }
.jt-button--ghost .jt-button {
--_bg: var(--e-global-color-jt_white); --_bg-hover: var(--e-global-color-primary);
--_color: var(--e-global-color-primary); --_color-hover: var(--e-global-color-jt_white);
--_border: var(--e-global-color-primary);
--_icon-bg: var(--e-global-color-primary); --_icon-color: var(--e-global-color-jt_white);
--_icon-bg-hover: var(--e-global-color-jt_white); --_icon-color-hover: var(--e-global-color-primary);
border-width: 1.5px;
}
.jt-button--neutral .jt-button {
--_color: var(--e-global-color-secondary); --_border: var(--e-global-color-jt_line);
--_border-hover: var(--e-global-color-primary); --_color-hover: var(--e-global-color-primary);
gap: 10px; padding: 14px 26px; border-width: 1.5px;
}
.jt-button--outline .jt-button {
--_color: var(--e-global-color-jt_white); --_border: rgba(255, 255, 255, .55);
--_border-hover: var(--e-global-color-jt_white);
gap: 10px; padding: 14px 26px; border-width: 1px;
}
.jt-button--neutral .jt-button__icon, .jt-button--outline .jt-button__icon { flex-basis: auto; width: auto; height: auto; }
.jt-button--round .jt-button {
--_bg: var(--e-global-color-primary); --_bg-hover: var(--e-global-color-jt_red_dark); --_color: var(--e-global-color-jt_white);
width: 46px; height: 46px; padding: 0; justify-content: center;
}
.jt-button--round .jt-button__icon { flex-basis: auto; width: auto; height: auto; background: none; color: inherit; }
.jt-button--round .jt-button__glyph { width: 20px; height: 20px; }
/* ---------- Pills ---------- */
.jt-pills { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.jt-pills > li { margin: 0; }
.jt-pill { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; line-height: 1.3; }
.jt-pills--chip .jt-pill { border: 1px solid transparent; border-radius: 999px; padding: 8px 14px; }
.jt-pill__dot { flex: none; border-radius: 50%; }
.jt-pills--dot- .jt-pill__dot { display: none; }
a.jt-pill:hover { color: var(--e-global-color-primary); }
/* ---------- Scrims (container extension) ---------- */
.jt-scrim { position: relative; isolation: isolate; }
.jt-scrim::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; }
.jt-scrim--hero-dark::after {
background: linear-gradient(90deg, var(--e-global-color-jt_scrim) 0%, var(--e-global-color-jt_scrim) 34%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 72%, transparent) 52%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 15%, transparent) 100%);
}
.jt-scrim--hero-dark-stats::after {
background:
linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 30%),
linear-gradient(90deg, var(--e-global-color-jt_scrim) 0%, var(--e-global-color-jt_scrim) 34%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 72%, transparent) 52%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 15%, transparent) 100%);
}
.jt-scrim--hero-dark-wide::after {
background: linear-gradient(90deg, var(--e-global-color-jt_scrim) 0%, var(--e-global-color-jt_scrim) 36%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 72%, transparent) 54%,
color-mix(in srgb, var(--e-global-color-jt_scrim) 15%, transparent) 100%);
}
.jt-scrim--hero-page::after {
background: linear-gradient(90deg, var(--e-global-color-jt_ink_800) 0%, var(--e-global-color-jt_ink_800) 40%,
rgb(var(--jt-shade-page) / .72) 58%, rgb(var(--jt-shade-page) / .12) 100%);
}
.jt-scrim--photo-card::after {
background: linear-gradient(180deg, rgb(var(--jt-shade-warm) / .15) 0%, rgb(var(--jt-shade-warm) / .35) 45%, rgb(var(--jt-shade-warm) / .82) 100%);
}
.jt-scrim--photo-card-deep::after {
background: linear-gradient(180deg, rgb(var(--jt-shade-umber) / .15) 0%, rgb(var(--jt-shade-umber) / .35) 45%, rgb(var(--jt-shade-umber) / .88) 100%);
}
.jt-scrim--fade-bottom::after {
background: linear-gradient(180deg, rgb(var(--jt-shade-umber) / 0) var(--jt-scrim-start, 40%), rgb(var(--jt-shade-umber) / var(--jt-scrim-bottom, .9)) 100%);
}
.jt-scrim--tint::after {
background: linear-gradient(180deg, rgb(var(--jt-shade-warm) / var(--jt-scrim-top, .25)), rgb(var(--jt-shade-warm) / var(--jt-scrim-bottom, .7)));
}
.jt-scrim--::after { display: none; }
/* Content sits above the scrim. Containers use Elementor's --z-index variable so a per-element z-index still wins. */
.jt-scrim > .e-con, .jt-scrim > .e-con-inner > .e-con { --z-index: 1; }
.jt-scrim > .elementor-widget:not(.elementor-absolute):not(.jt-eyebrow--seam),
.jt-scrim > .e-con-inner > .elementor-widget:not(.elementor-absolute):not(.jt-eyebrow--seam) { position: relative; z-index: 1; }
/* Light sweep on page heroes */
.jt-shine-yes { overflow: hidden; }
.jt-shine-yes::before {
content: ""; position: absolute; top: -20%; bottom: -20%; left: 44%; width: 17%; z-index: 0; pointer-events: none;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 100%);
animation: jt-shine 6.5s ease-in-out infinite;
}
@keyframes jt-shine { 0% { transform: translateX(-120%); opacity: 0; } 20% { opacity: 1; } 60%, 100% { transform: translateX(420%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.jt-shine-yes::before { animation: none; display: none; }
.jt-button, .jt-button__icon { transition: none; }
}
/* ---------- Native Form: Janitech pill style ---------- */
.jt-form--pill .elementor-field-group .elementor-field-textual { min-height: 46px; line-height: 1; }
.jt-form--pill .elementor-field-group textarea.elementor-field-textual { border-radius: var(--jt-radius-xl) !important; line-height: 1.5; min-height: 110px; }
.jt-form .elementor-field::placeholder { color: var(--jt-placeholder, var(--e-global-color-jt_muted)); opacity: 1; }
.jt-form .elementor-field-type-select .elementor-select-wrapper::before { right: 22px; font-size: 13px; color: var(--jt-placeholder, var(--e-global-color-jt_muted)); }
.jt-form .elementor-field-type-select select { color: var(--jt-placeholder, var(--e-global-color-jt_muted)); }
.jt-form .elementor-button { line-height: 1; gap: 14px; }
.jt-form .elementor-button-content-wrapper { align-items: center; gap: 14px; }
.jt-form .elementor-button-icon {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px;
border-radius: 50%; margin: 0 !important; background: var(--jt-form-icon-bg); color: var(--jt-form-icon-color);
}
.jt-form .elementor-button .elementor-button-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.jt-form .elementor-button .elementor-button-icon svg * { fill: none; stroke: currentColor; }
.jt-form .elementor-select-wrapper .select-caret-down-wrapper { color: var(--jt-placeholder, var(--e-global-color-jt_muted)); inset-inline-end: 22px; }
.jt-form .elementor-select-wrapper .select-caret-down-wrapper svg { fill: currentColor; width: 11px; }
.jt-form .elementor-message { font-size: 14.4px; margin-top: 10px; }
/* Flex children may shrink below their content width (long headings wrap instead of overflowing). */
.e-con.e-child { min-width: 0; }
.jt-form-hug-yes .elementor-field-type-submit { flex: 0 0 auto; width: auto; max-width: 100%; }
.jt-form-hug-yes .elementor-field-type-submit .elementor-button { width: auto; flex: 0 0 auto; }
/* Text Editor: paragraphs are spaced by their container, not by trailing margins. */
.jt-text p:last-child, .jt-text ul:last-child, .jt-text ol:last-child { margin-bottom: 0; }
.jt-text p { margin-top: 0; }
/* ---------- Logo ---------- */
.jt-logo { --jt-logo-scale: 1; display: inline-flex; flex-direction: column; align-items: center; gap: calc(3px * var(--jt-logo-scale)); color: var(--e-global-color-primary); text-decoration: none; line-height: 1; }
.jt-logo:hover { color: var(--e-global-color-primary); }
.jt-logo__mark { display: inline-flex; flex-direction: column; gap: calc(3px * var(--jt-logo-scale)); }
.jt-logo__name { font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: calc(30.4px * var(--jt-logo-scale)); font-weight: 800; font-style: italic; letter-spacing: .02em; line-height: .9; }
.jt-logo__rule { display: block; height: calc(4px * var(--jt-logo-scale)); border-radius: 2px; background: currentColor; }
.jt-logo__est { font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: calc(12.5px * var(--jt-logo-scale)); font-weight: 600; font-style: italic; letter-spacing: .35em; padding-left: .35em; }
/* ---------- Statistic ---------- */
.jt-stat { display: flex; flex-direction: column; }
.jt-stat--band .jt-stat { gap: 6px; }
.jt-stat__visual { height: 40px; display: flex; align-items: flex-start; gap: 4px; color: var(--jt-stat-visual, var(--e-global-color-accent)); }
.jt-stat__img { width: 36px; height: auto; max-height: 36px; object-fit: contain; }
.jt-stat__stars { display: inline-flex; gap: 4px; }
.jt-stat__star { width: 20px; height: 20px; fill: currentColor; }
.jt-stat__number { white-space: nowrap; }
.jt-stat__unit { font-size: .42em; font-weight: 600; letter-spacing: .02em; vertical-align: .2em; }
.jt-stat__label { margin-top: var(--jt-stat-label-gap, 0); }
.jt-stat--tile .jt-stat__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jt-stat--tile .jt-stat__label { margin-top: var(--jt-stat-label-gap, 18px); }
.jt-stat__circle { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--jt-stat-circle, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); }
.jt-stat__circle svg { width: 20px; height: 20px; stroke-width: 2.4; }
.jt-stat__circle img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
/* ---------- Service cards ---------- */
.jt-services { display: flex; flex-direction: column; gap: var(--jt-gap, 22px); }
.jt-services__row { display: grid; gap: var(--jt-gap, 22px); grid-template-columns: repeat(var(--jt-cols, 3), minmax(0, 1fr)); }
.jt-service-card {
position: relative; isolation: isolate; overflow: hidden; border-radius: var(--jt-radius-lg);
min-height: var(--jt-card-h, 290px); padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--e-global-color-jt_white);
}
.jt-service-card--wide { min-height: var(--jt-wide-h, 230px); }
.jt-service-card__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; transition: transform .6s var(--jt-ease); }
.jt-service-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--jt-shade-warm) / .15) 0%, rgb(var(--jt-shade-warm) / .35) 45%, rgb(var(--jt-shade-warm) / .82) 100%); }
.jt-service-card:hover .jt-service-card__bg { transform: scale(1.04); }
.jt-service-card__icon { width: 42px; height: 42px; margin-bottom: 14px; }
.jt-service-card__icon img { width: 42px; height: 42px; object-fit: contain; filter: brightness(0) invert(1); }
.jt-service-card__title { margin: 0; max-width: 80%; color: var(--e-global-color-jt_white); line-height: 1.15; }
.jt-service-card__desc { display: block; margin: 12px 0 0; max-width: 74%; font-size: 14.7px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.jt-service-card.is-open .jt-service-card__desc { display: block; }
.jt-service-card__toggle {
position: absolute; right: 22px; bottom: 22px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
display: grid; place-items: center; cursor: pointer; background: var(--jt-toggle, var(--e-global-color-primary)); color: var(--e-global-color-jt_white);
transition: background-color .2s ease;
}
.jt-service-card__toggle:hover, .jt-service-card__toggle:focus-visible { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); }
.jt-service-card__chevron { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .3s ease; }
.jt-service-card.is-open .jt-service-card__chevron { transform: rotate(180deg); }
/* ---------- Process steps (photo accordion) ---------- */
.jt-steps { display: flex; gap: var(--jt-gap, 18px); align-items: stretch; }
.jt-step {
position: relative; isolation: isolate; overflow: hidden; border-radius: var(--jt-radius-xl); min-height: var(--jt-step-h, 340px);
flex: 0 0 var(--jt-step-w, 150px); color: var(--e-global-color-jt_white); cursor: pointer; transition: flex-basis .45s var(--jt-ease), flex-grow .45s var(--jt-ease);
}
.jt-step.is-active { flex: 1 1 auto; cursor: default; }
.jt-step__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; }
.jt-step::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--jt-shade-warm) / .25), rgb(var(--jt-shade-warm) / .7)); }
.jt-step__icon { position: absolute; top: 44%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); transition: top .35s var(--jt-ease), left .35s var(--jt-ease), transform .35s var(--jt-ease); }
.jt-step.is-active .jt-step__icon { top: 26px; left: 26px; transform: none; }
/* The step pictogram is white line art laid straight on the photograph. The card's scrim is
bottom-weighted (.25 at the top, .82 at the foot) because it exists to protect the title, and
the icon sits at the top where the scrim is lightest — so over a pale wall or a white table the
strokes measured as low as 1.13:1, under the 3:1 that SC 1.4.11 asks of a meaningful graphic.
On a collapsed card the icon is the only thing identifying the step, so it has to hold up on
any photograph. A drop shadow gives each stroke its own dark edge without touching the
photograph or the Figma treatment. */
.jt-step__icon img {
width: 44px; height: 44px; object-fit: contain;
filter: drop-shadow( 0 1px 2px rgb(20 15 10 / .85) ) drop-shadow( 0 0 6px rgb(20 15 10 / .55) );
}
.jt-step__select { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.jt-step.is-active .jt-step__select { display: none; }
.jt-step__body { position: absolute; left: 26px; right: 26px; bottom: 26px; opacity: 0; visibility: hidden; transition: opacity .3s ease .15s; }
.jt-step.is-active .jt-step__body { opacity: 1; visibility: visible; }
.jt-step__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--e-global-color-jt_white); }
.jt-step__desc { margin: 8px 0 0; max-width: 60%; font-size: 14.7px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.jt-step__next {
position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
display: none; place-items: center; cursor: pointer; background: var(--jt-toggle, var(--e-global-color-primary)); color: var(--e-global-color-jt_white);
}
.jt-step.is-active .jt-step__next { display: grid; }
.jt-step__next:hover, .jt-step__next:focus-visible { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); }
.jt-step__chevron { width: 20px; height: 20px; stroke-width: 2.4; }
/* ---------- Selectable cards ---------- */
.jt-selectable { display: grid; gap: 26px; }
.jt-selectable.has-photo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
.jt-selectable__media { border-radius: var(--jt-radius-lg); overflow: hidden; min-height: 100%; }
.jt-selectable__photo { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.jt-selectable__grid { display: grid; grid-template-columns: repeat(var(--jt-cols, 2), minmax(0, 1fr)); gap: 18px; align-content: start; }
.jt-select-card {
display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 20px 22px; border-radius: var(--jt-radius-sm);
border: 1px solid transparent; background: var(--jt-card-bg, var(--e-global-color-jt_gray)); cursor: pointer; font: inherit; color: inherit;
transition: background-color .2s ease, border-color .2s ease;
}
.jt-select-card:hover { border-color: var(--jt-card-active, var(--e-global-color-accent)); }
.jt-select-card.is-active { background: var(--jt-card-active, var(--e-global-color-accent)); border-color: var(--jt-card-active, var(--e-global-color-accent)); }
.jt-select-card:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.jt-select-card__icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
.jt-select-card__title { display: block; }
.jt-select-card__desc { display: block; }
/* ---------- FAQ with answer panel ---------- */
.jt-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: stretch; }
.jt-faq__questions { display: flex; flex-direction: column; gap: 16px; }
.jt-faq__question {
display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; cursor: pointer;
border: 0; border-radius: 999px; padding: 14px 14px 14px 26px; background: var(--e-global-color-jt_white); color: var(--jt-q-color, var(--e-global-color-secondary));
box-shadow: var(--jt-shadow-sm); transition: background-color .2s ease, color .2s ease; font-family: inherit;
}
.jt-faq__question:hover { color: var(--jt-q-active, var(--e-global-color-primary)); }
.jt-faq__question.is-active { background: var(--jt-q-active, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); }
.jt-faq__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--jt-q-active, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); transition: background-color .2s ease; }
.jt-faq__question.is-active .jt-faq__icon { background: rgba(255, 255, 255, .2); }
.jt-faq__chevron { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .25s ease; }
.jt-faq__question.is-active .jt-faq__chevron { transform: rotate(90deg); }
.jt-faq__panel { display: flex; gap: 22px; align-items: center; padding: 14px; border-radius: var(--jt-radius-lg); border: 1px solid var(--jt-panel-border, var(--e-global-color-primary)); background: var(--e-global-color-jt_white); }
.jt-faq__media { flex: 0 0 210px; align-self: stretch; border-radius: 14px; overflow: hidden; }
.jt-faq__photo { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.jt-faq__answers { flex: 1 1 auto; padding-right: 14px; }
.jt-faq__answer p { margin: 0 0 .8em; }
.jt-faq__answer p:last-child { margin-bottom: 0; }
/* ---------- Category tabs ---------- */
.jt-tabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.jt-tab {
padding: 9px 16px; border-radius: 999px; border: 1px solid var(--e-global-color-jt_line); background: var(--e-global-color-jt_white);
color: var(--e-global-color-secondary); cursor: pointer; line-height: 1; white-space: nowrap; transition: color .2s ease, border-color .2s ease;
}
.jt-tab:hover, .jt-tab.is-active { color: var(--jt-tab-active, var(--e-global-color-primary)); border-color: var(--jt-tab-active, var(--e-global-color-primary)); }
.jt-tabs__heading { margin: 0 0 12px; }
.jt-tabs__copy { margin: 0; }
.jt-tabs-photo { position: relative; isolation: isolate; overflow: hidden; height: 100%; min-height: 360px; border-radius: var(--jt-radius-lg); display: flex; align-items: flex-end; padding: 30px; color: var(--e-global-color-jt_white); }
.jt-tabs-photo__bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; }
.jt-tabs-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--jt-shade-warm) / .05), rgb(var(--jt-shade-warm) / .8)); }
.jt-tabs-photo__item[hidden] { display: none; }
.jt-tabs-photo__item { position: static; }
.jt-tabs__photo-title { font-size: 28.8px; font-weight: 700; line-height: 1.15; color: var(--e-global-color-jt_white); }
.jt-tabs__photo-caption { margin: 10px 0 0; color: rgba(255, 255, 255, .9); }
.elementor-widget-jt-tabs.jt-tabs--photo { align-self: stretch; }
.elementor-widget-jt-tabs.jt-tabs--photo > .jt-tabs-photo { height: 100%; }
/* ---------- Carousel arrows ---------- */
.jt-carousel-nav { display: flex; gap: 12px; }
.jt-carousel-nav__btn {
width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
background: var(--jt-toggle, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); transition: background-color .2s ease;
}
.jt-carousel-nav__btn:hover, .jt-carousel-nav__btn:focus-visible { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); }
.jt-carousel-nav__btn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.jt-caret-circle.jt-form .elementor-select-wrapper .select-caret-down-wrapper {
inset-inline-end: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
background: var(--e-global-color-primary); color: var(--e-global-color-jt_white); transform: translateY(-50%);
}
.jt-caret-circle.jt-form .elementor-select-wrapper .select-caret-down-wrapper svg { width: 12px; fill: currentColor; }
.jt-form .elementor-field-type-submit .elementor-button { justify-content: center; }
/* ---------- Layout baselines ---------- */
.e-con > .elementor-widget, .e-con > .e-con-inner > .elementor-widget { min-width: 0; }
.e-con.jt-fill-height { top: 0; bottom: 0; height: 100%; }
.jt-stat--band .jt-stat__img { filter: brightness(0) invert(1); opacity: .9; }
.jt-select-card { white-space: normal; }
.jt-selectable__media { position: relative; min-height: 320px; height: 100%; }
.jt-selectable__media .jt-selectable__photo { position: absolute; inset: 0; }
.jt-faq__media { position: relative; min-height: 220px; }
.jt-faq__media .jt-faq__photo { position: absolute; inset: 0; }
/* ---------- Interactive elements: neutralise the theme's global button styles ---------- */
.elementor-element :is(.jt-select-card, .jt-faq__question, .jt-tab, .jt-service-card__toggle, .jt-step__select, .jt-step__next, .jt-carousel-nav__btn) {
font-family: inherit; text-transform: none; letter-spacing: inherit; line-height: inherit; font-weight: inherit; text-decoration: none;
}
.elementor-element .jt-select-card { color: inherit; border-radius: var(--jt-radius-sm); padding: 20px 22px; }
.elementor-element .jt-select-card:is(:hover, :focus) { background: var(--jt-card-bg, var(--e-global-color-jt_gray)); color: inherit; }
.elementor-element .jt-select-card.is-active:is(:hover, :focus) { background: var(--jt-card-active, var(--e-global-color-accent)); }
.elementor-element .jt-faq__question { font-weight: 600; font-size: inherit; padding: 14px 14px 14px 26px; }
.elementor-element .jt-faq__question:is(:hover, :focus) { background: var(--e-global-color-jt_white); color: var(--jt-q-active, var(--e-global-color-primary)); }
.elementor-element .jt-faq__question.is-active:is(:hover, :focus) { background: var(--jt-q-active, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); }
.elementor-element .jt-tab { padding: 9px 16px; border-radius: 999px; }
.elementor-element .jt-tab:is(:hover, :focus) { background: var(--e-global-color-jt_white); }
.elementor-element .jt-step__select:is(:hover, :focus) { background: transparent; }
.elementor-element :is(.jt-service-card__toggle, .jt-step__next, .jt-carousel-nav__btn) { border: 0; border-radius: 50%; padding: 0; color: var(--e-global-color-jt_white); }
.elementor-element .jt-service-card__toggle:is(:hover, :focus) { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); color: var(--e-global-color-jt_white); }
.elementor-element .jt-step__next:is(:hover, :focus) { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); color: var(--e-global-color-jt_white); }
.elementor-element .jt-carousel-nav__btn:is(:hover, :focus) { background: var(--jt-toggle-hover, var(--e-global-color-jt_red_dark)); color: var(--e-global-color-jt_white); }
.elementor-element :is(.jt-select-card, .jt-faq__question, .jt-tab):focus:not(:focus-visible) { outline: none; }
/* ---------- Navigation (native Nav Menu) ---------- */
.jt-nav .elementor-nav-menu--main .sub-menu { padding: 10px; }
.jt-nav .elementor-nav-menu--main .sub-menu a { border-radius: 9px; white-space: nowrap; line-height: 1.55; }
.jt-nav .elementor-nav-menu--main .sub-menu li + li { margin-top: 2px; }
.jt-nav .sub-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.jt-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a { gap: 5px; }
.jt-nav--vertical .elementor-nav-menu a { padding-left: 0 !important; padding-right: 0 !important; }
.jt-nav--inline .elementor-nav-menu--main .elementor-nav-menu a { padding: 0; }
.jt-footer-contact a { color: inherit; }
.jt-footer-contact a:hover { color: var(--e-global-color-accent); }
.jt-nav .elementor-nav-menu--main .elementor-item.has-submenu::after {
content: ""; position: static !important; display: inline-block; width: 12px !important; height: 12px !important; margin-left: 5px; opacity: 1 !important;
background: currentColor !important; transform: none; transition: transform .2s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jt-nav .elementor-nav-menu--main .menu-item-has-children:hover > .elementor-item.has-submenu::after { transform: rotate(180deg); }
/* ---------- FAQ: expanding cards ---------- */
.jt-faq-list { display: flex; flex-direction: column; gap: 12px; }
.jt-faq-item { background: var(--e-global-color-jt_white); border: 1px solid var(--e-global-color-jt_line); border-radius: var(--jt-radius-md); }
.elementor-element .jt-faq-item__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; border: 0; border-radius: var(--jt-radius-md);
background: transparent; color: var(--jt-q-color, var(--e-global-color-secondary)); text-align: left; cursor: pointer; font-family: inherit;
}
.elementor-element .jt-faq-item__q:is(:hover, :focus) { background: transparent; color: var(--e-global-color-primary); }
.jt-faq-item__icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--jt-q-active, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); }
.jt-faq-item__icon .jt-faq__chevron { width: 16px; height: 16px; transition: transform .25s ease; }
.jt-faq-item.is-open .jt-faq__chevron { transform: rotate(180deg); }
.jt-faq-item__a { padding: 0 22px 20px; }
/* ---------- Carousel arrows: dots and light previous ---------- */
.jt-carousel-nav { align-items: center; justify-content: space-between; }
.jt-carousel-nav__arrows { display: flex; gap: 10px; margin-left: auto; }
.jt-carousel-nav__dots { display: flex; align-items: center; gap: 8px; }
.elementor-element .jt-carousel-nav__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: var(--e-global-color-jt_line); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.elementor-element .jt-carousel-nav__dot:is(:hover, :focus) { background: var(--e-global-color-jt_muted); }
.elementor-element .jt-carousel-nav__dot.is-active { width: 26px; background: var(--e-global-color-primary); }
.elementor-element.jt-carousel-nav--prev-light-yes .jt-carousel-nav__btn[data-dir="prev"] { background: var(--e-global-color-jt_white); color: var(--e-global-color-secondary); box-shadow: var(--jt-shadow-sm); }
.elementor-element.jt-carousel-nav--prev-light-yes .jt-carousel-nav__btn[data-dir="prev"]:is(:hover, :focus) { background: var(--e-global-color-primary); color: var(--e-global-color-jt_white); }
/* Icon images drawn in currentColor render dark as ![]()
; this shows them white on photos. */
.jt-icon-white img { filter: brightness(0) invert(1); }
.jt-card-link { text-decoration: none; color: inherit; }
.jt-card-link:hover img { transform: none; }
.jt-card-link .elementor-widget-heading .elementor-heading-title { transition: color .2s ease; }
/* Janitech icons are stroke outlines: keep them unfilled inside native Icon, Icon List and Icon Box widgets. */
.jt-icon .elementor-icon svg,
.jt-icon-list .elementor-icon-list-icon svg,
.jt-contact-row .elementor-icon svg { fill: none !important; }
.jt-icon .elementor-icon svg path, .jt-icon-list .elementor-icon-list-icon svg path { fill: none; }
.jt-icon .elementor-icon { display: inline-flex; line-height: 0; }
/* ---------- Breadcrumb ---------- */
.jt-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.jt-breadcrumb a { color: inherit; text-decoration: none; }
.jt-breadcrumb a:hover { color: var(--e-global-color-accent); }
.jt-breadcrumb__sep { margin: 0 .55em; opacity: .9; }
.jt-text p { margin-bottom: 0; }
.jt-text p + p { margin-top: var(--jt-paragraph-gap, 14px); }
.jt-paragraphs-16 { --jt-paragraph-gap: 16px; }
.jt-paragraphs-14 { --jt-paragraph-gap: 14px; }
/* ---------- Role cards ---------- */
.jt-roles { display: grid; grid-template-columns: repeat(var(--jt-cols, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
.jt-role { background: var(--e-global-color-jt_white); border: 1px solid var(--e-global-color-jt_line); border-radius: var(--jt-radius-md); transition: border-color .2s ease, box-shadow .2s ease; }
.jt-role.is-open { border-color: var(--e-global-color-primary); box-shadow: var(--jt-shadow-sm); }
.elementor-element .jt-role__toggle {
display: flex; align-items: flex-start; gap: 20px; width: 100%; padding: 26px 28px; border: 0; border-radius: var(--jt-radius-md);
background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit; white-space: normal;
}
.elementor-element .jt-role__toggle:is(:hover, :focus) { background: transparent; color: inherit; }
.jt-role__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.jt-role__type { align-self: flex-start; padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.jt-role__title { display: block; }
.jt-role__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.2px; font-weight: 500; }
.jt-role__meta-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.jt-role__meta-item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--e-global-color-jt_line); }
.jt-role__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--e-global-color-jt_gray); color: var(--e-global-color-secondary); transition: background-color .2s ease, color .2s ease; }
.jt-role__chevron { width: 15px; height: 15px; stroke-width: 2.6; transition: transform .25s ease; }
.jt-role.is-open .jt-role__icon { background: var(--e-global-color-primary); color: var(--e-global-color-jt_white); }
.jt-role.is-open .jt-role__chevron { transform: rotate(180deg); }
.jt-role__body { padding: 0 28px 26px; }
.jt-role__desc { margin: 0 0 18px; color: var(--e-global-color-text); font-size: 15px; line-height: 1.7; }
.jt-role__apply {
display: inline-flex; align-items: center; gap: 14px; padding: 11px 11px 11px 22px; border-radius: 999px; white-space: nowrap; text-decoration: none;
background: var(--e-global-color-primary); color: var(--e-global-color-jt_white); font-weight: 700; font-size: 14.5px; line-height: 1;
}
.elementor-element .jt-role__apply:hover { background: var(--e-global-color-jt_red_dark); color: var(--e-global-color-jt_white); }
.jt-role__apply-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--e-global-color-jt_white); color: var(--e-global-color-primary); }
.jt-role__arrow { width: 14px; height: 14px; stroke-width: 2.6; }
/* Icon List with round check badges */
.jt-check-circle .elementor-icon-list-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--e-global-color-primary); }
.jt-check-circle .elementor-icon-list-item { padding-block: 20px !important; margin-block: 0 !important; border-bottom: 1px solid var(--e-global-color-jt_line); }
.jt-paragraphs-18 { --jt-paragraph-gap: 18px; }
/* Icon list SVGs draw with currentColor strokes: follow the icon colour control. */
.elementor-widget-icon-list .elementor-icon-list-icon svg [stroke="currentColor"] { stroke: inherit; }
/* ---------- Native Form: boxed style (labels above, 12px fields) ---------- */
.jt-form--boxed .elementor-field-group { gap: 7px; }
.jt-form--boxed .elementor-field-group > label { margin: 0; padding: 0; }
.jt-form--boxed .elementor-mark-required .elementor-field-label::after { color: var(--e-global-color-primary); }
.jt-form--boxed .elementor-field-group .elementor-field-textual { min-height: 43px; line-height: 1.2; padding: 13px 16px; }
.jt-form--boxed .elementor-field-group textarea.elementor-field-textual { min-height: 113px; line-height: 1.4; }
.jt-form--boxed .elementor-field-type-acceptance .elementor-field-subgroup label { font-size: 14.4px; line-height: 1.55; color: var(--e-global-color-text); }
.jt-links-inherit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.jt-links-inherit a:hover { color: var(--e-global-color-accent); }
/* ---------- FAQ: open cards ---------- */
.jt-faq-cards { display: flex; flex-direction: column; gap: 16px; }
.jt-faq-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 18px; background: var(--e-global-color-jt_gray); border: 1px solid var(--e-global-color-jt_line); }
.jt-faq-card__q { margin: 0; color: var(--jt-q-color, var(--e-global-color-secondary)); }
.jt-faq-card .jt-faq__answer p { margin: 0; }
.jt-faq-card .jt-faq__answer p + p { margin-top: 10px; }
/* ---------- Loop Grid items flowing into a parent grid (e.g. a promo tile after the cards) ---------- */
.jt-loop-contents, .jt-loop-contents > .elementor-widget-container, .jt-loop-contents .elementor-loop-container { display: contents; }
.jt-loop-contents .e-loop-item { min-width: 0; height: 100%; }
.jt-loop-contents .e-loop-item > .e-con { height: 100%; }
/* ---------- Supply categories ---------- */
.jt-supply { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; --jt-supply-accent: var(--e-global-color-primary); }
.jt-supply__photos { position: relative; border-radius: 22px; overflow: hidden; min-height: var(--jt-supply-photo-min, 500px); background: var(--e-global-color-jt_ink_800); }
.jt-supply__photo { position: absolute; inset: 0; }
.jt-supply__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jt-supply__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 13, 0) 40%, rgba(20, 16, 13, .9) 100%); }
.jt-supply__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px; color: #fff; }
.jt-supply__photo-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: rgba(255, 255, 255, .2); color: #fff; }
.jt-supply__photo-icon .jt-supply__glyph { width: 26px; height: 26px; }
.jt-supply__photo-title { margin: 0; color: #fff; font-size: 28px; font-weight: 700; line-height: 1.2; }
.jt-supply__blurb { margin: 0; color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.6; }
.jt-supply__panel { background: var(--jt-supply-panel, var(--e-global-color-jt_gray)); border-radius: 22px; padding: 30px; }
.jt-supply__list { display: flex; flex-direction: column; gap: 10px; }
.elementor-widget-jt-supply-explorer .jt-supply__cat {
display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid transparent;
background: transparent; color: var(--e-global-color-secondary); text-align: left; cursor: pointer; font: inherit; transition: background-color .15s ease, border-color .15s ease;
}
.elementor-widget-jt-supply-explorer .jt-supply__cat:hover { background: rgba(255, 255, 255, .6); color: var(--e-global-color-secondary); }
.elementor-widget-jt-supply-explorer .jt-supply__cat.is-active { background: #fff; border-color: var(--jt-supply-accent); box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .4); }
.elementor-widget-jt-supply-explorer .jt-supply__cat:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
.jt-supply__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: #edeae6; color: #8a837b; }
.jt-supply__icon .jt-supply__glyph { width: 22px; height: 22px; }
.jt-supply__cat.is-active .jt-supply__icon { background: var(--jt-supply-accent); color: #fff; }
.jt-supply__name { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.3; }
.jt-supply__chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #c4bdb5; }
.jt-supply__chev-glyph { width: 14px; height: 14px; stroke-width: 2.6; }
.jt-supply__cat.is-active .jt-supply__chev { background: var(--jt-supply-accent); color: #fff; }
.jt-supply__detail { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--e-global-color-jt_line); }
.jt-supply__copy { margin: 0 0 16px; color: var(--e-global-color-text); font-size: 15px; line-height: 1.7; }
.jt-supply__items { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.jt-supply__item { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--jt-supply-accent); color: var(--jt-supply-accent); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.2; }
.jt-supply svg * { fill: none; stroke: currentColor; }
@media (max-width: 1024px) { .jt-supply { grid-template-columns: 1fr; } .jt-supply__photos { min-height: 360px; } }
@media (max-width: 767px) { .jt-supply__panel { padding: 18px; } .jt-supply__photos { min-height: 300px; } .jt-supply__photo-title { font-size: 23px; } }
/* ---------- Safety Data Sheets ---------- */
.jt-sds { --jt-sds-accent: var(--e-global-color-primary); }
.elementor-widget-jt-sds-library .jt-sds__search {
width: 100%; min-height: 46px; padding: 15px 24px; border-radius: 999px; border: 1px solid var(--e-global-color-jt_line_field);
background: #fff; color: var(--e-global-color-secondary); font-size: 15px; line-height: 1;
}
.jt-sds__search::placeholder { color: var(--e-global-color-jt_muted); opacity: 1; }
.jt-sds__search:focus { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
.jt-sds__filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 26px; }
.elementor-widget-jt-sds-library .jt-sds__chip {
padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--e-global-color-jt_line); background: #fff; color: var(--e-global-color-jt_ink_800);
font-size: 12.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.2; cursor: pointer;
}
.elementor-widget-jt-sds-library .jt-sds__chip:hover { border-color: var(--jt-sds-accent); color: var(--jt-sds-accent); background: #fff; }
.elementor-widget-jt-sds-library .jt-sds__chip.is-active { background: var(--jt-sds-accent); border-color: var(--jt-sds-accent); color: #fff; }
.jt-sds__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 34px; list-style: none; }
.jt-sds__row { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--e-global-color-jt_line); }
.jt-sds__row[hidden] { display: none; }
.jt-sds__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--e-global-color-jt_gold_soft); color: var(--jt-sds-accent); }
.jt-sds__glyph { width: 22px; height: 22px; }
.jt-sds__glyph * { fill: none; stroke: currentColor; }
.jt-sds__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jt-sds__name { color: var(--e-global-color-secondary); font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.jt-sds__meta { color: var(--e-global-color-jt_muted); font-size: 12.5px; line-height: 1.4; }
.elementor-widget-jt-sds-library .jt-sds__download {
flex: none; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--jt-sds-accent); background: #fff; color: var(--jt-sds-accent);
font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.elementor-widget-jt-sds-library a.jt-sds__download:hover { background: var(--jt-sds-accent); color: #fff; }
.jt-sds__download.is-pending { opacity: .5; cursor: not-allowed; }
.jt-sds__empty { margin: 0 0 34px; padding: 20px; border-radius: 16px; background: #fff; color: var(--e-global-color-text); text-align: center; }
@media (max-width: 767px) { .jt-sds__row { flex-wrap: wrap; gap: 12px 14px; } .jt-sds__download { margin-left: 58px; } }
/* ---------- Icon tile ---------- */
.jt-icon-tile-wrap { display: flex; }
.jt-icon-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; }
.jt-icon-tile svg, .jt-icon-tile img { width: 26px; height: 26px; }
.jt-icon-tile svg * { fill: none; stroke: currentColor; }
/* ---------- FAQ: expanding rows (no cards) ---------- */
.jt-faq--rows .jt-faq-list { gap: 14px; }
.jt-faq--rows .jt-faq-item { background: none; border: 0; border-bottom: 1px solid var(--e-global-color-jt_line); border-radius: 0; padding-bottom: 14px; }
.jt-faq--rows .jt-faq-item:last-child { border-bottom: 0; }
.elementor-element.jt-faq--rows .jt-faq-item__q { padding: 0; min-height: 32px; }
.jt-faq--rows .jt-faq-item__a { padding: 12px 46px 0 0; }
/* ---------- Legal pages ---------- */
.jt-legal { counter-reset: jt-clause; }
.jt-legal > p:first-child { margin: 0 0 40px; padding: 20px 24px; border-radius: 18px; background: var(--e-global-color-jt_gray); color: var(--e-global-color-jt_ink_800); }
.jt-legal h2 { display: flex; align-items: baseline; gap: 14px; margin: 40px 0 12px; color: var(--e-global-color-secondary); font-size: 26px; font-weight: 700; line-height: 1.2; scroll-margin-top: 120px; }
.jt-legal h2::before { counter-increment: jt-clause; content: counter(jt-clause, decimal-leading-zero); flex: none; color: var(--e-global-color-primary); font-size: 16px; font-weight: 800; }
.jt-legal > p:first-child + h2 { margin-top: 0; }
.jt-legal p { margin: 0 0 14px; }
.jt-legal ul { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.jt-legal li { position: relative; padding-left: 19px; }
.jt-legal li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--e-global-color-primary); transform: translateY(-50%); }
.jt-legal .jt-legal-contact { margin-top: 40px; padding: 26px 28px; border: 1px solid var(--e-global-color-jt_line); border-radius: 20px; }
.jt-legal .jt-legal-contact h3 { margin: 0 0 8px; color: var(--e-global-color-primary); font-size: 19.5px; font-weight: 700; }
.jt-legal .jt-legal-contact p { margin: 0; }
@media (max-width: 767px) { .jt-legal h2 { font-size: 22px; } }
/* Table of Contents widget, numbered like the clauses */
.jt-toc .elementor-toc__header { padding: 0 0 16px; border: 0; }
.jt-toc .elementor-toc__header-title { color: var(--e-global-color-jt_muted); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1; }
.jt-toc .elementor-toc__body { padding: 0; max-height: none; }
.jt-toc .elementor-toc__list-wrapper { counter-reset: jt-toc; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; }
.jt-toc .elementor-toc__list-item { margin: 0; }
.jt-toc .elementor-toc__list-item-text-wrapper { display: flex; gap: 10px; }
.jt-toc .elementor-toc__list-item-text-wrapper::before { counter-increment: jt-toc; content: counter(jt-toc, decimal-leading-zero); flex: none; color: var(--e-global-color-primary); font-weight: 700; font-size: 14.4px; line-height: 1.4; }
.jt-toc .elementor-toc__list-item-text { color: var(--e-global-color-jt_ink_800); font-size: 14.4px; line-height: 1.4; text-decoration: none; }
.jt-toc .elementor-toc__list-item-text:hover, .jt-toc .elementor-toc__list-item-text.elementor-item-active { color: var(--e-global-color-primary); text-decoration: none; }
@media (min-width: 1025px) { .jt-sticky-aside { position: sticky; top: 110px; } }
/* ---------- Single article content ---------- */
.jt-article { color: var(--e-global-color-text); font-size: 16.6px; line-height: 1.72; }
.jt-article > .elementor-widget-container > * + *, .jt-article .elementor-widget-container > * + * { margin-top: 18px; }
/* The migrated article bodies render as direct children of .jt-article, so the sibling rule
above (which targets children of .elementor-widget-container) never reaches them: every
paragraph sat at margin 0 and consecutive paragraphs ran together with a 0px gap against a
31.92px line-height, making paragraph breaks indistinguishable from line wraps. The legal
pages, which do carry a bottom margin, are the correct reference. The container is display:
block, so these margins collapse against the 44px heading and list tops as intended. */
.jt-article p { margin: 0 0 18px; }
/* Descendant selectors, not child ones. The migrated bodies put the blocks inside an Elementor
element wrapper, so `.jt-article > h2` matched nothing and every heading kept margin-bottom 0 —
a 31px heading's descenders nearly touching the next line while its paragraphs had 18px. The
gap is deliberately smaller than the 18px paragraph rhythm so a heading still binds downward. */
.jt-article :is(h2, h3, h4, h5, h6) { margin-bottom: 12px; }
.jt-article :is(ul, ol) { margin-bottom: 18px; }
.jt-article :is(p, ul, ol, h2, h3, h4):last-child { margin-bottom: 0; }
.jt-article p:first-child { color: var(--e-global-color-jt_ink_800); font-size: 19px; line-height: 1.68; }
.jt-article h2 { margin: 44px 0 12px; color: var(--e-global-color-secondary); font-size: 31px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; scroll-margin-top: 120px; }
.jt-article h3 { margin: 32px 0 12px; color: var(--e-global-color-secondary); font-size: 22px; font-weight: 700; line-height: 1.3; }
.jt-article ul { display: flex; flex-direction: column; gap: 14px; margin: 44px 0 18px; padding: 34px 38px; border-radius: 20px; background: var(--e-global-color-jt_gray); list-style: none; }
.jt-article :is(ul, ol) > li { position: relative; font-size: 16.2px; line-height: 1.65; }
.jt-article ul > li { padding-left: 38px; }
.jt-article ul > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 12px; background: var(--e-global-color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.jt-article blockquote { margin: 44px 0 18px; padding: 6px 0 6px 30px; border-left: 3px solid var(--e-global-color-accent); }
.jt-article blockquote p { color: var(--e-global-color-secondary); font-size: 24px; font-weight: 600; font-style: italic; line-height: 1.42; }
.jt-article blockquote cite { display: block; margin-top: 16px; color: var(--e-global-color-jt_muted); font-size: 14px; font-style: normal; font-weight: 500; }
.jt-article img { border-radius: 18px; }
.jt-article h4 { margin: 26px 0 10px; color: var(--e-global-color-secondary); font-size: 18.5px; font-weight: 700; line-height: 1.4; }
/* An image or embed that the old site had wrapped in a heading is lifted into a figure. */
.jt-article figure.jt-figure, .jt-article figure.jt-embed { margin: 44px 0 18px; }
.jt-article figure.jt-figure img { display: block; width: 100%; height: auto; }
.jt-article figure.jt-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 18px; }
/* A migrated comparison table is wider than the article column at phone widths. It gets its own
scroll container so the document itself never scrolls sideways (WCAG 1.4.10 Reflow at 320). */
.jt-article .jt-table { margin: 44px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--e-global-color-jt_line); border-radius: var(--jt-radius-sm, 16px); }
.jt-article .jt-table:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.jt-article .jt-table table { width: 100%; min-width: 440px; margin: 0; border: 0; border-collapse: collapse; font-size: 15.2px; line-height: 1.55; }
.jt-article .jt-table :is(th, td) { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--e-global-color-jt_line); color: var(--e-global-color-text); text-align: left; vertical-align: top; }
.jt-article .jt-table th, .jt-article .jt-table tr:first-child td { background: var(--e-global-color-jt_gray); color: var(--e-global-color-secondary); font-weight: 700; }
.jt-article .jt-table tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 767px) { .jt-article h2 { font-size: 25px; } .jt-article ul { padding: 24px 20px; } .jt-article blockquote p { font-size: 20px; } }
.jt-post-nav { padding-top: 30px; border-top: 1px solid var(--e-global-color-jt_line); }
.jt-post-nav .post-navigation__prev--label, .jt-post-nav .post-navigation__next--label { color: var(--e-global-color-primary); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.jt-toc--article .elementor-toc__list-item-text-wrapper::before, .jt-toc--article .elementor-toc__list-item-text { font-size: 14.6px; line-height: 1.5; }
.jt-toc--article .elementor-toc__list-item-text { color: var(--e-global-color-text); }
/* ---------- Taxonomy filter pills (Resources) ---------- */
.jt-filter-pills .e-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.jt-filter-pills .e-filter-item { padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--e-global-color-jt_line); background: #fff; color: var(--e-global-color-jt_ink_800); line-height: 1.2; }
.jt-filter-pills .e-filter-item:hover { border-color: var(--e-global-color-primary); color: var(--e-global-color-primary); background: #fff; }
.jt-filter-pills .e-filter-item[aria-pressed="true"] { background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: #fff; }
/* ---------- Responsive safety net ---------- */
/* Headings follow the design's natural line breaks on desktop; balance only where space is tight. */
.jt-heading__title { text-wrap: wrap; }
@media (max-width: 1024px) { .jt-heading__title { text-wrap: balance; } }
/* Fixed-width columns never push past the screen. */
.e-con.e-child { max-width: 100%; }
/* Pills and chips may wrap on narrow screens. */
@media (max-width: 767px) {
.jt-pill { white-space: normal; max-width: 100%; }
.jt-pills { flex-wrap: wrap; }
}
.e-con.jt-grow { flex: 1 1 0% !important; min-width: 0; }
/* ---------- QA round 1 fixes ---------- */
/* Loop Grid cards fill their row, so neighbours are equal height. */
.elementor-loop-container > .e-loop-item { height: 100%; }
.elementor-loop-container > .e-loop-item > .e-con { height: 100%; }
/* Icons beside text never collapse. */
.e-con > .elementor-widget-icon, .e-con > .elementor-widget-jt-icon-tile, .e-con-inner > .elementor-widget-icon { flex-shrink: 0; }
/* FAQ expanding cards/rows: question wraps, closed icon is quiet, open icon is red. */
.jt-faq-item__q .jt-faq__question-text { flex: 1 1 auto; min-width: 0; white-space: normal; }
.jt-faq-item__icon { flex: 0 0 32px; background: var(--e-global-color-jt_gray); color: var(--e-global-color-secondary); transition: background-color .2s ease, color .2s ease; }
.jt-faq-item.is-open .jt-faq-item__icon { background: var(--jt-q-active, var(--e-global-color-primary)); color: var(--e-global-color-jt_white); }
.elementor-element.jt-faq--rows .jt-faq-item.is-open .jt-faq-item__q { color: var(--jt-q-color, var(--e-global-color-secondary)); }
/* Eyebrow badges may wrap on phones. */
@media (max-width: 767px) {
.jt-eyebrow { white-space: normal; max-width: 100%; line-height: 1.3; }
.jt-eyebrow--seam .jt-eyebrow { white-space: nowrap; }
}
/* Promo tile spans the row when the services grid has two columns. */
@media (min-width: 768px) and (max-width: 1024px) { .jt-span-tablet-2 { grid-column: span 2; } }
/* Home proof bar: 2 x 2 on tablet and phone, dividers hidden. */
@media (max-width: 1024px) {
.e-con.jt-proof-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.jt-proof-bar > .e-con:not([class*="Stat"]):empty { display: none; }
}
/* About values: dividers between columns on desktop. */
@media (min-width: 1025px) { .jt-value-col + .jt-value-col { border-left: 1px solid var(--e-global-color-jt_line); padding-left: 30px !important; } }
/* Careers checklist: white tick centred in the circle; second group gold. */
.jt-check-circle .elementor-icon-list-icon svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
.jt-check-circle .elementor-icon-list-icon svg * { stroke: #fff !important; fill: none !important; }
.jt-check-circle .elementor-icon-list-text { padding-left: 16px !important; }
.jt-check-circle--gold .elementor-icon-list-icon { background: var(--e-global-color-accent); }
.jt-check-circle--gold .elementor-icon-list-icon svg * { stroke: var(--e-global-color-jt_badge_text) !important; }
/* Hero photos: darker fade where text overlaps the photo on tablet and phone. */
@media (max-width: 1024px) {
.jt-scrim--hero-page::after { background: linear-gradient(90deg, var(--e-global-color-jt_ink_800) 0%, rgb(var(--jt-shade-page) / .9) 55%, rgb(var(--jt-shade-page) / .6) 100%); }
}
/* Resources filter pills. */
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter-item {
padding: 9px 20px !important; border-radius: 999px !important; border: 1.5px solid var(--e-global-color-jt_line) !important; background: #fff !important;
color: var(--e-global-color-jt_ink_800) !important; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter-item:hover { border-color: var(--e-global-color-primary) !important; color: var(--e-global-color-primary) !important; }
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter-item[aria-pressed="true"] { background: var(--e-global-color-primary) !important; border-color: var(--e-global-color-primary) !important; color: #fff !important; }
@media (max-width: 767px) {
/* Wrap on phones: a one-row scroller hid 4 of the 6 categories with no visible cue. */
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
.elementor-widget-taxonomy-filter.jt-filter-pills .e-filter-item { flex: none; white-space: nowrap; }
}
/* Newsletter on dark: white field, field and button on one row. */
.jt-form-on-dark .elementor-field-textual { background-color: #fff !important; }
/* SDS on phones: text takes the row, download button below. */
.jt-sds__search::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 767px) {
.jt-sds__search { font-size: 14px; padding-inline: 18px; }
.jt-sds__row { flex-wrap: wrap; align-items: flex-start; }
.jt-sds__text { flex: 1 1 calc(100% - 62px); }
.elementor-widget-jt-sds-library .jt-sds__download { margin-left: 62px; }
}
/* Supply categories: grid never wider than its column; photo fills the card; stronger inactive glyphs. */
.jt-supply { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .jt-supply { grid-template-columns: minmax(0, 1fr); } }
.jt-supply > * { min-width: 0; }
.jt-supply__img { height: 100% !important; width: 100% !important; object-position: center 30%; }
.jt-supply__icon { color: var(--e-global-color-text); }
.jt-supply__chev { color: var(--e-global-color-jt_muted); }
.elementor-widget-jt-supply-explorer .jt-supply__cat { padding: 12px 18px; }
.jt-supply__list { gap: 6px; }
/* Table of contents: our own zero-padded numbers, no bullets; headings clear the sticky header. */
.jt-toc .elementor-toc__list-item-text-wrapper > i, .jt-toc .elementor-toc__list-item-text-wrapper > svg, .jt-toc .elementor-toc__list-item-text-wrapper::after { display: none !important; }
.jt-toc .elementor-toc__list-wrapper, .jt-toc .elementor-toc__list-item { list-style: none !important; }
.jt-toc .elementor-toc__list-item-text-wrapper::before { font-weight: 400 !important; min-width: 20px; }
.jt-toc .elementor-toc__header-title { color: var(--e-global-color-jt_muted) !important; }
.elementor-menu-anchor, .jt-legal h2, .jt-article h2 { scroll-margin-top: 0; }
/* Article prev/next links. */
.jt-post-nav .post-navigation__prev--label, .jt-post-nav .post-navigation__next--label { font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--e-global-color-primary) !important; }
/* Contact map corners. */
.jt-map iframe { border-radius: 18px; display: block; }
/* ---------- QA round 1: functional & accessibility ---------- */
/* Form fields: visible keyboard focus. */
.jt-form .elementor-field:focus-visible, .jt-form .elementor-field:focus { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.jt-form-on-dark .elementor-field:focus-visible, .jt-form-on-dark .elementor-field:focus { outline-color: var(--e-global-color-accent); }
/* Pending SDS downloads read as disabled but stay legible. */
.jt-sds__download.is-pending { opacity: 1; color: var(--e-global-color-jt_muted) !important; border-color: var(--e-global-color-jt_line) !important; }
/* Photo process steps stack vertically on phones. */
@media (max-width: 767px) {
.jt-steps { flex-direction: column; }
.jt-step { flex: 0 0 auto; min-height: 84px; transition: min-height .45s var(--jt-ease); }
.jt-step.is-active { flex: 0 0 auto; min-height: 320px; }
.jt-step__icon { top: 50%; left: 26px; transform: translateY(-50%); }
.jt-step.is-active .jt-step__icon { top: 22px; transform: none; }
.jt-step__desc { max-width: 100%; }
}
/* Touch targets on phones and tablets. */
@media (max-width: 1024px) {
.elementor-menu-toggle { min-width: 44px; min-height: 44px; }
.jt-carousel-nav__dot { position: relative; }
.elementor-location-footer .elementor-nav-menu a { min-height: 40px; display: flex; align-items: center; }
.jt-footer-contact .elementor-heading-title a { display: inline-flex; min-height: 40px; align-items: center; }
.elementor-widget-jt-sds-library .jt-sds__chip { min-height: 40px; }
}
.elementor-widget.jt-grow { flex: 1 1 0% !important; min-width: 0; }
.jt-supply__cat, .jt-sds__row, .jt-role__toggle { box-sizing: border-box; max-width: 100%; }
/* FAQ panel on tablet/phone: questions above the answer, text wraps, photo on top of the answer. */
@media (max-width: 1024px) {
.jt-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
.elementor-element .jt-faq__question { white-space: normal; text-align: left; line-height: 1.35; padding: 12px 12px 12px 20px; }
.jt-faq__question > span:not(.jt-faq__icon) { flex: 1 1 auto; min-width: 0; }
.jt-faq__panel { flex-direction: column; align-items: stretch; }
.jt-faq__media { flex: 0 0 auto; min-height: 180px; }
.jt-faq__answers { padding: 0 6px 6px; }
.elementor-widget-jt-supply-explorer .jt-supply__cat { padding: 10px 12px; gap: 12px; }
.jt-supply__chev { width: 32px; height: 32px; }
}
/* ---------- Responsive round 1 (all breakpoints) ---------- */
/* Large fixed-width columns give way on narrower desktops instead of overflowing. */
.e-con.jt-shrink { flex-shrink: 1 !important; min-width: 0; }
@media (max-width: 1400px) { .e-con.jt-retention-card { right: 16px !important; inset-inline-end: 16px !important; } }
/* Long words (emails, product names) wrap on small screens. */
/* Header: burger sits at the right beside the CTA. */
@media (max-width: 1024px) { .elementor-widget-nav-menu.elementor-nav-menu--toggle { margin-left: auto; } }
/* Service/industry template: photo cards. */
@media (max-width: 1024px) { .jt-services__row { --jt-cols: 2 !important; } }
@media (max-width: 600px) { .jt-services__row { --jt-cols: 1 !important; } }
/* Service/industry template: process steps use the stacked layout below desktop. */
@media (max-width: 1024px) {
.jt-steps { flex-direction: column; }
.jt-step { flex: 0 0 auto; min-height: 84px; }
.jt-step.is-active { flex: 0 0 auto; min-height: 320px; }
.jt-step__icon { top: 50%; left: 26px; transform: translateY(-50%); }
.jt-step.is-active .jt-step__icon { top: 22px; transform: none; }
.jt-step__desc { max-width: 100%; }
.jt-step__body { right: 84px; }
}
/* Service/industry template: facility photo above the cards. */
@media (max-width: 1024px) {
.jt-selectable.has-photo { grid-template-columns: minmax(0, 1fr); }
.jt-selectable__media { min-height: 280px; }
}
@media (max-width: 600px) { .jt-selectable__grid { --jt-cols: 1 !important; grid-template-columns: minmax(0, 1fr); } }
/* Carousel header wraps so the arrows stay on screen. */
@media (max-width: 1024px) { .jt-carousel-nav { flex-wrap: wrap; row-gap: 14px; } }
/* FAQ question pills wrap at every width. */
.elementor-element .jt-faq__question { white-space: normal; }
.jt-faq__question > span:not(.jt-faq__icon) { flex: 1 1 auto; min-width: 0; }
/* Supply category rows on small phones. */
.jt-supply__name { flex: 1 1 auto; min-width: 0; }
.jt-supply__chev, .jt-supply__icon { flex-shrink: 0; }
/* Readable line lengths on wide screens. */
/* Small text never below 13px on phones. */
@media (max-width: 767px) { .jt-eyebrow { font-size: 12px !important; } }
/* Very long words in large headings (e.g. "competitively" at 320px) hyphenate instead of overflowing. */
.elementor-widget-jt-supply-explorer .jt-supply__cat { white-space: normal; line-height: 1.3; }
/* ---------- Service/industry template round 1 ---------- */
/* Site CTA contact rows: hairline dividers. */
.jt-contact-row + .jt-contact-row { border-top: 1px solid rgba(255, 255, 255, .12); }
/* Form buttons: 14px between label and icon circle. */
.jt-form .elementor-button .elementor-button-content-wrapper { gap: 14px !important; }
.jt-form .elementor-button .elementor-button-icon { margin: 0 !important; }
/* Pill fields: text starts 24px in. */
.jt-form--pill .elementor-field-group .elementor-field-textual { padding: 15px 24px; }
/* Burger: transparent toggle. */
.elementor-menu-toggle { background: transparent !important; border-radius: 50%; }
/* Service cards: one continuous grid on tablet so rows never leave a lone half-width card. */
@media (max-width: 1024px) {
.jt-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jt-gap, 22px); }
.jt-services__row { display: contents; }
}
@media (max-width: 600px) { .jt-services { grid-template-columns: minmax(0, 1fr); } }
/* Footer on phones: tighter link spacing. */
@media (max-width: 767px) {
.elementor-location-footer .elementor-nav-menu--layout-vertical .elementor-nav-menu > li + li { margin-top: 0 !important; }
.elementor-location-footer .elementor-nav-menu a { min-height: 40px; }
}
/* FAQ pills on phones: comfortable line height. */
@media (max-width: 767px) { .elementor-element .jt-faq__question { line-height: 1.3; padding-block: 12px; } }
/* ================= QA round 2 ================= */
/* Anchors and in-page jumps clear the sticky header. */
html { scroll-padding-top: 110px; }
@media (max-width: 1024px) { html { scroll-padding-top: 100px; } }
/* Keyboard focus: red ring with a white halo reads on light and dark backgrounds (3:1+). */
body :is(a, button, summary, [tabindex]:not([tabindex="-1"]), .elementor-item):focus-visible {
outline: 2px solid var(--e-global-color-primary) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #fff !important;
}
body .jt-step__select:focus-visible, body .elementor-post-navigation a:focus-visible { outline-offset: -4px !important; }
.elementor-post-navigation__prev, .elementor-post-navigation__next { overflow: visible !important; }
.jt-form .elementor-field:focus, .jt-form .elementor-field:focus-visible, .elementor-widget-jt-sds-library .jt-sds__search:focus {
outline: 2px solid transparent !important; box-shadow: 0 0 0 2px var(--e-global-color-primary) !important; border-color: var(--e-global-color-primary) !important;
}
.elementor-message-danger, .elementor-field-group .elementor-message { color: var(--e-global-color-primary) !important; }
.elementor-message::before { display: none !important; }
/* Empty table of contents box stays hidden. */
.jt-toc-box[hidden], .elementor-widget-table-of-contents[hidden] { display: none !important; }
/* Careers: apply button label is white. */
.elementor-element .jt-role a.jt-role__apply, .elementor-element .jt-role a.jt-role__apply:hover { color: var(--e-global-color-jt_white); }
/* Headings never hyphenate; very long words wrap only if they must. Emails never hyphenate. */
.jt-heading__title, .elementor-heading-title, a[href^="mailto:"], .elementor-icon-box-description { hyphens: manual; }
@media (max-width: 400px) { .jt-heading__title, .elementor-heading-title { overflow-wrap: break-word; } }
/* Carousel dots: 24px hit areas that don't overlap the neighbouring dot. */
.jt-carousel-nav__dots { gap: 16px !important; }
.jt-carousel-nav__dot { position: relative; }
.jt-carousel-nav__dot::after { content: ""; position: absolute; inset: -8px -7px; }
.elementor-element .jt-carousel-nav__dot { background: #b5b5b5; }
.elementor-element .jt-carousel-nav__btn[aria-disabled="true"] { opacity: .4; cursor: default; }
/* Forms: consistent 46px pill fields, readable 16px text on phones, real consent checkbox. */
.jt-form--pill .elementor-field-group:not(.elementor-field-type-textarea) .elementor-field-textual { height: 46px; min-height: 46px; padding-block: 0; line-height: 1.2; }
@media (max-width: 767px) { .jt-form .elementor-field, .jt-form .elementor-field-textual, .jt-sds__search { font-size: 16px !important; } }
.elementor-field-type-acceptance > label.elementor-field-label { display: none; }
.elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.elementor-field-type-acceptance input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--e-global-color-primary); }
.jt-form-on-dark .elementor-form-fields-wrapper { flex-wrap: nowrap; }
.jt-form-on-dark .elementor-field-group:not(.elementor-field-type-submit) { flex: 1 1 0; width: auto; max-width: none; }
.jt-form-on-dark .elementor-field-textual { border: 1px solid var(--e-global-color-jt_line_field) !important; }
@media (max-width: 400px) { .jt-form-on-dark .elementor-form-fields-wrapper { flex-wrap: wrap; } .jt-form-on-dark .elementor-field-group { flex-basis: 100%; } }
/* Buttons: design-system borders. */
.jt-button--outline .jt-button:not(:hover) { border-color: rgba(255, 255, 255, .55) !important; }
.jt-button--ghost .jt-button { border-width: 1.5px; }
/* Header: current page and current section in red with the underline. */
/* Mobile/tablet menu: gutter-aligned 44px rows, submenu chevron, contained scrolling. */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown { overscroll-behavior: contain; scrollbar-width: thin; border-radius: 0 !important; border-inline: 0 !important; }
.elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-sub-item { min-height: 44px; display: flex !important; align-items: center; padding-inline: 24px !important; }
.elementor-nav-menu--dropdown .menu-item-has-children > a { justify-content: space-between; }
.elementor-nav-menu--dropdown .sub-menu { border: 0 !important; box-shadow: none !important; padding-left: 12px; }
body.jt-menu-open { overflow: hidden; }
}
@media (max-width: 767px) { .elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-sub-item { padding-inline: 20px !important; } }
/* Loop grids on tablet: a lone last card spans the row instead of leaving a gap. */
@media (min-width: 768px) and (max-width: 1024px) {
.jt-services > .jt-services__row > .jt-span-row { grid-column: 1 / -1; }
}
/* Service/industry hero stats: always one even row on desktop, 2 x 2 below. */
.e-con.jt-stat-band { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.jt-stat-band > .elementor-widget { width: auto !important; max-width: none !important; min-width: 0; }
@media (max-width: 1100px) { .e-con.jt-stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jt-stat__unit--tight { margin-left: 0 !important; padding-left: 0 !important; }
/* Process steps below desktop: collapsed steps show their title beside the icon. */
@media (max-width: 1024px) {
.jt-step:not(.is-active) .jt-step__body { opacity: 1; visibility: visible; top: 50%; bottom: auto; left: 84px; right: 20px; transform: translateY(-50%); }
.jt-step:not(.is-active) .jt-step__desc, .jt-step:not(.is-active) .jt-step__next { display: none; }
.jt-step:not(.is-active) .jt-step__title { font-size: 18px; }
.jt-step.is-active .jt-step__body { right: 84px; }
}
/* Photos that change on selection sit off-screen once stacked: hide them below desktop. */
@media (max-width: 1024px) {
.jt-selectable.has-photo { grid-template-columns: minmax(0, 1fr); }
.jt-selectable.has-photo .jt-selectable__media { display: none; }
.jt-supply__photos { display: none; }
}
/* Text over photos stays readable on small screens. */
@media (max-width: 767px) {
.jt-service-card::after { background: linear-gradient(180deg, rgba(20, 15, 10, .2) 0%, rgba(20, 15, 10, .55) 35%, rgba(20, 15, 10, .9) 100%) !important; }
.jt-scrim--hero-dark::after, .jt-scrim--hero-page::after { background: linear-gradient(180deg, rgb(35 35 35 / .82), rgb(35 35 35 / .9)) !important; }
.e-con.jt-retention-card { left: 16px !important; right: 16px !important; inset-inline: 16px !important; width: auto !important; }
}
/* Plain text blocks and FAQ answers use their full column (design widths). */
.jt-faq__answer, .jt-faq-item__a, .elementor-widget-text-editor.jt-text p { max-width: none; }
/* Legal table of contents. */
.jt-toc .elementor-toc__list-item-text-wrapper::before { min-width: 0 !important; }
.jt-toc .elementor-toc__list-item-text { color: var(--e-global-color-jt_ink_800) !important; }
@media (min-width: 768px) { .jt-toc .elementor-toc__toggle-button { display: none !important; } }
/* SDS library: design sizes. */
.elementor-widget-jt-sds-library .jt-sds__search { height: 46px; min-height: 46px; padding-block: 0; font-size: 16px; }
.elementor-widget-jt-sds-library .jt-sds__chip { line-height: 15px; padding-block: 8px; }
.jt-sds__row { padding: 15px 20px; }
.jt-sds__empty { border: 1px solid var(--e-global-color-jt_line); border-radius: 16px; }
/* Cards: two-line excerpts; carousel leaves room for card shadows. */
.jt-clamp-2 p, .jt-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.elementor-widget-loop-carousel .swiper { padding: 4px 14px 34px; margin: -4px -14px -34px; }
.elementor-star-rating { line-height: 1; }
/* Footer menus use the whole column on phones. */
@media (max-width: 767px) { .elementor-location-footer .elementor-widget-nav-menu { width: 100% !important; } }
/* Hero shine runs a few times, then rests. */
.jt-shine-yes::before { animation-iteration-count: 3 !important; }
/* Site CTA contact rows. */
.jt-contact-row + .jt-contact-row { border-top-color: rgba(255, 255, 255, .15); }
/* Supply categories: design row rhythm on desktop. */
@media (min-width: 1025px) { .elementor-widget-jt-supply-explorer .jt-supply__cat { padding: 16px 18px; } .jt-supply__list { gap: 10px; } }
/* Card numbers follow each card's position in the grid. */
.elementor-loop-container { counter-reset: jt-card; }
.elementor-loop-container > .e-loop-item { counter-increment: jt-card; }
.jt-loop-number .elementor-heading-title { font-size: 0 !important; }
.jt-loop-number .elementor-heading-title::after { content: counter(jt-card, decimal-leading-zero); font-size: 15px; }
/* Service/industry sections with nothing to show are hidden. */
.jt-hide-when-empty:not(:has(.jt-service-card, .jt-select-card, .jt-faq__question, .jt-tab)) { display: none !important; }
/* ================= QA round 3 ================= */
/* Header: current page / section in red with the underline (header only; footer keeps gold). */
.elementor-location-header .jt-nav--horizontal .elementor-nav-menu--main > .elementor-nav-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent) > a.elementor-item {
color: var(--e-global-color-primary) !important; background-size: 100% 2px !important;
}
.elementor-location-footer .elementor-item-active, .elementor-location-footer .current-menu-item > a { color: var(--e-global-color-accent) !important; }
/* Mobile/tablet menu: chevron at the right edge of parent items (Elementor's own sub-arrow slot). */
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow {
display: inline-flex !important; margin-left: auto; width: 12px; height: 12px; padding: 0; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s ease;
}
.elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow > * { display: none; }
.elementor-nav-menu--dropdown .menu-item-has-children > a.highlighted .sub-arrow { transform: rotate(180deg); }
}
/* Loop grids and card grids on tablet: the lone last card (marked by script) spans the row. */
@media (min-width: 768px) and (max-width: 1024px) {
.e-loop-item.jt-span-row, .jt-selectable__grid > .jt-span-row { grid-column: 1 / -1; }
}
/* Focus rings: component overrides must outrank the site-wide rule. */
html body .jt-step .jt-step__select:focus-visible, html body .elementor-post-navigation a:focus-visible { outline-offset: -4px !important; box-shadow: none !important; }
.elementor-post-navigation { overflow: visible !important; }
.jt-form select:focus, .jt-form select:focus-visible { outline: 2px solid transparent !important; box-shadow: 0 0 0 2px var(--e-global-color-primary) !important; border-color: var(--e-global-color-primary) !important; }
.jt-form input[type="number"]::-webkit-inner-spin-button, .jt-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jt-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Inactive carousel dots meet 3:1. */
.elementor-element .jt-carousel-nav__dot:not(.is-active) { background: var(--e-global-color-jt_line_muted, #8a8a8a); }
/* FAQ question pills: comfortable line height at every width. */
.elementor-element .jt-faq__question, .jt-faq-item__q { line-height: 1.3; }
/* Open photo service cards: stronger scrim under the text. */
.jt-service-card.is-open::after { background: linear-gradient(180deg, rgba(20, 15, 10, .25) 0%, rgba(20, 15, 10, .6) 40%, rgba(20, 15, 10, .9) 100%) !important; }
/* Emails and phone numbers never break mid-word (script adds a break opportunity after "@"). */
.elementor-icon-box-description, a[href^="mailto:"], .jt-legal-contact p { overflow-wrap: normal; word-break: normal; }
a[href^="tel:"], .jt-nowrap { white-space: nowrap; }
@media (max-width: 360px) { .jt-legal-contact p { overflow-wrap: anywhere; } }
/* Pill buttons on small phones: tighter so labels stay on one line. */
@media (max-width: 400px) {
.elementor-widget-jt-button .jt-button { gap: 10px; padding-left: 18px; font-size: 14px; }
.elementor-widget-jt-button .jt-button__icon { flex-basis: 36px; width: 36px; height: 36px; }
.jt-form .elementor-button { font-size: 14px; }
}
/* Card buttons sit on the card's bottom edge. */
.e-loop-item .elementor-widget-jt-button.jt-push-bottom { margin-top: auto !important; }
/* Contact map: address chip in the top-right, clear of Google's controls. */
.e-con.jt-map-chip { width: auto !important; max-width: calc(100% - 24px); }
/* Facility Supplies stat tiles: natural height on phones.
The tiles are plain containers (heading + caption), so neither a "Stat" class nor a .stat
descendant ever existed to match — they are tagged jt-stat-tile in the page spec instead
(generator/pages/facility_supplies.py, StatCard). */
@media (max-width: 767px) { .e-con.jt-stat-tile { min-height: 0 !important; } }
/* Footer link columns full width on phones. */
@media (max-width: 767px) { .elementor-location-footer .e-con.jt-shrink { width: 100% !important; } }
/* Readable line length for legal text below desktop. */
@media (max-width: 1024px) { .jt-legal { max-width: 78ch; } }
/* Newsletter on service pages keeps field + button on one row. */
.jt-form-inline .elementor-form-fields-wrapper { flex-wrap: nowrap; }
.jt-form-inline .elementor-field-group:not(.elementor-field-type-submit) { flex: 1 1 0; width: auto; max-width: none; }
@media (max-width: 400px) { .jt-form-inline .elementor-form-fields-wrapper { flex-wrap: wrap; } .jt-form-inline .elementor-field-group { flex-basis: 100%; } }
@media (max-width: 1024px) { .elementor-location-header .elementor-nav-menu--dropdown li:is(.current-menu-ancestor, .current-page-ancestor, .current-menu-parent) > a { color: var(--e-global-color-primary) !important; } }
/* === Round 4 merge (shared files) === */
/* Service card number centres on its title row. */
.jt-loop-number { align-self: center; }
/* Mobile: card links keep a 44px touch target (Figma has no separate mobile frame). */
@media (max-width: 767px) {
.jt-tile__link, .jt-card__link, .e-loop-item .jt-button--text .jt-button { min-height: 44px; display: inline-flex; align-items: center; }
}
/* === Round 4 fixes: area A (start) === */
/* Figma strokes are drawn INSIDE the frame, so a bordered pill or button is exactly as big as an
unbordered one. CSS borders grow an auto-sized box by their width, which made every bordered
button/pill 2-3px larger than the design. Paint the stroke on a pseudo-element instead. */
.elementor-widget-jt-button .jt-button,
.jt-pills--chip .jt-pill.jt-pill { position: relative; border-width: 0; }
.elementor-widget-jt-button .jt-button::before,
.jt-pills--chip .jt-pill.jt-pill::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
border: var(--jt-stroke, 1px) solid; border-color: inherit; border-radius: inherit;
transition: border-color .2s ease;
}
.jt-button--ghost .jt-button, .jt-button--neutral .jt-button { --jt-stroke: 1.5px; }
/* Same rule for bordered containers (home value rows, proof bar). */
.jt-inset-border { border-width: 0 !important; box-shadow: inset 0 0 0 var(--jt-stroke, 1px) var(--e-global-color-jt_line); }
/* Figma has two outline pills and this rule gave every "Neutral outline" button the smaller one,
so the page CTAs ended up with the home card's geometry. Only the home Resources head is
Ghost Outline — 164x43 with 12/24 padding (69:1251); it opts in with jt-btn-ghost-outline.
Everything else keeps Button/Outline (241:30385): 14/26 padding, 44px tall, from the
.jt-button--neutral rule in the Pill Button block above. */
.jt-button--neutral.jt-btn-ghost-outline .jt-button { padding: 12px 24px; }
/* Mobile: eyebrow/trust pills that have to wrap should break evenly instead of
dropping a single orphan word onto the second line. */
@media (max-width: 767px) { .jt-pill__text { text-wrap: balance; } }
/* === Round 4 fixes: area A (end) === */
/* === Round 4 fixes: area B (start) === */
/* Boxed fields are 43px tall including their 1px border, with the text 16px in from the edge
(Figma 55:933). The label sits 7px above it, from the field group's gap alone. */
.jt-form--boxed .elementor-field-group .elementor-field-textual { min-height: 43px; padding: 12px 15px; line-height: 17px; }
.jt-form--boxed .elementor-field-group textarea.elementor-field-textual { min-height: 113px; line-height: 1.4; padding: 12px 15px; }
/* Dropdown arrow: the design-system chevron, not Elementor's solid caret glyph. */
.jt-form .elementor-select-wrapper .select-caret-down-wrapper { display: grid; place-items: center; }
.jt-form .elementor-select-wrapper .select-caret-down-wrapper svg { display: none; }
.jt-form .elementor-select-wrapper .select-caret-down-wrapper::after {
content: ""; width: 7px; height: 7px; box-sizing: border-box;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
/* === Round 4 fixes: area B (end) === */
/* === Round 4 fixes: area C (start) === */
/* Service cards: a lone card on a short last row spans it rather than leaving an empty column.
A row of TWO keeps the 3-column track: Figma draws Contract Cleaning's last row as two 409px
cards left-aligned with the third slot hidden, and stretching them to 625px re-crops the photos
so hard that both read as blank grey (round-6 VIS6-03). */
@media (min-width: 1025px) {
.jt-services__row:last-child:not(:first-child):has(> .jt-service-card:only-child) { --jt-cols: 1 !important; }
}
/* Facility cards: a lone card on the last row spans it, at every width and without JS
(Government & Municipal has 7 facilities in a 2-column grid). */
.jt-selectable__grid > .jt-select-card:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
/* Brand chips: the brand's Logo replaces its name when one is set; the name stays as the fallback. */
/* C10-08 — the logo ![]()
carries alt="" (it is decorative next to the name), so hiding the name
outright left the chip with no accessible name at all. Hide it visually, keep it for AT. */
.jt-brand-chip:has(.jt-brand-logo img) .jt-brand-name {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* An explicit height, not max-height: these are manufacturer SVGs that carry a viewBox but no
intrinsic width/height, so max-height leaves the browser using the viewBox units as pixels —
Rubbermaid drew at 27x9 and GOJO collapsed to 0x0. A set height with width:auto makes every
logo scale from its own aspect ratio to one consistent cap height. */
.jt-brand-chip .jt-brand-logo img {
height: 26px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* R9 — the strip sits on the dark band, where GOJO's near-black wordmark and SCA's navy would
disappear and six different brand palettes would fight each other. Render every logo as one
flat white mark, the convention for a manufacturer strip and the same treatment the icon SVGs
get (CLAUDE.md). Slightly held back from pure white so the logos read as supporting marks. */
.jt-brand-chip .jt-brand-logo img { filter: brightness(0) invert(1); opacity: .78; }
.jt-brand-chip:hover .jt-brand-logo img { opacity: 1; }
/* ...except a mark whose wordmark is knocked OUT of a filled shape. Rubbermaid's is white type
inside a red badge, so inverting fills the badge solid and the name disappears entirely. The
badge carries its own contrast against the dark band, so it keeps its brand colour. Any future
logo built the same way belongs on this list. */
.jt-brand-chip .jt-brand-logo img[src*="rubbermaid"] { filter: none; opacity: 1; }
/* === Round 4 fixes: area C (end) === */
/* === Round 4 fixes: area D (start) === */
/* Legal / article TOC: Elementor adds an 8px margin after the marker, pushing the
title to 34px from the row start. Figma puts it at 27px (number + the 10px gap). */
.jt-toc .elementor-toc__list-item-text-wrapper::before { margin-right: 0; }
/* Article TOC rows sit 12px apart in Figma. */
.jt-toc--article .elementor-toc__list-wrapper { gap: 12px; }
/* Article prev/next nav: labels inherit the 1.55 body line-height (24.8px), making the
bar 56px tall. Figma is 49px (30px padding + a 19.5px label). */
.jt-post-nav .elementor-post-navigation,
.jt-post-nav .elementor-post-navigation__link,
.jt-post-nav .post-navigation__prev--label,
.jt-post-nav .post-navigation__next--label { line-height: 1.3; }
/* SDS "Need a sheet" box: Figma strokes inside the 121px box, CSS adds the 1px border
outside the content box. Draw it inset so the outer height matches. */
.jt-sds-help { border-width: 0 !important; box-shadow: inset 0 0 0 1px var(--e-global-color-primary); }
/* === Round 4 fixes: area D (end) === */
/* === Round 4 fixes: area E (start) === */
/* Role cards ship open so their details and Apply button are readable without JavaScript;
with JavaScript the closed ones collapse and the toggle reopens them. */
html.jt-js .jt-role:not(.is-open) .jt-role__body { display: none; }
/* === Round 4 fixes: area E (end) === */
/* === Round 4 fixes: accessibility (start) === */
/* 1.4.11 Non-text contrast — text field boundaries. The design draws pill fields with no border
(#f1f1f1 on white = 1.13:1) and boxed fields with a #e2e2e2 hairline (1.18:1 on #f4f4f4), so the
edge of every input was invisible. Same hairline, darkened to the lightest grey that clears 3:1
against white (4.48:1), #f1f1f1 (3.62:1), #f4f4f4 (4.00:1) and the dark card fill (3.16:1).
Fields are border-box with fixed heights, so the stroke does not resize them. */
:root { --jt-field-line: #767676; }
.jt-form .elementor-field-textual,
.jt-form .elementor-field-type-select select,
.elementor-widget-jt-sds-library .jt-sds__search { border: 1px solid var(--jt-field-line) !important; }
/* Fields on the dark newsletter band already read at 10.9:1 against #2b2b2b: keep the design hairline. */
.jt-form-on-dark .elementor-field-textual,
.jt-form-on-dark .elementor-field-type-select select { border-color: var(--e-global-color-jt_line_field) !important; }
/* 1.4.11 — a selected card was signalled by its gold fill alone (1.68:1 against the unselected
card). The red stroke adds a 3.72:1 cue against the gold fill and 6.12:1 against an unselected
card. Drawn inset, so the card does not change size (Figma strokes are inside). */
.elementor-element .jt-select-card.is-active,
.elementor-element .jt-select-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--e-global-color-primary); }
/* 2.5.8 Target size — carousel dots are 9px; give them an exact 24x24 hit area (dot centres are
25px apart at the 16px gap above, so neighbouring targets never overlap). */
.jt-carousel-nav__dot::after {
content: ""; position: absolute; inset: auto; top: 50%; left: 50%;
width: 24px; height: 24px; transform: translate(-50%, -50%);
}
/* 1.4.10 Reflow at 320px — pill button labels are nowrap by design; below tablet a long label
("Request our cleaning checklist", 292px in a 234px column) wraps instead of overflowing. */
@media (max-width: 767px) {
.elementor-widget-jt-button .jt-button { white-space: normal; }
.elementor-widget-jt-button .jt-button__text { text-wrap: balance; }
/* Phone links are nowrap so a number never breaks mid-string; when the link is a whole
sentence ("Prefer to talk? Call (401) 724-4300") only the number itself stays unbroken. */
a.jt-tel-phrase { white-space: normal; }
}
a.jt-tel-phrase .jt-nowrap { white-space: nowrap; }
/* Panels that JavaScript collapses ship open, so FAQ answers, tab panels and supply details are
readable with scripting off. html.jt-js is set in , so nothing flashes open first;
janitech.js then swaps the flag for the hidden attribute it toggles at runtime. */
html.jt-js [data-jt-collapsed] { display: none !important; }
/* === Round 4 fixes: accessibility (end) === */
/* === Round 5: touch targets and small text === */
/* Controls that read as 32-36px boxes get a 44px touch area without changing how they look. */
@media (max-width: 1024px) {
.jt-tab, .jt-filter-pills .e-filter-item, .jt-faq-item__q { min-height: 44px; display: inline-flex; align-items: center; }
.jt-faq-item__q { display: flex; }
.elementor-toc__toggle-button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.elementor-field-type-acceptance input[type="checkbox"] { width: 24px; height: 24px; }
.jt-contact-row .elementor-icon-box-title a, .elementor-location-footer .jt-footer-link,
.jt-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
/* Card badges keep the 12px floor the rest of the eyebrows use on touch screens. */
.jt-card__badge, .jt-post-card__badge, .jt-featured__badge { font-size: 12px; }
}
/* === Round 5: readable without JavaScript === */
/* Card descriptions and process-step copy ship visible; the script collapses them once it runs,
the same progressive-enhancement pattern the FAQ and role cards use. */
html.jt-js .jt-service-card__desc { display: none; }
html.jt-js .jt-service-card.is-open .jt-service-card__desc { display: block; }
html:not(.jt-js) .jt-step { flex: 1 1 100%; min-height: 320px; }
html:not(.jt-js) .jt-step__body { position: static; opacity: 1; visibility: visible; margin-top: 12px; }
html:not(.jt-js) .jt-step__icon { position: static; transform: none; }
/* === Round 6 fixes: accessibility (contrast + target size) === */
/* A11Y6-01/02/03/04 — 1.4.3 / 1.4.11. The dark hero's scrim is a 90deg ramp sized for a photo
pinned right:0; width:60%. Below 1025px Elementor widens that photo to 100%, so the
near-transparent end of the ramp (15% at the right edge) ends up under the headline, the lede
and the stat band instead of under bare photo: the gold measured 1.65:1 (needs 3.0), the
0.9-alpha lede 2.18:1 (needs 4.5), the gold stat units 2.22:1 and the white stat labels 3.79:1.
Full-bleed photo gets a full-bleed scrim: a 180deg ramp in the same #232323, deep enough that
even a blown-out white pixel in the photo keeps gold at 3.0+ (needs ~.65 alpha) and the gold
stat units — 17.5px/600, so small text at 4.5 — at 4.5+ (needs ~.75). It deepens down the hero
because the copy stacks: headline at the top, stat band at the bottom over the busiest crop. */
@media (max-width: 1024px) {
.jt-scrim--hero-dark::after,
.jt-scrim--hero-dark-wide::after,
.jt-scrim--hero-dark-stats::after {
background: linear-gradient(180deg,
rgba(35, 35, 35, .70) 0%,
rgba(35, 35, 35, .74) 38%,
rgba(35, 35, 35, .88) 100%);
}
.jt-scrim--hero-page::after {
background: linear-gradient(180deg,
rgb(var(--jt-shade-page) / .70) 0%,
rgb(var(--jt-shade-page) / .74) 38%,
rgb(var(--jt-shade-page) / .88) 100%);
}
}
/* A11Y6-05 — 1.4.3. The process-step card scrim ends at .7, which puts the white 24px title on
2.97-3.03:1 at phone widths (the "Inspection" card is worst: a white clipboard sits right under
the title). Two different geometries below 1025px, where the cards stack:
* A COLLAPSED card is an 84px strip and its title sits across the vertical middle of it
(y .33-.67), not at the bottom, so no bottom-weighted ramp can reach it — deepening the
bottom stop alone actually made it worse (2.98 -> 2.68). It needs a near-flat tint instead:
.52-.62 holds white 24px/600 at 4.0:1 even against a blown-out white pixel in the photo.
* An ACTIVE card is 320px with the title at y .53-.76 (the description and the next-step
button sit below it), so its ramp has to be deep by mid-card, not only at the very bottom.
Above 1024px nothing changes: there the cards sit side by side and a collapsed card's title is
opacity 0, so only the active card's own bottom-weighted ramp is ever visible. */
@media (max-width: 1024px) {
.jt-step::after {
background: linear-gradient(180deg,
rgb(var(--jt-shade-warm) / .52) 0%,
rgb(var(--jt-shade-warm) / .62) 100%);
}
.jt-step.is-active::after {
background: linear-gradient(180deg,
rgb(var(--jt-shade-warm) / .25) 0%,
rgb(var(--jt-shade-warm) / .52) 45%,
rgb(var(--jt-shade-warm) / .90) 100%);
}
}
/* A11Y6-06 — 2.5.8 was already met (24x24), but the dots cleared it only by the 1px of spacing
margin. Vertical space either side of the dot row is free, so the hit area goes to the full
44px there. Width stays at the 25px dot pitch: 44px-wide areas on 25px centres would overlap,
and an overlapping target is a mis-tap — tapping 4px right of a dot would select its neighbour,
which is a worse outcome than a target that is 44 in one axis and 25 in the other. Spreading
the dots to 35px centres would buy the second axis at the cost of the design. */
.jt-carousel-nav__dot::after { width: 25px; height: 44px; }
/* === Round 7: the hero walk-through form === */
/* A white card inside the dark hero, collapsed under the hero's two buttons. The hero's red button
is its toggle (a real