/* Ported from docs/mockups/public-site/home.css. Loads after public-site.css. */
/* Home page. Ports to Pages/Public/Index.razor.css. Shared system: site.css. */

/* ─── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--espresso);
    background-image: var(--hero-bg);
    color: var(--cream);
    padding-block: clamp(36px, 4.4vw, 64px) clamp(64px, 7vw, 104px);
    isolation: isolate;
}

/* A frame-measuring chart: datum points, rails and X-checks, as a collision tech sees an underbody. */
.datum {
    position: absolute;
    left: 50%;
    top: 66%;
    z-index: -1;
    width: max(1280px, 108%);
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 22%, #000 52%);
}
/* The hero stops growing at --max, so a chart that keeps scaling climbs until its top row of numbers
   sits behind the buttons. One fixed size from here rests that row in the gap above the cards; below
   this width the row stays fully behind the cards, so their top edge never cuts a number in half. */
@media (min-width: 1800px) { .datum { width: 2160px; } }
.datum .dl { fill: none; stroke: rgba(201, 191, 177, 0.12); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.datum .dl--dash { stroke-dasharray: none; }
.datum .dp { fill: var(--espresso); stroke: rgba(221, 145, 66, 0.34); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.datum text { fill: rgba(201, 191, 177, 0.24); font-family: var(--font); font-size: 15px; font-weight: 560; letter-spacing: 0.03em; }
.datum text.dt-k { fill: rgba(221, 145, 66, 0.42); font-weight: 700; }
.js .datum .dl { stroke-dashoffset: 1; animation: draw 2.4s var(--ease-io) forwards; animation-delay: calc(0.15s + var(--d, 0) * 0.06s); }
.js .datum .dl--dash { stroke-dashoffset: 0; animation: fade-in 1.2s 1.4s both; }
.js .datum .dp, .js .datum text { animation: fade-in 0.8s both; animation-delay: calc(1.2s + var(--d, 0) * 0.05s); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px clamp(32px, 5vw, 72px);
    align-items: end;
}
.hero__copy { display: grid; gap: 24px; }
.hero__note { margin: 18px 0 0; color: var(--cream-2); font-size: 13.5px; }
.hero__title {
    font-family: var(--display);
    margin: 0 0 6px;
    font-size: clamp(40px, 4.9vw, 72px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--card);
}
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .ln > span { display: inline-block; }
.hero__title .ln--2 { color: var(--cream-2); }
.hero__lead { color: var(--cream); }

.js .hero__title .ln > span { animation: rise 0.95s var(--ease) both; }
.js .hero__title .ln--2 > span { animation-delay: 0.12s; }
@keyframes rise { from { transform: translateY(104%); } to { transform: none; } }
.js .hero__copy > * { animation: lift 0.8s var(--ease) both; }
.js .hero__copy > :nth-child(1) { animation-delay: 0.3s; }
.js .hero__copy > :nth-child(2) { animation-delay: 0.4s; }
.js .win { animation: lift 0.9s var(--ease) both; }
.js .win:nth-child(1) { animation-delay: 0.42s; }
.js .win:nth-child(2) { animation-delay: 0.54s; }
.js .win:nth-child(3) { animation-delay: 0.66s; }

/* ─── Three services, three windows ───────────────────────────────────────── */

/* Each window is its own service: its own color, name, mini demo, offer and way in. */
.wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.win {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card);
    color: var(--ink);
    border-top: 4px solid var(--wc);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 250, 243, 0.06) inset, 0 22px 50px rgba(12, 9, 6, 0.34);
    --focus: var(--ink);
}
.win--estimate { --wc: var(--teal); --wci: var(--teal-ink); --wcw: var(--teal-wash); }
.win--audit { --wc: var(--orange); --wci: var(--orange-ink); --wcw: var(--orange-wash); }
.win--recovery { --wc: var(--lime); --wci: var(--lime-ink); --wcw: var(--lime-wash); }
.win__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.win__head img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.win__head b { font-family: var(--display); display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.win__head small { display: block; font-size: 13.5px; font-weight: 600; color: var(--wci); }
.win__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 252px;
    margin: 0 12px;
    padding: 12px 14px 14px;
    background: #FBF6EE;
    border: 1px solid var(--hair);
    border-radius: 10px;
}
.mini-k { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.mini-k span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mini-closed { color: var(--red); font-weight: 700; }
.mini-who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.mini-who i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: var(--ink); font-style: normal; font-size: 10px; font-weight: 800; }
.mini { margin: 0; padding: 0; list-style: none; }
.mini-r { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 32px; border-bottom: 1px solid #EDE3D6; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mini-r .o { color: var(--muted); }
.mini-r .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.mini-r .n { font-weight: 650; }
.mini-r.is-cur .d::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--teal-ink); animation: caret 0.5s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mini-r--f { grid-template-columns: 76px minmax(0, 1fr) auto; }
.mini-r--f .prio { justify-self: start; padding: 1px 7px; font-size: 10.5px; }
.mini-r--f .n { color: var(--orange-ink); }
.mini-r--v { grid-template-columns: minmax(0, 1fr) auto; }
.mini-r--v.is-removed.is-done .d { color: var(--muted); text-decoration: line-through; }
.mini-status { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; font-size: 13.5px; font-weight: 650; color: var(--wci); }
.mini-status svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mini-status:not(.is-done) svg { display: none; }
.mini-status:not(.is-done)::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: currentColor; animation: live 1.1s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; } }
.win__body:not(.is-inview) .mini-r.is-cur .d::after, .win__body:not(.is-inview) .mini-status::before { animation: none; }
.mini-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: auto 0 0; padding-top: 12px; font-size: 13.5px; color: var(--muted); }
.mini-total > b { font-family: var(--num); font-size: 22px; font-weight: 700; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.mini-total span b { color: var(--ink); }
.win__foot { display: grid; gap: 12px; padding: 16px 18px 18px; }
.win__foot p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.win__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.win__offer { padding: 3px 10px; border-radius: 999px; background: var(--wcw); color: var(--wci); font-size: 12.5px; font-weight: 700; }
.win .link { font-size: 15px; }
/* The Replay under each sample (site.js builds it) lines up with the sample's right edge, on the card. */
.win .ps-replay { margin: 6px 12px 0 auto; color: var(--muted); }
.win .ps-replay:hover { color: var(--ink); border-color: var(--hair-strong); }

/* Phones only: the three service names as a pager above the swipe row. */
.wins__pager { display: none; }

/* ─── Money nobody billed: the four colors of the mark, four causes ────────── */

.cause__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr);
    grid-template-areas: "tl mark tr" "bl mark br";
    gap: 48px clamp(32px, 4vw, 64px);
    align-items: center;
    margin-top: clamp(48px, 6vw, 80px);
}
.cause { display: grid; gap: 10px; padding-top: 18px; border-top: 3px solid var(--c, var(--ink)); transition: opacity 0.3s; }
.cause--tl { grid-area: tl; --c: var(--orange); --ci: var(--orange-ink); }
.cause--tr { grid-area: tr; --c: var(--teal); --ci: var(--teal-ink); }
.cause--br { grid-area: br; --c: var(--lime); --ci: var(--lime-ink); }
.cause--bl { grid-area: bl; --c: var(--red); --ci: var(--red); }
.cause p { margin: 0; color: var(--muted); }
.cause__fix { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14.5px; font-weight: 650; color: var(--ci); text-decoration: none; }
.cause__fix img { width: 22px; height: 22px; object-fit: contain; }
.cause__fix:hover { text-decoration: underline; }
.cause__grid.is-focus .cause:not(.is-hot) { opacity: 0.82; }

.cmark { grid-area: mark; position: relative; aspect-ratio: 1; }
.cmark svg { width: 100%; height: 100%; overflow: visible; }
.cmark__arc { fill: none; stroke-width: 30; transition: opacity 0.3s, transform 0.3s var(--ease); transform-box: view-box; transform-origin: 150px 150px; }
.cmark__arc--tl { stroke: var(--orange); }
.cmark__arc--tr { stroke: var(--teal); }
.cmark__arc--br { stroke: var(--lime); }
.cmark__arc--bl { stroke: var(--red); }
.cause__grid.is-focus .cmark__arc:not(.is-hot) { opacity: 0.18; }
.cmark__arc.is-hot { transform: scale(1.05); }
.js .cmark__arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cmark.is-drawn .cmark__arc { animation: draw 0.9s var(--ease-io) forwards; }
.cmark.is-drawn .cmark__arc--tr { animation-delay: 0.15s; }
.cmark.is-drawn .cmark__arc--br { animation-delay: 0.3s; }
.cmark.is-drawn .cmark__arc--bl { animation-delay: 0.45s; }
.cmark__center { position: absolute; inset: 27%; display: grid; place-items: center; }
.cmark__center img { width: 72%; height: auto; transition: opacity 0.25s; }
.cmark__center.is-swapping img { opacity: 0; }

/* ─── The loop ─────────────────────────────────────────────────────────────── */

.loop__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.loop__copy { display: grid; gap: 22px; align-content: start; }
.loop__ring { justify-self: center; width: min(420px, 100%); }

.ring { position: relative; width: min(440px, 100%); aspect-ratio: 1; --rot: 0; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring__track { fill: none; stroke: var(--hair); stroke-width: 2; }
.ring__ticks { fill: none; stroke: #D9CAB7; stroke-width: 1; stroke-dasharray: 1 11.1; }

/* Three arcs, one per product, drawn as the file reaches each next station. */
.ring__arc {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 314.16 942.48;
    stroke-dashoffset: 314.16;
    transition: stroke-dashoffset 1s var(--ease-io);
}
.ring__arc--0 { stroke: var(--teal); }
.ring__arc--1 { stroke: var(--orange); }
.ring__arc--2 { stroke: var(--lime); }
.ring__arc.is-on { stroke-dashoffset: 0; }

.ring__node circle { fill: var(--paper); stroke: var(--hair-strong); stroke-width: 2; transition: fill 0.4s, stroke 0.4s; }
.ring__node text { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--muted); transition: fill 0.4s; }
.ring__node.is-done text { fill: var(--ink); }
.ring__node[data-node="0"].is-done circle { fill: var(--teal); stroke: var(--teal); }
.ring__node[data-node="1"].is-done circle { fill: var(--orange); stroke: var(--orange); }
.ring__node[data-node="2"].is-done circle { fill: var(--lime); stroke: var(--lime); }

.ring__return { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 5 6; opacity: 0; transition: opacity 0.6s 0.6s; }
.ring.is-closed .ring__return { opacity: 1; }

.ring__token {
    transform: rotate(calc(var(--rot) * 1deg));
    transform-box: view-box;
    transform-origin: 200px 200px;
    transition: transform 1s var(--ease-io);
}
.ring__token circle:first-child { fill: var(--ink); }
.ring__token circle:last-child { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.4; }
.ring.is-closed .ring__token circle:first-child { fill: var(--red); }
.ring.is-closed .ring__token circle:last-child { stroke: var(--red); }

.ring__center { position: absolute; inset: 24%; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.ring__center img { width: 52px; height: 52px; object-fit: contain; }
.ring__step { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ring__name { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.06; }
.ring__verb { font-size: 14.5px; color: var(--muted); max-width: 17ch; line-height: 1.35; }
.ring__center > * { transition: opacity 0.25s; }
.ring__center.is-swapping > * { opacity: 0; }

/* The stages: one row per service, each in its own color, and the loop closing under them. */
.stages { display: grid; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.stage { border-bottom: 1px solid var(--hair); --sc: var(--teal); --sci: var(--teal-ink); }
.stage--audit { --sc: var(--orange); --sci: var(--orange-ink); }
.stage--recovery { --sc: var(--lime); --sci: var(--lime-ink); }
.stage--loop { --sc: var(--red); --sci: var(--red); }
.stage > a, .stage > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 4px 0; padding: 12px 14px 12px 8px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background-color 0.25s; }
.stage.is-active > a, .stage.is-active > div { background: color-mix(in srgb, var(--sc) 9%, transparent); }
.stage__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--sc); font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--sci); transition: background-color 0.25s, color 0.25s; }
.stage.is-active .stage__n { background: var(--sc); color: var(--ink); }
.stage--loop.is-active .stage__n { color: var(--card); }
.stage__txt b { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.stage__txt em { margin-left: 10px; font-style: normal; font-size: 14px; font-weight: 650; color: var(--sci); }
.stage__txt > span { display: block; margin-top: 2px; color: var(--muted); font-size: 16px; line-height: 1.45; }
/* The active row's tint costs the second line contrast (the loop's red read 4.48:1); deepen it past 4.5.
   "Explore" likewise: orange ink on the Write row's teal tint read 4.38:1, deepened it reads 5.3:1. */
.stage.is-active .stage__txt > span { color: color-mix(in srgb, var(--muted) 85%, var(--ink)); }
.stage.is-active .stage__go { color: color-mix(in srgb, var(--orange-ink) 85%, var(--ink)); }
.stage__go { font-family: var(--display); font-style: italic; font-weight: 600; color: var(--orange-ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s var(--ease); }
.stage > a:hover .stage__go, .stage > a:focus-visible .stage__go, .stage.is-active .stage__go { opacity: 1; transform: none; }

/* ─── Sensors ──────────────────────────────────────────────────────────────── */

.sense { overflow: hidden; }
.sense__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(40px, 5vw, 72px);
}
.car { position: relative; }
.car svg { width: 100%; height: auto; overflow: visible; }
.car__body { fill: #29323A; stroke: rgba(246, 241, 234, 0.32); stroke-width: 1.5; }
.car__glass { fill: #161B1E; stroke: rgba(246, 241, 234, 0.22); stroke-width: 1.2; }
.car__line { fill: none; stroke: rgba(246, 241, 234, 0.16); stroke-width: 1.2; }
.car__wheel { fill: #0F1315; stroke: rgba(246, 241, 234, 0.18); stroke-width: 1; }
.car__lamp { fill: rgba(246, 241, 234, 0.5); }
.car__lamp--r { fill: rgba(200, 31, 49, 0.8); }



.cone { fill: url(#coneFill); opacity: 0.16; transition: opacity 0.4s; }
.cone--edge { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: 0; transition: opacity 0.4s; }
/* Only the chosen sensor moves (its hot spot's ping below); the others hold still, so the eye stays
   on the chosen one and its reading. */
.cone.is-on { opacity: 0.85; }
.cone--edge.is-on { opacity: 0.7; }

.hot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; --focus: var(--orange); }
.hot::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 2px var(--orange); transition: background-color 0.2s; }
.hot::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 1.5px solid var(--orange); opacity: 0; }
.hot:hover::before, .hot[aria-pressed="true"]::before { background: var(--orange); }
.sense.is-inview .hot[aria-pressed="true"]::after { animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { opacity: 0.8; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.9); } }
.hot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sense__panel { display: grid; gap: 22px; min-width: 0; }
/* The five readings share one cell, so the panel is always as tall as the longest of them and
   switching sensors never moves the page below. The hidden ones keep their place but are invisible,
   so they are neither seen, focused nor read. With no script every reading shows, stacked (site.css). */
.js .sense__panel { grid-template-areas: "chips" "reading"; }
.js .sense__panel > .chips { grid-area: chips; }
.js .sense__panel > .sensor { grid-area: reading; align-self: start; }
.js .sense__panel > .sensor[hidden] { display: grid !important; visibility: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--hair-dk);
    border-radius: 999px;
    color: var(--cream-2);
    font-size: 14.5px;
    font-weight: 560;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { color: var(--cream); border-color: var(--cream-2); }
.chip[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }

.sensor { display: grid; gap: 18px; }
.sensor.is-entering > * { animation: lift 0.5s var(--ease) both; }
.sensor.is-entering > :nth-child(2) { animation-delay: 0.05s; }
.sensor.is-entering > :nth-child(3) { animation-delay: 0.1s; }
.sensor__where { margin: 0; color: var(--cream-2); }
.sensor dl { display: grid; gap: 16px; margin: 0; }
.sensor dl > div { padding-top: 14px; border-top: 1px solid var(--hair-dk); }
.sensor dt { font-size: 13px; color: var(--cream-2); }
.sensor dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--cream); }
.sensor dd b { color: var(--orange); font-weight: 650; }

/* One calibration, all three services. */
.suite3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(48px, 6vw, 80px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair-dk);
}
.suite3 li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; padding: 22px 24px 0 0; }
.suite3 li + li { padding-left: 24px; border-left: 1px solid var(--hair-dk); }
.suite3 img { grid-row: span 2; width: 40px; height: 40px; object-fit: contain; }
.suite3 b { font-family: var(--display); font-size: 17px; font-weight: 700; }
.suite3 span { color: var(--cream-2); font-size: 15.5px; line-height: 1.45; }
.suite3 li:nth-child(1) b { color: var(--teal); }
.suite3 li:nth-child(2) b { color: var(--orange); }
.suite3 li:nth-child(3) b { color: var(--lime); }

/* ─── How we work ──────────────────────────────────────────────────────────── */

.work .h2 { font-size: clamp(32px, 3.6vw, 50px); }
.work__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.work__systems { display: grid; gap: 2px; margin-top: 40px; padding: 0; list-style: none; }
.work__systems li { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.08; color: var(--muted); }
.work__systems li:first-child { color: var(--ink); }
.work__systems small { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.work__facts { display: grid; margin: 0; }
.work__facts > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--hair); }
.work__facts > div:last-child { border-bottom: 1px solid var(--hair); }
.work__facts dt { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.work__facts dd { margin: 0; color: var(--muted); }
.work__cieca { display: flex; align-items: center; gap: 16px; }
.work__cieca img { width: 58px; height: auto; border-radius: 6px; }

/* ─── Lite mode ────────────────────────────────────────────────────────────── */

.ps-lite.js .datum .dl, .ps-lite.js .datum .dp, .ps-lite.js .datum text { animation: none; stroke-dashoffset: 0; opacity: 1; }
.ps-lite .sense.is-inview .hot[aria-pressed="true"]::after { animation: none; }
.ps-lite.js .cmark__arc { stroke-dashoffset: 0; animation: none; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .hero__top { grid-template-columns: minmax(0, 1fr); }
    .hero__copy { max-width: 640px; }
    /* Three cards in a swipeable row, the next one peeking, so all three read as separate services. */
    .wins { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; margin-inline: -24px; padding: 4px 24px 16px; scrollbar-width: none; }
    .wins::-webkit-scrollbar { display: none; }
    .win { flex: 0 0 min(340px, 84%); scroll-snap-align: start; }
    .wins__pager { display: flex; gap: 8px; margin-top: 36px; }
    .wins__pager a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--hair-dk);
        border-radius: 999px;
        color: var(--cream-2);
        font-size: 14px;
        font-weight: 650;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .wins__pager a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wc); }
    .wins__pager a[aria-current="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
    .wins__pager + .wins { margin-top: 14px; }
    .datum { -webkit-mask-image: none; mask-image: none; top: 78%; }

    .cause__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mark mark" "tl tr" "bl br"; }
    .cmark { width: min(260px, 70%); justify-self: center; }

    .loop__grid { grid-template-columns: minmax(0, 1fr); }
    .loop__ring { width: min(300px, 78%); }

    .sense__grid { grid-template-columns: minmax(0, 1fr); }
    .suite3 { grid-template-columns: minmax(0, 1fr); }
    .suite3 li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair-dk); padding-top: 18px; margin-top: 18px; }

    .work__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .wins { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .wins__pager { gap: 6px; }
    .wins__pager a { padding: 0 11px; font-size: 13.5px; }
    .cause__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "tl" "tr" "bl" "br"; }
    .stage__go { display: none; }
    .stage > a, .stage > div { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
    .stage__txt em { display: block; margin: 0; }
    .work__facts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    /* The mark among the four causes and the loop ring are decoration the copy already carries. */
    .cause__grid { grid-template-areas: "tl" "tr" "bl" "br"; row-gap: 32px; }
    .cmark, .loop__ring { display: none; }
}