/*
 * blok3 — "What DEPO is" (demo14 .h17-about): the statement lights word by word as it scrolls
 * through, then four tools switch on with a small warm light bar. ".h17-js" sits on the block
 * root (set by js/blok3.js).
 */
.h17-about {
    --k-edge: clamp(16px, 3.4vw, 56px);
    --k-opsz: "opsz" 12;
    --k-ease: cubic-bezier(.2, .7, .15, 1);
    color: var(--k-ink); font-family: var(--k-sans); overflow-x: clip; font-variation-settings: var(--k-opsz);
}
.h17-about :where(*) { color: inherit; }
.h17-about ul { list-style: none; margin: 0; padding: 0; }
.h17-about .h17-wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); }
.h17-about .h17-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h17-about .h17-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--k-sans);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
    text-decoration-color: rgb(255 207 148 / 0.6); transition: color 200ms ease, text-decoration-color 200ms ease;
}
.h17-about .h17-link:hover { color: var(--k-warm); text-decoration-color: var(--k-warm); }
.h17-about a:focus-visible, .h17-about button:focus-visible { outline: 2px solid var(--k-warm); outline-offset: 3px; }

/* ── what DEPO is ─────────────────────────────────────────────────────────────────────── */
.h17-about { padding: clamp(120px, 14vw, 240px) 0 clamp(96px, 11vw, 180px); background: var(--k-ground); }
.h17-statement {
    margin: 0; max-width: 30ch; font: 400 clamp(30px, 3.1vw, 46px)/1.18 var(--k-serif); font-variation-settings: var(--k-opsz);
    letter-spacing: -0.015em; text-wrap: pretty;
}
.h17-js .h17-about .h17-w { opacity: 0.16; transition: opacity 240ms linear; }
.h17-about .h17-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 56px); margin-top: clamp(80px, 10vw, 160px) !important; }
.h17-about .h17-tool { position: relative; padding-top: 28px; }
.h17-about .h17-tool::before {
    content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px; border-radius: 2px;
    background: var(--k-warm); box-shadow: 0 0 18px rgb(255 207 148 / 0.7); transform-origin: left;
    transition: transform 900ms var(--k-ease), opacity 900ms ease;
}
.h17-about .h17-tool h3 { margin: 0 0 14px; font: 500 clamp(24px, 2vw, 30px)/1.1 var(--k-serif); letter-spacing: -0.01em; }
.h17-about .h17-tool p { margin: 0 0 10px; max-width: 34ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
.h17-js .h17-about .h17-tool { opacity: 0.25; transform: translate3d(0, 18px, 0); transition: opacity 900ms ease, transform 900ms var(--k-ease); }
.h17-js .h17-about .h17-tool::before { transform: scaleX(0); opacity: 0; }
.h17-js .h17-about .h17-tool.is-lit { opacity: 1; transform: none; }
.h17-js .h17-about .h17-tool.is-lit::before { transform: none; opacity: 1; }
.h17-about .h17-tool:nth-child(2) { transition-delay: 90ms; }
.h17-about .h17-tool:nth-child(3) { transition-delay: 180ms; }
.h17-about .h17-tool:nth-child(4) { transition-delay: 270ms; }

/* ── tablet and phone ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .h17-about .h17-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .h17-about .h17-tools { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .h17-about *, .h17-about *::before, .h17-about *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
    .h17-js .h17-about .h17-tool { transform: none; }
    .h17-js .h17-about .h17-w { opacity: 1; }
}