.cs-page {
    --cs-accent: #d8b76c;
    --cs-accent-soft: #f2e7c8;
    --cs-deep: #16102b;
    --cs-ink: #19152a;
    --cs-muted: #706a78;
    --cs-paper: #f6f3ed;
    --cs-line: rgba(22, 16, 43, .14);
    --story-progress: 0;
    --story-shift: 0%;
    --story-shift-negative: 0%;
    --story-turn: 0deg;
    --story-turn-negative: 0deg;
    --story-scan: 8%;
    --story-scale: .86;
    --story-shield-scale: .92;
    --story-dash: 630;
    --story-crane: 35%;
    --truck-shift: 0%;
    --truck-anchor: -8%;
    --wheel-turn: 0deg;
    --scene-tilt: -8deg;
    --scene-lift: 0px;
    --scene-rise: 24px;
    --fleet-one: 0px;
    --fleet-two: 0px;
    --fleet-three: 0px;
    --shield-dash: 780;
    --health-dash: 230;
    color: var(--cs-ink);
    background: #fff;
    overflow: clip;
}

.cs-theme--health { --cs-accent: #49d2a0; --cs-accent-soft: #dff8ef; --cs-deep: #102d2c; }
.cs-theme--fleet { --cs-accent: #f2b84b; --cs-accent-soft: #fff0c9; --cs-deep: #172238; }
.cs-theme--workplace { --cs-accent: #e07a54; --cs-accent-soft: #fbe7df; --cs-deep: #2d2025; }
.cs-theme--liability { --cs-accent: #af8bf4; --cs-accent-soft: #eee6ff; --cs-deep: #211638; }
.cs-theme--transport { --cs-accent: #efbc45; --cs-accent-soft: #fff0c5; --cs-deep: #17293a; }
.cs-theme--engineering { --cs-accent: #62c6d7; --cs-accent-soft: #dcf5f8; --cs-deep: #122b33; }

.cs-kicker {
    display: block;
    margin: 0 0 20px;
    color: var(--cs-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cs-hero {
    position: relative;
    display: flex;
    min-height: min(760px, calc(100svh - 82px));
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--cs-deep);
    isolation: isolate;
}

.cs-hero::before {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: var(--cs-image);
    background-position: center;
    background-size: cover;
    content: '';
    filter: saturate(.65) contrast(1.05);
    opacity: .36;
    transform: scale(1.06);
    animation: csHeroImage 1.5s cubic-bezier(.2,.7,.2,1) both;
}

.cs-hero::after {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 82% 46%, color-mix(in srgb, var(--cs-accent) 31%, transparent), transparent 27%),
        linear-gradient(90deg, color-mix(in srgb, var(--cs-deep) 98%, transparent) 0 48%, color-mix(in srgb, var(--cs-deep) 67%, transparent) 75%, color-mix(in srgb, var(--cs-deep) 82%, transparent)),
        linear-gradient(180deg, transparent 55%, var(--cs-deep));
    content: '';
}

.cs-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: clamp(48px, 8vw, 130px);
    align-items: center;
    padding-top: 72px;
    padding-bottom: 92px;
}

.cs-hero-copy { max-width: 780px; }
.cs-hero .cp-breadcrumb { margin-bottom: 32px; }
.cs-hero h1 {
    max-width: 780px;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3.25rem, 6.2vw, 6.7rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .94;
}
.cs-hero-copy > p {
    max-width: 690px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(1rem,1.4vw,1.18rem);
    line-height: 1.75;
}
.cs-hero .cp-link { color: rgba(255,255,255,.72); }
.cs-hero .cp-link:hover { color: #fff; }
.cs-hero .cp-button { background: var(--cs-accent); }

.cs-hero-signature {
    position: relative;
    display: grid;
    width: min(100%, 360px);
    aspect-ratio: 1;
    place-items: center;
    justify-self: end;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
}
.cs-hero-signature::before,
.cs-hero-signature::after {
    position: absolute;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    content: '';
}
.cs-hero-signature::before { inset: 11%; animation: csOrbit 16s linear infinite; }
.cs-hero-signature::after { inset: -8%; border-style: dashed; animation: csOrbit 28s linear infinite reverse; }
.cs-hero-signature > span { position: absolute; top: 8%; left: 4%; color: var(--cs-accent); font: italic 1rem Georgia,serif; }
.cs-hero-signature > i { color: var(--cs-accent); font-size: clamp(4.5rem,8vw,8rem); filter: drop-shadow(0 18px 35px rgba(0,0,0,.22)); }
.cs-hero-signature > small { position: absolute; right: -6%; bottom: 13%; color: rgba(255,255,255,.68); font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cs-scroll-cue { position: absolute; right: 28px; bottom: 28px; display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.46); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-90deg) translateX(100%); transform-origin: right bottom; }
.cs-scroll-cue > span { display: block; width: 42px; height: 1px; background: var(--cs-accent); animation: csScrollCue 1.8s ease-in-out infinite; }

.cs-story { position: relative; min-height: 175svh; background: var(--cs-paper); }
.cs-story-sticky {
    position: sticky;
    top: 82px;
    display: grid;
    min-height: calc(100svh - 82px);
    grid-template-columns: minmax(0,.78fr) minmax(420px,1.22fr);
    gap: clamp(45px,7vw,110px);
    align-items: center;
    padding-top: 55px;
    padding-bottom: 55px;
}
.cs-story-copy h2,
.cs-section-heading h2,
.cs-final h2 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -.045em;
}
.cs-story-copy h2 { font-size: clamp(2.7rem,4.5vw,5.2rem); line-height: 1; }
.cs-story-question { margin: 0 0 13px; color: var(--cs-ink); font-size: .77rem; font-weight: 800; letter-spacing: .04em; }
.cs-story-copy > p { margin: 28px 0 0; color: var(--cs-muted); line-height: 1.82; }
.cs-story-copy > .cs-story-question { margin: 0 0 13px; color: var(--cs-ink); line-height: 1.5; }
.cs-story-note { display: grid; grid-template-columns: 30px 1fr; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cs-line); color: var(--cs-muted); font-size: .82rem; line-height: 1.65; }
.cs-story-note i { margin-top: 4px; color: var(--cs-accent); }
.cs-story-note strong { display: block; margin-bottom: 3px; color: var(--cs-ink); }

.cs-scene {
    position: relative;
    min-height: min(530px, 64vh);
    overflow: hidden;
    color: var(--cs-ink);
    background: var(--cs-deep);
    box-shadow: 0 34px 80px rgba(22,16,43,.14);
    isolation: isolate;
}
.cs-scene::after { position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(255,255,255,.14); content: ''; pointer-events: none; }
.cs-scene-grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,rgba(0,0,0,.9),transparent); }
.cs-scene-caption { position: absolute; right: 28px; bottom: 24px; left: 28px; display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.5); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cs-scene-caption span { color: var(--cs-accent); font: italic .9rem Georgia,serif; }

/* Health: a living care network. */
.cs-health-illustration { position: absolute; inset: 18px 18px 52px; width: calc(100% - 36px); height: calc(100% - 70px); overflow: visible; }
.cs-health-network { transform-box: fill-box; transform-origin: center; rotate: var(--scene-tilt); }
.cs-health-link { fill: none; stroke: color-mix(in srgb,var(--cs-accent) 72%,white); stroke-dasharray: 7 10; stroke-linecap: round; stroke-width: 2; }
.cs-health-ring { fill: none; stroke: rgba(255,255,255,.18); stroke-dasharray: 5 9; stroke-width: 2; }
.cs-health-member { transform-box: fill-box; transform-origin: center; translate: 0 var(--scene-lift); }
.cs-health-member-halo { fill: var(--cs-deep); stroke: rgba(255,255,255,.28); stroke-width: 2; }
.cs-health-member-head { fill: #f5f2ec; }
.cs-health-member-body { fill: var(--cs-accent); opacity: .9; }
.cs-health-shield-body { fill: color-mix(in srgb,var(--cs-accent) 17%,var(--cs-deep)); stroke: var(--cs-accent); stroke-width: 3; }
.cs-health-cross { fill: #f8f6f1; }
.cs-health-pulse { fill: none; stroke: var(--cs-accent); stroke-dasharray: 230; stroke-dashoffset: var(--health-dash); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.cs-health-shield { transform-box: fill-box; transform-origin: center; animation: csHealthFloat 3.8s ease-in-out infinite; }
.cs-health-card rect { fill: rgba(255,255,255,.09); stroke: rgba(255,255,255,.24); stroke-width: 2; }
.cs-health-card circle { fill: var(--cs-accent); }
.cs-health-card path { fill: none; stroke: rgba(255,255,255,.57); stroke-linecap: round; stroke-width: 5; }

/* Fleet: multiple vehicles share one operating line. */
.cs-fleet-illustration { position: absolute; inset: 14px 20px 45px; width: calc(100% - 40px); height: calc(100% - 59px); overflow: visible; }
.cs-fleet-road-plane { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.18); stroke-width: 2; }
.cs-fleet-lane { fill: none; stroke: var(--cs-accent); stroke-dasharray: 18 18; stroke-linecap: round; stroke-width: 4; }
.cs-fleet-car { filter: drop-shadow(0 14px 12px rgba(0,0,0,.26)); transition: translate .08s linear; }
.cs-fleet-car--sedan { translate: var(--fleet-one) 0; }
.cs-fleet-car--van { translate: var(--fleet-two) 0; }
.cs-fleet-car--pickup { translate: var(--fleet-three) 0; }
.cs-fleet-shadow { fill: rgba(0,0,0,.32); }
.cs-fleet-body { fill: var(--cs-accent); stroke: color-mix(in srgb,var(--cs-accent) 72%,white); stroke-linejoin: round; stroke-width: 2; }
.cs-fleet-body--light { fill: #f5f2ec; stroke: rgba(255,255,255,.78); }
.cs-fleet-window { fill: #23384b; stroke: rgba(255,255,255,.55); stroke-width: 2; }
.cs-fleet-detail { fill: none; stroke: color-mix(in srgb,var(--cs-accent) 35%,var(--cs-deep)); stroke-linecap: round; stroke-width: 4; }
.cs-fleet-tire { fill: #111820; stroke: #56616a; stroke-width: 4; }
.cs-fleet-rim { fill: #dce1e4; stroke: #78858e; stroke-width: 3; }
.cs-fleet-headlight { fill: #fff4a8; filter: drop-shadow(0 0 6px #fff4a8); }
.cs-fleet-counter { position: absolute; top: 28px; right: 30px; display: flex; gap: 10px; align-items: end; color: #fff; }
.cs-fleet-counter strong { color: var(--cs-accent); font: 4.5rem/.8 Georgia,serif; }
.cs-fleet-counter span { color: rgba(255,255,255,.55); font-size: .62rem; line-height: 1.4; text-transform: uppercase; }

/* Workplace: a live scan passes through the insured building. */
.cs-workplace-illustration { position: absolute; inset: 12px 18px 43px; width: calc(100% - 36px); height: calc(100% - 55px); overflow: visible; }
.cs-workplace-shadow { fill: rgba(0,0,0,.28); }
.cs-factory-main { fill: #f3efe8; stroke: rgba(255,255,255,.75); stroke-width: 2; }
.cs-factory-roof { fill: var(--cs-accent); stroke: color-mix(in srgb,var(--cs-accent) 70%,white); stroke-linejoin: round; stroke-width: 2; }
.cs-factory-wing { fill: #d9d5cf; stroke: rgba(255,255,255,.62); stroke-width: 2; }
.cs-factory-stack { fill: #c8c4bf; }.cs-factory-stack-top { fill: var(--cs-accent); }
.cs-factory-smoke { fill: rgba(255,255,255,.14); transform-box: fill-box; transform-origin: center; translate: 0 var(--scene-lift); }
.cs-factory-windows { fill: #263a49; }.cs-factory-windows path { stroke: rgba(255,255,255,.28); stroke-width: 2; }
.cs-factory-door { fill: #303b43; }.cs-factory-door-lines { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; }
.cs-workplace-risk circle { fill: var(--cs-deep); stroke: var(--cs-accent); stroke-width: 3; animation: csRiskPulse 2.2s ease-in-out infinite; }
.cs-workplace-risk path { fill: none; stroke: var(--cs-accent); stroke-linecap: round; stroke-width: 4; }
.cs-workplace-shield path:first-child { fill: color-mix(in srgb,var(--cs-accent) 18%,var(--cs-deep)); stroke: var(--cs-accent); stroke-width: 3; }
.cs-workplace-shield path:last-child { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.cs-building-scan { position: absolute; top: var(--story-scan); right: 12%; left: 12%; height: 2px; background: var(--cs-accent); box-shadow: 0 0 25px var(--cs-accent),0 22px 45px color-mix(in srgb,var(--cs-accent) 35%,transparent); transition: top .08s linear; }

/* Liability: a signed agreement and safety equipment sit inside one protection field. */
.cs-liability-illustration { position: absolute; inset: 6px 8px 45px; width: calc(100% - 16px); height: calc(100% - 51px); overflow: visible; }
.cs-liability-arc { fill: none; stroke: var(--cs-accent); stroke-dasharray: 780; stroke-dashoffset: var(--shield-dash); stroke-linecap: round; stroke-width: 4; filter: drop-shadow(0 0 10px color-mix(in srgb,var(--cs-accent) 56%,transparent)); }
.cs-liability-arc--ghost { stroke: rgba(255,255,255,.12); stroke-dasharray: 7 12; stroke-dashoffset: 0; filter: none; }
.cs-liability-arc-nodes circle { fill: var(--cs-deep); stroke: var(--cs-accent); stroke-width: 4; }
.cs-liability-document { transform-box: fill-box; transform-origin: center; translate: 0 var(--scene-rise); filter: drop-shadow(0 22px 24px rgba(0,0,0,.24)); }
.cs-liability-document-shadow { fill: rgba(0,0,0,.24); }
.cs-liability-paper { fill: url(#csLiabilityPaper); stroke: rgba(255,255,255,.7); stroke-width: 2; }
.cs-liability-paper-band { fill: color-mix(in srgb,var(--cs-accent) 24%,var(--cs-deep)); }
.cs-liability-document-mark { fill: var(--cs-accent); }
.cs-liability-document-mark-line { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.cs-liability-title-lines { fill: none; stroke: rgba(255,255,255,.78); stroke-linecap: round; stroke-width: 7; }
.cs-liability-copy-lines { fill: none; stroke: #b6b1b7; stroke-linecap: round; stroke-width: 7; }
.cs-liability-checks rect { fill: var(--cs-accent-soft); stroke: var(--cs-accent); stroke-width: 2; }
.cs-liability-checks path { fill: none; stroke: color-mix(in srgb,var(--cs-accent) 75%,#321f58); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.cs-liability-signature { fill: none; stroke: #382c4d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.cs-liability-signature-line { fill: none; stroke: #c7c1c7; stroke-width: 2; }
.cs-liability-seal { transform-box: fill-box; transform-origin: center; animation: csSealPulse 3.2s ease-in-out infinite; }
.cs-liability-seal circle:first-child { fill: var(--cs-accent); opacity: .18; }
.cs-liability-seal circle:nth-child(2) { fill: none; stroke: var(--cs-accent); stroke-dasharray: 4 5; stroke-width: 3; }
.cs-liability-seal path { fill: none; stroke: var(--cs-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.cs-liability-helmet { transform-box: fill-box; transform-origin: center bottom; translate: 0 var(--scene-lift); filter: drop-shadow(0 25px 20px rgba(0,0,0,.3)); }
.cs-liability-helmet-shadow { fill: rgba(0,0,0,.32); }
.cs-liability-helmet-shell { fill: url(#csLiabilityHelmet); stroke: color-mix(in srgb,var(--cs-accent) 72%,white); stroke-linejoin: round; stroke-width: 3; }
.cs-liability-helmet-highlight { fill: rgba(255,255,255,.16); }
.cs-liability-helmet-ridge { fill: color-mix(in srgb,var(--cs-accent) 80%,#fff); stroke: rgba(255,255,255,.35); stroke-width: 2; }
.cs-liability-helmet-vent { fill: none; stroke: rgba(32,21,54,.46); stroke-linecap: round; stroke-width: 5; }
.cs-liability-helmet-brim { fill: color-mix(in srgb,var(--cs-accent) 85%,#fff); stroke: rgba(255,255,255,.58); stroke-linejoin: round; stroke-width: 3; }
.cs-liability-helmet-inner { fill: none; stroke: rgba(255,255,255,.58); stroke-linecap: round; stroke-width: 5; }
.cs-liability-helmet-edge { fill: none; stroke: rgba(54,35,84,.55); stroke-linecap: round; stroke-width: 4; }
.cs-liability-badge { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 14px 18px rgba(0,0,0,.25)); }
.cs-liability-badge circle:first-child { fill: color-mix(in srgb,var(--cs-accent) 18%,var(--cs-deep)); stroke: var(--cs-accent); stroke-width: 3; }
.cs-liability-badge circle:nth-child(2) { fill: none; stroke: rgba(255,255,255,.2); stroke-dasharray: 3 6; stroke-width: 2; }
.cs-liability-badge path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }

/* Transport: the truck advances with page scroll. */
.cs-transport-sky { position: absolute; inset: 0 0 46%; overflow: hidden; }
.cs-transport-sky span { position: absolute; width: 110px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); filter: blur(2px); transform: translateX(var(--story-shift-negative)); }
.cs-transport-sky span:nth-child(1) { top: 24%; left: 16%; }.cs-transport-sky span:nth-child(2) { top: 48%; left: 52%; width: 160px; }.cs-transport-sky span:nth-child(3) { top: 16%; left: 78%; width: 90px; }
.cs-transport-road { position: absolute; right: -4%; bottom: 70px; left: -4%; height: 38%; border-top: 1px solid rgba(255,255,255,.28); background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.13)); transform: perspective(260px) rotateX(9deg); transform-origin: bottom; }
.cs-transport-road::before { position: absolute; inset: 0; background-image: linear-gradient(90deg,transparent 49.85%,rgba(255,255,255,.08) 50%,transparent 50.15%); background-size: 160px 100%; background-position-x: var(--story-shift-negative); content: ''; }
.cs-transport-road::after { position: absolute; top: 52%; right: 0; left: 0; height: 3px; background: repeating-linear-gradient(90deg,var(--cs-accent) 0 42px,transparent 42px 82px); background-position-x: var(--story-shift-negative); content: ''; }
.cs-transport-truck { position: absolute; bottom: 22%; left: calc(5% + var(--truck-shift)); z-index: 2; width: min(66%,470px); transform: translateX(var(--truck-anchor)); transition: left .08s linear,transform .08s linear; }
.cs-transport-truck svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 19px rgba(0,0,0,.22)); }
.cs-truck-shadow { fill: rgba(0,0,0,.3); }
.cs-truck-trailer { fill: #f4f0e8; stroke: rgba(255,255,255,.75); stroke-width: 2; }
.cs-truck-trailer-edge { fill: #dcd8d0; }
.cs-truck-stripe { fill: var(--cs-accent); opacity: .96; }
.cs-truck-cab { fill: #f8f6f1; stroke: rgba(255,255,255,.82); stroke-linejoin: round; stroke-width: 2; }
.cs-truck-cab-roof { fill: var(--cs-accent); }
.cs-truck-window { fill: #253b4d; stroke: rgba(255,255,255,.6); stroke-width: 2; }
.cs-truck-window-split { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 3; }
.cs-truck-door { fill: none; stroke: #c5c2bd; stroke-width: 2; }
.cs-truck-grille { fill: #29343c; }
.cs-truck-bumper { fill: #b9bdc1; }
.cs-truck-light { fill: #fff2a8; filter: drop-shadow(0 0 8px #fff2a8); }
.cs-truck-light--rear { fill: #e75c55; filter: drop-shadow(0 0 7px #e75c55); }
.cs-truck-chassis { fill: none; stroke: #4e5760; stroke-linecap: round; stroke-width: 8; }
.cs-truck-wheel-position { transform-box: view-box; }
.cs-truck-wheel { transform-box: fill-box; transform-origin: center; transform: rotate(var(--wheel-turn)); }
.cs-truck-tire { fill: #111820; stroke: #48535d; stroke-width: 5; }
.cs-truck-rim { fill: #dce1e4; stroke: #77838c; stroke-width: 3; }
.cs-truck-spokes { fill: none; stroke: #68747c; stroke-linecap: round; stroke-width: 3; }
.cs-truck-speed { position: absolute; left: -15%; height: 2px; border-radius: 2px; background: linear-gradient(90deg,transparent,var(--cs-accent)); opacity: .72; }
.cs-truck-speed--one { top: 41%; width: 18%; }.cs-truck-speed--two { top: 56%; left: -22%; width: 25%; }
.cs-route-point { position: absolute; top: 27px; z-index: 2; color: rgba(255,255,255,.58); font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.cs-route-point i { margin-right: 7px; color: var(--cs-accent); }.cs-route-point--start { left: 28px; }.cs-route-point--finish { right: 28px; }

/* Engineering: the project system turns as the reader advances. */
.cs-engineering-illustration { position: absolute; inset: 9px 17px 40px; width: calc(100% - 34px); height: calc(100% - 49px); overflow: visible; }
.cs-blueprint-dimensions path { fill: none; stroke: rgba(255,255,255,.16); stroke-dasharray: 5 7; stroke-width: 2; }
.cs-crane-structure { fill: none; stroke: #f3f0ea; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.cs-crane-bracing { fill: none; stroke: rgba(255,255,255,.47); stroke-width: 3; }
.cs-engineering-cable { fill: none; stroke: var(--cs-accent); stroke-width: 3; }
.cs-engineering-hook { fill: none; stroke: var(--cs-accent); stroke-linecap: round; stroke-width: 5; }
.cs-engineering-load { fill: color-mix(in srgb,var(--cs-accent) 20%,var(--cs-deep)); stroke: var(--cs-accent); stroke-linejoin: round; stroke-width: 3; transform-box: fill-box; transform-origin: center; translate: 0 var(--scene-lift); }
.cs-engineering-gear { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 15px 14px rgba(0,0,0,.25)); }
.cs-engineering-gear--large { rotate: var(--story-turn); }.cs-engineering-gear--small { rotate: var(--story-turn-negative); }
.cs-gear-teeth { fill: none; stroke: var(--cs-accent); stroke-dasharray: 13 9; stroke-width: 25; }
.cs-engineering-gear--small .cs-gear-teeth { stroke: #f4f1eb; stroke-width: 17; }
.cs-gear-body { fill: color-mix(in srgb,var(--cs-accent) 17%,var(--cs-deep)); stroke: rgba(255,255,255,.35); stroke-width: 3; }
.cs-gear-core { fill: var(--cs-deep); stroke: var(--cs-accent); stroke-width: 5; }
.cs-gear-spokes { fill: none; stroke: var(--cs-accent); stroke-linecap: round; stroke-width: 10; }
.cs-engineering-gear--small .cs-gear-spokes { stroke: #f4f1eb; stroke-width: 7; }
.cs-engineering-sparks { fill: var(--cs-accent); animation: csSpark 1.8s ease-in-out infinite; }
.cs-engineering-readout { position: absolute; bottom: 31px; left: 31px; display: grid; color: rgba(255,255,255,.52); text-transform: uppercase; }.cs-engineering-readout span { font-size: .6rem; letter-spacing: .16em; }.cs-engineering-readout strong { color: #fff; font: 3rem/1 Georgia,serif; }.cs-engineering-readout small { font-size: .57rem; letter-spacing: .08em; }

.cs-coverage,.cs-faq-section { padding: clamp(85px,10vw,145px) 0; }
.cs-coverage-layout,.cs-faq-layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(420px,1.25fr); gap: clamp(55px,8vw,130px); align-items: start; }
.cs-section-heading { max-width: 590px; }
.cs-section-heading h2 { font-size: clamp(2.6rem,4.5vw,5rem); line-height: 1.02; }
.cs-section-heading > p { margin: 25px 0 0; color: var(--cs-muted); line-height: 1.75; }
.cs-coverage-list { border-top: 1px solid var(--cs-line); }
.cs-coverage-row { display: grid; grid-template-columns: 48px 1fr 20px; gap: 17px; align-items: center; min-height: 86px; border-bottom: 1px solid var(--cs-line); }
.cs-coverage-row > span { color: var(--cs-accent); font: italic .88rem Georgia,serif; }
.cs-coverage-row p { margin: 0; font-weight: 700; line-height: 1.5; }
.cs-coverage-row i { color: var(--cs-accent); transition: transform .25s ease; }
.cs-coverage-row:hover i { transform: translateX(5px); }

.cs-decisions { padding: clamp(88px,10vw,140px) 0; color: #fff; background: var(--cs-deep); }
.cs-section-heading--light h2 { max-width: 820px; color: #fff; }
.cs-decision-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 70px; border-top: 1px solid rgba(255,255,255,.16); }
.cs-decision { min-height: 310px; padding: 34px 34px 30px 0; border-right: 1px solid rgba(255,255,255,.16); }
.cs-decision:not(:first-child) { padding-left: 34px; }
.cs-decision:last-child { border-right: 0; }
.cs-decision > span { display: block; margin-bottom: 78px; color: var(--cs-accent); font: italic .95rem Georgia,serif; }
.cs-decision h3 { margin: 0 0 14px; font: 400 clamp(1.45rem,2vw,2rem)/1.1 Georgia,serif; }
.cs-decision p { max-width: 340px; margin: 0; color: rgba(255,255,255,.56); font-size: .86rem; line-height: 1.7; }

.cs-faq-section { background: var(--cs-paper); }
.cs-faq-section .cp-faq summary i { color: var(--cs-accent); }
.cs-final { padding: clamp(90px,10vw,145px) 0; color: #fff; background: linear-gradient(120deg,var(--cs-deep),color-mix(in srgb,var(--cs-deep) 76%,var(--cs-accent))); }
.cs-final .container { display: flex; gap: 52px; align-items: end; justify-content: space-between; }
.cs-final h2 { max-width: 850px; color: #fff; font-size: clamp(2.6rem,5vw,5.4rem); line-height: .98; }
.cs-final p { max-width: 680px; margin: 25px 0 0; color: rgba(255,255,255,.65); line-height: 1.7; }
.cs-final .cp-button { flex: 0 0 auto; background: var(--cs-accent); }

@keyframes csHeroImage { from { opacity: 0; transform: scale(1.14); } to { opacity: .36; transform: scale(1.06); } }
@keyframes csOrbit { to { transform: rotate(1turn); } }
@keyframes csHealthFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes csRiskPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; filter: drop-shadow(0 0 9px var(--cs-accent)); } }
@keyframes csSpark { 0%,100% { opacity: .3; } 50% { opacity: 1; filter: drop-shadow(0 0 8px var(--cs-accent)); } }
@keyframes csSealPulse { 0%,100% { opacity: .82; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes csScrollCue { 0%,100% { transform: scaleX(.45); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }

@media (max-width: 991px) {
    .cs-hero-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 35px; }
    .cs-hero-signature { width: 230px; }
    .cs-story { min-height: 145svh; }
    .cs-story-sticky { grid-template-columns: minmax(0,.85fr) minmax(360px,1.15fr); gap: 35px; }
    .cs-scene { min-height: 450px; }
    .cs-coverage-layout,.cs-faq-layout { grid-template-columns: .8fr 1.2fr; gap: 45px; }
}

@media (max-width: 767px) {
    .cs-hero { min-height: auto; }
    .cs-hero::after { background: linear-gradient(180deg,color-mix(in srgb,var(--cs-deep) 96%,transparent),color-mix(in srgb,var(--cs-deep) 87%,transparent)); }
    .cs-hero-layout { display: block; padding: 55px 20px 72px; }
    .cs-hero h1 { font-size: clamp(2.8rem,14vw,4.3rem); }
    .cs-hero-copy > p { font-size: .96rem; line-height: 1.68; }
    .cs-hero-signature { width: 155px; margin: 55px auto 0; justify-self: auto; }
    .cs-hero-signature > i { font-size: 3.8rem; }
    .cs-hero-signature > small { right: -22%; }
    .cs-scroll-cue { display: none; }
    .cs-story { min-height: auto; padding: 78px 0; }
    .cs-story-sticky { position: static; display: flex; min-height: 0; padding: 0 20px; flex-direction: column; gap: 48px; }
    .cs-story-copy h2,.cs-section-heading h2 { font-size: clamp(2.4rem,11vw,3.2rem); }
    .cs-scene { width: 100%; min-height: 410px; }
    .cs-health-illustration,.cs-fleet-illustration,.cs-workplace-illustration,.cs-liability-illustration,.cs-engineering-illustration { right: 8px; left: 8px; width: calc(100% - 16px); }
    .cs-liability-illustration { right: 18px; left: 18px; width: calc(100% - 36px); }
    .cs-transport-truck { bottom: 25%; width: 78%; }
    .cs-coverage,.cs-faq-section { padding: 78px 0; }
    .cs-coverage-layout,.cs-faq-layout { display: block; padding-right: 20px; padding-left: 20px; }
    .cs-coverage-list,.cs-faq-layout .cp-faq { margin-top: 45px; }
    .cs-coverage-row { min-height: 80px; grid-template-columns: 38px 1fr 16px; }
    .cs-decision-grid { grid-template-columns: 1fr; margin-top: 48px; }
    .cs-decision,.cs-decision:not(:first-child) { min-height: 0; padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
    .cs-decision:last-child { border-bottom: 0; }
    .cs-decision > span { margin-bottom: 28px; }
    .cs-decisions { padding: 78px 20px; }
    .cs-final { padding: 78px 0; }
    .cs-final .container { padding-right: 20px; padding-left: 20px; align-items: stretch; flex-direction: column; gap: 30px; }
    .cs-final h2 { font-size: clamp(2.5rem,11vw,3.3rem); }
    .cs-final .cp-button { width: 100%; }
}

@media (max-width: 374px) {
    .cs-hero-layout,.cs-story-sticky,.cs-coverage-layout,.cs-faq-layout,.cs-final .container { padding-right: 16px; padding-left: 16px; }
    .cs-scene { min-height: 365px; }
    .cs-scene-caption { right: 18px; left: 18px; font-size: .54rem; }
}

@media (hover: none) {
    .cs-coverage-row:hover i { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-page { --story-progress: .55; --story-shift: 42%; --story-shift-negative: -42%; --story-turn: 170deg; --story-turn-negative: -170deg; --story-scan: 56%; --story-scale: .94; --story-shield-scale: .97; --story-dash: 283.5; --story-crane: 54.25%; --truck-shift: 35.2%; --truck-anchor: -31.1%; --wheel-turn: 396deg; --scene-tilt: .8deg; --scene-lift: -9.9px; --scene-rise: 10.8px; --fleet-one: 42.9px; --fleet-two: -24.75px; --fleet-three: 52.25px; --shield-dash: 351; --health-dash: 103.5; }
    .cs-hero::before,.cs-hero-signature::before,.cs-hero-signature::after,.cs-health-shield,.cs-workplace-risk circle,.cs-liability-seal,.cs-engineering-sparks,.cs-scroll-cue > span { animation: none; }
    .cs-story { min-height: auto; padding: 90px 0; }
    .cs-story-sticky { position: static; min-height: 0; }
    .cs-fleet-car,.cs-transport-truck,.cs-building-scan { transition: none; }
}