/* ================================================
   SKI & SNOWBOARD SERVICING — The Skiers Lounge
   Scoped to .tsl-servicing. Standalone: shares nothing
   with /our-store/ or /guides/, which are Captain's
   Cabin builds.

   DIRECTION: workshop docket. Warm paper ground,
   burgundy as ink, hairline rules, stamped ordinals
   and a ledger for the price lists. Deliberately the
   opposite of a dark glass-panel canvas.

   Type comes from the site itself - Cerebri Sans is
   loaded as citrfontreg / citrfontbold in
   CSS/global/global-theme.css. Nothing is imported.
   ================================================ */

   .tsl-servicing {
    /* Ink */
    --tsl-ink: #241012;
    --tsl-ink-soft: #5a4649;
    --tsl-muted: #857477;

    /* Brand, from CSS/global/CG-SKIS-Variables.css */
    --tsl-brand: #9e4148;
    --tsl-brand-deep: #743036;
    --tsl-brand-dark: #5e282d;
    --tsl-brand-wash: #f5ecec;

    /* Ground */
    --tsl-paper: #f2efec;
    --tsl-paper-deep: #e9e4e0;
    --tsl-card: #ffffff;

    /* Rules */
    --tsl-rule: rgba(36, 16, 18, 0.14);
    --tsl-rule-soft: rgb(36 16 18 / 5%);
    /* The graph-paper ground only; kept far lighter than the rules */
    --tsl-grid: rgb(36 16 18 / 2%);
    --tsl-radius: 5px;
    --tsl-radius-sm: 3px;
    --tsl-gutter: clamp(20px, 5vw, 72px);
    --tsl-max: 2000px;
    --tsl-section-gap: clamp(64px, 8vh, 112px);
    /* Clears the site header plus the sticky index */
    --tsl-scroll-margin: 150px;
    --tsl-display: 'citrfontbold', 'Cerebri Sans', 'Helvetica Neue', Arial, sans-serif;
    --tsl-body: 'citrfontreg', 'Cerebri Sans', 'Helvetica Neue', Arial, sans-serif;
}

.tsl-servicing {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    overflow-x: clip;
    font-family: var(--tsl-body);
    color: var(--tsl-ink-soft);
    /* A hairline grid, barely there - the graph paper a workshop docket
       would be printed on. Sits under everything on the paper ground. */
    background-color: #fff;
    background-image:
        linear-gradient(var(--tsl-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--tsl-grid) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
}

.tsl-servicing *,
.tsl-servicing *::before,
.tsl-servicing *::after {
    box-sizing: border-box;
}

.tsl-servicing img {
    max-width: 100%;
    display: block;
}

.tsl-servicing a {
    color: var(--tsl-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.18s ease;
}

.tsl-servicing a:hover {
    color: var(--tsl-brand-dark);
}

.tsl-servicing a:focus-visible,
.tsl-servicing button:focus-visible,
.tsl-servicing [tabindex]:focus-visible {
    outline: 2px solid var(--tsl-brand);
    outline-offset: 3px;
    border-radius: var(--tsl-radius-sm);
}

/* Screen-reader-only text */
.tsl-servicing-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tsl-servicing-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ================================================
   SHARED TYPE
   ================================================ */
/* :where() keeps these resets at zero class specificity, so any
   single-class rule further down (hero note, labels, tier notes) can
   set its own margin without being beaten by the reset */
:where(.tsl-servicing) h1,
:where(.tsl-servicing) h2,
:where(.tsl-servicing) h3,
:where(.tsl-servicing) h4 {
    font-family: var(--tsl-display);
    font-weight: normal;
    color: var(--tsl-ink);
    margin: 0;
}

:where(.tsl-servicing) p {
    margin: 0;
}

.tsl-servicing-label {
    font-family: var(--tsl-display);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tsl-ink);
    margin: 0 0 8px;
}

/* Every figure on the page is set in tabular numerals so prices line up
   in a column the way a printed price list does */
.tsl-servicing-tier-price,
.tsl-servicing-ledger-price,
.tsl-servicing-docket-fig {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.tsl-servicing-prose p {
    font-size: 16px;
    line-height: 1.75;
}

/* Anything that follows a paragraph, list or heading inside prose gets
   the same breathing room, so nothing sits hard against the block above */
.tsl-servicing-prose p + p,
.tsl-servicing-prose ul + p,
.tsl-servicing-prose p + ul,
.tsl-servicing-prose div + p,
.tsl-servicing-prose p + div {
    margin-top: 16px;
}

.tsl-servicing-lead {
    font-family: var(--tsl-display);
    font-size: clamp(19px, 2vw, 23px) !important;
    line-height: 1.5 !important;
    color: var(--tsl-ink);
}


/* ================================================
   CTA
   A hard-edged block with an offset shadow that
   collapses on press, like a stamp being pushed down.
   ================================================ */
.tsl-servicing-cta {
    display: inline-block;
    padding: 15px 30px;
    background: var(--tsl-brand);
    color: #fff !important;
    font-family: var(--tsl-display);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    border-radius: var(--tsl-radius-sm);
    box-shadow: 4px 4px 0 var(--tsl-brand-dark);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tsl-servicing-cta:hover,
.tsl-servicing-cta:focus {
    background: var(--tsl-brand-deep);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--tsl-brand-dark);
    color: #fff !important;
}

.tsl-servicing-cta--ghost {
    background: transparent;
    color: var(--tsl-brand) !important;
    box-shadow: inset 0 0 0 2px var(--tsl-brand);
}

.tsl-servicing-cta--ghost:hover,
.tsl-servicing-cta--ghost:focus {
    background: var(--tsl-brand);
    color: #fff !important;
    transform: none;
    box-shadow: inset 0 0 0 2px var(--tsl-brand);
}

.tsl-servicing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}


/* ================================================
   HERO
   Asymmetric: type on paper to the left, photography
   running off the right edge of the viewport.
   ================================================ */
.tsl-servicing-hero {
    max-width: var(--tsl-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
    min-height: min(74vh, 700px);
    border-bottom: 1px solid var(--tsl-rule);
}

.tsl-servicing-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(44px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(44px, 6vw, 88px) var(--tsl-gutter);
}

.tsl-servicing-hero h1 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    margin: 0;
    max-width: 18ch;
}

/* The location half of the title, set in the brand as a printed
   overline would be */
.tsl-servicing-hero h1 em {
    font-style: normal;
    color: var(--tsl-brand);
}

/* Strapline, then the sub-line beneath it */
.tsl-servicing-hero-strap {
    margin-top: 22px;
    max-width: 40ch;
    font-family: var(--tsl-display);
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.45;
    color: var(--tsl-ink);
}

.tsl-servicing-hero-sub {
    margin-top: 14px;
    max-width: 44ch;
    font-size: 17px;
    line-height: 1.7;
}

.tsl-servicing-hero-note {
    margin-top: 32px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tsl-muted);
}

.tsl-servicing-rating {
    margin-top: 18px;
    font-family: var(--tsl-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tsl-ink);
}

.tsl-servicing-rating-stars {
    color: var(--tsl-brand);
    letter-spacing: 0.05em;
    margin-right: 6px;
}

.tsl-servicing-hero-media {
    position: relative;
    overflow: hidden;
    background: var(--tsl-paper-deep);
}

.tsl-servicing-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: tsl-hero-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes tsl-hero-settle {
    from { transform: scale(1.07); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Registration mark: a thin frame offset into the image, the way a
   print proof is trimmed */
.tsl-servicing-hero-media::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    pointer-events: none;
}


/* ================================================
   DOCKET STRIP — the four key facts
   A ruled band, not a floating card. The turnaround
   figure is the one number the page shouts.
   ================================================ */
.tsl-servicing-docket {
    max-width: var(--tsl-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    background: var(--tsl-card);
    border-bottom: 1px solid var(--tsl-rule);
}

.tsl-servicing-docket-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 34px);
    border-left: 1px solid var(--tsl-rule);
}

.tsl-servicing-docket-cell:first-child {
    border-left: none;
}

.tsl-servicing-docket-cell--main {
    background: var(--tsl-brand);
    color: #fff;
}

.tsl-servicing-docket-fig {
    font-family: var(--tsl-display);
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 0.95;
    letter-spacing: -2px;
    color: #fff;
}

.tsl-servicing-docket-fig span {
    font-size: 0.3em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    vertical-align: 0.9em;
    margin-left: 8px;
}

.tsl-servicing-docket-label {
    font-family: var(--tsl-display);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--tsl-ink);
}

.tsl-servicing-docket-cell--main .tsl-servicing-docket-label {
    color: rgba(255, 255, 255, 0.82);
}

.tsl-servicing-docket-cell .tsl-servicing-icon {
    color: var(--tsl-brand);
}

/* Small print inside a docket cell. The priority caveat sits with the
   turnaround it qualifies rather than adrift under the whole strip. */
.tsl-servicing-docket-sub {
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tsl-muted);
}

.tsl-servicing-docket-cell--main .tsl-servicing-docket-sub {
    color: rgba(255, 255, 255, 0.72);
}

/* ================================================
   STICKY INDEX — built from DOM order by the JS
   A ruled bar of tracked labels with a sliding
   underline, not a row of pills.
   ================================================ */
.tsl-servicing-jumpnav {
    max-width: var(--tsl-max);
    margin-inline: auto;
    position: sticky;
    top: 115px;
    z-index: 30;
    background: rgba(242, 239, 236, 0.94);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--tsl-rule);
    /* Hidden until the JS has filled it, so an empty bar never flashes */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tsl-servicing-jumpnav.is-ready {
    opacity: 1;
}

.tsl-servicing-jumpnav-track {
    display: flex;
    gap: 0;
    max-width: var(--tsl-max);
    margin: 0 auto;
    padding: 0 var(--tsl-gutter);
    overflow-x: auto;
    /* Without this, overflow-y computes to auto alongside overflow-x and the
       bar picks up a stray vertical scroll */
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tsl-servicing-jumpnav-track::-webkit-scrollbar {
    display: none;
}

.tsl-servicing-jumpnav-item {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 16px 18px;
    font-family: var(--tsl-display);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tsl-muted);
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.18s ease;
}

.tsl-servicing-jumpnav-item::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 2px;
    background: var(--tsl-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tsl-servicing-jumpnav-num {
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--tsl-brand);
    opacity: 0.6;
}

.tsl-servicing-jumpnav-item:hover {
    color: var(--tsl-ink);
}

.tsl-servicing-jumpnav-item.is-active {
    color: var(--tsl-ink);
}

.tsl-servicing-jumpnav-item.is-active::after {
    transform: scaleX(1);
}

.tsl-servicing-jumpnav-item.is-active .tsl-servicing-jumpnav-num {
    opacity: 1;
}


/* ================================================
   SECTIONS
   ================================================ */
.tsl-servicing-sections {
    max-width: var(--tsl-max);
    margin: 0 auto;
    padding: clamp(56px, 7vh, 88px) var(--tsl-gutter) clamp(72px, 9vh, 120px);
}

.tsl-servicing-section {
    scroll-margin-top: var(--tsl-scroll-margin);
}

.tsl-servicing-section + .tsl-servicing-section {
    margin-top: var(--tsl-section-gap);
}

/* Stamped ordinal in the margin, heading beside it, heavy rule beneath.
   The ordinal itself is injected by tsl-servicing.js from DOM order. */
.tsl-servicing-section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 0 22px;
    padding-bottom: 16px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--tsl-ink);
}

.tsl-servicing-section-num {
    font-family: var(--tsl-display);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.8;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1px var(--tsl-brand);
}

.tsl-servicing-section-head h2 {
    font-size: clamp(23px, 2.9vw, 36px);
    line-height: 1.12;
    letter-spacing: -1px;
    max-width: 24ch;
}

/* Panels carry no card chrome by default - content sits on the paper.
   The reveal is driven by .is-visible from the JS. */
.tsl-servicing-panel {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tsl-servicing-panel.is-visible {
    opacity: 1;
    transform: none;
}

/* Used where a block genuinely needs to lift off the paper */
.tsl-servicing-card {
    background: var(--tsl-card);
    border: 1px solid var(--tsl-rule);
    border-radius: var(--tsl-radius);
    padding: clamp(24px, 3vw, 38px);
}

.tsl-servicing-divider {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--tsl-rule);
}

.tsl-servicing-panel-note {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--tsl-muted);
}


/* ================================================
   ICONS
   ================================================ */
.tsl-servicing-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--tsl-brand);
}

.tsl-servicing-icon svg {
    width: 24px;
    height: 24px;
}


/* ================================================
   SPLIT — prose beside a single image
   ================================================ */
.tsl-servicing-split {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}

.tsl-servicing-figure {
    margin: 0;
    position: relative;
    border-radius: var(--tsl-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--tsl-paper-deep);
}

.tsl-servicing-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ================================================
   ZIG-ZAG — the four reasons to service
   Alternating sides, so the column never reads as a
   stack of identical cards.
   ================================================ */
.tsl-servicing-zig {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 5vw, 64px);
}

.tsl-servicing-zig-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
}

.tsl-servicing-zig-row:nth-child(even) .tsl-servicing-zig-media {
    order: -1;
}

.tsl-servicing-zig-media {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--tsl-radius);
    background: var(--tsl-paper-deep);
}

.tsl-servicing-zig-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tsl-servicing-zig-row:hover .tsl-servicing-zig-media img {
    transform: scale(1.04);
}

.tsl-servicing-zig-body h3 {
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.2;
    letter-spacing: -0.5px;
    max-width: 18ch;
}

.tsl-servicing-zig-body p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.75;
    max-width: 46ch;
}


/* ================================================
   PLAIN LIST — the "typically covers" bullets
   ================================================ */
.tsl-servicing-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.tsl-servicing-list li {
    position: relative;
    padding: 7px 0 7px 20px;
    font-size: 15.5px;
    line-height: 1.65;
}

.tsl-servicing-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 9px;
    height: 1px;
    background: var(--tsl-brand);
}


/* ================================================
   CALLOUT — warnings and conditions
   ================================================ */
.tsl-servicing-callout {
    display: flex;
    gap: 18px;
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--tsl-brand-wash);
    border-left: 4px solid var(--tsl-brand);
    border-radius: 0 var(--tsl-radius) var(--tsl-radius) 0;
}

.tsl-servicing-callout p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--tsl-ink-soft);
}

.tsl-servicing-callout p + p {
    margin-top: 10px;
}

.tsl-servicing-callout strong {
    color: var(--tsl-brand-dark);
}


/* ================================================
   SERVICE TIERS
   A comparison band. The featured column inverts,
   rather than being flagged with a ribbon.
   ================================================ */
.tsl-servicing-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--tsl-rule);
    border: 1px solid var(--tsl-rule);
    border-radius: var(--tsl-radius);
    overflow: hidden;
}

.tsl-servicing-tier {
    display: flex;
    flex-direction: column;
    padding: 30px 24px 28px;
    background: var(--tsl-card);
}

.tsl-servicing-tier--featured {
    background: var(--tsl-ink);
}

.tsl-servicing-tier-name {
    font-size: 21px;
    letter-spacing: -0.3px;
}

.tsl-servicing-tier--featured .tsl-servicing-tier-name {
    color: #fff;
}

.tsl-servicing-tier-sub {
    margin-top: 3px;
    font-family: var(--tsl-display);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tsl-brand);
}

.tsl-servicing-tier--featured .tsl-servicing-tier-sub {
    color: #d9969b;
}

.tsl-servicing-tier-price {
    display: block;
    margin-top: 22px;
    font-family: var(--tsl-display);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -2.5px;
    color: var(--tsl-ink);
}

.tsl-servicing-tier--featured .tsl-servicing-tier-price {
    color: #fff;
}

.tsl-servicing-tier-price span {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--tsl-muted);
}

/* Who the tier is for, under the price */
.tsl-servicing-tier-for {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tsl-muted);
}

.tsl-servicing-tier--featured .tsl-servicing-tier-for {
    color: rgba(255, 255, 255, 0.65);
}

.tsl-servicing-tier-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    border-top: 1px solid var(--tsl-rule);
}

.tsl-servicing-tier--featured .tsl-servicing-tier-list {
    border-top-color: rgba(255, 255, 255, 0.18);
}

.tsl-servicing-tier-list li {
    position: relative;
    padding: 11px 0 11px 20px;
    font-size: 14px;
    line-height: 1.55;
    border-bottom: 1px solid var(--tsl-rule-soft);
}

.tsl-servicing-tier--featured .tsl-servicing-tier-list li {
    color: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.tsl-servicing-tier-list li:last-child {
    border-bottom: none;
}

.tsl-servicing-tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 9px;
    height: 1px;
    background: var(--tsl-brand);
}


/* ================================================
   LEDGER — the price lists
   Dot leaders running from the item to its price, the
   way a printed tariff sets them. Replaces the boxed
   tables entirely.
   ================================================ */
.tsl-servicing-ledger {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.tsl-servicing-ledger li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--tsl-rule-soft);
}

.tsl-servicing-ledger li:first-child {
    border-top: 1px solid var(--tsl-rule);
}

.tsl-servicing-ledger-item {
    font-size: 15px;
    line-height: 1.5;
    color: var(--tsl-ink-soft);
}

/* The leader itself. Flexes to fill whatever gap is left between the
   label and the price, so it works at any column width. */
.tsl-servicing-ledger-dots {
    flex: 1 1 auto;
    min-width: 18px;
    align-self: center;
    height: 2px;
    background-image: radial-gradient(circle, var(--tsl-rule) 1px, transparent 1px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
}

.tsl-servicing-ledger-price {
    flex: 0 0 auto;
    font-family: var(--tsl-display);
    font-size: 16px;
    white-space: nowrap;
    color: var(--tsl-ink);
}

.tsl-servicing-ledger li.is-feature .tsl-servicing-ledger-price {
    color: var(--tsl-brand);
}

/* Two ledgers side by side, so short lists do not each run the full width */
.tsl-servicing-ledger-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px clamp(32px, 5vw, 72px);
    align-items: start;
}


/* ================================================
   MOSAIC — how the workshop service works
   Four tiles at deliberately unequal widths.
   ================================================ */
.tsl-servicing-steps {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    /* Each tile is as tall as its own content rather than stretched to
       match the tallest in its row */
    align-items: start;
}

.tsl-servicing-step {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--tsl-radius);
    overflow: hidden;
    background: var(--tsl-card);
    border: 1px solid var(--tsl-rule);
}

.tsl-servicing-step:nth-child(1) { grid-column: span 7; }
.tsl-servicing-step:nth-child(2) { grid-column: span 5; }
.tsl-servicing-step:nth-child(3) { grid-column: span 5; }
.tsl-servicing-step:nth-child(4) { grid-column: span 7; }

.tsl-servicing-step-media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tsl-paper-deep);
}

.tsl-servicing-step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tsl-servicing-step:hover .tsl-servicing-step-media img {
    transform: scale(1.04);
}

/* Solid ordinal tab, bottom-left of the image */
.tsl-servicing-step-num {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 7px 14px;
    background: var(--tsl-brand);
    color: #fff;
    font-family: var(--tsl-display);
    font-size: 12px;
    letter-spacing: 0.12em;
}

.tsl-servicing-step-body {
    padding: 20px 24px 24px;
}

.tsl-servicing-step-body h3 {
    font-size: 18px;
    line-height: 1.25;
}

.tsl-servicing-step-body p {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
}


/* ================================================
   VIDEO STRIP
   Two features, then a run of smaller tiles. Wistia
   supplies its own responsive padding from
   CSS/global/CG-SKIS-Variables.css.
   ================================================ */
.tsl-servicing-videos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.tsl-servicing-video {
    margin: 0;
    border: 1px solid var(--tsl-rule);
    border-radius: var(--tsl-radius);
    overflow: hidden;
    background: var(--tsl-card);
    grid-column: span 2;
}

.tsl-servicing-video--feature {
    grid-column: span 3;
}

.tsl-servicing-video figcaption {
    padding: 13px 16px 15px;
    font-family: var(--tsl-display);
    font-size: 13px;
    line-height: 1.4;
    color: var(--tsl-ink);
}


/* ================================================
   FAQS — native details/summary
   ================================================ */
.tsl-servicing-faqs {
    max-width: 78ch;
    border-top: 1px solid var(--tsl-rule);
}

.tsl-servicing-faq {
    border-bottom: 1px solid var(--tsl-rule-soft);
}

.tsl-servicing-faq summary {
    position: relative;
    padding: 18px 40px 18px 0;
    font-family: var(--tsl-display);
    font-size: 17px;
    line-height: 1.4;
    color: var(--tsl-ink);
    cursor: pointer;
    list-style: none;
}

.tsl-servicing-faq summary::-webkit-details-marker {
    display: none;
}

.tsl-servicing-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    color: var(--tsl-brand);
}

.tsl-servicing-faq[open] summary::after {
    content: "\2013";
}

.tsl-servicing-faq p {
    padding: 0 0 20px;
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 68ch;
}


/* ================================================
   CONTACT DETAILS + HOURS — under the Find Us prose
   ================================================ */
.tsl-servicing-contact {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--tsl-rule);
}

.tsl-servicing-contact p {
    margin: 0 0 8px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--tsl-ink-soft);
}

/* Blocks inside the contact column: address, phone, hours */
.tsl-servicing-contact .tsl-servicing-label--stacked {
    margin-top: 34px;
}

.tsl-servicing-contact + .tsl-servicing-cta-row {
    margin-top: 40px;
}

/* A label that follows a ledger or paragraph, rather than opening a block */
.tsl-servicing-label--stacked {
    margin-top: 30px;
}

.tsl-servicing-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 28px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}

.tsl-servicing-hours dt {
    color: var(--tsl-ink);
}

.tsl-servicing-hours dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}


/* ================================================
   MAP
   ================================================ */
.tsl-servicing-map {
    position: relative;
    aspect-ratio: 21 / 9;
    border: 1px solid var(--tsl-rule);
    border-radius: var(--tsl-radius);
    overflow: hidden;
    background: var(--tsl-paper-deep);
}

.tsl-servicing-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ================================================
   BOOKING MODAL — centred native dialog
   The dialog scrolls; the Acuity iframe keeps the
   height its embed script sets, so nothing is clipped.
   ================================================ */
.tsl-servicing-modal {
    width: min(920px, calc(100vw - 32px));
    height: min(90vh, 1000px);
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--tsl-radius);
    background: var(--tsl-card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.tsl-servicing-modal[open] {
    display: flex;
    flex-direction: column;
}

.tsl-servicing-modal::backdrop {
    background: rgba(36, 16, 18, 0.6);
}

/* Fixed header bar, outside the scrolling body, so the close button never
   moves while Acuity resizes its iframe */
.tsl-servicing-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 12px 22px;
    border-bottom: 1px solid var(--tsl-rule);
}

.tsl-servicing-modal-head .tsl-servicing-label {
    margin: 0;
}

.tsl-servicing-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tsl-servicing-modal iframe {
    display: block;
    width: 100%;
    min-height: 800px;
    border: 0;
}

.tsl-servicing-modal-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--tsl-radius-sm);
    background: var(--tsl-brand);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.tsl-servicing-modal-close:hover {
    background: var(--tsl-brand-deep);
}


/* ================================================
   CLOSING BAND
   Full-bleed burgundy, the only heavy block on the
   page, so it lands as a full stop.
   ================================================ */
.tsl-servicing-closing {
    max-width: var(--tsl-max);
    margin-inline: auto;
    margin-top: var(--tsl-section-gap);
    margin-bottom: var(--tsl-section-gap);
    background: var(--tsl-brand-dark);
    color: rgba(255, 255, 255, 0.82);
}

.tsl-servicing-closing-inner {
    max-width: var(--tsl-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 82px) var(--tsl-gutter);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}

.tsl-servicing-closing h2 {
    color: #fff;
    font-size: clamp(25px, 3.2vw, 40px);
    line-height: 1.1;
    letter-spacing: -1px;
    max-width: 18ch;
}

.tsl-servicing-closing p {
    margin-top: 14px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.7;
}

.tsl-servicing-closing .tsl-servicing-cta {
    background: #fff;
    color: var(--tsl-brand-dark) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}

.tsl-servicing-closing .tsl-servicing-cta:hover {
    background: var(--tsl-brand-wash);
    color: var(--tsl-brand-dark) !important;
}

.tsl-servicing-closing .tsl-servicing-cta--ghost {
    background: transparent;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.tsl-servicing-closing .tsl-servicing-cta--ghost:hover {
    background: #fff;
    color: var(--tsl-brand-dark) !important;
    box-shadow: inset 0 0 0 2px #fff;
}

/* ================================================
   TABLET
   ================================================ */
@media (max-width: 1024px) {
    .tsl-servicing {
        --tsl-section-gap: 64px;
        /* Clears the sticky header the bar now sits under, plus the bar */
        --tsl-scroll-margin: 162px;
    }

    /* The site header is fixed at this width, so the index parks below it
       instead of at the top of the viewport */
    .tsl-servicing-jumpnav {
        top: 100px;
    }

    .tsl-servicing-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Photo above the type once the columns collapse, so the page still
       opens on an image rather than a wall of words */
    .tsl-servicing-hero-media {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .tsl-servicing-docket {
        grid-template-columns: 1fr 1fr;
    }

    .tsl-servicing-docket-cell:nth-child(3) {
        border-left: none;
    }

    .tsl-servicing-docket-cell:nth-child(n + 3) {
        border-top: 1px solid var(--tsl-rule);
    }

    .tsl-servicing-tiers {
        grid-template-columns: repeat(2, 1fr);
    }

    .tsl-servicing-step:nth-child(n) {
        grid-column: span 6;
    }

    .tsl-servicing-video,
    .tsl-servicing-video--feature {
        grid-column: span 3;
    }

    .tsl-servicing-closing-inner {
        grid-template-columns: 1fr;
    }
}


/* ================================================
   MOBILE
   ================================================ */
@media (max-width: 767px) {
    .tsl-servicing {
        --tsl-section-gap: 52px;
        --tsl-scroll-margin: 158px;
        /* The graph grid turns to mush at this width */
        background-image: none;
    }

    .tsl-servicing-hero-media::after {
        inset: 10px;
    }

    .tsl-servicing-docket {
        grid-template-columns: 1fr;
    }

    .tsl-servicing-docket-cell {
        border-left: none;
        border-top: 1px solid var(--tsl-rule);
    }

    .tsl-servicing-docket-cell:first-child {
        border-top: none;
    }

    .tsl-servicing-section-head {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tsl-servicing-section-num {
        font-size: 28px;
    }

    .tsl-servicing-split,
    .tsl-servicing-zig-row,
    .tsl-servicing-ledger-pair,
    .tsl-servicing-tiers {
        grid-template-columns: 1fr;
    }

    /* The alternating order would otherwise leave every other row with its
       picture below the words */
    .tsl-servicing-zig-row:nth-child(even) .tsl-servicing-zig-media {
        order: 0;
    }

    .tsl-servicing-steps,
    .tsl-servicing-videos {
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tsl-servicing-steps::-webkit-scrollbar,
    .tsl-servicing-videos::-webkit-scrollbar {
        display: none;
    }

    /* Short of full width so the next tile peeks in, which is the only
       honest signal that the strip scrolls */
    .tsl-servicing-step,
    .tsl-servicing-video,
    .tsl-servicing-video--feature {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }

    .tsl-servicing-ledger-item {
        font-size: 14.5px;
    }

    .tsl-servicing-map {
        aspect-ratio: 4 / 3;
    }

    .tsl-servicing-cta {
        width: 100%;
        text-align: center;
    }
}


/* ================================================
   REDUCED MOTION
   Last in the file so it overrides the animation
   declared above, including inside the media queries.
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    .tsl-servicing *,
    .tsl-servicing *::before,
    .tsl-servicing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tsl-servicing-hero-media img {
        animation: none !important;
        opacity: 1;
    }

    /* The reveal starts at opacity 0, so it has to be forced visible
       rather than just having its transition removed */
    .tsl-servicing-panel {
        opacity: 1 !important;
        transform: none !important;
    }

    .tsl-servicing-zig-row:hover .tsl-servicing-zig-media img,
    .tsl-servicing-step:hover .tsl-servicing-step-media img {
        transform: none;
    }

    .tsl-servicing-cta:hover {
        transform: none;
    }
}


/* ================================================
   SUPPORTING BITS
   Appended after the components they qualify, so the
   modifiers win without needing extra specificity.
   ================================================ */

/* The short standfirst that opens a section, above the block proper */
.tsl-servicing-intro {
    max-width: 62ch;
    margin-bottom: 36px;
}

.tsl-servicing-intro p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--tsl-ink-soft);
}

/* Prose following a ledger or a heading that already carries its own
   space above */
.tsl-servicing-prose--tight {
    margin: 20px 0;
}


/* ================================================
   LOOSENING
   Everything below deliberately breaks a regularity
   that had crept in. Appended last so each override
   sits next to the reason for it rather than being
   buried in the rule it modifies.

   The layout variations are guarded by min-width,
   because they are more specific than the stacking
   rules in the mobile block above and would
   otherwise beat them.
   ================================================ */

/* The heading rule was a heavy black bar repeated nine times down the
   page. Now it is a hairline across the full measure with a short heavy
   brand segment under the ordinal - the rule still organises the page,
   but it reads as a drawn mark rather than a repeated slab. */
.tsl-servicing-section-head {
    position: relative;
    border-bottom: 1px solid rgba(36, 16, 18, 0.28);
}

.tsl-servicing-section-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 58px;
    height: 3px;
    background: var(--tsl-brand);
}

/* Even spacing all the way down is the giveaway. The two sections that
   follow a dense block get more air. */
#tsl-servicing-s-videos,
#tsl-servicing-s-how {
    margin-top: calc(var(--tsl-section-gap) * 1.3);
}

/* One add-on note under the whole band, in place of the same sentence
   set four times across the columns */
.tsl-servicing-tiers-note {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tsl-muted);
}

/* The graph ground was a perfect 64px lattice. A non-square cell keeps
   the texture without the machined repeat. First layer draws the
   horizontal rules, second the verticals. */
.tsl-servicing {
    background-size: 100% 64px, 79px 100%;
}


@media (min-width: 1025px) {
    /* 7-5 / 5-7 is a palindrome, which is as mechanical as 6-6.
       4-8 on the second row breaks the mirror. */
    .tsl-servicing-step:nth-child(3) { grid-column: span 4; }
    .tsl-servicing-step:nth-child(4) { grid-column: span 8; }
}


/* ================================================
   DROP-OFF ROUTES - the closing band's right column
   Three ways to get equipment to the workshop, set
   as a ruled list against the burgundy.
   ================================================ */
.tsl-servicing-closing-lead p {
    margin-top: 14px;
}

.tsl-servicing-closing-lead .tsl-servicing-cta-row {
    margin-top: 26px;
}

.tsl-servicing-routes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tsl-servicing-routes li {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 6px 20px;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.tsl-servicing-routes li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.tsl-servicing-route-label {
    font-family: var(--tsl-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.tsl-servicing-routes p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
}

/* Links sit on burgundy, so the brand colour is no use here */
.tsl-servicing-routes a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

.tsl-servicing-routes a:hover {
    color: var(--tsl-brand-wash);
    text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
    /* The label column would squeeze the sentence at this width */
    .tsl-servicing-routes li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}