/* ==========================================================================
   Time-Critical Solutions (template-time-critical.php)
   Pillar / hub page for the time-critical service line.

   Design tokens mirror the site-wide system:
     --flashgl-primary (#1A2B8C)  ·  --flashgl-accent (#D00020)
   Decorative layers use translucent white so the section background colour
   (set inline in the template) always shows through — no hard-coded hue.
   ========================================================================== */

:root {
    --tc-primary: var(--flashgl-primary, #1A2B8C);
    --tc-accent:  var(--flashgl-accent, #D00020);
    --tc-ink:     #111a2e;
    --tc-muted:   #5b6b8c;
    --tc-line:    #e3e8f2;
    --tc-soft:    #f8fafc;
    --tc-ring:    rgba(26, 43, 140, 0.28);
    --tc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --tc-shadow-md: 0 8px 22px rgba(26, 43, 140, 0.08);
    --tc-shadow-lg: 0 18px 44px rgba(26, 43, 140, 0.14);
    --tc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.tc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5.5rem 0 5rem;
    color: #fff;
    /* Translucent white sheen + two soft glows over the inline brand colour */
    background-image:
        radial-gradient(circle at 82% -10%, rgba(255, 255, 255, 0.16) 0, transparent 55%),
        radial-gradient(circle at 6% 110%, rgba(255, 255, 255, 0.10) 0, transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%);
}
/* Diagonal accent streak — subtle motion cue, purely decorative */
.tc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(
        115deg,
        transparent 0 62%,
        rgba(255, 255, 255, 0.045) 62% 64%,
        transparent 64% 68%,
        rgba(255, 255, 255, 0.03) 68% 69%,
        transparent 69%
    );
}
.tc-hero .container {
    position: relative;
    z-index: 1;
}
.tc-hero__inner {
    max-width: 820px;
}
.tc-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1.1rem;
    color: #fff;
    text-wrap: balance;
}
.tc-hero__desc {
    font-size: clamp(1.02rem, 1.5vw, 1.25rem);
    line-height: 1.65;
    margin: 0 0 2.25rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 660px;
}
.tc-hero .btn--cta {
    font-size: 1.05rem;
    padding: 0.95rem 2rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s var(--tc-ease), box-shadow 0.2s var(--tc-ease), background-color 0.2s ease;
}
.tc-hero .btn--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

/* ── Intro prose ──────────────────────────────────────────────────────── */
.tc-intro__prose {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--tc-ink);
}

/* ── Shared section header ───────────────────────────────────────────── */
.tc-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.tc-section__title {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--tc-primary);
    margin: 0 0 0.7rem;
    text-wrap: balance;
}
/* Short accent rule under every section heading */
.tc-section__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    margin: 0.9rem auto 0;
    background: var(--tc-accent);
}
.tc-section__subtitle {
    font-size: 1.05rem;
    color: var(--tc-muted);
    margin: 0;
    line-height: 1.65;
    text-wrap: pretty;
}

/* ── Service matrix grid ─────────────────────────────────────────────── */
.tc-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1.5rem;
}
.tc-service-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    padding: 1.75rem 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--tc-shadow-sm);
    transition: transform 0.22s var(--tc-ease), box-shadow 0.22s var(--tc-ease), border-color 0.22s ease;
}
/* Top accent bar that wipes in on hover */
.tc-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--tc-accent), var(--tc-primary));
    transition: width 0.35s var(--tc-ease);
}
.tc-service-card:hover,
.tc-service-card:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--tc-shadow-lg);
    border-color: rgba(26, 43, 140, 0.28);
}
.tc-service-card:hover::before,
.tc-service-card:focus-within::before {
    width: 100%;
}
.tc-service-card__media {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(26, 43, 140, 0.09), rgba(26, 43, 140, 0.03));
}
.tc-service-card__media img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.tc-service-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 0.55rem;
    border-radius: 14px;
    background: transparent;
    color: var(--tc-primary);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
}
.tc-service-card__title {
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 0.6rem;
    transition: color 0.2s ease;
}
.tc-service-card:hover .tc-service-card__title,
.tc-service-card:focus-within .tc-service-card__title {
    color: var(--tc-primary);
}
.tc-service-card__desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tc-muted);
    margin: 0 0 1rem;
    flex: 1 1 auto;
}
/* Transit pill — sized to content, pinned above the footer link */
.tc-service-card__meta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-ink);
    margin: 0 0 1.15rem;
    padding: 0.35rem 0.7rem;
    background: var(--tc-soft);
    border: 1px solid var(--tc-line);
    border-radius: 999px;
}
.tc-service-card__meta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tc-accent);
    flex-shrink: 0;
}
.tc-service-card__meta-label {
    color: var(--tc-muted);
    font-weight: 600;
}
.tc-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tc-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    margin-top: auto;
}
/* Stretch the link over the whole card so the entire tile is clickable */
.tc-service-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.tc-service-card__link svg {
    transition: transform 0.2s var(--tc-ease);
}
.tc-service-card:hover .tc-service-card__link svg,
.tc-service-card:focus-within .tc-service-card__link svg {
    transform: translateX(4px);
}
.tc-service-card:focus-within {
    outline: 2px solid var(--tc-ring);
    outline-offset: 2px;
}

/* ── How it works timeline ───────────────────────────────────────────── */
.tc-timeline {
    /* Track geometry — kept as variables so the badge stays optically centred
       on the 2px rule at every breakpoint, and so the whole track can be
       nudged inwards on narrow screens (see --tc-tl-inset). */
    --tc-tl-dot: 44px;   /* badge diameter               */
    --tc-tl-ring: 5px;   /* halo ring around the badge   */
    --tc-tl-line: 2px;   /* vertical rule width          */
    --tc-tl-gap: 4.25rem;/* text indent (clears badge)   */
    /* Horizontal breathing room: the badge is absolutely positioned to the
       LEFT of the rule, so without this it hangs outside the container's
       padding and gets clipped by the viewport edge on phones. */
    --tc-tl-inset: 0px;
    list-style: none;
    margin: 0 auto;
    padding: 0 0 0 var(--tc-tl-inset);
    max-width: 780px;
}
.tc-timeline__item {
    position: relative;
    padding: 0 0 1.5rem var(--tc-tl-gap);
    border-left: var(--tc-tl-line) solid var(--tc-line);
}
.tc-timeline__item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}
.tc-timeline__num {
    position: absolute;
    /* Centre the badge on the rule: rule centre sits at half the border width,
       so shift left by half the badge. Was hardcoded -23px / -19px, which was
       2px off and drifted further once the badge shrank on mobile. */
    left: calc(var(--tc-tl-line) / 2 - var(--tc-tl-dot) / 2);
    top: 0;
    width: var(--tc-tl-dot);
    height: var(--tc-tl-dot);
    border-radius: 50%;
    background: var(--tc-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 var(--tc-tl-ring) var(--tc-soft);
    transition: transform 0.2s var(--tc-ease), box-shadow 0.2s var(--tc-ease);
}
.tc-timeline__item:hover .tc-timeline__num {
    transform: scale(1.06);
    box-shadow: 0 0 0 var(--tc-tl-ring) var(--tc-soft), 0 6px 18px rgba(26, 43, 140, 0.28);
}
/* Card shell so steps read clearly against the tinted section background */
.tc-timeline__body {
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    padding: 1.15rem 1.4rem;
    box-shadow: var(--tc-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--tc-ease);
}
.tc-timeline__item:hover .tc-timeline__body {
    border-color: rgba(26, 43, 140, 0.24);
    box-shadow: var(--tc-shadow-md);
    transform: translateX(3px);
}
.tc-timeline__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 0.4rem;
}
.tc-timeline__desc {
    font-size: 0.96rem;
    line-height: 1.68;
    color: var(--tc-muted);
    margin: 0;
}

/* ── Decision guide (rich text) ───────────────────────────────────────── */
.tc-decision__body,
.tc-intro__prose {
    max-width: 820px;
    margin: 0 auto;
    font-size: 1.06rem;
    line-height: 1.78;
    color: var(--tc-ink);
}
.tc-decision__body > * + * {
    margin-top: 1.1rem;
}
.tc-decision__body h3,
.tc-decision__body h4 {
    color: var(--tc-primary);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.4rem;
}
.tc-decision__body h3 { font-size: 1.15rem; }
.tc-decision__body h4 { font-size: 1.05rem; }
.tc-decision__body ul,
.tc-decision__body ol {
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
}
.tc-decision__body ul { list-style: disc; }
.tc-decision__body ol { list-style: decimal; }
.tc-decision__body li {
    line-height: 1.7;
}
.tc-decision__body li::marker {
    color: var(--tc-accent);
    font-weight: 700;
}
.tc-decision__body a {
    color: var(--tc-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(26, 43, 140, 0.3);
    text-underline-offset: 2px;
}
.tc-decision__body a:hover {
    text-decoration-color: var(--tc-primary);
}
.tc-decision__body strong {
    color: var(--tc-ink);
    font-weight: 700;
}
.tc-decision__body blockquote {
    margin: 1.4rem 0;
    padding: 0.35rem 0 0.35rem 1.25rem;
    border-left: 3px solid var(--tc-accent);
    color: var(--tc-muted);
    font-style: normal;
}

/* ── Industries ──────────────────────────────────────────────────────── */
.tc-industries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
}
.tc-industry-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    padding: 1.4rem 2.6rem 1.4rem 1.4rem;
    text-decoration: none;
    box-shadow: var(--tc-shadow-sm);
    transition: transform 0.2s var(--tc-ease), box-shadow 0.2s var(--tc-ease), border-color 0.2s ease;
}
.tc-industry-card::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 1.65rem;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--tc-primary);
    border-top: 2px solid var(--tc-primary);
    transform: rotate(45deg);
    opacity: 0.45;
    transition: transform 0.25s var(--tc-ease), opacity 0.2s ease;
}
.tc-industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tc-shadow-md);
    border-color: rgba(26, 43, 140, 0.28);
}
.tc-industry-card:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(3px, -3px);
}
.tc-industry-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.95rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 43, 140, 0.09), rgba(26, 43, 140, 0.03));
    transition: background 0.25s ease;
}
.tc-industry-card__icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.tc-industry-card:hover .tc-industry-card__icon {
    background: linear-gradient(135deg, rgba(26, 43, 140, 0.17), rgba(26, 43, 140, 0.06));
}
.tc-industry-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 0.45rem;
    transition: color 0.2s ease;
}
.tc-industry-card:hover .tc-industry-card__title {
    color: var(--tc-primary);
}
.tc-industry-card__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--tc-muted);
    margin: 0;
}

/* ── Differentiators ─────────────────────────────────────────────────── */
.tc-diff__grid {
    /* Five across on desktop. Drop to 3 / 2 / 1 as the viewport narrows —
       see the responsive block at the bottom of this file. */
    --tc-diff-cols: 5;
    display: grid;
    grid-template-columns: repeat(var(--tc-diff-cols), minmax(0, 1fr));
    gap: 1.1rem;
}
/*
 * Keep the row visually balanced if the editor holds fewer than five cards.
 * `:has()` is unsupported in legacy browsers — they simply fall back to 5
 * columns, which is the layout this page is designed for anyway.
 */
@media (min-width: 1201px) {
    .tc-diff__grid:has(> .tc-diff__card:nth-child(2):last-child) { --tc-diff-cols: 2; }
    .tc-diff__grid:has(> .tc-diff__card:nth-child(3):last-child) { --tc-diff-cols: 3; }
    .tc-diff__grid:has(> .tc-diff__card:nth-child(4):last-child) { --tc-diff-cols: 4; }
}
.tc-diff__card {
    position: relative;
    /* Clips the top accent bar to the card's rounded corners */
    overflow: hidden;
    padding: 1.35rem 1.2rem 1.35rem;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    box-shadow: var(--tc-shadow-sm);
    transition: transform 0.22s var(--tc-ease), box-shadow 0.22s var(--tc-ease), border-color 0.22s ease;
}
/* Icon badge. The SVG uses stroke="currentColor", so the whole badge
   recolours by changing `color` alone — no duplicated icon assets. */
.tc-diff__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 43, 140, 0.10), rgba(26, 43, 140, 0.035));
    color: var(--tc-primary);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--tc-ease);
}
.tc-diff__icon svg {
    width: 21px;
    height: 21px;
}
.tc-diff__card:hover .tc-diff__icon {
    background: linear-gradient(135deg, var(--tc-primary), #2B3FA8);
    color: #fff;
    transform: translateY(-2px);
}
/* Top accent rule — matches the service cards' hover treatment */
.tc-diff__card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--tc-accent), var(--tc-primary));
    transition: width 0.38s var(--tc-ease);
}
.tc-diff__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tc-shadow-lg);
    border-color: rgba(26, 43, 140, 0.26);
}
.tc-diff__card:hover::after {
    width: 100%;
}
.tc-diff__title {
    font-size: 0.98rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--tc-ink);
    margin: 0 0 0.45rem;
    transition: color 0.2s ease;
}
.tc-diff__card:hover .tc-diff__title {
    color: var(--tc-primary);
}
.tc-diff__desc {
    font-size: 0.88rem;
    line-height: 1.68;
    color: var(--tc-muted);
    margin: 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.tc-faq__list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.tc-faq__item {
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--tc-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tc-faq__item:hover {
    border-color: rgba(26, 43, 140, 0.24);
}
.tc-faq__item[open] {
    border-color: rgba(26, 43, 140, 0.3);
    box-shadow: var(--tc-shadow-md);
}
.tc-faq__question {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 3rem 1.1rem 1.4rem;
    font-weight: 700;
    font-size: 1.03rem;
    line-height: 1.5;
    color: var(--tc-ink);
    position: relative;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.tc-faq__question::-webkit-details-marker { display: none; }
.tc-faq__question:hover {
    color: var(--tc-primary);
    background: rgba(26, 43, 140, 0.025);
}
.tc-faq__question:focus-visible {
    outline: 2px solid var(--tc-ring);
    outline-offset: -2px;
}
/* Chevron instead of the raw +/- glyph */
.tc-faq__question::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    top: 1.45rem;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--tc-primary);
    border-bottom: 2px solid var(--tc-primary);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.25s var(--tc-ease);
}
.tc-faq__item[open] .tc-faq__question {
    color: var(--tc-primary);
}
.tc-faq__item[open] .tc-faq__question::after {
    transform: rotate(-135deg);
}
.tc-faq__answer {
    padding: 0 1.4rem 1.35rem;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--tc-muted);
    border-top: 1px solid transparent;
}
.tc-faq__item[open] .tc-faq__answer {
    border-top-color: var(--tc-line);
    padding-top: 1.1rem;
}
.tc-faq__answer > * + * {
    margin-top: 0.8rem;
}
.tc-faq__answer a {
    color: var(--tc-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── CTA banner ─────────────────────────────────────────────────────── */
.tc-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4.5rem 0;
    color: #fff;
    background-image:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18) 0, transparent 55%),
        radial-gradient(circle at 88% 120%, rgba(0, 0, 0, 0.14) 0, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.06) 100%);
}
.tc-cta .container {
    position: relative;
    z-index: 1;
}
.tc-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.tc-cta__title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    color: #fff;
    text-wrap: balance;
}
.tc-cta__desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 2rem;
    max-width: 600px;
}
.tc-cta .btn--white {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s var(--tc-ease), box-shadow 0.2s var(--tc-ease);
}
.tc-cta .btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
/* Below ~1280px the container is flush with the viewport, so its side padding
   (16–32px) is all that stands between the timeline badge and the screen edge.
   The badge overhangs the rule by half its width + the halo ring, which is more
   than that padding — nudge the whole track inwards to stop it being clipped. */
@media (max-width: 1280px) {
    .tc-timeline { --tc-tl-inset: 1.25rem; }
}

/* Differentiators: 5-up is only comfortable on wide viewports. Below 1200px
   the cards would drop under ~215px, so step down to 3, then 2, then 1. */
@media (max-width: 1200px) {
    .tc-diff__grid { --tc-diff-cols: 3; }
}

@media (max-width: 1024px) {
    .tc-services__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .tc-hero { padding: 4.5rem 0 4rem; }
}

@media (max-width: 768px) {
    .tc-hero { padding: 3.5rem 0 3rem; }
    .tc-section__header { margin-bottom: 2.25rem; }
    .tc-services__grid,
    .tc-industries__grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.1rem;
    }
    .tc-diff__grid { --tc-diff-cols: 2; }
    .tc-service-card { padding: 1.5rem 1.3rem 1.35rem; }
    .tc-timeline {
        max-width: 100%;
        --tc-tl-inset: 1.5rem;
    }
    .tc-cta { padding: 3.25rem 0; }
}

@media (max-width: 600px) {
    .tc-hero { padding: 3rem 0 2.5rem; }
    .tc-hero .btn--cta { width: 100%; }
    /* Shrink the badge and pull the text in so the cards keep usable width on
       a 360–390px phone (inset + gap still leave ~270px for the copy). */
    .tc-timeline__item { --tc-tl-gap: 3rem; }
    .tc-timeline__num {
        --tc-tl-dot: 36px;
        --tc-tl-ring: 4px;
        font-size: 0.92rem;
    }
    .tc-timeline__body { padding: 1rem 1.1rem; }
    .tc-services__grid,
    .tc-industries__grid {
        grid-template-columns: 1fr;
    }
    .tc-diff__grid { --tc-diff-cols: 1; }
    .tc-faq__question { padding-right: 2.6rem; font-size: 1rem; }
    .tc-faq__question::after { right: 1.1rem; }
    .tc-cta .btn--white { width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-service-card,
    .tc-service-card::before,
    .tc-service-card__link svg,
    .tc-industry-card,
    .tc-industry-card::after,
    .tc-timeline__num,
    .tc-timeline__body,
    .tc-diff__card,
    .tc-diff__icon,
    .tc-diff__card::after,
    .tc-faq__question::after,
    .tc-hero .btn--cta,
    .tc-cta .btn--white {
        transition: none !important;
    }
    .tc-service-card:hover,
    .tc-industry-card:hover,
    .tc-diff__card:hover,
    .tc-diff__card:hover .tc-diff__icon,
    .tc-timeline__item:hover .tc-timeline__body {
        transform: none;
    }
}