/* qadam-a "Walk": the six sections of the Qadam board, direction A. A walk through the making: footprints press into the page in step with the scroll (the trail
   between the sections), the brief hangs on the paper tag of a wooden last, the personas are paper foot tracings, the journey is five prints across a stone floor,
   the design is the shoemaker's bench, the product page stands beside the mule in profile, the tokens are a leather wall. Scoped under .dir-qadam-a, class prefix
   dqa-. Markup: src/_includes/e2/theme/dir/qadam-a/*.njk, behaviour: e2-dir-qadam-a.js. Scroll-driven motion is transform / opacity / clip-path / stroke-dashoffset
   only; the before-states live under html.th-js (set by e2-theme.js unless reduced motion), and a calm block at the end (reduced motion, or a screen under 600px
   tall) shows every finished state, static. */

.dir-qadam-a {
  --paper: #FBFAF7; --stone: #EFEBE4; --ink: #121212; --ox: #6E1F24; --ox-d: #5A181D; --grey: #5D5851; --hair: #E7E3DD; --tan: #B98B5E;
  --umber: #1E1A16; --umber-2: #2C2620; --kraft: #EBDFC9; --sole: #8F8372;
  --f-disp: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif; --f-ui: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dqa-pad: clamp(20px, 3.4vw, 48px); --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--f-ui);
}
.dir-qadam-a img { display: block; }
.dir-qadam-a .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* On the real /qadam page the direction is two <div class="dir dir-qadam-a"> wrappers (layouts/case-study-e2.njk) inside .e2-cs__body > .e2-wrap: they carry the tokens and fonts down but add no box. */
div.dir-qadam-a { display: contents; }
.dqa-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the shared frame of a section ---------- */
.dir-qadam-a .dqa-sec { --fg: var(--ink); --mut: var(--grey); --line: rgba(18, 18, 18, .16); position: relative; display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); padding: var(--dqa-pad); border-radius: 28px; overflow: clip; color: var(--fg); background: var(--paper); font-family: var(--f-ui); }
.dir-qadam-a .dqa-stone { background: var(--stone); }
.dir-qadam-a .dqa-dark { --fg: #F4F0E8; --mut: #CFC7BA; --line: rgba(244, 240, 232, .2); background: var(--umber); }
.dir-qadam-a .dqa-sec :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dir-qadam-a .dqa-dark :focus-visible { outline-color: #F4F0E8; }
.dir-qadam-a .dqa-sec .th-hd { gap: 18px 56px; }
.dir-qadam-a .dqa-sec .th-hd__eyebrow { color: var(--mut); font-size: 12px; letter-spacing: .1em; }
.dir-qadam-a .dqa-sec .th-hd__title { font-family: var(--f-disp); font-weight: 600; font-size: clamp(40px, 5.6vw, 80px); line-height: .96; letter-spacing: -.04em; color: var(--fg); text-wrap: balance; }
.dir-qadam-a .dqa-sec .th-hd__aside { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--mut); }
.dqa-k { display: block; margin-bottom: 4px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- the trail: footprints pressed in between the sections, one per step of the scroll ---------- */
.dqa-trail { --p: 1; position: relative; flex: none; height: clamp(104px, 9.6vw, 136px); margin-block: -10px; pointer-events: none; }
.dqa-fp { position: absolute; top: calc(var(--k) * 34px + 4px); left: calc(50% - 12px + (var(--k) - 1) * 0px); width: 22px; height: 64px; fill: color-mix(in srgb, var(--tan) 78%, #fff 6%); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tan) 48%, transparent)); --q: 1; opacity: .9; transform-origin: 50% 60%; }
.dqa-fp:nth-child(odd) { translate: -16px 0; }
.dqa-fp:nth-child(even) { translate: 16px 0; }
.dqa-fp--r { scale: -1 1; }
.dqa-fp { rotate: calc((var(--k) - 1) * 5deg); }
.th-js .dqa-trail { --q0: 0; }
.th-js .dqa-fp { --q: clamp(0, calc(var(--p) * 3.4 - var(--k) * .9), 1); opacity: calc(var(--q) * .9); transform: scale(calc(1.45 - .45 * var(--q))); }

/* =====================================================================================================================
   01 Discover: a wooden last on its hook, the brief on its paper tag, three foot tracings pinned to the wall
   ===================================================================================================================== */
.dqa-wall { position: relative; container-type: inline-size; border-radius: 20px; overflow: hidden; background:
  radial-gradient(60% 50% at 20% 10%, rgba(255, 255, 255, .55), transparent 70%),
  linear-gradient(180deg, #EFEBE4, #E2DBCE); box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08); }
.dqa-wall__in { position: relative; display: grid; grid-template-columns: 44cqw minmax(0, 1fr); align-items: start; padding: 28px 0; }
.dqa-wall::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dir-qadam-a .dqa-last { grid-column: 1; margin: 0 0 0 4cqw; width: 40cqw; position: relative; z-index: 1; rotate: -4deg; transform-origin: 8% 4%; }
.dqa-last img { width: 100%; height: auto; filter: drop-shadow(12px 20px 14px rgba(60, 38, 14, .38)); }
.dqa-string { position: absolute; z-index: 2; left: 0; top: 28px; width: 100cqw; height: 20cqw; overflow: visible; pointer-events: none; }
.dqa-string path { fill: none; stroke: #3a2e22; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dqa-tag { position: relative; z-index: 3; grid-column: 2; margin: 6cqw 4cqw 0 0; padding: 40px clamp(24px, 3.2cqw, 44px) clamp(26px, 3cqw, 40px); rotate: 1.2deg; color: var(--ink); filter: drop-shadow(0 22px 20px rgba(60, 40, 18, .3)) drop-shadow(0 2px 2px rgba(60, 40, 18, .25)); }
.dqa-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(18, 18, 18, .045) 1px, transparent 1px) 0 0 / 100% 32px,
  linear-gradient(135deg, #F1E6D0, #E8D9BD); clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px); }
.dqa-tag__loop { position: absolute; left: 50%; top: 11px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #E0D5C2; box-shadow: inset 0 0 0 3px #B98B5E, inset 0 2px 3px rgba(0, 0, 0, .35); }
.dqa-tag__loop::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 1.7px; height: 30px; margin-left: -.85px; background: #3a2e22; }
.dir-qadam-a .dqa-tag__goal { margin: 0 0 22px; font: 400 clamp(22px, 2.5cqw, 32px)/1.2 var(--f-disp); letter-spacing: -.02em; text-wrap: pretty; }
.dqa-tag__list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px dashed rgba(18, 18, 18, .35); display: flex; flex-direction: column; gap: 12px; }
.dqa-tag__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: #2f2a25; }
.dqa-tag__n { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font: 500 11px/1 var(--mono); color: var(--paper); background: var(--ink); }

.dqa-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(16px, 2.4vw, 36px); }
.dqa-pers { display: flex; flex-direction: column; gap: 18px; min-width: 0; --p0: 0; }
.dqa-pers:nth-child(1) .dqa-sheet { rotate: -1.4deg; }
.dqa-pers:nth-child(2) .dqa-sheet { rotate: .9deg; }
.dqa-pers:nth-child(3) .dqa-sheet { rotate: -.6deg; }
.dqa-sheet { --p: 1; position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.1; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; perspective: 1400px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: var(--ink); font: inherit; }
.dqa-sheet__in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.dqa-sheet[aria-pressed="true"] .dqa-sheet__in { transform: rotateY(180deg); }
.dqa-sheet__face { position: absolute; inset: 0; display: block; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px; box-shadow: 0 1px 0 rgba(18, 18, 18, .12), 0 26px 30px -22px rgba(40, 28, 12, .55), 0 0 0 1px rgba(18, 18, 18, .07); }
.dqa-sheet__front { background:
  radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .8), transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .34 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  #F6F2EA; }
.dqa-sheet__back { transform: rotateY(180deg); background: var(--ink); }
.dqa-sheet__back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dqa-sheet__tape { position: absolute; z-index: 2; top: -6px; left: 50%; width: 92px; height: 26px; margin-left: -46px; rotate: -3deg; background: rgba(214, 196, 160, .72); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.dqa-trace { position: absolute; left: 0; top: 2%; width: 100%; height: 70%; overflow: visible; }
.dqa-trace .dqa-pen { fill: none; stroke: #2a2724; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.dqa-trace .dqa-pen--m { stroke: var(--ox); stroke-width: 1.3; }
.dqa-trace__fit { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--sx, 1), var(--sy, 1)); }
.dqa-trace__t { font: 500 9px/1 var(--mono); fill: var(--ox); letter-spacing: .04em; }
.dqa-sheet__say { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 14px 20px 20px; }
.dqa-sheet__front .dqa-sheet__say { border-top: 1px dashed rgba(18, 18, 18, .3); background: rgba(246, 242, 234, .6); }
.dqa-sheet__front .dqa-k { color: var(--ox); }
.dqa-sheet__q { display: block; font: 400 clamp(21px, 2vw, 27px)/1.18 var(--f-disp); letter-spacing: -.02em; text-wrap: balance; }
.dqa-sheet__say--move { padding-top: 56px; color: var(--ink); background: linear-gradient(0deg, rgba(251, 250, 247, .98) 62%, rgba(251, 250, 247, 0)); }
.dqa-sheet__say--move .dqa-k { color: var(--ox); }
.dqa-sheet__a { display: block; font-size: 14.5px; line-height: 1.5; font-weight: 500; }
.dqa-pers__cap { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--grey); }
.dqa-pers__cap b { font: 600 22px/1.15 var(--f-disp); letter-spacing: -.02em; color: var(--ink); }
.dqa-pers__cap > span:last-child { grid-column: 2; }
.dqa-pers__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(18, 18, 18, .18); }
.dqa-sheet:hover { translate: 0 -3px; }
.dqa-sheet { transition: translate .25s var(--ease); }

/* =====================================================================================================================
   02 Define: five footprints across a stone floor
   ===================================================================================================================== */
.dqa-legend { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.4 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; }
.dqa-legend__bar { flex: 0 0 72px; height: 2px; background: linear-gradient(90deg, var(--sole), var(--ink)); }
.dir-qadam-a .dqa-define .th-hd__aside.dqa-legend { max-width: none; color: var(--grey); }
.dqa-floor { --slabs: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22720%22 height=%22480%22 viewBox=%220 0 720 480%22%3E%3Cpath d=%22M130.3 -1.4 L260.7 -0.8 L260.1 148.8 L129.2 149.0Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M132.3 0.6 L258.7 1.2%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M260.7 -0.8 L433.9 0.4 L437.2 151.2 L260.1 148.8Z%22 fill=%22%23E8E1D4%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M262.7 1.2 L431.9 2.4%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M433.9 0.4 L715.9 1.3 L713.9 151.3 L437.2 151.2Z%22 fill=%22%23E0D8C9%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M435.9 2.4 L713.9 3.3%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M-4.1 1.3 L130.3 -1.4 L129.2 149.0 L-6.1 151.3Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-2.1 3.3 L128.3 0.6%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M715.9 1.3 L850.3 -1.4 L849.2 149.0 L713.9 151.3Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M717.9 3.3 L848.3 0.6%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M-67.1 150.4 L61.4 151.0 L61.1 261.9 L-66.7 261.9Z%22 fill=%22%23D8CFBF%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-65.1 152.4 L59.4 153.0%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M652.9 150.4 L781.4 151.0 L781.1 261.9 L653.3 261.9Z%22 fill=%22%23D8CFBF%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M654.9 152.4 L779.4 153.0%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M61.4 151.0 L77.6 150.2 L79.0 261.0 L61.1 261.9Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M63.4 153.0 L75.6 152.2%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M77.6 150.2 L260.3 149.1 L262.4 258.3 L79.0 261.0Z%22 fill=%22%23E0D8C9%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M79.6 152.2 L258.3 151.1%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M260.3 149.1 L652.9 150.4 L653.3 261.9 L262.4 258.3Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M262.3 151.1 L650.9 152.4%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M298.8 258.6 L435.9 259.2 L438.5 388.6 L298.6 390.4Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M300.8 260.6 L433.9 261.2%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M435.9 259.2 L702.0 258.8 L698.4 391.0 L438.5 388.6Z%22 fill=%22%23DDD4C5%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M437.9 261.2 L700.0 260.8%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M-18.0 258.8 L2.4 261.2 L4.6 388.8 L-21.6 391.0Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-16.0 260.8 L0.4 263.2%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M702.0 258.8 L722.4 261.2 L724.6 388.8 L698.4 391.0Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M704.0 260.8 L720.4 263.2%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M2.4 261.2 L298.8 258.6 L298.6 390.4 L4.6 388.8Z%22 fill=%22%23E0D8C9%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M4.4 263.2 L296.8 260.6%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M722.4 261.2 L1018.8 258.6 L1018.6 390.4 L724.6 388.8Z%22 fill=%22%23E0D8C9%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M724.4 263.2 L1016.8 260.6%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M496.6 388.3 L666.7 388.5 L665.4 481.3 L499.3 482.0Z%22 fill=%22%23E5DED1%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M498.6 390.3 L664.7 390.5%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M666.7 388.5 L679.8 389.0 L679.4 480.5 L665.4 481.3Z%22 fill=%22%23DDD4C5%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M668.7 390.5 L677.8 391.0%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M-40.2 389.0 L32.4 388.8 L33.5 480.9 L-40.6 480.5Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M-38.2 391.0 L30.4 390.8%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M679.8 389.0 L752.4 388.8 L753.5 480.9 L679.4 480.5Z%22 fill=%22%23E3DBCD%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M681.8 391.0 L750.4 390.8%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3Cpath d=%22M32.4 388.8 L496.6 388.3 L499.3 482.0 L33.5 480.9Z%22 fill=%22%23E0D8C9%22 stroke=%22%23B9AE9C%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M34.4 390.8 L494.6 390.3%22 stroke=%22%23F3EEE4%22 stroke-width=%221.4%22 opacity=%22.7%22/%3E%3C/svg%3E") 0 0 / 720px 480px; --p: 1; --pm: 1; list-style: none; margin: 0; padding: clamp(28px, 3.2vw, 44px) clamp(16px, 2vw, 28px) clamp(22px, 2.4vw, 32px); position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(8px, 1vw, 14px); border-radius: 20px; overflow: hidden; isolation: isolate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--slabs), #DDD5C7; background-blend-mode: multiply, normal, normal; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .1), inset 0 30px 60px -40px rgba(60, 44, 24, .35); }
.dqa-st { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; --q: 1; --qm: 1; }
.dqa-st__ground { position: relative; height: clamp(190px, 17vw, 250px); }
.dqa-print { position: absolute; left: 50%; top: var(--dy); width: clamp(44px, 4.4vw, 62px); height: auto; aspect-ratio: 100 / 290; margin-left: calc(clamp(44px, 4.4vw, 62px) / -2); overflow: visible; rotate: var(--rot); }
.dqa-print__rim { fill: rgba(255, 255, 255, .85); transform: translate(1.8px, 2.4px); }
.dqa-print__body { fill: color-mix(in srgb, var(--sole) calc(52% + var(--m) * 48%), #5f5547); filter: drop-shadow(0 -1.2px 0 rgba(30, 20, 8, .38)); }
.dqa-st__slip { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 3px; background: var(--paper); box-shadow: 0 1px 0 rgba(18, 18, 18, .1), 0 22px 26px -20px rgba(40, 28, 12, .6), 0 0 0 1px rgba(18, 18, 18, .06); flex: 1; }
.dqa-st__slip::before { content: ""; position: absolute; top: -6px; left: 18px; width: 54px; height: 18px; rotate: -2deg; background: rgba(214, 196, 160, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.dqa-st__no { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--ox-d); }
.dqa-st__name { margin: 0; font: 600 clamp(24px, 2.1vw, 30px)/1.05 var(--f-disp); letter-spacing: -.03em; }
.dqa-st__hes, .dqa-st__ans { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.dqa-st__hes { font-style: normal; color: #4a443d; }
.dqa-st__hes .dqa-k, .dqa-st__ans .dqa-k { color: var(--ox-d); }
.dqa-st__ans { padding-top: 10px; border-top: 1px dashed rgba(18, 18, 18, .28); font-weight: 500; }
.dir-qadam-a .dqa-st__who { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 6px; font: 500 12px/1.3 var(--f-ui); color: #5a544c; }
.dqa-st__who i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(18, 18, 18, .22); }

/* =====================================================================================================================
   03 Design: the shoemaker's bench. A rail of ten stations slides under an awl; each inks wire -> storefront as it passes.
   ===================================================================================================================== */
.dqa-hd--bench { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 260px); gap: 24px clamp(24px, 4vw, 64px); align-items: end; }
.dqa-hd__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dir-qadam-a .dqa-hd__text .th-hd__aside { margin: 4px 0 0; }
.dir-qadam-a .dqa-macro { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0c0a08 center / cover no-repeat url("/assets/video/themes/qadam-macro-poster.webp"); box-shadow: 0 0 0 1px rgba(244, 240, 232, .16), 0 24px 40px -24px rgba(0, 0, 0, .8); }
.dqa-macro__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dqa-macro__pause { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #F4F0E8; background: rgba(18, 14, 10, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .35); touch-action: manipulation; }
.dqa-macro__pause[hidden] { display: none; }
.dqa-macro__ic--play { display: none; }
.dqa-macro__pause[aria-pressed="true"] .dqa-macro__ic--pause { display: none; }
.dqa-macro__pause[aria-pressed="true"] .dqa-macro__ic--play { display: block; }

.dqa-track { --p: 1; --pm: 1; --sh: clamp(520px, calc(100vh - 170px), 600px); position: relative; }
.dqa-stage { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; isolation: isolate; background: radial-gradient(70% 60% at 30% 10%, #3a322a, var(--umber-2) 60%, #1a1612); box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .1); }
.dqa-bar { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; padding: 14px 18px 0; }
.dir-qadam-a .dqa-count { flex: none; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--mut); font-variant-numeric: tabular-nums; }
.dqa-count span { color: #F4F0E8; font-size: 18px; }
.dqa-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dqa-tab { display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 22px; cursor: pointer; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: #C9C1B5; background: transparent; box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .22); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .dqa-tab:hover { box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .6); color: #F4F0E8; } }
.dqa-tab__v { text-transform: uppercase; }
.dqa-tab[aria-current="true"] { color: var(--ink); background: #F4F0E8; box-shadow: none; }
.dqa-rail { position: relative; z-index: 2; flex: 1; min-height: 0; }
.dqa-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; padding: 24px 24px 28px; }
.dqa-stn { --q: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-width: 0; }
.dqa-stn__top { display: flex; flex-direction: column; gap: 6px; }
.dqa-stn__no { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tan); }
.dqa-stn__nm { margin: 0; font: 600 clamp(20px, 1.7vw, 24px)/1.08 var(--f-disp); letter-spacing: -.025em; color: #F4F0E8; }
.dqa-stn__note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--mut); text-wrap: pretty; }
.dqa-stn__vp { border-radius: 4px; background: #E9E6E0; box-shadow: 0 0 0 1px rgba(244, 240, 232, .22), 0 22px 26px -18px rgba(0, 0, 0, .8); }
.dqa-stn__art { --k: tan(atan2(100cqw, 1440px)); }
.dqa-stn__art img { position: absolute; left: 0; top: 0; width: 1440px; max-width: none; height: calc(var(--h) * 1px); }
.dqa-stn__ink { clip-path: inset(0 calc((1 - var(--q)) * 100%) 0 0); }
.dqa-stn__edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--q) * 100%); width: 2px; margin-left: -1px; background: #F4F0E8; box-shadow: 0 0 12px 2px rgba(244, 240, 232, .65); opacity: calc(clamp(0, var(--q) * 30, 1) * clamp(0, (1 - var(--q)) * 30, 1)); pointer-events: none; }
.dqa-awl, .dqa-bench { display: none; }
.dqa-stn.is-cur .dqa-stn__no { color: #F4F0E8; }

/* ---------- 04 Optimise: the mule in profile, the buy box beside it ---------- */
.dqa-opt__grid { --p: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.dqa-opt__left { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dqa-board { position: relative; aspect-ratio: 600 / 350; border-radius: 18px; overflow: hidden; background:
  linear-gradient(rgba(18, 18, 18, .06) 1px, transparent 1px) 0 0 / 100% 10%,
  linear-gradient(90deg, rgba(18, 18, 18, .06) 1px, transparent 1px) 0 0 / 5% 100%,
  radial-gradient(70% 90% at 30% 10%, #fff, #F2EEE6); box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .1), 0 24px 36px -28px rgba(40, 28, 12, .6); }
.dqa-board__shoe { position: absolute; left: 0; top: calc(-70 / 350 * 100%); width: 100%; height: auto; filter: drop-shadow(0 26px 14px rgba(70, 48, 20, .28)); }
.dqa-board__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.dqa-cl { fill: none; stroke: var(--ox); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; vector-effect: non-scaling-stroke; }
.dqa-cl--d { stroke-dasharray: .006 .014; opacity: .45; }
.dqa-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: 600 15px/1 var(--f-ui); color: var(--ink); background: rgba(251, 250, 247, .9); box-shadow: 0 0 0 1.5px var(--ink), 0 8px 14px -6px rgba(0, 0, 0, .45); transition: background-color .2s ease, color .2s ease, scale .25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; }
.dqa-pin::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(18, 18, 18, .22); opacity: 0; scale: .8; transition: opacity .25s ease, scale .3s var(--ease); }
.dqa-pin.is-on, .dqa-pin[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.dqa-pin.is-on::after { opacity: 1; scale: 1; }
@media (hover: hover) { .dqa-pin:hover { scale: 1.08; } }
.dqa-decs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.dqa-dec { border-bottom: 1px solid var(--line); }
.dqa-dec__h { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); touch-action: manipulation; font: inherit; -webkit-tap-highlight-color: transparent; }
.dqa-dec__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 600 13px/1 var(--f-ui); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .2s ease, color .2s ease; font-variant-numeric: tabular-nums; }
.dqa-dec__t { font: 600 clamp(17px, 1.5vw, 20px)/1.2 var(--f-disp); letter-spacing: -.015em; }
.dqa-dec.is-on .dqa-dec__n { color: var(--paper); background: var(--ink); }
.dqa-dec__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.dqa-dec.is-on .dqa-dec__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.dqa-dec__body > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 46px; font-size: 15px; line-height: 1.55; color: #3d3832; max-width: 60ch; }
.dqa-dec.is-on .dqa-dec__body > p { padding-bottom: 16px; }
.dqa-opt__right { position: sticky; top: 92px; min-width: 0; }
.dqa-buy { border-radius: 14px; background: #fff; box-shadow: 0 30px 50px -32px rgba(40, 28, 12, .6), 0 0 0 1px rgba(18, 18, 18, .12); }
.dqa-buy .th-artboard { --k: tan(atan2(100cqw, 580px)); width: 580px; }
.dqa-buy__row { position: absolute; width: 524px; max-width: none; height: auto; }
.dqa-hl { position: absolute; z-index: 2; border-radius: 3px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(18, 18, 18, .12); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.dqa-hl b { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 22px; height: 22px; translate: 50% -50%; border-radius: 50%; font: 600 12px/1 var(--f-ui); color: var(--paper); background: var(--ink); }
.dqa-hl.is-on { opacity: 1; }

/* =====================================================================================================================
   Tokens: the leather wall
   ===================================================================================================================== */
.dir-qadam-a .dqa-tok { --th-ink: #F4F0E8; --th-line: rgba(244, 240, 232, .18); --th-spring: cubic-bezier(.3, 1.4, .5, 1); position: relative; gap: clamp(24px, 3vw, 40px); background: radial-gradient(80% 60% at 20% 0%, #342c24, var(--umber) 70%); }
.dqa-tok__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(244, 240, 232, .2); }
.dqa-tok__cap { margin: 0; font: 600 clamp(28px, 3.2vw, 42px)/1 var(--f-disp); letter-spacing: -.035em; color: #F4F0E8; }
.dqa-tok__sub, .dqa-tok__lab { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dqa-hooks { position: relative; padding-top: 18px; }
.dqa-rail-bar { position: absolute; left: -4px; right: -4px; top: 14px; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #d8b98e, #8d6840 70%, #6a4b2b); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .6); }
.dqa-hides { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px clamp(8px, 1.4vw, 20px) !important; }
.dqa-hides > li { display: flex; justify-content: center; rotate: var(--r); transform-origin: 50% 0; }
.dqa-hide { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: min(100%, 168px); min-height: 44px; padding: 0 0 4px; border: 0; background: none; text-align: center; cursor: pointer; color: #F4F0E8; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dqa-hide__hook { position: relative; z-index: 2; display: block; width: 16px; height: 16px; margin-bottom: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1d9a8, #b98b5e 60%, #7a5530); box-shadow: 0 3px 4px rgba(0, 0, 0, .6); }
.dqa-hide__skin { position: relative; display: grid !important; place-items: center; width: 100%; aspect-ratio: 5 / 7 !important; margin-bottom: 12px !important; border-radius: 0 !important; color: #fff; background: none !important; box-shadow: none !important; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .55)); transition: transform .25s var(--th-spring); }
.dqa-hide__skin::before { content: ""; position: absolute; inset: 0; clip-path: polygon(8% 10%, 22% 5%, 38% 9%, 50% 0%, 62% 9%, 80% 4%, 93% 12%, 100% 30%, 95% 44%, 100% 58%, 93% 74%, 97% 92%, 80% 100%, 66% 94%, 50% 100%, 34% 94%, 18% 100%, 6% 90%, 10% 74%, 0% 58%, 7% 44%, 0% 30%); background:
  radial-gradient(70% 45% at 30% 20%, rgba(255, 255, 255, .28), transparent 70%),
  linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .22)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  var(--sw); }
.dqa-hide__skin::after { content: ""; position: absolute; inset: 7% 9%; clip-path: polygon(8% 10%, 22% 5%, 38% 9%, 50% 0%, 62% 9%, 80% 4%, 93% 12%, 100% 30%, 95% 44%, 100% 58%, 93% 74%, 97% 92%, 80% 100%, 66% 94%, 50% 100%, 34% 94%, 18% 100%, 6% 90%, 10% 74%, 0% 58%, 7% 44%, 0% 30%); background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, .0) 5px 6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .0); }
.dqa-hide .th-swatch__chip svg { position: relative; z-index: 1; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .55); }
.dqa-hide .th-swatch__name { font: 600 17px/1.15 var(--f-disp); letter-spacing: -.015em; color: #F4F0E8; }
.dqa-hide .th-swatch__hex { font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--mut); }
@media (hover: hover) { .dqa-hide:hover .dqa-hide__skin { transform: translateY(-4px) rotate(-1.5deg); } }
.dqa-tok__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.dqa-foil { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 32px); border-radius: 16px; background:
  radial-gradient(90% 70% at 20% 0%, rgba(255, 255, 255, .08), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  #14110e; box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .1), inset 0 0 0 7px #14110e, inset 0 0 0 8px rgba(185, 139, 94, .35); }
.dqa-types { list-style: none; margin: 0; padding: 6px 4px 4px; display: flex; flex-direction: column; gap: 22px; }
.dqa-type__meta { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9d9487; }
.dqa-type__sample { margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.02em; color: #c9a36f; background: linear-gradient(100deg, #8c6a3e 0%, #f0d9a8 28%, #b98b5e 46%, #f6e6bf 62%, #9a7344 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.dqa-strap { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 32px); border-radius: 16px; background: rgba(244, 240, 232, .05); box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .1); }
.dqa-strap__band { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; background:
  linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .25)),
  #6f4a2c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 5px #6f4a2c, inset 0 0 0 6px rgba(244, 224, 190, .28), 0 14px 18px -12px rgba(0, 0, 0, .6); flex-wrap: wrap; }
.dqa-eyelets { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.dqa-eye { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 26px; cursor: pointer; font: 500 15px/1 var(--f-ui); color: #F8EEDC; background: rgba(0, 0, 0, .28); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 2px #c9a46f, 0 1px 0 rgba(255, 255, 255, .15); touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease; }
.dqa-eye__ring { display: none; }
.dqa-eye[aria-checked="true"] { color: var(--ink); background: linear-gradient(180deg, #f6e3b8, #d9b676); box-shadow: inset 0 0 0 2px #fff4d6, 0 3px 6px rgba(0, 0, 0, .45); }
.dqa-eye__p { margin-left: 6px; opacity: .75; font-weight: 400; }
.dqa-buckle { position: relative; display: flex; align-items: center; padding: 0 0 0 16px; margin-left: auto; }
.dqa-buckle__frame { position: absolute; left: -6px; top: -9px; bottom: -9px; width: 26px; border-radius: 6px; border: 4px solid #d9b676; border-right-width: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.dqa-b { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font: 500 14px/1 var(--f-ui); letter-spacing: .02em; border-radius: 0; text-align: center; }
.dqa-b--fill { position: relative; color: var(--paper); background: var(--ink); box-shadow: 0 0 0 1px rgba(244, 240, 232, .3); }
.dqa-b--line { color: #F4F0E8; box-shadow: inset 0 0 0 1.5px rgba(244, 240, 232, .65); }
.dqa-strap__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.dqa-hang { display: inline-flex; align-items: baseline; gap: 12px; padding: 12px 18px 12px 26px; position: relative; color: var(--ink); background: #EBDFC9; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.dqa-hang::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--umber); }
.dqa-hang__p { font: 600 22px/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dqa-hang__n { font-size: 13px; line-height: 1.3; color: #4a443d; }
.dir-qadam-a .dqa-tok .th-toast { position: absolute; z-index: 5; font-family: var(--f-ui); background: #F4F0E8; color: var(--ink); }

/* =====================================================================================================================
   Tests: the first thousand steps
   ===================================================================================================================== */
.dir-qadam-a .dqa-still { position: relative; margin: calc(-1 * var(--dqa-pad)) calc(-1 * var(--dqa-pad)) 0; height: clamp(340px, 31vw, 440px); overflow: hidden; }
.dqa-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }   /* the shoes sit in the lower half of the still: keep them in the crop */
.dqa-still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 26, 22, .96), rgba(30, 26, 22, .1) 64%), linear-gradient(90deg, rgba(30, 26, 22, .6), transparent 60%); }
.dqa-still .dqa-hd { position: absolute; z-index: 1; left: var(--dqa-pad); right: var(--dqa-pad); bottom: clamp(24px, 3vw, 40px); }
.dir-qadam-a .dqa-tests { gap: clamp(28px, 3.4vw, 48px); }
.dir-qadam-a .dqa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: clamp(14px, 1.8vw, 24px); }
.dir-qadam-a .th-test.dqa-tc { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; position: relative; border-radius: 4px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .8); overflow: hidden; }
.dir-qadam-a .th-test.dqa-tc:hover { background: var(--paper); }
.dqa-tc__trail { position: relative; height: 92px; display: flex; align-items: center; gap: 20px; padding: 0 22px; overflow: hidden; background: linear-gradient(90deg, #DDD5C7, #EFEBE4); border-bottom: 1px solid rgba(18, 18, 18, .1); }
.dqa-tc__fp { flex: none; width: 20px; height: 58px; fill: color-mix(in srgb, var(--sole) 80%, #5f5547); filter: drop-shadow(1px 1.2px 0 rgba(255, 255, 255, .8)); }
.dqa-tc__fp:nth-child(odd) { translate: 0 -9px; rotate: -6deg; }
.dqa-tc__fp:nth-child(even) { translate: 0 9px; rotate: 6deg; scale: -1 1; }
.dqa-tc__no { margin: 0; padding: 18px clamp(22px, 2.4vw, 30px) 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ox-d); }
.dqa-tc__rows { flex: 1; margin: 0; padding: 6px clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px); }
.dqa-tc__row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid rgba(18, 18, 18, .12); }
.dqa-tc__row:first-child { border-top: 0; }
.dir-qadam-a .dqa-tc dt { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ox-d); }
.dir-qadam-a .dqa-tc__row--why dt { color: #4a443d; }
.dir-qadam-a .dqa-tc dd { margin: 0; text-wrap: pretty; }
.dqa-tc__row dd { font: 400 clamp(19px, 1.6vw, 22px)/1.28 var(--f-disp); letter-spacing: -.015em; }
.dqa-tc__row--why dd { font: 400 15.5px/1.5 var(--f-ui); letter-spacing: 0; color: #4a443d; }
.dqa-tc__foot { min-height: 116px; display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: var(--stone); border-top: 1px solid rgba(18, 18, 18, .1); }
.dqa-tc__foot > div { display: flex; flex-direction: column; gap: 6px; padding: 16px clamp(22px, 2.4vw, 30px) 20px; }
.dqa-tc__foot > div + div { border-left: 1px solid rgba(18, 18, 18, .1); }
.dqa-tc__foot dd { font-size: 15px; line-height: 1.4; color: var(--ink); }

/* ---------- reveals ---------- */
.th-js .dir-qadam-a [data-dir-reveal] { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.th-js .dir-qadam-a [data-dir-reveal].dqa-in { opacity: 1; translate: 0 0; }
.th-js .dir-qadam-a .th-test.dqa-tc[data-dir-reveal] { opacity: 0; translate: 0 36px; rotate: .8deg; transition: opacity .6s ease, translate .9s var(--ease), rotate .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.th-js .dir-qadam-a .th-test.dqa-tc.dqa-in, .th-js .dir-qadam-a .th-test.dqa-tc.is-in { opacity: 1; translate: 0 0; rotate: 0deg; }

/* =====================================================================================================================
   Motion (scroll-driven): gated on html.th-js, a normal-motion screen
   ===================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .th-js .dqa-sheet .dqa-pen { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .02) * 1.35, 1)); }
  .th-js .dqa-sheet .dqa-pen--m { stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .3) * 2.2, 1)); }
  .th-js .dqa-trace__t { opacity: clamp(0, (var(--p) - .6) * 4, 1); }
  /* 02: a print is pressed in turn; the slip arrives with it, and what has been pressed stays pressed (--pm) */
  .th-js .dqa-floor { --p: 0; --pm: 0; }
  .th-js .dqa-st { --q: clamp(0, calc((var(--pm) - .06 - var(--i) * .17) / .15), 1); }
  .th-js .dqa-print { opacity: calc(var(--q) * (.45 + var(--m) * .55) + .0); scale: calc(1.2 - .2 * var(--q)); translate: 0 calc((1 - var(--q)) * -10px); }
  .th-js .dqa-st__slip { opacity: calc(.18 + .82 * var(--q)); translate: 0 calc((1 - var(--q)) * 20px); }
  /* 04: the construction lines are drawn, the pins drop in */
  .th-js .dqa-opt__grid { --p: 0; }
  .th-js .dqa-cl { stroke-dashoffset: calc(1 - clamp(0, var(--p) * 2.6, 1)); }
  .th-js .dqa-pin { opacity: clamp(0, calc(var(--p) * 5 - var(--i) * .45), 1); }
}
/* 03: the pinned rail (a wide screen, normal motion): the track is tall, the stage sticks, the rail slides, the awl passes */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) and (min-height: 600px) {
  .th-js .dqa-track { --p: 0; height: calc(var(--sh) + 150vh); }
  .th-js .dqa-stage { position: sticky; top: 84px; height: var(--sh); --sw: clamp(250px, calc((var(--sh) - 230px) * 1.08), 380px); }
  .th-js .dqa-rail { overflow: visible; }
  .th-js .dqa-line { position: absolute; left: 0; top: 0; bottom: 70px; display: flex; flex-direction: row; align-items: stretch; gap: 28px; width: max-content; padding: 20px clamp(24px, 7vw, 100px) 20px clamp(24px, 3vw, 44px); will-change: transform; }
  /* the heading hangs at the top of its pocket and the piece rests on the bench, so the awl (a hand's height above the bench) never stands on a heading,
     and the pocket fills the stage whatever the height of its piece */
  .th-js .dqa-stn { --q: 0; flex: none; width: var(--sw); justify-content: space-between; }
  .th-js .dqa-stn__vp { max-height: 270px; }
  .th-js .dqa-stn__note { max-width: 40ch; }
  .th-js .dqa-stn:not(.is-cur) .dqa-stn__nm { color: #b7aea0; }
  .th-js .dqa-bench { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: block; height: 70px; background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 7%),
    repeating-linear-gradient(88deg, rgba(60, 36, 16, .0) 0 38px, rgba(60, 36, 16, .22) 38px 39px, rgba(60, 36, 16, 0) 39px 120px),
    repeating-linear-gradient(0deg, rgba(60, 36, 16, .16) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #c49a69, #9b7146 55%, #7d5632);
    box-shadow: 0 -14px 22px -10px rgba(0, 0, 0, .6); }
  .th-js .dqa-awl { position: absolute; z-index: 4; display: block; left: 0; bottom: 56px; width: clamp(96px, 10vw, 150px); height: auto; translate: calc(var(--ax, 8%) - 3%) 0; rotate: -14deg; transform-origin: 8% 96%; filter: drop-shadow(8px 14px 8px rgba(0, 0, 0, .55)); pointer-events: none; }
}
/* 03 on a phone: a vertical bench, each station inks as it comes into view (--q is set per station by the script) */
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  .th-js .dqa-stn { --q: 0; }
}

/* =====================================================================================================================
   Narrower
   ===================================================================================================================== */
@media (max-width: 1099px) {
  .dqa-wall__in { display: flex; flex-direction: column; align-items: stretch; padding: 24px 0 28px; }
  .dqa-last { width: min(62%, 380px); margin: 0 auto -12px; }
  .dqa-string { display: none; }
  .dqa-tag { margin: 0 clamp(14px, 4vw, 40px); }
  .dqa-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
  .dqa-sheet__say { padding: 10px 12px 14px; }
  .dqa-sheet__q { font-size: 19px; }
  .dqa-sheet__a { font-size: 13px; line-height: 1.42; }
  .dqa-sheet__say--move { padding-top: 40px; }
  .dqa-floor { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 16px 26px; }
  .dqa-st { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .dqa-st__ground { height: auto; min-height: 150px; }
  .dqa-print { top: 12px; --dy: 12px; width: 44px; margin-left: -22px; }
  .dqa-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dqa-opt__grid { grid-template-columns: minmax(0, 1fr); }
  .dqa-opt__right { position: static; max-width: 460px; width: 100%; margin: 0 auto; }
  .dqa-tok__row { grid-template-columns: minmax(0, 1fr); }
  .dqa-hides { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 12px !important; }
  .dqa-rail-bar { display: none; }
  .dir-qadam-a .dqa-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .dir-qadam-a .dqa-sec { border-radius: 22px; }
  .dqa-people { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dqa-sheet { max-width: 440px; margin-inline: auto; }
  .dqa-pers__cap { max-width: 440px; margin-inline: auto; width: 100%; }
  .dqa-sheet__say--move { padding-top: 60px; }
  .dqa-sheet__a { font-size: 14.5px; }
  .dqa-sheet__q { font-size: 24px; }
  .dqa-hd--bench { grid-template-columns: minmax(0, 1fr); }
  .dqa-macro { width: min(100%, 280px); }
  .dqa-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 0; }
  .dqa-line { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 20px 14px 24px; }
  .dqa-stn { gap: 12px; }
  .dqa-tab__v { display: none; }
  .dqa-tab { justify-content: center; padding: 0; width: 44px; border-radius: 22px; }
  .dqa-tab__n { font-size: 11px; }
  .dqa-hides { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dqa-eye { flex: 1 1 76px; }
  .dqa-buckle { margin-left: 0; width: 100%; padding-left: 22px; }
  .dqa-tc__foot { grid-template-columns: minmax(0, 1fr); }
  .dqa-tc__foot > div + div { border-left: 0; border-top: 1px solid rgba(18, 18, 18, .1); }
  .dqa-st { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .dqa-print { width: 36px; margin-left: -18px; }
}
@media (max-width: 420px) {
  .dqa-hides { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dqa-hide { width: min(100%, 150px); }
  .dir-qadam-a .dqa-sec .th-hd__title { font-size: clamp(36px, 11vw, 46px); }
}

/* =====================================================================================================================
   Calm: reduced motion, or a screen under 600px tall. Every finished state, static; nothing pinned, nothing waiting to be scrolled to.
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .dir-qadam-a [data-dir-reveal], .dir-qadam-a .th-test.dqa-tc[data-dir-reveal] { opacity: 1 !important; translate: none !important; rotate: none !important; }
  .dir-qadam-a .dqa-sheet__in, .dir-qadam-a .dqa-pin, .dir-qadam-a .dqa-dec__body, .dir-qadam-a .dqa-hide__skin, .dir-qadam-a .dqa-tab, .dir-qadam-a .dqa-hl { transition: none !important; }
  .dqa-sheet { transition: none; }
  .dqa-sheet:hover { translate: none; }
  .dqa-fp { --q: 1 !important; opacity: .9 !important; transform: none !important; }
  .dqa-floor, .dqa-st { --p: 1; --pm: 1; --q: 1 !important; }
  .dqa-print { opacity: 1 !important; scale: none !important; translate: none !important; }
  .dqa-st__slip { opacity: 1 !important; translate: none !important; }
  .dqa-stn { --q: 1 !important; }
  .dqa-track { height: auto !important; }
  .dqa-stage { position: static !important; height: auto !important; }
  .dqa-line { position: static !important; transform: none !important; width: auto !important; height: auto !important; padding: 20px 20px 26px !important; }
  .dqa-awl, .dqa-bench { display: none !important; }
  .dqa-pin { opacity: 1 !important; }
  .dqa-cl { stroke-dashoffset: 0 !important; }
  .dqa-trace__t { opacity: 1 !important; }
  .dqa-sheet .dqa-pen { stroke-dashoffset: 0 !important; }
}
/* the card flips only with motion allowed: otherwise the face is swapped */
@media (prefers-reduced-motion: reduce) {
  .dqa-sheet__in { transform: none !important; transform-style: flat; }
  .dqa-sheet__face { backface-visibility: visible; }
  .dqa-sheet__back { transform: none; visibility: hidden; }
  .dqa-sheet[aria-pressed="true"] .dqa-sheet__front { visibility: hidden; }
  .dqa-sheet[aria-pressed="true"] .dqa-sheet__back { visibility: visible; }
}