.shk-timeline{box-sizing:border-box;display:grid;grid-template-columns:var(--shk-sidebar) minmax(0,1fr);width:100%;max-width:100%;min-height:var(--shk-height,560px);overflow:hidden;background:var(--shk-content-bg);color:var(--shk-text);font-family:var(--font-body,"Lato",sans-serif)}.shk-timeline *{box-sizing:border-box}.shk-timeline button,.shk-timeline a{font:inherit}.shk-timeline__years{min-width:0;background:var(--shk-rail-bg);color:var(--shk-rail-text);overflow:hidden}.shk-timeline__years-viewport{height:100%;max-height:var(--shk-height,560px);overflow-y:auto;scrollbar-width:none}.shk-timeline__years-viewport::-webkit-scrollbar,.shk-timeline__viewport::-webkit-scrollbar{display:none}.shk-timeline__years-track{display:flex;min-height:100%;flex-direction:column;justify-content:center;padding:48px 24px;gap:16px}.shk-timeline__year{appearance:none!important;border:0!important;border-radius:0!important;background:none!important;color:var(--shk-inactive-year)!important;min-height:44px;padding:4px 12px;cursor:pointer;text-align:center;font-family:var(--font-heading,"Oswald",sans-serif)!important;font-size:clamp(1.1rem,2vw,1.55rem)!important;transition:color .2s,transform .2s}.shk-timeline__year-full{display:none;font-size:clamp(2.25rem,4vw,4.5rem);font-weight:700;line-height:1}.shk-timeline__year-short{display:inline}.shk-timeline__year.is-active{color:var(--shk-active-year)!important;transform:scale(1.02)}.shk-timeline__year.is-active .shk-timeline__year-full{display:inline}.shk-timeline__year.is-active .shk-timeline__year-short{display:none}.shk-timeline__content{position:relative;min-width:0;padding:48px 0 48px 48px;overflow:hidden}.shk-timeline__controls{display:flex;justify-content:flex-end;gap:10px;padding:0 40px 22px 0}.shk-timeline__controls button{display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--shk-accent)!important;border-radius:50%!important;background:transparent!important;color:var(--shk-accent)!important;cursor:pointer;font-size:var(--shk-arrow-size,1.5rem)}.shk-timeline__controls button:disabled{opacity:.35;cursor:not-allowed}.shk-timeline__viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}.shk-timeline__track{display:flex;gap:var(--shk-gap);padding-right:var(--shk-gap);width:max-content}.shk-timeline-card{flex:0 0 calc((100cqw - (var(--shk-cards) - 1)*var(--shk-gap))/var(--shk-cards));width:calc((100% - (var(--shk-cards) - 1)*var(--shk-gap))/var(--shk-cards));max-width:min(620px,calc(100vw - var(--shk-sidebar) - 80px));scroll-snap-align:start;scroll-snap-stop:always}.shk-timeline__viewport{container-type:inline-size}.shk-timeline-card__year{color:var(--shk-accent);font-family:var(--font-heading,"Oswald",sans-serif);font-size:var(--text-h5,1.25rem);font-weight:700;margin-bottom:12px}.shk-timeline-card__media{aspect-ratio:var(--shk-ratio);overflow:hidden;border-radius:var(--radius-sm,4px);background:#ddd}.shk-timeline-card__image.shk-timeline-card__image{display:block;width:100%;height:100%;object-fit:var(--shk-fit);object-position:var(--shk-position)}.shk-timeline-card__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#ddd,#eee)}.shk-timeline-card__title{margin:20px 0 10px;color:var(--shk-text);font-family:var(--font-heading,"Oswald",sans-serif);font-size:var(--text-h4,clamp(1.5rem,2.5vw,2.3rem));line-height:1.15}.shk-timeline-card__description{font-size:var(--text-body,1rem);line-height:1.65}.shk-timeline-card__description p{margin:0 0 1em}.shk-timeline-card__link{display:inline-block;margin-top:8px;color:var(--shk-accent);font-size:var(--text-link,1rem);font-weight:700;text-underline-offset:4px}.shk-timeline :focus-visible{outline:3px solid var(--shk-accent);outline-offset:3px}.shk-timeline--no-years{grid-template-columns:1fr}.shk-timeline-empty{padding:12px;border-left:4px solid #f47c20;background:#fff8e5}.shk-timeline.is-dragging .shk-timeline__viewport{cursor:grabbing;scroll-snap-type:none;user-select:none}
.shk-timeline{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
/* Superior Homes history reference treatment. */
@media(min-width:1025px){.shk-timeline{min-height:var(--shk-height,680px)}.shk-timeline__years-viewport{max-height:var(--shk-height,680px)}.shk-timeline__years-track{justify-content:flex-start;padding:52px 34px 56px;gap:12px}.shk-timeline__year{display:block;width:100%;min-height:68px;padding:0;font-family:var(--font-heading,"Oswald",sans-serif)!important;font-size:64px!important;font-style:normal;font-weight:400;line-height:68px;letter-spacing:0;text-align:right;color:transparent!important;-webkit-text-stroke:1px var(--shk-inactive-year);text-stroke:1px var(--shk-inactive-year)}.shk-timeline__year-full,.shk-timeline__year-short{font:inherit;line-height:inherit;letter-spacing:inherit}.shk-timeline__year.is-active{color:#fff!important;-webkit-text-stroke:0;transform:none;margin:0}.shk-timeline__content{padding:58px 0 64px clamp(48px,5.25vw,100px)}.shk-timeline__controls{height:58px;align-items:flex-start;gap:14px;padding:0 clamp(34px,4vw,72px) 16px 0}.shk-timeline__controls button,.shk-timeline__controls button:hover,.shk-timeline__controls button:focus,.shk-timeline__controls button:active{display:block;width:auto;height:auto;min-width:30px;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;color:var(--shk-accent);font-size:var(--shk-arrow-size,2rem);line-height:1}.shk-timeline__controls button:disabled{opacity:.3}.shk-timeline__track{gap:clamp(36px,5vw,96px)}.shk-timeline-card{max-width:min(710px,calc(100vw - var(--shk-sidebar) - 140px))}.shk-timeline-card__year{margin-bottom:12px;color:var(--shk-text);font-size:clamp(1.45rem,1.8vw,2rem);font-weight:600}.shk-timeline-card__title{margin:22px 0 12px;font-size:var(--text-h4,clamp(1.85rem,2.25vw,2.7rem));font-weight:600}.shk-timeline-card__description{max-width:44rem;font-size:var(--text-body,clamp(1rem,1.25vw,1.35rem));line-height:1.45}}
@media(min-width:1025px){.shk-timeline{grid-template-columns:260px minmax(0,1fr);min-height:var(--shk-height,720px)}.shk-timeline__years{height:100%;background:#222}.shk-timeline__years-viewport{height:100%;max-height:var(--shk-height,720px)}.shk-timeline__years-track{min-height:100%;justify-content:center;align-items:center;padding:28px 34px;gap:0}.shk-timeline__year{display:block;width:100%;min-height:68px;padding:0;font-family:var(--font-heading,"Oswald",sans-serif)!important;font-size:64px!important;font-style:normal;font-weight:400;line-height:68px;letter-spacing:0;text-align:center;color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.9);text-stroke:1px rgba(255,255,255,.9)}.shk-timeline__year-full,.shk-timeline__year-short{font:inherit;line-height:inherit;letter-spacing:inherit}.shk-timeline__year.is-active{color:#fff!important;-webkit-text-stroke:0;transform:none;margin:0}.shk-timeline__year.is-active .shk-timeline__year-full{font-size:72px;line-height:76px}.shk-timeline__content{height:100%;padding:52px 0 56px 72px;background:var(--shk-content-bg)}.shk-timeline__controls{position:absolute;z-index:2;top:44px;right:42px;height:auto;align-items:center;gap:14px;padding:0}.shk-timeline__controls button,.shk-timeline__controls button:hover,.shk-timeline__controls button:focus,.shk-timeline__controls button:active{display:block;width:auto;height:auto;min-width:30px;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;color:var(--shk-accent);font-size:var(--shk-arrow-size,2rem);line-height:1}.shk-timeline__controls button:disabled{opacity:.3}.shk-timeline__viewport{height:100%}.shk-timeline__track{gap:64px;padding-right:64px}.shk-timeline-card{flex:0 0 clamp(520px,42vw,620px);width:clamp(520px,42vw,620px);max-width:none;background:transparent;border:0;box-shadow:none;text-align:left}.shk-timeline-card__year{margin:0 0 12px;color:var(--shk-text);font-family:var(--font-heading,"Oswald",sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:28px;text-align:left}.shk-timeline-card__media{aspect-ratio:1.4/1;border-radius:4px}.shk-timeline-card__title{margin:20px 0 10px;font-family:var(--font-heading,"Oswald",sans-serif);font-size:28px;font-style:normal;font-weight:400;line-height:32px;text-align:left}.shk-timeline-card__description{max-width:100%;font-family:var(--font-body,"Lato",sans-serif);font-size:16px;font-style:normal;font-weight:300;line-height:22px;text-align:left}}
@media(max-width:1024px){.shk-timeline{grid-template-columns:var(--shk-sidebar-tablet) minmax(0,1fr)}.shk-timeline__years-track{padding:36px 10px}.shk-timeline__content{padding:36px 0 36px 28px}.shk-timeline__track{gap:var(--shk-gap-tablet)}.shk-timeline-card{flex-basis:calc((100cqw - (var(--shk-cards-tablet) - 1)*var(--shk-gap-tablet))/var(--shk-cards-tablet));max-width:calc(100vw - var(--shk-sidebar-tablet) - 48px)}}
@media(max-width:767px){.shk-timeline{display:flex;flex-direction:column;min-height:0}.shk-timeline__years{flex:none}.shk-timeline__years-viewport{height:auto;max-height:none;overflow-x:auto;overflow-y:hidden}.shk-timeline__years-track{min-height:72px;width:max-content;flex-direction:row;align-items:center;justify-content:flex-start;padding:10px 16px;gap:10px}.shk-timeline__year{min-width:50px;padding:5px 8px}.shk-timeline__year-full{font-size:1.55rem}.shk-timeline__content{padding:20px 0 32px 16px}.shk-timeline__controls{padding:0 16px 16px 0}.shk-timeline__track{gap:var(--shk-gap-mobile);padding-right:var(--shk-gap-mobile)}.shk-timeline-card{flex-basis:calc((100cqw - (var(--shk-cards-mobile) - 1)*var(--shk-gap-mobile))/var(--shk-cards-mobile));max-width:none}.shk-timeline-card__title{font-size:clamp(1.45rem,7vw,2rem)}}
@media(prefers-reduced-motion:reduce){.shk-timeline *{scroll-behavior:auto!important;transition:none!important}}
/* Horizontal Milestones layout: year -> circular image on a continuous line -> content. */
.shk-timeline--horizontal{display:block;grid-template-columns:none;min-height:0}
.shk-timeline--horizontal .shk-timeline__content{position:relative;height:auto;padding:56px clamp(20px,4vw,64px);background:var(--shk-content-bg)}
.shk-timeline--horizontal .shk-timeline__controls{position:absolute;z-index:2;left:clamp(20px,4vw,64px);right:auto;top:auto;bottom:14px;height:auto;align-items:center;gap:10px;padding:0}
.shk-timeline--horizontal .shk-timeline__controls button,.shk-timeline--horizontal .shk-timeline__controls button:hover,.shk-timeline--horizontal .shk-timeline__controls button:focus,.shk-timeline--horizontal .shk-timeline__controls button:active{display:block;width:auto;height:auto;min-width:0;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;color:var(--shk-text);font-size:var(--shk-arrow-size,1.35rem);line-height:1;opacity:.5;transition:opacity .2s}
.shk-timeline--horizontal .shk-timeline__controls button:hover:not(:disabled){opacity:1}
.shk-timeline--horizontal .shk-timeline__controls button:disabled{opacity:.2;cursor:not-allowed}
.shk-timeline--horizontal .shk-timeline__viewport{height:auto}
.shk-timeline--horizontal .shk-timeline__track{gap:var(--shk-gap);padding:6px var(--shk-gap) 0 0}
.shk-timeline-card--horizontal{display:flex;flex-direction:column;align-items:center;flex:0 0 calc((100cqw - (var(--shk-cards) - 1)*var(--shk-gap))/var(--shk-cards));width:calc((100% - (var(--shk-cards) - 1)*var(--shk-gap))/var(--shk-cards));max-width:none;text-align:center;scroll-snap-align:start;scroll-snap-stop:always}
/* The base .shk-timeline__track rule only pads the end by one gap width,
 * which is enough for the vertical timeline (its cards are sized so the
 * last one's own snap-start position is always reachable) but not here:
 * each horizontal card is a fraction of the viewport's own width
 * (100cqw/--shk-cards), so on any viewport wider than one card, scrolling
 * the true last card flush to the left edge needs trailing space equal to
 * a full viewport minus one card width -- far more than one gap. Short of
 * that, the browser hits its hard scroll ceiling before the trailing
 * cards can each reach their own snap point, so whichever card straddles
 * that ceiling (not necessarily the last one) ends up permanently
 * cropped at the left edge once you've scrolled near the end -- the
 * "start item cut off" report. This computes the exact trailing space
 * needed from the same --shk-cards/--shk-gap the card width itself is
 * built from, so it stays correct at every column count and breakpoint
 * rather than a guessed pixel value. */
.shk-timeline--horizontal .shk-timeline__track{padding-right:calc((var(--shk-cards) - 1) * (100cqw + var(--shk-gap)) / var(--shk-cards))}
/* Cards are now click/keyboard-activatable (see frontend.js bind()) --
 * give them the pointer affordance and a hover cue to match. */
.shk-timeline-card,.shk-timeline-card--horizontal{cursor:pointer}
.shk-milestone__year{font-family:var(--font-heading,"Oswald",sans-serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--shk-text);text-stroke:1px var(--shk-text);opacity:.3;margin-bottom:14px;transition:color .25s,opacity .25s}
.shk-timeline-card--horizontal.is-active .shk-milestone__year{color:var(--shk-accent);-webkit-text-stroke:0;opacity:1}
.shk-milestone__media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--shk-circle-size);margin-bottom:20px}
.shk-milestone__line{position:absolute;top:50%;left:calc(var(--shk-gap) / -2);width:calc(100% + var(--shk-gap));height:2px;background:var(--shk-line-color);transform:translateY(-50%);z-index:0}
.shk-milestone__circle{position:relative;z-index:1;flex:none;width:var(--shk-circle-size);height:var(--shk-circle-size);border-radius:50%;overflow:hidden;background:#ddd;border:3px solid var(--shk-content-bg);box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.shk-timeline-card--horizontal.is-active .shk-milestone__circle{box-shadow:0 0 0 3px var(--shk-accent);transform:scale(1.15)}
/* Doubled class: same Elementor specificity fight as superior-homes-videos'
 * .shk-videos-card__image and superior-homes-gallery-tabs'
 * .shk-gallery-card__image. Elementor's frontend.min.css ships ".elementor
 * img { height: auto; max-width: 100%; }" -- one class + one element --
 * which outranks a plain ".shk-milestone__image" (one class) and wins the
 * height property. That left the <img> sized to its own natural aspect
 * ratio instead of stretching to fill the circle, so the circle's own
 * #ddd background showed through underneath it -- the gray crescent
 * reported at the bottom of the Supastop photo. Confirmed live via
 * computed styles on wereconsulting.com/shk/shk20/. */
.shk-milestone__image.shk-milestone__image{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--shk-position);filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.shk-timeline-card--horizontal.is-active .shk-milestone__image{filter:none;opacity:1}
.shk-timeline-card--horizontal:not(.is-active):hover .shk-milestone__circle{box-shadow:0 0 0 3px rgba(242,140,40,.45);box-shadow:0 0 0 3px color-mix(in srgb,var(--shk-accent,#f28c28) 45%,transparent);transform:scale(1.08)}
.shk-timeline-card--horizontal:not(.is-active):hover .shk-milestone__image{filter:grayscale(.4);opacity:.85}
.shk-timeline-card--horizontal:not(.is-active):hover .shk-milestone__year{opacity:.6}
.shk-milestone__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#ddd,#eee)}
.shk-milestone__content{max-width:22rem;color:var(--shk-text);font-size:var(--text-body,.95rem);line-height:1.5;opacity:.7;transition:opacity .25s}
.shk-timeline-card--horizontal.is-active .shk-milestone__content{opacity:1}
.shk-milestone__content p{margin:0 0 .6em}
.shk-milestone__content p:last-child{margin-bottom:0}
.shk-milestone__link{display:inline-block;margin-top:8px;color:var(--shk-accent);font-size:var(--text-link,.95rem);font-weight:700;text-underline-offset:4px}
@media(min-width:1025px){.shk-timeline--horizontal{grid-template-columns:none}.shk-timeline--horizontal .shk-timeline__content{height:auto;padding:64px clamp(32px,4vw,80px)}}
@media(max-width:1024px){.shk-timeline--horizontal{grid-template-columns:none}.shk-timeline--horizontal .shk-timeline__content{padding:44px 24px}.shk-timeline--horizontal .shk-milestone__media{height:var(--shk-circle-size-tablet)}.shk-timeline--horizontal .shk-milestone__circle{width:var(--shk-circle-size-tablet);height:var(--shk-circle-size-tablet)}}
@media(max-width:767px){.shk-timeline--horizontal{display:block}.shk-timeline--horizontal .shk-timeline__content{padding:28px 16px 40px}.shk-timeline--horizontal .shk-timeline__track{gap:var(--shk-gap-mobile);padding:6px calc((var(--shk-cards-mobile) - 1) * (100cqw + var(--shk-gap-mobile)) / var(--shk-cards-mobile)) 0 0}.shk-timeline-card--horizontal{flex-basis:calc((100cqw - (var(--shk-cards-mobile) - 1)*var(--shk-gap-mobile))/var(--shk-cards-mobile))}.shk-timeline--horizontal .shk-milestone__media{height:var(--shk-circle-size-mobile)}.shk-timeline--horizontal .shk-milestone__circle{width:var(--shk-circle-size-mobile);height:var(--shk-circle-size-mobile)}.shk-milestone__year{font-size:1.25rem;margin-bottom:10px}.shk-milestone__content{font-size:.85rem;max-width:14rem}}
/* Arrow position overrides: opt-in via arrow_position attribute, works for both layouts. */
.shk-timeline--arrows-top-left .shk-timeline__controls,.shk-timeline--arrows-top-right .shk-timeline__controls,.shk-timeline--arrows-bottom-left .shk-timeline__controls,.shk-timeline--arrows-bottom-right .shk-timeline__controls{position:absolute;z-index:3;height:auto;padding:0;top:auto;right:auto;bottom:auto;left:auto}
.shk-timeline--arrows-top-left .shk-timeline__controls{top:20px;left:20px}
.shk-timeline--arrows-top-right .shk-timeline__controls{top:20px;right:20px}
.shk-timeline--arrows-bottom-left .shk-timeline__controls{bottom:20px;left:20px}
.shk-timeline--arrows-bottom-right .shk-timeline__controls{bottom:20px;right:20px}